chore(Hompage): mui5 migration

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

@@ -0,0 +1,6 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dynamic-home-page': patch
+---
+
+Replace Material UI v4 with MUI v5 and scope JSS class names to prevent style collisions.
+Fix double border issue in the widgets

workspaces/homepage/e2e-tests/homepageCards.test.ts

@@ -49,8 +49,8 @@ test.describe('Homepage Card Individual Tests', () => {
 
     const actualHeadingText = await greetingHeading.textContent();
     // Use the full greeting phrase (e.g. "Good afternoon") to locate the card.
-    // Using only the first word ("Good") would be too broad — other cards like
-    // Random Joke can contain that word and match first (hasText is case-insensitive).
+    // Using only the first word ("Good") would be too broad — other cards can
+    // contain that word and match first (hasText is case-insensitive).
     const cardHeading = actualHeadingText
       ? actualHeadingText.split(',')[0].trim()
       : translations.onboarding.greeting.goodMorning;

workspaces/homepage/e2e-tests/homepageCustomizable.test.ts

@@ -47,8 +47,7 @@ test.describe.serial('Dynamic Home Page Customization', () => {
     await runAccessibilityTests(sharedPage, testInfo);
   });
 
-  // Skipping as of now; re-enable after https://github.com/backstage/backstage/issues/33317 is fixed
-  test.skip('Verify All Cards Can Be Resized in Edit Mode', async ({
+  test('Verify All Cards Can Be Resized in Edit Mode', async ({
     browser: _browser,
   }, testInfo) => {
     await homePageCustomization.enterEditMode();
@@ -86,7 +85,7 @@ test.describe.serial('Dynamic Home Page Customization', () => {
       sharedPage.getByText(/Good (morning|afternoon|evening)/),
     ).toBeVisible();
 
-    await homePageCustomization.addWidget('Quick Access Card');
+    await homePageCustomization.addWidget('Quick Access');
     await expect(sharedPage.getByText('Quick Access')).toBeVisible();
   });
 

workspaces/homepage/eslint.frontend-shared.cjs

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+module.exports = function materialUiMigrationEslintConfig(packageDir) {
+  return require('@backstage/cli/config/eslint-factory')(packageDir, {
+    restrictedImports: [
+      {
+        name: '@material-ui/core',
+        message: 'Use @mui/material instead of Material UI v4.',
+      },
+      {
+        name: '@material-ui/lab',
+        message: 'Use @mui/material or @mui/lab instead of Material UI v4.',
+      },
+      {
+        name: 'makeStyles',
+        message:
+          'Use @mui/material sx/styled, or Backstage UI instead makeStyles.',
+      },
+      {
+        name: '@material-ui/icons',
+        message:
+          "Use '@mui/icons-material/<Icon>' instead of Material UI v4 (e.g. import MenuIcon from '@mui/icons-material/Menu').",
+      },
+    ],
+  });
+};

workspaces/homepage/mkdocs.yaml

@@ -20,7 +20,6 @@ nav:
       - Recently visited: cards/recently-visited.md
       - Top visited: cards/top-visited.md
       - Featured docs: cards/featured-docs.md
-      - Jokes: cards/jokes.md
       - World clock: cards/worldclock.md
   - Extend with plugins:
       - Create a new card: create-a-new-card.md

workspaces/homepage/packages/app-legacy/src/App.tsx

@@ -81,7 +81,6 @@ import {
   RecentlyVisitedCard,
   TopVisitedCard,
   FeaturedDocsCard,
-  JokeCard,
   WorldClock,
   HomePageCardMountPoint,
 } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
@@ -221,6 +220,7 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     Component: EntitySection,
     config: {
       id: 'rhdh-entity-section',
+      titleKey: 'entities.title',
       priority: 201,
       layouts: layouts.entity,
     },
@@ -229,6 +229,7 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     Component: TemplateSection,
     config: {
       id: 'rhdh-template-section',
+      titleKey: 'templates.title',
       priority: 200,
       layouts: layouts.template,
     },
@@ -239,7 +240,7 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     config: {
       priority: 202,
       id: 'quickaccess-card',
-      title: 'Quick Access Card',
+      titleKey: 'quickAccess.title',
       layouts: layouts.quickAccessCard,
     },
   },
@@ -321,35 +322,28 @@ const cardMountPoints: HomePageCardMountPoint[] = [
     Component: CatalogStarredEntitiesCard,
     config: {
       id: 'catalog-starred-entities-card',
-      title: 'Starred catalog entities',
+      titleKey: 'starredEntities.title',
     },
   },
   {
     Component: RecentlyVisitedCard as ComponentType,
     config: {
       id: 'recently-visited-card',
-      title: 'Recently visited',
+      titleKey: 'recentlyVisited.title',
     },
   },
   {
     Component: TopVisitedCard as ComponentType,
     config: {
       id: 'top-visited-card',
-      title: 'Top visited',
+      titleKey: 'topVisited.title',
     },
   },
   {
     Component: FeaturedDocsCard as ComponentType,
     config: {
       id: 'featured-docs-card',
-      title: 'Featured docs',
-    },
-  },
-  {
-    Component: JokeCard,
-    config: {
-      id: 'joke-card',
-      title: 'Random joke',
+      titleKey: 'featuredDocs.title',
     },
   },
   {

workspaces/homepage/packages/app/.eslintrc.js

@@ -1 +1,18 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config
+module.exports = require('../../eslint.frontend-shared.cjs')(__dirname);

workspaces/homepage/packages/app/package.json

@@ -44,8 +44,8 @@
     "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.36",
     "@backstage/plugin-user-settings": "^0.9.3",
     "@backstage/ui": "^0.15.0",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
     "@red-hat-developer-hub/backstage-plugin-dynamic-home-page": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-theme": "^0.14.1",
     "react": "^18.0.2",

workspaces/homepage/packages/app/src/modules/nav/Sidebar.tsx

@@ -23,8 +23,8 @@ import {
 } from '@backstage/core-components';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarLogo } from './SidebarLogo';
-import MenuIcon from '@material-ui/icons/Menu';
-import SearchIcon from '@material-ui/icons/Search';
+import MenuIcon from '@mui/icons-material/Menu';
+import SearchIcon from '@mui/icons-material/Search';
 import { SidebarSearchModal } from '@backstage/plugin-search';
 import { UserSettingsSignInAvatar } from '@backstage/plugin-user-settings';
 // import { NotificationsSidebarItem } from '@backstage/plugin-notifications';

workspaces/homepage/packages/app/src/modules/nav/SidebarLogo.tsx

@@ -13,43 +13,45 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import {
   Link,
   sidebarConfig,
   useSidebarOpenState,
 } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core';
-
+import Box from '@mui/material/Box';
 import {
   LogoFull,
   LogoIcon,
 } from '@red-hat-developer-hub/backstage-plugin-theme';
 
-const useSidebarLogoStyles = makeStyles({
-  root: {
-    width: sidebarConfig.drawerWidthClosed,
-    height: 3 * sidebarConfig.logoHeight,
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    alignItems: 'center',
-    marginBottom: -14,
-  },
-  link: {
-    width: sidebarConfig.drawerWidthClosed,
-    marginLeft: 24,
-  },
-});
-
 export const SidebarLogo = () => {
-  const classes = useSidebarLogoStyles();
   const { isOpen } = useSidebarOpenState();
+  const drawerWidth = isOpen
+    ? sidebarConfig.drawerWidthOpen
+    : sidebarConfig.drawerWidthClosed;
 
   return (
-    <div className={classes.root}>
-      <Link to="/" underline="none" className={classes.link} aria-label="Home">
+    <Box
+      sx={{
+        width: drawerWidth,
+        height: 3 * sidebarConfig.logoHeight,
+        display: 'flex',
+        flexFlow: 'row nowrap',
+        alignItems: 'center',
+        mb: '-14px',
+      }}
+    >
+      <Link
+        to="/"
+        underline="none"
+        aria-label="Home"
+        style={{
+          width: drawerWidth,
+          marginLeft: 24,
+        }}
+      >
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>
-    </div>
+    </Box>
   );
 };

workspaces/homepage/plugins/dynamic-home-page/.eslintrc.js

@@ -1 +1,18 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config
+module.exports = require('../../eslint.frontend-shared.cjs')(__dirname);

workspaces/homepage/plugins/dynamic-home-page/dev/legacy.tsx

@@ -43,7 +43,6 @@ import {
   DynamicHomePageProps,
   FeaturedDocsCard,
   Headline,
-  JokeCard,
   Markdown,
   MarkdownCard,
   Placeholder,
@@ -178,13 +177,6 @@ const defaultMountPoints: HomePageCardMountPoint[] = [
       title: 'Featured docs card',
     },
   },
-  {
-    Component: JokeCard,
-    config: {
-      id: 'JokeCard',
-      title: 'Joke card',
-    },
-  },
 ];
 
 const createHeadline = ({
@@ -724,17 +716,6 @@ createDevApp()
       ],
     }),
   )
-  .addPage(
-    createPage({
-      navTitle: 'JokeCard',
-      pageTitle: 'JokeCard',
-      mountPoints: [
-        {
-          Component: JokeCard,
-        },
-      ],
-    }),
-  )
   .addPage(
     createPage({
       navTitle: 'WorldClock',

workspaces/homepage/plugins/dynamic-home-page/package.json

@@ -50,6 +50,7 @@
   "dependencies": {
     "@backstage/catalog-client": "^1.15.1",
     "@backstage/catalog-model": "^1.9.0",
+    "@backstage/core-compat-api": "^0.5.11",
     "@backstage/core-components": "^0.18.10",
     "@backstage/core-plugin-api": "^1.12.6",
     "@backstage/frontend-plugin-api": "^0.17.0",
@@ -66,8 +67,7 @@
     "@red-hat-developer-hub/backstage-plugin-homepage-common": "workspace:^",
     "@scalprum/react-core": "0.11.1",
     "react-grid-layout": "1.5.3",
-    "react-use": "17.6.0",
-    "tss-react": "4.9.20"
+    "react-use": "17.6.0"
   },
   "peerDependencies": {
     "react": "16.13.1 || ^17.0.0 || ^18.2.0",

workspaces/homepage/plugins/dynamic-home-page/report-alpha.api.md

@@ -22,7 +22,11 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'quickAccess.title': string;
     readonly 'quickAccess.error': string;
     readonly 'quickAccess.fetchError': string;
+    readonly 'featuredDocs.title': string;
     readonly 'featuredDocs.learnMore': string;
+    readonly 'starredEntities.title': string;
+    readonly 'recentlyVisited.title': string;
+    readonly 'topVisited.title': string;
     readonly 'templates.title': string;
     readonly 'templates.error': string;
     readonly 'templates.empty': string;
@@ -48,12 +52,12 @@ export const homepageTranslationRef: TranslationRef<
     readonly 'onboarding.learn.ariaLabel': string;
     readonly 'entities.title': string;
     readonly 'entities.error': string;
-    readonly 'entities.description': string;
     readonly 'entities.close': string;
     readonly 'entities.empty': string;
     readonly 'entities.fetchError': string;
     readonly 'entities.emptyDescription': string;
     readonly 'entities.register': string;
+    readonly 'entities.description': string;
     readonly 'entities.browseTheCatalog': string;
   }
 >;