Chore/remove contributions

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

@@ -8,7 +8,6 @@ import { i18n } from '@osd/i18n';
 import { EuiIcon } from '@elastic/eui';
 import { SearchableDropdown, SearchableDropdownOption } from './searchable_dropdown';
 import { useIndexPatterns } from '../utils/use';
-import indexPatternSvg from '../../assets/index_pattern.svg';
 import { useTypedDispatch } from '../utils/state_management';
 import { setIndexPattern } from '../utils/state_management/visualization_slice';
 import { IndexPattern } from '../../../../data/public';
@@ -22,7 +21,7 @@ function toSearchableDropdownOption(indexPattern: IndexPattern): SearchableDropd
     id: indexPattern.id || '',
     label: indexPattern.title,
     searchableLabel: indexPattern.title,
-    prepend: <EuiIcon type={indexPatternSvg} />,
+    prepend: <EuiIcon type="indexPatternApp" />,
   };
 }
 

src/plugins/wizard/public/application/contributions/containers/data_tab/config_panel.tsx → src/plugins/wizard/public/application/components/data_tab/config_panel.tsx

@@ -5,10 +5,10 @@
 
 import { EuiForm } from '@elastic/eui';
 import React from 'react';
-import { useVisualizationType } from '../../../utils/use';
-import { useTypedSelector } from '../../../utils/state_management';
+import { useVisualizationType } from '../../utils/use';
+import { useTypedSelector } from '../../utils/state_management';
 import './config_panel.scss';
