Add latest changes from gitlab-org/gitlab@master

7 files changed, 112 insertions, 26 deletions

diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js
index 3a6989a00f1..7aaaf480c44 100644
--- a/spec/frontend/crm/contacts_root_spec.js
+++ b/spec/frontend/crm/contacts_root_spec.js
@@ -1,14 +1,16 @@
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import VueRouter from 'vue-router';
-import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ContactsRoot from '~/crm/contacts/components/contacts_root.vue';
 import getGroupContactsQuery from '~/crm/contacts/components/graphql/get_group_contacts.query.graphql';
+import getGroupContactsCountByStateQuery from '~/crm/contacts/components/graphql/get_group_contacts_count_by_state.graphql';
 import routes from '~/crm/contacts/routes';
-import { getGroupContactsQueryResponse } from './mock_data';
+import PaginatedTableWithSearchAndTabs from '~/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue';
+import { getGroupContactsQueryResponse, getGroupContactsCountQueryResponse } from './mock_data';
 
 describe('Customer relations contacts root app', () => {
   Vue.use(VueApollo);
@@ -21,24 +23,30 @@ describe('Customer relations contacts root app', () => {
   const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName });
   const findIssuesLinks = () => wrapper.findAllByTestId('issues-link');
   const findNewContactButton = () => wrapper.findByTestId('new-contact-button');
-  const findError = () => wrapper.findComponent(GlAlert);
+  const findTable = () => wrapper.findComponent(PaginatedTableWithSearchAndTabs);
   const successQueryHandler = jest.fn().mockResolvedValue(getGroupContactsQueryResponse);
+  const successCountQueryHandler = jest.fn().mockResolvedValue(getGroupContactsCountQueryResponse);
 
   const basePath = '/groups/flightjs/-/crm/contacts';
 
   const mountComponent = ({
     queryHandler = successQueryHandler,
-    mountFunction = shallowMountExtended,
+    countQueryHandler = successCountQueryHandler,
     canAdminCrmContact = true,
+    textQuery = null,
   } = {}) => {
-    fakeApollo = createMockApollo([[getGroupContactsQuery, queryHandler]]);
-    wrapper = mountFunction(ContactsRoot, {
+    fakeApollo = createMockApollo([
+      [getGroupContactsQuery, queryHandler],
+      [getGroupContactsCountByStateQuery, countQueryHandler],
+    ]);
+    wrapper = mountExtended(ContactsRoot, {
       router,
       provide: {
         groupFullPath: 'flightjs',
         groupId: 26,
         groupIssuesPath: '/issues',
         canAdminCrmContact,
+        textQuery,
       },
       apolloProvider: fakeApollo,
     });
@@ -58,9 +66,33 @@ describe('Customer relations contacts root app', () => {
     router = null;
   });
 
-  it('should render loading spinner', () => {
+  it('should render table with default props and loading state', () => {
     mountComponent();
 
+    expect(findTable().props()).toMatchObject({
+      items: [],
+      itemsCount: {},
+      pageInfo: {},
+      statusTabs: [
+        { title: 'Active', status: 'ACTIVE', filters: 'active' },
+        { title: 'Inactive', status: 'INACTIVE', filters: 'inactive' },
+        { title: 'All', status: 'ALL', filters: 'all' },
+      ],
+      showItems: true,
+      showErrorMsg: false,
+      trackViewsOptions: { category: 'Customer Relations', action: 'view_contacts_list' },
+      i18n: {
+        emptyText: 'No contacts found',
+        issuesButtonLabel: 'View issues',
+        editButtonLabel: 'Edit',
+        title: 'Customer relations contacts',
+        newContact: 'New contact',
+        errorText: 'Something went wrong. Please try again.',
+      },
+      serverErrorMessage: '',
+      filterSearchKey: 'contacts',
+      filterSearchTokens: [],
+    });
     expect(findLoadingIcon().exists()).toBe(true);
   });
 
@@ -83,7 +115,7 @@ describe('Customer relations contacts root app', () => {
       mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
       await waitForPromises();
 
-      expect(findError().exists()).toBe(true);
+      expect(wrapper.text()).toContain('Something went wrong. Please try again.');
     });
   });
 
@@ -92,11 +124,11 @@ describe('Customer relations contacts root app', () => {
       mountComponent();
       await waitForPromises();
 
-      expect(findError().exists()).toBe(false);
+      expect(wrapper.text()).not.toContain('Something went wrong. Please try again.');
     });
 
     it('renders correct results', async () => {
-      mountComponent({ mountFunction: mountExtended });
+      mountComponent();
       await waitForPromises();
 
       expect(findRowByName(/Marty/i)).toHaveLength(1);
@@ -105,7 +137,7 @@ describe('Customer relations contacts root app', () => {
 
       const issueLink = findIssuesLinks().at(0);
       expect(issueLink.exists()).toBe(true);
-      expect(issueLink.attributes('href')).toBe('/issues?crm_contact_id=16');
+      expect(issueLink.attributes('href')).toBe('/issues?crm_contact_id=12');
     });
   });
 });
diff --git a/spec/frontend/crm/mock_data.js b/spec/frontend/crm/mock_data.js
index 3f3f076bf39..a2e2e88ac60 100644
--- a/spec/frontend/crm/mock_data.js
+++ b/spec/frontend/crm/mock_data.js
@@ -43,6 +43,28 @@ export const getGroupContactsQueryResponse = {
             organization: null,
           },
         ],
+        pageInfo: {
+          __typename: 'PageInfo',
+          hasNextPage: false,
+          endCursor: 'eyJsYXN0X25hbWUiOiJMZWRuZXIiLCJpZCI6IjE3OSJ9',
+          hasPreviousPage: false,
+          startCursor: 'eyJsYXN0X25hbWUiOiJCYXJ0b24iLCJpZCI6IjE5MyJ9',
+        },
+      },
+    },
+  },
+};
+
+export const getGroupContactsCountQueryResponse = {
+  data: {
+    group: {
+      __typename: 'Group',
+      id: 'gid://gitlab/Group/26',
+      contactStateCounts: {
+        all: 241,
+        active: 239,
+        inactive: 2,
+        __typename: 'ContactStateCountsType',
       },
     },
   },
diff --git a/spec/frontend/jobs/components/sidebar_detail_row_spec.js b/spec/frontend/jobs/components/sidebar_detail_row_spec.js
index 43f2e022dd8..8d2680608ab 100644
--- a/spec/frontend/jobs/components/sidebar_detail_row_spec.js
+++ b/spec/frontend/jobs/components/sidebar_detail_row_spec.js
@@ -7,7 +7,7 @@ describe('Sidebar detail row', () => {
 
   const title = 'this is the title';
   const value = 'this is the value';
-  const helpUrl = '/help/ci/runners/index.html';
+  const helpUrl = 'https://docs.gitlab.com/runner/register/index.html';
 
   const findHelpLink = () => wrapper.findComponent(GlLink);
 
diff --git a/spec/frontend/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js b/spec/frontend/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js
index bf5d15516c2..7e1e5004d91 100644
--- a/spec/frontend/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js
+++ b/spec/frontend/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js
@@ -8,16 +8,8 @@ describe('First pipeline card', () => {
   let wrapper;
   let trackingSpy;
 
-  const defaultProvide = {
-    runnerHelpPagePath: '/help/runners',
-  };
-
   const createComponent = () => {
-    wrapper = mount(FirstPipelineCard, {
-      provide: {
-        ...defaultProvide,
-      },
-    });
+    wrapper = mount(FirstPipelineCard);
   };
 
   const getLinkByName = (name) => getByRole(wrapper.element, 'link', { name });
@@ -43,7 +35,7 @@ describe('First pipeline card', () => {
   });
 
   it('renders the link', () => {
-    expect(findRunnersLink().href).toContain(defaultProvide.runnerHelpPagePath);
+    expect(findRunnersLink().href).toBe(wrapper.vm.$options.RUNNER_HELP_URL);
   });
 
   describe('tracking', () => {
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
index 1ea035c7184..7775ed6aa37 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
@@ -71,7 +71,12 @@ describe('Sidebar Confidentiality Form', () => {
   it('creates a flash if mutation contains errors', async () => {
     createComponent({
       mutate: jest.fn().mockResolvedValue({
-        data: { issuableSetConfidential: { errors: ['Houston, we have a problem!'] } },
+        data: {
+          issuableSetConfidential: {
+            issuable: { confidential: false },
+            errors: ['Houston, we have a problem!'],
+          },
+        },
       }),
     });
     findConfidentialToggle().vm.$emit('click', new MouseEvent('click'));
@@ -82,6 +87,24 @@ describe('Sidebar Confidentiality Form', () => {
     });
   });
 
+  it('emits `closeForm` event with confidentiality value when mutation is successful', async () => {
+    createComponent({
+      mutate: jest.fn().mockResolvedValue({
+        data: {
+          issuableSetConfidential: {
+            issuable: { confidential: true },
+            errors: [],
+          },
+        },
+      }),
+    });
+
+    findConfidentialToggle().vm.$emit('click', new MouseEvent('click'));
+    await waitForPromises();
+
+    expect(wrapper.emitted('closeForm')).toEqual([[{ confidential: true }]]);
+  });
+
   describe('when issue is not confidential', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
index 1de71e52264..18ee423d12e 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
@@ -132,6 +132,7 @@ describe('Sidebar Confidentiality Widget', () => {
   it('closes the form and dispatches an event when `closeForm` is emitted', async () => {
     createComponent();
     const el = wrapper.vm.$el;
+    const closeFormPayload = { confidential: true };
     jest.spyOn(el, 'dispatchEvent');
 
     await waitForPromises();
@@ -140,12 +141,12 @@ describe('Sidebar Confidentiality Widget', () => {
 
     expect(findConfidentialityForm().isVisible()).toBe(true);
 
-    findConfidentialityForm().vm.$emit('closeForm');
+    findConfidentialityForm().vm.$emit('closeForm', closeFormPayload);
     await nextTick();
     expect(findConfidentialityForm().isVisible()).toBe(false);
 
     expect(el.dispatchEvent).toHaveBeenCalled();
-    expect(wrapper.emitted('closeForm')).toHaveLength(1);
+    expect(wrapper.emitted('closeForm')).toEqual([[closeFormPayload]]);
   });
 
   it('emits `expandSidebar` event when it is emitted from child component', async () => {
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
index 17c0277d461..d22602e35b1 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
@@ -4,6 +4,7 @@ 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 SidebarEventHub from '~/sidebar/event_hub';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import WorkItemLinks from '~/work_items/components/work_item_links/work_item_links.vue';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
@@ -162,6 +163,21 @@ describe('WorkItemLinks', () => {
     expect(findChildrenCount().text()).toContain('4');
   });
 
+  it('refetches child items when `confidentialityUpdated` event is emitted on SidebarEventhub', async () => {
+    const fetchHandler = jest.fn().mockResolvedValue(workItemHierarchyResponse);
+    await createComponent({
+      fetchHandler,
+    });
+    await waitForPromises();
+
+    SidebarEventHub.$emit('confidentialityUpdated');
+    await nextTick();
+
+    // First call is done on component mount.
+    // Second call is done on confidentialityUpdated event.
+    expect(fetchHandler).toHaveBeenCalledTimes(2);
+  });
+
   describe('when no permission to update', () => {
     beforeEach(async () => {
       await createComponent({