Replace blank state component with gitlab-ui

This change removes the custom blank state component for pipelines
in favor of using the empty state from gitlab-ui.

This change preserves the text style but it changes the svg image sizes.

app/assets/javascripts/commit/pipelines/pipelines_table.vue

 <script>
-import { GlButton, GlLoadingIcon, GlModal, GlLink } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlLoadingIcon, GlModal, GlLink } from '@gitlab/ui';
 import { getParameterByName } from '~/lib/utils/common_utils';
-import SvgBlankState from '~/pipelines/components/pipelines_list/blank_state.vue';
 import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 import eventHub from '~/pipelines/event_hub';
 import PipelinesMixin from '~/pipelines/mixins/pipelines_mixin';
@@ -13,12 +12,12 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 export default {
   components: {
     GlButton,
+    GlEmptyState,
     GlLink,
     GlLoadingIcon,
     GlModal,
     PipelinesTableComponent,
     TablePagination,
-    SvgBlankState,
   },
   mixins: [PipelinesMixin, glFeatureFlagMixin()],
   props: {
@@ -183,10 +182,10 @@ export default {
       class="prepend-top-20"
     />
 
-    <svg-blank-state
+    <gl-empty-state
       v-else-if="shouldRenderErrorState"
       :svg-path="errorStateSvgPath"
-      :message="
+      :title="
         s__(`Pipelines|There was an error fetching the pipelines.
         Try again in a few moments or contact your support team.`)
       "

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

-<script>
-export default {
-  name: 'PipelinesSvgState',
-  props: {
-    svgPath: {
-      type: String,
-      required: true,
-    },
-
-    message: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="row empty-state">
-    <div class="col-12">
-      <div class="svg-content"><img :src="svgPath" /></div>
-    </div>
-
-    <div class="col-12 text-center">
-      <div class="text-content">
-        <h4>{{ message }}</h4>
-      </div>
-    </div>
-  </div>
-</template>

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

 <script>
-import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
+import { GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { getParameterByName } from '~/lib/utils/common_utils';
@@ -10,7 +10,6 @@ import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../
 import PipelinesMixin from '../../mixins/pipelines_mixin';
 import PipelinesService from '../../services/pipelines_service';
 import { validateParams } from '../../utils';
-import SvgBlankState from './blank_state.vue';
 import EmptyState from './empty_state.vue';
 import NavigationControls from './nav_controls.vue';
 import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
@@ -19,13 +18,13 @@ import PipelinesTableComponent from './pipelines_table.vue';
 export default {
   components: {
     EmptyState,
+    GlEmptyState,
     GlIcon,
     GlLoadingIcon,
     NavigationTabs,
     NavigationControls,
     PipelinesFilteredSearch,
     PipelinesTableComponent,
-    SvgBlankState,
     TablePagination,
   },
   mixins: [PipelinesMixin],
@@ -333,19 +332,19 @@ export default {
         :can-set-ci="canCreatePipeline"
       />
 
-      <svg-blank-state
+      <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.error"
         :svg-path="errorStateSvgPath"
-        :message="
+        :title="
           s__(`Pipelines|There was an error fetching the pipelines.
         Try again in a few moments or contact your support team.`)
         "
       />
 
-      <svg-blank-state
+      <gl-empty-state
         v-else-if="stateToRender === $options.stateMap.emptyTab"
         :svg-path="noPipelinesSvgPath"
-        :message="emptyTabMessage"
+        :title="emptyTabMessage"
       />
 
       <div v-else-if="stateToRender === $options.stateMap.tableList">

spec/frontend/pipelines/blank_state_spec.js

-import { getByText } from '@testing-library/dom';
-import { mount } from '@vue/test-utils';
-import BlankState from '~/pipelines/components/pipelines_list/blank_state.vue';
-
-describe('Pipelines Blank State', () => {
-  const wrapper = mount(BlankState, {
-    propsData: {
-      svgPath: 'foo',
-      message: 'Blank State',
-    },
-  });
-
-  it('should render svg', () => {
-    expect(wrapper.find('.svg-content img').attributes('src')).toEqual('foo');
-  });
-
-  it('should render message', () => {
-    expect(getByText(wrapper.element, /Blank State/i)).toBeTruthy();
-  });
-});

spec/frontend/pipelines/pipelines_spec.js

-import { GlButton, GlFilteredSearch, GlLoadingIcon, GlPagination } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlFilteredSearch, GlLoadingIcon, GlPagination } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { chunk } from 'lodash';
@@ -8,8 +8,6 @@ import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import BlankState from '~/pipelines/components/pipelines_list/blank_state.vue';
-import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
 import NavigationControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
 import PipelinesComponent from '~/pipelines/components/pipelines_list/pipelines.vue';
 import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
@@ -58,11 +56,10 @@ describe('Pipelines', () => {
   };
 
   const findFilteredSearch = () => wrapper.findComponent(GlFilteredSearch);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findNavigationTabs = () => wrapper.findComponent(NavigationTabs);
   const findNavigationControls = () => wrapper.findComponent(NavigationControls);
   const findPipelinesTable = () => wrapper.findComponent(PipelinesTableComponent);
-  const findEmptyState = () => wrapper.findComponent(EmptyState);
-  const findBlankState = () => wrapper.findComponent(BlankState);
   const findTablePagination = () => wrapper.findComponent(TablePagination);
 
   const findTab = (tab) => wrapper.findByTestId(`pipelines-tab-${tab}`);
@@ -268,7 +265,7 @@ describe('Pipelines', () => {
           });
 
           it('should filter pipelines', async () => {
-            expect(findBlankState().text()).toBe('There are currently no pipelines.');
+            expect(findEmptyState().text()).toBe('There are currently no pipelines.');
           });
 
           it('should update browser bar', () => {
@@ -515,7 +512,7 @@ describe('Pipelines', () => {
       });
 
       it('renders empty state', () => {
-        expect(findBlankState().text()).toBe('There are currently no pipelines.');
+        expect(findEmptyState().text()).toBe('There are currently no pipelines.');
       });
 
       it('renders tab empty state finished scope', async () => {
@@ -528,7 +525,7 @@ describe('Pipelines', () => {
 
         await waitForPromises();
 
-        expect(findBlankState().text()).toBe('There are currently no finished pipelines.');
+        expect(findEmptyState().text()).toBe('There are currently no finished pipelines.');
       });
     });
 
@@ -599,7 +596,7 @@ describe('Pipelines', () => {
       });
 
       it('renders empty state', () => {
-        expect(findBlankState().text()).toBe('There are currently no pipelines.');
+        expect(findEmptyState().text()).toBe('There are currently no pipelines.');
       });
     });
   });
@@ -688,7 +685,7 @@ describe('Pipelines', () => {
       });
 
       it('shows error state', () => {
-        expect(findBlankState().text()).toBe(
+        expect(findEmptyState().text()).toBe(
           'There was an error fetching the pipelines. Try again in a few moments or contact your support team.',
         );
       });
@@ -713,7 +710,7 @@ describe('Pipelines', () => {
       });
 
       it('shows error state', () => {
-        expect(findBlankState().text()).toBe(
+        expect(findEmptyState().text()).toBe(
           'There was an error fetching the pipelines. Try again in a few moments or contact your support team.',
         );
       });