From 3c9c69f3273603785bb6ef793122b31aa5557178 Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <7019101+cwillisf@users.noreply.github.com>
Date: Tue, 5 Jan 2021 16:45:43 -0800
Subject: [PATCH] add 'Your setting was updated.' message
---
.../telemetry-modal/telemetry-modal.css | 13 ++++---
.../telemetry-modal/telemetry-modal.jsx | 39 +++++++++++++++++++
2 files changed, 46 insertions(+), 6 deletions(-)
diff --git a/src/components/telemetry-modal/telemetry-modal.css b/src/components/telemetry-modal/telemetry-modal.css
index 9b1f5e8cc..3d6f32807 100644
--- a/src/components/telemetry-modal/telemetry-modal.css
+++ b/src/components/telemetry-modal/telemetry-modal.css
@@ -107,16 +107,17 @@ $ui-gray: hsla(0, 0%, 95%, 1);
/* Confirmation buttons at the bottom of the modal */
.button-row {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: baseline;
+
margin: 1.5rem 0;
font-weight: bolder;
}
-[dir="ltr"] .button-row {
- text-align: right;
-}
-
-[dir="rtl"] .button-row {
- text-align: left;
+.settingWasUpdated {
+ color: $extensions-primary;
}
.button-row button {
diff --git a/src/components/telemetry-modal/telemetry-modal.jsx b/src/components/telemetry-modal/telemetry-modal.jsx
index 4fc3c60c1..a918a8da3 100644
--- a/src/components/telemetry-modal/telemetry-modal.jsx
+++ b/src/components/telemetry-modal/telemetry-modal.jsx
@@ -53,6 +53,11 @@ const messages = defineMessages({
description: 'Tooltip for telemetry modal opt-out button',
id: 'gui.telemetryOptIn.optOutTooltip'
},
+ settingWasUpdated: {
+ defaultMessage: 'Your setting was updated.',
+ description: 'Message indicating that the telemetry setting was updated and saved',
+ id: 'gui.telemetryOptIn.settingWasUpdated'
+ },
closeButton: {
defaultMessage: 'Close',
description: 'Text for the button which closes the telemetry modal dialog',
@@ -60,6 +65,9 @@ const messages = defineMessages({
}
});
+// This should be at least as long as the CSS transition
+const SETTING_WAS_UPDATED_DURATION_MS = 3000;
+
class TelemetryModal extends React.PureComponent {
constructor (props) {
super(props);
@@ -67,6 +75,10 @@ class TelemetryModal extends React.PureComponent {
'handleCancel',
'handleOptInOutChanged'
]);
+ this.state = {
+ // if the settingWasUpdated message is displayed, this will be the ID of its removal timer
+ settingWasUpdatedTimer: null
+ };
}
handleCancel () {
this.props.onRequestClose();
@@ -78,17 +90,43 @@ class TelemetryModal extends React.PureComponent {
if (e.target.value === 'true') {
if (this.props.onOptIn) {
this.props.onOptIn();
+ this.handleSettingWasUpdated();
}
} else if (e.target.value === 'false') {
if (this.props.onOptOut) {
this.props.onOptOut();
+ this.handleSettingWasUpdated();
}
}
}
+ handleSettingWasUpdated () {
+ if (this.state.settingWasUpdatedTimer) {
+ clearTimeout(this.state.settingWasUpdatedTimer);
+ }
+ const newTimer = setTimeout(
+ () => this.handleSettingWasUpdatedTimeout(newTimer),
+ SETTING_WAS_UPDATED_DURATION_MS
+ );
+ this.setState({
+ settingWasUpdatedTimer: newTimer
+ });
+ }
+ handleSettingWasUpdatedTimeout (thisTimer) {
+ if (thisTimer !== this.state.settingWasUpdatedTimer) {
+ // some other timer has taken over
+ return;
+ }
+ this.setState({
+ settingWasUpdatedTimer: null
+ });
+ }
render () {
const isUndecided = (typeof this.props.isTelemetryEnabled !== 'boolean');
const isOff = (this.props.isTelemetryEnabled === false);
const isOn = (this.props.isTelemetryEnabled === true);
+ const settingWasUpdated = this.state.settingWasUpdatedTimer && (
+ <FormattedMessage {...messages.settingWasUpdated} />
+ );
return (<ReactModal
isOpen
className={styles.modalContent}
@@ -140,6 +178,7 @@ class TelemetryModal extends React.PureComponent {
</label>
</Box>
<Box className={styles.buttonRow}>
+ <span className={styles.settingWasUpdated}>{settingWasUpdated}</span>
<button
className={styles.optIn}
onClick={this.props.onRequestClose}
--
GitLab