Add experimental badging I; update plugin name (#472) (#474)

(cherry picked from commit 8583568)

Signed-off-by: Tyler Ohlsen <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

common/constants.ts

@@ -11,8 +11,8 @@ import {
 } from './interfaces';
 import { customStringify } from './utils';
 
-export const PLUGIN_ID = 'search-studio';
-export const PLUGIN_NAME = 'Search Studio';
+export const PLUGIN_ID = 'opensearch-flow';
+export const PLUGIN_NAME = 'OpenSearch Flow';
 
 /**
  * BACKEND FLOW FRAMEWORK APIs
@@ -178,6 +178,8 @@ export const WORKFLOW_TUTORIAL_LINK =
   'https://opensearch.org/docs/latest/automating-configurations/workflow-tutorial/';
 export const NORMALIZATION_PROCESSOR_LINK =
   'https://opensearch.org/docs/latest/search-plugins/search-pipelines/normalization-processor/';
+export const GITHUB_FEEDBACK_LINK =
+  'https://github.com/opensearch-project/dashboards-flow-framework/issues/new/choose';
 
 /**
  * Text chunking algorithm constants

public/general_components/experimental_badge.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiBetaBadge,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiSmallButton,
+  EuiText,
+  PopoverAnchorPosition,
+} from '@elastic/eui';
+import { GITHUB_FEEDBACK_LINK } from '../../common';
+
+interface ExperimentalBadgeProps {
+  popoverEnabled: boolean;
+  popoverAnchorPosition?: PopoverAnchorPosition;
+}
+
+/**
+ * Experimental/beta badge with an optional popover for users to provide feedback
+ */
+export function ExperimentalBadge(props: ExperimentalBadgeProps) {
+  const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+
+  return props.popoverEnabled ? (
+    <EuiPopover
+      button={
+        <EuiBetaBadge
+          size="m"
+          label=""
+          iconType={'beaker'}
+          onClick={() => setPopoverOpen(!popoverOpen)}
+        />
+      }
+      isOpen={popoverOpen}
+      closePopover={() => setPopoverOpen(false)}
+      panelPaddingSize="s"
+      anchorPosition={props.popoverAnchorPosition || 'downCenter'}
+    >
+      <EuiPopoverTitle>EXPERIMENTAL FEATURE</EuiPopoverTitle>
+      <EuiText style={{ width: '400px' }}>
+        {`OpenSearch Flow is experimental and should not be used in a\n
+        production environment.`}
+      </EuiText>
+      <EuiPopoverFooter>
+        <EuiSmallButton
+          fill={false}
+          href={GITHUB_FEEDBACK_LINK}
+          iconSide="right"
+          iconType="popout"
+          target="_blank"
+        >
+          Provide feedback on GitHub
+        </EuiSmallButton>
+      </EuiPopoverFooter>
+    </EuiPopover>
+  ) : (
+    <EuiBetaBadge label="" iconType={'beaker'} />
+  );
+}

public/general_components/index.ts

@@ -5,3 +5,5 @@
 
 export { MultiSelectFilter } from './multi_select_filter';
 export { ProcessorsTitle } from './processors_title';
+export { ExperimentalBadge } from './experimental_badge';
+export * from './service_card';

public/general_components/service_card/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { registerPluginCard } from './plugin_card';

public/general_components/service_card/plugin_card.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiSmallButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiTitle,
+} 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 pluginIcon from './icon.svg';
+import { ExperimentalBadge } from '../experimental_badge';
+
+const HEADER_TEXT = 'Design and test your search solutions with ease';
+const DESCRIPTION_TEXT =
+  'OpenSearch Flow is a visual editor for creating search AI flows to power advanced search and generative AI solutions.';
+
+export const registerPluginCard = (
+  contentManagement: ContentManagementPluginStart,
+  core: CoreStart
+) => {
+  const icon = (
+    <EuiIcon size="original" aria-label={HEADER_TEXT} type={pluginIcon} />
+  );
+
+  const footer = (
+    <EuiFlexGroup justifyContent="flexEnd">
+      <EuiFlexItem grow={false}>
+        <EuiSmallButton
+          onClick={() => {
+            core.application.navigateToApp(PLUGIN_ID);
+          }}
+        >
+          {i18n.translate('flowFrameworkDashboards.opensearchFlowCard.footer', {
+            defaultMessage: 'Try OpenSearch Flow',
+          })}
+        </EuiSmallButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  contentManagement.registerContentProvider({
+    id: 'opensearch_flow_card',
+    getContent: () => ({
+      id: 'opensearch_flow',
+      kind: 'card',
+      order: 20,
+      getTitle: () => {
+        return (
+          <EuiFlexGroup direction="row" gutterSize="xs">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="s">
+                <h3>
+                  {i18n.translate(
+                    'flowFrameworkDashboards.opensearchFlowCard.title',
+                    {
+                      defaultMessage: HEADER_TEXT,
+                    }
+                  )}
+                </h3>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ExperimentalBadge
+                popoverEnabled={true}
+                popoverAnchorPosition="upLeft"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        );
+      },
+      description: i18n.translate(
+        'flowFrameworkDashboards.opensearchFlowCard.description',
+        {
+          defaultMessage: DESCRIPTION_TEXT,
+        }
+      ),
+      getIcon: () => icon,
+      cardProps: {
+        children: footer,
+        layout: 'horizontal',
+      },
+    }),
+    getTargetArea: () => 'search_overview/config_evaluate_search',
+  });
+};

public/pages/workflow_detail/components/header.tsx

@@ -27,7 +27,7 @@ import {
 } from '../../../../common';
 import {
   APP_PATH,
-  SHOW_ACTIONS_IN_HEADER,
+  USE_NEW_HOME_PAGE,
   constructUrlWithParams,
   getDataSourceId,
   dataSourceFilterFn,
@@ -99,13 +99,13 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
 
   // When NewHomePage is enabled, use 'application' HeaderVariant; otherwise, use 'page' HeaderVariant (default).
   useEffect(() => {
-    if (SHOW_ACTIONS_IN_HEADER) {
+    if (USE_NEW_HOME_PAGE) {
       setHeaderVariant?.(HeaderVariant.APPLICATION);
     }
     return () => {
       setHeaderVariant?.();
     };
-  }, [setHeaderVariant, SHOW_ACTIONS_IN_HEADER]);
+  }, [setHeaderVariant, USE_NEW_HOME_PAGE]);
 
   const onExportButtonClick = () => {
     setIsExportModalOpen(true);
@@ -278,7 +278,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
           setIsExportModalOpen={setIsExportModalOpen}
         />
       )}
