Update requirements buttons to gl-button

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39372

ee/app/assets/javascripts/requirements/components/requirement_item.vue

 <script>
 import { escape } from 'lodash';
-import {
-  GlPopover,
-  GlLink,
-  GlAvatar,
-  GlDeprecatedButton,
-  GlIcon,
-  GlLoadingIcon,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlPopover, GlLink, GlAvatar, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -22,9 +14,7 @@ export default {
     GlPopover,
     GlLink,
     GlAvatar,
-    GlDeprecatedButton,
-    GlIcon,
-    GlLoadingIcon,
+    GlButton,
     RequirementStatusBadge,
   },
   directives: {
@@ -149,7 +139,7 @@ export default {
             class="d-block d-sm-none"
           />
         </div>
-        <div class="issuable-meta">
+        <div class="d-flex">
           <ul v-if="showIssuableMetaActions" class="controls flex-column flex-sm-row">
             <requirement-status-badge
               v-if="testReport"
@@ -158,36 +148,27 @@ export default {
               class="d-none d-sm-block"
             />
             <li v-if="canUpdate && !isArchived" class="requirement-edit d-sm-block">
-              <gl-deprecated-button
+              <gl-button
                 v-gl-tooltip
-                size="sm"
-                class="border-0"
+                icon="pencil"
                 :title="__('Edit')"
                 @click="$emit('editClick', requirement)"
-              >
-                <gl-icon name="pencil" />
-              </gl-deprecated-button>
+              />
             </li>
             <li v-if="canArchive && !isArchived" class="requirement-archive d-sm-block">
-              <gl-deprecated-button
+              <gl-button
+                v-if="!stateChangeRequestActive"
                 v-gl-tooltip
-                size="sm"
-                class="border-0"
+                icon="archive"
+                :loading="stateChangeRequestActive"
                 :title="__('Archive')"
                 @click="handleArchiveClick"
-              >
-                <gl-icon v-if="!stateChangeRequestActive" name="archive" />
-                <gl-loading-icon v-else />
-              </gl-deprecated-button>
+              />
             </li>
             <li v-if="canArchive && isArchived" class="requirement-reopen d-sm-block">
-              <gl-deprecated-button
-                size="xs"
-                class="p-2"
-                :loading="stateChangeRequestActive"
-                @click="handleReopenClick"
-                >{{ __('Reopen') }}</gl-deprecated-button
-              >
+              <gl-button :loading="stateChangeRequestActive" @click="handleReopenClick">{{
+                __('Reopen')
+              }}</gl-button>
             </li>
           </ul>
         </div>

ee/app/assets/stylesheets/pages/requirements.scss

@@ -42,9 +42,16 @@
   }
 
   .controls {
-    .requirement-edit .btn,
-    .requirement-archive .btn {
-      padding: $gl-padding-4 $gl-vert-padding;
+    align-items: flex-start;
+
+    @include media-breakpoint-down(xs) {
+      .requirement-archive {
+        margin-top: $gl-padding-4;
+      }
+
+      .requirement-edit {
+        margin-right: 0;
+      }
     }
   }
 

ee/changelogs/unreleased/219911-req-button.yml

+---
+title: Update requirements list buttons to gl-button
+merge_request: 39372
+author:
+type: changed

ee/spec/frontend/requirements/components/requirement_item_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import { GlLink, GlDeprecatedButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
+import { GlLink, GlButton } from '@gitlab/ui';
 import RequirementItem from 'ee/requirements/components/requirement_item.vue';
 import RequirementStatusBadge from 'ee/requirements/components/requirement_status_badge.vue';
 
@@ -172,7 +172,7 @@ describe('RequirementItem', () => {
 
     it('renders requirement-status-badge component', () => {
       const statusBadgeElSm = wrapper.find('.issuable-main-info').find(RequirementStatusBadge);
-      const statusBadgeElMd = wrapper.find('.issuable-meta').find(RequirementStatusBadge);
+      const statusBadgeElMd = wrapper.find('.controls').find(RequirementStatusBadge);
 
       expect(statusBadgeElSm.exists()).toBe(true);
       expect(statusBadgeElMd.exists()).toBe(true);
@@ -182,12 +182,10 @@ describe('RequirementItem', () => {
     });
 
     it('renders element containing requirement `Edit` button when `requirement.userPermissions.updateRequirement` is true', () => {
-      const editButtonEl = wrapper.find('.controls .requirement-edit').find(GlDeprecatedButton);
+      const editButtonEl = wrapper.find('.controls .requirement-edit').find(GlButton);
 
       expect(editButtonEl.exists()).toBe(true);
       expect(editButtonEl.attributes('title')).toBe('Edit');
-      expect(editButtonEl.find(GlIcon).exists()).toBe(true);
-      expect(editButtonEl.find(GlIcon).props('name')).toBe('pencil');
     });
 
     it('does not render element containing requirement `Edit` button when `requirement.userPermissions.updateRequirement` is false', () => {
@@ -205,14 +203,10 @@ describe('RequirementItem', () => {
     });
 
     it('renders element containing requirement `Archive` button when `requirement.userPermissions.adminRequirement` is true', () => {
-      const archiveButtonEl = wrapper
-        .find('.controls .requirement-archive')
-        .find(GlDeprecatedButton);
+      const archiveButtonEl = wrapper.find('.controls .requirement-archive').find(GlButton);
 
       expect(archiveButtonEl.exists()).toBe(true);
       expect(archiveButtonEl.attributes('title')).toBe('Archive');
-      expect(archiveButtonEl.find(GlIcon).exists()).toBe(true);
-      expect(archiveButtonEl.find(GlIcon).props('name')).toBe('archive');
     });
 
     it('does not render element containing requirement `Archive` button when `requirement.userPermissions.adminRequirement` is false', () => {
@@ -229,23 +223,8 @@ describe('RequirementItem', () => {
       wrapperNoArchive.destroy();
     });
 
-    it('renders loading icon within archive button when `stateChangeRequestActive` prop is true', () => {
-      wrapper.setProps({
-        stateChangeRequestActive: true,
-      });
-
-      return wrapper.vm.$nextTick(() => {
-        expect(
-          wrapper
-            .find('.requirement-archive')
-            .find(GlLoadingIcon)
-            .exists(),
-        ).toBe(true);
-      });
-    });
-
     it('renders `Reopen` button when current requirement is archived and `requirement.userPermissions.adminRequirement` is true', () => {
-      const reopenButton = wrapperArchived.find('.requirement-reopen').find(GlDeprecatedButton);
+      const reopenButton = wrapperArchived.find('.requirement-reopen').find(GlButton);
 
       expect(reopenButton.exists()).toBe(true);
       expect(reopenButton.props('loading')).toBe(false);