Restyle license compliance Button

This commit solves https://gitlab.com/gitlab-org/gitlab/-/issues/229910
The licence compliance Button on the Merge-Request Widget
has been restyled.

app/assets/javascripts/reports/components/report_section.vue

@@ -184,7 +184,7 @@ export default {
           <slot name="sub-heading"></slot>
         </div>
 
-        <slot name="action-buttons"></slot>
+        <slot name="action-buttons" :is-collapsible="isCollapsible"></slot>
 
         <button
           v-if="isCollapsible"

ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue

 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
+import { GlLink, GlIcon, GlButton } from '@gitlab/ui';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { componentNames } from 'ee/reports/components/issue_body';
 import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/constants';
@@ -16,6 +16,7 @@ export default {
   componentNames,
   store,
   components: {
+    GlButton,
     GlLink,
     ReportItem,
     ReportSection,
@@ -176,26 +177,27 @@ export default {
           </gl-link>
         </div>
       </template>
-      <template v-if="showActionButtons" #action-buttons>
-        <div class="gl-display-flex gl-mr-3">
-          <a
-            v-if="licenseManagementSettingsPath"
-            :class="{ 'gl-mr-3': fullReportPath }"
-            :href="licenseManagementSettingsPath"
-            class="btn btn-default btn-sm js-manage-licenses"
-            data-qa-selector="manage_licenses_button"
-          >
-            {{ s__('ciReport|Manage licenses') }}
-          </a>
-          <a
-            v-if="fullReportPath"
-            :href="fullReportPath"
-            target="_blank"
-            class="btn btn-default btn-sm js-full-report"
-          >
-            {{ s__('ciReport|View full report') }} <gl-icon :size="16" name="external-link" />
-          </a>
-        </div>
+      <template v-if="showActionButtons" #action-buttons="{ isCollapsible }">
+        <gl-button
+          v-if="fullReportPath"
+          :href="fullReportPath"
+          target="_blank"
+          data-testid="full-report-button"
+          class="gl-mr-3"
+          icon="external-link"
+        >
+          {{ s__('ciReport|View full report') }}
+        </gl-button>
+        <gl-button
+          v-if="licenseManagementSettingsPath"
+          data-testid="manage-licenses-button"
+          size="small"
+          :class="{ 'gl-mr-3': isCollapsible }"
+          :href="licenseManagementSettingsPath"
+          data-qa-selector="manage_licenses_button"
+        >
+          {{ s__('ciReport|Manage licenses') }}
+        </gl-button>
       </template>
     </report-section>
   </div>

ee/changelogs/unreleased/jnnkl-restyle-button-license-compliance.yml

+---
+title: Restyle license compliance button on merge request widget
+merge_request: 55667
+author:
+type: changed

ee/spec/frontend/vue_shared/license_compliance/mr_widget_license_report_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import LicenseManagement from 'ee/vue_shared/license_compliance/mr_widget_license_report.vue';
+import { stubComponent } from 'helpers/stub_component';
 import { TEST_HOST } from 'spec/test_constants';
 import ReportItem from '~/reports/components/report_item.vue';
 import ReportSection from '~/reports/components/report_section.vue';
@@ -273,7 +274,7 @@ describe('License Report MR Widget', () => {
   });
 
   describe('`View full report` button', () => {
-    const selector = '.js-full-report';
+    const selector = '[data-testid="full-report-button"]';
 
     it('should be rendered when fullReportPath prop is provided', () => {
       mountComponent();
@@ -294,7 +295,7 @@ describe('License Report MR Widget', () => {
   });
 
   describe('`Manage licenses` button', () => {
-    const selector = '.js-manage-licenses';
+    const selector = '[data-testid="manage-licenses-button"]';
 
     it('should be rendered when licenseManagementSettingsPath prop is provided', () => {
       mountComponent();
@@ -312,6 +313,36 @@ describe('License Report MR Widget', () => {
 
       expect(wrapper.find(selector).exists()).toBe(false);
     });
+
+    it('has gl-mr-3 class when isCollapsbile is true', () => {
+      mountComponent({
+        stubs: {
+          ReportSection: stubComponent(ReportSection, {
+            template: `
+              <div>
+                <slot name="action-buttons" :is-collapsible="true" />
+              </div>
+            `,
+          }),
+        },
+      });
+      expect(wrapper.find(selector).classes()).toContain('gl-mr-3');
+    });
+
+    it('does not have gl-mr-3 class when isCollapsbile is false', () => {
+      mountComponent({
+        stubs: {
+          ReportSection: stubComponent(ReportSection, {
+            template: `
+              <div>
+                <slot name="action-buttons" :is-collapsible="false" />
+              </div>
+            `,
+          }),
+        },
+      });
+      expect(wrapper.find(selector).classes()).not.toContain('gl-mr-3');
+    });
   });
 
   it('should init store after mount', () => {