Align license compliance `deny` classification outcome with user expectations - Prevent MR from being mergable in UI - Slow Merge request button update
Implementation Plan
Meeting video
Solution
- Disable inline editing of license policies by removing the "Allow/Deny" buttons within the modal that appears when clicking the license policy.
- Maintainer/Owners can still edit license policies by clicking the "Manage Licenses" button to edit license policies in the "License Compliance" page. (note that this page doesn't use the modal)
Code Overview
Modal is opened in ee/app/assets/javascripts/vue_shared/license_compliance/components/license_issue_body.vue by calling setLicenseinModal
Action setLicenseinModal is in ee/app/assets/javascripts/vue_shared/license_compliance/store/actions.js
Mutation is in ee/app/assets/javascripts/vue_shared/license_compliance/store/mutations.js and sets currentLicenseInModal to the current license.
<set-license-approval-modal/> lives in ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue and relies on the currentLicnseInModal and canManageLicenses state.
canManageLicenses is passed from the server via a html data attribute
Code Changes
Because the modal is used in two places, (the Pipelines/Licenses tab and the MR widget), we need the button actions to be hidden only in the MR widget context. Right now we don't distinguish this when we invoke the actions and mutations needed to show the modal.
-
Add a new state field called isMRWidget -
Add a new action/mutation to the LICENSE_MANAGEMENTvuex module calledsetisMRWidget -
In ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vuecallthis.setIsMRWidgetand set it totrue -
In ee/app/assets/javascripts/vue_shared/license_compliance/components/set_approval_status_modal.vueadd
...mapState(LICENSE_MANAGEMENT, ['isMrWidget']-
In ee/app/assets/javascripts/vue_shared/license_compliance/components/set_approval_status_modal.vueupdate thecanApproveandcanBlacklistcomputed props to
canApprove() {
return (
!this.isMrWidget &&
this.canManageLicenses &&
this.currentLicenseInModal &&
this.currentLicenseInModal.approvalStatus !== LICENSE_APPROVAL_STATUS.ALLOWED
);
},
canBlacklist() {
return (
!this.isMrWidget &&
this.canManageLicenses &&
this.currentLicenseInModal &&
this.currentLicenseInModal.approvalStatus !== LICENSE_APPROVAL_STATUS.DENIED
);
},Unit Test changes
-
Add untit tests for setisMrWidgetaction and mutation -
Update unit tests for ee/spec/frontend/vue_shared/license_compliance/components/set_approval_status_modal_spec.jsregarding the show/hide logic for the "approve/deny" buttons.
Bug
This is a bugfix follow up issue for #196845 (closed). All prior work should be behind a feature flag license_compliance_denies_mr
Edge Cases that cause broken UI:
It appears that the mergeable logic is updated viaRefreshLicenseComplianceChecksWorker.perform_async(project.id) worker that runs on license policy creation, update. Don't think it happens for delete? Need to double check.
The broken edge cases occur when we make policy changes and there is a 2-60 second delay from when the job updates. Incorrect state appears as follows:
