Add latest changes from gitlab-org/gitlab@master

9 files changed, 111 insertions, 61 deletions

diff --git a/spec/frontend/feature_highlight/feature_highlight_popover_spec.js b/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
index 1d558366ce8..e5e3974e103 100644
--- a/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
+++ b/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
@@ -41,7 +41,6 @@ describe('feature_highlight/feature_highlight_popover', () => {
     expect(findPopover().props()).toMatchObject({
       target: POPOVER_TARGET_ID,
       cssClasses: ['feature-highlight-popover'],
-      triggers: 'hover',
       container: 'body',
       placement: 'right',
       boundary: 'viewport',
diff --git a/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
index 3f17731584c..93f4981a6a3 100644
--- a/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
+++ b/spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap
@@ -52,7 +52,9 @@ exports[`packages_list_app renders 1`] = `
              with GitLab.
           </p>
            
-          <div>
+          <div
+            class="gl-display-flex gl-flex-wrap gl-justify-content-center"
+          >
             <!---->
              
             <!---->
diff --git a/spec/frontend/serverless/components/__snapshots__/empty_state_spec.js.snap b/spec/frontend/serverless/components/__snapshots__/empty_state_spec.js.snap
index 4b827301943..33df3a66fcd 100644
--- a/spec/frontend/serverless/components/__snapshots__/empty_state_spec.js.snap
+++ b/spec/frontend/serverless/components/__snapshots__/empty_state_spec.js.snap
@@ -10,8 +10,8 @@ exports[`EmptyStateComponent should render content 1`] = `
       <h1 class=\\"h4\\">Getting started with serverless</h1>
       <p>In order to start using functions as a service, you must first install Knative on your Kubernetes cluster. <gl-link-stub href=\\"/help\\">More information</gl-link-stub>
       </p>
-      <div>
-        <gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" href=\\"/clusters\\">Install Knative</gl-button-stub>
+      <div class=\\"gl-display-flex gl-flex-wrap gl-justify-content-center\\">
+        <gl-button-stub category=\\"primary\\" variant=\\"confirm\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" href=\\"/clusters\\" class=\\"gl-mb-3 gl-mx-2\\">Install Knative</gl-button-stub>
         <!---->
       </div>
     </div>
diff --git a/spec/frontend/vue_shared/alert_details/alert_details_spec.js b/spec/frontend/vue_shared/alert_details/alert_details_spec.js
index 68bcf1dc491..1fc655f1ebc 100644
--- a/spec/frontend/vue_shared/alert_details/alert_details_spec.js
+++ b/spec/frontend/vue_shared/alert_details/alert_details_spec.js
@@ -8,7 +8,7 @@ import { joinPaths } from '~/lib/utils/url_utility';
 import Tracking from '~/tracking';
 import AlertDetails from '~/vue_shared/alert_details/components/alert_details.vue';
 import AlertSummaryRow from '~/vue_shared/alert_details/components/alert_summary_row.vue';
-import { SEVERITY_LEVELS } from '~/vue_shared/alert_details/constants';
+import { PAGE_CONFIG, SEVERITY_LEVELS } from '~/vue_shared/alert_details/constants';
 import createIssueMutation from '~/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 import mockAlerts from './mocks/alerts.json';
@@ -271,7 +271,13 @@ describe('AlertDetails', () => {
       });
 
       it('should display a table of raw alert details data', () => {
-        expect(findDetailsTable().exists()).toBe(true);
+        const details = findDetailsTable();
+        expect(details.exists()).toBe(true);
+        expect(details.props()).toStrictEqual({
+          alert: mockAlert,
+          statuses: PAGE_CONFIG.OPERATIONS.STATUSES,
+          loading: false,
+        });
       });
     });
 
diff --git a/spec/frontend/vue_shared/alert_details/alert_status_spec.js b/spec/frontend/vue_shared/alert_details/alert_status_spec.js
index a866fc13539..c532f688cbd 100644
--- a/spec/frontend/vue_shared/alert_details/alert_status_spec.js
+++ b/spec/frontend/vue_shared/alert_details/alert_status_spec.js
@@ -12,6 +12,7 @@ describe('AlertManagementStatus', () => {
   let wrapper;
   const findStatusDropdown = () => wrapper.find(GlDropdown);
   const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
+  const findAllStatusOptions = () => findStatusDropdown().findAll(GlDropdownItem);
 
   const selectFirstStatusOption = () => {
     findFirstStatusOption().vm.$emit('click');
@@ -131,6 +132,24 @@ describe('AlertManagementStatus', () => {
     });
   });
 
+  describe('Statuses', () => {
+    it('renders default translated statuses', () => {
+      mountComponent({});
+      expect(findAllStatusOptions().length).toBe(3);
+      expect(findFirstStatusOption().text()).toBe('Triggered');
+    });
+
+    it('renders translated statuses', () => {
+      const status = 'TEST';
+      const translatedStatus = 'Test';
+      mountComponent({
+        props: { alert: { ...mockAlert, status }, statuses: { [status]: translatedStatus } },
+      });
+      expect(findAllStatusOptions().length).toBe(1);
+      expect(findFirstStatusOption().text()).toBe(translatedStatus);
+    });
+  });
+
   describe('Snowplow tracking', () => {
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');
diff --git a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js
index 70cf2597963..ef75e038bff 100644
--- a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js
+++ b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js
@@ -76,20 +76,4 @@ describe('Alert Details Sidebar', () => {
       expect(wrapper.find(SidebarStatus).exists()).toBe(true);
     });
   });
-
-  describe('the sidebar renders for threat monitoring', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-      mountComponent();
-    });
-
-    it('should not render side bar status dropdown', () => {
-      mountComponent({
-        mountMethod: mount,
-        alert: mockAlert,
-        provide: { isThreatMonitoringPage: true },
-      });
-      expect(wrapper.find(SidebarStatus).exists()).toBe(false);
-    });
-  });
 });
