Fix License Compliance widget button spacing

Use flexbox for laying out the buttons, to avoid whitespace in the
template from affecting visual spacing.

This also replaces the deprecated slot syntax with modern shorthand.

Finally, this removes a snapshot test that wasn't providing any value,
since other tests in the suite make the necessary assertions about the
`Manage licenses` and `View full report` buttons in the `ReportSection`
anyway (which is what was in the snapshot).

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/283889.

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

@@ -176,25 +176,27 @@ export default {
           </gl-link>
         </div>
       </template>
-      <div v-if="showActionButtons" slot="action-buttons" class="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>
+        <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>
     </report-section>
   </div>
 </template>

ee/changelogs/unreleased/283889-fix-spacing-license-compliance-mr-widget.yml

+---
+title: Fix License Compliance widget button spacing
+merge_request: 54701
+author:
+type: other

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

@@ -28,49 +28,3 @@ exports[`License Report MR Widget report section report body should render corre
    
 </smart-virtual-list-stub>
 `;
-
-exports[`License Report MR Widget report section should render correctly 1`] = `
-<report-section-stub
-  class="license-report-widget mr-report"
-  component="LicenseIssueBody"
-  data-qa-selector="license_report_widget"
-  errortext="FOO"
-  hasissues="true"
-  loadingtext="FOO"
-  neutralissues="[object Object]"
-  popoveroptions="[object Object]"
-  resolvedissues=""
-  showreportsectionstatusicon="true"
-  status="SUCCESS"
-  successtext=""
-  unresolvedissues=""
->
-    
-  <div
-    class="gl-mr-3"
-  >
-    <a
-      class="btn btn-default btn-sm js-manage-licenses gl-mr-3"
-      data-qa-selector="manage_licenses_button"
-      href="http://test.host/lm_settings"
-    >
-      
-        Manage licenses
-      
-    </a>
-     
-    <a
-      class="btn btn-default btn-sm js-full-report"
-      href="http://test.host/path/to/the/full/report"
-      target="_blank"
-    >
-      
-        View full report 
-      <gl-icon-stub
-        name="external-link"
-        size="16"
-      />
-    </a>
-  </div>
-</report-section-stub>
-`;

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

@@ -68,7 +68,7 @@ describe('License Report MR Widget', () => {
     getters = defaultGetters,
     state = defaultState,
     actions = defaultActions,
-    stubs = {},
+    stubs = { ReportSection },
   } = {}) => {
     const store = new Vuex.Store({
       modules: {
@@ -185,21 +185,6 @@ describe('License Report MR Widget', () => {
   });
 
   describe('report section', () => {
-    it('should render correctly', () => {
-      const mockReportGroups = [generateReportGroup()];
-
-      mountComponent({
-        getters: {
-          ...defaultGetters,
-          licenseReportGroups() {
-            return mockReportGroups;
-          },
-        },
-      });
-
-      expect(wrapper.find(ReportSection).element).toMatchSnapshot();
-    });
-
     describe('report body', () => {
       it('should render correctly', () => {
         const mockReportGroups = [generateReportGroup()];
@@ -211,7 +196,6 @@ describe('License Report MR Widget', () => {
               return mockReportGroups;
             },
           },
-          stubs: { ReportSection },
         });
 
         expect(wrapper.find({ ref: 'reportSectionBody' }).element).toMatchSnapshot();
@@ -234,7 +218,6 @@ describe('License Report MR Widget', () => {
                 return mockReportGroups;
               },
             },
-            stubs: { ReportSection },
           });
 
           expect(wrapper.findAll({ ref: 'reportHeading' })).toHaveLength(
@@ -259,7 +242,6 @@ describe('License Report MR Widget', () => {
                 return mockReportGroups;
               },
             },
-            stubs: { ReportSection },
           });
 
           expect(findAllReportItems()).toHaveLength(numberOfLicenses);
@@ -280,7 +262,6 @@ describe('License Report MR Widget', () => {
               return mockReportGroups;
             },
           },
-          stubs: { ReportSection },
         });
 
         const allReportItems = findAllReportItems();
@@ -360,9 +341,7 @@ describe('License Report MR Widget', () => {
     const findSecurityApprovalHelpLink = () => wrapper.find('.js-security-approval-help-link');
 
     it('does not show a link to security approval help page if report does not contain blacklisted licenses', () => {
-      mountComponent({
-        stubs: { ReportSection },
-      });
+      mountComponent();
 
       expect(findSecurityApprovalHelpLink().exists()).toBe(false);
     });
@@ -376,7 +355,6 @@ describe('License Report MR Widget', () => {
       };
       mountComponent({
         getters,
-        stubs: { ReportSection },
       });
 
       const securityApprovalHelpLink = findSecurityApprovalHelpLink();