Replace form form props with provide/inject

Replaced the fork form paths with provide/inject

app/assets/javascripts/pages/projects/forks/new/components/app.vue

@@ -10,38 +10,6 @@ export default {
       type: String,
       required: true,
     },
-    endpoint: {
-      type: String,
-      required: true,
-    },
-    projectFullPath: {
-      type: String,
-      required: true,
-    },
-    projectId: {
-      type: String,
-      required: true,
-    },
-    projectName: {
-      type: String,
-      required: true,
-    },
-    projectPath: {
-      type: String,
-      required: true,
-    },
-    projectDescription: {
-      type: String,
-      required: true,
-    },
-    projectVisibility: {
-      type: String,
-      required: true,
-    },
-    restrictedVisibilityLevels: {
-      type: Array,
-      required: true,
-    },
   },
 };
 </script>
@@ -62,16 +30,7 @@ export default {
       </p>
     </div>
     <div class="col-lg-9">
-      <fork-form
-        :endpoint="endpoint"
-        :project-full-path="projectFullPath"
-        :project-id="projectId"
-        :project-name="projectName"
-        :project-path="projectPath"
-        :project-description="projectDescription"
-        :project-visibility="projectVisibility"
-        :restricted-visibility-levels="restrictedVisibilityLevels"
-      />
+      <fork-form />
     </div>
   </div>
 </template>

app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue

@@ -72,40 +72,29 @@ export default {
     visibilityHelpPath: {
       default: '',
     },
-  },
-  props: {
     endpoint: {
-      type: String,
-      required: true,
+      default: '',
     },
     projectFullPath: {
-      type: String,
-      required: true,
+      default: '',
     },
     projectId: {
-      type: String,
-      required: true,
+      default: '',
     },
     projectName: {
-      type: String,
-      required: true,
+      default: '',
     },
     projectPath: {
-      type: String,
-      required: true,
+      default: '',
     },
     projectDescription: {
-      type: String,
-      required: false,
       default: '',
     },
     projectVisibility: {
-      type: String,
-      required: true,
+      default: '',
     },
     restrictedVisibilityLevels: {
-      type: Array,
-      required: true,
+      default: [],
     },
   },
   data() {

app/assets/javascripts/pages/projects/forks/new/index.js

@@ -23,15 +23,8 @@ new Vue({
   provide: {
     newGroupPath,
     visibilityHelpPath,
-  },
-  render(h) {
-    return h(App, {
-      props: {
-        forkIllustration,
     endpoint,
-        newGroupPath,
     projectFullPath,
-        visibilityHelpPath,
     projectId,
     projectName,
     projectPath,
@@ -39,6 +32,11 @@ new Vue({
     projectVisibility,
     restrictedVisibilityLevels: JSON.parse(restrictedVisibilityLevels),
   },
+  render(h) {
+    return h(App, {
+      props: {
+        forkIllustration,
+      },
     });
   },
 });

spec/frontend/pages/projects/forks/new/components/app_spec.js

 import { shallowMount } from '@vue/test-utils';
 import App from '~/pages/projects/forks/new/components/app.vue';
+import ForkForm from '~/pages/projects/forks/new/components/fork_form.vue';
 
 describe('App component', () => {
   let wrapper;
 
   const DEFAULT_PROPS = {
     forkIllustration: 'illustrations/project-create-new-sm.svg',
-    endpoint: '/some/project-full-path/-/forks/new.json',
-    projectFullPath: '/some/project-full-path',
-    projectId: '10',
-    projectName: 'Project Name',
-    projectPath: 'project-name',
-    projectDescription: 'some project description',
-    projectVisibility: 'private',
-    restrictedVisibilityLevels: [],
   };
 
   const createComponent = (props = {}) => {
@@ -37,7 +30,7 @@ describe('App component', () => {
     expect(wrapper.find('img').attributes('src')).toBe('illustrations/project-create-new-sm.svg');
   });
 
-  it('renders ForkForm component with prop', () => {
-    expect(wrapper.props()).toEqual(expect.objectContaining(DEFAULT_PROPS));
+  it('renders ForkForm component', () => {
+    expect(wrapper.findComponent(ForkForm).exists()).toBe(true);
   });
 });

spec/frontend/pages/projects/forks/new/components/fork_form_spec.js

@@ -40,7 +40,9 @@ describe('ForkForm component', () => {
     },
   ];
 
-  const DEFAULT_PROPS = {
+  const DEFAULT_PROVIDE = {
+    newGroupPath: 'some/groups/path',
+    visibilityHelpPath: 'some/visibility/help/path',
     endpoint: '/some/project-full-path/-/forks/new.json',
     projectFullPath: '/some/project-full-path',
     projectId: '10',
@@ -52,18 +54,14 @@ describe('ForkForm component', () => {
   };
 
   const mockGetRequest = (data = {}, statusCode = httpStatus.OK) => {
-    axiosMock.onGet(DEFAULT_PROPS.endpoint).replyOnce(statusCode, data);
+    axiosMock.onGet(DEFAULT_PROVIDE.endpoint).replyOnce(statusCode, data);
   };
 
-  const createComponentFactory = (mountFn) => (props = {}, data = {}) => {
+  const createComponentFactory = (mountFn) => (provide = {}, data = {}) => {
     wrapper = mountFn(ForkForm, {
       provide: {
-        newGroupPath: 'some/groups/path',
-        visibilityHelpPath: 'some/visibility/help/path',
-      },
-      propsData: {
-        ...DEFAULT_PROPS,
-        ...props,
+        ...DEFAULT_PROVIDE,
+        ...provide,
       },
       data() {
         return {
@@ -111,7 +109,7 @@ describe('ForkForm component', () => {
     mockGetRequest();
     createComponent();
 
-    const { projectFullPath } = DEFAULT_PROPS;
+    const { projectFullPath } = DEFAULT_PROVIDE;
     const cancelButton = wrapper.find('[data-testid="cancel-button"]');
 
     expect(cancelButton.attributes('href')).toBe(projectFullPath);
@@ -130,10 +128,10 @@ describe('ForkForm component', () => {
     mockGetRequest();
     createComponent();
 
-    expect(findForkNameInput().attributes('value')).toBe(DEFAULT_PROPS.projectName);
-    expect(findForkSlugInput().attributes('value')).toBe(DEFAULT_PROPS.projectPath);
+    expect(findForkNameInput().attributes('value')).toBe(DEFAULT_PROVIDE.projectName);
+    expect(findForkSlugInput().attributes('value')).toBe(DEFAULT_PROVIDE.projectPath);
     expect(findForkDescriptionTextarea().attributes('value')).toBe(
-      DEFAULT_PROPS.projectDescription,
+      DEFAULT_PROVIDE.projectDescription,
     );
   });
 
@@ -164,7 +162,7 @@ describe('ForkForm component', () => {
     it('make GET request from endpoint', async () => {
       await axios.waitForAll();
 
-      expect(axiosMock.history.get[0].url).toBe(DEFAULT_PROPS.endpoint);
+      expect(axiosMock.history.get[0].url).toBe(DEFAULT_PROVIDE.endpoint);
     });
 
     it('generate default option', async () => {
@@ -469,7 +467,7 @@ describe('ForkForm component', () => {
           projectName,
           projectPath,
           projectVisibility,
-        } = DEFAULT_PROPS;
+        } = DEFAULT_PROVIDE;
 
         const url = `/api/${GON_API_VERSION}/projects/${projectId}/fork`;
         const project = {