add createGenerateClassName

Author: Eswaraiahsapram

workspaces/scorecard/.changeset/mui-v5-scorecard.md

@@ -63,6 +63,7 @@
     "@backstage/theme": "^0.7.2",
     "@mui/icons-material": "5.18.0",
     "@mui/material": "5.18.0",
+    "@mui/styles": "5.18.0",
     "@red-hat-developer-hub/backstage-plugin-scorecard-common": "workspace:^",
     "@tanstack/react-query": "^5.95.2",
     "date-fns": "^4.1.0",

workspaces/scorecard/plugins/scorecard/package.json

@@ -24,10 +24,11 @@ import Scorecard from './Scorecard';
 import { useScorecards } from '../../hooks/useScorecards';
 import { getStatusConfig, resolveMetricTranslation } from '../../utils';
 import PermissionRequiredState from '../Common/PermissionRequiredState';
+import { ScorecardStylesProvider } from '../ScorecardStylesProvider';
 import { useTranslation } from '../../hooks/useTranslation';
 import { CardLoading } from '../Common/CardLoading';
 
-export const EntityScorecardContent = () => {
+const EntityScorecardContentInner = () => {
   const { data: scorecards, isLoading, error } = useScorecards();
   const { t } = useTranslation();
 
@@ -102,3 +103,9 @@ export const EntityScorecardContent = () => {
     </Box>
   );
 };
+
+export const EntityScorecardContent = () => (
+  <ScorecardStylesProvider>
+    <EntityScorecardContentInner />
+  </ScorecardStylesProvider>
+);

workspaces/scorecard/plugins/scorecard/src/components/Scorecard/EntityScorecardContent.tsx

@@ -23,6 +23,7 @@ import { EmptyStatePanel } from './EmptyStatePanel';
 import { Metric } from '@red-hat-developer-hub/backstage-plugin-scorecard-common';
 import { useMetricDisplayLabels } from '../../hooks/useMetricDisplayLabels';
 import { CardLoading } from '../Common/CardLoading';
+import { ScorecardStylesProvider } from '../ScorecardStylesProvider';
 
 /** Coerces unknown/missing values to a finite number for safe UI math (NaN → 0). */
 function toSafeFiniteNumber(value: unknown): number {
@@ -129,7 +130,9 @@ export const ScorecardHomepageCardWithProvider = (props: {
   showSubheader?: boolean;
   showInfo?: boolean;
 }) => (
-  <ScorecardQueryProvider>
-    <ScorecardHomepageCard {...props} />
-  </ScorecardQueryProvider>
+  <ScorecardStylesProvider>
+    <ScorecardQueryProvider>
+      <ScorecardHomepageCard {...props} />
+    </ScorecardQueryProvider>
+  </ScorecardStylesProvider>
 );

workspaces/scorecard/plugins/scorecard/src/components/ScorecardHomepageSection/ScorecardHomepageCard.tsx

@@ -25,6 +25,7 @@ import Divider from '@mui/material/Divider';
 import { ScorecardQueryProvider } from '../../api';
 import { ScorecardHomepageCard } from '../ScorecardHomepageSection/ScorecardHomepageCard';
 import NotFoundState from '../Common/NotFoundState';
+import { ScorecardStylesProvider } from '../ScorecardStylesProvider';
 import { useTranslation } from '../../hooks/useTranslation';
 import { resolveMetricTranslation } from '../../utils/translationUtils';
 
@@ -125,7 +126,9 @@ export const ScorecardPage = () => {
  * when rendered outside a tree that already has a provider (e.g. on the homepage).
  */
 export const ScorecardPageWithProvider = () => (
-  <ScorecardQueryProvider>
-    <ScorecardPage />
-  </ScorecardQueryProvider>
+  <ScorecardStylesProvider>
+    <ScorecardQueryProvider>
+      <ScorecardPage />
+    </ScorecardQueryProvider>
+  </ScorecardStylesProvider>
 );

workspaces/scorecard/plugins/scorecard/src/components/ScorecardPage/ScorecardPage.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+
+import { createGenerateClassName, StylesProvider } from '@mui/styles';
+
+const generateClassName = createGenerateClassName({
+  seed: 'scorecard',
+});
+
+export const ScorecardStylesProvider = ({
+  children,
+}: {
+  readonly children: ReactNode;
+}) => (
+  <StylesProvider generateClassName={generateClassName}>
+    {children}
+  </StylesProvider>
+);

workspaces/scorecard/plugins/scorecard/src/components/ScorecardStylesProvider.tsx

@@ -12380,6 +12380,7 @@ __metadata:
     "@backstage/ui": "npm:^0.13.2"
     "@mui/icons-material": "npm:5.18.0"
     "@mui/material": "npm:5.18.0"
+    "@mui/styles": "npm:5.18.0"
     "@red-hat-developer-hub/backstage-plugin-scorecard-common": "workspace:^"
     "@red-hat-developer-hub/backstage-plugin-theme": "npm:^0.13.0"
     "@tanstack/react-query": "npm:^5.95.2"