diff --git a/.changeset/smart-mugs-kiss.md b/.changeset/kind-cheetahs-battle.md similarity index 100% rename from .changeset/smart-mugs-kiss.md rename to .changeset/kind-cheetahs-battle.md diff --git a/packages/legend-application-query-bootstrap/style/index.scss b/packages/legend-application-query-bootstrap/style/index.scss index 3bbc8b230b..cff822ee84 100644 --- a/packages/legend-application-query-bootstrap/style/index.scss +++ b/packages/legend-application-query-bootstrap/style/index.scss @@ -1335,10 +1335,6 @@ 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); } @@ -1844,15 +1840,4 @@ } } } - - .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 bf68d76707..388b59c8b7 100644 --- a/packages/legend-query-builder/src/components/__tests__/QueryBuilderFetchStructure.test.tsx +++ b/packages/legend-query-builder/src/components/__tests__/QueryBuilderFetchStructure.test.tsx @@ -270,7 +270,9 @@ test( const queryBuilder = await waitFor(() => renderResult.getByTestId(QUERY_BUILDER_TEST_ID.QUERY_BUILDER), ); - fireEvent.click(getByTitle(queryBuilder, 'Configure Query Options...')); + fireEvent.click( + getByTitle(queryBuilder, 'Configure result set modifiers...'), + ); const modal = await waitFor(() => renderResult.getByRole('dialog')); await waitFor(() => fireEvent.click(getByText(modal, 'Add Value'))); @@ -313,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('Set Query Options')); + await waitFor(() => renderResult.getByText('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 5cf7802a5b..5c2f1c71bf 100644 --- a/packages/legend-query-builder/src/components/__tests__/QueryBuilderMilestoning.test.tsx +++ b/packages/legend-query-builder/src/components/__tests__/QueryBuilderMilestoning.test.tsx @@ -465,77 +465,6 @@ 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 f033b73253..804f45be11 100644 --- a/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultModifierPanel.test.tsx +++ b/packages/legend-query-builder/src/components/__tests__/QueryBuilderResultModifierPanel.test.tsx @@ -91,8 +91,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -145,8 +144,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -195,8 +193,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -258,8 +255,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -296,8 +292,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -352,8 +347,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -389,8 +383,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -432,8 +425,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -477,8 +469,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('Query Options'); fireEvent.click(queryOptionsButton); const resultModifierPanel = await renderResult.findByTestId( QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_MODIFIER_PANEL, @@ -533,8 +524,7 @@ describe('QueryBuilderResultModifierPanel', () => { ), async () => { // Open Query Options panel - const queryOptionsButton = - await renderResult.findByText('Set Query Options'); + const queryOptionsButton = await renderResult.findByText('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/__tests__/QueryBuilderWatermark.test.tsx b/packages/legend-query-builder/src/components/__tests__/QueryBuilderWatermark.test.tsx index a6ba4ebda1..ab2c66f8c3 100644 --- a/packages/legend-query-builder/src/components/__tests__/QueryBuilderWatermark.test.tsx +++ b/packages/legend-query-builder/src/components/__tests__/QueryBuilderWatermark.test.tsx @@ -47,7 +47,7 @@ test( // Open Query Options modal const queryOptionsButton = await waitFor(() => - renderResult.getByRole('button', { name: 'Set Query Options' }), + renderResult.getByRole('button', { name: 'Query Options' }), ); fireEvent.click(queryOptionsButton); fireEvent.click( @@ -103,7 +103,7 @@ test( // Open Query Options modal, enable and save watermark const queryOptionsButton = await waitFor(() => - renderResult.getByRole('button', { name: 'Set Query Options' }), + renderResult.getByRole('button', { name: 'Query Options' }), ); fireEvent.click(queryOptionsButton); fireEvent.click( @@ -183,7 +183,7 @@ test( // Open watermark modal const queryOptionsButton = await waitFor(() => - renderResult.getByRole('button', { name: 'Set Query Options' }), + renderResult.getByRole('button', { name: 'Query Options' }), ); fireEvent.click(queryOptionsButton); await waitFor(() => renderResult.getByText('Watermark')); diff --git a/packages/legend-query-builder/src/components/explorer/QueryBuilderMilestoningEditor.tsx b/packages/legend-query-builder/src/components/explorer/QueryBuilderMilestoningEditor.tsx index 4e3192aaee..f69e6989c5 100644 --- a/packages/legend-query-builder/src/components/explorer/QueryBuilderMilestoningEditor.tsx +++ b/packages/legend-query-builder/src/components/explorer/QueryBuilderMilestoningEditor.tsx @@ -278,10 +278,12 @@ const AllVersionsInRangelMilestoningParametersEditor = observer( }, ); -export const MilestoningParametersEditorContent = observer( +export const MilestoningParametersEditor = 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 => @@ -290,62 +292,6 @@ export const MilestoningParametersEditorContent = 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 b13a21010d..99e87884ed 100644 --- a/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx +++ b/packages/legend-query-builder/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx @@ -46,7 +46,7 @@ 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 { useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, 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 { VariableSelector } from '../shared/QueryBuilderVariableSelector.js'; @@ -63,7 +63,6 @@ import { type QueryBuilderVariableDragSource, } from '../shared/BasicValueSpecificationEditor.js'; import { useDrop } from 'react-dnd'; -import { MilestoningParametersEditorContent } from '../explorer/QueryBuilderMilestoningEditor.js'; const ColumnSortEditor = observer( (props: { @@ -260,31 +259,6 @@ export const QueryResultModifierModal = observer( deepClone(watermarkState.value), ); - //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)); @@ -302,10 +276,7 @@ export const QueryResultModifierModal = observer( ]); // Handle user actions - const closeModal = (): void => { - resetMilestoningToInitial(); - resultSetModifierState.setShowModal(false); - }; + const closeModal = (): void => resultSetModifierState.setShowModal(false); const applyChanges = (): void => { resultSetModifierState.setSortColumns(sortColumns); resultSetModifierState.setDistinct(distinct); @@ -317,13 +288,6 @@ export const QueryResultModifierModal = observer( } resultSetModifierState.setShowModal(false); watermarkState.setValue(watermarkValue); - 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< @@ -433,23 +397,9 @@ 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.distinct && ( @@ -1257,14 +1166,12 @@ export const QueryBuilderTDSPanel = observer(
Eliminate Duplicate Rows
- + Yes + )} {tdsState.resultSetModifierState.sortColumns.length > 0 && ( @@ -1274,15 +1181,13 @@ export const QueryBuilderTDSPanel = observer( {tdsState.resultSetModifierState.sortColumns.map( (columnState) => ( - + {`${columnState.columnState.columnName} ${columnState.sortType}`} + ), )} @@ -1292,14 +1197,12 @@ export const QueryBuilderTDSPanel = observer(
Slice
- + {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`} + )} {tdsState.queryBuilderState.watermarkState.value && ( 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 bab75cdd1a..db5e009975 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,7 +146,6 @@ export class QueryBuilderTDSState TEMPORARY__showPostFetchStructurePanel: computed, derivations: computed, hasParserError: computed, - isQueryOptionsSet: computed, addColumn: action, moveColumn: action, removeAllColumns: action, @@ -357,16 +356,6 @@ 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 3789dae2cf..40cfb9c648 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,10 +87,6 @@ export class QueryBuilderMilestoningState implements Hashable { initializeAllVersionsInRangeParameters: action, clearAllVersionsInRangeParameters: action, clearGetAllParameters: action, - - isAllVersionsEnabled: computed, - isAllVersionsInRangeEnabled: computed, - isMilestonedQuery: computed, hashCode: computed, }); @@ -384,9 +380,9 @@ export class QueryBuilderMilestoningState implements Hashable { this.queryBuilderState.parametersState.parameterStates.find( (p) => p.parameter === this.startDate, ); - if (paramState) { - this.queryBuilderState.parametersState.removeParameter(paramState); - } + this.queryBuilderState.parametersState.removeParameter( + guaranteeNonNullable(paramState), + ); } if ( this.endDate instanceof VariableExpression && @@ -398,9 +394,9 @@ export class QueryBuilderMilestoningState implements Hashable { this.queryBuilderState.parametersState.parameterStates.find( (p) => p.parameter === this.endDate, ); - if (paramState) { - this.queryBuilderState.parametersState.removeParameter(paramState); - } + this.queryBuilderState.parametersState.removeParameter( + guaranteeNonNullable(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 7e8842b4f3..781ffdeb7b 100644 --- a/packages/legend-query-builder/style/_query-builder-projection.scss +++ b/packages/legend-query-builder/style/_query-builder-projection.scss @@ -48,27 +48,25 @@ @include flexVCenter; height: 2.2rem; + background: var(--color-blue-200); padding: 1rem; - text-underline-position: under; + border-radius: 0.2rem 0 0 0.2rem; } &__label__icon { - font-size: 1.3rem; - margin-right: 0.7rem; + font-size: 1.2rem; + color: var(--color-light-grey-180); } &__label__title { + margin-left: 0.7rem; white-space: nowrap; - font-size: 1.3rem; + color: var(--color-light-grey-180); + font-size: 1.2rem; font-weight: 500; } } - &__divider { - color: var(--color-light-grey-200); - margin-right: 1rem; - } - &__group { @include flexVCenter; @@ -84,6 +82,20 @@ 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 +347,7 @@ } &__modal { - height: 80vh; + height: 60vh; width: 50vw; &__body { @@ -351,12 +363,6 @@ background: unset; } - &__section-name { - font-size: 1.8rem; - font-weight: 700; - padding: 1rem; - } - &__sort { display: flex; width: 100%;