Merge branch '283889-fix-spacing-license-compliance-mr-widget' into 'master'

Fix License Compliance widget button spacing

See merge request gitlab-org/gitlab!54701

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();