Merge branch 'ek-project-vsa-hide-sorting-attributes' into 'master'

Hide unsupported sorting for project VSA stage table

See merge request gitlab-org/gitlab!69427

app/assets/javascripts/cycle_analytics/components/base.vue

@@ -173,6 +173,7 @@ export default {
       :empty-state-message="emptyStageText"
       :no-data-svg-path="noDataSvgPath"
       :pagination="null"
+      :sortable="false"
     />
   </div>
 </template>

app/assets/javascripts/cycle_analytics/components/stage_table.vue

@@ -23,8 +23,8 @@ import TotalTime from './total_time_component.vue';
 const DEFAULT_WORKFLOW_TITLE_PROPERTIES = {
   thClass: 'gl-w-half',
   key: PAGINATION_SORT_FIELD_END_EVENT,
-  sortable: true,
 };
+
 const WORKFLOW_COLUMN_TITLES = {
   issues: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Issues') },
   jobs: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Jobs') },
@@ -84,6 +84,11 @@ export default {
       required: false,
       default: null,
     },
+    sortable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     if (this.pagination) {
@@ -122,9 +127,11 @@ export default {
           key: PAGINATION_SORT_FIELD_DURATION,
           label: __('Time'),
           thClass: 'gl-w-half',
-          sortable: true,
         },
-      ];
+      ].map((field) => ({
+        ...field,
+        sortable: this.sortable,
+      }));
     },
     prevPage() {
       return Math.max(this.pagination.page - 1, 0);

spec/frontend/cycle_analytics/stage_table_spec.js

@@ -22,6 +22,7 @@ const findStageEvents = () => wrapper.findAllByTestId('vsa-stage-event');
 const findPagination = () => wrapper.findByTestId('vsa-stage-pagination');
 const findTable = () => wrapper.findComponent(GlTable);
 const findTableHead = () => wrapper.find('thead');
+const findTableHeadColumns = () => findTableHead().findAll('th');
 const findStageEventTitle = (ev) => extendedWrapper(ev).findByTestId('vsa-stage-event-title');
 const findStageTime = () => wrapper.findByTestId('vsa-stage-event-time');
 const findIcon = (name) => wrapper.findByTestId(`${name}-icon`);
@@ -244,6 +245,12 @@ describe('StageTable', () => {
       wrapper.destroy();
     });
 
+    it('can sort the table by each column', () => {
+      findTableHeadColumns().wrappers.forEach((w) => {
+        expect(w.attributes('aria-sort')).toBe('none');
+      });
+    });
+
     it('clicking a table column will send tracking information', () => {
       triggerTableSort();
 
@@ -275,5 +282,17 @@ describe('StageTable', () => {
         },
       ]);
     });
+
+    describe('with sortable=false', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ sortable: false });
+      });
+
+      it('cannot sort the table', () => {
+        findTableHeadColumns().wrappers.forEach((w) => {
+          expect(w.attributes('aria-sort')).toBeUndefined();
+        });
+      });
+    });
   });
 });