feat: WC-274 isolate external styles for component

[wesleyboar]

Overview

Allow loading a component that uses external styles that are isolated such that they do not conflict with portal styles.

Important

Proof of Concept. Do not merge as is.

Status

• fix failing checks
• make Data Files get past loading UI
• test next steps

Related

• WC-274
• replaced by feat: WC-274 component can opt for CMS styles #1127

Changes

• adds new datafiles hook
• changes DataFiles to test new hook

Testing

1. ✅ Open Data Files.
2. ✅ Verify loading UI shows.
3. ❌ Verify loading UI is replaced by content.
4. ⚪️ Verify content and styles like https://pprd.digitalrocks.tacc.utexas.edu/datasets/.

UI

So far…

Notes

I made styles for CMS-powered content¹, but now I learn the function will be built in React. But CMS global styles might conflict with Portal global styles.

Footnotes

1. Like DesignSafe Tools & Apps Overview pages. ↩

[codecov]

Codecov Report

Attention: Patch coverage is 80.60606% with 32 lines in your changes missing coverage. Please review.

Project coverage is 70.73%. Comparing base (a22ef9e) to head (d4950a4).

Files with missing lines	Patch %	Lines
client/src/components/DataFiles/DataFilesTest.jsx	16.66%	20 Missing ⚠️
client/src/hooks/datafiles/useExternalStyles.js	91.42%	12 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1126      +/-   ##
==========================================
+ Coverage   70.68%   70.73%   +0.04%     
==========================================
  Files         540      542       +2     
  Lines       33572    33736     +164     
  Branches     2989     3011      +22     
==========================================
+ Hits        23732    23864     +132     
- Misses       9632     9664      +32     
  Partials      208      208              

Flag	Coverage Δ
javascript	72.95% <80.60%> (+0.04%)	⬆️
unittests	61.20% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
client/src/components/DataFiles/index.js	100.00% <100.00%> (ø)
client/src/hooks/datafiles/index.js	100.00% <ø> (ø)
client/src/hooks/datafiles/useExternalStyles.js	91.42% <91.42%> (ø)
client/src/components/DataFiles/DataFilesTest.jsx	16.66% <16.66%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[wesleyboar]

Not working yet. Non-standard use of React. Hot reload errors in dev. React 19 (supports web components) not available. Replaced by #1127.

Refactor in feat/WC-274-allow-pdm-to-load-external-styles-in-isolation-for-a-component--shadow-root-host (deleted branch) it the same problems.

I should probably not try Shadow DOM in React again.