[D&D] Adds Bar line and Area charts to Wizard (#2266) (#2291)

Description
* Adds Bar line and Area charts to Wizard
* Adds resizable right nav to Wizard
* E2E tests for bar chart and chart switching

Issues Resolved:
#1616
#1617
#1618

Co-authored-by: Josh Romero <[email protected]>
Signed-off-by: Ashwin Pc <[email protected]>

Author: opensearch-trigger-bot[bot]

src/plugins/vis_type_vislib/public/index.ts

@@ -35,4 +35,6 @@ export function plugin(initializerContext: PluginInitializerContext) {
   return new Plugin(initializerContext);
 }
 
+export { getConfigCollections } from './utils/collections';
+
 export * from './types';

src/plugins/vis_type_vislib/public/types.ts

@@ -106,3 +106,5 @@ export interface BasicVislibParams extends CommonVislibParams {
   times: TimeMarker[];
   type: string;
 }
+
+export { Positions };

src/plugins/visualizations/public/index.ts

@@ -43,7 +43,7 @@ export { Vis } from './vis';
 export { TypesService } from './vis_types/types_service';
 export { VISUALIZE_EMBEDDABLE_TYPE, VIS_EVENT_TO_TRIGGER } from './embeddable';
 export { VisualizationContainer, VisualizationNoResults } from './components';
-export { getSchemas as getVisSchemas } from './legacy/build_pipeline';
+export { getSchemas as getVisSchemas, buildVislibDimensions } from './legacy/build_pipeline';
 
 /** @public types */
 export { VisualizationsSetup, VisualizationsStart };

src/plugins/wizard/opensearch_dashboards.json

@@ -16,7 +16,8 @@
     "dashboard",
     "visualizations",
     "opensearchUiShared",
-    "visDefaultEditor"
+    "visDefaultEditor",
+    "visTypeVislib"
   ],
   "optionalPlugins": []
 }

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

@@ -6,4 +6,4 @@
 @import "@elastic/eui/src/global_styling/variables/form";
 
 $osdHeaderOffset: $euiHeaderHeightCompensation;
-$wizSideNavWidth: 470px;
+$wizLeftNavWidth: 462px;

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

@@ -8,9 +8,18 @@
   padding: 0;
   display: grid;
   grid-template:
