Btn group secure group dashboard

app/assets/stylesheets/framework/buttons.scss

@@ -42,6 +42,10 @@
   color: $text;
   border-color: $border;
 
+  &.btn-border-color {
+    border-color: $border-color;
+  }
+
   > .icon {
     color: $text;
   }

ee/app/assets/javascripts/security_dashboard/components/vulnerability_action_buttons.vue

@@ -61,13 +61,13 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="btn-group">
     <button
       key="more-info"
       v-gl-tooltip
       :aria-label="s__('Security Reports|More info')"
       :title="s__('Security Reports|More info')"
-      class="btn btn-secondary btn-icon js-more-info"
+      class="btn btn-inverted btn-info btn-secondary btn-border-color btn-icon js-more-info"
       type="button"
       @click="openModal({ vulnerability })"
     >
@@ -80,7 +80,7 @@ export default {
       :aria-label="s__('Security Reports|Create issue')"
       :loading="isCreatingIssue"
       :title="s__('Security Reports|Create issue')"
-      container-class="btn btn-inverted btn-success prepend-left-8 js-create-issue"
+      container-class="btn btn-inverted btn-success btn-border-color js-create-issue"
       type="button"
       @click="handleCreateIssue"
     >
@@ -90,12 +90,16 @@ export default {
       <loading-button
         v-if="isDismissed"
         key="revert-dismissal"
-        :label="s__('Security Reports|Revert dismissal')"
+        v-gl-tooltip
+        :aria-label="s__('Security Reports|Undo dismiss')"
         :loading="isDismissingVulnerability"
-        container-class="btn btn-inverted btn-warning prepend-left-8 js-revert-dismissal"
+        :title="s__('Security Reports|Undo dismiss')"
+        container-class="btn btn-inverted btn-warning btn-border-color js-revert-dismissal"
         type="button"
         @click="handleRevertDismissal"
-      />
+      >
+        <icon name="repeat" />
+      </loading-button>
       <loading-button
         v-else
         key="dismiss-vulnerability"
@@ -103,7 +107,7 @@ export default {
         :aria-label="s__('Security Reports|Dismiss vulnerability')"
         :loading="isDismissingVulnerability"
         :title="s__('Security Reports|Dismiss vulnerability')"
-        container-class="btn btn-inverted btn-warning prepend-left-8 js-dismiss-vulnerability"
+        container-class="btn btn-inverted btn-warning btn-border-color js-dismiss-vulnerability"
         type="button"
         @click="handleDismissVulnerability"
       >

ee/changelogs/unreleased/btn-group-secure-group-dashboard.yml

+---
+title: Convert buttons to button group on Group Security Dashboard
+merge_request: 9220
+author:
+type: changed

ee/spec/javascripts/security_dashboard/components/vulnerability_action_buttons_spec.js

@@ -36,8 +36,8 @@ describe('Security Dashboard Action Buttons', () => {
       vm.$destroy();
     });
 
-    it('should render three buttons', () => {
-      expect(vm.$el.querySelectorAll('.btn')).toHaveLength(3);
+    it('should render three buttons in a button group', () => {
+      expect(vm.$el.querySelectorAll('.btn-group .btn')).toHaveLength(3);
     });
 
     describe('More Info Button', () => {
@@ -138,8 +138,8 @@ describe('Security Dashboard Action Buttons', () => {
       vm.$destroy();
     });
 
-    it('should render two buttons', () => {
-      expect(vm.$el.querySelectorAll('.btn')).toHaveLength(2);
+    it('should render two buttons in a button group', () => {
+      expect(vm.$el.querySelectorAll('.btn-group .btn')).toHaveLength(2);
     });
 
     it('should not render the dismiss vulnerability button', () => {

locale/gitlab.pot

@@ -8103,9 +8103,6 @@ msgstr ""
 msgid "Security Reports|No Vulnerabilities"
 msgstr ""
 
-msgid "Security Reports|Revert dismissal"
-msgstr ""
-
 msgid "Security Reports|Security dashboard documentation"
 msgstr ""
 
@@ -8121,6 +8118,9 @@ msgstr ""
 msgid "Security Reports|There was an error reverting this dismissal."
 msgstr ""
 
+msgid "Security Reports|Undo dismiss"
+msgstr ""
+
 msgid "Security Reports|We've found no vulnerabilities for your group"
 msgstr ""