Merge branch 'ps-fix-ide-pipelines-empty-state' into 'master'

Fix empty state of IDE pipelines tab

See merge request gitlab-org/gitlab!74916

app/assets/javascripts/ide/components/pipelines/empty_state.vue

+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlEmptyState,
+  },
+  computed: {
+    ...mapState(['pipelinesEmptyStateSvgPath']),
+    ciHelpPagePath() {
+      return helpPagePath('ci/quick_start/index.md');
+    },
+  },
+  i18n: {
+    title: s__('Pipelines|Build with confidence'),
+    description: s__(`Pipelines|GitLab CI/CD can automatically build,
+      test, and deploy your code. Let GitLab take care of time
+      consuming tasks, so you can spend more time creating.`),
+    primaryButtonText: s__('Pipelines|Get started with GitLab CI/CD'),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :title="$options.i18n.title"
+    :svg-path="pipelinesEmptyStateSvgPath"
+    :description="$options.i18n.description"
+    :primary-button-text="$options.i18n.primaryButtonText"
+    :primary-button-link="ciHelpPagePath"
+  />
+</template>

app/assets/javascripts/ide/components/pipelines/list.vue

@@ -11,10 +11,17 @@ import {
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import IDEServices from '~/ide/services';
-import { sprintf, __ } from '../../../locale';
-import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue';
-import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+import { sprintf, __ } from '~/locale';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import JobsList from '../jobs/list.vue';
+import EmptyState from './empty_state.vue';
+
+const CLASSES_FLEX_VERTICAL_CENTER = [
+  'gl-h-full',
+  'gl-display-flex',
+  'gl-flex-direction-column',
+  'gl-justify-content-center',
+];
 
 export default {
   components: {
@@ -32,7 +39,6 @@ export default {
     SafeHtml,
   },
   computed: {
-    ...mapState(['pipelinesEmptyStateSvgPath']),
     ...mapGetters(['currentProject']),
     ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']),
     ...mapState('pipelines', [
@@ -63,12 +69,15 @@ export default {
   methods: {
     ...mapActions('pipelines', ['fetchLatestPipeline']),
   },
+  CLASSES_FLEX_VERTICAL_CENTER,
 };
 </script>
 
 <template>
   <div class="ide-pipeline">
-    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="gl-mt-3" />
+    <div v-if="showLoadingIcon" :class="$options.CLASSES_FLEX_VERTICAL_CENTER">
+      <gl-loading-icon size="lg" />
+    </div>
     <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
         <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />
@@ -83,12 +92,9 @@ export default {
           </a>
         </span>
       </header>
-      <empty-state
-        v-if="!latestPipeline"
-        :empty-state-svg-path="pipelinesEmptyStateSvgPath"
-        :can-set-ci="true"
-        class="gl-p-5"
-      />
+      <div v-if="!latestPipeline" :class="$options.CLASSES_FLEX_VERTICAL_CENTER">
+        <empty-state />
+      </div>
       <gl-alert
         v-else-if="latestPipeline.yamlError"
         variant="danger"

spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap

@@ -6,10 +6,10 @@ exports[`IDE pipelines list when loaded renders empty state when no latestPipeli
 >
   <!---->
    
-  <empty-state-stub
-    cansetci="true"
-    class="gl-p-5"
-    emptystatesvgpath="http://test.host"
-  />
+  <div
+    class="gl-h-full gl-display-flex gl-flex-direction-column gl-justify-content-center"
+  >
+    <empty-state-stub />
+  </div>
 </div>
 `;

spec/frontend/ide/components/pipelines/empty_state_spec.js

+import { GlEmptyState } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import EmptyState from '~/ide/components/pipelines/empty_state.vue';
+import { createStore } from '~/ide/stores';
+
+const TEST_PIPELINES_EMPTY_STATE_SVG_PATH = 'illustrations/test/pipelines.svg';
+
+describe('~/ide/components/pipelines/empty_state.vue', () => {
+  let store;
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(EmptyState, {
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    store.dispatch('setEmptyStateSvgs', {
+      pipelinesEmptyStateSvgPath: TEST_PIPELINES_EMPTY_STATE_SVG_PATH,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders empty state', () => {
+      expect(wrapper.find(GlEmptyState).props()).toMatchObject({
+        title: EmptyState.i18n.title,
+        description: EmptyState.i18n.description,
+        primaryButtonText: EmptyState.i18n.primaryButtonText,
+        primaryButtonLink: '/help/ci/quick_start/index.md',
+        svgPath: TEST_PIPELINES_EMPTY_STATE_SVG_PATH,
+      });
+    });
+  });
+});

spec/frontend/ide/components/pipelines/list_spec.js

@@ -2,10 +2,10 @@ import { GlLoadingIcon, GlTab } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { TEST_HOST } from 'helpers/test_constants';
 import { pipelines } from 'jest/ide/mock_data';
 import JobsList from '~/ide/components/jobs/list.vue';
 import List from '~/ide/components/pipelines/list.vue';
+import EmptyState from '~/ide/components/pipelines/empty_state.vue';
 import IDEServices from '~/ide/services';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
@@ -18,9 +18,6 @@ jest.mock('~/ide/services', () => ({
 describe('IDE pipelines list', () => {
   let wrapper;
 
-  const defaultState = {
-    pipelinesEmptyStateSvgPath: TEST_HOST,
-  };
   const defaultPipelinesState = {
     stages: [],
     failedStages: [],
@@ -38,7 +35,6 @@ describe('IDE pipelines list', () => {
         currentProject: () => ({ web_url: 'some/url ', path_with_namespace: fakeProjectPath }),
       },
       state: {
-        ...defaultState,
         ...rootState,
       },
       modules: {
@@ -131,6 +127,8 @@ describe('IDE pipelines list', () => {
 
     it('renders empty state when no latestPipeline', () => {
       createComponent({}, { ...defaultPipelinesLoadedState, latestPipeline: null });
+
+      expect(wrapper.find(EmptyState).exists()).toBe(true);
       expect(wrapper.element).toMatchSnapshot();
     });