-    "topNav topNav topNav" min-content
-    "leftNav workspace rightNav" 1fr / #{$wizSideNavWidth} 1fr #{$wizSideNavWidth};
+    "topNav topNav" min-content
+    "leftNav workspaceNav" 1fr / #{$wizLeftNavWidth} 1fr;
   height: calc(100vh - #{$osdHeaderOffset});
+
+  &__resizeContainer {
+    min-height: 0;
+    background-color: $euiColorEmptyShade;
+  }
+
+  &__resizeButton {
+    transform: translateX(-$euiSizeM / 2);
+  }
 }
 
 .headerIsExpanded .wizLayout {

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

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { I18nProvider } from '@osd/i18n/react';
-import { EuiPage } from '@elastic/eui';
+import { EuiPage, EuiResizableContainer } from '@elastic/eui';
 import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
 import { LeftNav } from './components/left_nav';
 import { TopNav } from './components/top_nav';
@@ -21,8 +21,37 @@ export const WizardApp = () => {
         <EuiPage className="wizLayout">
           <TopNav />
           <LeftNav />
-          <Workspace />
-          <RightNav />
+          <EuiResizableContainer className="wizLayout__resizeContainer">
+            {(EuiResizablePanel, EuiResizableButton) => (
+              <>
+                <EuiResizablePanel
+                  className="wizLayout__workspaceResize"
+                  paddingSize="none"
+                  initialSize={80}
+                  minSize="300px"
+                  mode="main"
+                >
+                  <Workspace />
+                </EuiResizablePanel>
+                <EuiResizableButton className="wizLayout__resizeButton" />
+                <EuiResizablePanel
+                  className="wizLayout__rightNavResize"
+                  paddingSize="none"
+                  initialSize={20}
+                  minSize="250px"
+                  mode={[
+                    'collapsible',
+                    {
+                      position: 'top',
+                    },
+                  ]}
+                  id="wizRightResize"
+                >
+                  <RightNav />
+                </EuiResizablePanel>
+              </>
+            )}
+          </EuiResizableContainer>
         </EuiPage>
       </DragDropProvider>
     </I18nProvider>

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

@@ -15,6 +15,8 @@
     overflow-y: auto;
     margin-right: -$euiSizeS;
     padding-right: $euiSizeS;
+    margin-left: -$euiSizeS;
+    padding-left: $euiSizeS;
     margin-top: $euiSizeS;
   }
 

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

@@ -6,37 +6,35 @@
 import React, { memo } from 'react';
 import { EuiCallOut, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
 
 export const InfoComponent = () => {
-  const title = (
-    <>
+  return (
+    <EuiCallOut
+      className="hide-for-sharing"
+      data-test-subj="experimentalVisInfo"
+      size="s"
+      title={i18n.translate('wizard.experimentalInfoTitle', {
+        defaultMessage: 'This editor is experimental and should not be used in production',
+      })}
+      iconType="beaker"
+    >
       <FormattedMessage
         id="wizard.experimentalInfoText"
-        defaultMessage="This editor is experimental, do not use in production.
-          For feedback, please create an issue in {githubLink}."
+        defaultMessage="We want to hear from you about how we can improve your experience. Leave feedback in {githubLink}."
         values={{
           githubLink: (
             <EuiLink
               external
-              href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues/new/choose"
+              href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2280"
               target="_blank"
             >
-              GitHub
+              the GitHub issue
             </EuiLink>
           ),
         }}
       />
-    </>
-  );
-
-  return (
-    <EuiCallOut
-      className="hide-for-sharing"
-      data-test-subj="experimentalVisInfo"
-      size="s"
-      title={title}
-      iconType="beaker"
-    />
+    </EuiCallOut>
   );
 };
 

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

@@ -3,15 +3,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { EuiSuperSelect, EuiSuperSelectOption, EuiIcon, IconType } from '@elastic/eui';
+import React, { useState } from 'react';
+import {
+  EuiSuperSelect,
+  EuiSuperSelectOption,
+  EuiIcon,
+  IconType,
+  EuiConfirmModal,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { FormattedMessage } from '@osd/i18n/react';
 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 [newVisType, setNewVisType] = useState<string>();
   const {
     services: { types },
   } = useOpenSearchDashboards<WizardServices>();
@@ -23,6 +32,7 @@ export const RightNav = () => {
     value: name,
     inputDisplay: <OptionItem icon={icon} title={title} />,
     dropdownDisplay: <OptionItem icon={icon} title={title} />,
+    'data-test-subj': `visType-${name}`,
   }));
 
   return (
@@ -32,19 +42,48 @@ export const RightNav = () => {
           options={options}
           valueOfSelected={activeVisName}
           onChange={(name) => {
-            dispatch(
-              setActiveVisualization({
-                name,
-                style: types.get(name)?.ui.containerConfig.style.defaults,
-              })
-            );
+            setNewVisType(name);
           }}
           fullWidth
+          data-test-subj="chartPicker"
         />
       </div>
       <div className="wizSidenav__style">
         <StyleSection />
       </div>
+      {newVisType && (
+        <EuiConfirmModal
+          title={i18n.translate('wizard.rightNav.changeVisType.modalTitle', {
+            defaultMessage: 'Change visualization type',
+          })}
+          confirmButtonText={i18n.translate('wizard.rightNav.changeVisType.confirmText', {
+            defaultMessage: 'Change type',
+          })}
+          cancelButtonText={i18n.translate('wizard.rightNav.changeVisType.cancelText', {
+            defaultMessage: 'Cancel',
+          })}
+          onCancel={() => setNewVisType(undefined)}
+          onConfirm={() => {
+            dispatch(
+              setActiveVisualization({
+                name: newVisType,
+                style: types.get(newVisType)?.ui.containerConfig.style.defaults,
+              })
+            );
+
+            setNewVisType(undefined);
+          }}
+          maxWidth="300px"
+          data-test-subj="confirmVisChangeModal"
+        >
+          <p>
+            <FormattedMessage
+              id="wizard.rightNav.changeVisType.modalDescription"
+              defaultMessage="Changing the visualization type will reset all field selections. Do you want to continue?"
+            />
+          </p>
+        </EuiConfirmModal>
+      )}
     </section>
   );
 };