Commit 58e7dce6 authored by Martin Wortschack's avatar Martin Wortschack Committed by Brandon Labuschagne

Add sorting by column in DevOps Adoption table

parent b06d7cac
......@@ -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"
>
......
......@@ -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';
---
title: Add sorting by column in DevOps Adoption table
merge_request: 50743
author:
type: added
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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment