Address reviewer's comment

- apply patch
- remove validation for radio
- add disable class to submit button

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

@@ -321,10 +321,7 @@ export default {
       />
     </gl-form-group>
 
-    <gl-form-group
-      :state="form.fields.visibility.state"
-      :invalid-feedback="s__('Please select a visibility level.')"
-    >
+    <gl-form-group>
       <label>
         {{ s__('ForkProject|Visibility level') }}
         <gl-link :href="visibilityHelpPath" target="_blank">
@@ -333,7 +330,6 @@ export default {
       </label>
       <gl-form-radio-group
         v-model="form.fields.visibility.value"
-        v-validation:[form.showValidation]
         data-testid="fork-visibility-radio-group"
         name="visibility"
         required
@@ -359,6 +355,7 @@ export default {
         type="submit"
         category="primary"
         variant="confirm"
+        class="js-no-auto-disable"
         data-testid="submit-button"
         data-qa-selector="fork_project_button"
         :loading="isSaving"

locale/gitlab.pot

@@ -23795,9 +23795,6 @@ msgstr ""
 msgid "Please select a valid target branch"
 msgstr ""
 
-msgid "Please select a visibility level."
-msgstr ""
-
 msgid "Please select and add a member"
 msgstr ""
 

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

-import { GlFormInputGroup, GlFormInput } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlFormInputGroup, GlFormInput, GlForm } from '@gitlab/ui';
+import { mount, shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { kebabCase } from 'lodash';
@@ -43,8 +43,8 @@ describe('ForkForm component', () => {
     axiosMock.onGet(DEFAULT_PROPS.endpoint).replyOnce(statusCode, data);
   };
 
-  const createComponent = (props = {}, data = {}) => {
-    wrapper = shallowMount(ForkForm, {
+  const createComponentFactory = (mountFn) => (props = {}, data = {}) => {
+    wrapper = mountFn(ForkForm, {
       provide: {
         newGroupPath: 'some/groups/path',
         visibilityHelpPath: 'some/visibility/help/path',
@@ -65,6 +65,9 @@ describe('ForkForm component', () => {
     });
   };
 
+  const createComponent = createComponentFactory(shallowMount);
+  const createFullComponent = createComponentFactory(mount);
+
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
     window.gon = {
@@ -236,7 +239,7 @@ describe('ForkForm component', () => {
       jest.spyOn(urlUtility, 'redirectTo').mockImplementation();
 
       mockGetRequest();
-      createComponent(
+      createFullComponent(
         {},
         {
           namespaces: MOCK_NAMESPACES_RESPONSE,
@@ -247,58 +250,88 @@ describe('ForkForm component', () => {
       );
     });
 
-    const namespaceId = MOCK_NAMESPACES_RESPONSE[1].id;
+    const selectedMockNamespaceIndex = 1;
+    const namespaceId = MOCK_NAMESPACES_RESPONSE[selectedMockNamespaceIndex].id;
+
+    const fillForm = async () => {
+      const namespaceOptions = findForkUrlInput().findAll('option');
+
+      await namespaceOptions.at(selectedMockNamespaceIndex + 1).setSelected();
+    };
 
     const submitForm = async () => {
-      findForkUrlInput().vm.$emit('input', { id: namespaceId });
-      await wrapper.vm.onSubmit();
+      await fillForm();
+      const form = wrapper.find(GlForm);
+
+      await form.trigger('submit');
+      await wrapper.vm.$nextTick();
     };
 
-    it('make POST request with project param', async () => {
-      jest.spyOn(axios, 'post');
+    describe('with invalid form', () => {
+      it('does not make POST request', async () => {
+        jest.spyOn(axios, 'post');
+
+        expect(axios.post).not.toHaveBeenCalled();
+      });
 
-      await submitForm();
+      it('does not redirect the current page', async () => {
+        await submitForm();
 
-      const {
-        projectId,
-        projectDescription,
-        projectName,
-        projectPath,
-        projectVisibility,
-      } = DEFAULT_PROPS;
-
-      const url = `/api/${GON_API_VERSION}/projects/${projectId}/fork`;
-      const project = {
-        description: projectDescription,
-        id: projectId,
-        name: projectName,
-        namespace_id: namespaceId,
-        path: projectPath,
-        visibility: projectVisibility,
-      };
-
-      expect(axios.post).toHaveBeenCalledWith(url, project);
+        expect(urlUtility.redirectTo).not.toHaveBeenCalled();
+      });
     });
 
-    it('redirect to POST web_url response', async () => {
-      const webUrl = `new/fork-project`;
-      jest.spyOn(axios, 'post').mockResolvedValue({ data: { web_url: webUrl } });
+    describe('with valid form', () => {
+      beforeEach(() => {
+        fillForm();
+      });
 
-      await submitForm();
+      it('make POST request with project param', async () => {
+        jest.spyOn(axios, 'post');
+
+        await submitForm();
+
+        const {
+          projectId,
+          projectDescription,
+          projectName,
+          projectPath,
+          projectVisibility,
+        } = DEFAULT_PROPS;
+
+        const url = `/api/${GON_API_VERSION}/projects/${projectId}/fork`;
+        const project = {
+          description: projectDescription,
+          id: projectId,
+          name: projectName,
+          namespace_id: namespaceId,
+          path: projectPath,
+          visibility: projectVisibility,
+        };
 
-      expect(urlUtility.redirectTo).toHaveBeenCalledWith(webUrl);
-    });
+        expect(axios.post).toHaveBeenCalledWith(url, project);
+      });
+
+      it('redirect to POST web_url response', async () => {
+        const webUrl = `new/fork-project`;
+        jest.spyOn(axios, 'post').mockResolvedValue({ data: { web_url: webUrl } });
+
+        await submitForm();
+
+        expect(urlUtility.redirectTo).toHaveBeenCalledWith(webUrl);
+      });
 
-    it('display flash when POST is unsuccessful', async () => {
-      const dummyError = 'Fork project failed';
+      it('display flash when POST is unsuccessful', async () => {
+        const dummyError = 'Fork project failed';
 
-      jest.spyOn(axios, 'post').mockRejectedValue(dummyError);
+        jest.spyOn(axios, 'post').mockRejectedValue(dummyError);
 
-      await submitForm();
+        await submitForm();
 
-      expect(urlUtility.redirectTo).not.toHaveBeenCalled();
-      expect(createFlash).toHaveBeenCalledWith({
-        message: dummyError,
+        expect(urlUtility.redirectTo).not.toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledWith({
+          message: dummyError,
+        });
       });
     });
   });