From 72d3280051f4fa05ea7ebe7e34c2ad7ec0540c95 Mon Sep 17 00:00:00 2001 From: Yannan Date: Thu, 16 May 2024 17:42:55 -0400 Subject: [PATCH] Add milestoning setup in Query Option --- .changeset/blue-schools-hammer.md | 5 + .changeset/ninety-eels-relate.md | 3 + .../style/index.scss | 15 ++ .../QueryBuilderFetchStructure.test.tsx | 6 +- .../QueryBuilderMilestoning.test.tsx | 71 +++++++++ .../QueryBuilderResultModifierPanel.test.tsx | 30 ++-- .../QueryBuilderMilestoningEditor.tsx | 106 ++++++++------ .../QueryBuilderResultModifierPanel.tsx | 56 +++++++- .../fetch-structure/QueryBuilderTDSPanel.tsx | 136 +++++++++++++++--- .../shared/QueryBuilderVariableSelector.tsx | 4 +- .../tds/QueryBuilderTDSState.ts | 11 ++ .../QueryBuilderMilestoningState.ts | 18 ++- .../style/_query-builder-projection.scss | 38 +++-- 13 files changed, 386 insertions(+), 113 deletions(-) create mode 100644 .changeset/blue-schools-hammer.md create mode 100644 .changeset/ninety-eels-relate.md diff --git a/.changeset/blue-schools-hammer.md b/.changeset/blue-schools-hammer.md new file mode 100644 index 00000000000..6013acb9cd7 --- /dev/null +++ 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 new file mode 100644 index 00000000000..21429dd3eca --- /dev/null +++ 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 index 2082bb8461f..e9c18e54d23 100644 --- 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 index 778a6771f4e..697d5acd150 100644 --- 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 index 5c2f1c71bf9..5cf7802a5ba 100644 --- 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,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, { diff --git a/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultModifierPanel.test.tsx b/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultModifierPanel.test.tsx index 9aa5e7857ad..a68c5880d1c 100644 --- a/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultModifierPanel.test.tsx +++ b/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, diff --git a/packages/legend-query-builder/src/components/explorer/QueryBuilderMilestoningEditor.tsx b/packages/legend-query-builder/src/components/explorer/QueryBuilderMilestoningEditor.tsx index f69e6989c5e..4e3192aaee5 100644 --- 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 && ( + + milestoningState.setAllVersions(value) + } + /> + )} + {milestoningState.isAllVersionsEnabled && + milestoningState.isCurrentClassSupportsVersionsInRange && ( + <> + + milestoningState.setAllVersionsInRange(value) + } + /> + + {milestoningState.isAllVersionsInRangeEnabled && ( + + )} + + )} + + +
+ List of compatible milestoning parameters +
+ +
+ +
+ + ); + }, +); + +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 ( - {milestoningState.isCurrentClassMilestoned && ( - - milestoningState.setAllVersions(value) - } - /> - )} - {milestoningState.isAllVersionsEnabled && - milestoningState.isCurrentClassSupportsVersionsInRange && ( - <> - - milestoningState.setAllVersionsInRange(value) - } - /> - - {milestoningState.isAllVersionsInRangeEnabled && ( - - )} - - )} - - -
- List of compatible milestoning parameters -
- -
- -
+ diff --git a/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx b/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx index fef2a2984e8..4c100079f78 100644 --- a/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx +++ b/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx @@ -43,9 +43,10 @@ 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 { useEffect, useState } from 'react'; +import { 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 { MilestoningParametersEditorContent } from '../explorer/QueryBuilderMilestoningEditor.js'; const ColumnSortEditor = observer( (props: { @@ -247,6 +248,31 @@ export const QueryResultModifierModal = observer( [number | undefined, number | undefined] >(stateSlice ?? [undefined, undefined]); + //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)); @@ -262,7 +288,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); @@ -273,6 +302,13 @@ export const QueryResultModifierModal = observer( resultSetModifierState.setSlice(undefined); } resultSetModifierState.setShowModal(false); + 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< @@ -338,9 +374,23 @@ export const QueryResultModifierModal = observer( } className="editor-modal query-builder__projection__modal" > - +
+ {tdsState.queryBuilderState.milestoningState + .isMilestonedQuery && ( + <> +
+ Milestoning +
+ +
+ Other +
+ + )}
+
+ {tdsState.isQueryOptionsSet && ' - '} +
+ {tdsState.queryBuilderState.milestoningState.businessDate && ( +
+
+ Business Date +
+ +
+ )} + {tdsState.queryBuilderState.milestoningState.processingDate && ( +
+
+ Processing Date +
+ +
+ )} + {tdsState.queryBuilderState.milestoningState + .isAllVersionsEnabled && + !tdsState.queryBuilderState.milestoningState + .isAllVersionsInRangeEnabled && ( +
+
+ All Versions +
+ +
+ )} + {tdsState.queryBuilderState.milestoningState + .isAllVersionsInRangeEnabled && + tdsState.queryBuilderState.milestoningState.startDate && + tdsState.queryBuilderState.milestoningState.endDate && ( +
+
+ All Versions +
+ +
+ )}
{tdsState.resultSetModifierState.limit && (
Max Rows
-
- {tdsState.resultSetModifierState.limit} -
+
+ {tdsState.resultSetModifierState.limit} +
+
)} {tdsState.resultSetModifierState.distinct && ( @@ -1175,12 +1267,14 @@ export const QueryBuilderTDSPanel = observer(
Eliminate Duplicate Rows
-
- Yes -
+
+ Yes +
+
)} {tdsState.resultSetModifierState.sortColumns.length > 0 && ( @@ -1190,13 +1284,15 @@ export const QueryBuilderTDSPanel = observer( {tdsState.resultSetModifierState.sortColumns.map( (columnState) => ( -
- {`${columnState.columnState.columnName} ${columnState.sortType}`} -
+
+ {`${columnState.columnState.columnName} ${columnState.sortType}`} +
+ ), )} @@ -1206,12 +1302,14 @@ export const QueryBuilderTDSPanel = observer(
Slice
-
- {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`} -
+
+ {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`} +
+ )} diff --git a/packages/legend-query-builder/src/components/shared/QueryBuilderVariableSelector.tsx b/packages/legend-query-builder/src/components/shared/QueryBuilderVariableSelector.tsx index 8b7bc690b6c..b87322a66c4 100644 --- a/packages/legend-query-builder/src/components/shared/QueryBuilderVariableSelector.tsx +++ b/packages/legend-query-builder/src/components/shared/QueryBuilderVariableSelector.tsx @@ -48,7 +48,7 @@ import { forwardRef, useState } from 'react'; const CALCULATED = '(calculated)'; -const getNameOfValue = ( +export const getNameOfValueSpecification = ( value: ValueSpecification, queryBuilderState: QueryBuilderState, ): string | undefined => { @@ -143,7 +143,7 @@ export const VariableViewer = observer( const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false); const isConstant = Boolean(value); const constantValueString = value?.val - ? getNameOfValue(value.val, queryBuilderState) + ? getNameOfValueSpecification(value.val, queryBuilderState) : undefined; const name = variable.name; const variableTypeName = 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 index 4bf73d57e2c..6a206fe31aa 100644 --- 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, @@ -341,6 +342,16 @@ export class QueryBuilderTDSState return fetchStructureValidationIssues; } + get isQueryOptionsSet(): boolean { + return ( + this.resultSetModifierState.limit !== undefined || + this.queryBuilderState.milestoningState.isMilestonedQuery || + 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 index 40cfb9c6486..3789dae2cf1 100644 --- a/packages/legend-query-builder/src/stores/milestoning/QueryBuilderMilestoningState.ts +++ b/packages/legend-query-builder/src/stores/milestoning/QueryBuilderMilestoningState.ts @@ -75,7 +75,7 @@ export class QueryBuilderMilestoningState implements Hashable { startDate: observable, endDate: observable, showMilestoningEditor: observable, - isMilestonedQuery: computed, + setProcessingDate: action, setBusinessDate: action, setStartDate: action, @@ -87,6 +87,10 @@ export class QueryBuilderMilestoningState implements Hashable { initializeAllVersionsInRangeParameters: action, clearAllVersionsInRangeParameters: action, clearGetAllParameters: action, + + isAllVersionsEnabled: computed, + isAllVersionsInRangeEnabled: computed, + isMilestonedQuery: computed, hashCode: computed, }); @@ -380,9 +384,9 @@ export class QueryBuilderMilestoningState implements Hashable { this.queryBuilderState.parametersState.parameterStates.find( (p) => p.parameter === this.startDate, ); - this.queryBuilderState.parametersState.removeParameter( - guaranteeNonNullable(paramState), - ); + if (paramState) { + this.queryBuilderState.parametersState.removeParameter(paramState); + } } if ( this.endDate instanceof VariableExpression && @@ -394,9 +398,9 @@ export class QueryBuilderMilestoningState implements Hashable { this.queryBuilderState.parametersState.parameterStates.find( (p) => p.parameter === this.endDate, ); - this.queryBuilderState.parametersState.removeParameter( - guaranteeNonNullable(paramState), - ); + if (paramState) { + this.queryBuilderState.parametersState.removeParameter(paramState); + } } this.setStartDate(undefined); this.setEndDate(undefined); diff --git a/packages/legend-query-builder/style/_query-builder-projection.scss b/packages/legend-query-builder/style/_query-builder-projection.scss index 8fcb8cc60e6..8bb1ade2ef9 100644 --- a/packages/legend-query-builder/style/_query-builder-projection.scss +++ b/packages/legend-query-builder/style/_query-builder-projection.scss @@ -48,25 +48,27 @@ @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; + margin-right: 0.7rem; } &__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; } } + &__divider { + color: var(--color-light-grey-200); + margin-right: 1rem; + } + &__group { @include flexVCenter; @@ -82,20 +84,6 @@ line-height: 1.8rem; border-radius: 0.1rem; font-size: 1.1rem; - margin-left: 0.5rem; - } - - &__content { - color: var(--color-light-blue-50); - 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 +323,7 @@ } &__modal { - height: 60vh; + height: 80vh; width: 50vw; &__body { @@ -351,6 +339,12 @@ background: unset; } + &__section-name { + font-size: 1.8rem; + font-weight: 700; + padding: 1rem; + } + &__sort { display: flex; width: 100%;