Update code with conditional rendering

clients/ui/frontend/.env

@@ -7,4 +7,5 @@ LOGO_DARK=logo-dark-theme.svg
 FAVICON=favicon.ico
 PRODUCT_NAME="Model Registry"
 STYLE_THEME=mui-theme
+PLATFORM_MODE=kubeflow
 

clients/ui/frontend/src/app/AppRoutes.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { NotFound } from './pages/notFound/NotFound';
+import NotFound from '~/shared/components/notFound/NotFound';
 import ModelRegistrySettingsRoutes from './pages/settings/ModelRegistrySettingsRoutes';
 import ModelRegistryRoutes from './pages/modelRegistry/ModelRegistryRoutes';
 import useUser from './hooks/useUser';

clients/ui/frontend/src/app/context/ModelRegistrySelectorContext.tsx

@@ -9,6 +9,7 @@ export type ModelRegistrySelectorContextType = {
   modelRegistries: ModelRegistry[];
   preferredModelRegistry: ModelRegistry | undefined;
   updatePreferredModelRegistry: (modelRegistry: ModelRegistry | undefined) => void;
+  //refreshRulesReview: () => void; TODO: [Midstream] Reimplement this
 };
 
 type ModelRegistrySelectorContextProviderProps = {
@@ -21,6 +22,7 @@ export const ModelRegistrySelectorContext = React.createContext<ModelRegistrySel
   modelRegistries: [],
   preferredModelRegistry: undefined,
   updatePreferredModelRegistry: () => undefined,
+  //refreshRulesReview: () => undefined,
 });
 
 export const ModelRegistrySelectorContextProvider: React.FC<
@@ -34,6 +36,8 @@ export const ModelRegistrySelectorContextProvider: React.FC<
 const EnabledModelRegistrySelectorContextProvider: React.FC<
   ModelRegistrySelectorContextProviderProps
 > = ({ children }) => {
+  // TODO: [Midstream] Add area check for enablement
+
   const queryParams = useQueryParamNamespaces();
 
   const [modelRegistries, isLoaded, error] = useModelRegistries(queryParams);
@@ -49,6 +53,7 @@ const EnabledModelRegistrySelectorContextProvider: React.FC<
       modelRegistries,
       preferredModelRegistry: preferredModelRegistry ?? firstModelRegistry ?? undefined,
       updatePreferredModelRegistry: setPreferredModelRegistry,
+      // refreshRulesReview,
     }),
     [isLoaded, error, modelRegistries, preferredModelRegistry, firstModelRegistry],
   );

clients/ui/frontend/src/app/hooks/__tests__/useModelArtifactsByVersionId.spec.ts

