2 files changed, 16 insertions, 21 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index 2e050c066f1..6f496ffc6ae 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -5,8 +5,8 @@ import CommitPipelinesTable from './pipelines_table.vue';
  * Used in:
  *  - Project Pipelines List (projects:pipelines:index)
  *  - Commit details View > Pipelines Tab > Pipelines Table (projects:commit:pipelines)
- *  - Merge Request details View > Pipelines Tab > Pipelines Table (projects:merge_requests:show)
- *  - New Merge Request View > Pipelines Tab > Pipelines Table (projects:merge_requests:creations:new)
+ *  - Merge request details View > Pipelines Tab > Pipelines Table (projects:merge_requests:show)
+ *  - New merge request View > Pipelines Tab > Pipelines Table (projects:merge_requests:creations:new)
  */
 export default () => {
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index e1cca5adc73..ddca5bc7d4f 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -1,7 +1,6 @@
 <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: {
@@ -82,7 +81,7 @@ export default {
       return this.hasError && !this.isLoading;
     },
     /**
-     * The Run Pipeline button can only be rendered when:
+     * The "Run pipeline" button can only be rendered when:
      * - In MR view -  we use `canCreatePipelineInTargetProject` for that purpose
      * - If the latest pipeline has the `detached_merge_request_pipeline` flag
      *
@@ -91,9 +90,6 @@ export default {
     canRenderPipelineButton() {
       return this.latestPipelineDetachedFlag;
     },
-    pipelineButtonClass() {
-      return !this.glFeatures.newPipelinesTable ? 'gl-md-display-none' : 'gl-lg-display-none';
-    },
     isForkMergeRequest() {
       return this.sourceProjectFullPath !== this.targetProjectFullPath;
     },
@@ -149,7 +145,7 @@ export default {
       }
     },
     /**
-     * When the user clicks on the Run Pipeline button
+     * When the user clicks on the "Run pipeline" button
      * we need to make a post request and
      * to update the table content once the request is finished.
      *
@@ -178,17 +174,17 @@ export default {
   <div class="content-list pipelines">
     <gl-loading-icon
       v-if="isLoading"
-      :label="s__('Pipelines|Loading Pipelines')"
+      :label="s__('Pipelines|Loading pipelines')"
       size="lg"
       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.`)
+        Try again in a few moments or contact your support team.`)
       "
     />
 
@@ -196,14 +192,13 @@ export default {
       <gl-button
         v-if="canRenderPipelineButton"
         block
-        class="gl-mt-3 gl-mb-3"
-        :class="pipelineButtonClass"
-        variant="success"
+        class="gl-mt-3 gl-mb-3 gl-lg-display-none"
+        variant="confirm"
         data-testid="run_pipeline_button_mobile"
         :loading="state.isRunningMergeRequestPipeline"
         @click="tryRunPipeline"
       >
-        {{ s__('Pipelines|Run Pipeline') }}
+        {{ s__('Pipeline|Run pipeline') }}
       </gl-button>
 
       <pipelines-table-component
@@ -214,12 +209,12 @@ export default {
         <template #table-header-actions>
           <div v-if="canRenderPipelineButton" class="gl-text-right">
             <gl-button
-              variant="success"
+              variant="confirm"
               data-testid="run_pipeline_button"
               :loading="state.isRunningMergeRequestPipeline"
               @click="tryRunPipeline"
             >
-              {{ s__('Pipelines|Run Pipeline') }}
+              {{ s__('Pipeline|Run pipeline') }}
             </gl-button>
           </div>
         </template>
@@ -232,7 +227,7 @@ export default {
       ref="modal"
       :modal-id="modalId"
       :title="s__('Pipelines|Are you sure you want to run this pipeline?')"
-      :ok-title="s__('Pipelines|Run Pipeline')"
+      :ok-title="s__('Pipeline|Run pipeline')"
       ok-variant="danger"
       @ok="onClickRunPipeline"
     >