[Backport 2.x] Adding Search Studio card in Search Overview Page

opensearch_dashboards.json

@@ -11,7 +11,8 @@
   ],
   "optionalPlugins": [
     "dataSource",
-    "dataSourceManagement"
+    "dataSourceManagement",
+    "contentManagement"
   ],
   "supportedOSDataSourceVersions": ">=2.17.0 <4.0.0",
   "requiredOSDataSourcePlugins": [

public/general_components/service_card/search_studio_card.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { PLUGIN_ID } from '../../../common';
+import { ContentManagementPluginStart } from '../../../../../src/plugins/content_management/public';
+import { CoreStart } from '../../../../../src/core/public';
+import searchStudioIcon from './icon.svg';
+
+export const registerSearchStudioCard = (
+  contentManagement: ContentManagementPluginStart,
+  core: CoreStart
+) => {
+  const icon = (
+    <EuiIcon
+      size="original"
+      aria-label="Design and test your search solutions with ease"
+      type={searchStudioIcon}
+    />
+  );
+
+  const footer = (
+    <EuiFlexGroup justifyContent="flexEnd">
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          size="s"
+          onClick={() => {
+            core.application.navigateToApp(PLUGIN_ID);
+          }}
+        >
+          {i18n.translate('flowFrameworkDashboards.searchStudioCard.footer', {
+            defaultMessage: 'Try OpenSearch Studio',
+          })}
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  contentManagement.registerContentProvider({
+    id: 'search_studio_card',
+    getContent: () => ({
+      id: 'search_studio',
+      kind: 'card',
+      order: 20,
+      title: i18n.translate('flowFrameworkDashboards.searchStudioCard.title', {
+        defaultMessage: 'Design and test your search solutions with ease',
+      }),
+      description: i18n.translate(
+        'flowFrameworkDashboards.searchStudioCard.description',
+        {
+          defaultMessage:
+            'OpenSearch Studio is a visual editor for creating search AI flows to power advanced search and generative AI solutions.',
+        }
+      ),
+      getIcon: () => icon,
+      cardProps: {
+        children: footer,
+        layout: 'horizontal',
+      },
+    }),
+    getTargetArea: () => 'search_overview/config_evaluate_search',
+  });
+};

public/plugin.ts

@@ -16,6 +16,7 @@ import {
   FlowFrameworkDashboardsPluginSetup,
   AppPluginStartDependencies,
 } from './types';
+import { registerSearchStudioCard } from './general_components/service_card/search_studio_card';
 import { PLUGIN_ID, PLUGIN_NAME } from '../common';
 import {
   setCore,
@@ -84,12 +85,15 @@ export class FlowFrameworkDashboardsPlugin
 
   public start(
     core: CoreStart,
-    { navigation }: AppPluginStartDependencies
+    { navigation, contentManagement }: AppPluginStartDependencies,
   ): FlowFrameworkDashboardsPluginStart {
     setNotifications(core.notifications);
     setSavedObjectsClient(core.savedObjects.client);
     setNavigationUI(navigation.ui);
     setApplication(core.application);
+    if (contentManagement) {
+      registerSearchStudioCard(contentManagement, core);
+    }
     return {};
   }
 

public/types.ts

@@ -6,14 +6,17 @@
 import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
 import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
 import { DataSourcePluginSetup } from '../../../src/plugins/data_source/public';
+import { ContentManagementPluginStart } from '../../../src/plugins/content_management/public';
 
 export interface FlowFrameworkDashboardsPluginSetup {
   dataSourceManagement: DataSourceManagementPluginSetup;
   dataSource: DataSourcePluginSetup;
 }
 
-export interface FlowFrameworkDashboardsPluginStart {}
+export interface FlowFrameworkDashboardsPluginStart {
+}
 
 export interface AppPluginStartDependencies {
   navigation: NavigationPublicPluginStart;
+  contentManagement?: ContentManagementPluginStart;
 }