fix(topology): remove usage of pf react icons (#1803)

janus-idp · Sep 24, 2024 · 74c31d0 · 74c31d0
1 parent 19c5d78
commit 74c31d0
Show file tree

Hide file tree

Showing 51 changed files with 609 additions and 597 deletions.
diff --git a/plugins/shared-react/package.json b/plugins/shared-react/package.json
@@ -36,7 +36,10 @@
     "@backstage/core-plugin-api": "^1.9.3",
     "@backstage/plugin-kubernetes-common": "0.8.0",
     "@backstage/plugin-kubernetes-react": "0.4.0",
+    "@backstage/core-components": "^0.14.9",
     "@kubernetes/client-node": "^0.20.0",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "5.15.17",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "file-saver": "^2.0.5",

diff --git a/plugins/shared-react/src/components/common/Status.tsx b/plugins/shared-react/src/components/common/Status.tsx
@@ -0,0 +1,236 @@
+import React from 'react';
+
+import {
+  StatusClassKey,
+  StatusError,
+  StatusOK,
+  StatusPending,
+  StatusRunning,
+  StatusWarning,
+} from '@backstage/core-components';
+
+import { makeStyles } 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 { StatusIconAndText } from './StatusIconAndText';
+
+const useStyles = makeStyles({
+  iconStyles: {
+    height: '0.8em',
+    width: '0.8em',
+    top: '0.125em',
+    position: 'relative',
+    flexShrink: 0,
+    marginRight: '8px',
+  },
+});
+
+const DASH = '-';
+
+const useStatusStyles = makeStyles(theme => ({
+  success: {
+    '& svg': {
+      fill: theme.palette.status.ok,
+    },
+  },
+  running: {
+    '& svg': {
+      fill: theme.palette.status.running,
+    },
+  },
+  pending: {
+    '& svg': {
+      fill: theme.palette.status.pending,
+    },
+  },
+  warning: {
+    '& svg': {
+      fill: theme.palette.status.warning,
+    },
+  },
+  error: {
+    '& svg': {
+      fill: theme.palette.status.error,
+    },
+  },
+}));
+
+const StatusIcon = ({ statusKey }: { statusKey: StatusClassKey }) => {
+  const statusStyles = useStatusStyles();
+
+  switch (statusKey) {
+    case 'ok':
+      return (
+        <g className={statusStyles.success}>
+          <StatusOK />{' '}
+        </g>
+      );
+    case 'pending':
+      return (
+        <g className={statusStyles.pending}>
+          <StatusPending />{' '}
+        </g>
+      );
+    case 'running':
+      return (
+        <g className={statusStyles.running}>
+          <StatusRunning />{' '}
+        </g>
+      );
+    case 'warning':
+      return (
+        <g className={statusStyles.warning}>
+          <StatusWarning />{' '}
+        </g>
+      );
+    case 'error':
+      return (
+        <g className={statusStyles.error}>
+          <StatusError />{' '}
+        </g>
+      );
+    default:
+      return null;
+  }
+};
+
+/**
+ * Component for displaying a status message
+ * @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
+
+ * @example
+ * ```tsx
+ * <Status status='Warning' />
+ * ```
+ */
+export const Status = ({
+  status,
+  iconOnly,
+  className,
+  displayStatusText,
+}: {
+  status: string | null;
+  displayStatusText?: string;
+  iconOnly?: boolean;
+  className?: string;
+}): React.ReactElement => {
+  const classes = useStyles();
+  const statusProps = {
+    title: displayStatusText || status || '',
+    iconOnly,
+    className,
+  };
+
+  switch (status) {
+    case 'New':
+    case 'Idle':
+    case 'Pending':
+    case 'PipelineNotStarted':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<StatusIcon statusKey="pending" />}
+        />
+      );
+
+    case 'In Progress':
+    case 'Progress':
+    case 'Installing':
+    case 'InstallReady':
+    case 'Replacing':
+    case 'Running':
+    case 'Updating':
+    case 'Upgrading':
+    case 'PendingInstall':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<StatusIcon statusKey="running" />}
+        />
+      );
+
+    case 'Cancelled':
+    case 'Deleting':
+    case 'Expired':
+    case 'Not Ready':
+    case 'Cancelling':
+    case 'Terminating':
+    case 'Superseded':
+    case 'Uninstalling':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<BanIcon className={classes.iconStyles} />}
+        />
+      );
+
+    case 'Warning':
+    case 'RequiresApproval':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<StatusIcon statusKey="warning" />}
+        />
+      );
+
+    case 'ImagePullBackOff':
+    case 'Error':
+    case 'Failed':
+    case 'CrashLoopBackOff':
+    case 'ErrImagePull':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<StatusIcon statusKey="error" />}
+        />
+      );
+
+    case 'Completed':
+    case 'Succeeded':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<StatusIcon statusKey="ok" />}
+        />
+      );
+
+    case 'Skipped':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<AngleDoubleRightIcon className={classes.iconStyles} />}
+        />
+      );
+    case 'Paused':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<PauseIcon className={classes.iconStyles} />}
+        />
+      );
+    case 'Stopped':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<OffIcon className={classes.iconStyles} />}
+        />
+      );
+
+    case 'Unknown':
+      return (
+        <StatusIconAndText
+          {...statusProps}
+          icon={<UnknownIcon className={classes.iconStyles} />}
+        />
+      );
+
+    default:
+      return <>{status || DASH}</>;
+  }
+};
diff --git a/plugins/shared-react/src/components/index.ts b/plugins/shared-react/src/components/index.ts
@@ -12,3 +12,4 @@ export {
   DrawerContext,
   useDrawer,
 } from './common/DrawerContext';
