Merge branch 'nl-autofill-label-create' into 'master'

Pre-fill create label form

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/116590



Merged-by: Simon Knox <simon@gitlab.com>
Approved-by: Dan Mizzi-Harris <dmizzi-harris@gitlab.com>
Approved-by: Deepika Guliani <dguliani@gitlab.com>
Approved-by: Simon Knox <simon@gitlab.com>
Reviewed-by: Dan Mizzi-Harris <dmizzi-harris@gitlab.com>
Reviewed-by: Deepika Guliani <dguliani@gitlab.com>
Co-authored-by: Nick Leonard <nleonard@gitlab.com>

app/assets/javascripts/sidebar/components/labels/labels_select_widget/constants.js

 export const SCOPED_LABEL_DELIMITER = '::';
 export const DEBOUNCE_DROPDOWN_DELAY = 200;
+export const DEFAULT_LABEL_COLOR = '#6699cc';
 
 export const DropdownVariant = {
   Sidebar: 'sidebar',

app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue

@@ -13,6 +13,7 @@ import { WORKSPACE_GROUP } from '~/issues/constants';
 import { __ } from '~/locale';
 import { workspaceLabelsQueries } from '../../../constants';
 import createLabelMutation from './graphql/create_label.mutation.graphql';
+import { DEFAULT_LABEL_COLOR } from './constants';
 
 const errorMessage = __('Error creating label.');
 
@@ -44,11 +45,16 @@ export default {
       type: String,
       required: true,
     },
+    searchKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
-      labelTitle: '',
-      selectedColor: '',
+      labelTitle: this.searchKey,
+      selectedColor: DEFAULT_LABEL_COLOR,
       labelCreateInProgress: false,
       error: undefined,
     };

spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js

@@ -8,11 +8,13 @@ import { createAlert } from '~/alert';
 import { workspaceLabelsQueries } from '~/sidebar/constants';
 import DropdownContentsCreateView from '~/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue';
 import createLabelMutation from '~/sidebar/components/labels/labels_select_widget/graphql/create_label.mutation.graphql';
+import { DEFAULT_LABEL_COLOR } from '~/sidebar/components/labels/labels_select_widget/constants';
 import {
   mockRegularLabel,
   mockSuggestedColors,
   createLabelSuccessfulResponse,
   workspaceLabelsQueryResponse,
+  workspaceLabelsQueryEmptyResponse,
 } from './mock_data';
 
 jest.mock('~/alert');
@@ -61,14 +63,16 @@ describe('DropdownContentsCreateView', () => {
     mutationHandler = createLabelSuccessHandler,
     labelCreateType = 'project',
     workspaceType = 'project',
+    labelsResponse = workspaceLabelsQueryResponse,
+    searchTerm = '',
   } = {}) => {
     const mockApollo = createMockApollo([[createLabelMutation, mutationHandler]]);
     mockApollo.clients.defaultClient.cache.writeQuery({
       query: workspaceLabelsQueries[workspaceType].query,
-      data: workspaceLabelsQueryResponse.data,
+      data: labelsResponse.data,
       variables: {
         fullPath: '',
-        searchTerm: '',
+        searchTerm,
       },
     });
 
@@ -94,7 +98,7 @@ describe('DropdownContentsCreateView', () => {
 
   it('selects a color after clicking on colored block', async () => {
     createComponent();
-    expect(findSelectedColor().attributes('style')).toBeUndefined();
+    expect(findSelectedColorText().attributes('value')).toBe(DEFAULT_LABEL_COLOR);
 
     findAllColors().at(0).vm.$emit('click', new Event('mouseclick'));
     await nextTick();
@@ -104,7 +108,7 @@ describe('DropdownContentsCreateView', () => {
 
   it('shows correct color hex code after selecting a color', async () => {
     createComponent();
-    expect(findSelectedColorText().attributes('value')).toBe('');
+    expect(findSelectedColorText().attributes('value')).toBe(DEFAULT_LABEL_COLOR);
 
     findAllColors().at(0).vm.$emit('click', new Event('mouseclick'));
     await nextTick();
@@ -123,6 +127,7 @@ describe('DropdownContentsCreateView', () => {
   it('disables a Create button if color is not set', async () => {
     createComponent();
     findLabelTitleInput().vm.$emit('input', 'Test title');
+    findSelectedColorText().vm.$emit('input', '');
     await nextTick();
 
     expect(findCreateButton().props('disabled')).toBe(true);
@@ -232,4 +237,21 @@ describe('DropdownContentsCreateView', () => {
       titleTakenError.data.labelCreate.errors[0],
     );
   });
+
+  describe('when empty labels response', () => {
+    it('is able to create label with searched text when empty response', async () => {
+      createComponent({ searchTerm: '', labelsResponse: workspaceLabelsQueryEmptyResponse });
+
+      findLabelTitleInput().vm.$emit('input', 'random');
+
+      findCreateButton().vm.$emit('click');
+      await waitForPromises();
+
+      expect(createLabelSuccessHandler).toHaveBeenCalledWith({
+        color: DEFAULT_LABEL_COLOR,
+        projectPath: '',
+        title: 'random',
+      });
+    });
+  });
 });

spec/frontend/sidebar/components/labels/labels_select_widget/mock_data.js

@@ -117,6 +117,17 @@ export const workspaceLabelsQueryResponse = {
   },
 };
 
+export const workspaceLabelsQueryEmptyResponse = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/Project/126',
+      labels: {
+        nodes: [],
+      },
+    },
+  },
+};
+
 export const issuableLabelsQueryResponse = {
   data: {
     workspace: {