chore: Added Trusted Types to iconSVG

[Hoxmot]

I expanded the type of components/src/internal/plugins/controllers/drawers.ts to also support the Trusted Types API. In short, Trusted Types is a browser API, which allows the developers to write the code with a better awareness of the injection sinks (e.g., dangerouslySetInnerHTML in React) usage. With the Trusted Types enforcement enabled, each injection sinks requires the usage of a trusted object, which can have a sanitization or other kinds of allowlisting in place.

With this new change, the iconSvg in DrawerConfig supports string | TrustedHTML.

As a result, the developer experience has improved, since now they can use something as simple as:

const trustedPolicy: TrustedTypePolicy = ...;
awsuiPlugins.appLayout.registerDrawer({
  ...
  trigger: {
    // ✅ preferable
    iconSvg: trustedPolicy.createHTML(svgHtml),
  },
});

Instead of type casting just to make it compliant:

const trustedPolicy: TrustedTypePolicy = ...;
appLayout.registerDrawer({
  ...
  trigger: {
    // ❌ cumbersome
    iconSvg: trustedPolicy.createHTML(svgHtml) as any as string,
  },
});

The already existing implementation of AppLayout implemented in components/src/app-layout/runtime-api.tsx supports the trusted types, since dangerouslySetInnerHTML API already accepts type string | TrustedHTML (types update might be required though).

⚠️ However, if someone implements the consumer themselves, this might be a breaking change.

Related links, issue #, if available: n/a

How has this been tested?

I ran npm test locally.

• npm run test:unit:

Test Suites: 369 passed, 369 total
Tests:       46 skipped, 6881 passed, 6927 total
Snapshots:   96 passed, 96 total
Time:        72.377 s

• npm run test:integ:

Test Suites: 141 passed, 141 total
Tests:       2 skipped, 1180 passed, 1182 total
Snapshots:   8 passed, 8 total
Time:        369.777 s

• npm run test:a11y:

Test Suites: 6 passed, 6 total
Tests:       8 skipped, 1894 passed, 1902 total
Snapshots:   0 total
Time:        503.107 s, estimated 533 s

• npm run test:motion:

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        26.34 s

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• 🤷 Changes include appropriate documentation updates.
• ❌ Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• ✅ Changes do not include unsupported browser features, see CONTRIBUTING.md.
• ✅ Changes were manually tested for accessibility, see accessibility guidelines.

Security

• ✅ If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• ✅ Changes are covered with new/existing unit tests?
• ✅ Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.79%. Comparing base (63a2564) to head (ef118f0).
Report is 16 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2574   +/-   ##
=======================================
  Coverage   95.79%   95.79%           
=======================================
  Files         741      741           
  Lines       20282    20282           
  Branches     6896     6887    -9     
=======================================
  Hits        19429    19429           
  Misses        797      797           
  Partials       56       56           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[just-boris]

Did a bunch of test builds on the internal infra, this fails too many consumers because of @types/react version bump. This needs an alternative solution

[Hoxmot]

I updated the branch with an additional commit to pin the @types/react version to 16.14.40. This should minimise the scope of the changes. The version in the current main is 16.14.34 (based on package-lock.json)

Previously, I used ^16.14.40, which bumped the version to 16.14.60 (newest 16.14.x version), which included a change of moving JSX from the global scope to the React scope.

[just-boris]

Completed several dry-runs (6988134134, 6988133849, 6988133252) the change seems compatible.

But still not buying this change. See below:

[just-boris]

This dependency is problematic. It is supposed to be a bult-in dom.d.ts type, but temporarily it exists as a library.

When it becomes built-in, our consumers may have problems upgrading to the latest typescript because of that.

Is type-safety here really that much important, or can we get away with type casting

iconSvg: trustedPolicy.createHTML(svgHtml) as any as string,

[Hoxmot]

After investigating a bit further, you're right. I'm not sure I can make to 100% working correctly with all the consumers.

I guess I can go back to it, once the trusted types related types (incl. TrustedHTML) are added to TypeScript without the need of importing external libraries (issue). Thanks for your time.