Merge branch 'main' of https://github.com/opendatahub-io/odh-dashboard into RHOAIENG-56269-inline-rag-fail-on-absent-vector-store-configmap

Author: jharan1

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/odh/extension-points/index.d.ts

@@ -5,3 +5,4 @@ export * from './details';
 export * from './detailsCard';
 export * from './table';
 export * from './admin';
+export * from './namespace-selector';

frontend/@mf-types/@mf/modelRegistry/compiled-types/src/odh/extension-points/namespace-selector.d.ts

@@ -0,0 +1,21 @@
+import type { Extension } from '@openshift/dynamic-plugin-sdk';
+import type { ComponentCodeRef } from '@odh-dashboard/plugin-core';
+export type NamespaceSelectorFieldProps = {
+    selectedNamespace: string;
+    onSelect: (namespace: string) => void;
+    hasAccess?: boolean | undefined;
+    isLoading?: boolean;
+    error?: Error | undefined;
+    cannotCheck?: boolean;
+    registryName?: string;
+};
+/**
+ * Extension point for providing a custom namespace/project selector component.
+ * This allows ODH to replace the upstream namespace selector with its own
+ * project selector that uses the OpenShift Projects API (which supports
+ * non-admin listing) and filters out system projects.
+ */
+export type NamespaceSelectorExtension = Extension<'model-registry.namespace/selector', {
+    component: ComponentCodeRef<NamespaceSelectorFieldProps>;
+}>;
+export declare const isNamespaceSelectorExtension: (extension: Extension) => extension is NamespaceSelectorExtension;

frontend/src/app/AppRoutes.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { isRouteExtension } from '@odh-dashboard/plugin-core/extension-points';
+import {
+  isRouteExtension,
+  isTabRoutePageExtension,
+  TabRoutePageExtension,
+} from '@odh-dashboard/plugin-core/extension-points';
 import { LazyCodeRefComponent, useExtensions } from '@odh-dashboard/plugin-core';
+import TabRoutePage from '#~/app/navigation/TabRoutePage';
 import { InvalidArgoDeploymentAlert } from '#~/concepts/pipelines/content/InvalidArgoDeploymentAlert';
 import ApplicationsPage from '#~/pages/ApplicationsPage';
 import UnauthorizedError from '#~/pages/UnauthorizedError';