diff --git a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
index f5b9efb4d98..0014957517f 100644
--- a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
+++ b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
@@ -1,7 +1,9 @@
 import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
+import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
+import { PAGE_CONFIG } from '~/vue_shared/alert_details/constants';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -12,8 +14,16 @@ describe('Alert Details Sidebar Status', () => {
   const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
   const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findStatusDropdownHeader = () => wrapper.find('[data-testid="dropdown-header"]');
+  const findAlertStatus = () => wrapper.findComponent(AlertStatus);
+  const findStatus = () => wrapper.find('[data-testid="status"]');
 
-  function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) {
+  function mountComponent({
+    data,
+    sidebarCollapsed = true,
+    loading = false,
+    stubs = {},
+    provide = {},
+  } = {}) {
     wrapper = mount(AlertSidebarStatus, {
       propsData: {
         alert: { ...mockAlert },
@@ -32,6 +42,7 @@ describe('Alert Details Sidebar Status', () => {
         },
       },
       stubs,
+      provide,
     });
   }
 
@@ -96,8 +107,24 @@ describe('Alert Details Sidebar Status', () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
         findStatusDropdownItem().vm.$emit('click');
         expect(findStatusLoadingIcon().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered');
+        expect(findStatus().text()).toBe('Triggered');
       });
     });
   });
