Merge branch '301010-refactor-empty-state-pipelines' into 'master'

Use GitLab UI empty state in pipelines list

See merge request gitlab-org/gitlab!56499

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

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlEmptyState } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 
 export default {
   i18n: {
-    infoMessage: 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.`),
-    buttonMessage: s__('Pipelines|Get started with CI/CD'),
+    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.`),
+    btnText: s__('Pipelines|Get started with CI/CD'),
+    noCiDescription: s__('Pipelines|This project is not currently set up to run pipelines.'),
   },
   name: 'PipelinesEmptyState',
   components: {
-    GlButton,
+    GlEmptyState,
   },
   props: {
     emptyStateSvgPath: {
@@ -32,37 +34,20 @@ export default {
 };
 </script>
 <template>
-  <div class="row empty-state js-empty-state">
-    <div class="col-12">
-      <div class="svg-content svg-250"><img :src="emptyStateSvgPath" /></div>
-    </div>
-
-    <div class="col-12">
-      <div class="text-content">
-        <template v-if="canSetCi">
-          <h4 data-testid="header-text" class="gl-text-center">
-            {{ s__('Pipelines|Build with confidence') }}
-          </h4>
-          <p data-testid="info-text">
-            {{ $options.i18n.infoMessage }}
-          </p>
-
-          <div class="gl-text-center">
-            <gl-button
-              :href="ciHelpPagePath"
-              variant="info"
-              category="primary"
-              data-testid="get-started-pipelines"
-            >
-              {{ $options.i18n.buttonMessage }}
-            </gl-button>
-          </div>
-        </template>
-
-        <p v-else class="gl-text-center">
-          {{ s__('Pipelines|This project is not currently set up to run pipelines.') }}
-        </p>
-      </div>
-    </div>
+  <div>
+    <gl-empty-state
+      v-if="canSetCi"
+      :title="$options.i18n.title"
+      :svg-path="emptyStateSvgPath"
+      :description="$options.i18n.description"
+      :primary-button-text="$options.i18n.btnText"
+      :primary-button-link="ciHelpPagePath"
+    />
+    <gl-empty-state
+      v-else
+      title=""
+      :svg-path="emptyStateSvgPath"
+      :description="$options.i18n.noCiDescription"
+    />
   </div>
 </template>

spec/frontend/commit/pipelines/pipelines_spec.js

@@ -271,7 +271,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
       setImmediate(() => {
         expect(vm.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
         expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
-        expect(vm.$el.querySelector('.js-empty-state')).toBe(null);
         expect(vm.$el.querySelector('.ci-table')).toBe(null);
         done();
       });

spec/frontend/pipelines/empty_state_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
 
 describe('Pipelines Empty State', () => {
   let wrapper;
 
-  const findGetStartedButton = () => wrapper.find('[data-testid="get-started-pipelines"]');
-  const findInfoText = () => wrapper.find('[data-testid="info-text"]').text();
-  const createWrapper = () => {
-    wrapper = shallowMount(EmptyState, {
+  const findIllustration = () => wrapper.find('img');
+  const findButton = () => wrapper.find('a');
+
+  const createWrapper = (props = {}) => {
+    wrapper = mount(EmptyState, {
       propsData: {
-        emptyStateSvgPath: 'foo',
+        emptyStateSvgPath: 'foo.svg',
         canSetCi: true,
+        ...props,
       },
     });
   };
 
-  describe('renders', () => {
+  describe('when user can configure CI', () => {
     beforeEach(() => {
-      createWrapper();
+      createWrapper({}, mount);
     });
 
     afterEach(() => {
@@ -26,26 +28,49 @@ describe('Pipelines Empty State', () => {
     });
 
     it('should render empty state SVG', () => {
-      expect(wrapper.find('img').attributes('src')).toBe('foo');
+      expect(findIllustration().attributes('src')).toBe('foo.svg');
     });
 
     it('should render empty state header', () => {
-      expect(wrapper.find('[data-testid="header-text"]').text()).toBe('Build with confidence');
-    });
-
-    it('should render a link with provided help path', () => {
-      expect(findGetStartedButton().attributes('href')).toBe('/help/ci/quick_start/index.md');
+      expect(wrapper.text()).toContain('Build with confidence');
     });
 
     it('should render empty state information', () => {
-      expect(findInfoText()).toContain(
+      expect(wrapper.text()).toContain(
         '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',
       );
     });
 
+    it('should render button with help path', () => {
+      expect(findButton().attributes('href')).toBe('/help/ci/quick_start/index.md');
+    });
+
     it('should render button text', () => {
-      expect(findGetStartedButton().text()).toBe('Get started with CI/CD');
+      expect(findButton().text()).toBe('Get started with CI/CD');
+    });
+  });
+
+  describe('when user cannot configure CI', () => {
+    beforeEach(() => {
+      createWrapper({ canSetCi: false }, mount);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+      wrapper = null;
+    });
+
+    it('should render empty state SVG', () => {
+      expect(findIllustration().attributes('src')).toBe('foo.svg');
+    });
+
+    it('should render empty state header', () => {
+      expect(wrapper.text()).toBe('This project is not currently set up to run pipelines.');
+    });
+
+    it('should not render a link', () => {
+      expect(findButton().exists()).toBe(false);
     });
   });
 });

spec/frontend/pipelines/pipelines_spec.js

@@ -539,12 +539,11 @@ describe('Pipelines', () => {
       });
 
       it('renders empty state', () => {
-        expect(findEmptyState().find('[data-testid="header-text"]').text()).toBe(
-          'Build with confidence',
-        );
-        expect(findEmptyState().find('[data-testid="info-text"]').text()).toContain(
+        expect(findEmptyState().text()).toContain('Build with confidence');
+        expect(findEmptyState().text()).toContain(
           'GitLab CI/CD can automatically build, test, and deploy your code.',
         );
+
         expect(findEmptyState().find(GlButton).text()).toBe('Get started with CI/CD');
         expect(findEmptyState().find(GlButton).attributes('href')).toBe(
           '/help/ci/quick_start/index.md',