Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42

9 files changed, 183 insertions, 15 deletions

diff --git a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
index 39f63b2a9f4..07da4acef8c 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
@@ -5,7 +5,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
 import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
diff --git a/spec/frontend/sidebar/components/attention_required_toggle_spec.js b/spec/frontend/sidebar/components/attention_requested_toggle_spec.js
index 8555068cdd8..0939297a754 100644
--- a/spec/frontend/sidebar/components/attention_required_toggle_spec.js
+++ b/spec/frontend/sidebar/components/attention_requested_toggle_spec.js
@@ -23,8 +23,8 @@ describe('Attention require toggle', () => {
 
   it.each`
     attentionRequested | icon
-    ${true}            | ${'star'}
-    ${false}           | ${'star-o'}
+    ${true}            | ${'attention-solid'}
+    ${false}           | ${'attention'}
   `(
     'renders $icon icon when attention_requested is $attentionRequested',
     ({ attentionRequested, icon }) => {
diff --git a/spec/frontend/sidebar/components/crm_contacts_spec.js b/spec/frontend/sidebar/components/crm_contacts_spec.js
new file mode 100644
index 00000000000..758cff30e2d
--- /dev/null
+++ b/spec/frontend/sidebar/components/crm_contacts_spec.js
@@ -0,0 +1,87 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
+import CrmContacts from '~/sidebar/components/crm_contacts/crm_contacts.vue';
+import getIssueCrmContactsQuery from '~/sidebar/components/crm_contacts/queries/get_issue_crm_contacts.query.graphql';
+import issueCrmContactsSubscription from '~/sidebar/components/crm_contacts/queries/issue_crm_contacts.subscription.graphql';
+import {
+  getIssueCrmContactsQueryResponse,
+  issueCrmContactsUpdateResponse,
+  issueCrmContactsUpdateNullResponse,
+} from './mock_data';
+
+jest.mock('~/flash');
+
+describe('Issue crm contacts component', () => {
+  Vue.use(VueApollo);
+  let wrapper;
+  let fakeApollo;
+
+  const successQueryHandler = jest.fn().mockResolvedValue(getIssueCrmContactsQueryResponse);
+  const successSubscriptionHandler = jest.fn().mockResolvedValue(issueCrmContactsUpdateResponse);
+  const nullSubscriptionHandler = jest.fn().mockResolvedValue(issueCrmContactsUpdateNullResponse);
+
+  const mountComponent = ({
+    queryHandler = successQueryHandler,
+    subscriptionHandler = successSubscriptionHandler,
+  } = {}) => {
+    fakeApollo = createMockApollo([
+      [getIssueCrmContactsQuery, queryHandler],
+      [issueCrmContactsSubscription, subscriptionHandler],
+    ]);
+    wrapper = shallowMountExtended(CrmContacts, {
+      propsData: { issueId: '123' },
+      apolloProvider: fakeApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  it('should render error message on reject', async () => {
+    mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
+    await waitForPromises();
+
+    expect(createFlash).toHaveBeenCalled();
+  });
+
+  it('calls the query with correct variables', () => {
+    mountComponent();
+
+    expect(successQueryHandler).toHaveBeenCalledWith({
+      id: 'gid://gitlab/Issue/123',
+    });
+  });
+
+  it('calls the subscription with correct variable for issue', () => {
+    mountComponent();
+
+    expect(successSubscriptionHandler).toHaveBeenCalledWith({
+      id: 'gid://gitlab/Issue/123',
+    });
+  });
+
+  it('renders correct initial results', async () => {
+    mountComponent({ subscriptionHandler: nullSubscriptionHandler });
+    await waitForPromises();
+
+    expect(wrapper.find('#contact_0').text()).toContain('Someone Important');
+    expect(wrapper.find('#contact_container_0').text()).toContain('si@gitlab.com');
+    expect(wrapper.find('#contact_1').text()).toContain('Marty McFly');
+  });
+
+  it('renders correct results after subscription update', async () => {
+    mountComponent();
+    await waitForPromises();
+
+    const contact = ['Dave Davies', 'dd@gitlab.com', '+44 20 1111 2222', 'Vice President'];
+    contact.forEach((property) => {
+      expect(wrapper.find('#contact_container_0').text()).toContain(property);
+    });
+  });
+});
diff --git a/spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js b/spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js
index 619e89beb23..1e2173e2988 100644
--- a/spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js
+++ b/spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js
@@ -145,13 +145,20 @@ describe('Sidebar date Widget', () => {
     ${false}   | ${SidebarInheritDate}   | ${'SidebarInheritDate'}   | ${false}
   `(
     'when canInherit is $canInherit, $componentName display is $expected',
-    ({ canInherit, component, expected }) => {
+    async ({ canInherit, component, expected }) => {
       createComponent({ canInherit });
+      await waitForPromises();
 
       expect(wrapper.find(component).exists()).toBe(expected);
     },
   );
 
+  it('does not render SidebarInheritDate when canInherit is true and date is loading', async () => {
+    createComponent({ canInherit: true });
+
+    expect(wrapper.find(SidebarInheritDate).exists()).toBe(false);
+  });
+
   it('displays a flash message when query is rejected', async () => {
     createComponent({
       dueDateQueryHandler: jest.fn().mockRejectedValue('Houston, we have a problem'),
diff --git a/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js b/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js
index 4d38eba8035..fda21e06987 100644
--- a/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js
+++ b/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js
@@ -10,7 +10,7 @@ describe('SidebarInheritDate', () => {
   const findFixedRadio = () => wrapper.findAll(GlFormRadio).at(0);
   const findInheritRadio = () => wrapper.findAll(GlFormRadio).at(1);
 
-  const createComponent = () => {
+  const createComponent = ({ dueDateIsFixed = false } = {}) => {
     wrapper = shallowMount(SidebarInheritDate, {
       provide: {
         canUpdate: true,
@@ -18,11 +18,10 @@ describe('SidebarInheritDate', () => {
       propsData: {
         issuable: {
           dueDate: '2021-04-15',
-          dueDateIsFixed: true,
+          dueDateIsFixed,
           dueDateFixed: '2021-04-15',
           dueDateFromMilestones: '2021-05-15',
         },
-        isLoading: false,
         dateType: 'dueDate',
       },
     });
@@ -45,6 +44,13 @@ describe('SidebarInheritDate', () => {
     expect(findInheritRadio().text()).toBe('Inherited:');
   });
 
+  it('does not emit set-date if fixed value does not change', () => {
+    createComponent({ dueDateIsFixed: true });
+    findFixedRadio().vm.$emit('input', true);
+
+    expect(wrapper.emitted('set-date')).toBeUndefined();
+  });
+
   it('emits set-date event on click on radio button', () => {
     findFixedRadio().vm.$emit('input', true);
 
diff --git a/spec/frontend/sidebar/components/mock_data.js b/spec/frontend/sidebar/components/mock_data.js
new file mode 100644
index 00000000000..70c3f8a3012
--- /dev/null
+++ b/spec/frontend/sidebar/components/mock_data.js
@@ -0,0 +1,56 @@
+export const getIssueCrmContactsQueryResponse = {
+  data: {
+    issue: {
+      id: 'gid://gitlab/Issue/123',
+      customerRelationsContacts: {
+        nodes: [
+          {
+            id: 'gid://gitlab/CustomerRelations::Contact/1',
+            firstName: 'Someone',
+            lastName: 'Important',
+            email: 'si@gitlab.com',
+            phone: null,
+            description: null,
+            organization: null,
+          },
+          {
+            id: 'gid://gitlab/CustomerRelations::Contact/5',
+            firstName: 'Marty',
+            lastName: 'McFly',
+            email: null,
+            phone: null,
+            description: null,
+            organization: null,
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const issueCrmContactsUpdateNullResponse = {
+  data: {
+    issueCrmContactsUpdated: null,
+  },
+};
+
+export const issueCrmContactsUpdateResponse = {
+  data: {
+    issueCrmContactsUpdated: {
+      id: 'gid://gitlab/Issue/123',
+      customerRelationsContacts: {
+        nodes: [
+          {
+            id: 'gid://gitlab/CustomerRelations::Contact/13',
+            firstName: 'Dave',
+            lastName: 'Davies',
+            email: 'dd@gitlab.com',
+            phone: '+44 20 1111 2222',
+            description: 'Vice President',
+            organization: null,
+          },
+        ],
+      },
+    },
+  },
+};
diff --git a/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js b/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js
index cc428693930..69e35cd1d05 100644
--- a/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js
+++ b/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import issueReferenceQuery from '~/sidebar/queries/issue_reference.query.graphql';
 import mergeRequestReferenceQuery from '~/sidebar/queries/merge_request_reference.query.graphql';
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
index ca6e5ac5e7f..d7471d99477 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
@@ -17,7 +17,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
 import SidebarDropdownWidget from '~/sidebar/components/sidebar_dropdown_widget.vue';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
@@ -369,16 +369,18 @@ describe('SidebarDropdownWidget', () => {
 
       describe('when a user is searching', () => {
         describe('when search result is not found', () => {
-          it('renders "No milestone found"', async () => {
-            createComponent();
+          describe('when milestone', () => {
+            it('renders "No milestone found"', async () => {
+              createComponent();
 
-            await toggleDropdown();
+              await toggleDropdown();
 
-            findSearchBox().vm.$emit('input', 'non existing milestones');
+              findSearchBox().vm.$emit('input', 'non existing milestones');
 
-            await wrapper.vm.$nextTick();
+              await wrapper.vm.$nextTick();
 
-            expect(findDropdownText().text()).toBe('No milestone found');
+              expect(findDropdownText().text()).toBe('No milestone found');
+            });
           });
         });
       });
diff --git a/spec/frontend/sidebar/components/time_tracking/mock_data.js b/spec/frontend/sidebar/components/time_tracking/mock_data.js
index 938750bd58b..3f1b3fa8ec1 100644
--- a/spec/frontend/sidebar/components/time_tracking/mock_data.js
+++ b/spec/frontend/sidebar/components/time_tracking/mock_data.js
@@ -11,11 +11,13 @@ export const getIssueTimelogsQueryResponse = {
             __typename: 'Timelog',
             timeSpent: 14400,
             user: {
+              id: 'user-1',
               name: 'John Doe18',
               __typename: 'UserCore',
             },
             spentAt: '2020-05-01T00:00:00Z',
             note: {
+              id: 'note-1',
               body: 'A note',
               __typename: 'Note',
             },
@@ -25,6 +27,7 @@ export const getIssueTimelogsQueryResponse = {
             __typename: 'Timelog',
             timeSpent: 1800,
             user: {
+              id: 'user-2',
               name: 'Administrator',
               __typename: 'UserCore',
             },
@@ -36,11 +39,13 @@ export const getIssueTimelogsQueryResponse = {
             __typename: 'Timelog',
             timeSpent: 14400,
             user: {
+              id: 'user-2',
               name: 'Administrator',
               __typename: 'UserCore',
             },
             spentAt: '2021-05-01T00:00:00Z',
             note: {
+              id: 'note-2',
               body: 'A note',
               __typename: 'Note',
             },
@@ -65,11 +70,13 @@ export const getMrTimelogsQueryResponse = {
             __typename: 'Timelog',
             timeSpent: 1800,
             user: {
+              id: 'user-1',
               name: 'Administrator',
               __typename: 'UserCore',
             },
             spentAt: '2021-05-07T14:44:55Z',
             note: {
+              id: 'note-1',
               body: 'Thirty minutes!',
               __typename: 'Note',
             },
@@ -79,6 +86,7 @@ export const getMrTimelogsQueryResponse = {
             __typename: 'Timelog',
             timeSpent: 3600,
             user: {
+              id: 'user-1',
               name: 'Administrator',
               __typename: 'UserCore',
             },
@@ -90,11 +98,13 @@ export const getMrTimelogsQueryResponse = {
             __typename: 'Timelog',
             timeSpent: 300,
             user: {
+              id: 'user-1',
               name: 'Administrator',
               __typename: 'UserCore',
             },
             spentAt: '2021-03-10T00:00:00Z',
             note: {
+              id: 'note-2',
               body: 'A note with some time',
               __typename: 'Note',
             },