From 291181473a76a632680f24f3c360028a74678ae7 Mon Sep 17 00:00:00 2001
From: Gage Krumbach <gkrumbach@gmail.com>
Date: Thu, 11 Apr 2024 11:35:59 -0500
Subject: [PATCH] Add InvalidArgoDeploymentAlert component to AppRoutes

Update link text in InvalidArgoDeploymentAlert component
---
 frontend/src/app/AppRoutes.tsx                |  2 +
 frontend/src/concepts/areas/types.ts          | 14 +++++-
 frontend/src/concepts/areas/utils.ts          |  2 +
 .../content/InvalidArgoDeploymentAlert.tsx    | 48 +++++++++++++++++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/concepts/pipelines/content/InvalidArgoDeploymentAlert.tsx

diff --git a/frontend/src/app/AppRoutes.tsx b/frontend/src/app/AppRoutes.tsx
index f80a68fc35..d337dac202 100644
--- a/frontend/src/app/AppRoutes.tsx
+++ b/frontend/src/app/AppRoutes.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
+import { InvalidArgoDeploymentAlert } from '~/concepts/pipelines/content/InvalidArgoDeploymentAlert';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import UnauthorizedError from '~/pages/UnauthorizedError';
 import { useUser } from '~/redux/selectors';
@@ -66,6 +67,7 @@ const AppRoutes: React.FC = () => {
 
   return (
     <React.Suspense fallback={<ApplicationsPage title="" description="" loaded={false} empty />}>
+      <InvalidArgoDeploymentAlert />
       <Routes>
         <Route path="/" element={<InstalledApplications />} />
         <Route path="/explore" element={<ExploreApplications />} />
diff --git a/frontend/src/concepts/areas/types.ts b/frontend/src/concepts/areas/types.ts
index 9cd04fef5a..bdb207436d 100644
--- a/frontend/src/concepts/areas/types.ts
+++ b/frontend/src/concepts/areas/types.ts
@@ -1,5 +1,10 @@
 import { EitherOrBoth } from '~/typeHelpers';
-import { DashboardCommonConfig } from '~/k8sTypes';
+import {
+  DashboardCommonConfig,
+  DashboardConfigKind,
+  DataScienceClusterInitializationKindStatus,
+  DataScienceClusterKindStatus,
+} from '~/k8sTypes';
 
 // TODO: clean up this definition / update the DashboardConfig to a better state
 export type FeatureFlag = keyof Omit<DashboardCommonConfig, 'modelMetricsNamespace'>;
@@ -12,6 +17,7 @@ export type IsAreaAvailableStatus = {
   reliantAreas: { [key in SupportedArea]?: boolean } | null; // only needs 1 to be true
   requiredComponents: { [key in StackComponent]?: boolean } | null;
   requiredCapabilities: { [key in StackCapability]?: boolean } | null;
+  customCondition: (conditionFunc: CustomConditionFunction) => boolean;
 };
 
 /** All areas that we need to support in some fashion or another */
@@ -72,6 +78,12 @@ export enum StackCapability {
   SERVICE_MESH_AUTHZ = 'CapabilityServiceMeshAuthorization',
 }
 
+export type CustomConditionFunction = (state: {
+  dashboardConfigSpec: DashboardConfigKind['spec'];
+  dscStatus: DataScienceClusterKindStatus | null;
+  dsciStatus: DataScienceClusterInitializationKindStatus | null;
+}) => boolean;
+
 // TODO: Support extra operators, like the pipelines operator -- maybe as a "external dependency need?"
 type SupportedComponentFlagValue = {
   /**
diff --git a/frontend/src/concepts/areas/utils.ts b/frontend/src/concepts/areas/utils.ts
index 525fd43a7c..2957080141 100644
--- a/frontend/src/concepts/areas/utils.ts
+++ b/frontend/src/concepts/areas/utils.ts
@@ -99,5 +99,7 @@ export const isAreaAvailable = (
     featureFlags: featureFlagState,
     requiredComponents: requiredComponentsState,
     requiredCapabilities: requiredCapabilitiesState,
+    customCondition: (conditionFunc) =>
+      conditionFunc({ dashboardConfigSpec, dscStatus, dsciStatus }),
   };
 };
diff --git a/frontend/src/concepts/pipelines/content/InvalidArgoDeploymentAlert.tsx b/frontend/src/concepts/pipelines/content/InvalidArgoDeploymentAlert.tsx
new file mode 100644
index 0000000000..c977a23694
--- /dev/null
+++ b/frontend/src/concepts/pipelines/content/InvalidArgoDeploymentAlert.tsx
@@ -0,0 +1,48 @@
+import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
+import React from 'react';
+import { useBrowserStorage } from '~/components/browserStorage';
+import { useIsAreaAvailable, SupportedArea } from '~/concepts/areas';
+
+const INVALID_ARGO_DEPLOYMENT_DOCUMENTATION_URL = '';
+
+export const InvalidArgoDeploymentAlert: React.FC = () => {
+  const [invalidArgoDeploymentAlertDismissed, setInvalidArgoDeploymentAlertDismissed] =
+    useBrowserStorage('invalidArgoDeploymentAlertDismissed', false, true, true);
+
+  const showMessage =
+    useIsAreaAvailable(SupportedArea.DS_PIPELINES).customCondition(
+      ({ dscStatus }) =>
+        !!dscStatus?.conditions.some(
+          (c) => c.type === 'CapabilityDSPv2Argo' && c.status === 'False',
+        ),
+    ) && !invalidArgoDeploymentAlertDismissed;
+
+  if (!showMessage) {
+    return null;
+  }
+
+  return (
+    <Alert
+      actionLinks={
+        <AlertActionLink
+          component="a"
+          href={INVALID_ARGO_DEPLOYMENT_DOCUMENTATION_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          View documentation
+        </AlertActionLink>
+      }
+      actionClose={
+        <AlertActionCloseButton onClose={() => setInvalidArgoDeploymentAlertDismissed(true)} />
+      }
+      isInline
+      variant="warning"
+      title="Data Science Pipelines enablement failed"
+    >
+      Data Science Pipelines could not be enabled because a version of Argo Workflow that is not
+      managed by Red Hat is installed on your cluster. To learn more, view the Red Hat Openshift AI
+      2.9 documentation.
+    </Alert>
+  );
+};