chore: update Avatar component in UI kit [WEB-1055, WEB-1734] (determ…

…ined-ai#8178) * replace DynamicIcon * Group * inactive and statusText * fmt * examples * tooltipText * palette * update det-ui * fmt * fix typo
jgongd · Oct 24, 2023 · 47b37eb · 47b37eb
1 parent 4c59393
commit 47b37eb
Show file tree

Hide file tree

Showing 14 changed files with 67 additions and 99 deletions.
diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json
diff --git a/webui/react/package.json b/webui/react/package.json
@@ -42,7 +42,7 @@
     "core-js": "3.32",
     "dayjs": "^1.11.7",
     "debug": "^4.3.4",
-    "determined-ui": "git+https://[email protected]/determined-ai/determined-ui.git#v0.5.2",
+    "determined-ui": "git+https://[email protected]/determined-ai/determined-ui.git#v0.5.4",
     "events": "^3.3.0",
     "fp-ts": "^2.13.1",
     "fuse.js": "^6.6.2",

diff --git a/webui/react/src/components/DynamicIcon.module.scss b/webui/react/src/components/DynamicIcon.module.scss
diff --git a/webui/react/src/components/DynamicIcon.tsx b/webui/react/src/components/DynamicIcon.tsx
diff --git a/webui/react/src/components/ModelRegistry.tsx b/webui/react/src/components/ModelRegistry.tsx
@@ -5,6 +5,7 @@ import {
   SorterResult,
   TablePaginationConfig,
 } from 'antd/lib/table/interface';
+import Avatar from 'determined-ui/Avatar';
 import Button from 'determined-ui/Button';
 import Dropdown, { MenuItem } from 'determined-ui/Dropdown';
 import Icon from 'determined-ui/Icon';
@@ -19,7 +20,6 @@ import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import DeleteModelModal from 'components/DeleteModelModal';
-import DynamicIcon from 'components/DynamicIcon';
 import FilterCounter from 'components/FilterCounter';
 import Link from 'components/Link';
 import { ModelActionMenuKey as MenuKey, ModelActionDropdown } from 'components/ModelActionDropdown';
@@ -338,7 +338,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
       if (!workspace) {
         return (
           <Link disabled>
-            <DynamicIcon name="-" size={24} />
+            <Avatar palette="muted" square text="-" />
           </Link>
         );
       }
@@ -352,7 +352,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
                   ? paths.projectDetails(workspaceId)
                   : paths.workspaceDetails(workspaceId)
               }>
-              <DynamicIcon name={workspace?.name} size={24} />
+              <Avatar palette="muted" square text={workspace?.name} />
             </Link>
           </div>
         </Tooltip>

diff --git a/webui/react/src/components/NavigationSideBar.tsx b/webui/react/src/components/NavigationSideBar.tsx
@@ -1,3 +1,4 @@
+import Avatar from 'determined-ui/Avatar';
 import Button from 'determined-ui/Button';
 import Dropdown, { MenuItem } from 'determined-ui/Dropdown';
 import Icon, { IconName, IconSize } from 'determined-ui/Icon';
@@ -13,7 +14,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
 
