fix(app): add mui5 workaround to the shell

This change moves the statically applied classname generator code from
each individual wrapper to the application shell to ensure that all
plugins using MUI5 have consistent class names applied to those
components by the theme provider.

Signed-off-by: Stan Lewis <[email protected]>

Author: gashcrumb

.gitignore

@@ -42,6 +42,7 @@ site
 
 # Local configuration files
 *.local.yaml
+dynamic-plugins.yaml
 
 # Sensitive credentials
 *-credentials.local.yaml

docs/dynamic-plugins/known-issues.md

@@ -2,35 +2,6 @@
 
 ## MUI Version 5 releated issues
 
-### Styles are missing
-
-When your plugin uses MUI v5 and is loaded as a dynamic plugin, it will miss some of the default CSS declations from MUI and Backstage/RHDH.
-
-**Workaround:**
-
-Add the following source code to your `<plugin>/src/index.ts` before your plugin is exported:
-
-```tsx
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
-export * from './plugin';
-```
-
-**Alternatives:**
-
-* Use Backstage Core Components or Material UI v4 components from `@material-ui/core/*`.
-
-**Related issues:**
-
-* [RHIDP-5170 - Dynamic plugin loaded plugins that uses MUI v5 looks different then static loaded plugins](https://issues.redhat.com/browse/RHIDP-5170)
-* [RHIDP-5847 - Narrow the accepted versions in the scalprum webpack federated module configuration](https://issues.redhat.com/browse/RHIDP-5847)
-
 ### Grid cards/component misses the default spacing from Backstage
 
 When your plugin is using the Grid component from `@mui/material/Grid` the default spacing from the Backstage/RHDH theme is missing.

dynamic-plugins/wrappers/backstage-community-plugin-acr/src/index.ts

@@ -1,10 +1 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-acr';
-

dynamic-plugins/wrappers/backstage-community-plugin-jfrog-artifactory/src/index.ts

@@ -1,10 +1,2 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-jfrog-artifactory';
 

dynamic-plugins/wrappers/backstage-community-plugin-nexus-repository-manager/src/index.ts

@@ -1,9 +1 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-nexus-repository-manager';

dynamic-plugins/wrappers/backstage-community-plugin-ocm/src/index.ts

@@ -1,9 +1 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-ocm';

dynamic-plugins/wrappers/backstage-community-plugin-quay/src/index.ts

@@ -1,10 +1,2 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-quay';
 

dynamic-plugins/wrappers/backstage-community-plugin-rbac/src/index.ts

@@ -1,9 +1 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-rbac';

dynamic-plugins/wrappers/backstage-community-plugin-redhat-argocd/src/index.ts

@@ -1,10 +1,2 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-redhat-argocd';
 

dynamic-plugins/wrappers/backstage-community-plugin-tekton/src/index.ts

@@ -1,10 +1,2 @@
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
-
-ClassNameGenerator.configure(componentName => {
-  return componentName.startsWith('v5-')
-    ? componentName
-    : `v5-${componentName}`;
-});
-
 export * from '@backstage-community/plugin-tekton';