From c00c9422e6c398ff3cce1928108ee002b2f28445 Mon Sep 17 00:00:00 2001
From: saimedhi <saimedhi@amazon.com>
Date: Fri, 7 Feb 2025 13:07:51 -0800
Subject: [PATCH] adding prompt when datasource is not compatible

Signed-off-by: saimedhi <saimedhi@amazon.com>
---
 .../workflows/new_workflow/new_workflow.tsx   | 33 +++++++++++++++++--
 public/utils/constants.ts                     |  5 +++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/public/pages/workflows/new_workflow/new_workflow.tsx b/public/pages/workflows/new_workflow/new_workflow.tsx
index 0294885e..3a726143 100644
--- a/public/pages/workflows/new_workflow/new_workflow.tsx
+++ b/public/pages/workflows/new_workflow/new_workflow.tsx
@@ -11,6 +11,8 @@ import {
   EuiFlexGroup,
   EuiCompressedFieldSearch,
   EuiLoadingSpinner,
+  EuiEmptyPrompt,
+  EuiButton,
 } from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { UseCase } from './use_case';
@@ -27,7 +29,11 @@ import {
   searchConnectors,
 } from '../../../store';
 import { enrichPresetWorkflowWithUiMetadata } from './utils';
-import { getDataSourceId, isDataSourceReady } from '../../../utils';
+import {
+  getDataSourceId,
+  isDataSourceReady,
+  getAppBasePath,
+} from '../../../utils';
 import { getDataSourceEnabled } from '../../../services';
 import semver from 'semver';
 import { DataSourceAttributes } from '../../../../../../src/plugins/data_source/common/data_sources';
@@ -118,6 +124,9 @@ export function NewWorkflow(props: NewWorkflowProps) {
     WorkflowTemplate[]
   >([]);
   const [isVersionLoading, setIsVersionLoading] = useState(false);
+  const [isDataSourceIncompatible, setIsDataSourceIncompatible] = useState(
+    false
+  );
 
   // search bar state
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -159,16 +168,19 @@ export function NewWorkflow(props: NewWorkflowProps) {
         setAllWorkflows(enrichedWorkflows);
         setFilteredWorkflows(enrichedWorkflows);
         setIsVersionLoading(false);
+        setIsDataSourceIncompatible(false);
         return;
       }
 
       if (!dataSourceId) {
         setAllWorkflows([]);
         setFilteredWorkflows([]);
-        setIsVersionLoading(true);
+        setIsVersionLoading(false);
+        setIsDataSourceIncompatible(true);
         return;
       }
 
+      setIsDataSourceIncompatible(false);
       setIsVersionLoading(true);
 
       const version = await getEffectiveVersion(dataSourceId);
@@ -219,6 +231,23 @@ export function NewWorkflow(props: NewWorkflowProps) {
               <EuiLoadingSpinner size="xl" />
             </EuiFlexItem>
           </EuiFlexGroup>
+        ) : isDataSourceIncompatible ? (
+          <EuiEmptyPrompt
+            title={<h2>Incompatible data source</h2>}
+            body={
+              <p>{`No compatible data source available.
+          Add a compatible data source.`}</p>
+            }
+            actions={
+              <EuiButton
+                color="primary"
+                fill
+                href={`${getAppBasePath()}/app/management/opensearch-dashboards/dataSources`}
+              >
+                Manage data sources
+              </EuiButton>
+            }
+          />
         ) : (
           <EuiFlexGrid columns={3} gutterSize="l">
             {filteredWorkflows.map((workflow: Workflow, index) => {
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index 7206aa89..d749d16f 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -35,3 +35,8 @@ export const BREADCRUMBS = Object.freeze({
 });
 
 export const USE_NEW_HOME_PAGE = getUISettings().get('home:useNewHomePage');
+
+export const getAppBasePath = () => {
+  const currentPath = window.location.pathname;
+  return currentPath.substring(0, currentPath.indexOf('/app/'));
+};