From fef0f60d17f2622e5d8712c37d65d44a5d33a7f4 Mon Sep 17 00:00:00 2001 From: Debsmita Santra Date: Mon, 21 Oct 2024 02:41:27 +0530 Subject: [PATCH] fix(ocm): replace usage of pf-icons to mui icons (#2275) --- .changeset/green-trees-fly.md | 5 ++ .changeset/hip-walls-kiss.md | 5 ++ plugins/ocm/README.md | 6 +- plugins/ocm/dev/index.tsx | 5 +- plugins/ocm/package.json | 2 +- plugins/ocm/src/components/common.tsx | 2 +- plugins/ocm/src/index.ts | 3 +- plugins/ocm/src/plugin.ts | 5 ++ .../src/components/common/Status.tsx | 81 ++++++++++++------- .../components/common/StatusIconAndText.tsx | 22 ++--- yarn.lock | 7 ++ 11 files changed, 96 insertions(+), 47 deletions(-) create mode 100644 .changeset/green-trees-fly.md create mode 100644 .changeset/hip-walls-kiss.md diff --git a/.changeset/green-trees-fly.md b/.changeset/green-trees-fly.md new file mode 100644 index 0000000000..4e2b9d306d --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.changeset/hip-walls-kiss.md b/.changeset/hip-walls-kiss.md new file mode 100644 index 0000000000..1d54c2ebbd --- /dev/null +++ b/.changeset/hip-walls-kiss.md @@ -0,0 +1,5 @@ +--- +"@janus-idp/backstage-plugin-ocm": minor +--- + +replaced pf-icons with mui icons diff --git a/plugins/ocm/README.md b/plugins/ocm/README.md index f8c828bd84..84bfb22728 100644 --- a/plugins/ocm/README.md +++ b/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,7 +208,7 @@ 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<{}>) => ( @@ -216,7 +216,7 @@ catalog: }> {/* ... */} {/* highlight-add-next-line */} - + {/* ... */} diff --git a/plugins/ocm/dev/index.tsx b/plugins/ocm/dev/index.tsx index 9f5c49ed97..fa4e9be5e8 100644 --- a/plugins/ocm/dev/index.tsx +++ b/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: , - title: 'Root Page', + title: 'Clusters', path: '/ocm', + icon: OcmIcon, }) .addPage({ path: '/catalog/:kind/:namespace/:name', diff --git a/plugins/ocm/package.json b/plugins/ocm/package.json index 95ac6b714a..65f1520514 100644 --- a/plugins/ocm/package.json +++ b/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" }, diff --git a/plugins/ocm/src/components/common.tsx b/plugins/ocm/src/components/common.tsx index 7114691f03..569361d069 100644 --- a/plugins/ocm/src/components/common.tsx +++ b/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'; diff --git a/plugins/ocm/src/index.ts b/plugins/ocm/src/index.ts index cd707f0892..9db71ab748 100644 --- a/plugins/ocm/src/index.ts +++ b/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'; diff --git a/plugins/ocm/src/plugin.ts b/plugins/ocm/src/plugin.ts index 164e20ffe2..9933ae048f 100644 --- a/plugins/ocm/src/plugin.ts +++ b/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; diff --git a/plugins/shared-react/src/components/common/Status.tsx b/plugins/shared-react/src/components/common/Status.tsx index c9fca69acf..c0cbd1b218 100644 --- a/plugins/shared-react/src/components/common/Status.tsx +++ b/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 => + 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 ( - + {' '} ); case 'pending': return ( - + {' '} ); case 'running': return ( - + {' '} ); case 'warning': return ( - + {' '} ); case 'error': return ( - + {' '} ); @@ -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 ( } + icon={} /> ); case 'In Progress': case 'Progress': + case 'Progressing': case 'Installing': case 'InstallReady': case 'Replacing': @@ -151,7 +169,7 @@ export const Status = ({ return ( } + icon={} /> ); @@ -166,7 +184,7 @@ export const Status = ({ return ( } + icon={} /> ); @@ -175,28 +193,30 @@ export const Status = ({ return ( } + icon={} /> ); case 'ImagePullBackOff': case 'Error': case 'Failed': + case 'Failure': case 'CrashLoopBackOff': case 'ErrImagePull': return ( } + icon={} /> ); case 'Completed': case 'Succeeded': + case 'Synced': return ( } + icon={} /> ); @@ -204,21 +224,26 @@ export const Status = ({ return ( } + icon={ + + } /> ); case 'Paused': return ( } + icon={} /> ); case 'Stopped': return ( } + icon={} /> ); @@ -226,7 +251,9 @@ export const Status = ({ return ( } + icon={ + + } /> ); diff --git a/plugins/shared-react/src/components/common/StatusIconAndText.tsx b/plugins/shared-react/src/components/common/StatusIconAndText.tsx index 647afba846..36573aff83 100644 --- a/plugins/shared-react/src/components/common/StatusIconAndText.tsx +++ b/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 ( {React.cloneElement(icon, { diff --git a/yarn.lock b/yarn.lock index e976eac23c..9077629647 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7352,6 +7352,13 @@ dependencies: "@babel/runtime" "^7.23.9" +"@mui/icons-material@^5.16.4": + version "5.16.7" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.7.tgz#e27f901af792065efc9f3d75d74a66af7529a10a" + integrity sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/material@^5.12.2", "@mui/material@^5.14.18", "@mui/material@^5.15.16": version "5.15.17" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.17.tgz#1e30bacc940573813cc418aebd4484708a407ba6"