Add milestoning setup in query options

finos · May 14, 2024 · 008b60a · 008b60a
1 parent aaf2579
commit 008b60a
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 88 deletions.
diff --git a/.changeset/blue-schools-hammer.md b/.changeset/blue-schools-hammer.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Add milestoning setup in `query options`
diff --git a/packages/legend-application-query-bootstrap/style/index.scss b/packages/legend-application-query-bootstrap/style/index.scss
@@ -1214,6 +1214,10 @@
       color: var(--color-legacylight-light-dark-grey-200);
     }
 
+    .query-builder__projection__result-modifier-prompt__divider {
+      color: var(--color-legacylight-light-dark-grey-200);
+    }
+
     .query-builder-property-expression-badge__content {
       color: var(--color-legacylight-dark-grey-200);
     }

diff --git a/packages/legend-query-builder/src/components/explorer/QueryBuilderMilestoningEditor.tsx b/packages/legend-query-builder/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" />

diff --git a/...s/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx b/...s/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx
@@ -46,6 +46,7 @@ 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';
+import { MilestoningParametersEditorContent } from '../explorer/QueryBuilderMilestoningEditor.js';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -338,9 +339,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}

diff --git a/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderTDSPanel.tsx b/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderTDSPanel.tsx
@@ -1147,40 +1147,109 @@ 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">
+                      {tdsState.queryBuilderState.milestoningState.getMilestoningDateTitle(
+                        tdsState.queryBuilderState.milestoningState
+                          .businessDate,
+                      )}
+                    </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">
+                      {tdsState.queryBuilderState.milestoningState.getMilestoningDateTitle(
+                        tdsState.queryBuilderState.milestoningState
+                          .processingDate,
+                      )}
+                    </div>
+                  </button>
+                </div>
+              )}
+              {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">
+                        (
+                        {tdsState.queryBuilderState.milestoningState.getMilestoningDateTitle(
+                          tdsState.queryBuilderState.milestoningState.startDate,
+                        )}{' '}
+                        -{' '}
+                        {tdsState.queryBuilderState.milestoningState.getMilestoningDateTitle(
+                          tdsState.queryBuilderState.milestoningState.endDate,
+                        )}
+                        )
+                      </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 && (
               <div className="query-builder__projection__result-modifier-prompt__group">
                 <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 && (
@@ -1190,13 +1259,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>
@@ -1206,12 +1277,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>
             )}
           </div>

diff --git a/packages/legend-query-builder/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts b/packages/legend-query-builder/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts
@@ -146,6 +146,7 @@ export class QueryBuilderTDSState
       TEMPORARY__showPostFetchStructurePanel: computed,
       derivations: computed,
       hasParserError: computed,
+      isQueryOptionsSet: computed,
       addColumn: action,
       moveColumn: action,
       removeAllColumns: action,
@@ -340,6 +341,17 @@ export class QueryBuilderTDSState
     return fetchStructureValidationIssues;
   }
 
+  get isQueryOptionsSet(): boolean {
+    return (
+      this.resultSetModifierState.limit !== undefined ||
+      this.queryBuilderState.milestoningState.businessDate !== undefined ||
+      this.queryBuilderState.milestoningState.processingDate !== undefined ||
+      this.resultSetModifierState.slice !== undefined ||
+      this.resultSetModifierState.sortColumns.length > 0 ||
+      this.resultSetModifierState.distinct
+    );
+  }
+
   get tdsColumns(): QueryBuilderTDSColumnState[] {
     const aggregationStateCols = this.aggregationState.columns.map(
       (c) => c.projectionColumnState,

diff --git a/packages/legend-query-builder/src/stores/milestoning/QueryBuilderMilestoningState.ts b/packages/legend-query-builder/src/stores/milestoning/QueryBuilderMilestoningState.ts
@@ -87,6 +87,7 @@ export class QueryBuilderMilestoningState implements Hashable {
       initializeAllVersionsInRangeParameters: action,
       clearAllVersionsInRangeParameters: action,
       clearGetAllParameters: action,
+      getMilestoningDateTitle: action,
       hashCode: computed,
     });
 
@@ -457,6 +458,15 @@ export class QueryBuilderMilestoningState implements Hashable {
     return usedInBusiness || usedInProcessingDate;
   }
 
+  getMilestoningDateTitle(val: ValueSpecification): string {
+    if (val instanceof VariableExpression) {
+      return val.name;
+    } else if (val instanceof PrimitiveInstanceValue) {
+      return `${val.values[0]}`;
+    }
+    return '';
+  }
+
   get hashCode(): string {
     return hashArray([
       QUERY_BUILDER_STATE_HASH_STRUCTURE.MILESTONING_STATE,