Update adherence table based on ux discussions

- Updates "Fix suggestions" column to "More information"
- Removes check descriptions as information is already in sidebar
- Adds "Fix available" to more information column when status is failed

Changelog: changed
EE: true

ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/standards_adherence_table.vue

@@ -2,21 +2,19 @@
 import { GlAlert, GlTable, GlIcon, GlLink, GlBadge, GlLoadingIcon } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { formatDate } from '~/lib/utils/datetime_utility';
+import { s__ } from '~/locale';
 import getProjectComplianceStandardsAdherence from '../../graphql/compliance_standards_adherence.query.graphql';
 import Pagination from '../shared/pagination.vue';
 import { GRAPHQL_PAGE_SIZE } from '../../constants';
 import {
   FAIL_STATUS,
   STANDARDS_ADHERENCE_CHECK_LABELS,
-  STANDARDS_ADHERENCE_CHECK_DESCRIPTIONS,
   STANDARDS_ADHERENCE_STANARD_LABELS,
   NO_STANDARDS_ADHERENCES_FOUND,
   STANDARDS_ADHERENCE_FETCH_ERROR,
 } from './constants';
 import FixSuggestionsSidebar from './fix_suggestions_sidebar.vue';
 
-const columnWidth = 'gl-md-max-w-26 gl-white-space-nowrap';
-
 export default {
   name: 'ComplianceStandardsAdherenceTable',
   components: {
@@ -97,14 +95,57 @@ export default {
     perPage() {
       return parseInt(this.$route.query.perPage || GRAPHQL_PAGE_SIZE, 10);
     },
+    fields() {
+      const columnWidth = 'gl-md-max-w-10 gl-white-space-nowrap';
+
+      return [
+        {
+          key: 'status',
+          label: this.$options.i18n.tableHeaders.status,
+          sortable: false,
+          thClass: columnWidth,
+          tdClass: columnWidth,
+        },
+        {
+          key: 'project',
+          label: this.$options.i18n.tableHeaders.project,
+          sortable: false,
+        },
+        {
+          key: 'check',
+          label: this.$options.i18n.tableHeaders.check,
+          sortable: false,
+          thClass: columnWidth,
+          tdClass: columnWidth,
+        },
+        {
+          key: 'standard',
+          label: this.$options.i18n.tableHeaders.standard,
+          sortable: false,
+          thClass: columnWidth,
+          tdClass: columnWidth,
+        },
+        {
+          key: 'lastScanned',
+          label: this.$options.i18n.tableHeaders.lastScanned,
+          sortable: false,
+          thClass: columnWidth,
+          tdClass: columnWidth,
+        },
+        {
+          key: 'moreInformation',
+          label: this.$options.i18n.tableHeaders.moreInformation,
+          sortable: false,
+          thClass: columnWidth,
+          tdClass: columnWidth,
+        },
+      ];
+    },
   },
   methods: {
     adherenceCheckName(check) {
       return STANDARDS_ADHERENCE_CHECK_LABELS[check];
     },
-    adherenceCheckDescription(check) {
-      return STANDARDS_ADHERENCE_CHECK_DESCRIPTIONS[check];
-    },
     adherenceStandardLabel(standard) {
       return STANDARDS_ADHERENCE_STANARD_LABELS[standard];
     },
@@ -158,43 +199,20 @@ export default {
       });
     },
   },
-  fields: [
-    {
-      key: 'status',
-      sortable: false,
-      thClass: columnWidth,
-      tdClass: columnWidth,
-    },
-    {
-      key: 'project',
-      sortable: false,
-      tdClass: columnWidth,
-    },
-    {
-      key: 'checks',
-      sortable: false,
-    },
-    {
-      key: 'standard',
-      sortable: false,
-      thClass: columnWidth,
-      tdClass: columnWidth,
-    },
-    {
-      key: 'lastScanned',
-      sortable: false,
-      thClass: columnWidth,
-      tdClass: columnWidth,
-    },
-    {
-      key: 'fixSuggestions',
-      sortable: false,
-      thClass: columnWidth,
-      tdClass: columnWidth,
-    },
-  ],
   noStandardsAdherencesFound: NO_STANDARDS_ADHERENCES_FOUND,
   standardsAdherenceFetchError: STANDARDS_ADHERENCE_FETCH_ERROR,
