Add latest changes from gitlab-org/gitlab@master

6 files changed, 49 insertions, 208 deletions

diff --git a/spec/frontend/tracking_spec.js b/spec/frontend/tracking_spec.js
index a17efdd61a9..f3233bcd771 100644
--- a/spec/frontend/tracking_spec.js
+++ b/spec/frontend/tracking_spec.js
@@ -349,7 +349,7 @@ describe('Tracking', () => {
     it('includes experiment data if linked to an experiment', () => {
       const mockExperimentData = {
         variant: 'candidate',
-        experiment: 'repo_integrations_link',
+        experiment: 'example',
         key: '2bff73f6bb8cc11156c50a8ba66b9b8b',
       };
       getExperimentData.mockReturnValue(mockExperimentData);
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
index 90bc1980ac3..843298a1406 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
@@ -7,7 +7,12 @@ import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue';
 import createLabelMutation from '~/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql';
-import { mockSuggestedColors, createLabelSuccessfulResponse } from './mock_data';
+import projectLabelsQuery from '~/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql';
+import {
+  mockSuggestedColors,
+  createLabelSuccessfulResponse,
+  labelsQueryResponse,
+} from './mock_data';
 
 jest.mock('~/flash');
 
@@ -44,6 +49,14 @@ describe('DropdownContentsCreateView', () => {
 
   const createComponent = ({ mutationHandler = createLabelSuccessHandler } = {}) => {
     const mockApollo = createMockApollo([[createLabelMutation, mutationHandler]]);
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: projectLabelsQuery,
+      data: labelsQueryResponse.data,
+      variables: {
+        fullPath: '',
+        searchTerm: '',
+      },
+    });
 
     wrapper = shallowMount(DropdownContentsCreateView, {
       localVue,
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
index 8bd944a3d54..6279fe8ed57 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
@@ -137,12 +137,6 @@ describe('DropdownContentsLabelsView', () => {
 
       expect(findLabels().at(0).attributes('islabelset')).toBe('true');
     });
-
-    it('emits `closeDropdown event` when Esc button is pressed', () => {
-      findDropdownWrapper().trigger('keydown.esc');
-
-      expect(wrapper.emitted('closeDropdown')).toEqual([[selectedLabels]]);
-    });
   });
 
   it('when search returns 0 results', async () => {
@@ -205,7 +199,7 @@ describe('DropdownContentsLabelsView', () => {
     });
 
     it('emits `toggleDropdownContentsCreateView` event on create label button click', () => {
-      findCreateLabelButton().vm.$emit('click');
+      findCreateLabelButton().vm.$emit('click', new MouseEvent('click'));
 
       expect(wrapper.emitted('toggleDropdownContentsCreateView')).toEqual([[]]);
     });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_title_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_title_spec.js
deleted file mode 100644
index d2401a1f725..00000000000
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_title_spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-
-import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue';
-
-import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_widget/store';
-
-import { mockConfig } from './mock_data';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const createComponent = (initialState = mockConfig) => {
-  const store = new Vuex.Store(labelsSelectModule());
-
-  store.dispatch('setInitialState', initialState);
-
-  return shallowMount(DropdownTitle, {
-    localVue,
-    store,
-    propsData: {
-      labelsSelectInProgress: false,
-    },
-  });
-};
-
-describe('DropdownTitle', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('template', () => {
-    it('renders component container element with string "Labels"', () => {
-      expect(wrapper.text()).toContain('Labels');
-    });
-
-    it('renders edit link', () => {
-      const editBtnEl = wrapper.find(GlButton);
-
-      expect(editBtnEl.exists()).toBe(true);
-      expect(editBtnEl.text()).toBe('Edit');
-    });
-
-    it('renders loading icon element when `labelsSelectInProgress` prop is true', () => {
-      wrapper.setProps({
-        labelsSelectInProgress: true,
-      });
-
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
index e17dfd93efc..d91d87ee6f0 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
@@ -1,11 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-
-import { isInViewport } from '~/lib/utils/common_utils';
-import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
-import DropdownButton from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_button.vue';
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue';
-import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue';
 import DropdownValue from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue';
 import DropdownValueCollapsed from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_value_collapsed.vue';
 import LabelsSelectRoot from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
@@ -32,11 +28,13 @@ describe('LabelsSelectRoot', () => {
       store,
       propsData: config,
       stubs: {
-        'dropdown-contents': DropdownContents,
+        DropdownContents,
+        SidebarEditableItem,
       },
       provide: {
         iid: '1',
         projectPath: 'test',
+        canUpdate: true,
       },
     });
   };
@@ -49,145 +47,44 @@ describe('LabelsSelectRoot', () => {
     wrapper.destroy();
   });
 
-  describe('methods', () => {
-    describe('handleDropdownClose', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('emits `updateSelectedLabels` & `onDropdownClose` events on component when provided `labels` param is not empty', () => {
-        wrapper.vm.handleDropdownClose([{ id: 1 }, { id: 2 }]);
-
-        expect(wrapper.emitted().updateSelectedLabels).toBeTruthy();
-        expect(wrapper.emitted().onDropdownClose).toBeTruthy();
-      });
-
-      it('emits only `onDropdownClose` event on component when provided `labels` param is empty', () => {
-        wrapper.vm.handleDropdownClose([]);
-
-        expect(wrapper.emitted().updateSelectedLabels).toBeFalsy();
-        expect(wrapper.emitted().onDropdownClose).toBeTruthy();
-      });
-    });
-
-    describe('handleCollapsedValueClick', () => {
-      it('emits `toggleCollapse` event on component', () => {
-        createComponent();
-        wrapper.vm.handleCollapsedValueClick();
-
-        expect(wrapper.emitted().toggleCollapse).toBeTruthy();
-      });
-    });
+  it('renders component with classes `labels-select-wrapper position-relative`', () => {
+    createComponent();
+    expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'position-relative']);
   });
 
-  describe('template', () => {
-    it('renders component with classes `labels-select-wrapper position-relative`', () => {
-      createComponent();
-      expect(wrapper.attributes('class')).toContain('labels-select-wrapper position-relative');
-    });
-
-    it.each`
-      variant         | cssClass
-      ${'standalone'} | ${'is-standalone'}
-      ${'embedded'}   | ${'is-embedded'}
-    `(
-      'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
-      ({ variant, cssClass }) => {
-        createComponent({
-          ...mockConfig,
-          variant,
-        });
-
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.classes()).toContain(cssClass);
-        });
-      },
-    );
-
-    it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
-      createComponent();
-      await wrapper.vm.$nextTick;
-      expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
-    });
-
-    it('renders `dropdown-title` component', async () => {
-      createComponent();
-      await wrapper.vm.$nextTick;
-      expect(wrapper.find(DropdownTitle).exists()).toBe(true);
-    });
-
-    it('renders `dropdown-value` component', async () => {
-      createComponent(mockConfig, {
-        default: 'None',
+  it.each`
+    variant         | cssClass
+    ${'standalone'} | ${'is-standalone'}
+    ${'embedded'}   | ${'is-embedded'}
+  `(
+    'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
+    ({ variant, cssClass }) => {
+      createComponent({
+        ...mockConfig,
+        variant,
       });
-      await wrapper.vm.$nextTick;
-
-      const valueComp = wrapper.find(DropdownValue);
-
-      expect(valueComp.exists()).toBe(true);
-      expect(valueComp.text()).toBe('None');
-    });
-
-    it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => {
-      createComponent();
-      wrapper.vm.$store.dispatch('toggleDropdownButton');
-      await wrapper.vm.$nextTick;
-      expect(wrapper.find(DropdownButton).exists()).toBe(true);
-    });
-
-    it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => {
-      createComponent();
-      wrapper.vm.$store.dispatch('toggleDropdownContents');
-      await wrapper.vm.$nextTick;
-      expect(wrapper.find(DropdownContents).exists()).toBe(true);
-    });
-
-    describe('sets content direction based on viewport', () => {
-      describe.each(Object.values(DropdownVariant))(
-        'when labels variant is "%s"',
-        ({ variant }) => {
-          beforeEach(() => {
-            createComponent({ ...mockConfig, variant });
-            wrapper.vm.$store.dispatch('toggleDropdownContents');
-          });
 
-          it('set direction when out of viewport', () => {
-            isInViewport.mockImplementation(() => false);
-            wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
-
-            return wrapper.vm.$nextTick().then(() => {
-              expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(true);
-            });
-          });
-
-          it('does not set direction when inside of viewport', () => {
-            isInViewport.mockImplementation(() => true);
-            wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
-
-            return wrapper.vm.$nextTick().then(() => {
-              expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
-            });
-          });
-        },
-      );
-    });
-  });
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.classes()).toContain(cssClass);
+      });
+    },
+  );
 
-  it('calls toggleDropdownContents action when isEditing prop is changing to true', async () => {
+  it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
     createComponent();
-
-    jest.spyOn(store, 'dispatch').mockResolvedValue();
-    await wrapper.setProps({ isEditing: true });
-
-    expect(store.dispatch).toHaveBeenCalledWith('toggleDropdownContents');
+    await wrapper.vm.$nextTick;
+    expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
   });
 
-  it('does not call toggleDropdownContents action when isEditing prop is changing to false', async () => {
-    createComponent();
+  it('renders `dropdown-value` component', async () => {
+    createComponent(mockConfig, {
+      default: 'None',
+    });
+    await wrapper.vm.$nextTick;
 
-    jest.spyOn(store, 'dispatch').mockResolvedValue();
-    await wrapper.setProps({ isEditing: false });
+    const valueComp = wrapper.find(DropdownValue);
 
-    expect(store.dispatch).not.toHaveBeenCalled();
+    expect(valueComp.exists()).toBe(true);
+    expect(valueComp.text()).toBe('None');
   });
 });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js
index 5dd8fc1b8b2..982b2e15e46 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js
@@ -83,9 +83,7 @@ export const createLabelSuccessfulResponse = {
         id: 'gid://gitlab/ProjectLabel/126',
         color: '#dc143c',
         description: null,
-        descriptionHtml: '',
         title: 'ewrwrwer',
-        textColor: '#FFFFFF',
         __typename: 'Label',
       },
       errors: [],