Update project selector

opendatahub-io · Sep 18, 2024 · 4d6e7ee · 4d6e7ee
1 parent cd5bce0
commit 4d6e7ee
Show file tree

Hide file tree

Showing 34 changed files with 175 additions and 229 deletions.
diff --git a/backend/src/utils/constants.ts b/backend/src/utils/constants.ts
@@ -64,7 +64,7 @@ export const blankDashboardCR: DashboardConfig = {
       disablePipelineExperiments: false,
       disableDistributedWorkloads: false,
       disableModelRegistry: true,
-      disableConnectionTypes: true,
+      disableConnectionTypes: false,
       disableStorageClasses: true,
     },
     notebookController: {

diff --git a/frontend/src/components/searchSelector/SearchSelector.tsx b/frontend/src/components/searchSelector/SearchSelector.tsx
@@ -91,6 +91,7 @@ const SearchSelector: React.FC<SearchSelectorProps> = ({
           isFullWidth={isFullWidth}
           data-testid={`${dataTestId}-toggle`}
           variant={toggleVariant}
+          className={toggleVariant === 'plainText' ? 'pf-v5-u-px-0 pf-v5-u-py-sm' : undefined}
         >
           <Truncate content={toggleText} />
         </MenuToggle>

diff --git a/frontend/src/concepts/pipelines/content/createRun/CloneRecurringRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CloneRecurringRunPage.tsx
@@ -11,6 +11,7 @@ import { RunTypeOption } from './types';
 
 type CloneRecurringRunPageProps = {
   detailsRedirect: (recurringRunId: string) => string;
+  getProjectRedirectPath: (namespace: string) => string;
   contextExperiment?: ExperimentKFv2 | null;
   contextPipeline?: PipelineKFv2 | null;
   contextPipelineVersion?: PipelineVersionKFv2 | null;
@@ -20,6 +21,7 @@ const CloneRecurringRunPage: React.FC<PathProps & CloneRecurringRunPageProps> =
   breadcrumbPath,
   contextPath,
   detailsRedirect,
+  getProjectRedirectPath,
   ...props
 }) => {
   const { recurringRunId } = useParams();
@@ -47,6 +49,7 @@ const CloneRecurringRunPage: React.FC<PathProps & CloneRecurringRunPageProps> =
       loaded={loaded}
       loadError={error}
       empty={false}
+      getRedirectPath={getProjectRedirectPath}
     >
       <RunPage
         cloneRun={recurringRun}

diff --git a/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx
@@ -11,6 +11,7 @@ import { RunTypeOption } from './types';
 
 type CloneRunPageProps = {
   detailsRedirect: (runId: string) => string;
+  getProjectRedirectPath: (namespace: string) => string;
   contextExperiment?: ExperimentKFv2 | null;
   contextPipeline?: PipelineKFv2 | null;
   contextPipelineVersion?: PipelineVersionKFv2 | null;
@@ -20,6 +21,7 @@ const CloneRunPage: React.FC<PathProps & CloneRunPageProps> = ({
   breadcrumbPath,
   contextPath,
   detailsRedirect,
+  getProjectRedirectPath,
   ...props
 }) => {
   const { runId } = useParams();
@@ -47,6 +49,7 @@ const CloneRunPage: React.FC<PathProps & CloneRunPageProps> = ({
       loaded={loaded}
       loadError={error}
       empty={false}
+      getRedirectPath={getProjectRedirectPath}
     >
       <RunPage
         cloneRun={run}

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -129,6 +129,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
         })}
         empty={false}
         loaded={isLoaded}
+        getRedirectPath={(ns) => `${ns}/pipelines`}
         headerAction={
           isPipelineVersionLoaded && (
             <Flex

diff --git a/frontend/src/concepts/projects/ProjectSelector.tsx b/frontend/src/concepts/projects/ProjectSelector.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Bullseye, Divider, Flex, FlexItem, MenuItem, Truncate } from '@patternfly/react-core';
+import { Divider, MenuItem, MenuToggle, Truncate } from '@patternfly/react-core';
 import { byName, ProjectsContext } from '~/concepts/projects/ProjectsContext';
-import { ProjectObjectType, typedObjectImage } from '~/concepts/design/utils';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
 import SearchSelector from '~/components/searchSelector/SearchSelector';
 import { ProjectKind } from '~/k8sTypes';
@@ -12,6 +11,7 @@ type ProjectSelectorProps = {
   invalidDropdownPlaceholder?: string;
   selectAllProjects?: boolean;
   primary?: boolean;
+  variant?: React.ComponentProps<typeof MenuToggle>['variant'];
   filterLabel?: string;
   showTitle?: boolean;
   selectorLabel?: string;
@@ -24,6 +24,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   invalidDropdownPlaceholder,
   selectAllProjects,
   primary,
+  variant = 'plainText',
   filterLabel,
   showTitle = false,
   selectorLabel = 'Project',
@@ -48,7 +49,10 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
     : projects;
   const visibleProjects = filteredProjects.filter(bySearchText);
 
-  const toggleLabel = projects.length === 0 ? 'No projects' : selectionDisplayName;
+  const toggleLabel =
+    projects.length === 0
+      ? 'No projects'
+      : `${showTitle ? `${selectorLabel}: ` : ''}${selectionDisplayName}`;
   const selector = (
     <SearchSelector
       dataTestId="project-selector"
@@ -60,7 +64,7 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
       searchPlaceholder="Project name"
       searchValue={searchText}
       toggleText={toggleLabel}
-      toggleVariant={primary ? 'primary' : undefined}
+      toggleVariant={primary ? 'primary' : variant}
     >
       <>
         {selectAllProjects && (
@@ -96,23 +100,6 @@ const ProjectSelector: React.FC<ProjectSelectorProps> = ({
     </SearchSelector>
   );
 
-  if (showTitle) {
-    return (
-      <Flex spaceItems={{ default: 'spaceItemsXs' }} alignItems={{ default: 'alignItemsCenter' }}>
-        <img
-          src={typedObjectImage(ProjectObjectType.project)}
-          alt=""
-          style={{ height: 'var(--pf-v5-global--icon--FontSize--lg)' }}
-        />
-        <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-          <FlexItem>
-            <Bullseye>{selectorLabel}</Bullseye>
-          </FlexItem>
-          <FlexItem>{selector}</FlexItem>
-        </Flex>
-      </Flex>
-    );
-  }
   return selector;
 };
 

diff --git a/frontend/src/pages/ApplicationsPage.tsx b/frontend/src/pages/ApplicationsPage.tsx
@@ -16,6 +16,7 @@ import {
   EmptyStateHeader,
   Flex,
 } from '@patternfly/react-core';
+import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator';
 
 type ApplicationsPageProps = {
   title?: React.ReactNode;
@@ -30,6 +31,7 @@ type ApplicationsPageProps = {
   emptyStatePage?: React.ReactNode;
   headerAction?: React.ReactNode;
   headerContent?: React.ReactNode;
+  getRedirectPath?: (namespace: string) => string;
   provideChildrenPadding?: boolean;
   removeChildrenTopPadding?: boolean;
   subtext?: React.ReactNode;
@@ -50,6 +52,7 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
   emptyStatePage,
   headerAction,
   headerContent,
+  getRedirectPath,
   provideChildrenPadding,
   removeChildrenTopPadding,
   subtext,
@@ -143,6 +146,23 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
 
   return (
     <>
+      {getRedirectPath ? (
+        <PageSection
+          variant="light"
+          stickyOnBreakpoint={{ default: 'top' }}
+          className="pf-v5-u-py-0"
+          style={{
+            borderBottom:
+              'var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100)',
+          }}
+        >
+          <ProjectSelectorNavigator
+            getRedirectPath={getRedirectPath}
+            showTitle
+            invalidDropdownPlaceholder="Select project"
+          />
+        </PageSection>
+      ) : null}
       {breadcrumb && <PageBreadcrumb>{breadcrumb}</PageBreadcrumb>}
       {!noHeader && renderHeader()}
       {renderContents()}

diff --git a/frontend/src/pages/ComingSoonPage.tsx b/frontend/src/pages/ComingSoonPage.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { PageSection, Stack, StackItem, Title } from '@patternfly/react-core';
 import EmptyDetailsView from '~/components/EmptyDetailsView';
-import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator';
+import ApplicationsPage from '~/pages/ApplicationsPage';
 
 type ComingSoonPageProps = {
   title: string;
@@ -10,31 +9,19 @@ type ComingSoonPageProps = {
 };
 
 const ComingSoonPage: React.FC<ComingSoonPageProps> = ({ title, namespaced, path }) => (
-  <PageSection aria-label="details-section" variant="light">
-    <Stack hasGutter>
-      {namespaced ? (
-        <StackItem>
-          <ProjectSelectorNavigator
-            getRedirectPath={(ns) => `/projects/${ns}/${path}`}
-            showTitle
-            invalidDropdownPlaceholder="Select project"
-          />
-        </StackItem>
-      ) : null}
-      <StackItem>
-        <Title headingLevel="h2" size="xl">
-          {title}
-        </Title>
-      </StackItem>
-      <StackItem isFilled>
-        <EmptyDetailsView
-          title="This page is coming soon."
-          description="Not yet implemented"
-          imageAlt="coming soon"
-        />
-      </StackItem>
-    </Stack>
-  </PageSection>
+  <ApplicationsPage
+    loaded
+    empty
+    getRedirectPath={namespaced ? (ns) => `/projects/${ns}/${path}` : undefined}
+    title={title}
+    emptyStatePage={
+      <EmptyDetailsView
+        title="This page is coming soon."
+        description="Not yet implemented"
+        imageAlt="coming soon"
+      />
+    }
+  />
 );
 
 export default ComingSoonPage;
diff --git a/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx b/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx
@@ -7,7 +7,6 @@ import DistributedWorkloadsNoProjects from '~/pages/distributedWorkloads/global/
 import GlobalDistributedWorkloadsTabs from '~/pages/distributedWorkloads/global/GlobalDistributedWorkloadsTabs';
 import { MetricsCommonContextProvider } from '~/concepts/metrics/MetricsCommonContext';
 import { RefreshIntervalTitle } from '~/concepts/metrics/types';
-import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator';
 import { useQueryParams } from '~/utilities/useQueryParams';
 
 const title = 'Distributed Workload Metrics';
@@ -44,14 +43,7 @@ const GlobalDistributedWorkloads: React.FC = () => {
       {...{ title, description }}
       loaded
       empty={false}
-      headerContent={
-        <ProjectSelectorNavigator
-          getRedirectPath={(ns: string) =>
-            `/projects/${ns}/distributedWorkloads?tab=${activeTab.path}`
-          }
-          showTitle
-        />
-      }
+      getRedirectPath={(ns: string) => `/projects/${ns}/distributedWorkloads?tab=${activeTab.path}`}
     >
       <MetricsCommonContextProvider initialRefreshInterval={RefreshIntervalTitle.THIRTY_MINUTES}>
         <DistributedWorkloadsContextProvider namespace={preferredProject.metadata.name}>

diff --git a/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeView.tsx b/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeView.tsx
@@ -18,7 +18,7 @@ const CustomServingRuntimeView: React.FC = () => {
       empty={servingRuntimeTemplates.length === 0}
       emptyStatePage={<EmptyCustomServingRuntime />}
       provideChildrenPadding
-      headerContent={<CustomServingRuntimeHeaderLabels />}
+      headerAction={<CustomServingRuntimeHeaderLabels />}
     >
       <CustomServingRuntimeListView />
     </ApplicationsPage>

diff --git a/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx b/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx
@@ -5,7 +5,6 @@ import { byName, ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import InvalidProject from '~/concepts/projects/InvalidProject';
 import ModelServingContextProvider from '~/pages/modelServing/ModelServingContext';
 import ModelServingNoProjects from '~/pages/modelServing/screens/global/ModelServingNoProjects';
-import ModelServingProjectSelection from '~/pages/modelServing/screens/global/ModelServingProjectSelection';
 
 type ApplicationPageProps = React.ComponentProps<typeof ApplicationsPage>;
 type EmptyStateProps = 'emptyStatePage' | 'empty';
@@ -65,7 +64,7 @@ const GlobalModelServingCoreLoader: React.FC<GlobalModelServingCoreLoaderProps>
       title="Deployed models"
       description="Manage and view the health and performance of your deployed models."
       loaded
-      headerContent={<ModelServingProjectSelection getRedirectPath={getInvalidRedirectPath} />}
+      getRedirectPath={getInvalidRedirectPath}
       provideChildrenPadding
     />
   );

diff --git a/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx b/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx
@@ -8,7 +8,6 @@ import { ProjectObjectType } from '~/concepts/design/utils';
 import TitleWithIcon from '~/concepts/design/TitleWithIcon';
 import EmptyModelServing from './EmptyModelServing';
 import InferenceServiceListView from './InferenceServiceListView';
-import ModelServingProjectSelection from './ModelServingProjectSelection';
 import ModelServingLoading from './ModelServingLoading';
 
 const ModelServingGlobal: React.FC = () => {
@@ -48,11 +47,7 @@ const ModelServingGlobal: React.FC = () => {
       description="Manage and view the health and performance of your deployed models."
       loadError={notInstalledError}
       loaded={servingRuntimesLoaded && inferenceServicesLoaded}
-      headerContent={
-        <ModelServingProjectSelection
-          getRedirectPath={(namespace: string) => `/modelServing/${namespace}`}
-        />
-      }
+      getRedirectPath={(namespace: string) => `/modelServing/${namespace}`}
       provideChildrenPadding
       loadingContent={
         currentProject ? undefined : (

diff --git a/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx b/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx
@@ -35,6 +35,7 @@ const MetricsPage: React.FC<MetricsPageProps> = ({ title, breadcrumbItems, type,
       loaded
       description={null}
       empty={false}
+      getRedirectPath={(ns) => `/modelServing/${ns}`}
       headerAction={
         tab === MetricsTabKeys.BIAS && (
           <Button

diff --git a/...c/pages/modelServing/screens/metrics/bias/BiasConfigurationPage/BiasConfigurationPage.tsx b/...c/pages/modelServing/screens/metrics/bias/BiasConfigurationPage/BiasConfigurationPage.tsx
@@ -67,6 +67,7 @@ const BiasConfigurationPage: React.FC<BiasConfigurationPageProps> = ({
             />
           </PageSection>
         }
+        getRedirectPath={(ns) => `/modelServing/${ns}`}
       >
         <BiasConfigurationTable
           inferenceService={inferenceService}