Converted GlButton to GlNewButton

To follow the guidelines for gitlab-ui components, converted the
old-style buttons to the new style

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -4,12 +4,12 @@ import {
   GlAvatar,
   GlIcon,
   GlSprintf,
-  GlDeprecatedButton,
   GlModal,
   GlAlert,
   GlLoadingIcon,
   GlDropdown,
   GlDropdownItem,
+  GlNewButton,
 } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -22,13 +22,13 @@ export default {
     GlAvatar,
     GlIcon,
     GlSprintf,
-    GlDeprecatedButton,
     GlModal,
     GlAlert,
     GlLoadingIcon,
     GlDropdown,
     GlDropdownItem,
     TimeAgoTooltip,
+    GlNewButton,
   },
   apollo: {
     canCreateSnippet: {
@@ -67,17 +67,14 @@ export default {
           condition: this.snippet.userPermissions.updateSnippet,
           text: __('Edit'),
           href: this.editLink,
-          click: undefined,
-          variant: 'outline-info',
-          cssClass: undefined,
         },
         {
           condition: this.snippet.userPermissions.adminSnippet,
           text: __('Delete'),
-          href: undefined,
           click: this.showDeleteModal,
-          variant: 'outline-danger',
-          cssClass: 'btn-inverted btn-danger ml-2',
+          variant: 'danger',
+          category: 'secondary',
+          cssClass: 'ml-2',
         },
         {
           condition: this.canCreateSnippet,
@@ -85,9 +82,9 @@ export default {
           href: this.snippet.project
             ? `${this.snippet.project.webUrl}/snippets/new`
             : '/snippets/new',
-          click: undefined,
-          variant: 'outline-success',
-          cssClass: 'btn-inverted btn-success ml-2',
+          variant: 'success',
+          category: 'secondary',
+          cssClass: 'ml-2',
         },
       ];
     },
@@ -187,18 +184,20 @@ export default {
     </div>
 
     <div class="detail-page-header-actions">
-      <div class="d-none d-sm-block">
+      <div class="d-none d-sm-flex">
         <template v-for="(action, index) in personalSnippetActions">
-          <gl-deprecated-button
+          <gl-new-button
             v-if="action.condition"
             :key="index"
+            :disabled="action.disabled"
             :variant="action.variant"
+            :category="action.category"
             :class="action.cssClass"
-            :href="action.href || undefined"
+            :href="action.href"
             @click="action.click ? action.click() : undefined"
           >
             {{ action.text }}
-          </gl-deprecated-button>
+          </gl-new-button>
         </template>
       </div>
       <div class="d-block d-sm-none dropdown">
@@ -206,7 +205,7 @@ export default {
           <gl-dropdown-item
             v-for="(action, index) in personalSnippetActions"
             :key="index"
-            :href="action.href || undefined"
+            :href="action.href"
             @click="action.click ? action.click() : undefined"
             >{{ action.text }}</gl-dropdown-item
           >
@@ -228,16 +227,17 @@ export default {
       </gl-sprintf>
 
       <template #modal-footer>
-        <gl-deprecated-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-deprecated-button>
-        <gl-deprecated-button
+        <gl-new-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-new-button>
+        <gl-new-button
           variant="danger"
+          category="primary"
           :disabled="isDeleting"
           data-qa-selector="delete_snippet_button"
           @click="deleteSnippet"
         >
           <gl-loading-icon v-if="isDeleting" inline />
           {{ __('Delete snippet') }}
-        </gl-deprecated-button>
+        </gl-new-button>
       </template>
     </gl-modal>
   </div>

changelogs/unreleased/dmishunov-new-buttons.yml

+---
+title: Replaced old-style buttons with the new ones on Snippet view
+merge_request: 28614
+author:
+type: other

spec/frontend/snippets/components/snippet_header_spec.js

 import SnippetHeader from '~/snippets/components/snippet_header.vue';
 import DeleteSnippetMutation from '~/snippets/mutations/deleteSnippet.mutation.graphql';
 import { ApolloMutation } from 'vue-apollo';
-import { GlDeprecatedButton, GlModal } from '@gitlab/ui';
+import { GlNewButton, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 describe('Snippet header component', () => {
@@ -89,7 +89,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(0);
+    expect(wrapper.findAll(GlNewButton).length).toEqual(0);
 
     createComponent({
       permissions: {
@@ -97,7 +97,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(1);
+    expect(wrapper.findAll(GlNewButton).length).toEqual(1);
 
     createComponent({
       permissions: {
@@ -105,7 +105,7 @@ describe('Snippet header component', () => {
         updateSnippet: true,
       },
     });
-    expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(2);
+    expect(wrapper.findAll(GlNewButton).length).toEqual(2);
 
     createComponent({
       permissions: {
@@ -117,7 +117,7 @@ describe('Snippet header component', () => {
       canCreateSnippet: true,
     });
     return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(3);
+      expect(wrapper.findAll(GlNewButton).length).toEqual(3);
     });
   });