Replace Bootstrap Button & LoadingButton w/ GitLab UI GlButton in vulnerability_action_buttons.vue

changelogs/unreleased/229297-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-ee-app-assets-ja.yml

+---
+title: GlButton migrations for pipeline security tab
+merge_request: 39651
+author:
+type: performance

doc/user/application_security/security_dashboard/index.md

@@ -43,7 +43,7 @@ To use the instance, group, project, or pipeline security dashboard:
 
 At the pipeline level, the Security section displays the vulnerabilities present in the branch of the project the pipeline was run against.
 
-![Pipeline Security Dashboard](img/pipeline_security_dashboard_v13_2.png)
+![Pipeline Security Dashboard](img/pipeline_security_dashboard_v13_3.png)
 
 Visit the page for any pipeline that ran any of the [supported reports](#supported-reports). To view
 the pipeline's security findings, select the **Security** tab when viewing the pipeline.

doc/user/project/import/gemnasium.md

@@ -105,7 +105,7 @@ back to both GitLab and GitHub when completed.
 
 1. The result of the job will be visible directly from the pipeline view:
 
-   ![Security Dashboard](../../application_security/security_dashboard/img/pipeline_security_dashboard_v13_2.png)
+   ![Security Dashboard](../../application_security/security_dashboard/img/pipeline_security_dashboard_v13_3.png)
 
 NOTE: **Note:**
 If you don't commit very often to your project, you may want to use

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

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlTooltipDirective } from '@gitlab/ui';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 
 export default {
   name: 'SecurityDashboardActionButtons',
   components: {
-    Icon,
-    LoadingButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -62,57 +59,57 @@ export default {
 
 <template>
   <div class="btn-group">
-    <button
+    <gl-button
       key="more-info"
       v-gl-tooltip
       :aria-label="s__('SecurityReports|More info')"
       :title="s__('SecurityReports|More info')"
-      class="btn btn-inverted btn-info btn-secondary btn-border-color btn-icon js-more-info"
-      type="button"
+      class="js-more-info"
+      variant="info"
+      category="secondary"
+      icon="information-o"
       @click="openModal({ vulnerability })"
-    >
-      <icon name="information-o" />
-    </button>
-    <loading-button
+    />
+    <gl-button
       v-if="canCreateIssue"
       key="create-issue"
       v-gl-tooltip
       :aria-label="s__('SecurityReports|Create issue')"
       :loading="isCreatingIssue"
       :title="s__('SecurityReports|Create issue')"
-      container-class="btn btn-inverted btn-success btn-border-color js-create-issue"
-      type="button"
+      class="js-create-issue"
+      variant="success"
+      category="secondary"
+      icon="issue-new"
       @click="handleCreateIssue"
-    >
-      <icon name="issue-new" />
-    </loading-button>
+    />
     <template v-if="canDismissVulnerability">
-      <loading-button
+      <gl-button
         v-if="isDismissed"
         key="undo-dismiss"
         v-gl-tooltip
         :aria-label="s__('SecurityReports|Undo dismiss')"
         :loading="isDismissingVulnerability"
         :title="s__('SecurityReports|Undo dismiss')"
-        container-class="btn btn-inverted btn-warning btn-border-color js-undo-dismiss"
-        type="button"
+        class="js-undo-dismiss"
+        variant="warning"
+        category="secondary"
+        icon="redo"
         @click="handleUndoDismiss"
-      >
-        <icon name="redo" />
-      </loading-button>
-      <loading-button
+      />
+      <gl-button
         v-else
         key="dismiss-vulnerability"
         v-gl-tooltip
         :aria-label="s__('SecurityReports|Dismiss vulnerability')"
         :loading="isDismissingVulnerability"
         :title="s__('SecurityReports|Dismiss vulnerability')"
-        container-class="btn btn-inverted btn-warning btn-border-color js-dismiss-vulnerability"
-        type="button"
+        class="js-dismiss-vulnerability"
+        variant="warning"
+        category="secondary"
+        icon="cancel"
         @click="handleDismissVulnerability"
-      >
-        <icon name="cancel" />
-      </loading-button>
+      />
     </template>
   </div>
 </template>