refactor: update UI Kit Icon component [WEB-1699]

webui/react/src/components/ActionSheet.module.scss

@@ -29,12 +29,10 @@
     color: var(--theme-float-on);
     display: flex;
     flex-shrink: 0;
+    gap: 16px;
     height: var(--nav-bottom-bar-height);
     padding: 0 16px;
 
-    .icon {
-      padding-right: 16px;
-    }
     .label {
       font-size: 14px;
     }

webui/react/src/components/ActionSheet.tsx

@@ -42,11 +42,9 @@ const ActionSheet: React.FC<Props> = ({ onCancel, ...props }: Props) => {
       return (
         <Link className={css.item} key={action.label} path={action.path} {...action}>
           {action.icon && typeof action.icon === 'string' ? (
-            <div className={css.icon}>
-              <Icon decorative name={action.icon} size="large" />
-            </div>
+            <Icon decorative name={action.icon} size="large" />
           ) : (
-            <div className={css.icon}>{action.icon}</div>
+            action.icon
           )}
           {!action.icon && <span className={css.spacer} />}
           <div className={css.label}>{action.label}</div>
@@ -76,9 +74,7 @@ const ActionSheet: React.FC<Props> = ({ onCancel, ...props }: Props) => {
           </div>
           {!props.hideCancel && (
             <Link className={css.item} key="cancel" onClick={handleCancelClick}>
-              <div className={css.icon}>
-                <Icon decorative name="error" size="large" />
-              </div>
+              <Icon decorative name="error" size="large" />
               <div className={css.label}>Cancel</div>
             </Link>
           )}

webui/react/src/components/AuthToken.tsx

@@ -1,7 +1,7 @@
-import { CopyOutlined } from '@ant-design/icons';
 import React, { useCallback } from 'react';
 
 import Button from 'components/kit/Button';
+import Icon from 'components/kit/Icon';
 import Message from 'components/kit/Message';
 import { makeToast } from 'components/kit/Toast';
 import { globalStorage } from 'globalStorage';
@@ -29,7 +29,11 @@ const AuthToken: React.FC = () => {
   return (
     <Message
       action={
-        <Button icon={<CopyOutlined />} key="copy" type="primary" onClick={handleCopyToClipboard}>
+        <Button
+          icon={<Icon decorative name="clipboard" />}
+          key="copy"
+          type="primary"
+          onClick={handleCopyToClipboard}>
           Copy token to clipboard
         </Button>
       }

webui/react/src/components/DeterminedAuth.tsx

@@ -115,7 +115,7 @@ const DeterminedAuth: React.FC<Props> = ({ canceler }: Props) => {
         <Input
           autoFocus
           placeholder="username"
-          prefix={<Icon name="user-small" size="small" title="Username" />}
+          prefix={<Icon name="user" size="small" title="Username" />}
         />
       </Form.Item>
       <Form.Item name="password">

webui/react/src/components/ExperimentIcons.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+
+import Icon, { Props as IconProps, IconSize } from 'components/kit/Icon';
+import { stateToLabel } from 'constants/states';
+import { CompoundRunState, JobState, RunState } from 'types';
+
+interface Props {
+  showTooltip?: boolean;
+  state: CompoundRunState;
+  size?: IconSize;
+  backgroundColor?: React.CSSProperties['backgroundColor'];
+  opacity?: React.CSSProperties['opacity'];
+}
+
+const ExperimentIcons: React.FC<Props> = ({
+  state,
+  showTooltip = true,
+  size,
+  backgroundColor,
+  opacity,
+}) => {
+  const iconProps: IconProps = useMemo(() => {
+    switch (state) {
+      case JobState.SCHEDULED:
+      case JobState.SCHEDULEDBACKFILLED:
+      case JobState.QUEUED:
+      case RunState.Queued:
+        return { backgroundColor, name: 'queued', opacity, title: stateToLabel(state) };
+      case RunState.Starting:
+      case RunState.Pulling:
+        return { name: 'spin-bowtie', title: stateToLabel(state) };
+      case RunState.Running:
+        return { name: 'spin-shadow', title: stateToLabel(state) };
+      case RunState.Paused:
+        return { color: 'cancel', name: 'pause', title: 'Paused' };
+      case RunState.Completed:
+        return { color: 'success', name: 'checkmark', title: 'Completed' };
+      case RunState.Error:
+      case RunState.Deleted:
+      case RunState.Deleting:
+      case RunState.DeleteFailed:
+        return { color: 'error', name: 'error', title: 'Error' };
+      case RunState.Active:
+      case RunState.Unspecified:
+      case JobState.UNSPECIFIED:
+        return { name: 'active', title: stateToLabel(state) };
+      default:
+        return { color: 'cancel', name: 'cancelled', title: 'Stopped' };
+    }
+  }, [backgroundColor, opacity, state]);
+
+  return <Icon showTooltip={showTooltip} size={size} {...iconProps} />;
+};
+
+export default ExperimentIcons;