Skip to content

Commit

Permalink
fix(ocm): replace usage of pf-icons to mui icons
Browse files Browse the repository at this point in the history
  • Loading branch information
debsmita1 committed Oct 18, 2024
1 parent 3609e4f commit 70672f6
Show file tree
Hide file tree
Showing 10 changed files with 106 additions and 47 deletions.
5 changes: 5 additions & 0 deletions .changeset/hip-walls-kiss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@janus-idp/backstage-plugin-ocm": minor
---

replaced pf-icons with mui icons
6 changes: 3 additions & 3 deletions plugins/ocm/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions plugins/ocm/dev/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion plugins/ocm/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.45",
"@mui/icons-material": "^6.0.1",
"@patternfly/patternfly": "^5.1.0",
"@patternfly/react-icons": "^5.1.1",
"react-use": "^17.4.0",
"semver": "^7.5.4"
},
Expand Down
2 changes: 1 addition & 1 deletion plugins/ocm/src/components/common.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
3 changes: 1 addition & 2 deletions plugins/ocm/src/index.ts
Original file line number Diff line number Diff line change
@@ -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';
5 changes: 5 additions & 0 deletions plugins/ocm/src/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -35,3 +38,5 @@ export const OcmPage = ocmPlugin.provide(
mountPoint: rootRouteRef,
}),
);

export const OcmIcon = HubOutlinedIcon as IconComponent;
89 changes: 62 additions & 27 deletions plugins/shared-react/src/components/common/Status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '-';

Expand Down Expand Up @@ -59,37 +62,43 @@ const useStatusStyles = makeStyles(theme => ({
},
}));

const StatusIcon = ({ statusKey }: { statusKey: StatusClassKey }) => {
const StatusIcon = ({
statusKey,
classNames,
}: {
statusKey: StatusClassKey;
classNames: string;
}) => {
const statusStyles = useStatusStyles();

switch (statusKey) {
case 'ok':
return (
<g className={statusStyles.success}>
<g className={cx(statusStyles.success, classNames)}>
<StatusOK />{' '}
</g>
);
case 'pending':
return (
<g className={statusStyles.pending}>
<g className={cx(statusStyles.pending, classNames)}>
<StatusPending />{' '}
</g>
);
case 'running':
return (
<g className={statusStyles.running}>
<g className={cx(statusStyles.running, classNames)}>
<StatusRunning />{' '}
</g>
);
case 'warning':
return (
<g className={statusStyles.warning}>
<g className={cx(statusStyles.warning, classNames)}>
<StatusWarning />{' '}
</g>
);
case 'error':
return (
<g className={statusStyles.error}>
<g className={cx(statusStyles.error, classNames)}>
<StatusError />{' '}
</g>
);
Expand All @@ -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
Expand All @@ -114,17 +124,24 @@ export const Status = ({
iconOnly,
className,
displayStatusText,
dataTestId,
iconStyles,
iconClassNames,
}: {
status: string | null;
displayStatusText?: string;
iconOnly?: boolean;
className?: string;
dataTestId?: string;
iconStyles?: React.CSSProperties;
iconClassNames?: string;
}): React.ReactElement => {
const classes = useStyles();
const statusProps = {
title: displayStatusText || status || '',
iconOnly,
className,
dataTestId,
};

switch (status) {
Expand All @@ -135,12 +152,15 @@ export const Status = ({
return (
<StatusIconAndText
{...statusProps}
icon={<StatusIcon statusKey="pending" />}
icon={
<StatusIcon statusKey="pending" classNames={iconClassNames || ''} />
}
/>
);

case 'In Progress':
case 'Progress':
case 'Progressing':
case 'Installing':
case 'InstallReady':
case 'Replacing':
Expand All @@ -151,7 +171,9 @@ export const Status = ({
return (
<StatusIconAndText
{...statusProps}
icon={<StatusIcon statusKey="running" />}
icon={
<StatusIcon statusKey="running" classNames={iconClassNames || ''} />
}
/>
);

Expand All @@ -166,7 +188,7 @@ export const Status = ({
return (
<StatusIconAndText
{...statusProps}
icon={<BanIcon className={classes.iconStyles} />}
icon={<BanIcon className={classes.iconStyles} style={iconStyles} />}
/>
);

Expand All @@ -175,58 +197,71 @@ export const Status = ({
return (
<StatusIconAndText
{...statusProps}
icon={<StatusIcon statusKey="warning" />}
icon={
<StatusIcon statusKey="warning" classNames={iconClassNames || ''} />
}
/>
);

case 'ImagePullBackOff':
case 'Error':
case 'Failed':
case 'Failure':
case 'CrashLoopBackOff':
case 'ErrImagePull':
return (
<StatusIconAndText
{...statusProps}
icon={<StatusIcon statusKey="error" />}
icon={
<StatusIcon statusKey="error" classNames={iconClassNames || ''} />
}
/>
);

case 'Completed':
case 'Succeeded':
case 'Synced':
return (
<StatusIconAndText
{...statusProps}
icon={<StatusIcon statusKey="ok" />}
icon={<StatusIcon statusKey="ok" classNames={iconClassNames || ''} />}
/>
);

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} />
}
/>
);

Expand Down
22 changes: 11 additions & 11 deletions plugins/shared-react/src/components/common/StatusIconAndText.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -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}</>;
}
Expand All @@ -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,
})}
</>
Expand All @@ -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, {
Expand Down
Loading

0 comments on commit 70672f6

Please sign in to comment.