+export { Status } from './common/Status';
diff --git a/plugins/tekton/package.json b/plugins/tekton/package.json
@@ -52,10 +52,10 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.45",
+    "@mui/icons-material": "5.15.17",
     "@patternfly/patternfly": "^5.1.0",
     "@patternfly/react-charts": "^7.1.1",
     "@patternfly/react-core": "^5.1.2",
-    "@patternfly/react-icons": "^5.1.1",
     "@patternfly/react-tokens": "^5.1.2",
     "@patternfly/react-topology": "^5.1.0",
     "classnames": "^2.3.2",

diff --git a/plugins/tekton/src/components/Icons/CriticalRiskIcon.tsx b/plugins/tekton/src/components/Icons/CriticalRiskIcon.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { global_palette_red_200 as criticalColor } from '@patternfly/react-tokens/dist/js/global_palette_red_200';
+
+const CriticalRiskIcon = ({
+  className,
+  title,
+}: {
+  className: string;
+  title?: string;
+}): React.ReactElement => {
+  return (
+    <svg
+      viewBox="0 0 925 1024"
+      fill={criticalColor.value}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      {title && <title>{title}</title>}
+      <path d="M897.86597,252.24865 L491.105712,7.96742801 C473.40731,-2.65897781 451.300057,-2.65597516 433.611654,7.97743687 L27.1213875,252.245648 C10.3059556,262.353595 0.0163032058,280.549701 0.0163032058,300.182078 L0.0163032058,967.971163 C-1.04266102,1010.81008 49.7156241,1038.89994 85.4314175,1015.41816 C85.4304175,1015.42016 432.807682,798.630273 432.807682,798.630273 C450.891071,787.348287 473.816296,787.342282 491.906685,798.624268 L839.584939,1015.4612 C875.297732,1039.03406 926.031018,1010.73602 924.984054,968.003192 C924.985054,968.005193 924.985054,300.192087 924.985054,300.192087 C924.985054,280.552703 914.688401,262.353595 897.86597,252.24865" />
+    </svg>
+  );
+};
+
+export default CriticalRiskIcon;
diff --git a/plugins/tekton/src/components/Icons/EqualsIcon.tsx b/plugins/tekton/src/components/Icons/EqualsIcon.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { global_palette_gold_400 as mediumColor } from '@patternfly/react-tokens/dist/js/global_palette_gold_400';
+
+const EqualsIcon = ({
+  className,
+  title,
+}: {
+  className: string;
+  title?: string;
+}): React.ReactElement => {
+  return (
+    <svg
+      viewBox="0 -960 960 960"
+      fill={mediumColor.value}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      {title && <title>{title}</title>}
+      <path d="M160-280v-120h640v120H160Zm0-280v-120h640v120H160Z" />
+    </svg>
+  );
+};
+
+export default EqualsIcon;
diff --git a/plugins/tekton/src/components/Icons/LinkToSbomIcon.tsx b/plugins/tekton/src/components/Icons/LinkToSbomIcon.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 import classNames from 'classnames';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -15,18 +14,24 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const LinkToSBomIcon: React.FC<SVGIconProps> = (props): React.ReactElement => {
+const LinkToSBomIcon = ({
+  disabled,
+  dataTestId,
+}: {
+  dataTestId: string;
+  disabled?: boolean;
+}): React.ReactElement => {
   const classes = useStyles();
   return (
     <svg
+      data-testid={dataTestId}
       width="24"
       height="24"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       className={classNames(classes.icon, {
-        [classes.disabledButton]: props.disabled,
+        [classes.disabledButton]: disabled,
       })}
-      {...props}
     >
       <path d="M11 17H7C5.61667 17 4.4375 16.5125 3.4625 15.5375C2.4875 14.5625 2 13.3833 2 12C2 10.6167 2.4875 9.4375 3.4625 8.4625C4.4375 7.4875 5.61667 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5625 7.4875 20.5375 8.4625C21.5125 9.4375 22 10.6167 22 12C22 13.3833 21.5125 14.5625 20.5375 15.5375C19.5625 16.5125 18.3833 17 17 17H13Z" />
     </svg>

diff --git a/plugins/tekton/src/components/Icons/OutputIcon.tsx b/plugins/tekton/src/components/Icons/OutputIcon.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 import classNames from 'classnames';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -15,7 +14,11 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const OutputIcon: React.FC<SVGIconProps> = (props): React.ReactElement => {
+const OutputIcon = ({
+  disabled,
+}: {
+  disabled?: boolean;
+}): React.ReactElement => {
   const classes = useStyles();
   return (
     <svg
@@ -25,9 +28,8 @@ const OutputIcon: React.FC<SVGIconProps> = (props): React.ReactElement => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={classNames(classes.icon, {
-        [classes.disabledButton]: props.disabled,
+        [classes.disabledButton]: disabled,
       })}
-      {...props}
     >
       <path d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V7H5V19ZM7 12V10H17V12H7ZM7 16V14H13V16H7Z" />
     </svg>