Skip to content

Commit 83b8387

Browse files
alenakhineikaalenakhineika
authored
feat: Replace projection inputs with corresponding editor COMPASS-5979 (#3317)
* feat: replace wildcard projection with editor COMPASS-5979 * feat: replace columnstore projection with editor * refactor: s * test: format input value * test: run wildcard projection tests on server 5.0.0 and above * test: look for data-tip * test: check only that wildcardProjection presents
1 parent 9470303 commit 83b8387

File tree

12 files changed

+226
-153
lines changed

12 files changed

+226
-153
lines changed

‎packages/compass-e2e-tests/helpers/selectors.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -774,14 +774,20 @@ export const IndexList = '[data-test-id="index-list"]';
774774
export const IndexComponent = '[data-test-id="index-list"] tr';
775775
export const IndexFieldName = '[data-test-id="index-field-name"]';
776776
export const IndexFieldType = '[data-test-id="index-field-type"]';
777+
export const IndexToggleOptions =
778+
'[data-test-id="create-index-modal-toggle-options"]';
779+
export const IndexToggleIsWildcard =
780+
'[data-test-id="wildcard-projection"] input[type="checkbox"]';
781+
export const IndexWildcardProjectionEditor =
782+
'[data-test-id="create-index-modal-options-param-wrapper-editor"] .ace_editor';
777783
export const CreateIndexButton =
778784
'[data-testid="open-create-index-modal-button"]';
779785
export const CreateIndexModal = '[data-test-id="create-index-modal"]';
780786

781787
export const CreateIndexModalFieldNameSelectInput = (idx: number): string => {
782788
return `[data-test-id="create-index-field-name-${idx}"] input`;
783789
};
784-
export const CreateIndexModalFieldTypeSelectButtont = (idx: number): string => {
790+
export const CreateIndexModalFieldTypeSelectButton = (idx: number): string => {
785791
return `[data-test-id="create-index-field-type-${idx}"] button`;
786792
};
787793
export const CreateIndexModalFieldTypeSelectMenu = (idx: number): string => {

‎packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ describe('Collection indexes tab', function () {
6262
await browser.keys(['Enter']);
6363

6464
const fieldTypeSelect = await browser.$(
65-
Selectors.CreateIndexModalFieldTypeSelectButtont(0)
65+
Selectors.CreateIndexModalFieldTypeSelectButton(0)
6666
);
6767
await fieldTypeSelect.waitForDisplayed();
6868

@@ -117,12 +117,12 @@ describe('Collection indexes tab', function () {
117117
Selectors.CreateIndexModalFieldNameSelectInput(0)
118118
);
119119

120-
await browser.setValueVisible(fieldNameSelect, 'i.$**');
120+
await browser.setValueVisible(fieldNameSelect, '$**');
121121
await browser.keys(['Enter']);
122122

123123
// Select text filed type from Select.
124124
const fieldTypeSelect = await browser.$(
125-
Selectors.CreateIndexModalFieldTypeSelectButtont(0)
125+
Selectors.CreateIndexModalFieldTypeSelectButton(0)
126126
);
127127
await fieldTypeSelect.waitForDisplayed();
128128

@@ -138,19 +138,36 @@ describe('Collection indexes tab', function () {
138138
await fieldTypeSelectSpan.waitForDisplayed();
139139
await fieldTypeSelectSpan.click();
140140

141+
const indexToggleOptions = await browser.$(Selectors.IndexToggleOptions);
142+
await indexToggleOptions.click();
143+
144+
const indexToggleIsWildcard = await browser.$(
145+
Selectors.IndexToggleIsWildcard
146+
);
147+
await indexToggleIsWildcard.click();
148+
149+
// set the text in the editor
150+
await browser.setAceValue(
151+
Selectors.IndexWildcardProjectionEditor,
152+
'{ "fieldA": 1, "fieldB.fieldC": 1 }'
153+
);
154+
141155
await browser.clickVisible(Selectors.CreateIndexConfirmButton);
142156

143157
await createModal.waitForDisplayed({ reverse: true });
144158

145-
const indexComponent = await browser.$(
146-
Selectors.indexComponent('i.$**_1')
147-
);
159+
const indexComponent = await browser.$(Selectors.indexComponent('$**_1'));
148160
await indexComponent.waitForDisplayed();
149161

150162
const indexFieldTypeElement = await browser.$(
151-
`${Selectors.indexComponent('i.$**_1')} ${Selectors.IndexFieldType}`
163+
`${Selectors.indexComponent('$**_1')} ${Selectors.IndexFieldType}`
152164
);
153165
expect(await indexFieldTypeElement.getText()).to.equal('WILDCARD');
166+
167+
const indexFieldTypeDataTip = await indexFieldTypeElement.getAttribute(
168+
'data-tip'
169+
);
170+
expect(indexFieldTypeDataTip).to.include('wildcardProjection');
154171
});
155172
});
156173

@@ -175,7 +192,7 @@ describe('Collection indexes tab', function () {
175192

176193
// Select text filed type from Select.
177194
const fieldTypeSelect = await browser.$(
178-
Selectors.CreateIndexModalFieldTypeSelectButtont(0)
195+
Selectors.CreateIndexModalFieldTypeSelectButton(0)
179196
);
180197
await fieldTypeSelect.waitForDisplayed();
181198

‎packages/compass-indexes/src/components/create-index-modal/create-index-modal.jsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ import { toggleIsTtl } from '../../modules/create-index/is-ttl';
3636
import { changeTtl } from '../../modules/create-index/ttl';
3737
import { toggleHasWildcardProjection } from '../../modules/create-index/has-wildcard-projection';
3838
import { toggleHasColumnstoreProjection } from '../../modules/create-index/has-columnstore-projection';
39-
import { changeWildcardProjection } from '../../modules/create-index/wildcard-projection';
40-
import { changeColumnstoreProjection } from '../../modules/create-index/columnstore-projection';
39+
import { wildcardProjectionChanged } from '../../modules/create-index/wildcard-projection';
40+
import { columnstoreProjectionChanged } from '../../modules/create-index/columnstore-projection';
4141
import { changePartialFilterExpression } from '../../modules/create-index/partial-filter-expression';
4242
import { toggleIsCustomCollation } from '../../modules/create-index/is-custom-collation';
4343
import { collationStringChanged } from '../../modules/create-index/collation-string';
@@ -94,8 +94,8 @@ class CreateIndexModal extends PureComponent {
9494
createIndex: PropTypes.func.isRequired,
9595
openLink: PropTypes.func.isRequired,
9696
changeTtl: PropTypes.func.isRequired,
97-
changeColumnstoreProjection: PropTypes.func.isRequired,
98-
changeWildcardProjection: PropTypes.func.isRequired,
97+
columnstoreProjectionChanged: PropTypes.func.isRequired,
98+
wildcardProjectionChanged: PropTypes.func.isRequired,
9999
changePartialFilterExpression: PropTypes.func.isRequired,
100100
changeName: PropTypes.func.isRequired,
101101
newIndexField: PropTypes.string,
@@ -243,20 +243,21 @@ class CreateIndexModal extends PureComponent {
243243
onLinkClickHandler={this.props.openLink}
244244
/>
245245
{this.renderCollation()}
246-
<ModalCheckbox
247-
name="Wildcard Projection"
248-
data-test-id="toggle-is-wildcard"
249-
titleClassName={styles['create-index-modal-options-param']}
250-
checked={this.props.hasWildcardProjection}
251-
helpUrl={getIndexHelpLink('WILDCARD')}
252-
onClickHandler={() =>
253-
this.props.toggleHasWildcardProjection(
254-
!this.props.hasWildcardProjection
255-
)
256-
}
257-
onLinkClickHandler={this.props.openLink}
258-
/>
259-
{this.renderWildcard()}
246+
<div data-test-id="wildcard-projection">
247+
<ModalCheckbox
248+
name="Wildcard Projection"
249+
titleClassName={styles['create-index-modal-options-param']}
250+
checked={this.props.hasWildcardProjection}
251+
helpUrl={getIndexHelpLink('WILDCARD')}
252+
onClickHandler={() =>
253+
this.props.toggleHasWildcardProjection(
254+
!this.props.hasWildcardProjection
255+
)
256+
}
257+
onLinkClickHandler={this.props.openLink}
258+
/>
259+
{this.renderWildcard()}
260+
</div>
260261
{hasColumnstoreIndexesSupport(this.props.serverVersion) && (
261262
<>
262263
<ModalCheckbox
@@ -296,14 +297,15 @@ class CreateIndexModal extends PureComponent {
296297
renderWildcard() {
297298
if (this.props.showOptions && this.props.hasWildcardProjection) {
298299
return (
299-
<div className={styles['create-index-modal-options-param-wrapper']}>
300-
<ModalInput
301-
id="wildcard-projection-value"
302-
name=""
303-
value={this.props.wildcardProjection}
304-
onChangeHandler={(evt) =>
305-
this.props.changeWildcardProjection(evt.target.value)
306-
}
300+
<div
301+
data-test-id="create-index-modal-options-param-wrapper-editor"
302+
className={styles['create-index-modal-options-param-wrapper']}
303+
>
304+
<Editor
305+
variant={EditorVariant.Shell}
306+
onChangeText={this.props.wildcardProjectionChanged}
307+
options={{ minLines: 10 }}
308+
name="add-index-wildcard-projection-editor"
307309
/>
308310
</div>
309311
);
@@ -313,13 +315,11 @@ class CreateIndexModal extends PureComponent {
313315
if (this.props.showOptions && this.props.hasColumnstoreProjection) {
314316
return (
315317
<div className={styles['create-index-modal-options-param-wrapper']}>
316-
<ModalInput
317-
id="columnstore-projection-value"
318-
name=""
319-
value={this.props.columnstoreProjection}
320-
onChangeHandler={(evt) =>
321-
this.props.changeColumnstoreProjection(evt.target.value)
322-
}
318+
<Editor
319+
variant={EditorVariant.Shell}
320+
onChangeText={this.props.columnstoreProjectionChanged}
321+
options={{ minLines: 10 }}
322+
name="add-index-columnstore-projection-editor"
323323
/>
324324
</div>
325325
);
@@ -412,6 +412,7 @@ class CreateIndexModal extends PureComponent {
412412
</div>
413413

414414
<button
415+
data-test-id="create-index-modal-toggle-options"
415416
className={styles['create-index-modal-toggle-bar']}
416417
onClick={this.handleToggleBarClick.bind(this)}
417418
>
@@ -525,8 +526,8 @@ const MappedCreateIndexModal = connect(mapStateToProps, {
525526
toggleIsCustomCollation,
526527
changePartialFilterExpression,
527528
changeTtl,
528-
changeWildcardProjection,
529-
changeColumnstoreProjection,
529+
wildcardProjectionChanged,
530+
columnstoreProjectionChanged,
530531
collationStringChanged,
531532
createNewIndexField,
532533
clearNewIndexField,

‎packages/compass-indexes/src/components/create-index-modal/create-index-modal.spec.jsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ describe('CreateIndexModal [Component]', function () {
2929
let changePartialFilterExpressionSpy;
3030
let collationStringChangedSpy;
3131
let changeNameSpy;
32-
let changeColumnstoreProjectionSpy;
33-
let changeWildcardProjectionSpy;
32+
let columnstoreProjectionChangedSpy;
33+
let wildcardProjectionChangedSpy;
3434
let createNewIndexFieldSpy;
3535

3636
const spyComponentProps = () => {
@@ -53,8 +53,8 @@ describe('CreateIndexModal [Component]', function () {
5353
changePartialFilterExpressionSpy = sinon.spy();
5454
collationStringChangedSpy = sinon.spy();
5555
changeNameSpy = sinon.spy();
56-
changeColumnstoreProjectionSpy = sinon.spy();
57-
changeWildcardProjectionSpy = sinon.spy();
56+
columnstoreProjectionChangedSpy = sinon.spy();
57+
wildcardProjectionChangedSpy = sinon.spy();
5858
createNewIndexFieldSpy = sinon.spy();
5959
};
6060

@@ -78,8 +78,8 @@ describe('CreateIndexModal [Component]', function () {
7878
changePartialFilterExpressionSpy = null;
7979
collationStringChangedSpy = null;
8080
changeNameSpy = null;
81-
changeColumnstoreProjectionSpy = null;
82-
changeWildcardProjectionSpy = null;
81+
columnstoreProjectionChangedSpy = null;
82+
wildcardProjectionChangedSpy = null;
8383
createNewIndexFieldSpy = null;
8484
};
8585

@@ -132,8 +132,8 @@ describe('CreateIndexModal [Component]', function () {
132132
columnstoreProjection=""
133133
hasColumnstoreProjection={false}
134134
serverVersion="4.0.0"
135-
changeColumnstoreProjection={changeColumnstoreProjectionSpy}
136-
changeWildcardProjection={changeWildcardProjectionSpy}
135+
columnstoreProjectionChanged={columnstoreProjectionChangedSpy}
136+
wildcardProjectionChanged={wildcardProjectionChangedSpy}
137137
createNewIndexField={createNewIndexFieldSpy}
138138
/>
139139
);
@@ -274,8 +274,8 @@ describe('CreateIndexModal [Component]', function () {
274274
wildcardProjection=""
275275
columnstoreProjection=""
276276
serverVersion="4.0.0"
277-
changeColumnstoreProjection={changeColumnstoreProjectionSpy}
278-
changeWildcardProjection={changeWildcardProjectionSpy}
277+
columnstoreProjectionChanged={columnstoreProjectionChangedSpy}
278+
wildcardProjectionChanged={wildcardProjectionChangedSpy}
279279
createNewIndexField={createNewIndexFieldSpy}
280280
/>
281281
);
@@ -418,8 +418,8 @@ describe('CreateIndexModal [Component]', function () {
418418
hasColumnstoreProjection={false}
419419
wildcardProjection=""
420420
columnstoreProjection=""
421-
changeColumnstoreProjection={changeColumnstoreProjectionSpy}
422-
changeWildcardProjection={changeWildcardProjectionSpy}
421+
columnstoreProjectionChanged={columnstoreProjectionChangedSpy}
422+
wildcardProjectionChanged={wildcardProjectionChangedSpy}
423423
createNewIndexField={createNewIndexFieldSpy}
424424
/>
425425
);
@@ -520,8 +520,8 @@ describe('CreateIndexModal [Component]', function () {
520520
hasColumnstoreProjection={false}
521521
wildcardProjection=""
522522
columnstoreProjection=""
523-
changeColumnstoreProjection={changeColumnstoreProjectionSpy}
524-
changeWildcardProjection={changeWildcardProjectionSpy}
523+
columnstoreProjectionChanged={columnstoreProjectionChangedSpy}
524+
wildcardProjectionChanged={wildcardProjectionChangedSpy}
525525
createNewIndexField={createNewIndexFieldSpy}
526526
serverVersion="4.0.0"
527527
/>
@@ -580,8 +580,8 @@ describe('CreateIndexModal [Component]', function () {
580580
hasColumnstoreProjection={false}
581581
wildcardProjection=""
582582
columnstoreProjection=""
583-
changeColumnstoreProjection={changeColumnstoreProjectionSpy}
584-
changeWildcardProjection={changeWildcardProjectionSpy}
583+
columnstoreProjectionChanged={columnstoreProjectionChangedSpy}
584+
wildcardProjectionChanged={wildcardProjectionChangedSpy}
585585
createNewIndexField={createNewIndexFieldSpy}
586586
serverVersion="4.0.0"
587587
/>
@@ -643,8 +643,8 @@ describe('CreateIndexModal [Component]', function () {
643643
hasColumnstoreProjection={false}
644644
wildcardProjection=""
645645
columnstoreProjection=""
646-
changeColumnstoreProjection={changeColumnstoreProjectionSpy}
647-
changeWildcardProjection={changeWildcardProjectionSpy}
646+
columnstoreProjectionChanged={columnstoreProjectionChangedSpy}
647+
wildcardProjectionChanged={wildcardProjectionChangedSpy}
648648
createNewIndexField={createNewIndexFieldSpy}
649649
serverVersion="4.0.0"
650650
/>

‎packages/compass-indexes/src/components/type-column/type-column.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ class TypeColumn extends PureComponent {
8585
return (
8686
<td className={styles['type-column']}>
8787
{this.renderType()}
88-
<ReactTooltip id={TOOLTIP_ID} />
88+
<ReactTooltip id={TOOLTIP_ID} data-testid="tooltip-index-field-type" />
8989
</td>
9090
);
9191
}

‎packages/compass-indexes/src/modules/create-index/collation-string.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export const INITIAL_STATE = '';
1313

1414
/**
1515
* Reducer function for handle collation string state changes.
16+
*
17+
* @param {String} state - The collation string state.
18+
* @param {Object} action - The action.
19+
*
20+
* @returns {String} The new state.
1621
*/
1722
export default function reducer(
1823
state = INITIAL_STATE,
@@ -26,6 +31,10 @@ export default function reducer(
2631

2732
/**
2833
* Action creator for collation string changed event.
34+
*
35+
* @param {String} collationString - The collation string.
36+
*
37+
* @returns {Object} The action.
2938
*/
3039
export const collationStringChanged = (collationString: string): AnyAction => {
3140
return { type: COLLATION_STRING_CHANGED, collationString };

‎packages/compass-indexes/src/modules/create-index/columnstore-projection.spec.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { expect } from 'chai';
2+
3+
import reducer, {
4+
INITIAL_STATE,
5+
columnstoreProjectionChanged,
6+
COLUMNSTORE_PROJECTION_CHANGED,
7+
} from '../create-index/columnstore-projection';
8+
9+
describe('create index columnstore projection module', function () {
10+
describe('#reducer', function () {
11+
context('when an action is provided', function () {
12+
it('returns the new state', function () {
13+
expect(
14+
reducer(
15+
undefined,
16+
columnstoreProjectionChanged("{ testkey: 'testvalue' }")
17+
)
18+
).to.deep.equal("{ testkey: 'testvalue' }");
19+
});
20+
});
21+
22+
context('when an action is not provided', function () {
23+
it('returns the default state', function () {
24+
expect(reducer(undefined, { type: 'test' })).to.equal(INITIAL_STATE);
25+
});
26+
});
27+
});
28+
29+
describe('#columnstoreProjectionChanged', function () {
30+
it('returns the action', function () {
31+
expect(
32+
columnstoreProjectionChanged("{ testkey: 'testvalue' }")
33+
).to.deep.equal({
34+
type: COLUMNSTORE_PROJECTION_CHANGED,
35+
columnstoreProjection: "{ testkey: 'testvalue' }",
36+
});
37+
});
38+
});
39+
});

0 commit comments

Comments
 (0)