[D&D] Feature/experimental (#1934)

* feat: experimental banner

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat: experimental embeddable

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: experimental banner location

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx

@@ -182,21 +182,19 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
   }
 
   private filteredVisTypes(visTypes: TypesStart, query: string): VisTypeListEntry[] {
-    const types = visTypes.all().filter((type) => {
-      // Filter out all lab visualizations if lab mode is not enabled
+    const filterExperimental = (type: VisType | VisTypeAlias): boolean => {
       if (!this.props.showExperimental && type.stage === 'experimental') {
         return false;
       }
-
-      // Filter out hidden visualizations
-      if (type.hidden) {
-        return false;
-      }
-
       return true;
-    });
+    };
 
-    const allTypes = [...types, ...visTypes.getAliases()];
+    const types = visTypes
+      .all()
+      .filter(filterExperimental)
+      .filter((type) => !type.hidden); // Filter out hidden visualizations
+    const aliasedTypes = visTypes.getAliases().filter(filterExperimental);
+    const allTypes = [...types, ...aliasedTypes];
 
     let entries: VisTypeListEntry[];
     if (!query) {

src/plugins/wizard/public/application/components/experimental_info.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { memo } from 'react';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+
+export const InfoComponent = () => {
+  const title = (
+    <>
+      <FormattedMessage
+        id="wizard.experimentalInfoText"
+        defaultMessage="This editor is experimental, do not use in production.
+          For feedback, please create an issue in {githubLink}."
+        values={{
+          githubLink: (
+            <EuiLink
+              external
+              href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues/new/choose"
+              target="_blank"
+            >
+              GitHub
+            </EuiLink>
+          ),
+        }}
+      />
+    </>
+  );
+
+  return (
+    <EuiCallOut
+      className="hide-for-sharing"
+      data-test-subj="experimentalVisInfo"
+      size="s"
+      title={title}
+      iconType="beaker"
+    />
+  );
+};
+
+export const ExperimentalInfo = memo(InfoComponent);

src/plugins/wizard/public/application/components/workspace.tsx

@@ -27,6 +27,7 @@ import hand_field from '../../assets/hand_field.svg';
 import fields_bg from '../../assets/fields_bg.svg';
 
 import './workspace.scss';
+import { ExperimentalInfo } from './experimental_info';
 
 export const Workspace: FC = ({ children }) => {
   const {
@@ -84,6 +85,9 @@ export const Workspace: FC = ({ children }) => {
         <EuiFlexItem grow={false}>
           <TypeSelectorPopover />
         </EuiFlexItem>
+        <EuiFlexItem>
+          <ExperimentalInfo />
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiPanel className="wizCanvas">
         {expression ? (

src/plugins/wizard/public/embeddable/disabled_embeddable.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Embeddable, EmbeddableOutput } from '../../../embeddable/public';
+
+import { DisabledVisualization } from './disabled_visualization';
+import { WizardInput, WIZARD_EMBEDDABLE } from './wizard_embeddable';
+
+export class DisabledEmbeddable extends Embeddable<WizardInput, EmbeddableOutput> {
+  private domNode?: HTMLElement;
+  public readonly type = WIZARD_EMBEDDABLE;
+
+  constructor(private readonly title: string, initialInput: WizardInput) {
+    super(initialInput, { title });
+  }
+
+  public reload() {}
+  public render(domNode: HTMLElement) {
+    if (this.title) {
+      this.domNode = domNode;
+      ReactDOM.render(<DisabledVisualization title={this.title} />, domNode);
+    }
+  }
+
+  public destroy() {
+    if (this.domNode) {
+      ReactDOM.unmountComponentAtNode(this.domNode);
+    }
+  }
+}

src/plugins/wizard/public/embeddable/disabled_visualization.scss

@@ -0,0 +1,8 @@
+.wizDisabledVisualization {
+  width: 100%;
+  display: grid;
+  grid-gap: $euiSize;
+  place-content: center;
+  place-items: center;
+  text-align: center;
+}

src/plugins/wizard/public/embeddable/disabled_visualization.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiIcon } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+import React from 'react';
+
+import './disabled_visualization.scss';
+
+export function DisabledVisualization({ title }: { title: string }) {
+  return (
+    <div className="wizDisabledVisualization">
+      <EuiIcon type="beaker" size="xl" />
+      <div>
+        <FormattedMessage
+          id="wizard.disabledVisualizationTitle"
+          defaultMessage="{title} is an experimental visualization."
+          values={{ title: <em className="visDisabledLabVisualization__title">{title}</em> }}
+        />
+      </div>
+      <div>
+        <FormattedMessage
+          id="wizard.disabledVisualizationMessage"
+          defaultMessage="Please turn on lab-mode in the advanced settings to see these visualizations."
+        />
+      </div>
+    </div>
+  );
+}

src/plugins/wizard/public/embeddable/wizard_embeddable_factory.tsx

@@ -4,18 +4,25 @@
  */
 
 import { i18n } from '@osd/i18n';
-import { NotificationsStart, SavedObjectsClientContract } from '../../../../core/public';
+import {
+  IUiSettingsClient,
+  NotificationsStart,
+  SavedObjectsClientContract,
+} from '../../../../core/public';
 import { DataPublicPluginStart } from '../../../data/public';
 import {
   EmbeddableFactory,
   EmbeddableFactoryDefinition,
+  EmbeddableOutput,
   EmbeddableStart,
   ErrorEmbeddable,
   IContainer,
 } from '../../../embeddable/public';
 import { ExpressionsStart } from '../../../expressions/public';
+import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../visualizations/public';
 import { WizardSavedObjectAttributes } from '../../common';
 import { TypeServiceStart } from '../services/type_service';
+import { DisabledEmbeddable } from './disabled_embeddable';
 import {
   WizardEmbeddable,
   WizardInput,
@@ -30,22 +37,23 @@ interface StartServices {
   savedObjectsClient: SavedObjectsClientContract;
   notifications: NotificationsStart;
   types: TypeServiceStart;
+  uiSettings: IUiSettingsClient;
 }
 
 // TODO: use or remove?
 export type WizardEmbeddableFactory = EmbeddableFactory<
   WizardInput,
-  WizardOutput,
-  WizardEmbeddable,
+  WizardOutput | EmbeddableOutput,
+  WizardEmbeddable | DisabledEmbeddable,
   WizardSavedObjectAttributes
 >;
 
 export class WizardEmbeddableFactoryDefinition
   implements
     EmbeddableFactoryDefinition<
       WizardInput,
-      WizardOutput,
-      WizardEmbeddable,
+      WizardOutput | EmbeddableOutput,
+      WizardEmbeddable | DisabledEmbeddable,
       WizardSavedObjectAttributes
     > {
   public readonly type = WIZARD_EMBEDDABLE;
@@ -69,7 +77,7 @@ export class WizardEmbeddableFactoryDefinition
     savedObjectId: string,
     input: Partial<WizardInput> & { id: string },
     parent?: IContainer
-  ): Promise<WizardEmbeddable | ErrorEmbeddable> => {
+  ): Promise<WizardEmbeddable | ErrorEmbeddable | DisabledEmbeddable> => {
     return this.create({ ...input, savedObjectId }, parent);
   };
 
@@ -81,7 +89,15 @@ export class WizardEmbeddableFactoryDefinition
       notifications: { toasts },
       savedObjectsClient,
       types,
+      uiSettings,
     } = await this.getStartServices();
+
+    const isLabsEnabled = uiSettings.get<boolean>(VISUALIZE_ENABLE_LABS_SETTING);
+
+    if (!isLabsEnabled) {
+      return new DisabledEmbeddable('Wizard', input);
+    }
+
     return new WizardEmbeddable(input, {
       parent,
       data,

src/plugins/wizard/public/plugin.ts

@@ -104,6 +104,7 @@ export class WizardPlugin
         expressions: pluginsStart.expressions,
         notifications: coreStart.notifications,
         types: this.typeService.start(),
+        uiSettings: coreStart.uiSettings,
       };
     });
     embeddable.registerEmbeddableFactory(WIZARD_EMBEDDABLE, embeddableFactory);