From fa9a2e002fd3dbcd539f83d8e2621ab9edad25cb Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 3 Mar 2021 01:12:11 -0800
Subject: [PATCH] Kebab slug when name is changed

Part of issue: https://gitlab.com/gitlab-org/gitlab/-/issues/15013
---
 .../forks/new/components/fork_form.vue        |  5 +++
 .../forks/new/components/fork_form_spec.js    | 35 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

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 fd35c16ab6388e..c797ce61a29511 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
@@ -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();
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 5aafb1e8d2ec06..e7f945f80d9faf 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,7 +1,8 @@
-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';
@@ -57,6 +58,7 @@ describe('ForkForm component', () => {
       },
       stubs: {
         GlFormInputGroup,
+        GlFormInput,
       },
     });
   };
@@ -202,6 +204,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
-- 
GitLab