refactor(Aggregation): move to new edit modal

checkmarble · Oct 10, 2024 · 946acef · 946acef
1 parent 6869ca7
commit 946acef
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 89 deletions.
diff --git a/packages/app-builder/src/components/Scenario/AstBuilder/AstBuilder.tsx b/packages/app-builder/src/components/Scenario/AstBuilder/AstBuilder.tsx
@@ -10,7 +10,6 @@ import { type OperatorFunction } from '@app-builder/models/editable-operators';
 import { CopyPasteASTContextProvider } from '@app-builder/services/editor/copy-paste-ast';
 import { OptionsProvider } from '@app-builder/services/editor/options';
 
-import { AggregationEditModal } from './AstBuilderNode/AggregationEdit';
 import { RootAstBuilderNode } from './RootAstBuilderNode';
 
 interface AstBuilderProps {
@@ -42,16 +41,14 @@ export function AstBuilder({
   return (
     <OptionsProvider {...options}>
       <CopyPasteASTContextProvider>
-        <AggregationEditModal>
-          <RootAstBuilderNode
-            setOperand={setOperand}
-            setOperator={setOperator}
-            appendChild={appendChild}
-            remove={remove}
-            astNodeVM={astNodeVM}
-            viewOnly={viewOnly}
-          />
-        </AggregationEditModal>
+        <RootAstBuilderNode
+          setOperand={setOperand}
+          setOperator={setOperator}
+          appendChild={appendChild}
+          remove={remove}
+          astNodeVM={astNodeVM}
+          viewOnly={viewOnly}
+        />
       </CopyPasteASTContextProvider>
     </OptionsProvider>
   );

diff --git a/...es/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/AggregationEdit/index.ts b/...es/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/AggregationEdit/index.ts
diff --git a/.../AstBuilderNode/AggregationEdit/Modal.tsx → ...Modal/AggregationEdit/AggregationEdit.tsx b/.../AstBuilderNode/AggregationEdit/Modal.tsx → ...Modal/AggregationEdit/AggregationEdit.tsx
@@ -17,21 +17,19 @@ import {
 } from '@app-builder/models/editable-operators';
 import { type EvaluationError } from '@app-builder/models/node-evaluation';
 import { aggregationDocHref } from '@app-builder/services/documentation-href';
-import { CopyPasteASTContextProvider } from '@app-builder/services/editor/copy-paste-ast';
 import { useDataModel } from '@app-builder/services/editor/options';
-import { computeValidationForNamedChildren } from '@app-builder/services/validation/ast-node-validation';
 import {
   adaptEvaluationErrorViewModels,
   useGetNodeEvaluationErrorMessage,
 } from '@app-builder/services/validation';
-import { createSimpleContext } from '@app-builder/utils/create-context';
+import { computeValidationForNamedChildren } from '@app-builder/services/validation/ast-node-validation';
 import { type Namespace } from 'i18next';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Button, Input, ModalV2 } from 'ui-design-system';
 import { Logo } from 'ui-icons';
 
-import { Operator } from '../Operator';
+import { Operator } from '../../../../Operator';
 import { type DataModelField, EditDataModelField } from './EditDataModelField';
 import { EditFilters } from './EditFilters';
 
@@ -160,69 +158,17 @@ export const adaptAggregationAstNode = (
   };
 };
 
-export interface AggregationEditModalProps {
-  initialAggregation: AggregationViewModel;
-  onSave: (astNode: AstNode) => void;
-}
-
-const AggregationEditModalContext = createSimpleContext<
-  (agregationProps: AggregationEditModalProps) => void
->('AggregationEditModal');
-
-export const useEditAggregation = AggregationEditModalContext.useValue;
-
-export function AggregationEditModal({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [open, onOpenChange] = useState<boolean>(false);
-  const [aggregation, setAggregation] = useState<AggregationViewModel>();
-  const onSaveRef = useRef<(astNode: AstNode) => void>();
-
-  const editAgregation = useCallback(
-    (aggregationProps: AggregationEditModalProps) => {
-      setAggregation(aggregationProps.initialAggregation);
-      onSaveRef.current = aggregationProps.onSave;
-      onOpenChange(true);
-    },
-    [],
-  );
-
-  return (
-    <ModalV2.Root open={open} setOpen={onOpenChange}>
-      <AggregationEditModalContext.Provider value={editAgregation}>
-        {children}
-        <ModalV2.Content size="large" unmountOnHide>
-          {/* New context necessary, hack to prevent pasting unwanted astnode inside the modal (ex: I close the modal, copy the current node, open the modal and paste the current inside the current...) */}
-          <CopyPasteASTContextProvider>
-            {aggregation ? (
-              <AggregationEditModalContent
-                aggregation={aggregation}
-                setAggregation={setAggregation}
-                onSave={(astNode) => {
-                  onSaveRef.current?.(astNode);
-                  onOpenChange(false);
-                }}
-              />
-            ) : null}
-          </CopyPasteASTContextProvider>
-        </ModalV2.Content>
-      </AggregationEditModalContext.Provider>
-    </ModalV2.Root>
-  );
-}
-
-function AggregationEditModalContent({
-  aggregation,
-  setAggregation,
+export function AggregationEdit({
+  initialAstNodeVM,
   onSave,
 }: {
-  aggregation: AggregationViewModel;
-  setAggregation: (aggregation: AggregationViewModel) => void;
+  initialAstNodeVM: AggregationAstNodeViewModel;
   onSave: (astNode: AstNode) => void;
 }) {
   const { t } = useTranslation(handle.i18n);
+  const [aggregation, setAggregation] = useState(() =>
+    adaptAggregationViewModel(initialAstNodeVM),
+  );
 
   const dataModel = useDataModel();
   const dataModelFieldOptions = useMemo(
@@ -313,7 +259,9 @@ function AggregationEditModalContent({
                       },
                     })
                   }
-                  errors={aggregation.errors.aggregator}
+                  validationStatus={
+                    aggregation.errors.aggregator.length > 0 ? 'error' : 'valid'
+                  }
                   operators={aggregatorOperators}
                 />
                 <EvaluationErrors

diff --git a/...de/AggregationEdit/EditDataModelField.tsx → ...al/AggregationEdit/EditDataModelField.tsx b/...de/AggregationEdit/EditDataModelField.tsx → ...al/AggregationEdit/EditDataModelField.tsx
diff --git a/...ilderNode/AggregationEdit/EditFilters.tsx → ...EditModal/AggregationEdit/EditFilters.tsx b/...ilderNode/AggregationEdit/EditFilters.tsx → ...EditModal/AggregationEdit/EditFilters.tsx
@@ -1,5 +1,7 @@
 import { Callout } from '@app-builder/components';
 import { scenarioI18n } from '@app-builder/components/Scenario';
+import { RemoveButton } from '@app-builder/components/Scenario/AstBuilder/RemoveButton';
+import { LogicalOperatorLabel } from '@app-builder/components/Scenario/AstBuilder/RootAstBuilderNode/LogicalOperator';
 import { EvaluationErrors } from '@app-builder/components/Scenario/ScenarioValidationError';
 import { type AstNode, NewUndefinedAstNode } from '@app-builder/models';
 import {
@@ -10,23 +12,26 @@ import {
   filterOperators,
   isFilterOperator,
 } from '@app-builder/models/editable-operators';
-import { useOperandOptions } from '@app-builder/services/editor/options';
+import {
+  useGetAstNodeOption,
+  useOperandOptions,
+} from '@app-builder/services/editor/options';
 import {
   adaptEvaluationErrorViewModels,
   useGetNodeEvaluationErrorMessage,
 } from '@app-builder/services/validation';
+import { getValidationStatus } from '@app-builder/services/validation/ast-node-validation';
 import clsx from 'clsx';
+import { useMemo } from 'react';
 import { Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
-import { RemoveButton } from '../../RemoveButton';
-import { LogicalOperatorLabel } from '../../RootAstBuilderNode/LogicalOperator';
-import { Operand } from '../Operand';
-import { Operator } from '../Operator';
+import { Operator } from '../../../../Operator';
+import { Operand } from '../../../Operand';
+import { type FilterViewModel } from './AggregationEdit';
 import { type DataModelField, EditDataModelField } from './EditDataModelField';
-import { type FilterViewModel } from './Modal';
 
 const newFilterValidation = () => ({
   filter: [],
@@ -137,7 +142,9 @@ export function EditFilters({
                     setValue={(operator) =>
                       onFilterChange({ operator }, filterIndex)
                     }
-                    errors={filter.errors.operator}
+                    validationStatus={
+                      filter.errors.operator.length > 0 ? 'error' : 'valid'
+                    }
                     operators={filterOperators}
                   />
                   <FilterValue
@@ -182,8 +189,15 @@ function FilterValue({
   filterValue: AstNodeViewModel;
   onSave: (astNode: AstNode) => void;
 }) {
-  const filterOptions = useOperandOptions({ operandViewModel: filterValue });
-  return (
-    <Operand astNodeVM={filterValue} onSave={onSave} options={filterOptions} />
-  );
+  const filterOptions = useOperandOptions(filterValue);
+  const getAstNodeOption = useGetAstNodeOption();
+
+  const operandProps = useMemo(() => {
+    return {
+      ...getAstNodeOption(filterValue),
+      validationStatus: getValidationStatus(filterValue),
+    };
+  }, [filterValue, getAstNodeOption]);
+
+  return <Operand {...operandProps} onSave={onSave} options={filterOptions} />;
 }
diff --git a/...rio/AstBuilder/AstBuilderNode/Operand/OperandEditor/OperandEditModal/OperandEditModal.tsx b/...rio/AstBuilder/AstBuilderNode/Operand/OperandEditor/OperandEditModal/OperandEditModal.tsx
@@ -1,6 +1,7 @@
 import {
   type AstNode,
   type EditableAstNode,
+  isAggregation,
   isFuzzyMatchComparator,
   isTimeAdd,
 } from '@app-builder/models';
@@ -10,6 +11,7 @@ import * as React from 'react';
 import { assertNever } from 'typescript-utils';
 import { type ModalContentV2Props, ModalV2 } from 'ui-design-system';
 
+import { AggregationEdit } from './AggregationEdit/AggregationEdit';
 import { FuzzyMatchComparatorEdit } from './FuzzyMatchComparatorEdit/FuzzyMatchComparatorEdit';
 import { TimeAddEdit } from './TimeAddEdit/TimeAddEdit';
 
@@ -56,6 +58,18 @@ export function OperandEditModal({
       </OperandEditModalContent>
     );
   }
+  if (isAggregation(initialEditableAstNode)) {
+    return (
+      <OperandEditModalContent size="large">
+        <AggregationEdit
+          initialAstNodeVM={adaptAstNodeViewModel({
+            ast: initialEditableAstNode,
+          })}
+          onSave={onSave}
+        />
+      </OperandEditModalContent>
+    );
+  }
   assertNever(
     '[OperandEditModal] Unsupported astNode type',
     initialEditableAstNode,