From 1080318a3f03bde47526c9a53d033f83092ecb33 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 7 Apr 2021 20:10:32 -0700
Subject: [PATCH 1/4] Use validation directive for fork form

Replace the browser validation with our validation directive.
---
 .../forks/new/components/fork_form.vue        | 128 ++++++++++++++----
 locale/gitlab.pot                             |   6 +
 spec/features/projects/fork_spec.rb           |   2 +-
 .../forks/new/components/fork_form_spec.js    |  99 +++++++-------
 4 files changed, 153 insertions(+), 82 deletions(-)

diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index 288d671168223b..a7156e0522b86a 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
@@ -20,6 +20,7 @@ import axios from '~/lib/utils/axios_utils';
 import csrf from '~/lib/utils/csrf';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
+import validation from '~/vue_shared/directives/validation';
 
 const PRIVATE_VISIBILITY = 'private';
 const INTERNAL_VISIBILITY = 'internal';
@@ -31,6 +32,13 @@ const ALLOWED_VISIBILITY = {
   public: [INTERNAL_VISIBILITY, PRIVATE_VISIBILITY, PUBLIC_VISIBILITY],
 };
 
+const initFormField = ({ value, required = true, skipValidation = false }) => ({
+  value,
+  required,
+  state: skipValidation ? true : null,
+  feedback: null,
+});
+
 export default {
   components: {
     GlForm,
@@ -46,6 +54,9 @@ export default {
     GlFormRadioGroup,
     GlFormSelect,
   },
+  directives: {
+    validation: validation(),
+  },
   inject: {
     newGroupPath: {
       default: '',
@@ -77,7 +88,8 @@ export default {
     },
     projectDescription: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     projectVisibility: {
       type: String,
@@ -85,16 +97,30 @@ export default {
     },
   },
   data() {
+    const form = {
+      state: false,
+      showValidation: false,
+      fields: {
+        namespace: initFormField({
+          value: null,
+        }),
+        name: initFormField({ value: this.projectName }),
+        slug: initFormField({ value: this.projectPath }),
+        description: initFormField({
+          value: this.projectDescription,
+          required: false,
+          skipValidation: true,
+        }),
+        visibility: initFormField({
+          value: this.projectVisibility,
+          skipValidation: true,
+        }),
+      },
+    };
     return {
       isSaving: false,
       namespaces: [],
-      selectedNamespace: {},
-      fork: {
-        name: this.projectName,
-        slug: this.projectPath,
-        description: this.projectDescription,
-        visibility: this.projectVisibility,
-      },
+      form,
     };
   },
   computed: {
@@ -106,7 +132,7 @@ export default {
     },
     namespaceAllowedVisibility() {
       return (
-        ALLOWED_VISIBILITY[this.selectedNamespace.visibility] ||
+        ALLOWED_VISIBILITY[this.form.fields.namespace.value?.visibility] ||
         ALLOWED_VISIBILITY[PUBLIC_VISIBILITY]
       );
     },
@@ -139,16 +165,17 @@ export default {
     },
   },
   watch: {
-    selectedNamespace(newVal) {
+    // eslint-disable-next-line func-names
+    'form.fields.namespace.value': function (newVal) {
       const { visibility } = newVal;
 
       if (this.projectAllowedVisibility.includes(visibility)) {
-        this.fork.visibility = visibility;
+        this.form.fields.visibility.value = visibility;
       }
     },
     // eslint-disable-next-line func-names
-    'fork.name': function (newVal) {
-      this.fork.slug = kebabCase(newVal);
+    'form.fields.name.value': function (newVal) {
+      this.form.fields.slug.value = kebabCase(newVal);
     },
   },
   mounted() {
@@ -166,19 +193,24 @@ export default {
       );
     },
     async onSubmit() {
+      this.form.showValidation = true;
+
+      if (!this.form.state) {
+        return;
+      }
+
       this.isSaving = true;
 
       const { projectId } = this;
-      const { name, slug, description, visibility } = this.fork;
-      const { id: namespaceId } = this.selectedNamespace;
+      const { name, slug, description, visibility, namespace } = this.form.fields;
 
       const postParams = {
         id: projectId,
-        name,
-        namespace_id: namespaceId,
-        path: slug,
-        description,
-        visibility,
+        name: name.value,
+        namespace_id: namespace.value.id,
+        path: slug.value,
+        description: description.value,
+        visibility: visibility.value,
       };
 
       const forkProjectPath = `/api/:version/projects/:id/fork`;
@@ -198,16 +230,34 @@ export default {
 </script>
 
 <template>
-  <gl-form method="POST" @submit.prevent="onSubmit">
+  <gl-form novalidate method="POST" @submit.prevent="onSubmit">
     <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
 
-    <gl-form-group label="Project name" label-for="fork-name">
-      <gl-form-input id="fork-name" v-model="fork.name" data-testid="fork-name-input" required />
+    <gl-form-group
+      label="Project name"
+      label-for="fork-name"
+      :invalid-feedback="form.fields.name.feedback"
+    >
+      <gl-form-input
+        id="fork-name"
+        v-model="form.fields.name.value"
+        v-validation:[form.showValidation]
+        name="name"
+        data-testid="fork-name-input"
+        :state="form.fields.name.state"
+        required
+      />
     </gl-form-group>
 
     <div class="gl-md-display-flex">
       <div class="gl-flex-basis-half">
-        <gl-form-group label="Project URL" label-for="fork-url" class="gl-md-mr-3">
+        <gl-form-group
+          label="Project URL"
+          label-for="fork-url"
+          class="gl-md-mr-3"
+          :state="form.fields.namespace.state"
+          :invalid-feedback="s__('ForkProject|Please select a namespace')"
+        >
           <gl-form-input-group>
             <template #prepend>
               <gl-input-group-text>
@@ -216,9 +266,12 @@ export default {
             </template>
             <gl-form-select
               id="fork-url"
-              v-model="selectedNamespace"
+              v-model="form.fields.namespace.value"
+              v-validation:[form.showValidation]
+              name="namespace"
               data-testid="fork-url-input"
               data-qa-selector="fork_namespace_dropdown"
+              :state="form.fields.namespace.state"
               required
             >
               <template slot="first">
@@ -232,11 +285,19 @@ export default {
         </gl-form-group>
       </div>
       <div class="gl-flex-basis-half">
-        <gl-form-group label="Project slug" label-for="fork-slug" class="gl-md-ml-3">
+        <gl-form-group
+          label="Project slug"
+          label-for="fork-slug"
+          class="gl-md-ml-3"
+          :invalid-feedback="form.fields.slug.feedback"
+        >
           <gl-form-input
             id="fork-slug"
-            v-model="fork.slug"
+            v-model="form.fields.slug.value"
+            v-validation:[form.showValidation]
             data-testid="fork-slug-input"
+            name="slug"
+            :state="form.fields.slug.state"
             required
           />
         </gl-form-group>
@@ -253,12 +314,17 @@ export default {
     <gl-form-group label="Project description (optional)" label-for="fork-description">
       <gl-form-textarea
         id="fork-description"
-        v-model="fork.description"
+        v-model="form.fields.description.value"
         data-testid="fork-description-textarea"
+        name="description"
+        :state="form.fields.description.state"
       />
     </gl-form-group>
 
-    <gl-form-group>
+    <gl-form-group
+      :state="form.fields.visibility.state"
+      :invalid-feedback="s__('Please select a visibility level.')"
+    >
       <label>
         {{ s__('ForkProject|Visibility level') }}
         <gl-link :href="visibilityHelpPath" target="_blank">
@@ -266,8 +332,10 @@ export default {
         </gl-link>
       </label>
       <gl-form-radio-group
-        v-model="fork.visibility"
+        v-model="form.fields.visibility.value"
+        v-validation:[form.showValidation]
         data-testid="fork-visibility-radio-group"
+        name="visibility"
         required
       >
         <gl-form-radio
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 19b5dc36354111..30f05381089031 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -13999,6 +13999,9 @@ msgstr ""
 msgid "ForkProject|Internal"
 msgstr ""
 
+msgid "ForkProject|Please select a namespace"
+msgstr ""
+
 msgid "ForkProject|Private"
 msgstr ""
 
@@ -23792,6 +23795,9 @@ msgstr ""
 msgid "Please select a valid target branch"
 msgstr ""
 
+msgid "Please select a visibility level."
+msgstr ""
+
 msgid "Please select and add a member"
 msgstr ""
 
diff --git a/spec/features/projects/fork_spec.rb b/spec/features/projects/fork_spec.rb
index 2b7ea70fe5aaac..f60542bd695293 100644
--- a/spec/features/projects/fork_spec.rb
+++ b/spec/features/projects/fork_spec.rb
@@ -6,7 +6,7 @@
   include ProjectForksHelper
 
   let(:user) { create(:user) }
-  let(:project) { create(:project, :public, :repository) }
+  let(:project) { create(:project, :public, :repository, description: 'some description') }
 
   before do
     sign_in(user)
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
index 2992c7f0624564..c4a0da3556090c 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
@@ -1,4 +1,4 @@
-import { GlForm, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
+import { GlFormInputGroup, GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import AxiosMockAdapter from 'axios-mock-adapter';
@@ -99,44 +99,6 @@ describe('ForkForm component', () => {
     expect(cancelButton.attributes('href')).toBe(projectFullPath);
   });
 
-  it('make POST request with project param', async () => {
-    jest.spyOn(axios, 'post');
-
-    const namespaceId = 20;
-
-    mockGetRequest();
-    createComponent(
-      {},
-      {
-        selectedNamespace: {
-          id: namespaceId,
-        },
-      },
-    );
-
-    wrapper.find(GlForm).vm.$emit('submit', { preventDefault: () => {} });
-
-    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);
-  });
-
   it('has input with csrf token', () => {
     mockGetRequest();
     createComponent();
@@ -258,9 +220,7 @@ describe('ForkForm component', () => {
             projectVisibility: project,
           },
           {
-            selectedNamespace: {
-              visibility: namespace,
-            },
+            form: { fields: { namespace: { value: { visibility: namespace } } } },
           },
         );
 
@@ -274,17 +234,57 @@ describe('ForkForm component', () => {
   describe('onSubmit', () => {
     beforeEach(() => {
       jest.spyOn(urlUtility, 'redirectTo').mockImplementation();
+
+      mockGetRequest();
+      createComponent(
+        {},
+        {
+          namespaces: MOCK_NAMESPACES_RESPONSE,
+          form: {
+            state: true,
+          },
+        },
+      );
+    });
+
+    const namespaceId = MOCK_NAMESPACES_RESPONSE[1].id;
+
+    const submitForm = async () => {
+      findForkUrlInput().vm.$emit('input', { id: namespaceId });
+      await wrapper.vm.onSubmit();
+    };
+
+    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(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 } });
 
-      mockGetRequest();
-      createComponent();
-
-      await wrapper.vm.onSubmit();
+      await submitForm();
 
       expect(urlUtility.redirectTo).toHaveBeenCalledWith(webUrl);
     });
@@ -294,10 +294,7 @@ describe('ForkForm component', () => {
 
       jest.spyOn(axios, 'post').mockRejectedValue(dummyError);
 
-      mockGetRequest();
-      createComponent();
-
-      await wrapper.vm.onSubmit();
+      await submitForm();
 
       expect(urlUtility.redirectTo).not.toHaveBeenCalled();
       expect(createFlash).toHaveBeenCalledWith({
-- 
GitLab


From 06c7049c50742dc97ec41d226e37f03a054cf9b9 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Thu, 15 Apr 2021 02:11:55 -0700
Subject: [PATCH 2/4] Address reviewer's comment

- apply patch
- remove validation for radio
- add disable class to submit button
---
 .../forks/new/components/fork_form.vue        |   7 +-
 locale/gitlab.pot                             |   3 -
 .../forks/new/components/fork_form_spec.js    | 119 +++++++++++-------
 3 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index a7156e0522b86a..07659cf7e113a7 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/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"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 30f05381089031..82fdb66ab36cd4 100644
--- a/locale/gitlab.pot
+++ b/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 ""
 
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
index c4a0da3556090c..6d853120232112 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
@@ -1,5 +1,5 @@
-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,
+        });
       });
     });
   });
-- 
GitLab


From 5e773655a17e41e9e0a0f4104e972e273a27c3f1 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 21 Apr 2021 20:48:58 +0000
Subject: [PATCH 3/4] Apply 4 suggestion(s) to 1 file(s)

---
 .../pages/projects/forks/new/components/fork_form.vue     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index 07659cf7e113a7..281a0c47924c26 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
@@ -234,7 +234,7 @@ export default {
     <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
 
     <gl-form-group
-      label="Project name"
+      :label="__('Project name')"
       label-for="fork-name"
       :invalid-feedback="form.fields.name.feedback"
     >
@@ -252,7 +252,7 @@ export default {
     <div class="gl-md-display-flex">
       <div class="gl-flex-basis-half">
         <gl-form-group
-          label="Project URL"
+          :label="__('Project URL')"
           label-for="fork-url"
           class="gl-md-mr-3"
           :state="form.fields.namespace.state"
@@ -286,7 +286,7 @@ export default {
       </div>
       <div class="gl-flex-basis-half">
         <gl-form-group
-          label="Project slug"
+          :label="__('Project slug')"
           label-for="fork-slug"
           class="gl-md-ml-3"
           :invalid-feedback="form.fields.slug.feedback"
@@ -311,7 +311,7 @@ export default {
       </gl-link>
     </p>
 
-    <gl-form-group label="Project description (optional)" label-for="fork-description">
+    <gl-form-group :label="__('Project description (optional)')" label-for="fork-description">
       <gl-form-textarea
         id="fork-description"
         v-model="form.fields.description.value"
-- 
GitLab


From 6c1f5c1b2f0935d3280aaf0387cdcb3307244461 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Thu, 22 Apr 2021 21:36:09 -0700
Subject: [PATCH 4/4] Prevent unwated state of showValidation

---
 .../pages/projects/forks/new/components/fork_form.vue            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index 281a0c47924c26..07cc0ce46bcaa6 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
@@ -200,6 +200,7 @@ export default {
       }
 
       this.isSaving = true;
+      this.form.showValidation = false;
 
       const { projectId } = this;
       const { name, slug, description, visibility, namespace } = this.form.fields;
-- 
GitLab