Add new stage table component

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

+<script>
+import { GlEmptyState, GlIcon, GlLink, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { NOT_ENOUGH_DATA_ERROR } from '../constants';
+import TotalTime from './total_time_component.vue';
+
+export default {
+  name: 'StageTableNew',
+  components: {
+    GlEmptyState,
+    GlIcon,
+    GlLink,
+    GlLoadingIcon,
+    GlTable,
+    TotalTime,
+  },
+  props: {
+    currentStage: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    stageEvents: {
+      type: Array,
+      required: true,
+    },
+    noDataSvgPath: {
+      type: String,
+      required: true,
+    },
+    emptyStateMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    isEmptyStage() {
+      return !this.stageEvents.length;
+    },
+    emptyStateTitle() {
+      const { emptyStateMessage } = this;
+      return emptyStateMessage || NOT_ENOUGH_DATA_ERROR;
+    },
+    withBuildStatus() {
+      const { currentStage } = this;
+      return !currentStage.custom && currentStage.name.toLowerCase().trim() === 'test';
+    },
+  },
+  methods: {
+    isMrLink(url = '') {
+      return url.includes('/merge_request');
+    },
+    itemTitle(item) {
+      return item.title || item.name;
+    },
+  },
+  fields: [
+    { key: 'issues', label: __('Issues'), thClass: 'gl-w-half' },
+    { key: 'time', label: __('Time'), thClass: 'gl-w-half' },
+  ],
+};
+</script>
+<template>
+  <div data-testid="vsa-stage-table">
+    <gl-loading-icon v-if="isLoading" class="gl-mt-4" size="md" />
+    <gl-empty-state v-else-if="isEmptyStage" :title="emptyStateTitle" :svg-path="noDataSvgPath" />
+    <gl-table
+      v-else
+      head-variant="white"
+      stacked="lg"
+      thead-class="border-bottom"
+      show-empty
+      :fields="$options.fields"
+      :items="stageEvents"
+      :empty-text="emptyStateMessage"
+    >
+      <template #cell(issues)="{ 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">
+                <span
+                  class="icon-build-status gl-vertical-align-middle gl-text-green-500"
+                  data-testid="vsa-stage-event-build-status"
+                >
+                  <gl-icon name="status_success" :size="14" />
+                </span>
+                <gl-link
+                  class="gl-text-black-normal item-build-name"
+                  data-testid="vsa-stage-event-build-name"
+                  :href="item.url"
+                >
+                  {{ item.name }}
+                </gl-link>
+                &middot;
+              </template>
+              <gl-link class="gl-text-black-normal pipeline-id" :href="item.url"
+                >#{{ item.id }}</gl-link
+              >
+              <gl-icon :size="16" name="fork" />
+              <gl-link
+                v-if="item.branch"
+                :href="item.branch.url"
+                class="gl-text-black-normal ref-name"
+                >{{ item.branch.name }}</gl-link
+              >
+              <span class="icon-branch gl-text-gray-400">
+                <gl-icon name="commit" :size="14" />
+              </span>
+              <gl-link
+                class="commit-sha"
+                :href="item.commitUrl"
+                data-testid="vsa-stage-event-build-sha"
+                >{{ item.shortSha }}</gl-link
+              >
+            </p>
+            <p class="gl-m-0">
+              <span v-if="withBuildStatus" data-testid="vsa-stage-event-build-status-date">
+                <gl-link class="gl-text-black-normal issue-date" :href="item.url">{{
+                  item.date
+                }}</gl-link>
+              </span>
+              <span v-else data-testid="vsa-stage-event-build-author-and-date">
+                <gl-link class="gl-text-black-normal build-date" :href="item.url">{{
+                  item.date
+                }}</gl-link>
+                {{ s__('ByAuthor|by') }}
+                <gl-link
+                  class="gl-text-black-normal issue-author-link"
+                  :href="item.author.webUrl"
+                  >{{ item.author.name }}</gl-link
+                >
+              </span>
+            </p>
+          </div>
+          <div v-else data-testid="vsa-stage-content">
+            <h5 class="gl-font-weight-bold gl-my-1" data-testid="vsa-stage-event-title">
+              <gl-link class="gl-text-black-normal" :href="item.url">{{ itemTitle(item) }}</gl-link>
+            </h5>
+            <p class="gl-m-0">
+              <template v-if="isMrLink(item.url)">
+                <gl-link class="gl-text-black-normal" :href="item.url">!{{ item.iid }}</gl-link>
+              </template>
+              <template v-else>
+                <gl-link class="gl-text-black-normal" :href="item.url">#{{ item.iid }}</gl-link>
+              </template>
+              <span class="gl-font-lg">&middot;</span>
+              <span data-testid="vsa-stage-event-date">
+                {{ s__('OpenedNDaysAgo|Opened') }}
+                <gl-link class="gl-text-black-normal" :href="item.url">{{
+                  item.createdAt
+                }}</gl-link>
+              </span>
+              <span data-testid="vsa-stage-event-author">
+                {{ s__('ByAuthor|by') }}
+                <gl-link class="gl-text-black-normal" :href="item.author.webUrl">{{
+                  item.author.name
+                }}</gl-link>
+              </span>
+            </p>
+          </div>
+        </div>
+      </template>
+      <template #cell(time)="{ item }">
+        <total-time :time="item.totalTime" data-testid="vsa-stage-event-time" />
+      </template>
+    </gl-table>
+  </div>
+</template>

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

@@ -46,7 +46,7 @@ export default {
 <template>
   <span class="total-time">
     <template v-if="hasData">
-      {{ calculatedTime.duration }} <span> {{ calculatedTime.units }} </span>
+      {{ calculatedTime.duration }} <span>{{ calculatedTime.units }}</span>
     </template>
     <template v-else> -- </template>
   </span>

ee/app/assets/javascripts/analytics/cycle_analytics/constants.js

-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const PROJECTS_PER_PAGE = 50;
 
@@ -69,3 +69,7 @@ export const OVERVIEW_STAGE_CONFIG = {
   title: __('Overview'),
   icon: 'home',
 };
+
+export const NOT_ENOUGH_DATA_ERROR = s__(
+  "ValueStreamAnalyticsStage|We don't have enough data to show this stage.",
+);

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/total_time_component_spec.js.snap

@@ -4,25 +4,25 @@ exports[`TotalTimeComponent with a blank object to render -- 1`] = `"<span class
 
 exports[`TotalTimeComponent with a valid time object with {"days": 3, "mins": 47, "seconds": 3} 1`] = `
 "<span class=\\"total-time\\">
-    3 <span> days </span></span>"
+    3 <span>days</span></span>"
 `;
 
 exports[`TotalTimeComponent with a valid time object with {"hours": 7, "mins": 20, "seconds": 10} 1`] = `
 "<span class=\\"total-time\\">
-    7 <span> hrs </span></span>"
+    7 <span>hrs</span></span>"
 `;
 
 exports[`TotalTimeComponent with a valid time object with {"hours": 23, "mins": 10} 1`] = `
 "<span class=\\"total-time\\">
-    23 <span> hrs </span></span>"
+    23 <span>hrs</span></span>"
 `;
 
 exports[`TotalTimeComponent with a valid time object with {"mins": 47, "seconds": 3} 1`] = `
 "<span class=\\"total-time\\">
-    47 <span> mins </span></span>"
+    47 <span>mins</span></span>"
 `;
 
 exports[`TotalTimeComponent with a valid time object with {"seconds": 35} 1`] = `
 "<span class=\\"total-time\\">
-    35 <span> s </span></span>"
+    35 <span>s</span></span>"
 `;

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

+import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
+import StageTableNew from 'ee/analytics/cycle_analytics/components/stage_table_new.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import {
+  stagingEvents,
+  stagingStage,
+  issueEvents,
+  issueStage,
+  testEvents,
+  testStage,
+} from '../mock_data';
+
+let wrapper = null;
+
+const noDataSvgPath = 'path/to/no/data';
+const emptyStateMessage = 'Too much data';
+const notEnoughDataError = "We don't have enough data to show this stage.";
+const [firstIssueEvent] = issueEvents;
+const [firstStagingEvent] = stagingEvents;
+const [firstTestEvent] = testEvents;
+
+const findStageEvents = () => wrapper.findAllByTestId('vsa-stage-event');
+const findStageEventTitle = (ev) => extendedWrapper(ev).findByTestId('vsa-stage-event-title');
+
+function createComponent(props = {}, shallow = false) {
+  const func = shallow ? shallowMount : mount;
+  return extendedWrapper(
+    func(StageTableNew, {
+      propsData: {
+        isLoading: false,
+        stageEvents: issueEvents,
+        noDataSvgPath,
+        currentStage: issueStage,
+        ...props,
+      },
+      stubs: {
+        GlLoadingIcon,
+        GlEmptyState,
+      },
+    }),
+  );
+}
+
+describe('StageTable', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('is loaded with data', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('will render the correct events', () => {
+      const evs = findStageEvents();
+      expect(evs).toHaveLength(issueEvents.length);
+
+      const titles = evs.wrappers.map((ev) => findStageEventTitle(ev).text());
+      issueEvents.forEach((ev, index) => {
+        expect(titles[index]).toBe(ev.title);
+      });
+    });
+
+    it('will not display the default data message', () => {
+      expect(wrapper.html()).not.toContain(notEnoughDataError);
+    });
+  });
+
+  describe('default event', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        stageEvents: [{ ...firstIssueEvent }],
+        currentStage: { ...issueStage, custom: false },
+      });
+    });
+
+    it('will render the event title', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-title').text()).toBe(firstIssueEvent.title);
+    });
+
+    it('does not render the fork icon', () => {
+      expect(wrapper.findByTestId('fork-icon').exists()).toBe(false);
+    });
+
+    it('does not render the branch icon', () => {
+      expect(wrapper.findByTestId('commit-icon').exists()).toBe(false);
+    });
+
+    it('will render the total time', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-time').text()).toBe('2 days');
+    });
+
+    it('will render the author', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-author').text()).toContain(
+        firstIssueEvent.author.name,
+      );
+    });
+
+    it('will render the created at date', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-date').text()).toContain(
+        firstIssueEvent.createdAt,
+      );
+    });
+  });
+
+  describe('staging event', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        stageEvents: [{ ...firstStagingEvent }],
+        currentStage: { ...stagingStage, custom: false },
+      });
+    });
+
+    it('will not render the event title', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-title').exists()).toBe(false);
+    });
+
+    it('will render the fork icon', () => {
+      expect(wrapper.findByTestId('fork-icon').exists()).toBe(true);
+    });
+
+    it('will render the branch icon', () => {
+      expect(wrapper.findByTestId('commit-icon').exists()).toBe(true);
+    });
+
+    it('will render the total time', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-time').text()).toBe('2 mins');
+    });
+
+    it('will render the build shortSha', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-build-sha').text()).toBe(
+        firstStagingEvent.shortSha,
+      );
+    });
+
+    it('will render the author and date', () => {
+      const content = wrapper.findByTestId('vsa-stage-event-build-author-and-date').text();
+      expect(content).toContain(firstStagingEvent.author.name);
+      expect(content).toContain(firstStagingEvent.date);
+    });
+  });
+
+  describe('test event', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        stageEvents: [{ ...firstTestEvent }],
+        currentStage: { ...testStage, custom: false },
+      });
+    });
+
+    it('will not render the event title', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-title').exists()).toBe(false);
+    });
+
+    it('will render the fork icon', () => {
+      expect(wrapper.findByTestId('fork-icon').exists()).toBe(true);
+    });
+
+    it('will render the branch icon', () => {
+      expect(wrapper.findByTestId('commit-icon').exists()).toBe(true);
+    });
+
+    it('will render the total time', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-time').text()).toBe('2 mins');
+    });
+
+    it('will render the build shortSha', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-build-sha').text()).toBe(
+        firstTestEvent.shortSha,
+      );
+    });
+
+    it('will render the build pipeline success icon', () => {
+      expect(wrapper.findByTestId('status_success-icon').exists()).toBe(true);
+    });
+
+    it('will render the build date', () => {
+      const content = wrapper.findByTestId('vsa-stage-event-build-status-date').text();
+      expect(content).toContain(firstTestEvent.date);
+    });
+
+    it('will render the build event name', () => {
+      expect(wrapper.findByTestId('vsa-stage-event-build-name').text()).toContain(
+        firstTestEvent.name,
+      );
+    });
+  });
+
+  it('isLoading = true', () => {
+    wrapper = createComponent({ isLoading: true }, true);
+    expect(wrapper.find(GlLoadingIcon).exists()).toEqual(true);
+  });
+
+  describe('with no stageEvents', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ stageEvents: [] });
+    });
+
+    it('will render the empty state', () => {
+      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+    });
+
+    it('will display the default no data message', () => {
+      expect(wrapper.html()).toContain(notEnoughDataError);
+    });
+  });
+
+  describe('emptyStateMessage set', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ stageEvents: [], emptyStateMessage });
+    });
+
+    it('will display the custom message', () => {
+      expect(wrapper.html()).not.toContain(notEnoughDataError);
+      expect(wrapper.html()).toContain(emptyStateMessage);
+    });
+  });
+});