From 8143c27987b819ddc483abb53d611c9f5e658cb3 Mon Sep 17 00:00:00 2001 From: Basit Date: Tue, 12 Apr 2022 17:34:37 +0200 Subject: [PATCH 1/5] feat(aggregations): move maxTimeMS to more options --- .../pipeline-options/pipeline-collation.tsx | 14 ++++- .../components/pipeline/collation-toolbar.jsx | 53 +++++++++++++--- .../pipeline/collation-toolbar.module.less | 13 ++-- .../src/components/settings/settings.jsx | 60 ++++++++++++------- 4 files changed, 103 insertions(+), 37 deletions(-) diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx index 853fad5d9ad..0cd9ed11db5 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx @@ -6,6 +6,7 @@ import type { RootState } from '../../../modules'; import { collationChanged } from '../../../modules/collation'; import { collationStringChanged } from '../../../modules/collation-string'; import { openLink } from '../../../modules/link'; +import { maxTimeMSChanged } from '../../../modules/max-time-ms'; import LegacyPipelineCollation from '../../pipeline/collation-toolbar'; @@ -15,25 +16,36 @@ const PipelineCollation: React.FunctionComponent = ({ collationChanged, collationStringChanged, openLink, + maxTimeMS, + maxTimeMSChanged, }) => { const props = { collation, collationString, collationChanged, + maxTimeMS, collationStringChanged, openLink, + maxTimeMSChanged, }; return ; }; -const mapState = ({ collation, collationString }: RootState) => ({ +const mapState = ({ collation, collationString, + settings: { maxTimeMS: defaultMaxTimeMS, isDirty }, + maxTimeMS, +}: RootState) => ({ + collation, + collationString, + maxTimeMS: isDirty ? defaultMaxTimeMS : maxTimeMS, }); const mapDispatch = { collationChanged, collationStringChanged, openLink, + maxTimeMSChanged, }; const connector = connect(mapState, mapDispatch); type PipelineCollationProps = ConnectedProps; diff --git a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx index 8eb7c7316c6..379be0ebcdd 100644 --- a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx +++ b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx @@ -5,10 +5,13 @@ import classnames from 'classnames'; import styles from './collation-toolbar.module.less'; +import { DEFAULT_MAX_TIME_MS } from '../../constants'; + /** * The help URL for collation. */ const HELP_URL_COLLATION = 'https://docs.mongodb.com/master/reference/collation/'; +const HELP_URL_MAX_TIME_MS = 'https://www.mongodb.com/docs/manual/reference/method/cursor.maxTimeMS/'; /** * The collation toolbar component. @@ -20,8 +23,10 @@ class CollationToolbar extends PureComponent { collation: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), collationChanged: PropTypes.func.isRequired, collationString: PropTypes.string, + maxTimeMS: PropTypes.number, collationStringChanged: PropTypes.func.isRequired, - openLink: PropTypes.func.isRequired + openLink: PropTypes.func.isRequired, + maxTimeMSChanged: PropTypes.func, }; static defaultProps = { collation: {}, collationString: ''}; @@ -38,6 +43,12 @@ class CollationToolbar extends PureComponent { this.props.collationChanged(evt.target.value); }; + onMaxTimeMsChanged = (evt) => { + if (this.props.maxTimeMSChanged) { + this.props.maxTimeMSChanged(parseInt(evt.currentTarget.value, 10)); + } + }; + /** * Sets collation input focus */ @@ -58,27 +69,26 @@ class CollationToolbar extends PureComponent { * @returns {React.Component} The component. */ render() { + const isNewToolbar = + global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true'; return (
@@ -89,7 +99,32 @@ class CollationToolbar extends PureComponent { placeholder="{ locale: 'simple' }" type="text" onChange={this.onCollationChange} - value={this.props.collationString} /> + value={this.props.collationString} + /> + {isNewToolbar && ( +
+
+ + Max Time MS +
+ +
+ )}
); diff --git a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less index 40a5fa1137a..a523e9885d4 100644 --- a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less +++ b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less @@ -17,7 +17,7 @@ border: none, } -.collation-toolbar-input-wrapper { +.toolbar-input-wrapper { width: 100%; height: 30px; position: relative; @@ -29,22 +29,22 @@ padding: 4px; margin-right: 5px; - .collation-toolbar-input-label { + .toolbar-input-label { background: @gray5; color: @pw; white-space: nowrap; border-radius: 14px; - padding: 2px 1px; + padding: 2px 4px; margin-right: 5px; text-transform: uppercase; font-weight: bold; font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; flex-grow: 0; - width: 117px; i { margin-right: 3px; + margin-left: 0px; } } @@ -60,6 +60,11 @@ input:focus { outline-width: 0; } + + .max-time-ms { + width: 30%; + display: flex; + } } .has-focus { diff --git a/packages/compass-aggregations/src/components/settings/settings.jsx b/packages/compass-aggregations/src/components/settings/settings.jsx index c7e8656cf82..82c907f9e51 100644 --- a/packages/compass-aggregations/src/components/settings/settings.jsx +++ b/packages/compass-aggregations/src/components/settings/settings.jsx @@ -98,15 +98,49 @@ class Settings extends PureComponent { } } + renderMaxTimeMs() { + const isNewToolbar = + global?.process?.env?.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR === 'true'; + if (isNewToolbar) { + return null; + } + + const maxTimeMS = this.props.settings.isDirty + ? this.props.settings.maxTimeMS + : this.props.maxTimeMS; + + return ( +
+
+ + + Specifies a cumulative time limit in milliseconds for processing + operations on a cursor. Max timeout prevents long hang times. + +
+
+ +
+
+ ); + } + renderFields() { let commentModeChecked = this.props.isCommenting; let sampleSize = this.props.limit; - let maxTimeMS = this.props.maxTimeMS; if (this.props.settings.isDirty) { commentModeChecked = this.props.settings.isCommentMode; sampleSize = this.props.settings.sampleSize; - maxTimeMS = this.props.settings.maxTimeMS; } return ( @@ -146,27 +180,7 @@ class Settings extends PureComponent { />
-
-
- - - Specifies a cumulative time limit in milliseconds for processing - operations on a cursor. Max timeout prevents long hang times. - -
-
- -
-
+ {this.renderMaxTimeMs()} {this.renderLargeLimit()} ); From 3a7b4d023fdb755f16d44c24896363c607ae69c0 Mon Sep 17 00:00:00 2001 From: Basit Date: Tue, 12 Apr 2022 18:20:27 +0200 Subject: [PATCH 2/5] feat(aggregations): tests --- .../components/pipeline/collation-toolbar.jsx | 8 +-- .../pipeline/collation-toolbar.spec.jsx | 60 ++++++++++++++++++- .../compass-e2e-tests/helpers/selectors.ts | 2 +- 3 files changed, 62 insertions(+), 8 deletions(-) diff --git a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx index 379be0ebcdd..5f31f6272bb 100644 --- a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx +++ b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx @@ -95,7 +95,7 @@ class CollationToolbar extends PureComponent { Collation {}} + collation={{ locale: 'simple' }} + collationChanged={() => {}} + collationString="{locale: 'simple' }" + collationStringChanged={() => {}} + openLink={() => {}} /> + ); + }); + + afterEach(function() { + component = null; + process.env.COMPASS_SHOW_NEW_AGGREGATION_TOOLBAR = showNewAggregationInitialValue; + }); + + it('renders the maxTimeMS label', function() { + expect( + component.find('[data-testid="maxtimems-toolbar-input-label"]') + ).to.be.present(); + }); + + it('renders the maxTimeMS input', function() { + expect( + component.find('[data-testid="max-time-ms"]') + ).to.be.present(); + }); + }); }); diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts index d9425a33e5b..904f2b50535 100644 --- a/packages/compass-e2e-tests/helpers/selectors.ts +++ b/packages/compass-e2e-tests/helpers/selectors.ts @@ -568,7 +568,7 @@ export const MyQueriesList = '[data-testid="my-queries-list"]'; export const StageContainer = '[data-test-id="stage-container"]'; export const CreateNewPipelineButton = 'button#create-new-pipeline'; export const ToggleAggregationCollation = '[data-test-id="toggle-collation"]'; -export const AggregationCollationInput = '[data-test-id="collation-string"]'; +export const AggregationCollationInput = '[data-testid="collation-string"]'; export const AggregationSettingsButton = '[data-test-id="aggregation-settings"]'; export const AggregationCommentModeCheckbox = '#aggregation-comment-mode'; From ac3fb0d6bc4ff1016b655f78fc540a8e13692a5b Mon Sep 17 00:00:00 2001 From: Basit Date: Tue, 12 Apr 2022 18:24:18 +0200 Subject: [PATCH 3/5] feat(aggregations): lint --- .../src/components/pipeline/collation-toolbar.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx index 5f31f6272bb..ffc34e4eae6 100644 --- a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx +++ b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx @@ -87,8 +87,9 @@ class CollationToolbar extends PureComponent { )} >
From 8090a3b51f46c6473388c0ea868fccb1cc3bea65 Mon Sep 17 00:00:00 2001 From: Basit Date: Wed, 13 Apr 2022 18:46:11 +0200 Subject: [PATCH 4/5] feat(aggregations): test fix --- .../src/components/pipeline/collation-toolbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx index ffc34e4eae6..cc38e610e9b 100644 --- a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx +++ b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.jsx @@ -88,7 +88,7 @@ class CollationToolbar extends PureComponent { >
From 08ad28f877b8ee4ed68d3d2fb7e537b6a590dda1 Mon Sep 17 00:00:00 2001 From: Basit Date: Thu, 14 Apr 2022 15:11:46 +0200 Subject: [PATCH 5/5] feat(aggregations): ux fixes --- .../components/pipeline/collation-toolbar.module.less | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less index a523e9885d4..88bcfbb2996 100644 --- a/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less +++ b/packages/compass-aggregations/src/components/pipeline/collation-toolbar.module.less @@ -34,7 +34,7 @@ color: @pw; white-space: nowrap; border-radius: 14px; - padding: 2px 4px; + padding: 2px 8px 2px 4px; margin-right: 5px; text-transform: uppercase; font-weight: bold; @@ -62,9 +62,16 @@ } .max-time-ms { - width: 30%; display: flex; + min-width: 170px; + + input[type=number]::-webkit-inner-spin-button, + input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } } + } .has-focus {