-import DynamicIcon from 'components/DynamicIcon';
 import Link, { Props as LinkProps } from 'components/Link';
 import UserSettings from 'components/UserSettings';
 import shortCutSettingsConfig, {
@@ -311,7 +311,7 @@ const NavigationSideBar: React.FC = () => {
                           workspace={workspace}>
                           <li>
                             <NavigationItem
-                              icon={<DynamicIcon name={workspace.name} size={24} />}
+                              icon={<Avatar palette="muted" square text={workspace.name} />}
                               label={workspace.name}
                               path={paths.workspaceDetails(workspace.id)}
                               tooltip={settings.navbarCollapsed}

diff --git a/webui/react/src/components/NavigationTabbar.tsx b/webui/react/src/components/NavigationTabbar.tsx
@@ -1,3 +1,4 @@
+import Avatar from 'determined-ui/Avatar';
 import Icon, { IconName } from 'determined-ui/Icon';
 import { useModal } from 'determined-ui/Modal';
 import Spinner from 'determined-ui/Spinner';
@@ -7,7 +8,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import ActionSheet, { ActionItem } from 'components/ActionSheet';
-import DynamicIcon from 'components/DynamicIcon';
 import Link, { Props as LinkProps } from 'components/Link';
 import UserSettings from 'components/UserSettings';
 import usePermissions from 'hooks/usePermissions';
@@ -100,7 +100,7 @@ const NavigationTabbar: React.FC = () => {
       workspaces.map(
         (workspace) =>
           ({
-            icon: <DynamicIcon name={workspace.name} size={24} style={{ color: 'black' }} />,
+            icon: <Avatar palette="muted" square text={workspace.name} />,
             label: workspace.name,
             onClick: (e: AnyMouseEvent) =>
               handlePathUpdate(e, paths.workspaceDetails(workspace.id)),

diff --git a/webui/react/src/components/ProjectCard.tsx b/webui/react/src/components/ProjectCard.tsx
@@ -1,4 +1,5 @@
 import { Typography } from 'antd';
+import Avatar, { Size } from 'determined-ui/Avatar';
 import Card from 'determined-ui/Card';
 import Icon from 'determined-ui/Icon';
 import Tooltip from 'determined-ui/Tooltip';
@@ -10,7 +11,6 @@ import { Project } from 'types';
 import { nearestCardinalNumber } from 'utils/number';
 import { AnyMouseEvent } from 'utils/routes';
 
-import DynamicIcon from './DynamicIcon';
 import { useProjectActionMenu } from './ProjectActionDropdown';
 import css from './ProjectCard.module.scss';
 
@@ -58,7 +58,7 @@ const ProjectCard: React.FC<Props> = ({
             {showWorkspace && project.workspaceId !== 1 && (
               <Tooltip content={project.workspaceName}>
                 <div className={css.workspaceIcon}>
-                  <DynamicIcon name={project.workspaceName} size={20} />
+                  <Avatar palette="muted" size={Size.Small} square text={project.workspaceName} />
                 </div>
               </Tooltip>
             )}

diff --git a/webui/react/src/components/ResourcePoolBindings.tsx b/webui/react/src/components/ResourcePoolBindings.tsx
@@ -1,10 +1,10 @@
+import Avatar, { Size } from 'determined-ui/Avatar';
 import Button from 'determined-ui/Button';
 import { useModal } from 'determined-ui/Modal';
 import { Loadable } from 'determined-ui/utils/loadable';
 import { useObservable } from 'micro-observables';
 import { useCallback, useEffect, useMemo } from 'react';
 
-import DynamicIcon from 'components/DynamicIcon';
 import Link from 'components/Link';
 import ResourcePoolBindingModalComponent from 'components/ResourcePoolBindingModal';
 import { ColumnDef } from 'components/Table/InteractiveTable';
@@ -39,7 +39,7 @@ const ResourcePoolBindings = ({ pool }: Props): JSX.Element => {
         key: 'workspace',
         render: (_, record) => (
           <div className={css.tableRow}>
-            <DynamicIcon name={record.name} size={40} style={{ borderRadius: '100%' }} />
+            <Avatar palette="muted" size={Size.Medium} square text={record.name} />
             <div>
               <div>
                 <Link path={paths.workspaceDetails(record.id)}>{record.name}</Link>

diff --git a/webui/react/src/components/Table/Table.tsx b/webui/react/src/components/Table/Table.tsx
@@ -1,4 +1,5 @@
 import { Space, Typography } from 'antd';
+import Avatar from 'determined-ui/Avatar';
 import Icon from 'determined-ui/Icon';
 import Spinner from 'determined-ui/Spinner';
 import { StateOfUnion } from 'determined-ui/Theme';
@@ -7,7 +8,6 @@ import React from 'react';
 
 import Badge, { BadgeType } from 'components/Badge';
 import { ConditionalWrapper } from 'components/ConditionalWrapper';
-import DynamicIcon from 'components/DynamicIcon';
 import ExperimentIcons from 'components/ExperimentIcons';
 import HumanReadableNumber from 'components/HumanReadableNumber';
 import Link from 'components/Link';
@@ -192,7 +192,7 @@ export const taskWorkspaceRenderer = (
               ? paths.projectDetails(workspaceId)
               : paths.workspaceDetails(workspaceId)
           }>
-          <DynamicIcon name={workspace?.name} size={24} />
+          <Avatar palette="muted" square text={workspace?.name ?? ''} />
         </Link>
       </div>
     </Tooltip>

diff --git a/webui/react/src/components/UserAvatar.tsx b/webui/react/src/components/UserAvatar.tsx
@@ -4,14 +4,22 @@ import React from 'react';
 import { User } from 'types';
 import { getDisplayName } from 'utils/user';
 
-export interface Props extends Omit<AvatarProps, 'darkLight' | 'displayName'> {
+export interface Props extends Omit<AvatarProps, 'darkLight' | 'text'> {
   user?: User;
+  deactivated?: boolean;
 }
 
-const UserAvatar: React.FC<Props> = ({ user, ...rest }) => {
+const UserAvatar: React.FC<Props> = ({ user, deactivated, ...rest }) => {
   const displayName = getDisplayName(user);
 
-  return <Avatar {...rest} displayName={displayName} />;
+  return (
+    <Avatar
+      {...rest}
+      inactive={deactivated}
+      text={displayName}
+      tooltipText={deactivated ? `${displayName} (deactivated)` : displayName}
+    />
+  );
 };
 
 export default UserAvatar;
diff --git a/webui/react/src/components/WorkspaceFilter.tsx b/webui/react/src/components/WorkspaceFilter.tsx
@@ -1,6 +1,6 @@
+import Avatar from 'determined-ui/Avatar';
 import React from 'react';
 
-import DynamicIcon from 'components/DynamicIcon';
 import { Workspace } from 'types';
 
 import css from './WorkspaceFilter.module.scss';
@@ -12,7 +12,7 @@ interface Props {
 const WorkspaceFilter: React.FC<Props> = ({ workspace }: Props) => {
   return (
     <div className={css.item}>
-      <DynamicIcon name={workspace.name} size={24} />
+      <Avatar palette="muted" square text={workspace.name} />
       <span className={css.name}>{workspace.name}</span>
     </div>
   );

diff --git a/webui/react/src/pages/DesignKit.tsx b/webui/react/src/pages/DesignKit.tsx
@@ -1,7 +1,7 @@
 import { Card as AntDCard, Space } from 'antd';
 import { SelectValue } from 'antd/es/select';
 import Accordion from 'determined-ui/Accordion';
-import Avatar from 'determined-ui/Avatar';
+import Avatar, { AvatarGroup, Size as AvatarSize } from 'determined-ui/Avatar';
 import Breadcrumb from 'determined-ui/Breadcrumb';
 import Button from 'determined-ui/Button';
 import Card from 'determined-ui/Card';
@@ -1557,8 +1557,36 @@ const AvatarSection: React.FC = () => {
           abbreviated with an option to hover for an unabbreviated view.
         </p>
       </AntDCard>
-      <AntDCard title="Usage">
-        <Avatar displayName="Test User" />
+      <AntDCard title="Variations">
+        <strong>Sizes</strong>
+        ExtraSmall
+        <Avatar size={AvatarSize.ExtraSmall} text="Test User" />
+        Small (Default Size)
+        <Avatar size={AvatarSize.Small} text="Test User" />
+        Medium
+        <Avatar size={AvatarSize.Medium} text="Test User" />
+        Large
+        <Avatar size={AvatarSize.Large} text="Test User" />
+        ExtraLarge
+        <Avatar size={AvatarSize.ExtraLarge} text="Test User" />
+        <strong>Shape</strong>
+        Square
+        <Avatar square text="Test User" />
+        <strong>Color</strong>
+        Muted palette
+        <Avatar palette="muted" text="Test User" />
+        No Color
+        <Avatar noColor text="Test User" />
+        Inactive
+        <Avatar inactive text="Test User" />
+        <strong>Tooltip</strong>
+        Custom tooltip text
+        <Avatar text="Test User" tooltipText="Custom tooltip text" />
+        Hide tooltip
+        <Avatar hideTooltip text="Test User" />
+      </AntDCard>
+      <AntDCard title="Group">
+        <AvatarGroup items={['Test User', 'Sample Person', 'Example Individual']} />
       </AntDCard>
     </ComponentSection>
   );
@@ -1581,14 +1609,14 @@ const NameplateSection: React.FC = () => {
         <li>With name and alias</li>
         <Nameplate
           alias={testUser.displayName}
-          icon={<Avatar displayName={testUser.displayName} />}
+          icon={<Avatar text={testUser.displayName} />}
           name={testUser.username}
         />
         <li>Compact format</li>
         <Nameplate
           alias={testUser.displayName}
           compact
-          icon={<Avatar displayName={testUser.displayName} />}
+          icon={<Avatar text={testUser.displayName} />}
           name={testUser.username}
         />
         <li>No alias</li>

diff --git a/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx b/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx
@@ -1,13 +1,13 @@
 import { Typography } from 'antd';
+import Avatar, { Size } from 'determined-ui/Avatar';
 import Card from 'determined-ui/Card';
 import { Columns } from 'determined-ui/Columns';
 import Icon from 'determined-ui/Icon';
 import Spinner from 'determined-ui/Spinner';
 import { Loadable } from 'determined-ui/utils/loadable';
 import React from 'react';
 
-import DynamicIcon from 'components/DynamicIcon';
-import Avatar from 'components/UserAvatar';
+import UserAvatar from 'components/UserAvatar';
 import { handlePath, paths } from 'routes/utils';
 import userStore from 'stores/users';
 import { Workspace } from 'types';
@@ -43,7 +43,7 @@ const WorkspaceCard: React.FC<Props> = ({ workspace, fetchWorkspaces }: Props) =
         <div className={workspace.archived ? css.archived : ''}>
           <Columns gap={8}>
             <div className={css.icon}>
-              <DynamicIcon name={workspace.name} size={78} />
+              <Avatar palette="muted" size={Size.ExtraLarge} square text={workspace.name} />
             </div>
             <div className={css.info}>
               <div className={css.nameRow}>
@@ -61,7 +61,7 @@ const WorkspaceCard: React.FC<Props> = ({ workspace, fetchWorkspaces }: Props) =
               <div className={css.avatarRow}>
                 <div className={css.avatar}>
                   <Spinner conditionalRender spinning={Loadable.isNotLoaded(loadableUser)}>
-                    {Loadable.isLoaded(loadableUser) && <Avatar user={user} />}
+                    {Loadable.isLoaded(loadableUser) && <UserAvatar user={user} />}
                   </Spinner>
                 </div>
                 {workspace.archived && <div className={css.archivedBadge}>Archived</div>}