@finos/legend-query-builder 4.7.4 → 4.8.0

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -25,6 +25,7 @@ import {
   CustomSelectorInput,
   Dialog,
   InfoCircleIcon,
+  InputWithInlineValidation,
   Modal,
   ModalBody,
   ModalFooter,
@@ -42,10 +43,7 @@ import {
   Multiplicity,
   isValidIdentifier,
 } from '@finos/legend-graph';
-import {
-  debounce,
-  generateEnumerableNameFromToken,
-} from '@finos/legend-shared';
+import { generateEnumerableNameFromToken } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import { DEFAULT_CONSTANT_VARIABLE_NAME } from '../stores/QueryBuilderConfig.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
@@ -58,10 +56,11 @@ import { buildDefaultInstanceValue } from '../stores/shared/ValueSpecificationEd
 import { BasicValueSpecificationEditor } from './shared/BasicValueSpecificationEditor.js';
 import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
 import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { variableExpression_setName } from '../stores/shared/ValueSpecificationModifierHelper.js';
-import { LambdaEditor_PopUp } from './shared/LambdaEditor.js';
+import { LambdaEditor } from './shared/LambdaEditor.js';
 import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
+import { flowResult } from 'mobx';
 
 // NOTE: We currently only allow constant variables for primitive types of multiplicity ONE.
 // This is why we don't show multiplicity in the editor.
@@ -219,26 +218,84 @@ const QuerryBuilderCalculatedConstantExpressionEditor = observer(
     const { constantState } = props;
     const queryBuilderState = constantState.queryBuilderState;
     const lambdaState = constantState.lambdaState;
-    const closePopUp = (): void =>
+    const close = (): void =>
       queryBuilderState.constantState.setSelectedConstant(undefined);
-    const debouncedTransformStringToLambda = useMemo(
-      () =>
-        debounce(() => lambdaState.convertLambdaGrammarStringToObject(), 1000),
-      [lambdaState],
-    );
-    const canDrop = true;
+    const applicationStore = queryBuilderState.applicationStore;
+    const changeConstantName: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      variableExpression_setName(constantState.variable, event.target.value);
+    };
+    useEffect(() => {
+      flowResult(
+        lambdaState.convertLambdaObjectToGrammarString({
+          pretty: true,
+        }),
+      ).catch(applicationStore.alertUnhandledError);
+    }, [applicationStore, lambdaState]);
     return (
-      <>
-        <div className="lambda-editor" />
-        <LambdaEditor_PopUp
-          title={`Edit Constant ${constantState.variable.name}`}
-          className={clsx({ 'lambda-editor--dnd-match': canDrop })}
-          disabled={false}
-          lambdaEditorState={lambdaState}
-          transformStringToLambda={debouncedTransformStringToLambda}
-          onClose={closePopUp}
-        />
-      </>
+      <Dialog
+        open={true}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={true}
+          className={clsx('editor-modal query-builder__constants__modal', {
+            'query-builder__constants__modal--has-error': Boolean(
+              lambdaState.parserError,
+            ),
+          })}
+        >
+          <ModalHeader>
+            <div className="modal__title">Update Calculated Constants</div>
+            {lambdaState.parserError && (
+              <div className="modal__title__error-badge">
+                Failed to parse query
+              </div>
+            )}
+          </ModalHeader>
+          <ModalBody>
+            <div
+              className={clsx('query-builder__constants__modal__content', {
+                backdrop__element: Boolean(lambdaState.parserError),
+              })}
+            >
+              <div className="query-builder__constants__modal__name">
+                <InputWithInlineValidation
+                  className="query-builder__constants__modal__name__input input--dark"
+                  spellCheck={false}
+                  value={constantState.variable.name}
+                  onChange={changeConstantName}
+                  placeholder="Constant Name"
+                />
+              </div>
+              <LambdaEditor
+                className="query-builder__constants__lambda-editor"
+                disabled={
+                  lambdaState.convertingLambdaToStringState.isInProgress
+                }
+                lambdaEditorState={lambdaState}
+                forceBackdrop={false}
+                autoFocus={true}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <button
+              className="btn btn--dark"
+              onClick={close}
+              disabled={Boolean(lambdaState.parserError)}
+            >
+              Close
+            </button>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
     );
   },
 );

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -46,6 +46,7 @@ import {
   MoreVerticalIcon,
   MenuContentItemIcon,
   MenuContentItemLabel,
+  PanelLoadingIndicator,
 } from '@finos/legend-art';
 import {
   type ValueSpecification,
@@ -883,7 +884,11 @@ const QueryBuilderPostFilterPanelContent = observer(
             !aggregateColumnState &&
             columnState instanceof QueryBuilderDerivationProjectionColumnState
           ) {
-            await flowResult(columnState.fetchDerivationLambdaReturnType());
+            await flowResult(
+              columnState.fetchDerivationLambdaReturnType({
+                isBeingDropped: true,
+              }),
+            );
           }
           postFilterConditionState = new PostFilterConditionState(
             postFilterState,
@@ -1034,6 +1039,11 @@ const QueryBuilderPostFilterPanelContent = observer(
             isDroppable={isDroppable && postFilterState.isEmpty}
             dropTargetConnector={dropTargetConnector}
           >
+            {
+              <PanelLoadingIndicator
+                isLoading={Boolean(postFilterState.derivedColumnBeingDropped)}
+              />
+            }
             {postFilterState.isEmpty && (
               <BlankPanelPlaceholder
                 text="Add a post-filter condition"

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -174,7 +174,17 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
   }) => {
     const { projectionColumnState } = props;
     const hasParserError = projectionColumnState.tdsState.hasParserError;
-
+    const onEditorBlur = (): void => {
+      flowResult(
+        projectionColumnState.fetchDerivationLambdaReturnType({
+          forceConversionStringToLambda: true,
+          forceRefresh: true,
+        }),
+      ).catch(
+        projectionColumnState.tdsState.queryBuilderState.applicationStore
+          .alertUnhandledError,
+      );
+    };
     const handleDrop = useCallback(
       (
         item:
@@ -247,6 +257,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
           }
           lambdaEditorState={projectionColumnState.derivationLambdaEditorState}
           forceBackdrop={hasParserError}
+          onEditorBlur={onEditorBlur}
         />
       </div>
     );

package/src/components/shared/LambdaEditor.tsx

@@ -99,6 +99,7 @@ const LambdaEditor_Inner = observer(
     autoFocus?: boolean | undefined;
     openInPopUp?: (() => void) | undefined;
     onEditorFocus?: (() => void) | undefined;
+    onEditorBlur?: (() => void) | undefined;
     disableExpansion?: boolean | undefined;
     forceExpansion?: boolean | undefined;
   }) => {
@@ -119,6 +120,7 @@ const LambdaEditor_Inner = observer(
       autoFocus,
       openInPopUp,
       onEditorFocus,
+      onEditorBlur,
     } = props;
     const applicationStore = useApplicationStore();
     const onDidChangeModelContentEventDisposer = useRef<
@@ -127,6 +129,9 @@ const LambdaEditor_Inner = observer(
     const onDidFocusEditorWidgetDisposer = useRef<IDisposable | undefined>(
       undefined,
     );
+    const onDidBlurEditorTextDisposer = useRef<IDisposable | undefined>(
+      undefined,
+    );
     const value = normalizeLineEnding(lambdaEditorState.lambdaString);
     const parserError = lambdaEditorState.parserError;
     const compilationError = lambdaEditorState.compilationError;
@@ -285,7 +290,12 @@ const LambdaEditor_Inner = observer(
           onEditorFocus?.();
         },
       );
-
+      if (onEditorBlur) {
+        onDidBlurEditorTextDisposer.current = editor.onDidBlurEditorText(() => {
+          transformStringToLambda?.cancel();
+          onEditorBlur();
+        });
+      }
       // Set the text value
       const currentValue = getCodeEditorValue(editor);
       const editorModel = editor.getModel();
@@ -419,7 +429,7 @@ const LambdaEditor_Inner = observer(
   },
 );
 
-export const LambdaEditor_PopUp = observer(
+const LambdaEditor_PopUp = observer(
   (props: {
     title?: string | undefined;
     className?: string | undefined;
@@ -668,6 +678,7 @@ type LambdaEditorBaseProps = {
   forceBackdrop: boolean;
   autoFocus?: boolean | undefined;
   onEditorFocus?: (() => void) | undefined;
+  onEditorBlur?: (() => void) | undefined;
 };
 
 export const InlineLambdaEditor = observer(
@@ -716,6 +727,7 @@ export const InlineLambdaEditor = observer(
       hideErrorBar,
       autoFocus,
       onEditorFocus,
+      onEditorBlur,
     } = props;
     const [showPopUp, setShowPopUp] = useState(false);
     const openInPopUp = (): void => setShowPopUp(true);
@@ -786,6 +798,7 @@ export const InlineLambdaEditor = observer(
         autoFocus={autoFocus}
         openInPopUp={openInPopUp}
         onEditorFocus={onEditorFocus}
+        onEditorBlur={onEditorBlur}
         hideErrorBar={hideErrorBar}
         forceExpansion={
           disableExpansion !== undefined

package/src/stores/QueryBuilderConstantsState.ts

@@ -38,6 +38,7 @@ import {
   LogEvent,
   changeEntry,
   assertTrue,
+  ActionState,
 } from '@finos/legend-shared';
 import { action, makeObservable, observable } from 'mobx';
 import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from './QueryBuilderStateHashUtils.js';
@@ -152,10 +153,13 @@ export class QueryBuilderSimpleConstantExpressionState
 export class QueryBuilderConstantLambdaEditorState extends LambdaEditorState {
   readonly queryBuilderState: QueryBuilderState;
   calculatedState: QueryBuilderCalculatedConstantExpressionState;
+  convertingLambdaToStringState = ActionState.create();
+
   constructor(calculatedState: QueryBuilderCalculatedConstantExpressionState) {
     super('', '');
     makeObservable(this, {
       calculatedState: observable,
+      convertingLambdaToStringState: observable,
       buildEmptyValueSpec: observable,
     });
     this.calculatedState = calculatedState;
@@ -184,6 +188,7 @@ export class QueryBuilderConstantLambdaEditorState extends LambdaEditorState {
   override *convertLambdaGrammarStringToObject(): GeneratorFn<void> {
     if (this.lambdaString) {
       try {
+        this.convertingLambdaToStringState.inProgress();
         const valSpec =
           (yield this.queryBuilderState.graphManagerState.graphManager.pureCodeToValueSpecification(
             this.fullLambdaString,
@@ -199,10 +204,13 @@ export class QueryBuilderConstantLambdaEditorState extends LambdaEditorState {
           LogEvent.create(GRAPH_MANAGER_EVENT.PARSING_FAILURE),
           error,
         );
+      } finally {
+        this.convertingLambdaToStringState.complete();
       }
     } else {
       this.clearErrors();
       this.calculatedState.setValue(this.buildEmptyValueSpec());
+      this.convertingLambdaToStringState.complete();
     }
   }
   override *convertLambdaObjectToGrammarString(
@@ -255,6 +263,10 @@ export class QueryBuilderCalculatedConstantExpressionState
     });
     this.value = value;
     this.lambdaState = new QueryBuilderConstantLambdaEditorState(this);
+    observe_ValueSpecification(
+      variable,
+      this.queryBuilderState.observerContext,
+    );
   }
 
   setValue(val: PlainObject): void {

package/src/stores/QueryBuilderState.ts

@@ -552,6 +552,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       if (this.parametersState.parameterStates.length > 0) {
         this.setShowParametersPanel(true);
       }
+      this.fetchStructureState.initializeWithQuery();
     } catch (error) {
       assertErrorThrown(error);
       this.resetQueryResult({ preserveResult: options?.preserveResult });