Skip to content

Commit f6231f3

Browse files
debsmita1debsmita1
committed
[ocm] : replace usage of pf-icons to mui icons
1 parent e7d3470 commit f6231f3

File tree

6 files changed

+86
-45
lines changed

6 files changed

+86
-45
lines changed

‎plugins/ocm/README.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -193,13 +193,13 @@ catalog:
193193

194194
```tsx title="packages/app/src/App.tsx"
195195
/* highlight-add-next-line */
196-
import { OcmPage } from '@janus-idp/backstage-plugin-ocm';
196+
import { OcmIcon, OcmPage } from '@janus-idp/backstage-plugin-ocm';
197197
198198
const routes = (
199199
<FlatRoutes>
200200
{/* ... */}
201201
{/* highlight-add-next-line */}
202-
<Route path="/ocm" element={<OcmPage logo={<Logo />} />} />
202+
<Route path="/ocm" element={<OcmPage logo={<OcmIcon />} />} />
203203
</FlatRoutes>
204204
);
205205
```
@@ -208,15 +208,19 @@ catalog:
208208

209209
```tsx title="packages/app/src/components/Root/Root.tsx"
210210
/* highlight-add-next-line */
211-
import StorageIcon from '@material-ui/icons/Storage';
211+
import StorageIcon from '@mui/icons-material/Storage';
212212
213213
export const Root = ({ children }: PropsWithChildren<{}>) => (
214214
<SidebarPage>
215215
<Sidebar>
216216
<SidebarGroup label="Menu" icon={<MenuIcon />}>
217217
{/* ... */}
218218
{/* highlight-add-next-line */}
219-
<SidebarItem icon={StorageIcon} to="ocm" text="Clusters" />
219+
<SidebarItem
220+
icon={StorageIcon as IconComponent}
221+
to="ocm"
222+
text="Clusters"
223+
/>
220224
</SidebarGroup>
221225
{/* ... */}
222226
</Sidebar>

‎plugins/ocm/dev/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
ClusterAvailableResourceCard,
1919
ClusterContextProvider,
2020
ClusterInfoCard,
21+
OcmIcon,
2122
} from '../src';
2223
import { OcmPage, ocmPlugin } from '../src/plugin';
2324

@@ -87,8 +88,9 @@ createDevApp()
8788
.addThemes(getAllThemes())
8889
.addPage({
8990
element: <OcmPage />,
90-
title: 'Root Page',
91+
title: 'Clusters',
9192
path: '/ocm',
93+
icon: OcmIcon,
9294
})
9395
.addPage({
9496
path: '/catalog/:kind/:namespace/:name',

‎plugins/ocm/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
"@material-ui/core": "^4.9.13",
4747
"@material-ui/icons": "^4.11.3",
4848
"@material-ui/lab": "^4.0.0-alpha.45",
49+
"@mui/icons-material": "^6.0.1",
4950
"@patternfly/patternfly": "^5.1.0",
50-
"@patternfly/react-icons": "^5.1.1",
5151
"react-use": "^17.4.0",
5252
"semver": "^7.5.4"
5353
},

‎plugins/ocm/src/components/common.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from '@backstage/core-components';
88

99
import { Button, Grid, makeStyles, Tooltip } from '@material-ui/core';
10-
import { ArrowCircleUpIcon } from '@patternfly/react-icons';
10+
import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
1111

1212
import { ClusterStatus } from '@janus-idp/backstage-plugin-ocm-common';
1313

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

Lines changed: 62 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,28 @@ import {
99
StatusWarning,
1010
} from '@backstage/core-components';
1111

12-
import { makeStyles } from '@material-ui/core';
12+
import { createStyles, makeStyles, Theme } from '@material-ui/core';
1313
import OffIcon from '@mui/icons-material/DoNotDisturbOnOutlined';
1414
import UnknownIcon from '@mui/icons-material/HelpOutline';
1515
import AngleDoubleRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
1616
import BanIcon from '@mui/icons-material/NotInterestedOutlined';
1717
import PauseIcon from '@mui/icons-material/PauseCircleOutlineOutlined';
18+
import cx from 'classnames';
1819

1920
import { StatusIconAndText } from './StatusIconAndText';
2021

21-
const useStyles = makeStyles({
22-
iconStyles: {
23-
height: '0.8em',
24-
width: '0.8em',
25-
top: '0.125em',
26-
position: 'relative',
27-
flexShrink: 0,
28-
marginRight: '8px',
29-
},
30-
});
22+
const useStyles = makeStyles<Theme>(theme =>
23+
createStyles({
24+
iconStyles: {
25+
height: '0.8em',
26+
width: '0.8em',
27+
top: '0.125em',
28+
position: 'relative',
29+
flexShrink: 0,
30+
marginRight: theme.spacing(0.6),
31+
},
32+
}),
33+
);
3134

3235
const DASH = '-';
3336

@@ -59,37 +62,43 @@ const useStatusStyles = makeStyles(theme => ({
5962
},
6063
}));
6164

62-
const StatusIcon = ({ statusKey }: { statusKey: StatusClassKey }) => {
65+
const StatusIcon = ({
66+
statusKey,
67+
classNames,
68+
}: {
69+
statusKey: StatusClassKey;
70+
classNames: string;
71+
}) => {
6372
const statusStyles = useStatusStyles();
6473

6574
switch (statusKey) {
6675
case 'ok':
6776
return (
68-
<g className={statusStyles.success}>
77+
<g className={cx(statusStyles.success, classNames)}>
6978
<StatusOK />{' '}
7079
</g>
7180
);
7281
case 'pending':
7382
return (
74-
<g className={statusStyles.pending}>
83+
<g className={cx(statusStyles.pending, classNames)}>
7584
<StatusPending />{' '}
7685
</g>
7786
);
7887
case 'running':
7988
return (
80-
<g className={statusStyles.running}>
89+
<g className={cx(statusStyles.running, classNames)}>
8190
<StatusRunning />{' '}
8291
</g>
8392
);
8493
case 'warning':
8594
return (
86-
<g className={statusStyles.warning}>
95+
<g className={cx(statusStyles.warning, classNames)}>
8796
<StatusWarning />{' '}
8897
</g>
8998
);
9099
case 'error':
91100
return (
92-
<g className={statusStyles.error}>
101+
<g className={cx(statusStyles.error, classNames)}>
93102
<StatusError />{' '}
94103
</g>
95104
);
@@ -103,6 +112,7 @@ const StatusIcon = ({ statusKey }: { statusKey: StatusClassKey }) => {
103112
* @param {string} status - type of status to be displayed
104113
* @param {boolean} [iconOnly] - (optional) if true, only displays icon
105114
* @param {string} [className] - (optional) additional class name for the component
115+
* @param {string} [displayStatusText] - (optional) use a different text to display the status
106116
107117
* @example
108118
* ```tsx
@@ -114,17 +124,24 @@ export const Status = ({
114124
iconOnly,
115125
className,
116126
displayStatusText,
127+
dataTestId,
128+
iconStyles,
129+
iconClassNames,
117130
}: {
118131
status: string | null;
119132
displayStatusText?: string;
120133
iconOnly?: boolean;
121134
className?: string;
135+
dataTestId?: string;
136+
iconStyles?: React.CSSProperties;
137+
iconClassNames?: string;
122138
}): React.ReactElement => {
123139
const classes = useStyles();
124140
const statusProps = {
125141
title: displayStatusText || status || '',
126142
iconOnly,
127143
className,
144+
dataTestId,
128145
};
129146

130147
switch (status) {
@@ -135,12 +152,15 @@ export const Status = ({
135152
return (
136153
<StatusIconAndText
137154
{...statusProps}
138-
icon={<StatusIcon statusKey="pending" />}
155+
icon={
156+
<StatusIcon statusKey="pending" classNames={iconClassNames || ''} />
157+
}
139158
/>
140159
);
141160

142161
case 'In Progress':
143162
case 'Progress':
163+
case 'Progressing':
144164
case 'Installing':
145165
case 'InstallReady':
146166
case 'Replacing':
@@ -151,7 +171,9 @@ export const Status = ({
151171
return (
152172
<StatusIconAndText
153173
{...statusProps}
154-
icon={<StatusIcon statusKey="running" />}
174+
icon={
175+
<StatusIcon statusKey="running" classNames={iconClassNames || ''} />
176+
}
155177
/>
156178
);
157179

@@ -166,7 +188,7 @@ export const Status = ({
166188
return (
167189
<StatusIconAndText
168190
{...statusProps}
169-
icon={<BanIcon className={classes.iconStyles} />}
191+
icon={<BanIcon className={classes.iconStyles} style={iconStyles} />}
170192
/>
171193
);
172194

@@ -175,58 +197,71 @@ export const Status = ({
175197
return (
176198
<StatusIconAndText
177199
{...statusProps}
178-
icon={<StatusIcon statusKey="warning" />}
200+
icon={
201+
<StatusIcon statusKey="warning" classNames={iconClassNames || ''} />
202+
}
179203
/>
180204
);
181205

182206
case 'ImagePullBackOff':
183207
case 'Error':
184208
case 'Failed':
209+
case 'Failure':
185210
case 'CrashLoopBackOff':
186211
case 'ErrImagePull':
187212
return (
188213
<StatusIconAndText
189214
{...statusProps}
190-
icon={<StatusIcon statusKey="error" />}
215+
icon={
216+
<StatusIcon statusKey="error" classNames={iconClassNames || ''} />
217+
}
191218
/>
192219
);
193220

194221
case 'Completed':
195222
case 'Succeeded':
223+
case 'Synced':
196224
return (
197225
<StatusIconAndText
198226
{...statusProps}
199-
icon={<StatusIcon statusKey="ok" />}
227+
icon={<StatusIcon statusKey="ok" classNames={iconClassNames || ''} />}
200228
/>
201229
);
202230

203231
case 'Skipped':
204232
return (
205233
<StatusIconAndText
206234
{...statusProps}
207-
icon={<AngleDoubleRightIcon className={classes.iconStyles} />}
235+
icon={
236+
<AngleDoubleRightIcon
237+
className={classes.iconStyles}
238+
style={iconStyles}
239+
/>
240+
}
208241
/>
209242
);
210243
case 'Paused':
211244
return (
212245
<StatusIconAndText
213246
{...statusProps}
214-
icon={<PauseIcon className={classes.iconStyles} />}
247+
icon={<PauseIcon className={classes.iconStyles} style={iconStyles} />}
215248
/>
216249
);
217250
case 'Stopped':
218251
return (
219252
<StatusIconAndText
220253
{...statusProps}
221-
icon={<OffIcon className={classes.iconStyles} />}
254+
icon={<OffIcon className={classes.iconStyles} style={iconStyles} />}
222255
/>
223256
);
224257

225258
case 'Unknown':
226259
return (
227260
<StatusIconAndText
228261
{...statusProps}
229-
icon={<UnknownIcon className={classes.iconStyles} />}
262+
icon={
263+
<UnknownIcon className={classes.iconStyles} style={iconStyles} />
264+
}
230265
/>
231266
);
232267

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@ import CamelCaseWrap from './CamelCaseWrap';
66

77
import './StatusIconAndText.css';
88

9-
type StatusIconAndTextProps = {
10-
title: string;
11-
iconOnly?: boolean;
12-
className?: string;
13-
icon: React.ReactElement;
14-
spin?: boolean;
15-
};
16-
179
const DASH = '-';
1810

1911
export const StatusIconAndText = ({
@@ -22,7 +14,15 @@ export const StatusIconAndText = ({
2214
spin,
2315
iconOnly,
2416
className,
25-
}: StatusIconAndTextProps): React.ReactElement => {
17+
dataTestId,
18+
}: {
19+
title: string;
20+
iconOnly?: boolean;
21+
className?: string;
22+
icon: React.ReactElement;
23+
spin?: boolean;
24+
dataTestId?: string;
25+
}): React.ReactElement => {
2626
if (!title) {
2727
return <>{DASH}</>;
2828
}
@@ -31,7 +31,7 @@ export const StatusIconAndText = ({
3131
return (
3232
<>
3333
{React.cloneElement(icon, {
34-
'data-testid': `icon-only-${title}`,
34+
'data-testid': dataTestId ? dataTestId : `icon-only-${title}`,
3535
className: icon.props.className,
3636
})}
3737
</>
@@ -41,7 +41,7 @@ export const StatusIconAndText = ({
4141
return (
4242
<span
4343
className={classNames('bs-shared-icon-and-text', className)}
44-
data-testid={`icon-with-title-${title}`}
44+
data-testid={dataTestId ? dataTestId : `icon-with-title-${title}`}
4545
title={title}
4646
>
4747
{React.cloneElement(icon, {

0 commit comments

Comments
 (0)