Merge branch '342464-update-button-on-incident-and-alert' into 'master'

Fix serverity and alert sidebar edit button style

See merge request gitlab-org/gitlab!75914

app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue

@@ -5,7 +5,7 @@ import {
   GlLoadingIcon,
   GlTooltip,
   GlSprintf,
-  GlLink,
+  GlButton,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { INCIDENT_SEVERITY, ISSUABLE_TYPES, I18N } from './constants';
@@ -20,7 +20,7 @@ export default {
     GlSprintf,
     GlDropdown,
     GlDropdownItem,
-    GlLink,
+    GlButton,
     SeverityToken,
   },
   inject: ['canUpdate'],
@@ -150,23 +150,25 @@ export default {
 
     <div class="hide-collapsed">
       <p
-        class="gl-line-height-20 gl-mb-0 gl-text-gray-900 gl-display-flex gl-justify-content-space-between"
+        class="gl-line-height-20 gl-mb-2 gl-text-gray-900 gl-display-flex gl-justify-content-space-between"
       >
         {{ $options.i18n.SEVERITY }}
-        <gl-link
+        <gl-button
           v-if="canUpdate"
+          category="tertiary"
+          size="small"
           data-testid="editButton"
-          href="#"
           @click="toggleFormDropdown"
           @keydown.esc="hideDropdown"
         >
           {{ $options.i18n.EDIT }}
-        </gl-link>
+        </gl-button>
       </p>
 
       <gl-dropdown
         :class="dropdownClass"
         block
+        :header-text="__('Assign severity')"
         :text="selectedItem.label"
         toggle-class="dropdown-menu-toggle gl-mb-2"
         @keydown.esc.native="hideDropdown"

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue

@@ -220,16 +220,17 @@ export default {
         class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
       >
         {{ __('Assignee') }}
-        <a
+        <gl-button
           v-if="isEditable"
           ref="editButton"
-          class="btn-link"
-          href="#"
+          category="tertiary"
+          size="small"
+          class="gl-text-black-normal!"
           @click="toggleFormDropdown"
           @keydown.esc="hideDropdown"
         >
           {{ __('Edit') }}
-        </a>
+        </gl-button>
       </p>
 
       <gl-dropdown

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue

@@ -100,7 +100,8 @@ export default {
         <gl-button
           v-if="isEditable"
           class="gl-text-black-normal!"
-          variant="link"
+          category="tertiary"
+          size="small"
           @click="toggleFormDropdown"
           @keydown.esc="hideDropdown"
         >

locale/gitlab.pot

@@ -4769,6 +4769,9 @@ msgstr ""
 msgid "Assign reviewer(s)"
 msgstr ""
 
+msgid "Assign severity"
+msgstr ""
+
 msgid "Assign some issues to this milestone."
 msgstr ""
 

spec/features/alert_management/alert_details_spec.rb

@@ -60,7 +60,7 @@ RSpec.describe 'Alert details', :js do
 
         expect(alert_status).to have_content('Triggered')
 
-        find('.btn-link').click
+        find('.gl-button').click
         find('.gl-new-dropdown-item', text: 'Acknowledged').click
 
         wait_for_requests