[Data Explorer] Add dismissible callout for discover (#4857)

* add callout * add dimissible --------- Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
opensearch-project · Aug 30, 2023 · 58ee450 · 58ee450
1 parent 2738131
commit 58ee450
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiCallOut, EuiLink } from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
@@ -25,6 +25,32 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     bucketInterval: {},
   });
 
+  const [isCallOutVisible, setIsCallOutVisible] = useState(true);
+  const closeCallOut = () => setIsCallOutVisible(false);
+
+  let callOut;
+
+  if (isCallOutVisible) {
+    callOut = (
+      <EuiFlexItem grow={false}>
+        <EuiCallOut
+          title="You're viewing Discover 2.0. The old Discover app will be retired in OpenSearch version 2.11. To switch back to the old version, toggle the New Discover."
+          iconType="alert"
+          dismissible
+          onDismissible={closeCallOut}
+        >
+          <p>
+            To provide feedback,{' '}
+            <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues">
+              open an issue
+            </EuiLink>
+            .
+          </p>
+        </EuiCallOut>
+      </EuiFlexItem>
+    );
+  }
+
   const { status } = fetchState;
 
   useEffect(() => {
@@ -65,6 +91,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
       {status === ResultStatus.LOADING && <LoadingSpinner />}
       {status === ResultStatus.READY && (
         <>
+          {callOut}
           <EuiFlexItem grow={false}>
             <EuiPanel hasBorder={false} hasShadow={false} color="transparent" paddingSize="s">
               <EuiPanel>

diff --git a/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx b/src/plugins/discover_legacy/public/application/components/discover_legacy.tsx
@@ -30,7 +30,7 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
-import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonEmpty, EuiButtonIcon, EuiCallOut, EuiLink } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { IUiSettingsClient, MountPoint } from 'opensearch-dashboards/public';
@@ -132,6 +132,7 @@ export function DiscoverLegacy({
   vis,
 }: DiscoverLegacyProps) {
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
+  const [isCallOutVisible, setIsCallOutVisible] = useState(true);
   const { TopNavMenu } = getServices().navigation.ui;
   const { savedSearch, indexPatternList } = opts;
   const bucketAggConfig = vis?.data?.aggs?.aggs[1];
@@ -141,6 +142,31 @@ export function DiscoverLegacy({
       : undefined;
   const [fixedScrollEl, setFixedScrollEl] = useState<HTMLElement | undefined>();
 
+  const closeCallOut = () => setIsCallOutVisible(false);
+
+  let callOut;
+
+  if (isCallOutVisible) {
+    callOut = (
+      <div>
+        <EuiCallOut
+          title="This Discover app version will be retired in OpenSearch version 2.11. To switch to the new Discover 2.0 version, toggle the New Discover."
+          iconType="alert"
+          dismissible
+          onDismissible={closeCallOut}
+        >
+          <p>
+            To provide feedback,{' '}
+            <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues">
+              open an issue
+            </EuiLink>
+            .
+          </p>
+        </EuiCallOut>
+      </div>
+    );
+  }
+
   useEffect(() => (fixedScrollEl ? opts.fixedScroll(fixedScrollEl) : undefined), [
     fixedScrollEl,
     opts,
@@ -218,6 +244,7 @@ export function DiscoverLegacy({
               />
             </div>
             <div className={`dscWrapper ${mainSectionClassName}`}>
+              {callOut}
               {resultState === 'none' && (
                 <DiscoverNoResults
                   timeFieldName={opts.timefield}