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

…PR (#6360) This PR completes #5462 Please refer to the above PR for more details Signed-off-by: Anan Zhuang <[email protected]> (cherry picked from commit 46b17e4) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Apr 11, 2024 · b361cac · b361cac
1 parent 38742b1
commit b361cac
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');