Hide unsupported sorting for project VSA stage table

For project VSA we have migrated to the shared stage
table, but we currently do not support sorting.

Adding the sortable prop to the stage table component will allow
us to hide the sorting behaviour for project VSA until it is
supported.

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();
+        });
+      });
+    });
   });
 });