Skip to content

Commit 4d6299d

Browse files
rsergeenkorsergeenko
authored
Merge pull request #62 from RedisInsight/feature/RI-2066_plugins-warning
#RI-2066 - change the wording for plugins, update consents popup styles
2 parents 2071f9f + e83467e commit 4d6299d

File tree

6 files changed

+106
-65
lines changed

6 files changed

+106
-65
lines changed

‎redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import {
1212
EuiToolTip,
1313
EuiForm,
1414
EuiHorizontalRule,
15+
EuiCallOut,
1516
} from '@elastic/eui'
17+
import cx from 'classnames'
1618
import parse from 'html-react-parser'
1719

1820
import { compareConsents } from 'uiSrc/utils'
@@ -149,34 +151,38 @@ const ConsentsSettings = ({ liveEditMode = false }: Props) => {
149151

150152
return (
151153
<EuiForm component="form" onSubmit={formik.handleSubmit} data-testid="consents-settings-form">
152-
{!!nonRequiredConsents.length && (
153-
<>
154-
<EuiSpacer size="s" />
155-
<EuiText size="s" color="subdued">
156-
To improve your experience, we use third party tools in RedisInsight. All data collected
157-
are completely anonymized, but we will not use these data for any purpose that you do
158-
not consent to.
159-
</EuiText>
160-
<EuiSpacer size="xl" />
161-
</>
162-
)}
163-
{
164-
nonRequiredConsents
165-
.map((consent: IConsent) => renderConsentOption(consent, nonRequiredConsents.length > 1))
166-
}
167-
168-
{!liveEditMode && (
169-
<>
170-
<EuiText size="s" color="subdued">
171-
While adding new plugins for Workbench, use files only from trusted authors
172-
to avoid automatic execution of malicious code.
173-
</EuiText>
174-
<EuiHorizontalRule margin="l" />
175-
</>
176-
)}
177-
154+
<div className={styles.consentsWrapper}>
155+
{!!nonRequiredConsents.length && (
156+
<>
157+
<EuiSpacer size="s" />
158+
<EuiText size="s" color="subdued">
159+
To improve your experience, we use third party tools in RedisInsight. All data collected
160+
are completely anonymized, but we will not use these data for any purpose that you do
161+
not consent to.
162+
</EuiText>
163+
<EuiSpacer size="xl" />
164+
</>
165+
)}
166+
{
167+
nonRequiredConsents
168+
.map((consent: IConsent) => renderConsentOption(consent, nonRequiredConsents.length > 1))
169+
}
170+
171+
{!liveEditMode && (
172+
<>
173+
<EuiCallOut>
174+
<EuiText size="s">
175+
While adding new visualization plugins, use files only from trusted authors
176+
to avoid automatic execution of malicious code.
177+
</EuiText>
178+
</EuiCallOut>
179+
<EuiHorizontalRule margin="l" className={cx({ [styles.pluginWarningHR]: !!requiredConsents.length })} />
180+
</>
181+
)}
182+
</div>
178183
{!!requiredConsents.length && (
179184
<>
185+
<EuiSpacer size="l" />
180186
<EuiText color="subdued" size="s">
181187
To use RedisInsight, please accept the terms and conditions:
182188
</EuiText>
@@ -185,39 +191,42 @@ const ConsentsSettings = ({ liveEditMode = false }: Props) => {
185191
)}
186192

187193
{requiredConsents.map((consent: IConsent) => renderConsentOption(consent))}
194+
188195
{!liveEditMode && (
189-
<EuiFlexGroup justifyContent="flexEnd" responsive={false}>
190-
<EuiSpacer size="l" />
191-
<EuiFlexItem grow={false}>
192-
<EuiToolTip
193-
position="top"
194-
anchorClassName="euiToolTip__btn-disabled"
195-
content={
196-
submitIsDisabled() ? (
197-
<span className="euiToolTip__content">
198-
{Object.values(errors).map((err) => [
199-
spec?.agreements[err as string]?.requiredText,
200-
<br key={err} />,
201-
])}
202-
</span>
203-
) : null
204-
}
205-
>
206-
<EuiButton
207-
fill
208-
color="secondary"
209-
className="btn-add"
210-
type="submit"
211-
onClick={() => {}}
212-
disabled={submitIsDisabled()}
213-
iconType={submitIsDisabled() ? 'iInCircle' : undefined}
214-
data-testid="btn-submit"
196+
<>
197+
{!requiredConsents.length && (<EuiSpacer size="l" />)}
198+
<EuiFlexGroup justifyContent="flexEnd" responsive={false}>
199+
<EuiFlexItem grow={false}>
200+
<EuiToolTip
201+
position="top"
202+
anchorClassName="euiToolTip__btn-disabled"
203+
content={
204+
submitIsDisabled() ? (
205+
<span className="euiToolTip__content">
206+
{Object.values(errors).map((err) => [
207+
spec?.agreements[err as string]?.requiredText,
208+
<br key={err} />,
209+
])}
210+
</span>
211+
) : null
212+
}
215213
>
216-
Submit
217-
</EuiButton>
218-
</EuiToolTip>
219-
</EuiFlexItem>
220-
</EuiFlexGroup>
214+
<EuiButton
215+
fill
216+
color="secondary"
217+
className="btn-add"
218+
type="submit"
219+
onClick={() => {}}
220+
disabled={submitIsDisabled()}
221+
iconType={submitIsDisabled() ? 'iInCircle' : undefined}
222+
data-testid="btn-submit"
223+
>
224+
Submit
225+
</EuiButton>
226+
</EuiToolTip>
227+
</EuiFlexItem>
228+
</EuiFlexGroup>
229+
</>
221230
)}
222231
</EuiForm>
223232
)

‎redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import {
88
EuiFlexGroup,
99
EuiFlexItem,
1010
EuiTitle,
11-
EuiSpacer,
12-
EuiText,
1311
} from '@elastic/eui'
1412

1513
import { Theme } from 'uiSrc/constants'
@@ -35,7 +33,12 @@ const ConsentsSettingsPopup = () => {
3533
<EuiOverlayMask>
3634
<EuiModal className={styles.consentsPopup} onClose={() => {}} data-testid="consents-settings-popup">
3735
<EuiModalHeader className={styles.modalHeader}>
38-
<EuiFlexGroup justifyContent="flexEnd">
36+
<EuiFlexGroup justifyContent="spaceBetween">
37+
<EuiFlexItem grow={false}>
38+
<EuiTitle size="s">
39+
<h3 className={styles.consentsPopupTitle}>EULA and Privacy Settings</h3>
40+
</EuiTitle>
41+
</EuiFlexItem>
3942
<EuiFlexItem grow={false}>
4043
<EuiIcon
4144
className={styles.redisIcon}
@@ -46,11 +49,6 @@ const ConsentsSettingsPopup = () => {
4649
</EuiFlexGroup>
4750
</EuiModalHeader>
4851
<EuiModalBody>
49-
<EuiTitle size="xs">
50-
<EuiText className={styles.consentsPopupTitle}>EULA and Privacy Settings</EuiText>
51-
</EuiTitle>
52-
<EuiSpacer size="xl" />
53-
5452
<ConsentsSettings />
5553
</EuiModalBody>
5654
</EuiModal>

‎redisinsight/ui/src/components/consents-settings/styles.module.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import '@elastic/eui/src/global_styling/mixins/helpers';
2+
@import '@elastic/eui/src/global_styling/index';
3+
14
.redisIcon {
25
width: 140px;
36
height: auto;
@@ -13,6 +16,9 @@
1316
.euiModal__closeIcon {
1417
display: none;
1518
}
19+
.euiModal__flex {
20+
max-height: 84vh !important;
21+
}
1622
}
1723

1824
a {
@@ -28,9 +34,21 @@
2834
padding-bottom: 4px;
2935
}
3036

37+
.consentsWrapper {
38+
@include euiScrollBar;
39+
overflow-x: hidden;
40+
overflow-y: auto;
41+
max-height: calc(84vh - 260px);
42+
}
43+
44+
.pluginWarningHR {
45+
margin-bottom: 0 !important;
46+
}
47+
3148
.consentsPopupTitle {
3249
color: var(--euiTextSubduedColorHover);
3350
font-weight: 500 !important;
51+
font-size: 18px !important;
3452
}
3553

3654
.switchOption {

‎redisinsight/ui/src/styles/base/_overrides.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,7 @@
4747
margin-bottom: 0 !important;
4848
}
4949
}
50+
51+
.euiOverlayMask {
52+
padding-bottom: 0 !important;
53+
}

‎redisinsight/ui/src/styles/components/_callout.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.euiCallOut {
2+
padding: 12px 24px !important;
3+
&--primary {
4+
background-color: var(--euiTooltipBackgroundColor) !important;
5+
border-color: var(--euiColorPrimary) !important;
6+
.euiText {
7+
color: var(--euiTooltipTextColor) !important;
8+
line-height: 24px;
9+
}
10+
}
11+
}

‎redisinsight/ui/src/styles/components/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@
1212
@import 'resizable_container';
1313
@import 'database';
1414
@import 'switch';
15+
@import "callout";

0 commit comments

Comments
 (0)