Add sorting by column in DevOps Adoption table

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_table.vue

@@ -7,6 +7,7 @@ import {
   GlTooltipDirective,
   GlIcon,
 } from '@gitlab/ui';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import DevopsAdoptionTableCellFlag from './devops_adoption_table_cell_flag.vue';
 import DevopsAdoptionDeleteModal from './devops_adoption_delete_modal.vue';
 import {
@@ -14,17 +15,38 @@ import {
   DEVOPS_ADOPTION_STRINGS,
   DEVOPS_ADOPTION_SEGMENT_MODAL_ID,
   DEVOPS_ADOPTION_SEGMENT_DELETE_MODAL_ID,
+  DEVOPS_ADOPTION_SEGMENTS_TABLE_SORT_BY_STORAGE_KEY,
+  DEVOPS_ADOPTION_SEGMENTS_TABLE_SORT_DESC_STORAGE_KEY,
 } from '../constants';
 
+const NAME_HEADER = 'name';
+
+const formatter = (value, key, item) => {
+  if (key === NAME_HEADER) {
+    return value;
+  }
+
+  if (item.latestSnapshot && item.latestSnapshot[key] === false) {
+    return 1;
+  } else if (item.latestSnapshot && item.latestSnapshot[key]) {
+    return 2;
+  }
+
+  return 0;
+};
+
 const fieldOptions = {
   thClass: 'gl-bg-white! gl-text-gray-400',
   thAttr: { 'data-testid': DEVOPS_ADOPTION_TABLE_TEST_IDS.TABLE_HEADERS },
+  formatter,
+  sortable: true,
+  sortByFormatted: true,
 };
 
 const { table: i18n } = DEVOPS_ADOPTION_STRINGS;
 
 const headers = [
-  'name',
+  NAME_HEADER,
   'issueOpened',
   'mergeRequestOpened',
   'mergeRequestApproved',
@@ -41,6 +63,7 @@ export default {
     DevopsAdoptionTableCellFlag,
     GlButton,
     GlPopover,
+    LocalStorageSync,
     DevopsAdoptionDeleteModal,
     GlIcon,
   },
@@ -57,9 +80,12 @@ export default {
       key: 'actions',
       tdClass: 'actions-cell',
       ...fieldOptions,
+      sortable: false,
     },
   ],
   testids: DEVOPS_ADOPTION_TABLE_TEST_IDS,
+  sortByStorageKey: DEVOPS_ADOPTION_SEGMENTS_TABLE_SORT_BY_STORAGE_KEY,
+  sortDescStorageKey: DEVOPS_ADOPTION_SEGMENTS_TABLE_SORT_DESC_STORAGE_KEY,
   props: {
     segments: {
       type: Array,
@@ -71,6 +97,12 @@ export default {
       default: null,
     },
   },
+  data() {
+    return {
+      sortBy: NAME_HEADER,
+      sortDesc: false,
+    };
+  },
   methods: {
     popoverContainerId(name) {
       return `popover_container_id_for_${name}`;
@@ -89,9 +121,23 @@ export default {
 </script>
 <template>
   <div>
+    <local-storage-sync
+      v-model="sortBy"
+      :storage-key="$options.sortByStorageKey"
+      :data-testid="$options.testids.LOCAL_STORAGE_SORT_BY"
+      as-json
+    />
+    <local-storage-sync
+      v-model="sortDesc"
+      :storage-key="$options.sortDescStorageKey"
+      :data-testid="$options.testids.LOCAL_STORAGE_SORT_DESC"
+      as-json
+    />
     <gl-table
       :fields="$options.tableHeaderFields"
       :items="segments"
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="sortDesc"
       thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
       stacked="sm"
     >

ee/app/assets/javascripts/admin/dev_ops_report/constants.js

@@ -116,4 +116,12 @@ export const DEVOPS_ADOPTION_TABLE_TEST_IDS = {
   DEPLOYS: 'deploysCol',
   ACTIONS: 'actionsCol',
   SCANNING: 'scanningCol',
+  LOCAL_STORAGE_SORT_BY: 'localStorageSortBy',
+  LOCAL_STORAGE_SORT_DESC: 'localStorageSortDesc',
 };
+
+export const DEVOPS_ADOPTION_SEGMENTS_TABLE_SORT_BY_STORAGE_KEY =
+  'devops_adoption_segments_table_sort_by';
+
+export const DEVOPS_ADOPTION_SEGMENTS_TABLE_SORT_DESC_STORAGE_KEY =
+  'devops_adoption_segments_table_sort_desc';

ee/changelogs/unreleased/291136-sort-columns-in-devops-adoption-table.yml

+---
+title: Add sorting by column in DevOps Adoption table
+merge_request: 50743
+author:
+type: added

ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_table_spec.js

 import { GlTable, GlButton, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import DevopsAdoptionTable from 'ee/admin/dev_ops_report/components/devops_adoption_table.vue';
 import DevopsAdoptionTableCellFlag from 'ee/admin/dev_ops_report/components/devops_adoption_table_cell_flag.vue';
 import { DEVOPS_ADOPTION_TABLE_TEST_IDS as TEST_IDS } from 'ee/admin/dev_ops_report/constants';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { devopsAdoptionSegmentsData, devopsAdoptionTableHeaders } from '../mock_data';
 
 describe('DevopsAdoptionTable', () => {
@@ -21,6 +23,7 @@ describe('DevopsAdoptionTable', () => {
   };
 
   beforeEach(() => {
+    localStorage.clear();
     createComponent();
   });
 
@@ -39,6 +42,9 @@ describe('DevopsAdoptionTable', () => {
   const findColSubComponent = (colTestId, childComponent) =>
     findCol(colTestId).find(childComponent);
 
+  const findSortByLocalStorageSync = () => wrapper.findAll(LocalStorageSync).at(0);
+  const findSortDescLocalStorageSync = () => wrapper.findAll(LocalStorageSync).at(1);
+
   describe('table headings', () => {
     let headers;
 
@@ -60,7 +66,7 @@ describe('DevopsAdoptionTable', () => {
         });
 
         it(`displays the correct table heading text for "${label}"`, () => {
-          expect(headerWrapper.text()).toBe(label);
+          expect(headerWrapper.text()).toContain(label);
         });
 
         describe(`helper information for "${label}"`, () => {
@@ -142,4 +148,42 @@ describe('DevopsAdoptionTable', () => {
       expect(button.props('category')).toBe('tertiary');
     });
   });
+
+  describe('sorting', () => {
+    let headers;
+
+    beforeEach(() => {
+      headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
+    });
+
+    it('sorts the segments by name', async () => {
+      expect(findCol(TEST_IDS.SEGMENT).text()).toBe('Segment 1');
+
+      headers.at(0).trigger('click');
+
+      await nextTick();
+
+      expect(findCol(TEST_IDS.SEGMENT).text()).toBe('Segment 2');
+    });
+
+    it('should update local storage when the sort column changes', async () => {
+      expect(findSortByLocalStorageSync().props('value')).toBe('name');
+
+      headers.at(1).trigger('click');
+
+      await nextTick();
+
+      expect(findSortByLocalStorageSync().props('value')).toBe('issueOpened');
+    });
+
+    it('should update local storage when the sort direction changes', async () => {
+      expect(findSortDescLocalStorageSync().props('value')).toBe(false);
+
+      headers.at(0).trigger('click');
+
+      await nextTick();
+
+      expect(findSortDescLocalStorageSync().props('value')).toBe(true);
+    });
+  });
 });