Merge branch 'cherry-pick-c099bb81' into 'master'

Merge branch '15013-auto-kebab-project-slug' into '15013-fork-info-vue'

See merge request gitlab-org/gitlab!58639

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

@@ -13,6 +13,7 @@ import {
   GlFormRadioGroup,
   GlFormSelect,
 } from '@gitlab/ui';
+import { kebabCase } from 'lodash';
 import { buildApiUrl } from '~/api/api_utils';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -145,6 +146,10 @@ export default {
         this.fork.visibility = visibility;
       }
     },
+    // eslint-disable-next-line func-names
+    'fork.name': function (newVal) {
+      this.fork.slug = kebabCase(newVal);
+    },
   },
   mounted() {
     this.fetchNamespaces();

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

-import { GlForm, GlFormInputGroup } from '@gitlab/ui';
+import { GlForm, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { kebabCase } from 'lodash';
 import createFlash from '~/flash';
 import httpStatus from '~/lib/utils/http_status';
 import * as urlUtility from '~/lib/utils/url_utility';
@@ -59,6 +60,7 @@ describe('ForkForm component', () => {
       },
       stubs: {
         GlFormInputGroup,
+        GlFormInput,
       },
     });
   };
@@ -204,6 +206,37 @@ describe('ForkForm component', () => {
     });
   });
 
+  describe('project slug', () => {
+    const projectPath = 'some other project slug';
+
+    beforeEach(() => {
+      mockGetRequest();
+      createComponent({
+        projectPath,
+      });
+    });
+
+    it('initially loads slug without kebab-case transformation', () => {
+      expect(findForkSlugInput().attributes('value')).toBe(projectPath);
+    });
+
+    it('changes to kebab case when project name changes', async () => {
+      const newInput = `${projectPath}1`;
+      findForkNameInput().vm.$emit('input', newInput);
+      await wrapper.vm.$nextTick();
+
+      expect(findForkSlugInput().attributes('value')).toBe(kebabCase(newInput));
+    });
+
+    it('does not change to kebab case when project slug is changed manually', async () => {
+      const newInput = `${projectPath}1`;
+      findForkSlugInput().vm.$emit('input', newInput);
+      await wrapper.vm.$nextTick();
+
+      expect(findForkSlugInput().attributes('value')).toBe(newInput);
+    });
+  });
+
   describe('visibility level', () => {
     it.each`
       project       | namespace     | privateIsDisabled | internalIsDisabled | publicIsDisabled