@finos/legend-query-builder 4.14.10 → 4.14.12

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

@@ -31,20 +31,32 @@ import {
   MenuContent,
   MenuContentItem,
   ModalFooterButton,
+  InputWithInlineValidation,
 } from '@finos/legend-art';
 import { SortColumnState } from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
-import { guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  addUniqueEntry,
+  deleteEntry,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
 import { useApplicationStore } from '@finos/legend-application';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import { COLUMN_SORT_TYPE } from '../../graph/QueryBuilderMetaModelConst.js';
+import { useEffect, useState } from 'react';
+import type { QueryBuilderProjectionColumnState } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
+import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
 
 const ColumnSortEditor = observer(
-  (props: { tdsState: QueryBuilderTDSState; sortState: SortColumnState }) => {
-    const { tdsState, sortState } = props;
+  (props: {
+    sortColumns: SortColumnState[];
+    setSortColumns: (sortColumns: SortColumnState[]) => void;
+    sortState: SortColumnState;
+    tdsColumns: QueryBuilderTDSColumnState[];
+  }) => {
+    const { sortColumns, setSortColumns, sortState, tdsColumns } = props;
     const applicationStore = useApplicationStore();
-    const sortColumns = tdsState.resultSetModifierState.sortColumns;
-    const projectionOptions = tdsState.tdsColumns
+    const projectionOptions = tdsColumns
       .filter(
         (projectionCol) =>
           projectionCol === sortState.columnState ||
@@ -58,6 +70,8 @@ const ColumnSortEditor = observer(
       label: sortState.columnState.columnName,
       value: sortState,
     };
+    const sortType = sortState.sortType;
+
     const onChange = (
       val: { label: string; value: QueryBuilderTDSColumnState } | null,
     ): void => {
@@ -65,13 +79,17 @@ const ColumnSortEditor = observer(
         sortState.setColumnState(val.value);
       }
     };
-    const sortType = sortState.sortType;
 
-    const deleteColumnSort = (): void =>
-      tdsState.resultSetModifierState.deleteSortColumn(sortState);
+    const deleteColumnSort = (): void => {
+      const newSortColumns = [...sortColumns];
+      deleteEntry(newSortColumns, sortState);
+      setSortColumns(newSortColumns);
+    };
+
     const changeSortBy = (sortOp: COLUMN_SORT_TYPE) => (): void => {
       sortState.setSortType(sortOp);
     };
+
     return (
       <div className="panel__content__form__section__list__item query-builder__projection__options__sort">
         <CustomSelectorInput
@@ -120,6 +138,9 @@ const ColumnSortEditor = observer(
           onClick={deleteColumnSort}
           tabIndex={-1}
           title="Remove"
+          data-testid={
+            QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL_SORT_REMOVE_BTN
+          }
         >
           <TimesIcon />
         </button>
@@ -129,11 +150,15 @@ const ColumnSortEditor = observer(
 );
 
 const ColumnsSortEditor = observer(
-  (props: { tdsState: QueryBuilderTDSState }) => {
-    const { tdsState } = props;
-    const resultSetModifierState = tdsState.resultSetModifierState;
-    const sortColumns = resultSetModifierState.sortColumns;
-    const projectionOptions = tdsState.projectionColumns
+  (props: {
+    projectionColumns: QueryBuilderProjectionColumnState[];
+    sortColumns: SortColumnState[];
+    setSortColumns: (sortColumns: SortColumnState[]) => void;
+    tdsColumns: QueryBuilderTDSColumnState[];
+  }) => {
+    const { projectionColumns, sortColumns, setSortColumns, tdsColumns } =
+      props;
+    const projectionOptions = projectionColumns
       .filter(
         (projectionCol) =>
           !sortColumns.some((sortCol) => sortCol.columnState === projectionCol),
@@ -147,7 +172,9 @@ const ColumnsSortEditor = observer(
         const sortColumn = new SortColumnState(
           guaranteeNonNullable(projectionOptions[0]).value,
         );
-        resultSetModifierState.addSortColumn(sortColumn);
+        const newSortColumns = [...sortColumns];
+        addUniqueEntry(newSortColumns, sortColumn);
+        setSortColumns(newSortColumns);
       }
     };
 
@@ -166,8 +193,10 @@ const ColumnsSortEditor = observer(
             {sortColumns.map((value) => (
               <ColumnSortEditor
                 key={value.columnState.uuid}
-                tdsState={tdsState}
+                sortColumns={sortColumns}
+                setSortColumns={setSortColumns}
                 sortState={value}
+                tdsColumns={tdsColumns}
               />
             ))}
           </div>
@@ -187,77 +216,140 @@ const ColumnsSortEditor = observer(
   },
 );
 
+const cloneSortColumnStateArray = (
+  sortColumns: SortColumnState[],
+): SortColumnState[] =>
+  sortColumns.map((sortColumn) => {
+    const newSortColumn = new SortColumnState(sortColumn.columnState);
+    newSortColumn.setSortType(sortColumn.sortType);
+    return newSortColumn;
+  });
+
 export const QueryResultModifierModal = observer(
   (props: { tdsState: QueryBuilderTDSState }) => {
-    const { tdsState: tdsState } = props;
+    // Read current state
+    const { tdsState } = props;
     const resultSetModifierState = tdsState.resultSetModifierState;
-    const limitResults = resultSetModifierState.limit;
-    const distinct = resultSetModifierState.distinct;
-    const close = (): void => resultSetModifierState.setShowModal(false);
-    const toggleDistinct = (): void => resultSetModifierState.toggleDistinct();
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      const val = event.target.value;
-      resultSetModifierState.setLimit(
-        val === '' ? undefined : parseInt(val, 10),
-      );
-    };
+    const stateSortColumns = resultSetModifierState.sortColumns;
+    const stateDistinct = resultSetModifierState.distinct;
+    const stateLimitResults = resultSetModifierState.limit;
+    const stateSlice = resultSetModifierState.slice;
+
+    // Set up temp state for modal lifecycle
+    const [sortColumns, setSortColumns] = useState(
+      cloneSortColumnStateArray(stateSortColumns),
+    );
+    const [distinct, setDistinct] = useState(stateDistinct);
+    const [limitResults, setLimitResults] = useState(stateLimitResults);
+    const [slice, setSlice] = useState<
+      [number | undefined, number | undefined]
+    >(stateSlice ?? [undefined, undefined]);
+
+    // Sync temp state with tdsState when modal is opened/closed
+    useEffect(() => {
+      setSortColumns(cloneSortColumnStateArray(stateSortColumns));
+      setDistinct(stateDistinct);
+      setLimitResults(stateLimitResults);
+      setSlice(stateSlice ?? [undefined, undefined]);
+    }, [
+      resultSetModifierState.showModal,
+      stateSortColumns,
+      stateDistinct,
+      stateLimitResults,
+      stateSlice,
+    ]);
 
-    const handleSliceStartChange = (start: number, end: number): void => {
-      const slice: [number, number] = [start, end];
-      resultSetModifierState.setSlice(slice);
+    // Handle user actions
+    const closeModal = (): void => resultSetModifierState.setShowModal(false);
+    const applyChanges = (): void => {
+      resultSetModifierState.setSortColumns(sortColumns);
+      resultSetModifierState.setDistinct(distinct);
+      resultSetModifierState.setLimit(limitResults);
+      if (slice[0] !== undefined && slice[1] !== undefined) {
+        resultSetModifierState.setSlice([slice[0], slice[1]]);
+      } else {
+        resultSetModifierState.setSlice(undefined);
+      }
+      resultSetModifierState.setShowModal(false);
     };
 
-    const clearSlice = (): void => {
-      resultSetModifierState.setSlice(undefined);
+    const handleLimitResultsChange: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => {
+      const val = event.target.value.replace(/[^0-9]/g, '');
+      setLimitResults(val === '' ? undefined : parseInt(val, 10));
     };
 
-    const addSlice = (): void => {
-      resultSetModifierState.setSlice([0, 1]);
+    const handleSliceChange = (
+      start: number | undefined,
+      end: number | undefined,
+    ): void => {
+      const newSlice: [number | undefined, number | undefined] = [start, end];
+      setSlice(newSlice);
     };
 
     const changeSliceStart: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => {
-      const currentSlice = resultSetModifierState.slice;
-      const val = event.target.value;
-      const start = typeof val === 'number' ? val : parseInt(val, 10);
-      if (currentSlice) {
-        handleSliceStartChange(start, currentSlice[1]);
+      const val = event.target.value.replace(/[^0-9]/g, '');
+      if (val === '') {
+        handleSliceChange(undefined, slice[1]);
+      } else {
+        const start = typeof val === 'number' ? val : parseInt(val, 10);
+        handleSliceChange(start, slice[1]);
       }
     };
     const changeSliceEnd: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => {
-      const currentSlice = resultSetModifierState.slice;
-      const val = event.target.value;
-      const end = typeof val === 'number' ? val : parseInt(val, 10);
-      if (currentSlice) {
-        handleSliceStartChange(currentSlice[0], end);
+      const val = event.target.value.replace(/[^0-9]/g, '');
+      if (val === '') {
+        handleSliceChange(slice[0], undefined);
+      } else {
+        const end = typeof val === 'number' ? val : parseInt(val, 10);
+        handleSliceChange(slice[0], end);
       }
     };
 
+    // Error states
+    const isInvalidSlice =
+      (slice[0] === undefined && slice[1] !== undefined) ||
+      (slice[0] !== undefined && slice[1] === undefined) ||
+      (slice[0] !== undefined &&
+        slice[1] !== undefined &&
+        slice[0] >= slice[1]);
+
     return (
       <Dialog
         open={Boolean(resultSetModifierState.showModal)}
-        onClose={close}
+        onClose={closeModal}
         classes={{
           root: 'editor-modal__root-container',
           container: 'editor-modal__container',
           paper: 'editor-modal__content',
         }}
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={true}
+          className="editor-modal query-builder__projection__modal"
+        >
           <ModalHeader title="Result Set Modifier" />
           <ModalBody className="query-builder__projection__modal__body">
             <div className="query-builder__projection__options">
-              <ColumnsSortEditor tdsState={tdsState} />
+              <ColumnsSortEditor
+                projectionColumns={tdsState.projectionColumns}
+                sortColumns={sortColumns}
+                setSortColumns={setSortColumns}
+                tdsColumns={tdsState.tdsColumns}
+              />
               <div className="panel__content__form__section">
                 <div className="panel__content__form__section__header__label">
                   Eliminate Duplicate Rows
                 </div>
                 <div
                   className="panel__content__form__section__toggler"
-                  onClick={toggleDistinct}
+                  onClick={() => setDistinct(!distinct)}
                 >
                   <button
                     className={clsx(
@@ -277,75 +369,74 @@ export const QueryResultModifierModal = observer(
                 </div>
               </div>
               <div className="panel__content__form__section">
-                <div className="panel__content__form__section__header__label">
+                <label
+                  htmlFor="query-builder__projection__modal__limit-results-input"
+                  className="panel__content__form__section__header__label"
+                >
                   Limit Results
-                </div>
+                </label>
                 <div className="panel__content__form__section__header__prompt">
                   Specify the maximum total number of rows the output will
                   produce
                 </div>
                 <input
+                  id="query-builder__projection__modal__limit-results-input"
                   className="panel__content__form__section__input panel__content__form__section__number-input"
                   spellCheck={false}
-                  type="number"
+                  type="text"
                   value={limitResults ?? ''}
-                  onChange={changeValue}
+                  onChange={handleLimitResultsChange}
                 />
               </div>
               <div className="panel__content__form__section">
-                <div className="panel__content__form__section__header__label">
+                <label
+                  htmlFor="query-builder__projection__modal__slice-start-input"
+                  className="panel__content__form__section__header__label"
+                >
                   Slice
-                </div>
+                </label>
                 <div className="panel__content__form__section__header__prompt">
                   Reduce the number of rows in the provided TDS, selecting the
                   set of rows in the specified range between start and stop
                 </div>
-                {resultSetModifierState.slice ? (
-                  <>
-                    <div className="query-builder__result__slice">
-                      <input
-                        className="input--dark query-builder__result__slice__input"
-                        spellCheck={false}
-                        value={resultSetModifierState.slice[0]}
-                        onChange={changeSliceStart}
-                        type="number"
-                      />
-                      <div className="query-builder__result__slice__range">
-                        ..
-                      </div>
-                      <input
-                        className="input--dark query-builder__result__slice__input"
-                        spellCheck={false}
-                        value={resultSetModifierState.slice[1]}
-                        onChange={changeSliceEnd}
-                        type="number"
-                      />
-                      <button
-                        className="query-builder__projection__options__sort__remove-btn btn--dark btn--caution"
-                        onClick={clearSlice}
-                        tabIndex={-1}
-                        title="Remove"
-                      >
-                        <TimesIcon />
-                      </button>
-                    </div>
-                  </>
-                ) : (
-                  <div className="panel__content__form__section__list__new-item__add">
-                    <button
-                      className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                      onClick={addSlice}
-                      tabIndex={-1}
-                    >
-                      Add Slice
-                    </button>
+                <div className="query-builder__result__slice">
+                  <div className="query-builder__result__slice__input__wrapper">
+                    <InputWithInlineValidation
+                      id="query-builder__projection__modal__slice-start-input"
+                      className="input--dark query-builder__result__slice__input"
+                      spellCheck={false}
+                      value={slice[0] ?? ''}
+                      onChange={changeSliceStart}
+                      type="text"
+                      error={isInvalidSlice ? 'Invalid slice' : undefined}
+                    />
+                  </div>
+                  <div className="query-builder__result__slice__range">..</div>
+                  <div className="query-builder__result__slice__input__wrapper">
+                    <InputWithInlineValidation
+                      className="input--dark query-builder__result__slice__input"
+                      spellCheck={false}
+                      value={slice[1] ?? ''}
+                      onChange={changeSliceEnd}
+                      type="text"
+                      error={isInvalidSlice ? 'Invalid slice' : undefined}
+                    />
                   </div>
-                )}
+                </div>
               </div>
             </div>
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton
+              onClick={applyChanges}
+              text="Apply"
+              disabled={isInvalidSlice}
+            />
+            <ModalFooterButton
+              onClick={closeModal}
+              text="Cancel"
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/shared/LambdaEditor.tsx

@@ -159,6 +159,8 @@ const LambdaEditor_Inner = observer(
           applicationStore.alertUnhandledError,
         );
         setExpanded(!isExpanded);
+      } else if (!forceExpansion && parserError) {
+        setExpanded(!isExpanded);
       }
     };
 
@@ -399,7 +401,6 @@ const LambdaEditor_Inner = observer(
             <button
               className="lambda-editor__editor__expand-btn"
               onClick={toggleExpandedMode}
-              disabled={Boolean(parserError)}
               tabIndex={-1}
               title="Toggle Expand"
             >
@@ -410,7 +411,6 @@ const LambdaEditor_Inner = observer(
             <button
               className="lambda-editor__action"
               onClick={openInPopUp}
-              disabled={Boolean(parserError)}
               tabIndex={-1}
               title="Open in a popup..."
             >
@@ -569,12 +569,14 @@ const LambdaEditor_PopUp = observer(
     }
 
     useEffect(() => {
-      flowResult(
-        lambdaEditorState.convertLambdaObjectToGrammarString({
-          pretty: true,
-          preserveCompilationError: true,
-        }),
-      ).catch(applicationStore.alertUnhandledError);
+      if (!lambdaEditorState.parserError) {
+        flowResult(
+          lambdaEditorState.convertLambdaObjectToGrammarString({
+            pretty: true,
+            preserveCompilationError: true,
+          }),
+        ).catch(applicationStore.alertUnhandledError);
+      }
     }, [applicationStore, lambdaEditorState]);
 
     // dispose editor

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -18,6 +18,7 @@ import {
   ShareBoxIcon,
   type TooltipPlacement,
   Tooltip,
+  ClickAwayListener,
 } from '@finos/legend-art';
 import {
   type AbstractProperty,
@@ -137,73 +138,88 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
     explorerState,
   } = props;
 
+  const [open, setIsOpen] = useState(false);
+
   return (
-    <Tooltip
-      arrow={true}
-      {...(placement !== undefined ? { placement } : {})}
-      classes={{
-        tooltip: 'query-builder__tooltip',
-        arrow: 'query-builder__tooltip__arrow',
-        tooltipPlacementRight: 'query-builder__tooltip--right',
-      }}
-      TransitionProps={{
-        // disable transition
-        // NOTE: somehow, this is the only workaround we have, if for example
-        // we set `appear = true`, the tooltip will jump out of position
-        timeout: 0,
-      }}
-      title={
-        <div className="query-builder__tooltip__content">
-          <div className="query-builder__tooltip__header">{title}</div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Type</div>
-            <div className="query-builder__tooltip__item__value">
-              {type?.path ?? property.genericType.value.rawType.path}
-            </div>
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Path</div>
-            <div className="query-builder__tooltip__item__value">{path}</div>
-            {explorerState && (
-              <div className="query-builder__tooltip__item__action">
-                <button
-                  onClick={() => explorerState.highlightTreeNode(path)}
-                  title="Show in tree"
-                >
-                  <ShareBoxIcon color="white" />
-                </button>
+    <ClickAwayListener onClickAway={() => setIsOpen(false)}>
+      <div>
+        <Tooltip
+          arrow={true}
+          {...(placement !== undefined ? { placement } : {})}
+          classes={{
+            tooltip: 'query-builder__tooltip',
+            arrow: 'query-builder__tooltip__arrow',
+            tooltipPlacementRight: 'query-builder__tooltip--right',
+          }}
+          open={open}
+          onClose={() => setIsOpen(false)}
+          TransitionProps={{
+            // disable transition
+            // NOTE: somehow, this is the only workaround we have, if for example
+            // we set `appear = true`, the tooltip will jump out of position
+            timeout: 0,
+          }}
+          disableFocusListener={true}
+          disableHoverListener={true}
+          disableTouchListener={true}
+          title={
+            <div className="query-builder__tooltip__content">
+              <div className="query-builder__tooltip__header">{title}</div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">Type</div>
+                <div className="query-builder__tooltip__item__value">
+                  {type?.path ?? property.genericType.value.rawType.path}
+                </div>
               </div>
-            )}
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">
-              Multiplicity
-            </div>
-            <div className="query-builder__tooltip__item__value">
-              {getMultiplicityDescription(property.multiplicity)}
-            </div>
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">
-              Derived Property
-            </div>
-            <div className="query-builder__tooltip__item__value">
-              {property instanceof DerivedProperty ? 'Yes' : 'No'}
-            </div>
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Mapped</div>
-            <div className="query-builder__tooltip__item__value">
-              {isMapped ? 'Yes' : 'No'}
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">Path</div>
+                <div className="query-builder__tooltip__item__value">
+                  {path}
+                </div>
+                {explorerState && (
+                  <div className="query-builder__tooltip__item__action">
+                    <button
+                      onClick={() => explorerState.highlightTreeNode(path)}
+                      title="Show in tree"
+                    >
+                      <ShareBoxIcon color="white" />
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">
+                  Multiplicity
+                </div>
+                <div className="query-builder__tooltip__item__value">
+                  {getMultiplicityDescription(property.multiplicity)}
+                </div>
+              </div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">
+                  Derived Property
+                </div>
+                <div className="query-builder__tooltip__item__value">
+                  {property instanceof DerivedProperty ? 'Yes' : 'No'}
+                </div>
+              </div>
+              <div className="query-builder__tooltip__item">
+                <div className="query-builder__tooltip__item__label">
+                  Mapped
+                </div>
+                <div className="query-builder__tooltip__item__value">
+                  {isMapped ? 'Yes' : 'No'}
+                </div>
+              </div>
+              <QueryBuilderTaggedValueInfoTooltip
+                taggedValues={property.taggedValues}
+              />
             </div>
-          </div>
-          <QueryBuilderTaggedValueInfoTooltip
-            taggedValues={property.taggedValues}
-          />
-        </div>
-      }
-    >
-      {children}
-    </Tooltip>
+          }
+        >
+          <div onClick={() => setIsOpen(true)}>{children}</div>
+        </Tooltip>
+      </div>
+    </ClickAwayListener>
   );
 };

package/src/stores/fetch-structure/tds/QueryResultSetModifierState.ts

@@ -16,12 +16,7 @@
 
 import { action, computed, makeObservable, observable } from 'mobx';
 import type { QueryBuilderTDSState } from './QueryBuilderTDSState.js';
-import {
-  addUniqueEntry,
-  deleteEntry,
-  type Hashable,
-  hashArray,
-} from '@finos/legend-shared';
+import { addUniqueEntry, type Hashable, hashArray } from '@finos/legend-shared';
 import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from '../../QueryBuilderStateHashUtils.js';
 import type { QueryBuilderTDSColumnState } from './QueryBuilderTDSColumnState.js';
 import { COLUMN_SORT_TYPE } from '../../../graph/QueryBuilderMetaModelConst.js';
@@ -76,8 +71,8 @@ export class QueryResultSetModifierState implements Hashable {
       slice: observable.ref,
       setShowModal: action,
       setLimit: action,
-      toggleDistinct: action,
-      deleteSortColumn: action,
+      setDistinct: action,
+      setSortColumns: action,
       addSortColumn: action,
       updateSortColumns: action,
       setSlice: action,
@@ -96,12 +91,12 @@ export class QueryResultSetModifierState implements Hashable {
     this.limit = val === undefined || val <= 0 ? undefined : val;
   }
 
-  toggleDistinct(): void {
-    this.distinct = !this.distinct;
+  setDistinct(val: boolean): void {
+    this.distinct = val;
   }
 
-  deleteSortColumn(val: SortColumnState): void {
-    deleteEntry(this.sortColumns, val);
+  setSortColumns(val: SortColumnState[]): void {
+    this.sortColumns = val;
   }
 
   addSortColumn(val: SortColumnState): void {