-import { mapSchemaToAggPanel } from './utils/schema_to_dropbox';
+import { mapSchemaToAggPanel } from './schema_to_dropbox';
 import { SecondaryPanel } from './secondary_panel';
 
 export function ConfigPanel() {

src/plugins/wizard/public/application/contributions/containers/data_tab/items/dropbox.tsx → src/plugins/wizard/public/application/components/data_tab/dropbox.tsx

@@ -14,12 +14,16 @@ import {
   DropResult,
 } from '@elastic/eui';
 import React, { useCallback } from 'react';
-import { IDropAttributes, IDropState } from '../../../../utils/drag_drop';
+import { IDropAttributes, IDropState } from '../../utils/drag_drop';
 import './dropbox.scss';
-import { DropboxDisplay } from './types';
 import { useDropbox } from './use';
 import { UseDropboxProps } from './use/use_dropbox';
 
+export interface DropboxDisplay {
+  label: string;
+  id: string;
+}
+
 interface DropboxProps extends IDropState {
   id: string;
   label: string;

src/plugins/wizard/public/application/contributions/containers/data_tab/field_search.tsx → src/plugins/wizard/public/application/components/data_tab/field_search.tsx

@@ -6,8 +6,8 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { setSearchField } from '../../../utils/state_management/visualization_slice';
-import { useTypedDispatch } from '../../../utils/state_management';
+import { setSearchField } from '../../utils/state_management/visualization_slice';
+import { useTypedDispatch } from '../../utils/state_management';
 
 export interface Props {
   /**

src/plugins/wizard/public/application/contributions/containers/data_tab/field_selector.scss → src/plugins/wizard/public/application/components/data_tab/field_selector.scss

@@ -1,11 +1,13 @@
-@import "../../../util";
+@import "../../util";
 
 .wizFieldSelector {
   @include scrollNavParent(auto 1fr);
+
   padding: $euiSizeS;
 
   &__fieldGroups {
     @include euiYScrollWithShadows;
+
     overflow-y: auto;
     margin-right: -$euiSizeS;
     padding-right: $euiSizeS;
@@ -14,7 +16,7 @@
 
   &__fieldGroup {
     margin-top: $euiSizeS;
-  
+
     &:first-child {
       margin-top: 0;
     }

src/plugins/wizard/public/application/contributions/containers/data_tab/field_selector.tsx → src/plugins/wizard/public/application/components/data_tab/field_selector.tsx

@@ -11,12 +11,12 @@ import {
   IndexPatternField,
   OPENSEARCH_FIELD_TYPES,
   OSD_FIELD_TYPES,
-} from '../../../../../../data/public';
+} from '../../../../../data/public';
 import { FieldSelectorField } from './field_selector_field';
 
 import './field_selector.scss';
-import { useTypedSelector } from '../../../utils/state_management';
-import { useIndexPattern } from '../../../utils/use';
+import { useTypedSelector } from '../../utils/state_management';
+import { useIndexPattern } from '../../utils/use';
 
 interface IFieldCategories {
   categorical: IndexPatternField[];

src/plugins/wizard/public/application/contributions/containers/data_tab/field_selector_field.scss → src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss

@@ -1,5 +1,6 @@
 .wizFieldSelectorField {
   @include euiBottomShadowSmall;
+
   padding: $euiSizeXS;
   background-color: $euiColorEmptyShade;
   border: $euiBorderThin;

src/plugins/wizard/public/application/contributions/containers/data_tab/field_selector_field.tsx → src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx

@@ -29,9 +29,9 @@
  */
 
 import React, { useState } from 'react';
-import { IndexPatternField } from 'src/plugins/data/public';
-import { FieldButton, FieldIcon } from '../../../../../../opensearch_dashboards_react/public';
-import { useDrag } from '../../../utils/drag_drop/drag_drop_context';
+import { IndexPatternField } from '../../../../../data/public';
+import { FieldButton, FieldIcon } from '../../../../../opensearch_dashboards_react/public';
+import { useDrag } from '../../utils/drag_drop/drag_drop_context';
 
 import './field_selector_field.scss';
 

src/plugins/wizard/public/application/contributions/containers/data_tab/index.scss → src/plugins/wizard/public/application/components/data_tab/index.scss

@@ -1,7 +1,8 @@
-@import "../../../util";
+@import "../../util";
 
 .wizDataTab {
   @include scrollNavParent;
+
   display: grid;
   grid-template-columns: 50% 50%;
 }

src/plugins/wizard/public/application/contributions/containers/data_tab/index.tsx → src/plugins/wizard/public/application/components/data_tab/index.tsx

@@ -19,5 +19,3 @@ export const DataTab = () => {
     </div>
   );
 };
-
-export * from './items';

src/plugins/wizard/public/application/contributions/containers/data_tab/utils/schema_to_dropbox.tsx → src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx

@@ -4,8 +4,9 @@
  */
 
 import React from 'react';
-import { Schemas } from '../../../../../../../vis_default_editor/public';
-import { Title, Dropbox } from '../items';
+import { Schemas } from '../../../../../vis_default_editor/public';
+import { Dropbox } from './dropbox';
+import { Title } from './title';
 
 export const mapSchemaToAggPanel = (schemas: Schemas) => {
   const panelComponents = schemas.all.map((schema) => {

src/plugins/wizard/public/application/contributions/containers/data_tab/secondary_panel.tsx → src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx

@@ -5,14 +5,14 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 import { cloneDeep } from 'lodash';
-import { useTypedDispatch, useTypedSelector } from '../../../utils/state_management';
-import { DefaultEditorAggParams } from '../../../../../../vis_default_editor/public';
-import { Title } from './items';
-import { useIndexPattern, useVisualizationType } from '../../../utils/use';
-import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
-import { WizardServices } from '../../../../types';
-import { IAggType } from '../../../../../../data/public';
-import { saveAgg, editAgg } from '../../../utils/state_management/visualization_slice';
+import { useTypedDispatch, useTypedSelector } from '../../utils/state_management';
+import { DefaultEditorAggParams } from '../../../../../vis_default_editor/public';
+import { Title } from './title';
+import { useIndexPattern, useVisualizationType } from '../../utils/use';
+import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
+import { WizardServices } from '../../../types';
+import { IAggType } from '../../../../../data/public';
+import { saveAgg, editAgg } from '../../utils/state_management/visualization_slice';
 
 export function SecondaryPanel() {
   const draftAgg = useTypedSelector((state) => state.visualization.activeVisualization!.draftAgg);
@@ -38,8 +38,8 @@ export function SecondaryPanel() {
 
   const aggConfig = aggConfigs?.aggs[0];
 
-  const groupName = useMemo(
-    () => schemas.find((schema) => schema.name === aggConfig?.schema)?.group,
+  const selectedSchema = useMemo(
+    () => schemas.find((schema) => schema.name === aggConfig?.schema),
     [aggConfig?.schema, schemas]
   );
 
@@ -52,7 +52,7 @@ export function SecondaryPanel() {
 
   return (
     <div className="wizConfig__section wizConfig--secondary">
-      <Title title="Test" isSecondary closeMenu={closeMenu} />
+      <Title title={selectedSchema?.title ?? 'Edit'} isSecondary closeMenu={closeMenu} />
       {showAggParamEditor && (
         <DefaultEditorAggParams
           className="wizConfig__aggEditor"
@@ -62,7 +62,7 @@ export function SecondaryPanel() {
           setTouched={setTouched}
           schemas={schemas}
           formIsTouched={false}
-          groupName={groupName ?? 'none'}
+          groupName={selectedSchema?.group ?? 'none'}
           metricAggs={[]}
           state={{
             data: {},

src/plugins/wizard/public/application/contributions/containers/data_tab/items/use/index.ts → src/plugins/wizard/public/application/components/data_tab/use/index.ts

@@ -4,4 +4,3 @@
  */
 
 export { useDropbox } from './use_dropbox';
-export { useFormField } from './use_form_field';

src/plugins/wizard/public/application/contributions/containers/data_tab/items/use/use_dropbox.tsx → src/plugins/wizard/public/application/components/data_tab/use/use_dropbox.tsx

@@ -5,29 +5,24 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { cloneDeep } from 'lodash';
-import { BucketAggType, IndexPatternField, propFilter } from '../../../../../../../../data/common';
-import { Schema } from '../../../../../../../../vis_default_editor/public';
-import { FieldDragDataType } from '../../../../../utils/drag_drop/types';
-import { useTypedDispatch, useTypedSelector } from '../../../../../utils/state_management';
-import { DropboxState, DropboxDisplay } from '../types';
-import { DropboxProps } from '../dropbox';
-import { useDrop } from '../../../../../utils/drag_drop';
+import { BucketAggType, IndexPatternField, propFilter } from '../../../../../../data/common';
+import { Schema } from '../../../../../../vis_default_editor/public';
+import { FieldDragDataType } from '../../../utils/drag_drop/types';
+import { useTypedDispatch, useTypedSelector } from '../../../utils/state_management';
+import { DropboxDisplay, DropboxProps } from '../dropbox';
+import { useDrop } from '../../../utils/drag_drop';
 import {
   editAgg,
   reorderAgg,
   updateAggConfigParams,
-} from '../../../../../utils/state_management/visualization_slice';
-import { useIndexPattern } from '../../../../../../application/utils/use/use_index_pattern';
-import { useOpenSearchDashboards } from '../../../../../../../../opensearch_dashboards_react/public';
-import { WizardServices } from '../../../../../../types';
+} from '../../../utils/state_management/visualization_slice';
+import { useIndexPattern } from '../../../utils/use/use_index_pattern';
+import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
+import { WizardServices } from '../../../../types';
 
 const filterByName = propFilter('name');
 const filterByType = propFilter('type');
 
-export const INITIAL_STATE: DropboxState = {
-  instances: [],
-};
-
 export interface UseDropboxProps extends Pick<DropboxProps, 'id' | 'label'> {
   schema: Schema;
 }
@@ -192,6 +187,8 @@ export const useDropbox = (props: UseDropboxProps): DropboxProps => {
     };
   }, [aggService.types, dragData, indexPattern?.fields, schema.aggFilter, schema.group]);
 
+  const canDrop = validAggTypes.length > 0 && schema.max > dropboxAggs.length;
+
   return {
     id: dropboxId,
     label,
@@ -203,7 +200,7 @@ export const useDropbox = (props: UseDropboxProps): DropboxProps => {
     onReorderField,
     ...dropState,
     dragData,
-    isValidDropTarget: validAggTypes.length > 0,
+    isValidDropTarget: canDrop,
     dropProps,
   };
 };

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

@@ -10,14 +10,14 @@
 }
 
 .searchableDropdown--fixedWidthChild {
-  width: calc(#{$wizSideNavWidth} - #{$euiSizeXL} * 2) ;
+  width: calc(#{$wizSideNavWidth} - #{$euiSizeXL} * 2);
 }
 
 .searchableDropdown--topDisplay {
   padding-right: $euiSizeL;
+  font-size: $euiFontSizeS;
 }
 
-
 .searchableDropdown--selectableWrapper .euiSelectableList {
   // When clicking on the selectable content it will "highlight" itself with a box shadow
   // This turns that off

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

@@ -142,6 +142,7 @@ export const SearchableDropdown = ({
   const selectedView = (
     <EuiButtonEmpty
       color="text"
+      size="s"
       style={{ textAlign: 'left' }}
       className="searchableDropdown--topDisplay"
       onClick={onButtonClick}
@@ -150,21 +151,25 @@ export const SearchableDropdown = ({
     </EuiButtonEmpty>
   );
 
-  const formControl = <EuiFormControlLayout
-      title={selected === undefined ? "Select an option" : selected.label}
+  const formControl = (
+    <EuiFormControlLayout
+      title={selected === undefined ? 'Select an option' : selected.label}
       isLoading={loading}
       fullWidth={true}
       style={{ cursor: 'pointer' }}
       prepend={prepend}
       icon={{ type: 'arrowDown', side: 'right' }}
       readOnly={true}
-    >{selectedView}</EuiFormControlLayout>
+    >
+      {selectedView}
+    </EuiFormControlLayout>
+  );
 
   return (
-      <div className="searchableDropdown">
-        <EuiPopover button={formControl} isOpen={isPopoverOpen} closePopover={closePopover}>
-          <div className="searchableDropdown--fixedWidthChild">{selectable}</div>
-        </EuiPopover>
-      </div>
+    <div className="searchableDropdown">
+      <EuiPopover button={formControl} isOpen={isPopoverOpen} closePopover={closePopover}>
+        <div className="searchableDropdown--fixedWidthChild">{selectable}</div>
+      </EuiPopover>
+    </div>
   );
 };

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

@@ -8,7 +8,7 @@ import { EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
 import './side_nav.scss';
 import { useVisualizationType } from '../utils/use';
 import { DataSourceSelect } from './data_source_select';
-import { DataTab } from '../contributions';
+import { DataTab } from './data_tab';
 import { StyleTabConfig } from '../../services/type_service';
 
 export const SideNav = () => {

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

@@ -17,6 +17,7 @@ import {
 import React, { FC, useState, useMemo, useEffect } from 'react';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/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 { useVisualizationType } from '../utils/use';
@@ -27,20 +28,30 @@ export const Workspace: FC = ({ children }) => {
   const {
     services: {
       expressions: { ReactExpressionRenderer },
+      notifications: { toasts },
     },
   } = useOpenSearchDashboards<WizardServices>();
-  const { toExpression } = useVisualizationType();
+  const { toExpression, ui } = useVisualizationType();
   const [expression, setExpression] = useState<string>();
   const rootState = useTypedSelector((state) => state);
 
   useEffect(() => {
     async function loadExpression() {
+      const schemas = ui.containerConfig.data.schemas;
+      const [valid, errorMsg] = validateSchemaState(schemas, rootState);
+
+      if (!valid) {
+        if (errorMsg) {
+          toasts.addWarning(errorMsg);
+        }
+        return;
+      }
       const exp = await toExpression(rootState);
       setExpression(exp);
     }
 
     loadExpression();
-  }, [rootState, toExpression]);
+  }, [rootState, toExpression, toasts, ui.containerConfig.data.schemas]);
 
   return (
     <section className="wizWorkspace">
@@ -94,15 +105,16 @@ const TypeSelectorPopover = () => {
             icon: <EuiIcon type={icon} />,
             onClick: () => {
               closePopover();
-              dispatch(setActiveVisualization(name));
+              // TODO: Fix changing viz type
+              // dispatch(setActiveVisualization(name));
             },
             toolTipContent: description,
             toolTipPosition: 'right',
           })
         ),
       },
     ],
-    [dispatch, visualizationTypes]
+    [visualizationTypes]
   );
 
   const button = (