fix(report-portal): use mui5 styled components

plugins/report-portal-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appdev-platform/backstage-plugin-report-portal-backend",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -70,13 +70,13 @@
   "configSchema": "config.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/appdev-platform/backstage-plugins",
+    "url": "https://github.com/appdev-platform/janus-backstage-plugins",
     "directory": "plugins/report-portal-backend"
   },
   "keywords": [
     "backstage",
     "plugin"
   ],
   "homepage": "https://janus-idp.io/",
-  "bugs": "https://github.com/appdev-platform/backstage-plugins/issues"
+  "bugs": "https://github.com/appdev-platform/janus-backstage-plugins/issues"
 }

plugins/report-portal-backend/src/dynamic/index.ts

@@ -1,11 +1,8 @@
-import { BackendDynamicPluginInstaller } from '@backstage/backend-plugin-manager';
+import { BackendDynamicPluginInstaller } from '@backstage/backend-dynamic-feature-service';
 
-import { createRouter } from '../service/router';
+import { reportPortalPlugin } from '../plugin';
 
 export const dynamicPluginInstaller: BackendDynamicPluginInstaller = {
-  kind: 'legacy',
-  router: {
-    pluginID: 'report-portal',
-    createPlugin: createRouter,
-  },
+  kind: 'new',
+  install: () => reportPortalPlugin,
 };