@@ -18,6 +23,7 @@ const fallback = <ApplicationsPage title="" description="" loaded={false} empty
 const AppRoutes: React.FC = () => {
   const { isAllowed } = useUser();
   const routeExtensions = useExtensions(isRouteExtension);
+  const tabRoutePageExtensions = useExtensions<TabRoutePageExtension>(isTabRoutePageExtension);
 
   const dynamicRoutes = React.useMemo(
     () =>
@@ -37,6 +43,18 @@ const AppRoutes: React.FC = () => {
     [routeExtensions],
   );
 
+  const tabRoutePages = React.useMemo(
+    () =>
+      tabRoutePageExtensions.map((pageExtension) => (
+        <Route
+          key={pageExtension.uid}
+          path={pageExtension.properties.path}
+          element={<TabRoutePage extension={pageExtension} />}
+        />
+      )),
+    [tabRoutePageExtensions],
+  );
+
   if (!isAllowed) {
     return (
       <Routes>
@@ -50,6 +68,7 @@ const AppRoutes: React.FC = () => {
       <InvalidArgoDeploymentAlert />
       <Routes>
         {dynamicRoutes}
+        {tabRoutePages}
         <Route path="/dependency-missing/:area" element={<DependencyMissingPage />} />
         <Route path="*" element={<NotFound />} />
       </Routes>

frontend/src/app/navigation/ExtensibleNav.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { Nav, NavList } from '@patternfly/react-core';
-import { isNavExtension, NavExtension } from '@odh-dashboard/plugin-core/extension-points';
+import {
+  isNavExtension,
+  isTabRoutePageExtension,
+  NavExtension,
+  TabRoutePageExtension,
+} from '@odh-dashboard/plugin-core/extension-points';
 import { useExtensions } from '@odh-dashboard/plugin-core';
 import { NavItem } from './NavItem';
 import { getTopLevelExtensions } from './utils';
@@ -9,15 +14,21 @@ type Props = {
   label: string;
 };
 
+type AnyNavExtension = NavExtension | TabRoutePageExtension;
+
 export const ExtensibleNav: React.FC<Props> = ({ label }) => {
-  const extensions = useExtensions<NavExtension>(isNavExtension);
-  const topLevelExtensions = React.useMemo(() => getTopLevelExtensions(extensions), [extensions]);
+  const navExtensions = useExtensions<NavExtension>(isNavExtension);
+  const tabRouteExtensions = useExtensions<TabRoutePageExtension>(isTabRoutePageExtension);
+  const topLevelExtensions = React.useMemo(
+    () => getTopLevelExtensions<AnyNavExtension>([...navExtensions, ...tabRouteExtensions]),
+    [navExtensions, tabRouteExtensions],
+  );
 
   return (
     <Nav aria-label={label}>
       <NavList>
         {topLevelExtensions.map((extension) => (
-          <NavItem key={extension.uid} extension={extension} />
+          <NavItem key={extension.properties.id} extension={extension} />
         ))}
       </NavList>
     </Nav>

frontend/src/app/navigation/NavItem.tsx

@@ -2,19 +2,25 @@ import * as React from 'react';
 import {
   StatusReport,
   NavExtension,
+  TabRoutePageExtension,
   isNavSectionExtension,
+  isTabRoutePageExtension,
 } from '@odh-dashboard/plugin-core/extension-points';
 import { NavItemHref } from './NavItemHref';
+import { NavItemTabRoute } from './NavItemTabRoute';
 import { NavSection } from './NavSection';
 
 export type Props = {
-  extension: NavExtension;
+  extension: NavExtension | TabRoutePageExtension;
   onNotifyStatus?: (status: StatusReport | undefined) => void;
 };
 
 export const NavItem: React.FC<Props> = ({ extension, onNotifyStatus }) => {
   if (isNavSectionExtension(extension)) {
     return <NavSection extension={extension} />;
   }
+  if (isTabRoutePageExtension(extension)) {
+    return <NavItemTabRoute extension={extension} />;
+  }
   return <NavItemHref extension={extension} onNotifyStatus={onNotifyStatus} />;
 };

frontend/src/app/navigation/NavItemTabRoute.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { NavItem } from '@patternfly/react-core';
+import { Link, useMatch } from 'react-router-dom';
+import {
+  isTabRouteTabExtension,
+  TabRoutePageExtension,
+  TabRouteTabExtension,
+} from '@odh-dashboard/plugin-core/extension-points';
+import { useExtensions } from '@odh-dashboard/plugin-core';
+import { NavItemTitle } from './NavItemTitle';
+import NavIcon from './NavIcon';
+
+type Props = {
+  extension: TabRoutePageExtension;
+};
+
+export const NavItemTabRoute: React.FC<Props> = ({
+  extension: {
+    properties: { id, href, path, dataAttributes, title, iconRef },
+  },
+}) => {
+  const allTabExtensions = useExtensions<TabRouteTabExtension>(isTabRouteTabExtension);
+  const tabs = React.useMemo(
+    () => allTabExtensions.filter((tab) => tab.properties.pageId === id),
+    [allTabExtensions, id],
+  );
+  const isMatch = !!useMatch(path);
+
+  // Don't render nav item if no tabs are registered
+  if (tabs.length === 0) {
+    return null;
+  }
+
+  return (
+    <NavItem isActive={isMatch}>
+      <Link {...dataAttributes} to={href}>
+        <NavItemTitle
+          title={title}
+          navIcon={iconRef ? <NavIcon componentRef={iconRef} /> : null}
+          statusIcon={null}
+        />
+      </Link>
+    </NavItem>
+  );
+};

frontend/src/app/navigation/NavSection.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import { matchPath, useLocation } from 'react-router-dom';
 import { NavExpandable } from '@patternfly/react-core';
-import { LoadedExtension } from '@openshift/dynamic-plugin-sdk';
+import type { Extension, LoadedExtension } from '@openshift/dynamic-plugin-sdk';
 import {
   StatusReport,
   NavSectionExtension,
   NavExtension,
+  TabRoutePageExtension,
+  TabRouteTabExtension,
   isHrefNavItemExtension,
   isNavSectionExtension,
   isNavExtension,
+  isTabRoutePageExtension,
+  isTabRouteTabExtension,
 } from '@odh-dashboard/plugin-core/extension-points';
 import { useExtensions } from '@odh-dashboard/plugin-core';
 import { useAccessReviewExtensions } from '#~/utilities/useAccessReviewExtensions';
@@ -19,6 +23,34 @@ import { NavItemTitle } from './NavItemTitle';
 import { compareNavItemGroups } from './utils';
 import NavIcon from './NavIcon';
 
+type AnyNavExtension = NavExtension | TabRoutePageExtension;
+
+/** Returns true if the extension is a leaf nav item (href or tab-route page). */
+const isLeafNavExtension = (e: Extension): boolean =>
+  isHrefNavItemExtension(e) || isTabRoutePageExtension(e);
+
+/** Gets the path/href for active state matching from a leaf extension. */
+const getLeafPath = (e: Extension): string | undefined => {
+  if (isHrefNavItemExtension(e)) {
+    return e.properties.path ?? e.properties.href;
+  }
+  if (isTabRoutePageExtension(e)) {
+    return e.properties.path;
+  }
+  return undefined;
+};
+
+/** Gets the access review from a leaf extension. */
+const getLeafAccessReview = (e: Extension) => {
+  if (isHrefNavItemExtension(e)) {
+    return e.properties.accessReview;
+  }
+  if (isTabRoutePageExtension(e)) {
+    return e.properties.accessReview;
+  }
+  return undefined;
+};
+
 type Props = {
   extension: NavSectionExtension;
 };
@@ -30,7 +62,21 @@ export const NavSection: React.FC<Props> = ({
 }) => {
   const [status, setStatus] = React.useState<Record<string, StatusReport | undefined>>({});
   const { pathname } = useLocation();
-  const extensions = useExtensions(isNavExtension);
+  const navOnlyExtensions = useExtensions(isNavExtension);
+  const tabRoutePageExtensions = useExtensions<TabRoutePageExtension>(isTabRoutePageExtension);
+  const tabRouteTabExtensions = useExtensions<TabRouteTabExtension>(isTabRouteTabExtension);
+  // Only include tab-route pages that have at least one registered tab
+  const tabRoutePagesWithTabs = React.useMemo(
+    () =>
+      tabRoutePageExtensions.filter((page) =>
+        tabRouteTabExtensions.some((tab) => tab.properties.pageId === page.properties.id),
+      ),
+    [tabRoutePageExtensions, tabRouteTabExtensions],
+  );
+  const extensions: LoadedExtension<AnyNavExtension>[] = React.useMemo(
+    () => [...navOnlyExtensions, ...tabRoutePagesWithTabs],
+    [navOnlyExtensions, tabRoutePagesWithTabs],
+  );
 
   const navExtensions = React.useMemo(
     () =>
@@ -45,9 +91,9 @@ export const NavSection: React.FC<Props> = ({
     navExtensions.forEach((child) => parentByIdMap.set(child.properties.id, id));
 
     const collectDescendants = (
-      roots: LoadedExtension<NavExtension>[],
-    ): LoadedExtension<NavExtension>[] => {
-      return roots.flatMap((ext) => {
+      roots: LoadedExtension<AnyNavExtension>[],
+    ): LoadedExtension<AnyNavExtension>[] =>
+      roots.flatMap((ext) => {
         if (isNavSectionExtension(ext)) {
           const currentSectionId = ext.properties.id;
           const children = extensions.filter(
@@ -58,7 +104,6 @@ export const NavSection: React.FC<Props> = ({
         }
         return [ext];
       });
-    };
 
     return {
       descendantExtensions: collectDescendants(navExtensions),
@@ -68,11 +113,11 @@ export const NavSection: React.FC<Props> = ({
 
   const [allowedDescendants, isAllowedLoaded] = useAccessReviewExtensions(
     descendantExtensions,
-    (e) => (isHrefNavItemExtension(e) ? e.properties.accessReview : undefined),
+    (e) => getLeafAccessReview(e),
   );
 
-  const { visibleHrefIds, visibleSectionIds } = React.useMemo(() => {
-    const hrefIds = new Set<string>();
+  const { visibleLeafIds, visibleSectionIds } = React.useMemo(() => {
+    const leafIds = new Set<string>();
     const sectionIds = new Set<string>();
 
     const addAncestorSections = (childId: string): void => {
@@ -84,38 +129,37 @@ export const NavSection: React.FC<Props> = ({
     };
 
     allowedDescendants.forEach((ext) => {
-      if (isHrefNavItemExtension(ext)) {
-        const hrefId = ext.properties.id;
-        hrefIds.add(hrefId);
-        addAncestorSections(hrefId);
+      if (isLeafNavExtension(ext)) {
+        const leafId = ext.properties.id;
+        leafIds.add(leafId);
+        addAncestorSections(leafId);
       }
     });
 
-    return { visibleHrefIds: hrefIds, visibleSectionIds: sectionIds };
+    return { visibleLeafIds: leafIds, visibleSectionIds: sectionIds };
   }, [allowedDescendants, parentById]);
 
   const visibleChildren = React.useMemo(
     () =>
       navExtensions.filter((e) => {
-        if (isHrefNavItemExtension(e)) {
-          return visibleHrefIds.has(e.properties.id);
+        if (isLeafNavExtension(e)) {
+          return visibleLeafIds.has(e.properties.id);
         }
         if (isNavSectionExtension(e)) {
           return visibleSectionIds.has(e.properties.id);
         }
         return false;
       }),
-    [navExtensions, visibleHrefIds, visibleSectionIds],
+    [navExtensions, visibleLeafIds, visibleSectionIds],
   );
 
   const isActive = React.useMemo(
     () =>
       isAllowedLoaded &&
-      allowedDescendants.some(
-        (e) =>
-          isHrefNavItemExtension(e) &&
-          !!matchPath(e.properties.path ?? e.properties.href, pathname),
-      ),
+      allowedDescendants.some((e) => {
+        const path = getLeafPath(e);
+        return path ? !!matchPath(path, pathname) : false;
+      }),
     [isAllowedLoaded, allowedDescendants, pathname],
   );