fix: hook inside useMemo warning (#5638)

determined-ai · Dec 21, 2022 · 9577b7f · 9577b7f
1 parent 9cf35e7
commit 9577b7f
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 26 deletions.
diff --git a/webui/react/src/components/Table/Table.tsx b/webui/react/src/components/Table/Table.tsx
@@ -16,11 +16,11 @@ import Icon from 'shared/components/Icon/Icon';
 import Spinner from 'shared/components/Spinner';
 import { Pagination } from 'shared/types';
 import { getDuration } from 'shared/utils/datetime';
-import { useUsers } from 'stores/users';
 import { StateOfUnion } from 'themes';
 import {
   CommandTask,
   CommandType,
+  DetailedUser,
   ExperimentItem,
   ModelItem,
   ModelVersion,
@@ -30,7 +30,6 @@ import {
   TrialItem,
   Workspace,
 } from 'types';
-import { Loadable } from 'utils/loadable';
 import { canBeOpened } from 'utils/task';
 import { openCommand } from 'utils/wait';
 
@@ -108,9 +107,7 @@ export const tooltipRenderer: Renderer = (text) => (
   </Tooltip>
 );
 
-export const UserRenderer: Renderer<{ userId?: number }> = (_, record) => {
-  const users = Loadable.getOrElse([], useUsers());
-  const user = users.find((user) => user.id === record.userId);
+export const userRenderer: React.FC<DetailedUser | undefined> = (user) => {
   return (
     <div className={`${css.centerVertically} ${css.centerHorizontally}`}>
       {user ? <UserAvatar user={user} /> : <Spinner />}

diff --git a/webui/react/src/pages/ExperimentList.tsx b/webui/react/src/pages/ExperimentList.tsx
@@ -25,7 +25,7 @@ import {
   expStateRenderer,
   getFullPaginationConfig,
   relativeTimeRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import TableBatch from 'components/Table/TableBatch';
 import TableFilterDropdown from 'components/Table/TableFilterDropdown';
@@ -593,7 +593,7 @@ const ExperimentList: React.FC<Props> = ({ project }) => {
         filters: users.map((user) => ({ text: getDisplayName(user), value: user.id })),
         isFiltered: (settings: ExperimentListSettings) => !!settings.user,
         key: V1GetExperimentsRequestSortBy.USER,
-        render: UserRenderer,
+        render: (_, r) => userRenderer(users.find((u) => u.id === r.userId)),
         sorter: true,
         title: 'User',
       },

diff --git a/webui/react/src/pages/JobQueue/JobQueue.table.tsx b/webui/react/src/pages/JobQueue/JobQueue.table.tsx
@@ -4,7 +4,7 @@ import React, { ReactNode } from 'react';
 import Badge, { BadgeType } from 'components/Badge';
 import Link from 'components/Link';
 import { ColumnDef } from 'components/Table/InteractiveTable';
-import { relativeTimeRenderer, UserRenderer } from 'components/Table/Table';
+import { relativeTimeRenderer } from 'components/Table/Table';
 import { paths } from 'routes/utils';
 import { getJupyterLabs, getTensorBoards } from 'services/api';
 import Icon from 'shared/components/Icon/Icon';
@@ -175,7 +175,6 @@ export const columns: ColumnDef<Job>[] = [
     dataIndex: 'user',
     defaultWidth: DEFAULT_COLUMN_WIDTHS['user'],
     key: 'user',
-    render: UserRenderer,
     title: 'User',
   },
   {

diff --git a/webui/react/src/pages/JobQueue/JobQueue.tsx b/webui/react/src/pages/JobQueue/JobQueue.tsx
@@ -8,6 +8,7 @@ import {
   checkmarkRenderer,
   defaultRowClassName,
   getFullPaginationConfig,
+  userRenderer,
 } from 'components/Table/Table';
 import { V1SchedulerTypeToLabel } from 'constants/states';
 import { useSettings } from 'hooks/useSettings';
@@ -23,6 +24,7 @@ import { routeToReactUrl } from 'shared/utils/routes';
 import { numericSorter } from 'shared/utils/sort';
 import { capitalize } from 'shared/utils/string';
 import { useFetchResourcePools, useResourcePools } from 'stores/resourcePools';
+import { useUsers } from 'stores/users';
 import { Job, JobAction, JobState, JobType, ResourcePool, RPStats } from 'types';
 import handleError from 'utils/error';
 import {
@@ -46,6 +48,7 @@ interface Props {
 
 const JobQueue: React.FC<Props> = ({ bodyNoPadding, selectedRp, jobState }) => {
   const loadableResourcePools = useResourcePools();
+  const users = Loadable.getOrElse([], useUsers());
   const resourcePools = Loadable.getOrElse([], loadableResourcePools); // TODO show spinner when this is loading
   const [managingJob, setManagingJob] = useState<Job>();
   const [rpStats, setRpStats] = useState<RPStats[]>(
@@ -296,6 +299,9 @@ const JobQueue: React.FC<Props> = ({ bodyNoPadding, selectedRp, jobState }) => {
               };
             }
             break;
+          case 'user':
+            col.render = (_, r) => userRenderer(users.find((u) => u.id === r.userId));
+            break;
         }
         return col;
       })

diff --git a/webui/react/src/pages/ModelDetails.tsx b/webui/react/src/pages/ModelDetails.tsx
@@ -17,7 +17,7 @@ import {
   modelVersionNameRenderer,
   modelVersionNumberRenderer,
   relativeTimeRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import TagList from 'components/TagList';
 import useModalModelDownload from 'hooks/useModal/Model/useModalModelDownload';
@@ -37,8 +37,10 @@ import usePolling from 'shared/hooks/usePolling';
 import { isEqual } from 'shared/utils/data';
 import { ErrorType } from 'shared/utils/error';
 import { isAborted, isNotFound, validateDetApiEnum } from 'shared/utils/service';
+import { useUsers } from 'stores/users';
 import { Metadata, ModelVersion, ModelVersions } from 'types';
 import handleError from 'utils/error';
+import { Loadable } from 'utils/loadable';
 
 import css from './ModelDetails.module.scss';
 import settingsConfig, {
@@ -60,6 +62,7 @@ const ModelDetails: React.FC = () => {
   const [pageError, setPageError] = useState<Error>();
   const [total, setTotal] = useState(0);
   const pageRef = useRef<HTMLElement>(null);
+  const users = Loadable.getOrElse([], useUsers());
 
   const {
     settings,
@@ -234,7 +237,7 @@ const ModelDetails: React.FC = () => {
         dataIndex: 'user',
         defaultWidth: DEFAULT_COLUMN_WIDTHS['user'],
         key: 'user',
-        render: UserRenderer,
+        render: (_, r) => userRenderer(users.find((u) => u.id === r.userId)),
         title: 'User',
       },
       {
@@ -250,7 +253,7 @@ const ModelDetails: React.FC = () => {
         title: '',
       },
     ] as ColumnDef<ModelVersion>[];
-  }, [deleteModelVersion, downloadModel, saveModelVersionTags, saveVersionDescription]);
+  }, [deleteModelVersion, downloadModel, saveModelVersionTags, saveVersionDescription, users]);
 
   const handleTableChange = useCallback(
     (

diff --git a/webui/react/src/pages/ModelRegistry.tsx b/webui/react/src/pages/ModelRegistry.tsx
@@ -22,7 +22,7 @@ import {
   getFullPaginationConfig,
   modelNameRenderer,
   relativeTimeRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import TableFilterDropdown from 'components/Table/TableFilterDropdown';
 import TableFilterSearch from 'components/Table/TableFilterSearch';
@@ -458,7 +458,7 @@ const ModelRegistry: React.FC = () => {
         filters: users.map((user) => ({ text: getDisplayName(user), value: user.id })),
         isFiltered: (settings: Settings) => !!settings.users,
         key: 'user',
-        render: UserRenderer,
+        render: (_, r) => userRenderer(users.find((u) => u.id === r.userId)),
         title: 'User',
       },
       {

diff --git a/webui/react/src/pages/OldProjectDetails.tsx b/webui/react/src/pages/OldProjectDetails.tsx
@@ -27,7 +27,7 @@ import {
   expStateRenderer,
   getFullPaginationConfig,
   relativeTimeRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import TableBatch from 'components/Table/TableBatch';
 import TableFilterDropdown from 'components/Table/TableFilterDropdown';
@@ -623,7 +623,7 @@ const ProjectDetails: React.FC = () => {
         filters: users.map((user) => ({ text: getDisplayName(user), value: user.id })),
         isFiltered: (settings: ExperimentListSettings) => !!settings.user,
         key: V1GetExperimentsRequestSortBy.USER,
-        render: UserRenderer,
+        render: (_, r) => userRenderer(users.find((u) => u.id === r.userId)),
         sorter: true,
         title: 'User',
       },

diff --git a/webui/react/src/pages/TaskList.tsx b/webui/react/src/pages/TaskList.tsx
@@ -26,7 +26,7 @@ import {
   taskNameRenderer,
   TaskRenderer,
   taskTypeRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import TableBatch from 'components/Table/TableBatch';
 import TableFilterDropdown from 'components/Table/TableFilterDropdown';
@@ -406,7 +406,7 @@ const TaskList: React.FC = () => {
         filters: users.map((user) => ({ text: getDisplayName(user), value: user.id })),
         isFiltered: (settings: Settings) => !!settings.user,
         key: 'user',
-        render: UserRenderer,
+        render: (_, r) => userRenderer(users.find((u) => u.id === r.userId)),
         sorter: (a: CommandTask, b: CommandTask): number => {
           return alphaNumericSorter(
             getDisplayName(users.find((u) => u.id === a.userId)),

diff --git a/webui/react/src/pages/TrialsComparison/Table/TrialTable.tsx b/webui/react/src/pages/TrialsComparison/Table/TrialTable.tsx
@@ -14,7 +14,7 @@ import SkeletonTable from 'components/Table/SkeletonTable';
 import {
   getFullPaginationConfig,
   relativeTimeRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import TableFilterMultiSearch from 'components/Table/TableFilterMultiSearch';
 import TableFilterRank from 'components/Table/TableFilterRank';
@@ -420,7 +420,8 @@ const TrialTable: React.FC<Props> = ({
       filters: users.map((user) => ({ text: getDisplayName(user), value: user.id })),
       isFiltered: () => !!filters.userIds?.length,
       key: 'userId',
-      render: UserRenderer,
+      render: (_: number, r: V1AugmentedTrial) =>
+        userRenderer(users.find((u) => u.id === r.userId)),
       sorter: true,
       title: 'User',
     }),

diff --git a/webui/react/src/pages/WorkspaceDetails/WorkspaceProjects.tsx b/webui/react/src/pages/WorkspaceDetails/WorkspaceProjects.tsx
@@ -15,7 +15,7 @@ import {
   getFullPaginationConfig,
   relativeTimeRenderer,
   stateRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import Toggle from 'components/Toggle';
 import usePermissions from 'hooks/usePermissions';
@@ -232,7 +232,7 @@ const WorkspaceProjects: React.FC<Props> = ({ workspace, id, pageRef }) => {
       {
         dataIndex: 'userId',
         defaultWidth: DEFAULT_COLUMN_WIDTHS['userId'],
-        render: UserRenderer,
+        render: (_, r) => userRenderer(users.find((u) => u.id === r.userId)),
         title: 'User',
       },
       {
@@ -260,7 +260,7 @@ const WorkspaceProjects: React.FC<Props> = ({ workspace, id, pageRef }) => {
         title: '',
       },
     ] as ColumnDef<Project>[];
-  }, [fetchProjects, saveProjectDescription, user, workspace?.archived]);
+  }, [fetchProjects, saveProjectDescription, user, workspace?.archived, users]);
 
   const switchShowArchived = useCallback(
     (showArchived: boolean) => {

diff --git a/webui/react/src/pages/WorkspaceList.tsx b/webui/react/src/pages/WorkspaceList.tsx
@@ -15,7 +15,7 @@ import {
   GenericRenderer,
   getFullPaginationConfig,
   stateRenderer,
-  UserRenderer,
+  userRenderer,
 } from 'components/Table/Table';
 import Toggle from 'components/Toggle';
 import useModalWorkspaceCreate from 'hooks/useModal/Workspace/useModalWorkspaceCreate';
@@ -178,7 +178,7 @@ const WorkspaceList: React.FC = () => {
         dataIndex: 'userId',
         defaultWidth: DEFAULT_COLUMN_WIDTHS['userId'],
         key: 'user',
-        render: UserRenderer,
+        render: (_, r) => userRenderer(users.find((u) => u.id === r.userId)),
         title: 'User',
       },
       {
@@ -208,7 +208,7 @@ const WorkspaceList: React.FC = () => {
         title: '',
       },
     ] as ColumnDef<Workspace>[];
-  }, [fetchWorkspaces]);
+  }, [fetchWorkspaces, users]);
 
   const switchShowArchived = useCallback(
     (showArchived: boolean) => {