Add milestoning setup in Query Option

.changeset/blue-schools-hammer.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Add milestoning setup in `query options`

.changeset/ninety-eels-relate.md

@@ -0,0 +1,3 @@
+---
+'@finos/legend-application-query-bootstrap': patch
+---

packages/legend-application-query-bootstrap/style/index.scss

@@ -1217,6 +1217,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);
     }
@@ -1716,4 +1720,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);
+    }
+  }
 }

packages/legend-query-builder/src/components/__tests__/QueryBuilderFetchStructure.test.tsx

@@ -272,9 +272,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')));
@@ -317,7 +315,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,

packages/legend-query-builder/src/components/__tests__/QueryBuilderMilestoning.test.tsx

@@ -465,6 +465,77 @@ 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 resultModifierPromptPanel = await waitFor(() =>
+      renderResult.getByTestId(
+        QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_RESULT_MODIFIER_PROMPT,
+      ),
+    );
+    await waitFor(() =>
+      getAllByText(resultModifierPromptPanel, 'Business Date'),
+    );
+    await waitFor(() =>
+      getAllByText(resultModifierPromptPanel, 'businessDate'),
+    );
+
+    const queryOptionsButton = await waitFor(() =>
+      renderResult.getByRole('button', { name: 'Query Options' }),
+    );
+    fireEvent.click(queryOptionsButton);
+    const allVersionsToggle = await renderResult.findByText(
+      'Query All Milestoned Versions of the Root Class',
+    );
+    fireEvent.click(allVersionsToggle);
+    const applyButton = (await renderResult.findByRole('button', {
+      name: 'Apply',
+    })) as HTMLButtonElement;
+    await waitFor(() => fireEvent.click(applyButton));
+    await waitFor(() =>
+      getAllByText(resultModifierPromptPanel, 'All Versions'),
+    );
+    await waitFor(() => getAllByText(resultModifierPromptPanel, 'Yes'));
+    fireEvent.click(queryOptionsButton);
+    const allVersionInRangeToggle = await renderResult.findByText(
+      'Optionally apply a date range to get All Versions for',
+    );
+    fireEvent.click(allVersionInRangeToggle);
+    fireEvent.click(renderResult.getByRole('button', { name: 'Apply' }));
+    await waitFor(() =>
+      getAllByText(resultModifierPromptPanel, '(startDate - endDate)'),
+    );
+    fireEvent.click(queryOptionsButton);
+    fireEvent.click(allVersionInRangeToggle);
+    const cancelButton = (await renderResult.findByRole('button', {
+      name: 'Cancel',
+    })) as HTMLButtonElement;
+    fireEvent.click(cancelButton);
+    await waitFor(() =>
+      getAllByText(resultModifierPromptPanel, '(startDate - endDate)'),
+    );
+  },
+);
+
 type QueryGetAllVersionsTestCase = [
   string,
   {

packages/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,

packages/legend-query-builder/src/components/__tests__/QueryBuilderWatermark.test.tsx

@@ -46,7 +46,7 @@ test(
 
     // Open Query Options modal
     const queryOptionsButton = await waitFor(() =>
-      renderResult.getByRole('button', { name: 'Query Options' }),
+      renderResult.getByRole('button', { name: 'Set Query Options' }),
     );
     fireEvent.click(queryOptionsButton);
     fireEvent.click(
@@ -95,7 +95,7 @@ test(
 
     // Open Query Options modal, enable and save watermark
     const queryOptionsButton = await waitFor(() =>
-      renderResult.getByRole('button', { name: 'Query Options' }),
+      renderResult.getByRole('button', { name: 'Set Query Options' }),
     );
     fireEvent.click(queryOptionsButton);
     fireEvent.click(
@@ -163,7 +163,7 @@ test(
 
     // Open watermark modal
     const queryOptionsButton = await waitFor(() =>
-      renderResult.getByRole('button', { name: 'Query Options' }),
+      renderResult.getByRole('button', { name: 'Set Query Options' }),
     );
     fireEvent.click(queryOptionsButton);
     await waitFor(() => renderResult.getByText('Watermark'));

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" />