[RHOAIENG-7572] Registered Models - Empty View Redesign

opendatahub-io · Aug 6, 2024 · f966bb4 · f966bb4
1 parent 3c946bf
commit f966bb4
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 32 deletions.
diff --git a/frontend/src/concepts/design/utils.ts b/frontend/src/concepts/design/utils.ts
@@ -15,6 +15,7 @@ import pipelineEmptyStateImg from '~/images/empty-state-pipelines.svg';
 import clusterStorageEmptyStateImg from '~/images/empty-state-cluster-storage.svg';
 import modelServerEmptyStateImg from '~/images/empty-state-model-serving.svg';
 import dataConnectionEmptyStateImg from '~/images/empty-state-data-connections.svg';
+import modelRegistryEmptyStateImg from '~/images/empty-state-model-registries.svg';
 
 import './vars.scss';
 
@@ -114,8 +115,9 @@ export const typedEmptyImage = (objectType: ProjectObjectType): string => {
     case ProjectObjectType.clusterStorage:
       return clusterStorageEmptyStateImg;
     case ProjectObjectType.modelServer:
-    case ProjectObjectType.registeredModels:
       return modelServerEmptyStateImg;
+    case ProjectObjectType.registeredModels:
+      return modelRegistryEmptyStateImg;
     case ProjectObjectType.dataConnection:
       return dataConnectionEmptyStateImg;
     default:

diff --git a/frontend/src/images/empty-state-model-registries.svg b/frontend/src/images/empty-state-model-registries.svg
diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -1,18 +1,24 @@
-import * as React from 'react';
-import { SearchInput, ToolbarFilter, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
-import { FilterIcon } from '@patternfly/react-icons';
-import { useNavigate } from 'react-router';
+import React from 'react';
+
+import {
+  Button,
+  List,
+  ListItem,
+  Popover,
+  SearchInput,
+  ToolbarFilter,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { FilterIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+
 import { SearchType } from '~/concepts/dashboard/DashboardSearchField';
 import { RegisteredModel } from '~/concepts/modelRegistry/types';
 import SimpleDropdownSelect from '~/components/SimpleDropdownSelect';
 import { filterRegisteredModels } from '~/pages/modelRegistry/screens/utils';
-import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext';
 import EmptyModelRegistryState from '~/pages/modelRegistry/screens/components/EmptyModelRegistryState';
-import {
-  registerModelUrl,
-  registeredModelArchiveUrl,
-} from '~/pages/modelRegistry/screens/routeUtils';
 import { asEnumMember } from '~/utilities/utils';
+import { ProjectObjectType, typedEmptyImage } from '~/concepts/design/utils';
 import RegisteredModelTable from './RegisteredModelTable';
 import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar';
 
@@ -25,8 +31,6 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
   registeredModels: unfilteredRegisteredModels,
   refresh,
 }) => {
-  const navigate = useNavigate();
-  const { preferredModelRegistry } = React.useContext(ModelRegistrySelectorContext);
   const [searchType, setSearchType] = React.useState<SearchType>(SearchType.KEYWORD);
   const [search, setSearch] = React.useState('');
 
@@ -36,16 +40,30 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
     return (
       <EmptyModelRegistryState
         testid="empty-registered-models"
-        title="No models in selected registry"
-        description={`${preferredModelRegistry?.metadata.name} has no models registered to it. Register model to this registry, or select a different one.`}
-        primaryActionText="Register model"
-        secondaryActionText="View archived models"
-        primaryActionOnClick={() => {
-          navigate(registerModelUrl(preferredModelRegistry?.metadata.name));
-        }}
-        secondaryActionOnClick={() => {
-          navigate(registeredModelArchiveUrl(preferredModelRegistry?.metadata.name));
-        }}
+        title="Request access to model registries"
+        description="To request a new model registry, or to request permission to access an existing model registry, contact your administrator."
+        headerIcon={() => <img src={typedEmptyImage(ProjectObjectType.registeredModels)} alt="" />}
+        customAction={
+          <Popover
+            showClose
+            position="bottom"
+            headerContent="Your administrator might be:"
+            bodyContent={
+              <List>
+                <ListItem>
+                  The person who gave you your username, or who helped you to log in for the first
+                  time
+                </ListItem>
+                <ListItem>Someone in your IT department or help desk</ListItem>
+                <ListItem>A project manager or developer</ListItem>
+              </List>
+            }
+          >
+            <Button variant="link" icon={<OutlinedQuestionCircleIcon />} isInline>
+              Who&apos;s my administrator?
+            </Button>
+          </Popover>
+        }
       />
     );
   }

diff --git a/frontend/src/pages/modelRegistry/screens/components/EmptyModelRegistryState.tsx b/frontend/src/pages/modelRegistry/screens/components/EmptyModelRegistryState.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Button,
   ButtonVariant,
@@ -7,10 +8,10 @@ import {
   EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
+  EmptyStateIconProps,
   EmptyStateVariant,
 } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
-import * as React from 'react';
 
 type EmptyModelRegistryStateType = {
   testid?: string;
@@ -20,6 +21,8 @@ type EmptyModelRegistryStateType = {
   primaryActionOnClick?: () => void;
   secondaryActionText?: string;
   secondaryActionOnClick?: () => void;
+  headerIcon?: EmptyStateIconProps['icon'];
+  customAction?: React.ReactNode;
 };
 
 const EmptyModelRegistryState: React.FC<EmptyModelRegistryStateType> = ({
@@ -30,33 +33,41 @@ const EmptyModelRegistryState: React.FC<EmptyModelRegistryStateType> = ({
   secondaryActionText,
   primaryActionOnClick,
   secondaryActionOnClick,
+  headerIcon,
+  customAction,
 }) => (
   <EmptyState variant={EmptyStateVariant.sm} data-testid={testid}>
-    <EmptyStateHeader titleText={title} icon={<EmptyStateIcon icon={PlusCircleIcon} />} />
+    <EmptyStateHeader
+      titleText={title}
+      icon={<EmptyStateIcon icon={headerIcon ?? PlusCircleIcon} />}
+    />
     <EmptyStateBody>{description}</EmptyStateBody>
     <EmptyStateFooter>
-      <EmptyStateActions>
-        {primaryActionText && (
+      {primaryActionText && (
+        <EmptyStateActions>
           <Button
             data-testid="empty-model-registry-primary-action"
             variant={ButtonVariant.primary}
             onClick={primaryActionOnClick}
           >
             {primaryActionText}
           </Button>
-        )}
-      </EmptyStateActions>
-      <EmptyStateActions>
-        {secondaryActionText && (
+        </EmptyStateActions>
+      )}
+
+      {secondaryActionText && (
+        <EmptyStateActions>
           <Button
             data-testid="empty-model-registry-secondary-action"
             variant="link"
             onClick={secondaryActionOnClick}
           >
             {secondaryActionText}
           </Button>
-        )}
-      </EmptyStateActions>
+        </EmptyStateActions>
+      )}
+
+      {customAction && <EmptyStateActions>{customAction}</EmptyStateActions>}
     </EmptyStateFooter>
   </EmptyState>
 );