Adds state management to Drag and Drop

package.json

@@ -138,6 +138,7 @@
     "@osd/ace": "1.0.0",
     "@osd/monaco": "1.0.0",
     "@osd/ui-shared-deps": "1.0.0",
+    "@reduxjs/toolkit": "^1.6.2",
     "@types/yauzl": "^2.9.1",
     "JSONStream": "1.3.5",
     "abortcontroller-polyfill": "^1.4.0",

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

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { I18nProvider } from '@osd/i18n/react';
 import { EuiPage } from '@elastic/eui';
-import { DataPublicPluginStart, IndexPattern } from '../../../data/public';
+import { DataPublicPluginStart } from '../../../data/public';
 import { SideNav } from './components/side_nav';
 import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
 import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
@@ -15,21 +15,23 @@ import { Workspace } from './components/workspace';
 
 import './app.scss';
 import { TopNav } from './components/top_nav';
+import { useTypedDispatch } from './utils/state_management';
+import { setIndexPattern } from './utils/state_management/datasource_slice';
 
 export const WizardApp = () => {
   const {
     services: { data },
   } = useOpenSearchDashboards<WizardServices>();
 
-  const [indexPattern, setIndexPattern] = useIndexPattern(data);
+  useIndexPattern(data);
 
   // Render the application DOM.
   return (
     <I18nProvider>
       <DragDropProvider>
         <EuiPage className="wizLayout">
           <TopNav />
-          <SideNav indexPattern={indexPattern} setIndexPattern={setIndexPattern} />
+          <SideNav />
           <Workspace />
         </EuiPage>
       </DragDropProvider>
@@ -39,16 +41,15 @@ export const WizardApp = () => {
 
 // TODO: Temporary. Need to update it fetch the index pattern cohesively
 function useIndexPattern(data: DataPublicPluginStart) {
-  const [indexPattern, setIndexPattern] = useState<IndexPattern | null>(null);
+  const dispatch = useTypedDispatch();
+
   useEffect(() => {
     const fetchIndexPattern = async () => {
       const defaultIndexPattern = await data.indexPatterns.getDefault();
       if (defaultIndexPattern) {
-        setIndexPattern(defaultIndexPattern);
+        dispatch(setIndexPattern(defaultIndexPattern));
       }
     };
     fetchIndexPattern();
-  }, [data.indexPatterns]);
-
-  return [indexPattern, setIndexPattern] as const;
+  }, [data.indexPatterns, dispatch]);
 }

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

@@ -6,25 +6,13 @@
 import { EuiForm, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@osd/i18n';
-import { BUCKET_TYPES, METRIC_TYPES } from '../../../../../data/public';
 import { ConfigSection } from './config_section';
 
 import './config_panel.scss';
-
-// TODO: Temp. Remove once visualizations can be refgistered and editor configs can be passed along
-const CONFIG = {
-  x: {
-    title: 'X Axis',
-    allowedAggregation: BUCKET_TYPES.TERMS,
-  },
-  y: {
-    title: 'Y Axis',
-    allowedAggregation: METRIC_TYPES.AVG,
-  },
-};
+import { useTypedSelector } from '../../utils/state_management';
 
 export function ConfigPanel() {
-  const sections = CONFIG;
+  const { configSections } = useTypedSelector((state) => state.config);
 
   return (
     <EuiForm className="wizConfigPanel">
@@ -35,8 +23,8 @@ export function ConfigPanel() {
           })}
         </h2>
       </EuiTitle>
-      {Object.entries(sections).map(([sectionId, sectionProps], index) => (
-        <ConfigSection key={index} id={sectionId} {...sectionProps} onChange={() => {}} />
+      {Object.entries(configSections).map(([sectionId, sectionProps], index) => (
+        <ConfigSection key={index} id={sectionId} {...sectionProps} />
       ))}
     </EuiForm>
   );

src/plugins/wizard/public/application/components/data_tab/config_section.tsx

@@ -3,26 +3,39 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonIcon, EuiFormRow, EuiPanel, EuiText } from '@elastic/eui';
+import { EuiButtonIcon, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { IndexPatternField } from 'src/plugins/data/common';
 import { useDrop } from '../../utils/drag_drop';
+import { useTypedDispatch, useTypedSelector } from '../../utils/state_management';
+import {
+  addConfigSectionField,
+  removeConfigSectionField,
+} from '../../utils/state_management/config_slice';
 
 import './config_section.scss';
 
 interface ConfigSectionProps {
   id: string;
   title: string;
-  onChange: Function;
 }
 
-export const ConfigSection = ({ title, id, onChange }: ConfigSectionProps) => {
-  const [currentField, setCurrentField] = useState<IndexPatternField>();
+export const ConfigSection = ({ title, id }: ConfigSectionProps) => {
+  const dispatch = useTypedDispatch();
+  const { fields } = useTypedSelector((state) => state.config.configSections[id]);
 
-  const dropHandler = useCallback((field: IndexPatternField) => {
-    setCurrentField(field);
-  }, []);
+  const dropHandler = useCallback(
+    (field: IndexPatternField) => {
+      dispatch(
+        addConfigSectionField({
+          sectionId: id,
+          field,
+        })
+      );
+    },
+    [dispatch, id]
+  );
   const [dropProps, { isValidDropTarget, dragData }] = useDrop('dataPlane', dropHandler);
 
   const dropTargetString = dragData
@@ -31,24 +44,32 @@ export const ConfigSection = ({ title, id, onChange }: ConfigSectionProps) => {
         defaultMessage: 'Click or drop to add',
       });
 
-  useEffect(() => {
-    onChange(id, currentField);
-  }, [id, currentField, onChange]);
-
   return (
-    <EuiFormRow label={title} className="wizConfigSection">
-      {currentField ? (
-        <EuiPanel paddingSize="s" className="wizConfigSection__field">
-          <EuiText grow size="m">
-            {currentField.displayName}
-          </EuiText>
-          <EuiButtonIcon
-            color="danger"
-            iconType="cross"
-            aria-label="clear-field"
-            onClick={() => setCurrentField(undefined)}
-          />
-        </EuiPanel>
+    <div className="wizConfigSection">
+      <EuiTitle size="xxxs">
+        <h3 className="wizConfigSection__title">{title}</h3>
+      </EuiTitle>
+      {fields.length ? (
+        fields.map((field, index) => (
+          <EuiPanel key={index} paddingSize="s" className="wizConfigSection__field">
+            <EuiText grow size="m">
+              {field.displayName}
+            </EuiText>
+            <EuiButtonIcon
+              color="danger"
+              iconType="cross"
+              aria-label="clear-field"
+              onClick={() =>
+                dispatch(
+                  removeConfigSectionField({
+                    sectionId: id,
+                    field,
+                  })
+                )
+              }
+            />
+          </EuiPanel>
+        ))
       ) : (
         <div
           className={`wizConfigSection__dropTarget ${isValidDropTarget && 'validDropTarget'}`}
@@ -57,6 +78,6 @@ export const ConfigSection = ({ title, id, onChange }: ConfigSectionProps) => {
           <EuiText size="s">{dropTargetString}</EuiText>
         </div>
       )}
-    </EuiFormRow>
+    </div>
   );
 };

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

@@ -22,10 +22,7 @@ import {
 import { FieldSelectorField } from './field_selector_field';
 
 import './field_selector.scss';
-
-interface FieldSelectorDeps {
-  indexFields: IndexPatternField[];
-}
+import { useTypedSelector } from '../../utils/state_management';
 
 interface IFieldCategories {
   categorical: IndexPatternField[];
@@ -40,7 +37,8 @@ const META_FIELDS: string[] = [
   OPENSEARCH_FIELD_TYPES._TYPE,
 ];
 
-export const FieldSelector = ({ indexFields }: FieldSelectorDeps) => {
+export const FieldSelector = () => {
+  const indexFields = useTypedSelector((state) => state.dataSource.visualizableFields);
   const fields = indexFields?.reduce<IFieldCategories>(
     (fieldGroups, currentField) => {
       const category = getFieldCategory(currentField);

src/plugins/wizard/public/application/components/data_tab/index.tsx

@@ -4,20 +4,15 @@
  */
 
 import React from 'react';
-import { IndexPatternField } from '../../../../../data/public';
 import { FieldSelector } from './field_selector';
 import { ConfigPanel } from './config_panel';
 
 import './index.scss';
 
-interface DataTabDeps {
-  indexFields: IndexPatternField[];
-}
-
-export const DataTab = ({ indexFields }: DataTabDeps) => {
+export const DataTab = () => {
   return (
     <div className="wizDataTab">
-      <FieldSelector indexFields={indexFields} />
+      <FieldSelector />
       <ConfigPanel />
     </div>
   );

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

@@ -3,66 +3,38 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { i18n } from '@osd/i18n';
 
-import {
-  EuiFormLabel,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTabbedContent,
-  EuiTabbedContentTab,
-} from '@elastic/eui';
+import { EuiFormLabel, EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
 
-import { IndexPattern, IndexPatternField, OSD_FIELD_TYPES } from '../../../../data/public';
 import { DataTab } from './data_tab';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WizardServices } from '../../types';
 import { StyleTab } from './style_tab';
 
 import './side_nav.scss';
+import { useTypedDispatch, useTypedSelector } from '../utils/state_management';
+import { setIndexPattern } from '../utils/state_management/datasource_slice';
 
-interface SideNavDeps {
-  indexPattern: IndexPattern | null;
-  setIndexPattern: React.Dispatch<React.SetStateAction<IndexPattern | null>>;
-}
-
-const ALLOWED_FIELDS: string[] = [OSD_FIELD_TYPES.STRING, OSD_FIELD_TYPES.NUMBER];
-
-export const SideNav = ({ indexPattern, setIndexPattern }: SideNavDeps) => {
+export const SideNav = () => {
   const {
     services: {
       data,
       savedObjects: { client: savedObjectsClient },
     },
   } = useOpenSearchDashboards<WizardServices>();
   const { IndexPatternSelect } = data.ui;
-  const [indexFields, setIndexFields] = useState<IndexPatternField[]>([]);
-
-  // Fetch the default index pattern using the `data.indexPatterns` service, as the component is mounted.
-  useEffect(() => {
-    const setDefaultIndexPattern = async () => {
-      const defaultIndexPattern = await data.indexPatterns.getDefault();
-      setIndexPattern(defaultIndexPattern);
-    };
-
-    setDefaultIndexPattern();
-  }, [data, setIndexPattern]);
-
-  // Update the fields list every time the index pattern is modified.
-  useEffect(() => {
-    const fields = indexPattern?.fields;
-
-    setIndexFields(fields?.filter(isValidField) || []);
-  }, [indexPattern]);
+  const { indexPattern } = useTypedSelector((state) => state.dataSource);
+  const dispatch = useTypedDispatch();
 
   const tabs: EuiTabbedContentTab[] = [
     {
       id: 'data-tab',
       name: i18n.translate('wizard.nav.dataTab.title', {
         defaultMessage: 'Data',
       }),
-      content: <DataTab indexFields={indexFields} />,
+      content: <DataTab />,
     },
     {
       id: 'style-tab',
@@ -89,7 +61,7 @@ export const SideNav = ({ indexPattern, setIndexPattern }: SideNavDeps) => {
           indexPatternId={indexPattern?.id || ''}
           onChange={async (newIndexPatternId: any) => {
             const newIndexPattern = await data.indexPatterns.get(newIndexPatternId);
-            setIndexPattern(newIndexPattern);
+            dispatch(setIndexPattern(newIndexPattern));
           }}
           isClearable={false}
         />
@@ -98,13 +70,3 @@ export const SideNav = ({ indexPattern, setIndexPattern }: SideNavDeps) => {
     </section>
   );
 };
-
-// TODO: Temporary validate function
-// Need to identify hopw to get fieldCounts to use the standard filter and group functions
-function isValidField(field: IndexPatternField): boolean {
-  const isAggregatable = field.aggregatable === true;
-  const isNotScripted = !field.scripted;
-  const isAllowed = ALLOWED_FIELDS.includes(field.type);
-
-  return isAggregatable && isNotScripted && isAllowed;
-}

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

@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, useState } from 'react';
-import { IndexPattern } from '../../../../data/public';
+import React, { useMemo } from 'react';
 import { PLUGIN_ID } from '../../../common';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getTopNavconfig } from '../utils/get_top_nav_config';
 import { WizardServices } from '../../types';
 
 import './top_nav.scss';
+import { useTypedSelector } from '../utils/state_management';
 
 export const TopNav = () => {
   const { services } = useOpenSearchDashboards<WizardServices>();
@@ -22,8 +22,7 @@ export const TopNav = () => {
   } = services;
 
   const config = useMemo(() => getTopNavconfig(services), [services]);
-  //   TODO: Set index pattern/data source here. Filters wont show up until you do
-  const [indexPatterns, setIndexPatterns] = useState<IndexPattern[]>([]);
+  const { indexPattern } = useTypedSelector((state) => state.dataSource);
 
   return (
     <div className="wizTopNav">
@@ -34,7 +33,7 @@ export const TopNav = () => {
         showSearchBar={true}
         useDefaultBehaviors={true}
         screenTitle="Test"
-        indexPatterns={indexPatterns}
+        indexPatterns={indexPattern ? [indexPattern] : []}
       />
     </div>
   );