[OSCI] Removed KUI usage in visualizations -- Completion of Original PR

CHANGELOG.md

@@ -136,6 +136,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 - Remove unused Sass in `tile_map` plugin ([#4110](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4110))
 - [Multiple Datasource] Move data source selectable to its own folder, fix test and a few type errors for data source selectable component ([#6287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6287))
+- Remove KUI usage in `disabled_lab_visualization` ([#5462](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5462))
 
 ### 🔩 Tests
 

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;

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>
   );
 }

src/plugins/visualizations/public/plugin.ts

@@ -63,6 +63,7 @@
   setSavedSearchLoader,
   setEmbeddable,
   setNotifications,
+  setDocLinks,
 } from './services';
 import {
   VISUALIZE_EMBEDDABLE_TYPE,
@@ -96,6 +97,7 @@
 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 @@
   getAttributeService: DashboardStart['getAttributeService'];
   savedObjectsClient: SavedObjectsClientContract;
   notifications: NotificationsStart;
+  docLinks: DocLinksStart;
 }
 
 /**
@@ -224,6 +227,7 @@
     });
     setSavedSearchLoader(savedSearchLoader);
     setNotifications(core.notifications);
+    setDocLinks(core.docLinks);
     return {
       ...types,
       showNewVisModal,

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');