Merge branch '216065-Hide-fields-not-implemented-on-BE-side' into 'master'

Hide not implemented on BE side fields from list view

See merge request gitlab-org/gitlab!31489

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -5,7 +5,6 @@ import {
   GlLoadingIcon,
   GlTable,
   GlAlert,
-  GlIcon,
   GlNewDropdown,
   GlNewDropdownItem,
   GlTabs,
@@ -15,7 +14,7 @@ import {
 import { s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import getAlerts from '../graphql/queries/getAlerts.query.graphql';
-import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants';
+import { ALERTS_STATUS, ALERTS_STATUS_TABS } from '../constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
@@ -30,11 +29,6 @@ export default {
     ),
   },
   fields: [
-    {
-      key: 'severity',
-      label: s__('AlertManagement|Severity'),
-      tdClass: `${tdClass} rounded-top text-capitalize`,
-    },
     {
       key: 'startedAt',
       label: s__('AlertManagement|Start time'),
@@ -68,7 +62,6 @@ export default {
     [ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'),
     [ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'),
   },
-  severityLabels: ALERTS_SEVERITY_LABELS,
   statusTabs: ALERTS_STATUS_TABS,
   components: {
     GlEmptyState,
@@ -79,7 +72,6 @@ export default {
     TimeAgo,
     GlNewDropdown,
     GlNewDropdownItem,
-    GlIcon,
     GlTabs,
     GlTab,
     GlBadge,
@@ -185,21 +177,6 @@ export default {
         fixed
         stacked="md"
       >
-        <template #cell(severity)="{ item }">
-          <div
-            class="d-inline-flex align-items-center justify-content-between"
-            data-testid="severityField"
-          >
-            <gl-icon
-              class="mr-2"
-              :size="12"
-              :name="`severity-${item.severity.toLowerCase()}`"
-              :class="`icon-${item.severity.toLowerCase()}`"
-            />
-            {{ $options.severityLabels[item.severity] }}
-          </div>
-        </template>
-
         <template #cell(startedAt)="{ item }">
           <time-ago v-if="item.startedAt" :time="item.startedAt" />
         </template>
@@ -213,7 +190,7 @@ export default {
         </template>
 
         <template #cell(status)="{ item }">
-          <gl-new-dropdown class="w-100" :text="item.status">
+          <gl-new-dropdown :text="item.status">
             <gl-new-dropdown-item v-for="(label, field) in $options.statuses" :key="field">
               {{ label }}
             </gl-new-dropdown-item>

locale/gitlab.pot

@@ -1774,9 +1774,6 @@ msgstr ""
 msgid "AlertManagement|Resolved"
 msgstr ""
 
-msgid "AlertManagement|Severity"
-msgstr ""
-
 msgid "AlertManagement|Start time"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -6,7 +6,6 @@ import {
   GlLoadingIcon,
   GlNewDropdown,
   GlBadge,
-  GlIcon,
   GlTab,
 } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -26,7 +25,6 @@ describe('AlertManagementList', () => {
   const findStatusFilterTabs = () => wrapper.findAll(GlTab);
   const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
-  const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
 
   function mountComponent({
     props = {
@@ -185,37 +183,6 @@ describe('AlertManagementList', () => {
       expect(findStatusDropdown().exists()).toBe(true);
     });
 
-    it('shows correct severity icons', () => {
-      mountComponent({
-        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: mockAlerts, errored: false },
-        loading: false,
-      });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlTable).exists()).toBe(true);
-        expect(
-          findAlertsTable()
-            .find(GlIcon)
-            .classes('icon-critical'),
-        ).toBe(true);
-      });
-    });
-
-    it('Internationalizes severity text', () => {
-      mountComponent({
-        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: mockAlerts, errored: false },
-        loading: false,
-      });
-
-      expect(
-        findSeverityFields()
-          .at(0)
-          .text(),
-      ).toBe('Critical');
-    });
-
     describe('handle date fields', () => {
       it('should display time ago dates when values provided', () => {
         mountComponent({
@@ -226,7 +193,6 @@ describe('AlertManagementList', () => {
                 iid: 1,
                 startedAt: '2020-03-17T23:18:14.996Z',
                 endedAt: '2020-04-17T23:18:14.996Z',
-                severity: 'high',
               },
             ],
             errored: false,
@@ -245,7 +211,6 @@ describe('AlertManagementList', () => {
                 iid: 1,
                 startedAt: null,
                 endedAt: null,
-                severity: 'high',
               },
             ],
             errored: false,