+
+  describe('Statuses', () => {
+    it('renders default translated statuses', () => {
+      mountComponent({});
+      expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
+      expect(findStatus().text()).toBe('Triggered');
+    });
+
+    it('renders translated statuses', () => {
+      const status = 'TEST';
+      const statuses = { [status]: 'Test' };
+      mountComponent({ data: { alert: { ...mockAlert, status } }, provide: { statuses } });
+      expect(findAlertStatus().props('statuses')).toBe(statuses);
+      expect(findStatus().text()).toBe(statuses.TEST);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/alert_details_table_spec.js b/spec/frontend/vue_shared/components/alert_details_table_spec.js
index 49b82cb4d4e..03b04a92bdf 100644
--- a/spec/frontend/vue_shared/components/alert_details_table_spec.js
+++ b/spec/frontend/vue_shared/components/alert_details_table_spec.js
@@ -75,45 +75,62 @@ describe('AlertDetails', () => {
     });
 
     describe('with table data', () => {
-      beforeEach(mountComponent);
-
-      it('renders a table', () => {
-        expect(findTableComponent().exists()).toBe(true);
-      });
-
-      it('renders a cell based on alert data', () => {
-        expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
-      });
-
-      it('should show allowed alert fields', () => {
-        const fields = findTableKeys();
-
-        expect(findTableField(fields, 'Iid').exists()).toBe(true);
-        expect(findTableField(fields, 'Title').exists()).toBe(true);
-        expect(findTableField(fields, 'Severity').exists()).toBe(true);
-        expect(findTableField(fields, 'Status').exists()).toBe(true);
-        expect(findTableField(fields, 'Hosts').exists()).toBe(true);
-        expect(findTableField(fields, 'Environment').exists()).toBe(true);
+      describe('default', () => {
+        beforeEach(mountComponent);
+
+        it('renders a table', () => {
+          expect(findTableComponent().exists()).toBe(true);
+        });
+
+        it('renders a cell based on alert data', () => {
+          expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
+        });
+
+        it('should show allowed alert fields', () => {
+          const fields = findTableKeys();
+          ['Iid', 'Title', 'Severity', 'Status', 'Hosts', 'Environment'].forEach((field) => {
+            expect(findTableField(fields, field).exists()).toBe(true);
+          });
+        });
+
+        it('should not show disallowed alert fields', () => {
+          const fields = findTableKeys();
+          ['Typename', 'Todos', 'Notes', 'Assignees'].forEach((field) => {
+            expect(findTableField(fields, field).exists()).toBe(false);
+          });
+        });
       });
 
-      it('should not show disallowed alert fields', () => {
-        const fields = findTableKeys();
+      describe('environment', () => {
+        it('should display only the name for the environment', () => {
+          mountComponent();
+          expect(findTableFieldValueByKey('Environment').text()).toBe(environmentName);
+        });
 
-        expect(findTableField(fields, 'Typename').exists()).toBe(false);
-        expect(findTableField(fields, 'Todos').exists()).toBe(false);
-        expect(findTableField(fields, 'Notes').exists()).toBe(false);
-        expect(findTableField(fields, 'Assignees').exists()).toBe(false);
-      });
+        it('should not display the environment row if there is not data', () => {
+          environmentData = { name: null, path: null };
+          mountComponent();
 
-      it('should display only the name for the environment', () => {
-        expect(findTableFieldValueByKey('Environment').text()).toBe(environmentName);
+          expect(findTableFieldValueByKey('Environment').text()).toBeFalsy();
+        });
       });
 
-      it('should not display the environment row if there is not data', () => {
-        environmentData = { name: null, path: null };
-        mountComponent();
-
-        expect(findTableFieldValueByKey('Environment').text()).toBeFalsy();
+      describe('status', () => {
+        it('should show the translated status for the default statuses', () => {
+          mountComponent();
+          expect(findTableFieldValueByKey('Status').text()).toBe('Triggered');
+        });
+
+        it('should show the translated status for provided statuses', () => {
+          const translatedStatus = 'Test';
+          mountComponent({ statuses: { TRIGGERED: translatedStatus } });
+          expect(findTableFieldValueByKey('Status').text()).toBe(translatedStatus);
+        });
+
+        it('should show the provided status if value is not defined in statuses', () => {
+          mountComponent({ statuses: {} });
+          expect(findTableFieldValueByKey('Status').text()).toBe('TRIGGERED');
+        });
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/help_popover_spec.js b/spec/frontend/vue_shared/components/help_popover_spec.js
index 2a4c35f2605..cf5428ba4c3 100644
--- a/spec/frontend/vue_shared/components/help_popover_spec.js
+++ b/spec/frontend/vue_shared/components/help_popover_spec.js
@@ -41,10 +41,6 @@ describe('HelpPopover', () => {
     expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
   });
 
-  it('triggers popover on hover and focus', () => {
-    expect(findPopover().props().triggers).toBe('hover focus');
-  });
-
   it('allows rendering title with HTML tags', () => {
     expect(findPopover().find('strong').exists()).toBe(true);
   });