[D&D] Adds visualization type switcher for Wizard (#2217) (#2248)

* Adds visualization type switcher for Wizard

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

* Minor fixes

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

* Updates options viz options ui

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

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>
(cherry picked from commit c18736a)

Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>

src/plugins/wizard/public/application/app.scss

@@ -7,10 +7,9 @@
 .wizLayout {
   padding: 0;
   display: grid;
-  grid-template: min-content 1fr / #{$wizSideNavWidth} 1fr;
-  grid-template-areas:
-    "topNav topNav"
-    "sideNav workspace";
+  grid-template:
+    "topNav topNav topNav" min-content
+    "leftNav workspace rightNav" 1fr / #{$wizSideNavWidth} 1fr #{$wizSideNavWidth};
   height: calc(100vh - #{$osdHeaderOffset});
 }
 

src/plugins/wizard/public/application/app.tsx

@@ -7,10 +7,11 @@ import React from 'react';
 import { I18nProvider } from '@osd/i18n/react';
 import { EuiPage } from '@elastic/eui';
 import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
-import { SideNav } from './components/side_nav';
+import { LeftNav } from './components/left_nav';
 import { TopNav } from './components/top_nav';
 import { Workspace } from './components/workspace';
 import './app.scss';
+import { RightNav } from './components/right_nav';
 
 export const WizardApp = () => {
   // Render the application DOM.
@@ -19,10 +20,13 @@ export const WizardApp = () => {
       <DragDropProvider>
         <EuiPage className="wizLayout">
           <TopNav />
-          <SideNav />
+          <LeftNav />
           <Workspace />
+          <RightNav />
         </EuiPage>
       </DragDropProvider>
     </I18nProvider>
   );
 };
+
+export { Option } from './components/option';

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

@@ -29,6 +29,7 @@ export const DataSourceSelect = () => {
   const { indexPatterns, loading, error, selected } = useIndexPatterns();
   const dispatch = useTypedDispatch();
 
+  // TODO: Should be a standard EUI component
   return (
     <SearchableDropdown
       selected={selected !== undefined ? toSearchableDropdownOption(selected) : undefined}

src/plugins/wizard/public/application/components/data_tab/config_panel.scss

@@ -7,7 +7,6 @@
 
   background: $euiColorLightestShade;
   border-left: $euiBorderThin;
-  border-right: $euiBorderThin;
   position: relative;
   overflow-x: hidden;
 

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

@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import './side_nav.scss';
+import { DataSourceSelect } from './data_source_select';
+import { DataTab } from './data_tab';
+
+export const LeftNav = () => {
+  return (
+    <section className="wizSidenav left">
+      <div className="wizDatasourceSelect wizSidenav__header">
+        <DataSourceSelect />
+      </div>
+      <DataTab key="containerName" />
+    </section>
+  );
+};

src/plugins/wizard/public/application/components/option.scss

@@ -0,0 +1,8 @@
+.wizOption {
+  background-color: $euiColorEmptyShade;
+  padding: $euiSizeM;
+
+  & &__panel {
+    background-color: $euiColorLightestShade;
+  }
+}

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiAccordion, EuiHorizontalRule, EuiPanel, EuiSpacer } from '@elastic/eui';
+import React, { FC } from 'react';
+import './option.scss';
+
+interface Props {
+  title: string;
+  initialIsOpen?: boolean;
+}
+
+export const Option: FC<Props> = ({ title, children, initialIsOpen = false }) => {
+  return (
+    <>
+      <EuiAccordion
+        id={title}
+        buttonContent={title}
+        className="wizOption"
+        initialIsOpen={initialIsOpen}
+      >
+        <EuiSpacer size="s" />
+        <EuiPanel color="subdued" className="wizOption__panel">
+          {children}
+        </EuiPanel>
+      </EuiAccordion>
+      <EuiHorizontalRule margin="none" />
+    </>
+  );
+};

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

@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiSuperSelect, EuiSuperSelectOption, EuiIcon, IconType } from '@elastic/eui';
+import { useVisualizationType } from '../utils/use';
+import './side_nav.scss';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { WizardServices } from '../../types';
+import { setActiveVisualization, useTypedDispatch } from '../utils/state_management';
+
+export const RightNav = () => {
+  const {
+    services: { types },
+  } = useOpenSearchDashboards<WizardServices>();
+  const { ui, name: activeVisName } = useVisualizationType();
+  const dispatch = useTypedDispatch();
+  const StyleSection = ui.containerConfig.style.render;
+
+  const options: Array<EuiSuperSelectOption<string>> = types.all().map(({ name, icon, title }) => ({
+    value: name,
+    inputDisplay: <OptionItem icon={icon} title={title} />,
+    dropdownDisplay: <OptionItem icon={icon} title={title} />,
+  }));
+
+  return (
+    <section className="wizSidenav right">
+      <div className="wizSidenav__header">
+        <EuiSuperSelect
+          options={options}
+          valueOfSelected={activeVisName}
+          onChange={(name) => {
+            dispatch(
+              setActiveVisualization({
+                name,
+                style: types.get(name)?.ui.containerConfig.style.defaults,
+              })
+            );
+          }}
+          fullWidth
+        />
+      </div>
+      <div className="wizSidenav__style">
+        <StyleSection />
+      </div>
+    </section>
+  );
+};
+
+const OptionItem = ({ icon, title }: { icon: IconType; title: string }) => (
+  <>
+    <EuiIcon type={icon} className="wizTypeSelector__icon" />
+    <span>{title}</span>
+  </>
+);

src/plugins/wizard/public/application/components/side_nav.scss

@@ -8,8 +8,29 @@
 .wizSidenav {
   @include scrollNavParent(auto 1fr);
 
-  grid-area: sideNav;
-  border-right: $euiBorderThin;
+  &.left {
+    border-right: $euiBorderThin;
+    grid-area: leftNav;
+  }
+
+  &.right {
+    border-left: $euiBorderThin;
+    grid-area: rightNav;
+  }
+
+  &__header {
+    padding: $euiSizeS;
+    border-bottom: $euiBorderThin;
+    background-color: $euiColorEmptyShade;
+  }
+
+  &__style {
+    @include euiYScrollWithShadows;
+  }
+}
+
+.wizTypeSelector__icon {
+  margin-right: $euiSizeS;
 }
 
 .wizSidenavTabs {
@@ -25,6 +46,5 @@
 }
 
 .wizDatasourceSelect {
-  max-width: $wizSideNavWidth;
-  padding: $euiSize $euiSize 0 $euiSize;
+  max-width: calc(#{$wizSideNavWidth} - 1px);
 }

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

@@ -3,24 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  EuiButton,
-  EuiContextMenu,
-  EuiContextMenuPanelItemDescriptor,
-  EuiEmptyPrompt,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiPanel,
-  EuiPopover,
-} from '@elastic/eui';
+import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel } from '@elastic/eui';
 import React, { FC, useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IExpressionLoaderParams } from '../../../../expressions/public';
 import { WizardServices } from '../../types';
 import { validateSchemaState } from '../utils/validate_schema_state';
-import { useTypedDispatch, useTypedSelector } from '../utils/state_management';
-import { setActiveVisualization } from '../utils/state_management/visualization_slice';
+import { useTypedSelector } from '../utils/state_management';
 import { useVisualizationType } from '../utils/use';
 
 import hand_field from '../../assets/hand_field.svg';
@@ -82,9 +71,6 @@ export const Workspace: FC = ({ children }) => {
   return (
     <section className="wizWorkspace">
       <EuiFlexGroup className="wizCanvasControls">
-        <EuiFlexItem grow={false}>
-          <TypeSelectorPopover />
-        </EuiFlexItem>
         <EuiFlexItem>
           <ExperimentalInfo />
         </EuiFlexItem>
@@ -116,64 +102,3 @@ export const Workspace: FC = ({ children }) => {
     </section>
   );
 };
-
-const TypeSelectorPopover = () => {
-  const [isPopoverOpen, setPopover] = useState(false);
-  const {
-    services: { types },
-  } = useOpenSearchDashboards<WizardServices>();
-  const dispatch = useTypedDispatch();
-  const visualizationTypes = types.all();
-  const activeVisualization = useVisualizationType();
-
-  const onButtonClick = () => {
-    setPopover(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setPopover(false);
-  };
-
-  const panels = useMemo(
-    () => [
-      {
-        id: 0,
-        title: 'Chart types',
-        items: visualizationTypes.map(
-          ({ name, title, icon, description }): EuiContextMenuPanelItemDescriptor => ({
-            name: title,
-            icon: <EuiIcon type={icon} />,
-            onClick: () => {
-              closePopover();
-              // TODO: Fix changing viz type
-              // dispatch(setActiveVisualization(name));
-            },
-            toolTipContent: description,
-            toolTipPosition: 'right',
-          })
-        ),
-      },
-    ],
-    [visualizationTypes]
-  );
-
-  const button = (
-    <EuiButton iconType={activeVisualization?.icon} onClick={onButtonClick}>
-      {activeVisualization?.title}
-    </EuiButton>
-  );
-
-  return (
-    <EuiPopover
-      id="contextMenuExample"
-      ownFocus
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      panelPaddingSize="none"
-      anchorPosition="downLeft"
-    >
-      <EuiContextMenu initialPanelId={0} panels={panels} />
-    </EuiPopover>
-  );
-};

src/plugins/wizard/public/application/utils/state_management/index.ts

@@ -5,3 +5,4 @@
 
 export * from './store';
 export * from './hooks';
+export * from './shared_actions';

src/plugins/wizard/public/application/utils/state_management/shared_actions.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createAction } from '@reduxjs/toolkit';
+import { VisualizationType } from '../../../services/type_service/visualization_type';
+
+interface ActiveVisPayload {
+  name: VisualizationType['name'];
+  style: VisualizationType['ui']['containerConfig']['style']['defaults'];
+}
+
+export const setActiveVisualization = createAction<ActiveVisPayload>('setActiveVisualzation');