fix(ocm): replace usage of pf-icons to mui icons (#2275)

Author: debsmita1

.changeset/green-trees-fly.md

@@ -0,0 +1,5 @@
+---
+"@janus-idp/shared-react": minor
+---
+
+Modified the package to enable the StatusIcon component to accept className as a prop

.changeset/hip-walls-kiss.md

@@ -0,0 +1,5 @@
+---
+"@janus-idp/backstage-plugin-ocm": minor
+---
+
+replaced pf-icons with mui icons

plugins/ocm/README.md

@@ -187,7 +187,7 @@ catalog:
    yarn workspace app add @janus-idp/backstage-plugin-ocm
    ```
 
-1. Select the components that you want to use, such as:
+2. Select the components that you want to use, such as:
 
    - `OcmPage`: This is a standalone page or dashboard displaying all clusters as tiles. You can add `OcmPage` to `packages/app/src/App.tsx` file as follows:
 
@@ -208,15 +208,15 @@ catalog:
 
      ```tsx title="packages/app/src/components/Root/Root.tsx"
      /* highlight-add-next-line */
-     import StorageIcon from '@material-ui/icons/Storage';
+     import { OcmIcon } from '@janus-idp/backstage-plugin-ocm';
 
      export const Root = ({ children }: PropsWithChildren<{}>) => (
        <SidebarPage>
          <Sidebar>
            <SidebarGroup label="Menu" icon={<MenuIcon />}>
              {/* ... */}
              {/* highlight-add-next-line */}
-             <SidebarItem icon={StorageIcon} to="ocm" text="Clusters" />
+             <SidebarItem icon={OcmIcon} to="ocm" text="Clusters" />
            </SidebarGroup>
            {/* ... */}
          </Sidebar>

plugins/ocm/dev/index.tsx

@@ -19,7 +19,7 @@ import {
   ClusterContextProvider,
   ClusterInfoCard,
 } from '../src';
-import { OcmPage, ocmPlugin } from '../src/plugin';
+import { OcmIcon, OcmPage, ocmPlugin } from '../src/plugin';
 
 const clusterEntity = (name: string): Entity => ({
   apiVersion: 'backstage.io/v1beta1',
@@ -87,8 +87,9 @@ createDevApp()
   .addThemes(getAllThemes())
   .addPage({
     element: <OcmPage />,
-    title: 'Root Page',
+    title: 'Clusters',
     path: '/ocm',
+    icon: OcmIcon,
   })
   .addPage({
     path: '/catalog/:kind/:namespace/:name',

plugins/ocm/package.json

@@ -50,8 +50,8 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.45",
+    "@mui/icons-material": "^5.16.4",
     "@patternfly/patternfly": "^5.1.0",
-    "@patternfly/react-icons": "^5.1.1",
     "react-use": "^17.4.0",
     "semver": "^7.5.4"
   },

plugins/ocm/src/components/common.tsx

@@ -7,7 +7,7 @@ import {
 } from '@backstage/core-components';
 
 import { Button, Grid, makeStyles, Tooltip } from '@material-ui/core';
-import { ArrowCircleUpIcon } from '@patternfly/react-icons';
+import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
 
 import { ClusterStatus } from '@janus-idp/backstage-plugin-ocm-common';
 

plugins/ocm/src/index.ts

@@ -1,8 +1,7 @@
-export { ocmPlugin, OcmPage } from './plugin';
+export { ocmPlugin, OcmPage, OcmIcon } from './plugin';
 export { ClusterAvailableResourceCard } from './components/ClusterAvailableResourcesCard';
 export {
   ClusterContextProvider,
   useCluster,
 } from './components/ClusterContext';
 export { ClusterInfoCard } from './components/ClusterInfoCard';
-export { default as OcmIcon } from '@material-ui/icons/Storage';

plugins/ocm/src/plugin.ts

@@ -3,9 +3,12 @@ import {
   createApiFactory,
   createPlugin,
   createRoutableExtension,
+  IconComponent,
   identityApiRef,
 } from '@backstage/core-plugin-api';
 
+import HubOutlinedIcon from '@mui/icons-material/HubOutlined';
+
 import { OcmApiClient, OcmApiRef } from './api';
 import { rootRouteRef } from './routes';
 
@@ -35,3 +38,5 @@ export const OcmPage = ocmPlugin.provide(
     mountPoint: rootRouteRef,
   }),
 );
+
+export const OcmIcon = HubOutlinedIcon as IconComponent;

plugins/shared-react/src/components/common/Status.tsx

@@ -9,25 +9,28 @@ import {
   StatusWarning,
 } from '@backstage/core-components';
 
-import { makeStyles } from '@material-ui/core';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import OffIcon from '@mui/icons-material/DoNotDisturbOnOutlined';
 import UnknownIcon from '@mui/icons-material/HelpOutline';
 import AngleDoubleRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
 import BanIcon from '@mui/icons-material/NotInterestedOutlined';
 import PauseIcon from '@mui/icons-material/PauseCircleOutlineOutlined';
+import cx from 'classnames';
 
 import { StatusIconAndText } from './StatusIconAndText';
 
-const useStyles = makeStyles({
-  iconStyles: {
-    height: '0.8em',
-    width: '0.8em',
-    top: '0.125em',
-    position: 'relative',
-    flexShrink: 0,
-    marginRight: '8px',
-  },
-});
+const useStyles = makeStyles<Theme>(theme =>
+  createStyles({
+    iconStyles: {
+      height: '0.8em',
+      width: '0.8em',
+      top: '0.125em',
+      position: 'relative',
+      flexShrink: 0,
+      marginRight: theme.spacing(0.6),
+    },
+  }),
+);
 
 const DASH = '-';
 
@@ -59,37 +62,43 @@ const useStatusStyles = makeStyles(theme => ({
   },
 }));
 
-const StatusIcon = ({ statusKey }: { statusKey: StatusClassKey }) => {
+const StatusIcon = ({
+  statusKey,
+  className,
+}: {
+  statusKey: StatusClassKey;
+  className?: string;
+}) => {
   const statusStyles = useStatusStyles();
 
   switch (statusKey) {
     case 'ok':
       return (
-        <g className={statusStyles.success}>
+        <g className={cx(statusStyles.success, className)}>
           <StatusOK />{' '}
         </g>
       );
     case 'pending':
       return (
-        <g className={statusStyles.pending}>
+        <g className={cx(statusStyles.pending, className)}>
           <StatusPending />{' '}
         </g>
       );
     case 'running':
       return (
-        <g className={statusStyles.running}>
+        <g className={cx(statusStyles.running, className)}>
           <StatusRunning />{' '}
         </g>
       );
     case 'warning':
       return (
-        <g className={statusStyles.warning}>
+        <g className={cx(statusStyles.warning, className)}>
           <StatusWarning />{' '}
         </g>
       );
     case 'error':
       return (
-        <g className={statusStyles.error}>
+        <g className={cx(statusStyles.error, className)}>
           <StatusError />{' '}
         </g>
       );
@@ -103,6 +112,7 @@ const StatusIcon = ({ statusKey }: { statusKey: StatusClassKey }) => {
  * @param {string} status - type of status to be displayed
  * @param {boolean} [iconOnly] - (optional) if true, only displays icon
  * @param {string} [className] - (optional) additional class name for the component
+ * @param {string} [displayStatusText] - (optional) use a different text to display the status
 
  * @example
  * ```tsx
@@ -114,17 +124,24 @@ export const Status = ({
   iconOnly,
   className,
   displayStatusText,
+  dataTestId,
+  iconStyles,
+  iconClassName,
 }: {
   status: string | null;
   displayStatusText?: string;
   iconOnly?: boolean;
   className?: string;
+  dataTestId?: string;
+  iconStyles?: React.CSSProperties;
+  iconClassName?: string;
 }): React.ReactElement => {
   const classes = useStyles();
   const statusProps = {
     title: displayStatusText || status || '',
     iconOnly,
     className,
+    dataTestId,
   };
 
   switch (status) {
@@ -135,12 +152,13 @@ export const Status = ({
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<StatusIcon statusKey="pending" />}
+          icon={<StatusIcon statusKey="pending" className={iconClassName} />}
         />
       );
 
     case 'In Progress':
     case 'Progress':
+    case 'Progressing':
     case 'Installing':
     case 'InstallReady':
     case 'Replacing':
@@ -151,7 +169,7 @@ export const Status = ({
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<StatusIcon statusKey="running" />}
+          icon={<StatusIcon statusKey="running" className={iconClassName} />}
         />
       );
 
@@ -166,7 +184,7 @@ export const Status = ({
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<BanIcon className={classes.iconStyles} />}
+          icon={<BanIcon className={classes.iconStyles} style={iconStyles} />}
         />
       );
 
@@ -175,58 +193,67 @@ export const Status = ({
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<StatusIcon statusKey="warning" />}
+          icon={<StatusIcon statusKey="warning" className={iconClassName} />}
         />
       );
 
     case 'ImagePullBackOff':
     case 'Error':
     case 'Failed':
+    case 'Failure':
     case 'CrashLoopBackOff':
     case 'ErrImagePull':
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<StatusIcon statusKey="error" />}
+          icon={<StatusIcon statusKey="error" className={iconClassName} />}
         />
       );
 
     case 'Completed':
     case 'Succeeded':
+    case 'Synced':
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<StatusIcon statusKey="ok" />}
+          icon={<StatusIcon statusKey="ok" className={iconClassName} />}
         />
       );
 
     case 'Skipped':
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<AngleDoubleRightIcon className={classes.iconStyles} />}
+          icon={
+            <AngleDoubleRightIcon
+              className={classes.iconStyles}
+              style={iconStyles}
+            />
+          }
         />
       );
     case 'Paused':
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<PauseIcon className={classes.iconStyles} />}
+          icon={<PauseIcon className={classes.iconStyles} style={iconStyles} />}
         />
       );
     case 'Stopped':
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<OffIcon className={classes.iconStyles} />}
+          icon={<OffIcon className={classes.iconStyles} style={iconStyles} />}
         />
       );
 
     case 'Unknown':
       return (
         <StatusIconAndText
           {...statusProps}
-          icon={<UnknownIcon className={classes.iconStyles} />}
+          icon={
+            <UnknownIcon className={classes.iconStyles} style={iconStyles} />
+          }
         />
       );
 

plugins/shared-react/src/components/common/StatusIconAndText.tsx

@@ -6,14 +6,6 @@ import CamelCaseWrap from './CamelCaseWrap';
 
 import './StatusIconAndText.css';
 
-type StatusIconAndTextProps = {
-  title: string;
-  iconOnly?: boolean;
-  className?: string;
-  icon: React.ReactElement;
-  spin?: boolean;
-};
-
 const DASH = '-';
 
 export const StatusIconAndText = ({
@@ -22,7 +14,15 @@ export const StatusIconAndText = ({
   spin,
   iconOnly,
   className,
-}: StatusIconAndTextProps): React.ReactElement => {
+  dataTestId,
+}: {
+  title: string;
+  iconOnly?: boolean;
+  className?: string;
+  icon: React.ReactElement;
+  spin?: boolean;
+  dataTestId?: string;
+}): React.ReactElement => {
   if (!title) {
     return <>{DASH}</>;
   }
@@ -31,7 +31,7 @@ export const StatusIconAndText = ({
     return (
       <>
         {React.cloneElement(icon, {
-          'data-testid': `icon-only-${title}`,
+          'data-testid': dataTestId ?? `icon-only-${title}`,
           className: icon.props.className,
         })}
       </>
@@ -41,7 +41,7 @@ export const StatusIconAndText = ({
   return (
     <span
       className={classNames('bs-shared-icon-and-text', className)}
-      data-testid={`icon-with-title-${title}`}
+      data-testid={dataTestId ?? `icon-with-title-${title}`}
       title={title}
     >
       {React.cloneElement(icon, {