Display relevant titles for the VSA stage table

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_table_new.vue

@@ -4,6 +4,14 @@ import { __ } from '~/locale';
 import { NOT_ENOUGH_DATA_ERROR } from '../constants';
 import TotalTime from './total_time_component.vue';
 
+const DEFAULT_WORKFLOW_TITLE_PROPERTIES = { thClass: 'gl-w-half', key: 'workflowTitleKey' };
+const WORKFLOW_COLUMN_TITLES = {
+  issues: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Issues') },
+  jobs: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Jobs') },
+  deployments: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Deployments') },
+  mergeRequests: { ...DEFAULT_WORKFLOW_TITLE_PROPERTIES, label: __('Merge requests') },
+};
+
 export default {
   name: 'StageTableNew',
   components: {
@@ -45,10 +53,31 @@ export default {
       const { emptyStateMessage } = this;
       return emptyStateMessage || NOT_ENOUGH_DATA_ERROR;
     },
-    withBuildStatus() {
+    isDefaultTestStage() {
       const { currentStage } = this;
       return !currentStage.custom && currentStage.name.toLowerCase().trim() === 'test';
     },
+    isDefaultStagingStage() {
+      const { currentStage } = this;
+      return !currentStage.custom && currentStage.name.toLowerCase().trim() === 'staging';
+    },
+    isMergeRequestStage() {
+      const [firstEvent] = this.stageEvents;
+      return this.isMrLink(firstEvent.url);
+    },
+    workflowTitle() {
+      if (this.isDefaultTestStage) {
+        return WORKFLOW_COLUMN_TITLES.jobs;
+      } else if (this.isDefaultStagingStage) {
+        return WORKFLOW_COLUMN_TITLES.deployments;
+      } else if (this.isMergeRequestStage) {
+        return WORKFLOW_COLUMN_TITLES.mergeRequests;
+      }
+      return WORKFLOW_COLUMN_TITLES.issues;
+    },
+    fields() {
+      return [this.workflowTitle, { key: 'time', label: __('Time'), thClass: 'gl-w-half' }];
+    },
   },
   methods: {
     isMrLink(url = '') {
@@ -58,10 +87,6 @@ export default {
       return item.title || item.name;
     },
   },
-  fields: [
-    { key: 'issues', label: __('Issues'), thClass: 'gl-w-half' },
-    { key: 'time', label: __('Time'), thClass: 'gl-w-half' },
-  ],
 };
 </script>
 <template>
@@ -74,15 +99,15 @@ export default {
       stacked="lg"
       thead-class="border-bottom"
       show-empty
-      :fields="$options.fields"
+      :fields="fields"
       :items="stageEvents"
       :empty-text="emptyStateMessage"
     >
-      <template #cell(issues)="{ item }">
+      <template #cell(workflowTitleKey)="{ item }">
         <div data-testid="vsa-stage-event">
           <div v-if="item.id" data-testid="vsa-stage-content">
             <p class="gl-m-0">
-              <template v-if="withBuildStatus">
+              <template v-if="isDefaultTestStage">
                 <span
                   class="icon-build-status gl-vertical-align-middle gl-text-green-500"
                   data-testid="vsa-stage-event-build-status"
@@ -119,7 +144,7 @@ export default {
               >
             </p>
             <p class="gl-m-0">
-              <span v-if="withBuildStatus" data-testid="vsa-stage-event-build-status-date">
+              <span v-if="isDefaultTestStage" data-testid="vsa-stage-event-build-status-date">
                 <gl-link class="gl-text-black-normal issue-date" :href="item.url">{{
                   item.date
                 }}</gl-link>

ee/changelogs/unreleased/feat-fix-vsa-stage-table-headers.yml

+---
+title: Display relevant titles for the VSA stage table
+merge_request: 59485
+author:
+type: added

ee/spec/frontend/analytics/cycle_analytics/components/stage_table_new_spec.js

@@ -9,6 +9,8 @@ import {
   issueStage,
   testEvents,
   testStage,
+  reviewStage,
+  reviewEvents,
 } from '../mock_data';
 
 let wrapper = null;
@@ -19,6 +21,7 @@ const notEnoughDataError = "We don't have enough data to show this stage.";
 const [firstIssueEvent] = issueEvents;
 const [firstStagingEvent] = stagingEvents;
 const [firstTestEvent] = testEvents;
+const [firstReviewEvent] = reviewEvents;
 
 const findStageEvents = () => wrapper.findAllByTestId('vsa-stage-event');
 const findStageEventTitle = (ev) => extendedWrapper(ev).findByTestId('vsa-stage-event-title');
@@ -79,6 +82,10 @@ describe('StageTable', () => {
       expect(wrapper.findByTestId('vsa-stage-event-title').text()).toBe(firstIssueEvent.title);
     });
 
+    it('will set the workflow title to "Issues"', () => {
+      expect(wrapper.find('thead').text()).toContain('Issues');
+    });
+
     it('does not render the fork icon', () => {
       expect(wrapper.findByTestId('fork-icon').exists()).toBe(false);
     });
@@ -104,6 +111,20 @@ describe('StageTable', () => {
     });
   });
 
+  describe('merge request event', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        stageEvents: [{ ...firstReviewEvent }],
+        currentStage: { ...reviewStage, custom: false },
+      });
+    });
+
+    it('will set the workflow title to "Merge requests"', () => {
+      expect(wrapper.find('thead').text()).toContain('Merge requests');
+      expect(wrapper.find('thead').text()).not.toContain('Issues');
+    });
+  });
+
   describe('staging event', () => {
     beforeEach(() => {
       wrapper = createComponent({
@@ -112,6 +133,11 @@ describe('StageTable', () => {
       });
     });
 
+    it('will set the workflow title to "Deployments"', () => {
+      expect(wrapper.find('thead').text()).toContain('Deployments');
+      expect(wrapper.find('thead').text()).not.toContain('Issues');
+    });
+
     it('will not render the event title', () => {
       expect(wrapper.findByTestId('vsa-stage-event-title').exists()).toBe(false);
     });
@@ -149,6 +175,11 @@ describe('StageTable', () => {
       });
     });
 
+    it('will set the workflow title to "Jobs"', () => {
+      expect(wrapper.find('thead').text()).toContain('Jobs');
+      expect(wrapper.find('thead').text()).not.toContain('Issues');
+    });
+
     it('will not render the event title', () => {
       expect(wrapper.findByTestId('vsa-stage-event-title').exists()).toBe(false);
     });