[D&D] Adding and editing an aggregation + metric color ranges (opense…

…arch-project#1781) * edit and add agg works Signed-off-by: Ashwin Pc <ashwinpc@amazon.com> * edit agg using draft state Signed-off-by: Ashwin Pc <ashwinpc@amazon.com> * cleanup dropbox field icon Signed-off-by: Ashwin Pc <ashwinpc@amazon.com> * Adds other metric style props Signed-off-by: Ashwin Pc <ashwinpc@amazon.com> * Updated comment Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>
kavilla · Jul 7, 2022 · 1450330 · 1450330
1 parent 436e01a
commit 1450330
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 285 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/agg_common_props.ts b/src/plugins/vis_default_editor/public/components/agg_common_props.ts
@@ -43,7 +43,7 @@ export interface DefaultEditorCommonProps {
   formIsTouched: boolean;
   groupName: AggGroupName;
   metricAggs: IAggConfig[];
-  state: EditorVisState;
+  state: Partial<EditorVisState>;
   setAggParamValue: <T extends keyof AggParams>(
     aggId: AggId,
     paramName: T,

diff --git a/src/plugins/vis_default_editor/public/index.ts b/src/plugins/vis_default_editor/public/index.ts
@@ -31,6 +31,7 @@
 export { DefaultEditorController } from './default_editor_controller';
 export { useValidation } from './components/controls/utils';
 export { RangesParamEditor, RangeValues } from './components/controls/ranges';
+export { DefaultEditorAggParams } from './components/agg_params';
 export * from './editor_size';
 export * from './vis_options_props';
 export * from './utils';

diff --git a/src/plugins/wizard/public/application/contributions/containers/data_tab/config_panel.scss b/src/plugins/wizard/public/application/contributions/containers/data_tab/config_panel.scss
@@ -22,6 +22,10 @@
     padding: $euiSizeS;
   }
 
+  &__aggEditor {
+    padding: 0 $euiSizeM;
+  }
+
   &--secondary {
     position: absolute;
     top: 0;
@@ -31,4 +35,4 @@
   &.showSecondary > .wizConfig__section {
     transform: translateX(-100%);
   }
-}
+}
diff --git a/src/plugins/wizard/public/application/contributions/containers/data_tab/config_panel.tsx b/src/plugins/wizard/public/application/contributions/containers/data_tab/config_panel.tsx
@@ -4,101 +4,26 @@
  */
 
 import { EuiForm } from '@elastic/eui';
-import React, { useMemo, useState } from 'react';
+import React from 'react';
 import { useVisualizationType } from '../../../utils/use';
-import {
-  DropboxContribution,
-  MainItemContribution,
-  SecondaryItemContribution,
-  TitleItemContribution,
-  ITEM_TYPES,
-} from './items';
 import { useTypedSelector } from '../../../utils/state_management';
-import { mapItemToPanelComponents } from './utils/item_to_panel';
-import { ItemTypes } from '../../constants';
-import { SelectContribution } from '../common/items';
-import { INDEX_FIELD_KEY } from './items/use/use_form_field';
-import { DATA_TAB_ID } from '.';
 import './config_panel.scss';
 import { mapSchemaToAggPanel } from './utils/schema_to_dropbox';
-import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
-import { WizardServices } from '../../../../types';
 import { SecondaryPanel } from './secondary_panel';
 
-const DEFAULT_ITEMS: MainItemContribution[] = [getTitleContribution()];
-
 export function ConfigPanel() {
   const vizType = useVisualizationType();
-  const activeAgg = useTypedSelector((state) => state.visualization.activeVisualization?.activeAgg);
+  const draftAgg = useTypedSelector((state) => state.visualization.activeVisualization?.draftAgg);
   const schemas = vizType.ui.containerConfig.data.schemas;
 
-  // TODO: Will cleanup when add and edit field support is re introduced
-  // const activeItem = useTypedSelector((state) => state.config.activeItem);
-  // const configItemState = useTypedSelector((state) => state.config.items[activeItem?.id || '']);
-
-  // const hydratedItems: MainItemContribution[] = useMemo(
-  //   () => [...(items?.[DATA_TAB_ID] ?? []), ...DEFAULT_ITEMS],
-  //   [items]
-  // );
-
-  // const mainPanel = useMemo(() => mapItemToPanelComponents(hydratedItems), [hydratedItems]);
-  // const secondaryPanel = useMemo(() => {
-  //   if (!activeItem || !configItemState || typeof configItemState === 'string') return;
-
-  //   // Generate each secondary panel base on active item type
-  //   if (activeItem.type === ITEM_TYPES.DROPBOX) {
-  //     const activeDropboxContribution = hydratedItems.find(
-  //       (item: MainItemContribution) =>
-  //         item.type === ITEM_TYPES.DROPBOX && item?.id === activeItem?.id
-  //     ) as DropboxContribution | undefined;
-
-  //     if (!activeDropboxContribution) return null;
-
-  //     let itemsToRender: SecondaryItemContribution[] = [
-  //       getTitleContribution(activeDropboxContribution.label),
-  //       getFieldSelectorContribution(),
-  //     ];
-
-  //     const dropboxFieldInstance = configItemState.instances.find(
-  //       ({ id }) => id === activeItem.instanceId
-  //     );
-  //     if (dropboxFieldInstance && dropboxFieldInstance.properties.fieldName) {
-  //       itemsToRender = [...itemsToRender, ...activeDropboxContribution.items];
-  //     }
-
-  //     return mapItemToPanelComponents(itemsToRender, true);
-  //   }
-  // }, [activeItem, configItemState, hydratedItems]);
-
   if (!schemas) return null;
 
   const mainPanel = mapSchemaToAggPanel(schemas);
 
   return (
-    <EuiForm className={`wizConfig ${activeAgg ? 'showSecondary' : ''}`}>
+    <EuiForm className={`wizConfig ${draftAgg ? 'showSecondary' : ''}`}>
       <div className="wizConfig__section">{mainPanel}</div>
       <SecondaryPanel />
     </EuiForm>
   );
 }
-
-function getTitleContribution(title?: string): TitleItemContribution {
-  return {
-    type: ITEM_TYPES.TITLE,
-    title: [title, 'Configuration'].join(' '),
-  };
-}
-
-// function getFieldSelectorContribution(): SelectContribution<string> {
-//   return {
-//     type: ItemTypes.SELECT,
-//     id: INDEX_FIELD_KEY,
-//     label: 'Select a Field',
-//     options: (state) => {
-//       return state.dataSource.visualizableFields.map((field) => ({
-//         value: field.name,
-//         inputDisplay: field.displayName,
-//       }));
-//     },
-//   };
-// }
diff --git a/src/plugins/wizard/public/application/contributions/containers/data_tab/items/dropbox.tsx b/src/plugins/wizard/public/application/contributions/containers/data_tab/items/dropbox.tsx
@@ -11,11 +11,9 @@ import {
   EuiFormRow,
   EuiPanel,
   EuiText,
-  euiDragDropReorder,
   DropResult,
 } from '@elastic/eui';
 import React, { useCallback } from 'react';
-import { FieldIcon } from '../../../../../../../opensearch_dashboards_react/public';
 import { IDropAttributes, IDropState } from '../../../../utils/drag_drop';
 import './dropbox.scss';
 import { DropboxDisplay } from './types';
@@ -70,11 +68,9 @@ const DropboxComponent = ({
       <EuiFormRow label={boxLabel} className="dropBox" fullWidth>
         <div className="dropBox__container">
           <EuiDroppable droppableId={dropboxId}>
-            {fields.map(({ id, label, icon }, index) => (
+            {fields.map(({ id, label }, index) => (
               <EuiDraggable className="dropBox__draggable" key={id} draggableId={id} index={index}>
                 <EuiPanel key={index} paddingSize="s" className="dropBox__field">
-                  {/* TODO: Verify if field icon makes sense here */}
-                  {/* <FieldIcon type={icon} /> */}
                   <EuiText size="s" className="dropBox__field_text" onClick={() => onEditField(id)}>
                     <a role="button" tabIndex={0}>
                       {label}

diff --git a/src/plugins/wizard/public/application/contributions/containers/data_tab/items/types.ts b/src/plugins/wizard/public/application/contributions/containers/data_tab/items/types.ts
@@ -4,7 +4,6 @@
  */
 
 import { IndexPatternField } from 'src/plugins/data/common';
-import { FieldIconProps } from '../../../../../../../opensearch_dashboards_react/public';
 import { SelectContribution, InputContribution } from '../../common/items';
 
 /**
@@ -31,7 +30,6 @@ export interface TitleItemContribution {
 
 export interface DropboxDisplay {
   label: string;
-  icon: FieldIconProps['type'];
   id: string;
 }
 export interface DropboxFieldProps {
@@ -49,7 +47,7 @@ export interface DropboxContribution {
   display?: (
     indexField: IndexPatternField,
     state: DropboxFieldProps
-  ) => Pick<DropboxDisplay, 'icon' | 'label'>;
+  ) => Pick<DropboxDisplay, 'label'>;
   // Defines how the initial state of a field should be set when a field is dropped onto it
   onDrop?: (field: IndexPatternField) => DropboxFieldProps;
   isDroppable?: (field: IndexPatternField) => boolean;