Skip to content

fix: migrate bulk-import makeStyles to sx preventing JSS collisions#3090

Open
rohitratannagar wants to merge 1 commit intoredhat-developer:mainfrom
rohitratannagar:fix/jss-class-collision-bulk-import
Open

fix: migrate bulk-import makeStyles to sx preventing JSS collisions#3090
rohitratannagar wants to merge 1 commit intoredhat-developer:mainfrom
rohitratannagar:fix/jss-class-collision-bulk-import

Conversation

@rohitratannagar
Copy link
Copy Markdown
Contributor

@rohitratannagar rohitratannagar commented May 9, 2026

Fix: CSS class name collision between bulk-import plugins and lightspeed

Issue

fixes: https://redhat.atlassian.net/browse/RHDHBUGS-2822

possible reason for the bug

  • Both plugins used makeStyles from @mui/styles (JSS), which generates global class names such as jss1, jss2, etc.
  • In RHDH, dynamically loaded plugins create independent JSS instances with counters starting from 1, causing identical class names across plugins.
  • Since styles are injected into the same document <head>, Lightspeed FAB's !important styles (position: fixed, backgroundColor, maxWidth) leaked into bulk-import table rows.
  • This resulted in table misalignment and unintended style overrides.

Fix

  • Migrated bulk-import table components from makeStyles to MUI's sx prop.
  • sx uses Emotion, which generates content-hashed class names (css-*) instead of sequential jss{n} classes.

UI before changes

Screen.Recording.2026-05-10.at.12.07.12.AM.mov

UI after changes

Screen.Recording.2026-05-10.at.12.04.21.AM.mov

✔️ Checklist

  • A changeset describing the change and affected packages. (more info)
  • Added or Updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented May 9, 2026

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/backstage-plugin-bulk-import workspaces/bulk-import/plugins/bulk-import patch v7.3.2

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 9, 2026

@codecov
Copy link
Copy Markdown

codecov Bot commented May 9, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 61.00%. Comparing base (75181f0) to head (46ebb17).
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3090      +/-   ##
==========================================
- Coverage   61.00%   61.00%   -0.01%     
==========================================
  Files        2069     2069              
  Lines       64043    64036       -7     
  Branches    16620    16621       +1     
==========================================
- Hits        39070    39065       -5     
+ Misses      24740    24738       -2     
  Partials      233      233              
Flag Coverage Δ *Carryforward flag
adoption-insights 83.58% <ø> (ø) Carriedforward from 75181f0
ai-integrations 70.03% <ø> (ø) Carriedforward from 75181f0
app-defaults 69.60% <ø> (ø) Carriedforward from 75181f0
augment 69.36% <ø> (ø) Carriedforward from 75181f0
bulk-import 72.44% <100.00%> (+<0.01%) ⬆️
cost-management 16.49% <ø> (ø) Carriedforward from 75181f0
dcm 32.85% <ø> (ø) Carriedforward from 75181f0
extensions 61.79% <ø> (ø) Carriedforward from 75181f0
global-floating-action-button 73.75% <ø> (ø) Carriedforward from 75181f0
global-header 61.68% <ø> (ø) Carriedforward from 75181f0
homepage 50.84% <ø> (ø) Carriedforward from 75181f0
konflux 91.01% <ø> (ø) Carriedforward from 75181f0
lightspeed 70.36% <ø> (ø) Carriedforward from 75181f0
mcp-integrations 81.59% <ø> (ø) Carriedforward from 75181f0
orchestrator 34.83% <ø> (ø) Carriedforward from 75181f0
quickstart 62.64% <ø> (ø) Carriedforward from 75181f0
sandbox 79.56% <ø> (ø) Carriedforward from 75181f0
scorecard 83.61% <ø> (ø) Carriedforward from 75181f0
theme 64.54% <ø> (ø) Carriedforward from 75181f0
translations 8.49% <ø> (ø) Carriedforward from 75181f0
x2a 82.09% <ø> (ø) Carriedforward from 75181f0

*This pull request uses carry forward flags. Click here to find out more.


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 75181f0...46ebb17. Read the comment docs.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant