[License Compliance Widget Extension ] - Frontend - Show all dependencies for denied licenses, but link to full report for allowed , and uncategorized licenses

Description

The current MR Widget extension spec does not support adjusting collapsible supportingText. Adding support to the core extension framework will be tracked in a separate issue and will be marked as blocking this issue.

The original MR license compliance widget had the ability to collapse and expand the very long list of dependencies and allowed customizing the max count/number of dependencies before the collapsible logic took affect.

Note

We may end up closing this issue if the WorkingGroupMergeRequestReportWidgets decides not to support collapsible/expandable text.

This issue covers the work to consume the the MR Widget Extension API and implement the collapsible/expand text.

• Blocked, and TBD based on IF and HOW the API is implemented in the core widget extension

What we have in the current iteration of the MR widget extension for License Compliance

What we would implement from the legacy component

For uncategorized or allowed licenses we would link to the full report.

For denied licenses we would show the full list of dependencies no matter how many.

Implementation Plan

In ee/app/assets/javascripts/vue_merge_request_widget/extensions/license_compliance/index.js

1. Update parsing function From:

        newLicenses = newLicenses.map((e) => ({
          status: e.classification.approval_status,
          icon: {
            name: APPROVAL_STATUS_TO_ICON[e.classification.approval_status],
          },
          link: {
            href: e.url,
            text: e.name,
          },
          supportingText: `${s__('License Compliance| Used by')} ${parseDependencies(
            e.dependencies,
          )}`,
        }));

to something like

        newLicenses = newLicenses.map((e) => (
        let supportingText, text;
        if(e.classification.approval_status===<ALLOWED> || <UNCATEGORIZED>{
          supportingText = {
           text: `${s__('License Compliance| Used by')} ${parseDependencies(e.dependencies,)}`
           href: this.licenseCompliance.license_scanning.full_report_path
          }
        }else{
         text = e.dependencies
        }

        {
          status: e.classification.approval_status,
          icon: {
            name: APPROVAL_STATUS_TO_ICON[e.classification.approval_status],
          },
          text,
          link: {
            href: e.url,
            text: e.name,
          },
          supportingText,
        }
));

1. Update unit tests

Testing

Frontend engineer to update unit tests. SET to update/add frontend browser/E2E tests depending on Frontend unit test coverage (always shift left).