@@ -19,11 +19,13 @@ const mockModelRegistryAPIs: ModelRegistryAPIs = {
   createModelArtifactForModelVersion: jest.fn(),
   getRegisteredModel: jest.fn(),
   getModelVersion: jest.fn(),
+  listModelVersions: jest.fn(),
   listRegisteredModels: jest.fn(),
   getModelVersionsByRegisteredModel: jest.fn(),
   getModelArtifactsByModelVersion: jest.fn(),
   patchRegisteredModel: jest.fn(),
   patchModelVersion: jest.fn(),
+  patchModelArtifact: jest.fn(),
 };
 
 describe('useModelArtifactsByVersionId', () => {

clients/ui/frontend/src/app/hooks/useModelVersions.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import useFetchState, {
+  FetchState,
+  FetchStateCallbackPromise,
+} from '~/shared/utilities/useFetchState';
+import { ModelVersionList } from '~/app/types';
+import { useModelRegistryAPI } from '~/app/hooks/useModelRegistryAPI';
+
+const useModelVersions = (): FetchState<ModelVersionList> => {
+  const { api, apiAvailable } = useModelRegistryAPI();
+  const callback = React.useCallback<FetchStateCallbackPromise<ModelVersionList>>(
+    (opts) => {
+      if (!apiAvailable) {
+        return Promise.reject(new Error('API not yet available'));
+      }
+      return api.listModelVersions(opts).then((r) => r);
+    },
+    [api, apiAvailable],
+  );
+  return useFetchState(
+    callback,
+    { items: [], size: 0, pageSize: 0, nextPageToken: '' },
+    { initialPromisePurity: true },
+  );
+};
+
+export default useModelVersions;

clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryCoreLoader.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Navigate, Outlet, useParams } from 'react-router-dom';
-import { Bullseye, Alert, Popover, List, ListItem, Button } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { Bullseye, Alert } from '@patternfly/react-core';
 import ApplicationsPage from '~/shared/components/ApplicationsPage';
 import { ModelRegistrySelectorContext } from '~/app/context/ModelRegistrySelectorContext';
 import { ProjectObjectType, typedEmptyImage } from '~/shared/components/design/utils';
 import { ModelRegistryContextProvider } from '~/app/context/ModelRegistryContext';
 import TitleWithIcon from '~/shared/components/design/TitleWithIcon';
+import WhosMyAdministrator from '~/shared/components/WhosMyAdministrator';
 import EmptyModelRegistryState from './screens/components/EmptyModelRegistryState';
 import InvalidModelRegistry from './screens/InvalidModelRegistry';
 import ModelRegistrySelectorNavigator from './screens/ModelRegistrySelectorNavigator';
@@ -27,7 +27,6 @@ const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({
   getInvalidRedirectPath,
 }) => {
   const { modelRegistry } = useParams<{ modelRegistry: string }>();
-
   const {
     modelRegistriesLoaded,
     modelRegistriesLoadError,
@@ -69,27 +68,7 @@ const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({
           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 />}>
-                Who&apos;s my administrator?
-              </Button>
-            </Popover>
-          }
+          customAction={<WhosMyAdministrator />}
         />
       ),
       headerContent: null,
@@ -104,7 +83,6 @@ const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({
         </ModelRegistryContextProvider>
       );
     }
-
     // They ended up on a non-valid project path
     renderStateProps = {
       empty: true,

clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
+import { isPlatformDefault } from '~/shared/utilities/const';
 import ModelRegistry from './screens/ModelRegistry';
 import ModelRegistryCoreLoader from './ModelRegistryCoreLoader';
 import { modelRegistryUrl } from './screens/routeUtils';
@@ -44,6 +45,14 @@ const ModelRegistryRoutes: React.FC = () => (
             path={ModelVersionDetailsTab.DETAILS}
             element={<ModelVersionsDetails tab={ModelVersionDetailsTab.DETAILS} empty={false} />}
           />
+          {isPlatformDefault() && (
+            <Route
+              path={ModelVersionDetailsTab.DEPLOYMENTS}
+              element={
+                <ModelVersionsDetails tab={ModelVersionDetailsTab.DEPLOYMENTS} empty={false} />
+              }
+            />
+          )}
           <Route path="*" element={<Navigate to="." />} />
         </Route>
         <Route path="versions/archive">
@@ -56,6 +65,18 @@ const ModelRegistryRoutes: React.FC = () => (
                 <ModelVersionsArchiveDetails tab={ModelVersionDetailsTab.DETAILS} empty={false} />
               }
             />
+            {isPlatformDefault() && (
+              <Route
+                path={ModelVersionDetailsTab.DEPLOYMENTS}
+                element={
+                  <ModelVersionsArchiveDetails
+                    tab={ModelVersionDetailsTab.DEPLOYMENTS}
+                    empty={false}
+                  />
+                }
+              />
+            )}
+
             <Route path="*" element={<Navigate to="." />} />
           </Route>
           <Route path="*" element={<Navigate to="." />} />
@@ -86,6 +107,18 @@ const ModelRegistryRoutes: React.FC = () => (
                 <ArchiveModelVersionDetails tab={ModelVersionDetailsTab.DETAILS} empty={false} />
               }
             />
+            {isPlatformDefault() && (
+              <Route
+                path={ModelVersionDetailsTab.DEPLOYMENTS}
+                element={
+                  <ArchiveModelVersionDetails
+                    tab={ModelVersionDetailsTab.DEPLOYMENTS}
+                    empty={false}
+                  />
+                }
+              />
+            )}
+
             <Route path="*" element={<Navigate to="." />} />
           </Route>
           <Route path="*" element={<Navigate to="." />} />

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesDescriptionListGroup.tsx

@@ -55,12 +55,15 @@ const ModelPropertiesDescriptionListGroup: React.FC<ModelPropertiesDescriptionLi
       action={
         !isArchive && (
           <Button
-            isInline
             variant="link"
+            data-testid="add-property-button"
             icon={<PlusCircleIcon />}
             iconPosition="start"
             isDisabled={isAdding || isSavingEdits}
-            onClick={() => setIsAdding(true)}
+            onClick={() => {
+              setIsShowingMoreProperties(true);
+              setIsAdding(true);
+            }}
           >
             Add property
           </Button>
@@ -120,6 +123,7 @@ const ModelPropertiesDescriptionListGroup: React.FC<ModelPropertiesDescriptionLi
         <Button
           variant="link"
           className={spacing.mtSm}
+          data-testid="expand-control-button"
           onClick={() => setIsShowingMoreProperties(!isShowingMoreProperties)}
         >
           {isShowingMoreProperties

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelPropertiesTableRow.tsx

@@ -99,6 +99,7 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
       }
       isRequired
       type="text"
+      autoFocus
       value={unsavedKey}
       onChange={(_event, str) => setUnsavedKey(str)}
       validated={keyValidationError ? 'error' : 'default'}
@@ -168,25 +169,23 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
             <ActionList isIconList>
               <ActionListItem>
                 <Button
-                  data-testid={`save-edit-button-property-${key}`}
+                  data-testid="save-edit-button-property"
+                  icon={<CheckIcon />}
                   aria-label={`Save edits to property with key ${key}`}
                   variant="link"
                   onClick={onSaveEditsClick}
                   isDisabled={isSavingEdits || !unsavedKey || !unsavedValue || !!keyValidationError}
-                >
-                  <CheckIcon />
-                </Button>
+                />
               </ActionListItem>
               <ActionListItem>
                 <Button
-                  data-testid={`discard-edit-button-property-${key}`}
+                  data-testid="discard-edit-button-property"
+                  icon={<TimesIcon />}
                   aria-label={`Discard edits to property with key ${key}`}
                   variant="plain"
                   onClick={onDiscardEditsClick}
                   isDisabled={isSavingEdits}
-                >
-                  <TimesIcon />
-                </Button>
+                />
               </ActionListItem>
             </ActionList>
           ) : (
@@ -195,6 +194,7 @@ const ModelPropertiesTableRow: React.FC<ModelPropertiesTableRowProps> = ({
               popperProps={{ direction: 'up' }}
               items={[
                 { title: 'Edit', onClick: onEditClick, isDisabled: isSavingEdits },
+                { isSeparator: true },
                 { title: 'Delete', onClick: onDeleteClick, isDisabled: isSavingEdits },
               ]}
             />

clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistry.tsx

@@ -3,7 +3,7 @@ import ApplicationsPage from '~/shared/components/ApplicationsPage';
 import TitleWithIcon from '~/shared/components/design/TitleWithIcon';
 import { ProjectObjectType } from '~/shared/components/design/utils';
 import useRegisteredModels from '~/app/hooks/useRegisteredModels';
-import { filterLiveModels } from '~/app/pages/modelRegistry/screens/utils';
+import useModelVersions from '~/app/hooks/useModelVersions';
 import ModelRegistrySelectorNavigator from './ModelRegistrySelectorNavigator';
 import RegisteredModelListView from './RegisteredModels/RegisteredModelListView';
 import { modelRegistryUrl } from './routeUtils';
@@ -20,7 +20,16 @@ type ModelRegistryProps = Omit<
 >;
 
 const ModelRegistry: React.FC<ModelRegistryProps> = ({ ...pageProps }) => {
-  const [registeredModels, loaded, loadError, refresh] = useRegisteredModels();
+  const [registeredModels, modelsLoaded, modelsLoadError, refreshModels] = useRegisteredModels();
+  const [modelVersions, versionsLoaded, versionsLoadError, refreshVersions] = useModelVersions();
+
+  const loaded = modelsLoaded && versionsLoaded;
+  const loadError = modelsLoadError || versionsLoadError;
+
+  const refresh = React.useCallback(() => {
+    refreshModels();
+    refreshVersions();
+  }, [refreshModels, refreshVersions]);
 
   return (
     <ApplicationsPage
@@ -40,7 +49,8 @@ const ModelRegistry: React.FC<ModelRegistryProps> = ({ ...pageProps }) => {
       removeChildrenTopPadding
     >
       <RegisteredModelListView
-        registeredModels={filterLiveModels(registeredModels.items)}
+        registeredModels={registeredModels.items}
+        modelVersions={modelVersions.items}
         refresh={refresh}
       />
     </ApplicationsPage>