plugins/report-portal/dev/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { IconComponent } from '@backstage/core-plugin-api';
 import { createDevApp } from '@backstage/dev-utils';
 import {
   EntityAboutCard,
@@ -9,9 +10,15 @@ import {
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 
 import Grid from '@mui/material/Grid';
+import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 
+import { ReportPortalIcon } from '../src';
 import { mockEntity } from '../src/mocks';
-import { ReportPortalOverviewCard, reportPortalPlugin } from '../src/plugin';
+import {
+  ReportPortalGlobalPage,
+  ReportPortalOverviewCard,
+  reportPortalPlugin,
+} from '../src/plugin';
 
 const overviewContent = (
   <Grid container spacing={3} style={{ padding: '2rem' }} alignItems="stretch">
@@ -32,6 +39,13 @@ const overviewContent = (
 
 createDevApp()
   .registerPlugin(reportPortalPlugin)
+  .addThemes(getAllThemes())
+  .addPage({
+    icon: ReportPortalIcon as IconComponent,
+    title: 'Global Page',
+    path: '/report-portal',
+    element: <ReportPortalGlobalPage />,
+  })
   .addPage({
     element: (
       <EntityProvider entity={mockEntity}>{overviewContent}</EntityProvider>

plugins/report-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appdev-platform/backstage-plugin-report-portal",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -35,12 +35,14 @@
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@mui/styles": "^5.15.17",
+    "@redhat-developer/red-hat-developer-hub-theme": "^0.0.59",
     "luxon": "^3.4.4",
     "react-multi-progress": "^1.3.0",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
     "react": "16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
@@ -50,6 +52,7 @@
     "@backstage/plugin-catalog": "^1.16.1",
     "@backstage/test-utils": "1.5.0",
     "@janus-idp/cli": "1.7.3",
+    "@redhat-developer/red-hat-developer-hub-theme": "^0.0.59",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
@@ -65,13 +68,13 @@
   "configSchema": "config.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/appdev-platform/backstage-plugins",
+    "url": "https://github.com/appdev-platform/janus-backstage-plugins",
     "directory": "plugins/report-portal"
   },
   "keywords": [
     "backstage",
     "plugin"
   ],
   "homepage": "https://janus-idp.io/",
-  "bugs": "https://github.com/appdev-platform/backstage-plugins/issues"
+  "bugs": "https://github.com/appdev-platform/janus-backstage-plugins/issues"
 }

plugins/report-portal/src/components/LaunchesPage/LaunchesPage.tsx

@@ -12,28 +12,27 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 
 import Launch from '@mui/icons-material/Launch';
 import Button from '@mui/material/Button';
-import makeStyles from '@mui/styles/makeStyles';
+import { styled, Theme } from '@mui/material/styles';
 
 import { projectsRouteRef, rootRouteRef } from '../../routes';
 import { LaunchesPageContent } from './LaunchesPageContent/LaunchesPageContent';
 
-const useStyles = makeStyles(theme => ({
-  'prj-button': {
+const StyledButton = styled(Button, { target: '_blank' })(
+  ({ theme }: { theme: Theme }) => ({
     color: '#fff',
     backdropFilter: 'blur(10px)',
     marginTop: theme.spacing(4),
     alignItems: 'initial',
     textTransform: 'none',
     fontSize: '1rem',
-  },
-}));
+  }),
+);
 
 export const LaunchesPage = (props: { themeId?: string }) => {
   const rootPage = useRouteRef(rootRouteRef);
   const projectsPage = useRouteRef(projectsRouteRef);
   const hostName = useQueryParamState('host')[0] as string;
   const projectName = useQueryParamState('project')[0] as string;
-  const classes = useStyles();
 
   return (
     <Page themeId={props.themeId ?? 'app'}>
@@ -52,15 +51,13 @@ export const LaunchesPage = (props: { themeId?: string }) => {
           </>
         }
       >
-        <Button
+        <StyledButton
           endIcon={<Launch />}
           variant="text"
           href={`https://${hostName}/ui/#${projectName}`}
-          target="_blank"
-          className={classes['prj-button']}
         >
           Project Details
-        </Button>
+        </StyledButton>
       </Header>
       <Content>
         <LaunchesPageContent host={hostName} project={projectName} />

plugins/report-portal/src/components/ProjectsPage/ProjectsPage.tsx

@@ -1,39 +1,36 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import {
   Breadcrumbs,
   Content,
   Header,
+  Link,
   Page,
   useQueryParamState,
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
 import Launch from '@mui/icons-material/Launch';
 import Button from '@mui/material/Button';
-import makeStyles from '@mui/styles/makeStyles';
+import { styled, Theme } from '@mui/material/styles';
 
 import { rootRouteRef } from '../../routes';
 import { ProjectsPageContent } from './ProjectsPageContent/ProjectsPageContent';
 
-const useStyles = makeStyles(theme => ({
-  'rp-button': {
+const StyledButton = styled(Button, { target: '_blank' })(
+  ({ theme }: { theme: Theme }) => ({
     color: '#fff',
     backdropFilter: 'blur(10px)',
     marginTop: theme.spacing(4),
     alignItems: 'initial',
     textTransform: 'none',
     fontSize: '1rem',
-  },
-}));
+  }),
+);
 
 export const ProjectsPage = (props: { themeId?: string }) => {
   const rootPage = useRouteRef(rootRouteRef);
   const hostName = useQueryParamState('host')[0] as string;
-
-  const classes = useStyles();
-
   return (
     <Page themeId={props.themeId ?? 'app'}>
       <Header
@@ -48,15 +45,13 @@ export const ProjectsPage = (props: { themeId?: string }) => {
           </>
         }
       >
-        <Button
+        <StyledButton
           endIcon={<Launch />}
           variant="text"
           href={`https://${hostName}`}
-          target="_blank"
-          className={classes['rp-button']}
         >
           Report Portal
-        </Button>
+        </StyledButton>
       </Header>
       <Content>
         <ProjectsPageContent host={hostName} />

plugins/report-portal/src/components/ReportPortalOverviewCard/ReportPortalOverviewCard.tsx

@@ -5,26 +5,15 @@ import { InfoCard, InfoCardVariants } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
 
-// import {
-//   Divider,
-//   Grid,
-//   List,
-//   ListItem,
-//   ListItemSecondaryAction,
-//   ListItemText,
-//   Theme,
-//   Typography,
-// } from '@mui/material';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import ListItemText from '@mui/material/ListItemText';
 import Skeleton from '@mui/material/Skeleton';
-import { Theme } from '@mui/material/styles';
+import { styled, Theme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import makeStyles from '@mui/styles/makeStyles';
 
 import { useLaunchDetails, useProjectDetails } from '../../hooks';
 import { isReportPortalAvailable } from '../../utils/isReportPortalAvailable';
@@ -46,45 +35,39 @@ const HeaderComponent = (props: { total: number }) => {
 
 type Defect = { id: number; name: string; total: number; color: string };
 
-const useStylesForDefect = makeStyles((theme: Theme) => ({
-  status: {
-    '&::before': {
-      width: '0.7em',
-      height: '0.7em',
-      display: 'inline-block',
-      marginRight: theme.spacing(1),
-      borderRadius: '50%',
-      content: '""',
-      backgroundColor: (props: { backgroundColor: string }) =>
-        props.backgroundColor,
-    },
+const StyledTypography = styled(Typography, {
+  shouldForwardProp: prop => prop !== 'color',
+})(({ theme, color }) => ({
+  '&::before': {
+    width: '0.7em',
+    height: '0.7em',
+    display: 'inline-block',
+    marginRight: theme.spacing(1),
+    borderRadius: '50%',
+    content: '""',
+    backgroundColor: color,
   },
 }));
 
 const DefectStatus = (props: { color: string; children: any }) => {
-  const classes = useStylesForDefect({ backgroundColor: props.color });
   return (
-    <Typography
-      className={classes.status}
-      component="span"
+    <StyledTypography
+      color={props.color}
       aria-label="Status"
       aria-hidden="true"
     >
       {props.children}
-    </Typography>
+    </StyledTypography>
   );
 };
 
-const useStyles = makeStyles({
-  results: {
-    fontWeight: 'bold',
-  },
+const StyledResults = styled(Typography)({
+  '& > *': { fontWeight: '800' },
 });
 
 export const ReportPortalOverviewCard = (props: {
   variant: InfoCardVariants;
 }) => {
-  const classes = useStyles();
   const config = useApi(configApiRef);
   const hostsConfig = config.getConfigArray('reportPortal.integrations');
 
@@ -199,25 +182,25 @@ export const ReportPortalOverviewCard = (props: {
               />
             </Grid>
             <Grid item xs={4}>
-              <Typography className={classes.results}>
+              <StyledResults>
                 <DefectStatus color="#28b463">
                   Passed: {launchDetails!.statistics.executions.passed ?? 0}
                 </DefectStatus>
-              </Typography>
+              </StyledResults>
             </Grid>
             <Grid item xs={4}>
-              <Typography className={classes.results}>
+              <StyledResults>
                 <DefectStatus color="#e74c3c">
                   Failed: {launchDetails!.statistics.executions.failed ?? 0}
                 </DefectStatus>
-              </Typography>
+              </StyledResults>
             </Grid>
             <Grid item xs={4}>
-              <Typography className={classes.results}>
+              <StyledResults>
                 <DefectStatus color="#777777">
                   Skipped: {launchDetails!.statistics.executions.skipped ?? 0}
                 </DefectStatus>
-              </Typography>
+              </StyledResults>
             </Grid>
           </>
         )}