@finos/legend-query-builder 4.14.9 → 4.14.11

package/src/components/QueryBuilder.tsx

@@ -75,6 +75,8 @@ import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
 import { DataAccessOverview } from './data-access/DataAccessOverview.js';
 import { QueryChat } from './QueryChat.js';
+import { useEffect, useRef } from 'react';
+import { RedoButton, UndoButton } from '@finos/legend-lego/application';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -226,6 +228,7 @@ const QueryBuilderPostGraphFetchPanel = observer(
 export const QueryBuilder = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const queryBuilderRef = useRef<HTMLDivElement>(null);
     const isQuerySupported = queryBuilderState.isQuerySupported;
     const fetchStructureState = queryBuilderState.fetchStructureState;
     const isTDSState =
@@ -368,10 +371,30 @@ export const QueryBuilder = observer(
       }
       return null;
     };
+
+    const undo = (): void => {
+      queryBuilderState.changeHistoryState.undo();
+    };
+
+    const redo = (): void => {
+      queryBuilderState.changeHistoryState.redo();
+    };
+
+    useEffect(() => {
+      // this condition is for passing all exisitng tests because when we initialize a queryBuilderState for a test,
+      // we use an empty RawLambda with an empty class and this useEffect is called earlier than initializeWithQuery()
+      if (queryBuilderState.isQuerySupported && queryBuilderState.class) {
+        queryBuilderState.changeHistoryState.cacheNewQuery(
+          queryBuilderState.buildQuery(),
+        );
+      }
+    }, [queryBuilderState, queryBuilderState.hashCode]);
+
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER}
         className="query-builder"
+        ref={queryBuilderRef}
       >
         <BackdropContainer
           elementId={QUERY_BUILDER_COMPONENT_ELEMENT_ID.BACKDROP_CONTAINER}
@@ -408,6 +431,24 @@ export const QueryBuilder = observer(
                 )}
               </div>
               <div className="query-builder__header__actions">
+                <div className="query-builder__header__actions__undo-redo">
+                  <UndoButton
+                    parent={queryBuilderRef}
+                    canUndo={
+                      queryBuilderState.changeHistoryState.canUndo &&
+                      queryBuilderState.isQuerySupported
+                    }
+                    undo={undo}
+                  />
+                  <RedoButton
+                    parent={queryBuilderRef}
+                    canRedo={
+                      queryBuilderState.changeHistoryState.canRedo &&
+                      queryBuilderState.isQuerySupported
+                    }
+                    redo={redo}
+                  />
+                </div>
                 <DropdownMenu
                   className="query-builder__header__advanced-dropdown"
                   title="Show Advanced Menu..."

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>
@@ -189,75 +218,127 @@ const ColumnsSortEditor = observer(
 
 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([...stateSortColumns]);
+    const [distinct, setDistinct] = useState(stateDistinct);
+    const [limitResults, setLimitResults] = useState(stateLimitResults);
+    const [slice, setSlice] = useState<
+      [number | undefined, number | undefined]
+    >(stateSlice ?? [undefined, undefined]);
 
-    const handleSliceStartChange = (start: number, end: number): void => {
-      const slice: [number, number] = [start, end];
-      resultSetModifierState.setSlice(slice);
+    // Sync temp state with tdsState when modal is opened/closed
+    useEffect(() => {
+      setSortColumns([...stateSortColumns]);
+      setDistinct(stateDistinct);
+      setLimitResults(stateLimitResults);
+      setSlice(stateSlice ?? [undefined, undefined]);
+    }, [
+      resultSetModifierState.showModal,
+      stateSortColumns,
+      stateDistinct,
+      stateLimitResults,
+      stateSlice,
+    ]);
+
+    // 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 +358,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