cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.3k stars 140 forks source link

chore: Connect performance marks to DOM elements #2345

Closed connorlanigan closed 3 weeks ago

connorlanigan commented 3 weeks ago

Description

This PR extends the existing performance mark mechanism with a mechanism to identify the corresponding DOM element. Each performance mark already contains an ID (in detail.instanceIdentifier) that is tied to the lifetime of the component.

With this PR, this same ID is now attached to a DOM element inside the component (not necessarily the root element), in the data attribute data-analytics-performance-mark. Thus, the elements for each performance mark can be found like this:

performance
  .getEntriesByType('mark')
  .filter(mark => mark.detail?.source === 'awsui')
  .map(mark => ({
    mark,
    element: document.querySelector(
      `[data-analytics-performance-mark="${mark.detail.instanceIdentifier}"]`
    ),
  }));

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

How has this been tested?

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`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - _Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - _Changes were manually tested for accessibility, see [accessibility guidelines](https://cloudscape.design/foundation/core-principles/accessibility/)._ #### Security - _If the code handles URLs: all URLs are validated through [the `checkSafeUrl` function](https://github.com/cloudscape-design/components/blob/main/src/internal/utils/check-safe-url.ts)._ #### 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[bot] commented 3 weeks ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.50%. Comparing base (50805ae) to head (9490795). Report is 2 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2345 +/- ## ======================================== Coverage 95.49% 95.50% ======================================== Files 706 706 Lines 18860 18876 +16 Branches 6339 6003 -336 ======================================== + Hits 18011 18027 +16 - Misses 795 841 +46 + Partials 54 8 -46 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.