Skip to content

Commit 7578ecc

Browse files
AnemyAnemy
authored
feat(compass-schema-validation): update warnings components to leafygreen COMPASS-5747 (#3249)
1 parent a43c2b2 commit 7578ecc

File tree

3 files changed

+78
-45
lines changed

3 files changed

+78
-45
lines changed

‎packages/compass-schema-validation/src/components/validation-states/validation-states.jsx‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import {
4+
Banner,
45
Button,
56
ButtonSize,
67
ButtonVariant,
78
Link,
9+
WarningSummary,
810
} from '@mongodb-js/compass-components';
9-
import { ZeroState, StatusRow } from 'hadron-react-components';
11+
import { ZeroState } from 'hadron-react-components';
1012
import ValidationEditor from '../validation-editor';
1113
import SampleDocuments from '../sample-documents';
1214
import { ZeroGraphic } from '../zero-graphic';
@@ -87,40 +89,36 @@ class ValidationStates extends Component {
8789
if (!this.isEditable()) {
8890
if (this.props.editMode.collectionTimeSeries) {
8991
return (
90-
<StatusRow style="warning">
91-
<div id="collectionTimeSeries">
92-
{READ_ONLY_WARNING.collectionTimeSeries}
93-
</div>
94-
</StatusRow>
92+
<WarningSummary
93+
warnings={READ_ONLY_WARNING.collectionTimeSeries}
94+
data-testid="collection-validation-warning"
95+
/>
9596
);
9697
}
9798

9899
if (this.props.editMode.collectionReadOnly) {
99100
return (
100-
<StatusRow style="warning">
101-
<div id="collectionReadOnly">
102-
{READ_ONLY_WARNING.collectionReadOnly}
103-
</div>
104-
</StatusRow>
101+
<WarningSummary
102+
warnings={READ_ONLY_WARNING.collectionReadOnly}
103+
data-testid="collection-validation-warning"
104+
/>
105105
);
106106
}
107107

108108
if (this.props.editMode.writeStateStoreReadOnly) {
109109
return (
110-
<StatusRow style="warning">
111-
<div id="writeStateStoreReadOnly">
112-
{READ_ONLY_WARNING.writeStateStoreReadOnly}
113-
</div>
114-
</StatusRow>
110+
<WarningSummary
111+
warnings={READ_ONLY_WARNING.writeStateStoreReadOnly}
112+
data-testid="collection-validation-warning"
113+
/>
115114
);
116115
}
117116

118117
if (this.props.editMode.oldServerReadOnly) {
119118
return (
120-
<StatusRow style="warning">
121-
<div id="oldServerReadOnly">
122-
{READ_ONLY_WARNING.oldServerReadOnly}
123-
<div>&nbsp;</div>
119+
<Banner variant="warning">
120+
<div data-testid="old-server-read-only">
121+
{READ_ONLY_WARNING.oldServerReadOnly}&nbsp;
124122
<Link
125123
className={styles['upgrade-link']}
126124
target="_blank"
@@ -129,7 +127,7 @@ class ValidationStates extends Component {
129127
upgrade to MongoDB 3.2.
130128
</Link>
131129
</div>
132-
</StatusRow>
130+
</Banner>
133131
);
134132
}
135133
}

‎packages/compass-schema-validation/src/components/validation-states/validation-states.module.less‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
@import (reference) 'mongodb-compass/src/app/styles/index.less';
22

33
.validation-states {
4+
padding: 24px;
5+
46
.content-container {
57
background-color: @gray8;
68
height: 100%;
7-
padding: 2.4rem;
8-
}
9-
10-
.upgrade-link {
11-
font-weight: bold;
12-
text-decoration: underline;
13-
margin-bottom: 2px;
14-
color: #7f6a4e;
159
}
1610

1711
.zero-state-container {

‎packages/compass-schema-validation/src/components/validation-states/validation-states.spec.jsx‎

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
33
import { expect } from 'chai';
44
import sinon from 'sinon';
55
import { ZeroState } from 'hadron-react-components';
6+
import { Banner, WarningSummary } from '@mongodb-js/compass-components';
67

78
import ValidationStates from '../validation-states';
89
import ValidationEditor from '../validation-editor';
@@ -65,15 +66,17 @@ describe('ValidationStates [Component]', function () {
6566
});
6667

6768
it('renders the version banner', function () {
68-
expect(component.find({ id: 'oldServerReadOnly' })).to.be.present();
69+
expect(
70+
component.find({ ['data-testid']: 'old-server-read-only' })
71+
).to.be.present();
6972
});
7073

7174
it('does not render other banners', function () {
72-
expect(component.find({ id: 'collectionReadOnly' })).to.be.not.present();
73-
expect(component.find({ id: 'hadronReadOnly' })).to.be.not.present();
7475
expect(
75-
component.find({ id: 'writeStateStoreReadOnly' })
76-
).to.be.not.present();
76+
component.find({
77+
['data-testid']: 'collection-validation-warning',
78+
})
79+
).to.not.be.present();
7780
});
7881
});
7982

@@ -94,7 +97,21 @@ describe('ValidationStates [Component]', function () {
9497
});
9598

9699
it('renders the collection time-series banner', function () {
97-
expect(component.find({ id: 'collectionTimeSeries' })).to.be.present();
100+
expect(
101+
component.find({
102+
['data-testid']: 'collection-validation-warning',
103+
})
104+
).to.be.present();
105+
expect(
106+
component
107+
.find({
108+
['data-testid']: 'collection-validation-warning',
109+
})
110+
.at(0)
111+
.text()
112+
).to.equal(
113+
'Schema validation for time-series collections is not supported.'
114+
);
98115
});
99116
});
100117

