Update empty state of versions list and models lists (#3277)

opendatahub-io · Oct 9, 2024 · 08c8250 · 08c8250
1 parent c8d7822
commit 08c8250
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/frontend/src/pages/modelRegistry/screens/ModelRegistry.tsx b/frontend/src/pages/modelRegistry/screens/ModelRegistry.tsx
@@ -3,7 +3,6 @@ import ApplicationsPage from '~/pages/ApplicationsPage';
 import useRegisteredModels from '~/concepts/modelRegistry/apiHooks/useRegisteredModels';
 import TitleWithIcon from '~/concepts/design/TitleWithIcon';
 import { ProjectObjectType } from '~/concepts/design/utils';
-import { filterLiveModels } from '~/concepts/modelRegistry/utils';
 import RegisteredModelListView from './RegisteredModels/RegisteredModelListView';
 import ModelRegistrySelectorNavigator from './ModelRegistrySelectorNavigator';
 import { modelRegistryUrl } from './routeUtils';
@@ -39,10 +38,7 @@ const ModelRegistry: React.FC<ModelRegistryProps> = ({ ...pageProps }) => {
       provideChildrenPadding
       removeChildrenTopPadding
     >
-      <RegisteredModelListView
-        registeredModels={filterLiveModels(registeredModels.items)}
-        refresh={refresh}
-      />
+      <RegisteredModelListView registeredModels={registeredModels.items} refresh={refresh} />
     </ApplicationsPage>
   );
 };

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionListView.tsx
@@ -31,6 +31,7 @@ import {
 } from '~/pages/modelRegistry/screens/routeUtils';
 import { asEnumMember } from '~/utilities/utils';
 import { ProjectObjectType, typedEmptyImage } from '~/concepts/design/utils';
+import { filterArchiveVersions, filterLiveVersions } from '~/concepts/modelRegistry/utils';
 import ModelVersionsTable from './ModelVersionsTable';
 
 type ModelVersionListViewProps = {
@@ -41,11 +42,16 @@ type ModelVersionListViewProps = {
 };
 
 const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
-  modelVersions: unfilteredModelVersions,
+  modelVersions,
   registeredModel: rm,
   isArchiveModel,
   refresh,
 }) => {
+  const unfilteredModelVersions = isArchiveModel
+    ? modelVersions
+    : filterLiveVersions(modelVersions);
+
+  const archiveModelVersions = filterArchiveVersions(modelVersions);
   const navigate = useNavigate();
   const { preferredModelRegistry } = React.useContext(ModelRegistrySelectorContext);
 
@@ -88,10 +94,12 @@ const ModelVersionListView: React.FC<ModelVersionListViewProps> = ({
         )}
         description={`${rm?.name} has no registered versions. Register a version to this model.`}
         primaryActionText="Register new version"
-        secondaryActionText="View archived versions"
         primaryActionOnClick={() => {
           navigate(registerVersionForModelUrl(rm?.id, preferredModelRegistry?.metadata.name));
         }}
+        secondaryActionText={
+          archiveModelVersions.length !== 0 ? 'View archived versions' : undefined
+        }
         secondaryActionOnClick={() => {
           navigate(modelVersionArchiveUrl(rm?.id, preferredModelRegistry?.metadata.name));
         }}

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersions.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersions.tsx
@@ -6,7 +6,6 @@ import ApplicationsPage from '~/pages/ApplicationsPage';
 import useModelVersionsByRegisteredModel from '~/concepts/modelRegistry/apiHooks/useModelVersionsByRegisteredModel';
 import useRegisteredModelById from '~/concepts/modelRegistry/apiHooks/useRegisteredModelById';
 import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext';
-import { filterLiveVersions } from '~/concepts/modelRegistry/utils';
 import { ModelState } from '~/concepts/modelRegistry/types';
 import { registeredModelArchiveDetailsUrl } from '~/pages/modelRegistry/screens/routeUtils';
 import ModelVersionsTabs from './ModelVersionsTabs';
@@ -65,7 +64,7 @@ const ModelVersions: React.FC<ModelVersionsProps> = ({ tab, ...pageProps }) => {
           registeredModel={rm}
           refresh={rmRefresh}
           mvRefresh={mvRefresh}
-          modelVersions={filterLiveVersions(modelVersions.items)}
+          modelVersions={modelVersions.items}
         />
       )}
     </ApplicationsPage>

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -14,6 +14,7 @@ import {
 } from '~/pages/modelRegistry/screens/routeUtils';
 import { asEnumMember } from '~/utilities/utils';
 import { ProjectObjectType, typedEmptyImage } from '~/concepts/design/utils';
+import { filterArchiveModels, filterLiveModels } from '~/concepts/modelRegistry/utils';
 import RegisteredModelTable from './RegisteredModelTable';
 import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar';
 
@@ -23,14 +24,15 @@ type RegisteredModelListViewProps = {
 };
 
 const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
-  registeredModels: unfilteredRegisteredModels,
+  registeredModels,
   refresh,
 }) => {
   const navigate = useNavigate();
   const { preferredModelRegistry } = React.useContext(ModelRegistrySelectorContext);
   const [searchType, setSearchType] = React.useState<SearchType>(SearchType.KEYWORD);
   const [search, setSearch] = React.useState('');
-
+  const unfilteredRegisteredModels = filterLiveModels(registeredModels);
+  const archiveRegisteredModels = filterArchiveModels(registeredModels);
   const searchTypes = React.useMemo(() => [SearchType.KEYWORD, SearchType.OWNER], []);
 
   if (unfilteredRegisteredModels.length === 0) {
@@ -46,7 +48,9 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
         )}
         description={`${preferredModelRegistry?.metadata.name} has no active registered models. Register a model in this registry, or select a different registry.`}
         primaryActionText="Register model"
-        secondaryActionText="View archived models"
+        secondaryActionText={
+          archiveRegisteredModels.length !== 0 ? 'View archived models' : undefined
+        }
         primaryActionOnClick={() => {
           navigate(registerModelUrl(preferredModelRegistry?.metadata.name));
         }}