Merge branch '327835-display-validation-for-radio-visibility' into 'master'

Add validation feedback for visibility level

See merge request gitlab-org/gitlab!62300

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

@@ -113,7 +113,6 @@ export default {
         }),
         visibility: initFormField({
           value: this.projectVisibility,
-          skipValidation: true,
         }),
       },
     };
@@ -326,7 +325,11 @@ export default {
       />
     </gl-form-group>
 
-    <gl-form-group>
+    <gl-form-group
+      v-validation:[form.showValidation]
+      :invalid-feedback="s__('ForkProject|Please select a visibility level')"
+      :state="form.fields.visibility.state"
+    >
       <label>
         {{ s__('ForkProject|Visibility level') }}
         <gl-link :href="visibilityHelpPath" target="_blank">

locale/gitlab.pot

@@ -14341,6 +14341,9 @@ msgstr ""
 msgid "ForkProject|Please select a namespace"
 msgstr ""
 
+msgid "ForkProject|Please select a visibility level"
+msgstr ""
+
 msgid "ForkProject|Private"
 msgstr ""
 

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

@@ -261,7 +261,7 @@ describe('ForkForm component', () => {
   });
 
   describe('onSubmit', () => {
-    beforeEach(() => {
+    const setupComponent = (fields = {}) => {
       jest.spyOn(urlUtility, 'redirectTo').mockImplementation();
 
       mockGetRequest();
@@ -271,9 +271,14 @@ describe('ForkForm component', () => {
           namespaces: MOCK_NAMESPACES_RESPONSE,
           form: {
             state: true,
+            ...fields,
           },
         },
       );
+    };
+
+    beforeEach(() => {
+      setupComponent();
     });
 
     const selectedMockNamespaceIndex = 1;
@@ -305,6 +310,23 @@ describe('ForkForm component', () => {
 
         expect(urlUtility.redirectTo).not.toHaveBeenCalled();
       });
+
+      it('does not make POST request if no visbility is checked', async () => {
+        jest.spyOn(axios, 'post');
+
+        setupComponent({
+          fields: {
+            visibility: {
+              value: null,
+            },
+          },
+        });
+
+        await submitForm();
+
+        expect(wrapper.find('[name="visibility"]:checked').exists()).toBe(false);
+        expect(axios.post).not.toHaveBeenCalled();
+      });
     });
 
     describe('with valid form', () => {