Merge pull request #2018 from andrewballantyne/dsp-removed-not-disabled

Handle Removed but not Disabled DS Pipelines

frontend/src/concepts/pipelines/context/PipelinesContextWorkaround.tsx

@@ -0,0 +1,52 @@
+/**
+ * This file is immediately deprecated, this is for a small fix for the next release and will
+ * be fixed by https://github.com/opendatahub-io/odh-dashboard/issues/2010
+ */
+import * as React from 'react';
+import axios from 'axios';
+import { Bullseye, Spinner } from '@patternfly/react-core';
+import { DataScienceClusterKindStatus } from '~/k8sTypes';
+import useFetchState from '~/utilities/useFetchState';
+import { PipelineContextProvider as PipelineContextProviderActual } from './PipelinesContext';
+
+/**
+ * Should only return `null` when on v1 Operator.
+ */
+const fetchDscStatus = (): Promise<DataScienceClusterKindStatus | null> => {
+  const url = '/api/dsc/status';
+  return axios
+    .get(url)
+    .then((response) => response.data)
+    .catch((e) => {
+      if (e.response.status === 404) {
+        // DSC is not available, assume v1 Operator
+        return null;
+      }
+      throw new Error(e.response.data.message);
+    });
+};
+
+const useFetchDscStatus = () => useFetchState(fetchDscStatus, null);
+
+/** @deprecated - replaced by https://github.com/opendatahub-io/odh-dashboard/issues/2010 */
+export const PipelineContextProviderWorkaround: React.FC<
+  React.ComponentProps<typeof PipelineContextProviderActual>
+> = ({ children, ...props }) => {
+  const [dscStatus, loaded] = useFetchDscStatus();
+
+  if (!loaded) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  if (dscStatus && !dscStatus.installedComponents?.['data-science-pipelines-operator']) {
+    // eslint-disable-next-line no-console
+    console.log('Not rendering DS Pipelines Context because there is no backing component.');
+    return <>{children}</>;
+  }
+
+  return <PipelineContextProviderActual {...props}>{children}</PipelineContextProviderActual>;
+};

frontend/src/concepts/pipelines/context/index.ts

@@ -6,3 +6,4 @@ export {
   ViewServerModal,
   PipelineServerTimedOut,
 } from './PipelinesContext';
+export { PipelineContextProviderWorkaround } from './PipelinesContextWorkaround';

frontend/src/k8sTypes.ts

@@ -783,6 +783,6 @@ type ComponentNames =
 /** We don't need or should ever get the full kind, this is the status section */
 export type DataScienceClusterKindStatus = {
   conditions: K8sCondition[];
-  installedComponents: { [key in ComponentNames]: boolean };
+  installedComponents: { [key in ComponentNames]?: boolean };
   phase?: string;
 };

frontend/src/pages/projects/ProjectDetailsContext.tsx

@@ -16,7 +16,7 @@ import useInferenceServices from '~/pages/modelServing/useInferenceServices';
 import { ContextResourceData } from '~/types';
 import { useContextResourceData } from '~/utilities/useContextResourceData';
 import useServingRuntimeSecrets from '~/pages/modelServing/screens/projects/useServingRuntimeSecrets';
-import { PipelineContextProvider } from '~/concepts/pipelines/context';
+import { PipelineContextProviderWorkaround } from '~/concepts/pipelines/context';
 import { useAppContext } from '~/app/AppContext';
 import { featureFlagEnabled } from '~/utilities/utils';
 import { byName, ProjectsContext } from '~/concepts/projects/ProjectsContext';
@@ -188,9 +188,9 @@ const ProjectDetailsContextProvider: React.FC = () => {
       }}
     >
       {featureFlagEnabled(dashboardConfig.spec.dashboardConfig.disablePipelines) ? (
-        <PipelineContextProvider namespace={project.metadata.name}>
+        <PipelineContextProviderWorkaround namespace={project.metadata.name}>
           <Outlet />
-        </PipelineContextProvider>
+        </PipelineContextProviderWorkaround>
       ) : (
         <Outlet />
       )}

frontend/src/pages/projects/screens/detail/pipelines/PipelinesSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Divider } from '@patternfly/react-core';
+import { Alert, Divider } from '@patternfly/react-core';
 import { ProjectSectionID } from '~/pages/projects/screens/detail/types';
 import { ProjectSectionTitles } from '~/pages/projects/screens/detail/const';
 import DetailsSection from '~/pages/projects/screens/detail/DetailsSection';
@@ -12,11 +12,28 @@ import PipelineServerActions from '~/concepts/pipelines/content/pipelinesDetails
 
 const PipelinesSection: React.FC = () => {
   const {
+    project,
     pipelinesServer: { initializing, installed, timedOut },
   } = usePipelinesAPI();
 
   const [isPipelinesEmpty, setIsPipelinesEmpty] = React.useState(false);
 
+  if (!project) {
+    // Only possible today because of not having the API installed
+    // TODO: Fix in https://github.com/opendatahub-io/odh-dashboard/issues/2010
+    return (
+      <DetailsSection
+        id={ProjectSectionID.PIPELINES}
+        title={ProjectSectionTitles[ProjectSectionID.PIPELINES]}
+        isLoading={false}
+        isEmpty={false}
+        emptyState={null}
+      >
+        <Alert isInline variant="danger" title="Pipelines not installed" />
+      </DetailsSection>
+    );
+  }
+
   return (
     <>
       <DetailsSection