@finos/legend-query-builder 4.14.37 → 4.14.39

package/src/components/explorer/QueryBuilderMilestoningEditor.tsx

@@ -278,12 +278,10 @@ const AllVersionsInRangelMilestoningParametersEditor = observer(
   },
 );
 
-export const MilestoningParametersEditor = observer(
+export const MilestoningParametersEditorContent = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
-    const applicationStore = queryBuilderState.applicationStore;
     const milestoningState = queryBuilderState.milestoningState;
-    const close = (): void => milestoningState.setShowMilestoningEditor(false);
     const isCompatibleMilestoningParameter = (
       variable: VariableExpression,
     ): boolean =>
@@ -292,6 +290,62 @@ export const MilestoningParametersEditor = observer(
       variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.DATE ||
       variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.DATETIME;
 
+    return (
+      <>
+        {milestoningState.isCurrentClassMilestoned && (
+          <PanelFormBooleanField
+            isReadOnly={false}
+            value={milestoningState.isAllVersionsEnabled}
+            name="all Versions"
+            prompt="Query All Milestoned Versions of the Root Class"
+            update={(value: boolean | undefined): void =>
+              milestoningState.setAllVersions(value)
+            }
+          />
+        )}
+        {milestoningState.isAllVersionsEnabled &&
+          milestoningState.isCurrentClassSupportsVersionsInRange && (
+            <>
+              <PanelFormBooleanField
+                isReadOnly={false}
+                value={milestoningState.isAllVersionsInRangeEnabled}
+                name=" All Versions In Range"
+                prompt="Optionally apply a date range to get All Versions for"
+                update={(value: boolean | undefined): void =>
+                  milestoningState.setAllVersionsInRange(value)
+                }
+              />
+
+              {milestoningState.isAllVersionsInRangeEnabled && (
+                <AllVersionsInRangelMilestoningParametersEditor
+                  queryBuilderState={queryBuilderState}
+                />
+              )}
+            </>
+          )}
+        <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
+        <PanelFormSection>
+          <div className="panel__content__form__section__header__label">
+            List of compatible milestoning parameters
+          </div>
+        </PanelFormSection>
+        <div className="panel__content__form__section__list__items">
+          <VariableSelector
+            queryBuilderState={queryBuilderState}
+            filterBy={isCompatibleMilestoningParameter}
+          />
+        </div>
+      </>
+    );
+  },
+);
+
+export const MilestoningParametersEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = queryBuilderState.applicationStore;
+    const milestoningState = queryBuilderState.milestoningState;
+    const close = (): void => milestoningState.setShowMilestoningEditor(false);
     return (
       <Dialog
         open={milestoningState.showMilestoningEditor}
@@ -310,49 +364,9 @@ export const MilestoningParametersEditor = observer(
         >
           <ModalHeader title="Milestoning Parameters" />
           <ModalBody className="query-builder__variables__modal__body">
-            {milestoningState.isCurrentClassMilestoned && (
-              <PanelFormBooleanField
-                isReadOnly={false}
-                value={milestoningState.isAllVersionsEnabled}
-                name="all Versions"
-                prompt="Query All Milestoned Versions of the Root Class"
-                update={(value: boolean | undefined): void =>
-                  milestoningState.setAllVersions(value)
-                }
-              />
-            )}
-            {milestoningState.isAllVersionsEnabled &&
-              milestoningState.isCurrentClassSupportsVersionsInRange && (
-                <>
-                  <PanelFormBooleanField
-                    isReadOnly={false}
-                    value={milestoningState.isAllVersionsInRangeEnabled}
-                    name=" All Versions In Range"
-                    prompt="Optionally apply a date range to get All Versions for"
-                    update={(value: boolean | undefined): void =>
-                      milestoningState.setAllVersionsInRange(value)
-                    }
-                  />
-
-                  {milestoningState.isAllVersionsInRangeEnabled && (
-                    <AllVersionsInRangelMilestoningParametersEditor
-                      queryBuilderState={queryBuilderState}
-                    />
-                  )}
-                </>
-              )}
-            <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
-            <PanelFormSection>
-              <div className="panel__content__form__section__header__label">
-                List of compatible milestoning parameters
-              </div>
-            </PanelFormSection>
-            <div className="panel__content__form__section__list__items">
-              <VariableSelector
-                queryBuilderState={queryBuilderState}
-                filterBy={isCompatibleMilestoningParameter}
-              />
-            </div>
+            <MilestoningParametersEditorContent
+              queryBuilderState={queryBuilderState}
+            />
           </ModalBody>
           <ModalFooter>
             <ModalFooterButton text="Close" onClick={close} type="secondary" />

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

@@ -26,15 +26,13 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-  SortIcon,
-  DropdownMenu,
-  MenuContent,
-  MenuContentItem,
   ModalFooterButton,
   InputWithInlineValidation,
   PanelDivider,
   PanelDropZone,
   PanelFormSection,
+  ArrowUpIcon,
+  ArrowDownIcon,
 } from '@finos/legend-art';
 import { SortColumnState } from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
 import {
@@ -48,7 +46,7 @@ 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 { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { QueryBuilderProjectionColumnState } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
 import { VariableSelector } from '../shared/QueryBuilderVariableSelector.js';
@@ -65,6 +63,7 @@ import {
   type QueryBuilderVariableDragSource,
 } from '../shared/BasicValueSpecificationEditor.js';
 import { useDrop } from 'react-dnd';
+import { MilestoningParametersEditorContent } from '../explorer/QueryBuilderMilestoningEditor.js';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -105,8 +104,12 @@ const ColumnSortEditor = observer(
       setSortColumns(newSortColumns);
     };
 
-    const changeSortBy = (sortOp: COLUMN_SORT_TYPE) => (): void => {
-      sortState.setSortType(sortOp);
+    const changeSortBy = (): void => {
+      if (sortState.sortType === COLUMN_SORT_TYPE.ASC) {
+        sortState.setSortType(COLUMN_SORT_TYPE.DESC);
+      } else {
+        sortState.setSortType(COLUMN_SORT_TYPE.ASC);
+      }
     };
 
     return (
@@ -127,31 +130,18 @@ const ColumnSortEditor = observer(
         <div className="query-builder__projection__options__sort__sortby">
           {sortType.toLowerCase()}
         </div>
-        <DropdownMenu
-          content={
-            <MenuContent>
-              {Object.values(COLUMN_SORT_TYPE).map((op) => (
-                <MenuContentItem key={op} onClick={changeSortBy(op)}>
-                  {op.toLowerCase()}
-                </MenuContentItem>
-              ))}
-            </MenuContent>
-          }
-          menuProps={{
-            anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-            transformOrigin: { vertical: 'top', horizontal: 'left' },
-            elevation: 7,
-          }}
+        <button
+          className="query-builder__projection__options__sort__sortby--btn btn--dark"
+          tabIndex={-1}
+          onClick={changeSortBy}
+          title="Choose SortBy Operator..."
         >
-          <div
-            className="query-builder__projection__options__sort__sortby--btn"
-            tabIndex={-1}
-            title="Choose SortBy Operator..."
-          >
-            <SortIcon />
-          </div>
-        </DropdownMenu>
-
+          {sortState.sortType === COLUMN_SORT_TYPE.ASC ? (
+            <ArrowUpIcon />
+          ) : (
+            <ArrowDownIcon />
+          )}
+        </button>
         <button
           className="query-builder__projection__options__sort__remove-btn btn--dark btn--caution"
           onClick={deleteColumnSort}
@@ -270,6 +260,31 @@ export const QueryResultModifierModal = observer(
       deepClone(watermarkState.value),
     );
 
+    //milestoning config
+    const milestoningState = tdsState.queryBuilderState.milestoningState;
+    const businessDate = useRef(milestoningState.businessDate);
+    const processingDate = useRef(milestoningState.processingDate);
+    const isAllVersionsEnabled = useRef(milestoningState.isAllVersionsEnabled);
+    const isAllVersionsInRangeEnabled = useRef(
+      milestoningState.isAllVersionsInRangeEnabled,
+    );
+    const startDate = useRef(milestoningState.startDate);
+    const endDate = useRef(milestoningState.endDate);
+
+    const resetMilestoningToInitial = (): void => {
+      if (isAllVersionsInRangeEnabled.current) {
+        milestoningState.setAllVersionsInRange(
+          isAllVersionsInRangeEnabled.current,
+        );
+        milestoningState.setStartDate(startDate.current);
+        milestoningState.setEndDate(endDate.current);
+      } else {
+        milestoningState.setAllVersions(isAllVersionsEnabled.current);
+      }
+      milestoningState.setBusinessDate(businessDate.current);
+      milestoningState.setProcessingDate(processingDate.current);
+    };
+
     // Sync temp state with tdsState when modal is opened/closed
     useEffect(() => {
       setSortColumns(cloneSortColumnStateArray(stateSortColumns));
@@ -287,7 +302,10 @@ export const QueryResultModifierModal = observer(
     ]);
 
     // Handle user actions
-    const closeModal = (): void => resultSetModifierState.setShowModal(false);
+    const closeModal = (): void => {
+      resetMilestoningToInitial();
+      resultSetModifierState.setShowModal(false);
+    };
     const applyChanges = (): void => {
       resultSetModifierState.setSortColumns(sortColumns);
       resultSetModifierState.setDistinct(distinct);
@@ -299,6 +317,13 @@ export const QueryResultModifierModal = observer(
       }
       resultSetModifierState.setShowModal(false);
       watermarkState.setValue(watermarkValue);
+      businessDate.current = milestoningState.businessDate;
+      processingDate.current = milestoningState.processingDate;
+      isAllVersionsEnabled.current = milestoningState.isAllVersionsEnabled;
+      isAllVersionsInRangeEnabled.current =
+        milestoningState.isAllVersionsInRangeEnabled;
+      startDate.current = milestoningState.startDate;
+      endDate.current = milestoningState.endDate;
     };
 
     const handleLimitResultsChange: React.ChangeEventHandler<
@@ -408,9 +433,23 @@ export const QueryResultModifierModal = observer(
           }
           className="editor-modal query-builder__projection__modal"
         >
-          <ModalHeader title="Result Set Modifier" />
+          <ModalHeader title="Query Options" />
           <ModalBody className="query-builder__projection__modal__body">
             <div className="query-builder__projection__options">
+              {tdsState.queryBuilderState.milestoningState
+                .isMilestonedQuery && (
+                <>
+                  <div className="query-builder__projection__options__section-name">
+                    Milestoning
+                  </div>
+                  <MilestoningParametersEditorContent
+                    queryBuilderState={tdsState.queryBuilderState}
+                  />
+                  <div className="query-builder__projection__options__section-name">
+                    Other
+                  </div>
+                </>
+              )}
               <ColumnsSortEditor
                 projectionColumns={tdsState.projectionColumns}
                 sortColumns={sortColumns}
@@ -524,7 +563,12 @@ export const QueryResultModifierModal = observer(
                 {watermarkValue && (
                   <>
                     <PanelFormSection>
-                      <div className="query-builder__variable-editor">
+                      <div
+                        className="query-builder__variable-editor"
+                        data-testid={
+                          QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL__WATERMAKR
+                        }
+                      >
                         <PanelDropZone
                           isDragOver={isParameterValueDragOver}
                           dropTargetConnector={dropTargetConnector}

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

@@ -44,7 +44,6 @@ import {
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
-  type QueryBuilderExplorerTreePropertyNodeData,
   buildPropertyExpressionFromExplorerTreeNodeData,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
 } from '../../stores/explorer/QueryBuilderExplorerState.js';
@@ -159,20 +158,11 @@ const QueryBuilderSimpleProjectionColumnEditor = observer(
     error?: string | undefined;
   }) => {
     const { projectionColumnState, setColumnName, error } = props;
-    const onPropertyExpressionChange = (
-      node: QueryBuilderExplorerTreePropertyNodeData,
-    ): void =>
-      projectionColumnState.changeProperty(
-        node,
-        projectionColumnState.tdsState.queryBuilderState.explorerState
-          .humanizePropertyName,
-      );
 
     return (
       <QueryBuilderPropertyExpressionBadge
         columnName={projectionColumnState.columnName}
         propertyExpressionState={projectionColumnState.propertyExpressionState}
-        onPropertyExpressionChange={onPropertyExpressionChange}
         setColumnName={setColumnName}
         error={error}
       />
@@ -1148,27 +1138,118 @@ export const QueryBuilderTDSPanel = observer(
           >
             <div className="query-builder__projection__result-modifier-prompt__header">
               <button
-                className="query-builder__projection__result-modifier-prompt__header__label"
+                className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                 onClick={openResultSetModifierEditor}
-                title="Configure result set modifiers..."
+                title="Configure Query Options..."
               >
                 <CogIcon className="query-builder__projection__result-modifier-prompt__header__label__icon" />
                 <div className="query-builder__projection__result-modifier-prompt__header__label__title">
-                  Query Options
+                  {tdsState.isQueryOptionsSet
+                    ? 'Query Options'
+                    : 'Set Query Options'}
                 </div>
               </button>
+              <div className="query-builder__projection__result-modifier-prompt__divider">
+                {tdsState.isQueryOptionsSet && ' - '}
+              </div>
+              {tdsState.queryBuilderState.milestoningState.businessDate && (
+                <div className="query-builder__projection__result-modifier-prompt__group">
+                  <div className="query-builder__projection__result-modifier-prompt__group__label">
+                    Business Date
+                  </div>
+                  <button
+                    className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                      {getNameOfValueSpecification(
+                        tdsState.queryBuilderState.milestoningState
+                          .businessDate,
+                        tdsState.queryBuilderState,
+                      )}
+                    </div>
+                  </button>
+                </div>
+              )}
+              {tdsState.queryBuilderState.milestoningState.processingDate && (
+                <div className="query-builder__projection__result-modifier-prompt__group">
+                  <div className="query-builder__projection__result-modifier-prompt__group__label">
+                    Processing Date
+                  </div>
+                  <button
+                    className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                      {getNameOfValueSpecification(
+                        tdsState.queryBuilderState.milestoningState
+                          .processingDate,
+                        tdsState.queryBuilderState,
+                      )}
+                    </div>
+                  </button>
+                </div>
+              )}
+              {tdsState.queryBuilderState.milestoningState
+                .isAllVersionsEnabled &&
+                !tdsState.queryBuilderState.milestoningState
+                  .isAllVersionsInRangeEnabled && (
+                  <div className="query-builder__projection__result-modifier-prompt__group">
+                    <div className="query-builder__projection__result-modifier-prompt__group__label">
+                      All Versions
+                    </div>
+                    <button
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                      onClick={openResultSetModifierEditor}
+                    >
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        Yes
+                      </div>
+                    </button>
+                  </div>
+                )}
+              {tdsState.queryBuilderState.milestoningState
+                .isAllVersionsInRangeEnabled &&
+                tdsState.queryBuilderState.milestoningState.startDate &&
+                tdsState.queryBuilderState.milestoningState.endDate && (
+                  <div className="query-builder__projection__result-modifier-prompt__group">
+                    <div className="query-builder__projection__result-modifier-prompt__group__label">
+                      All Versions
+                    </div>
+                    <button
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                      onClick={openResultSetModifierEditor}
+                    >
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        (
+                        {getNameOfValueSpecification(
+                          tdsState.queryBuilderState.milestoningState.startDate,
+                          tdsState.queryBuilderState,
+                        )}{' '}
+                        -{' '}
+                        {getNameOfValueSpecification(
+                          tdsState.queryBuilderState.milestoningState.endDate,
+                          tdsState.queryBuilderState,
+                        )}
+                        )
+                      </div>
+                    </button>
+                  </div>
+                )}
             </div>
             {tdsState.resultSetModifierState.limit && (
               <div className="query-builder__projection__result-modifier-prompt__group">
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Max Rows
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  {tdsState.resultSetModifierState.limit}
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    {tdsState.resultSetModifierState.limit}
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.resultSetModifierState.distinct && (
@@ -1176,12 +1257,14 @@ export const QueryBuilderTDSPanel = observer(
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Eliminate Duplicate Rows
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  Yes
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    Yes
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.resultSetModifierState.sortColumns.length > 0 && (
@@ -1191,13 +1274,15 @@ export const QueryBuilderTDSPanel = observer(
                 </div>
                 {tdsState.resultSetModifierState.sortColumns.map(
                   (columnState) => (
-                    <div
-                      className="query-builder__projection__result-modifier-prompt__group__content"
+                    <button
                       key={columnState.columnState.uuid}
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                       onClick={openResultSetModifierEditor}
                     >
-                      {`${columnState.columnState.columnName} ${columnState.sortType}`}
-                    </div>
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        {`${columnState.columnState.columnName} ${columnState.sortType}`}
+                      </div>
+                    </button>
                   ),
                 )}
               </div>
@@ -1207,12 +1292,14 @@ export const QueryBuilderTDSPanel = observer(
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Slice
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`}
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`}
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.queryBuilderState.watermarkState.value && (
@@ -1220,15 +1307,15 @@ export const QueryBuilderTDSPanel = observer(
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Watermark
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
                   {getNameOfValueSpecification(
                     tdsState.queryBuilderState.watermarkState.value,
                     tdsState.queryBuilderState,
                   )}
-                </div>
+                </button>
               </div>
             )}
           </div>
@@ -1313,12 +1400,12 @@ export const QueryBuilderTDSPanel = observer(
             {isDroppable && !isEmpty && (
               <div
                 ref={addProjectionRef}
-                className="query-builder-filter-tree__free-drop-zone__container"
+                className="query-builder__projection__free-drop-zone__container"
               >
                 <PanelEntryDropZonePlaceholder
                   isDragOver={isDragOver}
                   isDroppable={isDroppable}
-                  className="query-builder-filter-tree__free-drop-zone"
+                  className="query-builder__projection__free-drop-zone"
                   label="Add a projection column"
                 >
                   <></>

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -60,7 +60,6 @@ import {
 import { useDrag, useDragLayer, useDrop } from 'react-dnd';
 import {
   type QueryBuilderExplorerTreeDragSource,
-  type QueryBuilderExplorerTreePropertyNodeData,
   buildPropertyExpressionFromExplorerTreeNodeData,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
 } from '../../stores/explorer/QueryBuilderExplorerState.js';
@@ -729,15 +728,6 @@ const QueryBuilderFilterConditionEditor = observer(
     const applicationStore = useApplicationStore();
     const changeOperator = (val: QueryBuilderFilterOperator) => (): void =>
       node.condition.changeOperator(val);
-    const changeProperty = (
-      propertyNode: QueryBuilderExplorerTreePropertyNodeData,
-    ): void =>
-      node.condition.changeProperty(
-        buildPropertyExpressionFromExplorerTreeNodeData(
-          propertyNode,
-          queryBuilderState.explorerState,
-        ),
-      );
     // Drag and Drop on filter condition value
     const handleDrop = useCallback(
       (item: QueryBuilderVariableDragSource): void => {
@@ -815,7 +805,6 @@ const QueryBuilderFilterConditionEditor = observer(
             <div className="query-builder-filter-tree__condition-node__property">
               <QueryBuilderPropertyExpressionBadge
                 propertyExpressionState={node.condition.propertyExpressionState}
-                onPropertyExpressionChange={changeProperty}
               />
             </div>
             <DropdownMenu