Replace deprecated button in deployment

We are swapping the GlDeprecatedButton to the
GlButton inside the deployment actions
vue component.

app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js

@@ -11,3 +11,9 @@ export const CANCELED = 'canceled';
 export const STOPPING = 'stopping';
 export const DEPLOYING = 'deploying';
 export const REDEPLOYING = 'redeploying';
+
+export const ACT_BUTTON_ICONS = {
+  play: 'play',
+  repeat: 'repeat',
+  stop: 'stop',
+};

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue

 <script>
-import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { RUNNING } from './constants';
 
 export default {
   name: 'DeploymentActionButton',
   components: {
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,6 +35,10 @@ export default {
       required: false,
       default: '',
     },
+    icon: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     isActionInProgress() {
@@ -58,18 +62,19 @@ export default {
 </script>
 
 <template>
-  <span v-gl-tooltip :title="actionInProgressTooltip" class="d-inline-block" tabindex="0">
-    <gl-deprecated-button
+  <span v-gl-tooltip :title="actionInProgressTooltip" class="gl-display-inline-block" tabindex="0">
+    <gl-button
       v-gl-tooltip
+      category="primary"
+      size="small"
       :title="buttonTitle"
       :loading="isLoading"
       :disabled="isActionInProgress"
-      :class="`btn btn-default btn-sm inline gl-ml-2 ${containerClasses}`"
+      :class="`inline gl-ml-2 ${containerClasses}`"
+      :icon="icon"
       @click="$emit('click')"
     >
-      <span class="d-inline-flex align-items-baseline">
-        <slot> </slot>
-      </span>
-    </gl-deprecated-button>
+      <slot> </slot>
+    </gl-button>
   </span>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -7,14 +6,22 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MRWidgetService from '../../services/mr_widget_service';
 import DeploymentActionButton from './deployment_action_button.vue';
 import DeploymentViewButton from './deployment_view_button.vue';
-import { MANUAL_DEPLOY, FAILED, SUCCESS, STOPPING, DEPLOYING, REDEPLOYING } from './constants';
+import {
+  MANUAL_DEPLOY,
+  FAILED,
+  SUCCESS,
+  STOPPING,
+  DEPLOYING,
+  REDEPLOYING,
+  ACT_BUTTON_ICONS,
+} from './constants';
 
 export default {
   name: 'DeploymentActions',
+  btnIcons: ACT_BUTTON_ICONS,
   components: {
     DeploymentActionButton,
     DeploymentViewButton,
-    GlIcon,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -151,10 +158,10 @@ export default {
       :action-in-progress="actionInProgress"
       :actions-configuration="$options.actionsConfiguration[constants.DEPLOYING]"
       :computed-deployment-status="computedDeploymentStatus"
+      :icon="$options.btnIcons.play"
       container-classes="js-manual-deploy-action"
       @click="deployManually"
     >
-      <gl-icon name="play" />
       <span>{{ $options.actionsConfiguration[constants.DEPLOYING].buttonText }}</span>
     </deployment-action-button>
     <deployment-action-button
@@ -162,10 +169,10 @@ export default {
       :action-in-progress="actionInProgress"
       :actions-configuration="$options.actionsConfiguration[constants.REDEPLOYING]"
       :computed-deployment-status="computedDeploymentStatus"
+      :icon="$options.btnIcons.repeat"
       container-classes="js-manual-redeploy-action"
       @click="redeploy"
     >
-      <gl-icon name="repeat" />
       <span>{{ $options.actionsConfiguration[constants.REDEPLOYING].buttonText }}</span>
     </deployment-action-button>
     <deployment-view-button
@@ -181,10 +188,9 @@ export default {
       :computed-deployment-status="computedDeploymentStatus"
       :actions-configuration="$options.actionsConfiguration[constants.STOPPING]"
       :button-title="$options.actionsConfiguration[constants.STOPPING].buttonText"
+      :icon="$options.btnIcons.stop"
       container-classes="js-stop-env"
       @click="stopEnvironment"
-    >
-      <gl-icon name="stop" />
-    </deployment-action-button>
+    />
   </div>
 </template>

changelogs/unreleased/sunjungp-master-patch-22797.yml

+---
+title: Update GlDeprecatedButton with GlButton in deployment_action_button
+merge_request: 39700
+author:
+type: changed

spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js

 import { mount } from '@vue/test-utils';
-import { GlIcon, GlLoadingIcon, GlDeprecatedButton } from '@gitlab/ui';
+import { GlIcon, GlLoadingIcon, GlButton } from '@gitlab/ui';
 import DeploymentActionButton from '~/vue_merge_request_widget/components/deployment/deployment_action_button.vue';
 import {
   CREATED,
@@ -13,6 +13,7 @@ const baseProps = {
   actionsConfiguration: actionButtonMocks[DEPLOYING],
   actionInProgress: null,
   computedDeploymentStatus: CREATED,
+  icon: 'play',
 };
 
 describe('Deployment action button', () => {
@@ -28,18 +29,18 @@ describe('Deployment action button', () => {
     wrapper.destroy();
   });
 
-  describe('when passed only icon', () => {
+  describe('when passed only icon via props', () => {
     beforeEach(() => {
       factory({
         propsData: baseProps,
-        slots: { default: ['<gl-icon name="stop" />'] },
+        slots: {},
         stubs: {
           'gl-icon': GlIcon,
         },
       });
     });
 
-    it('renders slot correctly', () => {
+    it('renders prop icon correctly', () => {
       expect(wrapper.find(GlIcon).exists()).toBe(true);
     });
   });
@@ -49,7 +50,7 @@ describe('Deployment action button', () => {
       factory({
         propsData: baseProps,
         slots: {
-          default: ['<gl-icon name="play" />', `<span>${actionButtonMocks[DEPLOYING]}</span>`],
+          default: [`<span>${actionButtonMocks[DEPLOYING]}</span>`],
         },
         stubs: {
           'gl-icon': GlIcon,
@@ -57,7 +58,7 @@ describe('Deployment action button', () => {
       });
     });
 
-    it('renders slot correctly', () => {
+    it('renders slot and icon prop correctly', () => {
       expect(wrapper.find(GlIcon).exists()).toBe(true);
       expect(wrapper.text()).toContain(actionButtonMocks[DEPLOYING]);
     });
@@ -75,7 +76,7 @@ describe('Deployment action button', () => {
 
     it('is disabled and shows the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
     });
   });
 
@@ -90,7 +91,7 @@ describe('Deployment action button', () => {
     });
     it('is disabled and does not show the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
     });
   });
 
@@ -106,7 +107,7 @@ describe('Deployment action button', () => {
     });
     it('is disabled and does not show the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
     });
   });
 
@@ -118,7 +119,7 @@ describe('Deployment action button', () => {
     });
     it('is not disabled nor does it show the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(false);
+      expect(wrapper.find(GlButton).props('disabled')).toBe(false);
     });
   });
 });