Merge branch 'dimitrieh-master-patch-74834' into 'master'

Replace <gl-deprecated-button> with <gl-button> in app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

Closes #219875

See merge request gitlab-org/gitlab!36968

app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

 <script>
-import { GlLoadingIcon, GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { __, sprintf } from '~/locale';
 
@@ -9,8 +9,7 @@ export default {
   },
   components: {
     CiStatus,
-    GlLoadingIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   props: {
     pipeline: {
@@ -95,26 +94,21 @@ export default {
     @mouseover="onDownstreamHovered"
     @mouseleave="onDownstreamHoverLeave"
   >
-    <gl-deprecated-button
+    <gl-button
       :id="buttonId"
       v-gl-tooltip
       :title="tooltipText"
-      class="js-linked-pipeline-content linked-pipeline-content"
+      class="linked-pipeline-content"
       data-qa-selector="linked_pipeline_button"
       :class="`js-pipeline-expand-${pipeline.id}`"
+      :loading="pipeline.isLoading"
       @click="onClickLinkedPipeline"
     >
-      <gl-loading-icon v-if="pipeline.isLoading" class="js-linked-pipeline-loading d-inline" />
-      <ci-status
-        v-else
-        :status="pipelineStatus"
-        css-classes="position-top-0"
-        class="js-linked-pipeline-status"
-      />
+      <ci-status v-if="!pipeline.isLoading" :status="pipelineStatus" css-classes="gl-top-0" />
       <span class="str-truncated"> {{ downstreamTitle }} &#8226; #{{ pipeline.id }} </span>
       <div class="gl-pt-2">
         <span class="badge badge-primary" data-testid="downstream-pipeline-label">{{ label }}</span>
       </div>
-    </gl-deprecated-button>
+    </gl-button>
   </li>
 </template>

changelogs/unreleased/dimitrieh-master-patch-74834.yml

+---
+title: Replace <gl-deprecated-button> with <gl-button> in app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+merge_request: 36968
+author:
+type: other

spec/frontend/pipelines/graph/linked_pipeline_spec.js

 import { mount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 
@@ -12,7 +13,7 @@ const invalidTriggeredPipelineId = mockPipeline.project.id + 5;
 describe('Linked pipeline', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find('button');
+  const findButton = () => wrapper.find(GlButton);
   const findPipelineLabel = () => wrapper.find('[data-testid="downstream-pipeline-label"]');
   const findLinkedPipeline = () => wrapper.find({ ref: 'linkedPipeline' });
 
@@ -42,9 +43,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render a button', () => {
-      const linkElement = wrapper.find('.js-linked-pipeline-content');
-
-      expect(linkElement.exists()).toBe(true);
+      expect(findButton().exists()).toBe(true);
     });
 
     it('should render the project name', () => {
@@ -62,7 +61,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should have a ci-status child component', () => {
-      expect(wrapper.find('.js-linked-pipeline-status').exists()).toBe(true);
+      expect(wrapper.find(CiStatus).exists()).toBe(true);
     });
 
     it('should render the pipeline id', () => {
@@ -77,15 +76,14 @@ describe('Linked pipeline', () => {
     });
 
     it('should render the tooltip text as the title attribute', () => {
-      const tooltipRef = wrapper.find('.js-linked-pipeline-content');
-      const titleAttr = tooltipRef.attributes('title');
+      const titleAttr = findButton().attributes('title');
 
       expect(titleAttr).toContain(mockPipeline.project.name);
       expect(titleAttr).toContain(mockPipeline.details.status.label);
     });
 
-    it('does not render the loading icon when isLoading is false', () => {
-      expect(wrapper.find('.js-linked-pipeline-loading').exists()).toBe(false);
+    it('sets the loading prop to false', () => {
+      expect(findButton().props('loading')).toBe(false);
     });
 
     it('should display multi-project label when pipeline project id is not the same as triggered pipeline project id', () => {
@@ -132,8 +130,8 @@ describe('Linked pipeline', () => {
       createWrapper(props);
     });
 
-    it('renders a loading icon', () => {
-      expect(wrapper.find('.js-linked-pipeline-loading').exists()).toBe(true);
+    it('sets the loading prop to true', () => {
+      expect(findButton().props('loading')).toBe(true);
     });
   });