Add milestoning setup in query option

finos · May 14, 2024 · 4aa7b9f · 4aa7b9f
1 parent aaf2579
commit 4aa7b9f
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 61 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-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,21 @@ 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">
+              <div className="query-builder__projection__options__section-name">
+                Milestoning
+              </div>
+              {tdsState.queryBuilderState.milestoningState
+                .isMilestonedQuery && (
+                <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,7 +1147,7 @@ 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..."
               >
@@ -1156,14 +1156,52 @@ export const QueryBuilderTDSPanel = observer(
                   Query Options
                 </div>
               </button>
+              {(tdsState.resultSetModifierState.limit ||
+                tdsState.queryBuilderState.milestoningState.businessDate ||
+                tdsState.queryBuilderState.milestoningState.processingDate ||
+                tdsState.resultSetModifierState.slice ||
+                tdsState.resultSetModifierState.sortColumns.length > 0 ||
+                tdsState.resultSetModifierState.distinct) &&
+                ' - '}
+              {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>
+                  <div
+                    className="query-builder__projection__result-modifier-prompt__group__content editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    {tdsState.queryBuilderState.milestoningState.getMilestoningDateTitle(
+                      tdsState.queryBuilderState.milestoningState.businessDate,
+                    )}
+                  </div>
+                </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>
+                  <div
+                    className="query-builder__projection__result-modifier-prompt__group__content editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    {tdsState.queryBuilderState.milestoningState.getMilestoningDateTitle(
+                      tdsState.queryBuilderState.milestoningState
+                        .processingDate,
+                    )}
+                  </div>
+                </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"
+                  className="query-builder__projection__result-modifier-prompt__group__content editable-value"
                   onClick={openResultSetModifierEditor}
                 >
                   {tdsState.resultSetModifierState.limit}
@@ -1176,7 +1214,7 @@ export const QueryBuilderTDSPanel = observer(
                   Eliminate Duplicate Rows
                 </div>
                 <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                  className="query-builder__projection__result-modifier-prompt__group__content editable-value"
                   onClick={openResultSetModifierEditor}
                 >
                   Yes
@@ -1191,7 +1229,7 @@ export const QueryBuilderTDSPanel = observer(
                 {tdsState.resultSetModifierState.sortColumns.map(
                   (columnState) => (
                     <div
-                      className="query-builder__projection__result-modifier-prompt__group__content"
+                      className="query-builder__projection__result-modifier-prompt__group__content editable-value"
                       key={columnState.columnState.uuid}
                       onClick={openResultSetModifierEditor}
                     >
@@ -1207,7 +1245,7 @@ export const QueryBuilderTDSPanel = observer(
                   Slice
                 </div>
                 <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                  className="query-builder__projection__result-modifier-prompt__group__content editable-value"
                   onClick={openResultSetModifierEditor}
                 >
                   {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`}

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,

diff --git a/packages/legend-query-builder/style/_query-builder-projection.scss b/packages/legend-query-builder/style/_query-builder-projection.scss
@@ -48,21 +48,19 @@
         @include flexVCenter;
 
         height: 2.2rem;
-        background: var(--color-blue-200);
         padding: 1rem;
         border-radius: 0.2rem 0 0 0.2rem;
+        text-underline-position: under;
       }
 
       &__label__icon {
-        font-size: 1.2rem;
-        color: var(--color-light-grey-180);
+        font-size: 1.3rem;
       }
 
       &__label__title {
         margin-left: 0.7rem;
         white-space: nowrap;
-        color: var(--color-light-grey-180);
-        font-size: 1.2rem;
+        font-size: 1.3rem;
         font-weight: 500;
       }
     }
@@ -90,11 +88,8 @@
         font-weight: 500;
         font-size: 1.2rem;
         padding-left: 0.5rem;
-        cursor: pointer;
         overflow: hidden;
-        text-overflow: ellipsis;
         text-decoration: underline;
-        text-decoration-style: dotted;
         white-space: nowrap;
       }
     }
@@ -335,7 +330,7 @@
   }
 
   &__modal {
-    height: 60vh;
+    height: 80vh;
     width: 50vw;
 
     &__body {
@@ -351,6 +346,12 @@
       background: unset;
     }
 
+    &__section-name {
+      font-size: 1.8rem;
+      font-weight: 700;
+      padding: 1rem;
+    }
+
     &__sort {
       display: flex;
       width: 100%;