-      {SHOW_ACTIONS_IN_HEADER ? (
+      {USE_NEW_HOME_PAGE ? (
         <>
           <TopNavMenu
             appName={PLUGIN_ID}
@@ -336,7 +336,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
             showFilterBar={false}
             useDefaultBehaviors={true}
             setMenuMountPoint={getHeaderActionMenu()}
-            groupActions={SHOW_ACTIONS_IN_HEADER}
+            groupActions={true}
           />
           <HeaderControl
             setMountPoint={setAppRightControls}

public/pages/workflow_detail/resizable_workspace.tsx

@@ -21,7 +21,7 @@ import {
 import {
   isValidUiWorkflow,
   reduceToTemplate,
-  SHOW_ACTIONS_IN_HEADER,
+  USE_NEW_HOME_PAGE,
 } from '../../utils';
 import { WorkflowInputs } from './workflow_inputs';
 import { Workspace } from './workspace';
@@ -96,8 +96,8 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
       direction="horizontal"
       className="stretch-absolute"
       style={{
-        marginTop: SHOW_ACTIONS_IN_HEADER ? '0' : '58px',
-        height: SHOW_ACTIONS_IN_HEADER ? '100%' : 'calc(100% - 58px)',
+        marginTop: USE_NEW_HOME_PAGE ? '0' : '58px',
+        height: USE_NEW_HOME_PAGE ? '100%' : 'calc(100% - 58px)',
         gap: '4px',
       }}
     >

public/pages/workflow_detail/workflow_detail.tsx

@@ -21,7 +21,7 @@ import {
 import {
   APP_PATH,
   BREADCRUMBS,
-  SHOW_ACTIONS_IN_HEADER,
+  USE_NEW_HOME_PAGE,
   uiConfigToFormik,
   uiConfigToSchema,
 } from '../../utils';
@@ -109,7 +109,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   } = getCore();
   useEffect(() => {
     setBreadcrumbs(
-      SHOW_ACTIONS_IN_HEADER
+      USE_NEW_HOME_PAGE
         ? [
             BREADCRUMBS.TITLE_WITH_REF(
               dataSourceEnabled ? dataSourceId : undefined
@@ -123,7 +123,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
             { text: workflowName },
           ]
     );
-  }, [SHOW_ACTIONS_IN_HEADER, dataSourceEnabled, dataSourceId, workflowName]);
+  }, [USE_NEW_HOME_PAGE, dataSourceEnabled, dataSourceId, workflowName]);
 
   // form state
   const [formValues, setFormValues] = useState<WorkflowFormValues>({});

public/pages/workflows/import_workflow/import_workflow_modal.tsx

@@ -102,7 +102,7 @@ export function ImportWorkflowModal(props: ImportWorkflowModalProps) {
             <>
               <EuiFlexItem>
                 <EuiCallOut
-                  title="The uploaded file may not be compatible with Search Studio. You may not be able to edit or run this file with Search Studio."
+                  title="The uploaded file may not be compatible with OpenSearch Flow. You may not be able to edit or run this file with OpenSearch Flow."
                   iconType={'help'}
                   color="warning"
                 />