Add milestoning setup in query options

finos · May 14, 2024 · fbf7f08 · fbf7f08
1 parent 683375c
commit fbf7f08
Show file tree

Hide file tree

Showing 12 changed files with 293 additions and 104 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/.changeset/ninety-eels-relate.md b/.changeset/ninety-eels-relate.md
@@ -0,0 +1,3 @@
+---
+'@finos/legend-application-query-bootstrap': patch
+---
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);
     }
@@ -1713,4 +1717,15 @@
       }
     }
   }
+
+  .query-builder__projection__modal {
+    ::-webkit-scrollbar-thumb {
+      height: 5rem;
+      background: var(--color-legacylight-light-grey-300);
+      outline-offset: -0.2rem;
+      border-radius: 0.4rem;
+      outline-color: var(--color-legacylight-light-grey-100);
+      border-color: var(--color-legacylight-light-grey-100);
+    }
+  }
 }
diff --git a/packages/legend-query-builder/src/components/__tests__/QueryBuilderFetchStructure.test.tsx b/packages/legend-query-builder/src/components/__tests__/QueryBuilderFetchStructure.test.tsx
@@ -269,9 +269,7 @@ test(
     const queryBuilder = await waitFor(() =>
       renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER),
     );
-    fireEvent.click(
-      getByTitle(queryBuilder, 'Configure result set modifiers...'),
-    );
+    fireEvent.click(getByTitle(queryBuilder, 'Configure Query Options...'));
     const modal = await waitFor(() => renderResult.getByRole('dialog'));
 
     await waitFor(() => fireEvent.click(getByText(modal, 'Add Value')));
@@ -314,7 +312,7 @@ test(
     fireEvent.click(getByTitle(queryBuilder, 'Clear all projection columns'));
     const closeModal = await waitFor(() => renderResult.getByRole('dialog'));
     fireEvent.click(getByText(closeModal, 'Proceed'));
-    await waitFor(() => renderResult.getByText('Query Options'));
+    await waitFor(() => renderResult.getByText('Set Query Options'));
     const queryBuilderResultModifierPrompt = await waitFor(() =>
       renderResult.getByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_RESULT_MODIFIER_PROMPT,

diff --git a/packages/legend-query-builder/src/components/__tests__/QueryBuilderMilestoning.test.tsx b/packages/legend-query-builder/src/components/__tests__/QueryBuilderMilestoning.test.tsx
@@ -465,6 +465,49 @@ test(
   },
 );
 
+test(
+  integrationTest(
+    'Query builder result modifier panel displays milestoning dates',
+  ),
+  async () => {
+    const { renderResult, queryBuilderState } = await TEST__setUpQueryBuilder(
+      TEST_MilestoningModel,
+      stub_RawLambda(),
+      'my::map',
+      'my::runtime',
+      TEST_DATA__ModelCoverageAnalysisResult_Milestoning,
+    );
+    const _personClass =
+      queryBuilderState.graphManagerState.graph.getClass('my::Person');
+    await act(async () => {
+      queryBuilderState.changeClass(_personClass);
+    });
+    const queryBuilderSetup = await waitFor(() =>
+      renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER_SETUP),
+    );
+    await waitFor(() => getAllByText(queryBuilderSetup, 'Person'));
+
+    const resultModifierPanel = await waitFor(() =>
+      renderResult.getByTestId(
+        QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_RESULT_MODIFIER_PROMPT,
+      ),
+    );
+    await waitFor(() => getAllByText(resultModifierPanel, 'Business Date'));
+    await waitFor(() => getAllByText(resultModifierPanel, 'businessDate'));
+
+    // Check if we have paramter panel opened and able to run query
+    expect(queryBuilderState.showParametersPanel).toBe(true);
+    await waitFor(() =>
+      renderResult.getByTestId(
+        QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_PANEL,
+      ),
+    );
+    fireEvent.click(renderResult.getByText('Run Query'));
+    const executeDialog = await waitFor(() => renderResult.getByRole('dialog'));
+    expect(getByText(executeDialog, 'Set Parameter Values'));
+  },
+);
+
 type QueryGetAllVersionsTestCase = [
   string,
   {

diff --git a/...es/legend-query-builder/src/components/__tests__/QueryBuilderResultModifierPanel.test.tsx b/...es/legend-query-builder/src/components/__tests__/QueryBuilderResultModifierPanel.test.tsx
@@ -91,7 +91,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -144,7 +145,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -193,7 +195,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -255,7 +258,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -292,7 +296,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -347,7 +352,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -383,7 +389,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -425,7 +432,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -469,7 +477,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,
@@ -524,7 +533,8 @@ describe('QueryBuilderResultModifierPanel', () => {
     ),
     async () => {
       // Open Query Options panel
-      const queryOptionsButton = await renderResult.findByText('Query Options');
+      const queryOptionsButton =
+        await renderResult.findByText('Set Query Options');
       fireEvent.click(queryOptionsButton);
       const resultModifierPanel = await renderResult.findByTestId(
         QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL,

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}