From b361cac28c794fbdfa39747054eaad20c4e11bfb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 11 Apr 2024 06:29:29 +0000
Subject: [PATCH] [OSCI] Removed KUI usage in visualizations -- Completion of
 Original PR (#6360)

This PR completes
https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5462

Please refer to the above PR for more details

Signed-off-by: Anan Zhuang <ananzh@amazon.com>
(cherry picked from commit 46b17e4bb96e8b1293b23ac12a3ba739c2c83701)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
---
 .../public/doc_links/doc_links_service.ts     |  5 +++
 .../embeddable/disabled_lab_visualization.tsx | 44 ++++++++++++-------
 src/plugins/visualizations/public/plugin.ts   |  4 ++
 src/plugins/visualizations/public/services.ts |  3 ++
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index 0acf4524ab14..41f97033c5e3 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -424,6 +424,10 @@ export class DocLinksService {
             // https://opensearch.org/docs/latest/dashboards/visualize/viz-index/
             guide: `${OPENSEARCH_WEBSITE_DOCS}visualize/viz-index/`,
           },
+          management: {
+            // https://opensearch.org/docs/latest/dashboards/management/advanced-settings/
+            advancedSettings: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}management/advanced-settings/`,
+          },
         },
         noDocumentation: {
           auditbeat: `${OPENSEARCH_WEBSITE_DOCS}tools/index/#downloads`,
@@ -819,6 +823,7 @@ export interface DocLinksStart {
         readonly guide: string;
       };
       readonly visualize: Record<string, string>;
+      readonly management: Record<string, string>;
     };
     readonly noDocumentation: {
       readonly auditbeat: string;
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
index 79d6369fa88d..7088fdd3b7ef 100644
--- a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
+++ b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
@@ -28,29 +28,39 @@
  * under the License.
  */
 
+import React, { Fragment } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
-import React from 'react';
+import { EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
+import { getDocLinks } from '../services';
+import './_visualize_lab_disabled.scss';
 
 export function DisabledLabVisualization({ title }: { title: string }) {
+  const docLinks = getDocLinks();
+  const advancedSettingsLink = docLinks.links.opensearchDashboards.management.advancedSettings;
   return (
     <div className="visDisabledLabVisualization">
-      <div
-        className="kuiVerticalRhythm visDisabledLabVisualization__icon kuiIcon fa-flask"
-        aria-hidden="true"
+      <EuiEmptyPrompt
+        iconType="beaker"
+        titleSize="xs"
+        data-test-subj="visDisabledLabVisualization"
+        title={
+          <FormattedMessage
+            id="visualizations.disabledLabVisualizationTitle"
+            defaultMessage="{title} is an experimental visualization."
+            values={{ title: <em className="visDisabledLabVisualizationtitle">{title}</em> }}
+          />
+        }
+        body={
+          <Fragment>
+            <EuiText size="s" color="subdued">
+              <p>
+                Enable experimental visualizations within{' '}
+                <EuiLink href={advancedSettingsLink}>Advanced Settings</EuiLink>.
+              </p>
+            </EuiText>
+          </Fragment>
+        }
       />
-      <div className="kuiVerticalRhythm">
-        <FormattedMessage
-          id="visualizations.disabledLabVisualizationTitle"
-          defaultMessage="{title} is a lab visualization."
-          values={{ title: <em className="visDisabledLabVisualization__title">{title}</em> }}
-        />
-      </div>
-      <div className="kuiVerticalRhythm">
-        <FormattedMessage
-          id="visualizations.disabledLabVisualizationMessage"
-          defaultMessage="Please turn on lab-mode in the advanced settings to see lab visualizations."
-        />
-      </div>
     </div>
   );
 }
diff --git a/src/plugins/visualizations/public/plugin.ts b/src/plugins/visualizations/public/plugin.ts
index 3542e0cc26ff..bd255b82c6af 100644
--- a/src/plugins/visualizations/public/plugin.ts
+++ b/src/plugins/visualizations/public/plugin.ts
@@ -63,6 +63,7 @@ import {
   setSavedSearchLoader,
   setEmbeddable,
   setNotifications,
+  setDocLinks,
 } from './services';
 import {
   VISUALIZE_EMBEDDABLE_TYPE,
@@ -96,6 +97,7 @@ import {
 import { createSavedSearchesLoader } from '../../discover/public';
 import { DashboardStart } from '../../dashboard/public';
 import { createSavedAugmentVisLoader } from '../../vis_augmenter/public';
+import { DocLinksStart } from '../../../core/public';
 
 /**
  * Interface for this plugin's returned setup/start contracts.
@@ -133,6 +135,7 @@ export interface VisualizationsStartDeps {
   getAttributeService: DashboardStart['getAttributeService'];
   savedObjectsClient: SavedObjectsClientContract;
   notifications: NotificationsStart;
+  docLinks: DocLinksStart;
 }
 
 /**
@@ -224,6 +227,7 @@ export class VisualizationsPlugin
     });
     setSavedSearchLoader(savedSearchLoader);
     setNotifications(core.notifications);
+    setDocLinks(core.docLinks);
     return {
       ...types,
       showNewVisModal,
diff --git a/src/plugins/visualizations/public/services.ts b/src/plugins/visualizations/public/services.ts
index a99a7010af28..62266ff2ba53 100644
--- a/src/plugins/visualizations/public/services.ts
+++ b/src/plugins/visualizations/public/services.ts
@@ -54,6 +54,7 @@ import { SavedVisualizationsLoader } from './saved_visualizations';
 import { SavedObjectLoader } from '../../saved_objects/public';
 import { EmbeddableStart } from '../../embeddable/public';
 import { SavedObjectLoaderAugmentVis } from '../../vis_augmenter/public';
+import { DocLinksStart } from '../../../core/public';
 
 export const [getUISettings, setUISettings] = createGetterSetter<IUiSettingsClient>('UISettings');
 
@@ -116,3 +117,5 @@ export const [getNotifications, setNotifications] = createGetterSetter<Notificat
 export const [getSavedAugmentVisLoader, setSavedAugmentVisLoader] = createGetterSetter<
   SavedObjectLoaderAugmentVis
 >('savedAugmentVisLoader');
+
+export const [getDocLinks, setDocLinks] = createGetterSetter<DocLinksStart>('docLinks');