Fix places where we missed using the new route util (kubeflow#1714)

Signed-off-by: Mike Turley <[email protected]>

Author: mturley

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

@@ -6,6 +6,8 @@ import { NavDataItem } from '~/app/standalone/types';
 import ModelRegistrySettingsRoutes from './pages/settings/ModelRegistrySettingsRoutes';
 import ModelRegistryRoutes from './pages/modelRegistry/ModelRegistryRoutes';
 import ModelCatalogRoutes from './pages/modelCatalog/ModelCatalogRoutes';
+import { modelCatalogUrl } from './routes/modelCatalog/catalogModel';
+import { modelRegistryUrl } from './pages/modelRegistry/screens/routeUtils';
 import useUser from './hooks/useUser';
 
 export const useAdminSettings = (): NavDataItem[] => {
@@ -32,15 +34,15 @@ export const useNavData = (): NavDataItem[] => {
   const baseNavItems = [
     {
       label: 'Model Registry',
-      path: '/model-registry',
+      path: modelRegistryUrl(),
     },
   ];
 
   // Only show Model Catalog in Standalone or Federated mode
   if (isStandalone || isFederated) {
     baseNavItems.push({
       label: 'Model Catalog',
-      path: '/model-catalog',
+      path: modelCatalogUrl(),
     });
   }
 
@@ -56,10 +58,10 @@ const AppRoutes: React.FC = () => {
 
   return (
     <Routes>
-      <Route path="/" element={<Navigate to="/model-registry" replace />} />
-      <Route path="/model-registry/*" element={<ModelRegistryRoutes />} />
+      <Route path="/" element={<Navigate to={modelRegistryUrl()} replace />} />
+      <Route path={`${modelRegistryUrl()}/*`} element={<ModelRegistryRoutes />} />
       {(isStandalone || isFederated) && (
-        <Route path="/model-catalog/*" element={<ModelCatalogRoutes />} />
+        <Route path={`${modelCatalogUrl()}/*`} element={<ModelCatalogRoutes />} />
       )}
       <Route path="*" element={<NotFound />} />
       {/* TODO: [Conditional render] Follow up add testing and conditional rendering when in standalone mode */}

clients/ui/frontend/src/app/pages/modelRegistry/screens/routeUtils.ts

@@ -1,5 +1,5 @@
-export const modelRegistryUrl = (preferredModelRegistry = ''): string =>
-  `/model-registry/${preferredModelRegistry}`;
+export const modelRegistryUrl = (preferredModelRegistry?: string): string =>
+  `/model-registry${preferredModelRegistry ? `/${preferredModelRegistry}` : ''}`;
 
 export const registeredModelsUrl = (preferredModelRegistry?: string): string =>
   `${modelRegistryUrl(preferredModelRegistry)}/registered-models`;

clients/ui/frontend/src/app/routes/modelCatalog/catalogModel.ts

@@ -1,6 +1,7 @@
 import { getCatalogModelDetailsRoute } from '~/app/routes/modelCatalog/catalogModelDetails';
 
-export const modelCatalogUrl = (sourceId = ''): string => `/model-catalog/${sourceId}`;
+export const modelCatalogUrl = (sourceId?: string): string =>
+  `/model-catalog${sourceId ? `/${sourceId}` : ''}`;
 
 export const catalogModelDetailsFromModel = (catalogModelName = '', sourceId = ''): string =>
   getCatalogModelDetailsRoute({ sourceId, modelName: catalogModelName });

clients/ui/frontend/src/app/routes/modelCatalog/catalogModelDetails.ts

@@ -1,10 +1,11 @@
 import { CatalogModelDetailsParams } from '~/app/modelCatalogTypes';
 import { encodeParams } from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
+import { modelCatalogUrl } from './catalogModel';
 
 export const getCatalogModelDetailsRoute = (params: CatalogModelDetailsParams): string => {
   const { sourceId = '', modelName = '' } = encodeParams({
     sourceId: params.sourceId,
     modelName: params.modelName,
   });
-  return `/model-catalog/${sourceId}/${modelName}` || '#';
+  return `${modelCatalogUrl(sourceId)}/${modelName}` || '#';
 };

clients/ui/frontend/src/app/routes/modelCatalog/catalogModelRegister.ts

@@ -1,9 +1,10 @@
 import { encodeParams } from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
+import { modelCatalogUrl } from './catalogModel';
 
 export const getRegisterCatalogModelRoute = (id = '', name = ''): string => {
   const { sourceId = '', modelName = '' } = encodeParams({
     sourceId: id,
     modelName: name,
   });
-  return `/model-catalog/${sourceId}/${modelName}/register` || '#';
+  return `${modelCatalogUrl(sourceId)}/${modelName}/register` || '#';
 };