@finos/legend-query-builder 0.6.14 → 0.6.16

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -29,6 +29,9 @@ import {
   SaveIcon,
   PencilIcon,
   DragPreviewLayer,
+  FilledWindowMaximizeIcon,
+  BasePopover,
+  PanelFormSection,
 } from '@finos/legend-art';
 import {
   type Enum,
@@ -58,6 +61,7 @@ import {
   isNonNullable,
   returnUndefOnError,
   uniq,
+  parseCSVString,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -465,26 +469,14 @@ const setCollectionValue = (
     return;
   }
   let result: unknown[] = [];
-  const parseResult = CSVParser.parse<string[]>(value.trim(), {
-    delimiter: ',',
-  });
-  const parseData = parseResult.data[0] as string[]; // only take the first line
-  if (parseResult.errors.length) {
-    if (
-      parseResult.errors[0] &&
-      parseResult.errors[0].code === 'UndetectableDelimiter' &&
-      parseResult.errors[0].type === 'Delimiter' &&
-      parseResult.data.length === 1
-    ) {
-      // NOTE: this happens when the user only put one item in the value input
-      // we can go the other way by ensure the input has a comma but this is arguably neater
-      // as it tinkers with the parser
-    } else {
-      // there were some parsing error, escape
-      // NOTE: ideally, we could show a warning here
-      return;
-    }
-  } else if (expectedType instanceof PrimitiveType) {
+
+  const parseData = parseCSVString(value);
+
+  if (!parseData) {
+    return;
+  }
+
+  if (expectedType instanceof PrimitiveType) {
     switch (expectedType.path) {
       case PRIMITIVE_TYPE.STRING: {
         result = uniq(parseData)
@@ -568,6 +560,8 @@ const CollectionValueInstanceValueEditor = observer(
     const inputRef = useRef<HTMLInputElement>(null);
     const [text, setText] = useState(stringifyValue(valueSpecification.values));
     const [editable, setEditable] = useState(false);
+    const [showAdvancedEditorPopover, setShowAdvancedEditorPopover] =
+      useState(false);
     const valueText = stringifyValue(valueSpecification.values);
     const previewText = `List(${
       valueSpecification.values.length === 0
@@ -585,12 +579,19 @@ const CollectionValueInstanceValueEditor = observer(
     const enableEdit = (): void => setEditable(true);
     const saveEdit = (): void => {
       setEditable(false);
+      setShowAdvancedEditorPopover(false);
       setCollectionValue(valueSpecification, expectedType, text);
       setText(stringifyValue(valueSpecification.values));
       setValueSpecification(valueSpecification);
     };
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
+    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      setText(event.target.value);
+    };
+    const changeValueTextArea: React.ChangeEventHandler<HTMLTextAreaElement> = (
+      event,
+    ) => {
       setText(event.target.value);
+    };
 
     // focus the input box when edit is enabled
     useEffect(() => {
@@ -601,29 +602,66 @@ const CollectionValueInstanceValueEditor = observer(
 
     if (editable) {
       return (
-        <div className={clsx('value-spec-editor', className)}>
-          <input
-            ref={inputRef}
-            className="panel__content__form__section__input value-spec-editor__input"
-            spellCheck={false}
-            value={text}
-            placeholder={text === '' ? '(empty)' : undefined}
-            onChange={changeValue}
-          />
-          <button
-            className="value-spec-editor__list-editor__save-button btn--dark"
-            onClick={saveEdit}
-          >
-            <SaveIcon />
-          </button>
-          <button
-            className="value-spec-editor__reset-btn"
-            title="Reset"
-            onClick={resetValue}
-          >
-            <RefreshIcon />
-          </button>
-        </div>
+        <>
+          {showAdvancedEditorPopover && (
+            <BasePopover
+              onClose={() => setShowAdvancedEditorPopover(false)}
+              open={showAdvancedEditorPopover}
+              anchorEl={inputRef.current}
+            >
+              <textarea
+                className="panel__content__form__section__input value-spec-editor__list-editor__textarea"
+                spellCheck={false}
+                value={text}
+                placeholder={text === '' ? '(empty)' : undefined}
+                onChange={changeValueTextArea}
+                onKeyDown={(event): void => {
+                  if (event.key === 'Enter' && !event.shiftKey) {
+                    saveEdit();
+                  }
+                }}
+              />
+              <PanelFormSection>
+                <div className="value-spec-editor__list-editor__textarea__description">
+                  Hit Enter to Apply Change
+                </div>
+              </PanelFormSection>
+            </BasePopover>
+          )}
+          <div className={clsx('value-spec-editor', className)}>
+            <input
+              ref={inputRef}
+              className={clsx(
+                'panel__content__form__section__input value-spec-editor__input',
+              )}
+              spellCheck={false}
+              value={text}
+              placeholder={text === '' ? '(empty)' : undefined}
+              onChange={changeValue}
+            />
+            <button
+              className="value-spec-editor__list-editor__expand-button btn--dark"
+              onClick={() => setShowAdvancedEditorPopover(true)}
+              tabIndex={-1}
+              title="Expand window..."
+            >
+              <FilledWindowMaximizeIcon />
+            </button>
+            <button
+              className="value-spec-editor__list-editor__save-button btn--dark"
+              onClick={saveEdit}
+            >
+              <SaveIcon />
+            </button>
+            <button
+              className="value-spec-editor__reset-btn"
+              title="Reset"
+              onClick={resetValue}
+            >
+              <RefreshIcon />
+            </button>
+          </div>
+        </>
       );
     }
     return (

package/src/components/shared/LambdaEditor.tsx

@@ -464,7 +464,9 @@ const LambdaEditorPopUp = observer(
         const _editor = monacoEditorAPI.create(element, {
           ...getBaseTextEditorOptions(),
           language: EDITOR_LANGUAGE.PURE,
-          theme: EDITOR_THEME.LEGEND,
+          theme: applicationStore.TEMPORARY__isLightThemeEnabled
+            ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
+            : EDITOR_THEME.LEGEND,
         });
         setEditor(_editor);
       }
@@ -584,11 +586,18 @@ const LambdaEditorPopUp = observer(
       >
         <Modal
           darkMode={true}
-          className={clsx('editor-modal lambda-editor__popup__modal', {
-            'lambda-editor__popup__modal--has-error': Boolean(
-              lambdaEditorState.parserError,
-            ),
-          })}
+          className={clsx(
+            'editor-modal lambda-editor__popup__modal',
+            {
+              'lambda-editor__popup__modal--has-error': Boolean(
+                lambdaEditorState.parserError,
+              ),
+            },
+            {
+              'lambda-editor--light':
+                applicationStore.TEMPORARY__isLightThemeEnabled,
+            },
+          )}
         >
           <ModalHeader>
             <ModalTitle title="Edit Lambda" />

package/src/components/workflows/ClassQueryBuilder.tsx

@@ -157,6 +157,7 @@ const ClassQueryBuilderSetupPanelContent = observer(
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
                   darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>
@@ -181,6 +182,7 @@ const ClassQueryBuilderSetupPanelContent = observer(
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
                   darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>

package/src/components/workflows/MappingQueryBuilder.tsx

@@ -151,6 +151,7 @@ const MappingQueryBuilderSetupPanelContent = observer(
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
                   darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>
@@ -173,6 +174,7 @@ const MappingQueryBuilderSetupPanelContent = observer(
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
                   darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>

package/src/index.ts

@@ -45,6 +45,9 @@ export type { MappingRuntimeCompatibilityAnalysisResult } from './graphManager/a
 export * from './stores/ServiceInfo.js';
 export * from './components/ServiceQuerySetupUtils.js';
 export * from './components/QuerySetupUtils.js';
+export * from './components/QueryBuilderTextEditor.js';
+
+export { TEST__setUpQueryBuilder } from './components/QueryBuilderComponentTestUtils.js';
 
 // ------------------------------------------- Shared components -------------------------------------------
 
@@ -56,3 +59,4 @@ export { LambdaEditorState } from './stores/shared/LambdaEditorState.js';
 export * from './stores/shared/LambdaParameterState.js';
 export * from './stores/shared/ValueSpecificationModifierHelper.js';
 export * from './stores/shared/ValueSpecificationEditorHelper.js';
+export { QueryBuilderTextEditorMode } from './stores/QueryBuilderTextEditorState.js';

package/src/stores/QueryBuilderResultState.ts

@@ -154,7 +154,7 @@ export class QueryBuilderResultState {
       );
       const query = this.buildExecutionRawLambda();
       const result =
-        (yield this.queryBuilderState.graphManagerState.graphManager.executeMapping(
+        (yield this.queryBuilderState.graphManagerState.graphManager.runQuery(
           query,
           mapping,
           runtime,
@@ -212,7 +212,7 @@ export class QueryBuilderResultState {
       const query = this.buildExecutionRawLambda();
       const startTime = Date.now();
       const promise =
-        this.queryBuilderState.graphManagerState.graphManager.executeMapping(
+        this.queryBuilderState.graphManagerState.graphManager.runQuery(
           query,
           mapping,
           runtime,

package/src/stores/explorer/QueryBuilderExplorerState.ts

@@ -717,7 +717,7 @@ export class QueryBuilderExplorerState {
         case PRIMITIVE_TYPE.DECIMAL:
         case PRIMITIVE_TYPE.FLOAT: {
           const previewResult =
-            (yield this.queryBuilderState.graphManagerState.graphManager.executeMapping(
+            (yield this.queryBuilderState.graphManagerState.graphManager.runQuery(
               buildNumericPreviewDataQuery(
                 this.queryBuilderState,
                 propertyExpression,
@@ -754,7 +754,7 @@ export class QueryBuilderExplorerState {
         case PRIMITIVE_TYPE.STRICTDATE:
         case PRIMITIVE_TYPE.DATETIME: {
           const previewResult =
-            (yield this.queryBuilderState.graphManagerState.graphManager.executeMapping(
+            (yield this.queryBuilderState.graphManagerState.graphManager.runQuery(
               buildNonNumericPreviewDataQuery(
                 this.queryBuilderState,
                 propertyExpression,

package/src/stores/explorer/QueryFunctionsExplorerState.ts

@@ -139,7 +139,7 @@ const generateFunctionsExplorerTreeNodeChilrdren = (
 };
 
 export const getFunctionsExplorerTreeData = (
-  root: Package,
+  roots: Package[],
   queryBuilderState: QueryBuilderState,
   rootPackageName = ROOT_PACKAGE_NAME.MAIN,
 ): TreeData<QueryBuilderFunctionsExplorerTreeNodeData> => {
@@ -164,26 +164,29 @@ export const getFunctionsExplorerTreeData = (
       }
   }
 
-  root.children
-    .slice()
-    .filter((child) => !(child instanceof Unit))
-    .filter(
-      (child) =>
-        child instanceof Package && validDisplayablePackageSet.has(child),
-    )
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .sort(
-      (a, b) => (b instanceof Package ? 1 : 0) - (a instanceof Package ? 1 : 0),
-    )
-    .forEach((childPackage) => {
-      const childTreeNodeData = generateFunctionsExplorerTreeNodeData(
-        queryBuilderState,
-        childPackage,
-        rootPackageName,
-      );
-      addUniqueEntry(rootIds, childTreeNodeData.id);
-      nodes.set(childTreeNodeData.id, childTreeNodeData);
-    });
+  roots.forEach((root) => {
+    root.children
+      .slice()
+      .filter((child) => !(child instanceof Unit))
+      .filter(
+        (child) =>
+          child instanceof Package && validDisplayablePackageSet.has(child),
+      )
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .sort(
+        (a, b) =>
+          (b instanceof Package ? 1 : 0) - (a instanceof Package ? 1 : 0),
+      )
+      .forEach((childPackage) => {
+        const childTreeNodeData = generateFunctionsExplorerTreeNodeData(
+          queryBuilderState,
+          childPackage,
+          rootPackageName,
+        );
+        addUniqueEntry(rootIds, childTreeNodeData.id);
+        nodes.set(childTreeNodeData.id, childTreeNodeData);
+      });
+  });
   return { rootIds, nodes };
 };
 
@@ -343,7 +346,7 @@ export class QueryFunctionsExplorerState {
     this.initializeDisplayablePackagesSet().finally(() => {
       this.setTreeData(
         getFunctionsExplorerTreeData(
-          this.queryBuilderState.graphManagerState.graph.root,
+          [this.queryBuilderState.graphManagerState.graph.root],
           this.queryBuilderState,
         ),
       );
@@ -360,7 +363,7 @@ export class QueryFunctionsExplorerState {
         this.setDependencyTreeData(
           getFunctionsExplorerTreeData(
             this.queryBuilderState.graphManagerState.graph.dependencyManager
-              .root,
+              .roots,
             this.queryBuilderState,
             ROOT_PACKAGE_NAME.PROJECT_DEPENDENCY_ROOT,
           ),

package/src/stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.ts

@@ -373,7 +373,7 @@ export class PostFilterConditionState implements Hashable {
       const columnState = guaranteeNonNullable(_columnState);
       if (performTypeahead(this.value)) {
         const result =
-          (yield this.postFilterState.tdsState.queryBuilderState.graphManagerState.graphManager.executeMapping(
+          (yield this.postFilterState.tdsState.queryBuilderState.graphManagerState.graphManager.runQuery(
             buildProjectionColumnTypeaheadQuery(
               this.postFilterState.tdsState.queryBuilderState,
               columnState,

package/src/stores/filter/QueryBuilderFilterState.ts

@@ -128,7 +128,7 @@ export class FilterConditionState implements Hashable {
       this.typeaheadSearchResults = undefined;
       if (performTypeahead(this.value)) {
         const result =
-          (yield this.filterState.queryBuilderState.graphManagerState.graphManager.executeMapping(
+          (yield this.filterState.queryBuilderState.graphManagerState.graphManager.runQuery(
             buildPropertyTypeaheadQuery(
               this.filterState.queryBuilderState,
               this.propertyExpressionState.propertyExpression,