+  i18n: {
+    viewDetails: s__('ComplianceStandardsAdherence|View details'),
+    viewDetailsFixAvailable: s__('ComplianceStandardsAdherence|View details (fix available)'),
+    tableHeaders: {
+      status: s__('ComplianceStandardsAdherence|Status'),
+      project: s__('ComplianceStandardsAdherence|Project'),
+      check: s__('ComplianceStandardsAdherence|Check'),
+      standard: s__('ComplianceStandardsAdherence|Standard'),
+      lastScanned: s__('ComplianceStandardsAdherence|Last Scanned'),
+      moreInformation: s__('ComplianceStandardsAdherence|More Information'),
+    },
+  },
 };
 </script>
 
@@ -209,8 +227,7 @@ export default {
       {{ $options.standardsAdherenceFetchError }}
     </gl-alert>
     <gl-table
-      class="gl-mb-6"
-      :fields="$options.fields"
+      :fields="fields"
       :items="adherences.list"
       :busy="isLoading"
       :empty-text="$options.noStandardsAdherencesFound"
@@ -241,9 +258,8 @@ export default {
         </div>
       </template>
 
-      <template #cell(checks)="{ item: { checkName } }">
-        <div class="gl-font-weight-bold">{{ adherenceCheckName(checkName) }}</div>
-        <div class="gl-mt-2">{{ adherenceCheckDescription(checkName) }}</div>
+      <template #cell(check)="{ item: { checkName } }">
+        {{ adherenceCheckName(checkName) }}
       </template>
 
       <template #cell(standard)="{ item: { standard } }">
@@ -254,10 +270,13 @@ export default {
         {{ formatDate(updatedAt) }}
       </template>
 
-      <template #cell(fixSuggestions)="{ item }">
-        <gl-link @click="toggleDrawer(item)">{{
-          s__('ComplianceStandardsAdherence|View details')
-        }}</gl-link>
+      <template #cell(moreInformation)="{ item }">
+        <gl-link @click="toggleDrawer(item)">
+          <template v-if="isFailedStatus(item.status)">{{
+            $options.i18n.viewDetailsFixAvailable
+          }}</template>
+          <template v-else>{{ $options.i18n.viewDetails }}</template>
+        </gl-link>
       </template>
     </gl-table>
     <fix-suggestions-sidebar

ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/standards_adherence_table_spec.js

@@ -21,7 +21,7 @@ describe('ComplianceStandardsAdherenceTable component', () => {
   let apolloProvider;
   const groupPath = 'example-group-path';
 
-  const defaultAdherencesResponse = createComplianceAdherencesResponse();
+  const defaultAdherencesResponse = createComplianceAdherencesResponse({ count: 2 });
   const sentryError = new Error('GraphQL networkError');
   const mockGraphQlSuccess = jest.fn().mockResolvedValue(defaultAdherencesResponse);
   const mockGraphQlLoading = jest.fn().mockResolvedValue(new Promise(() => {}));
@@ -36,8 +36,8 @@ describe('ComplianceStandardsAdherenceTable component', () => {
   const findTableLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findTableHeaders = () => findStandardsAdherenceTable().findAll('th');
   const findTableRows = () => findStandardsAdherenceTable().findAll('tr');
-  const findFirstTableRow = () => findTableRows().at(1);
-  const findFirstTableRowData = () => findFirstTableRow().findAll('td');
+  const findNthTableRow = (n) => findTableRows().at(n);
+  const findFirstTableRowData = () => findNthTableRow(1).findAll('td');
   const findViewDetails = () => wrapper.findComponent(GlLink);
   const findPagination = () => wrapper.findComponent(Pagination);
 
@@ -94,10 +94,10 @@ describe('ComplianceStandardsAdherenceTable component', () => {
       expect(headerTexts).toStrictEqual([
         'Status',
         'Project',
-        'Checks',
+        'Check',
         'Standard',
         'Last Scanned',
-        'Fix Suggestions',
+        'More Information',
       ]);
     });
   });
@@ -131,6 +131,11 @@ describe('ComplianceStandardsAdherenceTable component', () => {
       expect(findTableLoadingIcon().exists()).toBe(false);
     });
 
+    it('renders the table row properly for failed checks', () => {
+      const infoCell = findNthTableRow(2).findAll('td').at(-1);
+      expect(infoCell.text()).toMatchInterpolatedText('View details (fix available)');
+    });
+
     describe('when check is `PREVENT_APPROVAL_BY_MERGE_REQUEST_AUTHOR`', () => {
       it('renders the table row properly', () => {
         const rowText = findFirstTableRowData().wrappers.map((e) => e.text());
@@ -138,7 +143,7 @@ describe('ComplianceStandardsAdherenceTable component', () => {
         expect(rowText).toStrictEqual([
           'Success',
           'Example Project',
-          'Prevent authors as approvers Have a valid rule that prevents author-approved merge requests from being merged',
+          'Prevent authors as approvers',
           'GitLab',
           'Jul 1, 2023',
           'View details',
@@ -166,7 +171,7 @@ describe('ComplianceStandardsAdherenceTable component', () => {
         expect(rowText).toStrictEqual([
           'Success',
           'Example Project',
-          'Prevent committers as approvers Have a valid rule that prevents users from approving merge requests where they’ve added commits',
+          'Prevent committers as approvers',
           'GitLab',
           'Jul 1, 2023',
           'View details',
@@ -192,7 +197,7 @@ describe('ComplianceStandardsAdherenceTable component', () => {
         expect(rowText).toStrictEqual([
           'Success',
           'Example Project',
-          'At least two approvals Have a valid rule that prevents merge requests with less than two approvals from being merged',
+          'At least two approvals',
           'GitLab',
           'Jul 1, 2023',
           'View details',

ee/spec/frontend/compliance_dashboard/mock_data.js

@@ -39,7 +39,7 @@ export const createDefaultProjectsResponse = (projects) => ({
 export const createComplianceAdherence = (id, checkName) => ({
   id: `gid://gitlab/Projects::ComplianceStandards::Adherence/${id}`,
   updatedAt: 'July 1, 2023',
-  status: 'SUCCESS',
+  status: id % 2 === 0 ? 'SUCCESS' : 'FAIL',
   checkName,
   standard: 'GITLAB',
   project: {

locale/gitlab.pot

@@ -12637,6 +12637,9 @@ msgstr ""
 msgid "ComplianceStandardsAdherence|At least two approvals"
 msgstr ""
+msgid "ComplianceStandardsAdherence|Check"
+msgstr ""
+
 msgid "ComplianceStandardsAdherence|Failure reason"
 msgstr ""
@@ -12652,9 +12655,15 @@ msgstr ""
 msgid "ComplianceStandardsAdherence|How to fix"
 msgstr ""
+msgid "ComplianceStandardsAdherence|Last Scanned"
+msgstr ""
+
 msgid "ComplianceStandardsAdherence|Merge request approval rules"
 msgstr ""
+msgid "ComplianceStandardsAdherence|More Information"
+msgstr ""
+
 msgid "ComplianceStandardsAdherence|No projects with standards adherence checks found"
 msgstr ""
@@ -12673,9 +12682,18 @@ msgstr ""
 msgid "ComplianceStandardsAdherence|Prevent committers as approvers"
 msgstr ""
+msgid "ComplianceStandardsAdherence|Project"
+msgstr ""
+
 msgid "ComplianceStandardsAdherence|Requirement"
 msgstr ""
+msgid "ComplianceStandardsAdherence|Standard"
+msgstr ""
+
+msgid "ComplianceStandardsAdherence|Status"
+msgstr ""
+
 msgid "ComplianceStandardsAdherence|Success reason"
 msgstr ""
@@ -12691,6 +12709,9 @@ msgstr ""
 msgid "ComplianceStandardsAdherence|View details"
 msgstr ""
+msgid "ComplianceStandardsAdherence|View details (fix available)"
+msgstr ""
+
 msgid "ComplianceViolations|Compliance Violations Export"
 msgstr ""