fix(theme): fix issue that mui was loaded multiple times

Signed-off-by: Christoph Jerolimov <[email protected]>
redhat-developer · Dec 22, 2024 · 310381c · 310381c
1 parent 8b6e151
commit 310381c
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 257 deletions.
diff --git a/package.json b/package.json
@@ -53,8 +53,6 @@
     "typescript": "5.6.3"
   },
   "resolutions": {
-    "@types/react": "18.3.16",
-    "@types/react-dom": "18.3.5",
     "@backstage/[email protected]": "patch:@backstage/backend-dynamic-feature-service@npm%3A0.4.4#./.yarn/patches/@backstage-backend-dynamic-feature-service-npm-0.4.4.patch",
     "@backstage/[email protected]": "patch:@backstage/plugin-auth-backend-module-oidc-provider@npm%3A0.3.1#./.yarn/patches/@backstage-plugin-auth-backend-module-oidc-provider-npm-0.3.1.patch",
     "@backstage/plugin-auth-backend-module-oidc-provider@^0.3.1": "patch:@backstage/plugin-auth-backend-module-oidc-provider@npm%3A0.3.1#./.yarn/patches/@backstage-plugin-auth-backend-module-oidc-provider-npm-0.3.1.patch",
@@ -68,7 +66,16 @@
     "@backstage/plugin-scaffolder-node@^0.2.9": "patch:@backstage/plugin-scaffolder-node@npm%3A0.6.1#./.yarn/patches/@backstage-plugin-scaffolder-node-npm-0.6.1-a2cc13065e.patch",
     "@backstage/plugin-scaffolder-node@^0.4.8": "patch:@backstage/plugin-scaffolder-node@npm%3A0.6.1#./.yarn/patches/@backstage-plugin-scaffolder-node-npm-0.6.1-a2cc13065e.patch",
     "@backstage/plugin-scaffolder-node@^0.6.0": "patch:@backstage/plugin-scaffolder-node@npm%3A0.6.1#./.yarn/patches/@backstage-plugin-scaffolder-node-npm-0.6.1-a2cc13065e.patch",
-    "@backstage/plugin-scaffolder-node@^0.5.1": "patch:@backstage/plugin-scaffolder-node@npm%3A0.6.1#./.yarn/patches/@backstage-plugin-scaffolder-node-npm-0.6.1-a2cc13065e.patch"
+    "@backstage/plugin-scaffolder-node@^0.5.1": "patch:@backstage/plugin-scaffolder-node@npm%3A0.6.1#./.yarn/patches/@backstage-plugin-scaffolder-node-npm-0.6.1-a2cc13065e.patch",
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/private-theming": "^5",
+    "@mui/styled-engine": "^5",
+    "@mui/styles": "^5",
+    "@mui/system": "^5",
+    "@mui/utils": "^5",
+    "@types/react-dom": "18.3.5",
+    "@types/react": "18.3.16"
   },
   "jest": {
     "testTimeout": 20000

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -42,6 +42,8 @@
     "@emotion/styled": "11.14.0",
     "@internal/plugin-dynamic-plugins-info": "*",
     "@janus-idp/backstage-plugin-rbac-common": "1.12.0",
+    "@material-ui/core": "4.12.4",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "5.16.11",
     "@mui/material": "5.16.11",
     "@mui/styled-engine": "5.16.8",

diff --git a/packages/app/src/components/AppBase/AppBase.tsx b/packages/app/src/components/AppBase/AppBase.tsx
@@ -20,6 +20,15 @@ import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
 import { SearchPage as BackstageSearchPage } from '@backstage/plugin-search';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
 
+import ButtonV4 from '@material-ui/core/Button';
+import GridV4 from '@material-ui/core/Grid';
+import TextFieldV4 from '@material-ui/core/TextField';
+import AutocompleteV4 from '@material-ui/lab/Autocomplete';
+import AutocompleteV5 from '@mui/material/Autocomplete';
+import ButtonV5 from '@mui/material/Button';
+import GridV5 from '@mui/material/Grid';
+import TextFieldV5 from '@mui/material/TextField';
+
 import { entityPage } from '../catalog/EntityPage';
 import DynamicRootContext from '../DynamicRoot/DynamicRootContext';
 import { LearningPaths } from '../learningPaths/LearningPathsPage';
@@ -28,6 +37,109 @@ import ConfigUpdater from '../Root/ConfigUpdater';
 import { SearchPage } from '../search/SearchPage';
 import { settingsPage } from '../UserSettings/SettingsPages';
 
+const ButtonTest = () => {
+  const movies = [
+    { title: 'The Shawshank Redemption', year: 1994 },
+    { title: 'The Godfather', year: 1972 },
+    { title: 'The Godfather: Part II', year: 1974 },
+    { title: 'The Dark Knight', year: 2008 },
+    { title: '12 Angry Men', year: 1957 },
+    { title: "Schindler's List", year: 1993 },
+    { title: 'Pulp Fiction', year: 1994 },
+    { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+    { title: 'The Good, the Bad and the Ugly', year: 1966 },
+    { title: 'Fight Club', year: 1999 },
+  ];
+
+  return (
+    <div>
+      <h1>Material UI v4 buttons</h1>
+      <div>
+        <ButtonV4 variant="contained">Default</ButtonV4>
+        <ButtonV4 variant="contained" color="primary">
+          Primary
+        </ButtonV4>
+        <ButtonV4 variant="contained" color="secondary">
+          Secondary
+        </ButtonV4>
+        <ButtonV4 variant="contained" disabled>
+          Disabled
+        </ButtonV4>
+        <ButtonV4 variant="contained" color="primary" href="#contained-buttons">
+          Link
+        </ButtonV4>
+      </div>
+
+      <h1>MUI v5 buttons</h1>
+      <div>
+        <ButtonV5 variant="contained">Default</ButtonV5>
+        <ButtonV5 variant="contained" color="primary">
+          Primary
+        </ButtonV5>
+        <ButtonV5 variant="contained" color="secondary">
+          Secondary
+        </ButtonV5>
+        <ButtonV5 variant="contained" disabled>
+          Disabled
+        </ButtonV5>
+        <ButtonV5 variant="contained" color="primary" href="#contained-buttons">
+          Link
+        </ButtonV5>
+      </div>
+
+      <h1>Material UI v4 Autocomplete</h1>
+      <div>
+        <AutocompleteV4
+          options={movies}
+          renderInput={params => <TextFieldV4 {...params} label="Movie" />}
+          getOptionLabel={option => option.title}
+        />
+      </div>
+
+      <h1>MUI v5 Autocomplete</h1>
+      <div>
+        <AutocompleteV5
+          options={movies}
+          renderInput={params => <TextFieldV5 {...params} label="Movie" />}
+          getOptionLabel={option => option.title}
+        />
+      </div>
+
+      <h1>MUI v4 Grid</h1>
+      <GridV4 container>
+        <GridV4 item>
+          <div style={{ backgroundColor: 'gray' }}>1</div>
+        </GridV4>
+        <GridV4 item>
+          <div style={{ backgroundColor: 'gray' }}>2</div>
+        </GridV4>
+        <GridV4 item>
+          <div style={{ backgroundColor: 'gray' }}>3</div>
+        </GridV4>
+        <GridV4 item>
+          <div style={{ backgroundColor: 'gray' }}>4</div>
+        </GridV4>
+      </GridV4>
+
+      <h1>MUI v5 Grid</h1>
+      <GridV5 container>
+        <GridV5 item>
+          <div style={{ backgroundColor: 'gray' }}>1</div>
+        </GridV5>
+        <GridV5 item>
+          <div style={{ backgroundColor: 'gray' }}>2</div>
+        </GridV5>
+        <GridV5 item>
+          <div style={{ backgroundColor: 'gray' }}>3</div>
+        </GridV5>
+        <GridV5 item>
+          <div style={{ backgroundColor: 'gray' }}>4</div>
+        </GridV5>
+      </GridV5>
+    </div>
+  );
+};
+
 const AppBase = () => {
   const {
     AppProvider,
@@ -120,6 +232,7 @@ const AppBase = () => {
             <Route path="/settings" element={<UserSettingsPage />}>
               {settingsPage}
             </Route>
+            <Route path="/button-test" element={<ButtonTest />} />
             <Route path="/catalog-graph" element={<CatalogGraphPage />} />
             <Route path="/learning-paths" element={<LearningPaths />} />
             {dynamicRoutes.map(