Follow-up - Add singular/plural form text to merge request button for License-Check approvals
As a follow up to: #231250 (closed)
#231250 (closed) was a version one of a hard coded string that accomedated the messaging for having the merge request button disabled. (Single and multiple licenses being Denied
in the MR)
This was done as a version 1 and to reduce complexity of delivering #196845 (closed)
This issue is a follow-up and improvement to make the messaging dynamic for the single and multiple denied licenses.
Implementation Plan
Option 1: Pass data in mr object
We need to add the data we need to the following endpoints:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/37191/widget.json
and/or
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/37191/cached_widget.json
endpoint which requires backend.
Where to Add the Data:
license_scanning
object.
We would add it to the
It's assigned to the MrWidgetStore in:
Example passed in as a prop in:
MrWidgetPolicyViolation Component is selected in:
Access the MR object from within MrWidgetPolicyViolation
We'd need to add a MR prop. Example: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue#L13
We'd access the data we need as mr.licenseScanning.<DATA_WE_NEED>
Option 2: Pass endpoint data we need, and do additional async request from within the MrWidgetPolicyViolation component.
We need to add the licenses endpoint path to:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/37191/widget.json
and/or
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/37191/cached_widget.json
endpoint which requires backend.
Where to add the path:
license_scanning
object.
We would add it to the
Something like project_licenses_path
license_scanning
object is assigned to the MrWidgetStore in:
Example passed in as a prop in:
MrWidgetPolicyViolation Component is selected in:
Access the MR object from within MrWidgetPolicyViolation
We'd need to add a MR prop. Example: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue#L13
We'd access the data we need as mr.licenseScanning.project_licenses_path
The ajax request:
In the MrWidetPolicyViolation
component we'd initialize a store similar to how we do for
The MrWidgetLicenseReport
is a working example of how we do an AJAX request within a single vue component on the MR page. It is done for the License scan MR widget.
The MrWidgetLicenses
component is aliased and rendered in https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue#L342
We do the same for MrWidetPolicyViolation
in https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_policy_violation.vue
Leverage the existing LICENSE_LIST vuex module to handle store, actions, getters, and mutations.
We can use the LICENSE_LIST
vuex module defined in https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/license_compliance/store/modules/list/index.js
This is instead of the LICENSE_MANAGEMENT
vuex module that is used in MrWidgetLicenseReport
.
The difference is this.
LICENSE_MANAGEMENT
- covers anything to do with defining license policies
LICENSE_LIST
- covers anything to do with detected licenses in the project.
In Summary for Option 2:
Actual work involves,
Adding resource path to json path, defining prop in mr-widget-policy-violation-component
, making use of the actions and getters in the LICENSE_LIST
vuex module, rendering singular/plural version of text.