Fix UX issue with the License Compliance Widget
@svedova I made the migration, but it seems like there are some alignment/styling issues. I'm worried about fixing it for license compliance but breaking it for the other widgets.
The fetchExpandedData function returns the config the same as before so I'm not sure if I'm using to use different config values to render it with the correct alignment. Do we have any docs for the V2 config options?
MR diff is here !138141 (diffs)
Relevant Design Docs:
https://design.gitlab.com/patterns/merge-request-reports#overflow
https://design.gitlab.com/patterns/merge-request-reports#layout
https://design.gitlab.com/patterns/merge-request-reports#grid
| Expected (in production) V1 Framework | Actual (in the MR) after migration to V2 Framework |
|---|---|
 |
 
|
Markup screenshot
Debugging info to reproduce locally
You can stub out the fetchExandedData by doing
fetchExpandedData() {
return {...res, data: licenseConfig }
}Uncategorized
And the liecnseConfig object is:
[
{
"header": "Uncategorized",
"text": "No policy matches this license",
"children": [
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/AFL-2.1.html",
"text": "Academic Free License v2.1"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/Apache-2.0.html",
"text": "Apache License 2.0"
},
"actions": [
{
"text": "Used by 9 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/BSD-2-Clause.html",
"text": "BSD 2-Clause \"Simplified\" License"
},
"actions": [
{
"text": "Used by 9 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/BSD-3-Clause.html",
"text": "BSD 3-Clause \"New\" or \"Revised\" License"
},
"actions": [
{
"text": "Used by 15 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/0BSD.html",
"text": "BSD Zero Clause License"
},
"actions": [
{
"text": "Used by 2 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/CC-BY-3.0.html",
"text": "Creative Commons Attribution 3.0 Unported"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/CC0-1.0.html",
"text": "Creative Commons Zero v1.0 Universal"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/WTFPL.html",
"text": "Do What The F*ck You Want To Public License"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/ISC.html",
"text": "ISC License"
},
"actions": [
{
"text": "Used by 38 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/MIT.html",
"text": "MIT License"
},
"actions": [
{
"text": "Used by 274 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/Unlicense.html",
"text": "The Unlicense"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": null,
"text": "unknown"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
}
]
}
]Uncategorized and Policy Denials
[
{
"header": "Denied",
"text": "Out-of-compliance with the project's policies and should be removed",
"children": [
{
"status": "denied",
"icon": {
"name": "failed"
},
"link": {
"href": "https://spdx.org/licenses/Apache-2.0.html",
"text": "Apache License 2.0"
},
"supportingText": " Used by aws-sign2, caseless, forever-agent, oauth-sign, request, spdx-correct, tunnel-agent, validate-npm-package-license, xml-name-validator"
}
]
},
{
"header": "Uncategorized",
"text": "No policy matches this license",
"children": [
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/AFL-2.1.html",
"text": "Academic Free License v2.1"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/BSD-2-Clause.html",
"text": "BSD 2-Clause \"Simplified\" License"
},
"actions": [
{
"text": "Used by 9 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/BSD-3-Clause.html",
"text": "BSD 3-Clause \"New\" or \"Revised\" License"
},
"actions": [
{
"text": "Used by 15 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/0BSD.html",
"text": "BSD Zero Clause License"
},
"actions": [
{
"text": "Used by 2 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/CC-BY-3.0.html",
"text": "Creative Commons Attribution 3.0 Unported"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/CC0-1.0.html",
"text": "Creative Commons Zero v1.0 Universal"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/WTFPL.html",
"text": "Do What The F*ck You Want To Public License"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/ISC.html",
"text": "ISC License"
},
"actions": [
{
"text": "Used by 38 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/MIT.html",
"text": "MIT License"
},
"actions": [
{
"text": "Used by 274 packages",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": "https://spdx.org/licenses/Unlicense.html",
"text": "The Unlicense"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
},
{
"status": "unclassified",
"icon": {
"name": "notice"
},
"link": {
"href": null,
"text": "unknown"
},
"actions": [
{
"text": "Used by 1 package",
"href": "/root/js-npm/-/pipelines/4826/licenses"
}
]
}
]
}
]Edited by Fernando Cardenas