@@ -114,14 +131,24 @@ describe('ValidationStates [Component]', function () {
114131
});
115132

116133
it('renders the collection read-only banner', function () {
117-
expect(component.find({ id: 'collectionReadOnly' })).to.be.present();
134+
expect(
135+
component.find({
136+
['data-testid']: 'collection-validation-warning',
137+
})
138+
).to.be.present();
139+
expect(
140+
component
141+
.find({
142+
['data-testid']: 'collection-validation-warning',
143+
})
144+
.at(0)
145+
.text()
146+
).to.equal('Schema validation for readonly views is not supported.');
118147
});
119148

120149
it('does not render other banners', function () {
121-
expect(component.find({ id: 'oldServerReadOnly' })).to.be.not.present();
122-
expect(component.find({ id: 'hadronReadOnly' })).to.be.not.present();
123150
expect(
124-
component.find({ id: 'writeStateStoreReadOnly' })
151+
component.find({ ['data-testid']: 'old-server-read-only' })
125152
).to.be.not.present();
126153
});
127154
});
@@ -142,7 +169,8 @@ describe('ValidationStates [Component]', function () {
142169
});
143170

144171
it('does not render a warning banner', function () {
145-
expect(component.find('StatusRow')).to.be.not.present();
172+
expect(component.find(Banner)).to.be.not.present();
173+
expect(component.find(WarningSummary)).to.be.not.present();
146174
});
147175
});
148176

@@ -162,7 +190,8 @@ describe('ValidationStates [Component]', function () {
162190
});
163191

164192
it('does not render a warning banner', function () {
165-
expect(component.find('StatusRow')).to.be.not.present();
193+
expect(component.find(Banner)).to.be.not.present();
194+
expect(component.find(WarningSummary)).to.be.not.present();
166195
});
167196
});
168197

@@ -182,13 +211,25 @@ describe('ValidationStates [Component]', function () {
182211
});
183212

184213
it('renders the writable banner', function () {
185-
expect(component.find({ id: 'writeStateStoreReadOnly' })).to.be.present();
214+
expect(
215+
component.find({
216+
['data-testid']: 'collection-validation-warning',
217+
})
218+
).to.be.present();
219+
expect(
220+
component
221+
.find({
222+
['data-testid']: 'collection-validation-warning',
223+
})
224+
.at(0)
225+
.text()
226+
).to.equal('This action is not available on a secondary node.');
186227
});
187228

188229
it('does not render other banners', function () {
189-
expect(component.find({ id: 'collectionReadOnly' })).to.be.not.present();
190-
expect(component.find({ id: 'hadronReadOnly' })).to.be.not.present();
191-
expect(component.find({ id: 'oldServerReadOnly' })).to.be.not.present();
230+
expect(
231+
component.find({ ['data-testid']: 'old-server-read-only' })
232+
).to.be.not.present();
192233
});
193234
});
194235

0 commit comments

Comments
 (0)