Migrate Analytics Banner to a Toast

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/LoggedInView.tsx

@@ -65,7 +65,6 @@ interface IProps {
     initialEventPixelOffset: number;
     leftDisabled: boolean;
     rightDisabled: boolean;
-    showCookieBar: boolean;
     hasNewVersion: boolean;
     userHasGeneratedPassword: boolean;
     page_type: string;
@@ -181,7 +180,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
     componentDidUpdate(prevProps, prevState) {
         // attempt to guess when a banner was opened or closed
         if (
-            (prevProps.showCookieBar !== this.props.showCookieBar) ||
             (prevProps.hasNewVersion !== this.props.hasNewVersion) ||
             (prevState.userHasGeneratedPassword !== this.state.userHasGeneratedPassword)
         ) {
@@ -597,7 +595,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
         const ToastContainer = sdk.getComponent('structures.ToastContainer');
-        const CookieBar = sdk.getComponent('globals.CookieBar');
         const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
         const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
         const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
@@ -663,12 +660,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                 adminContact={usageLimitEvent.getContent().admin_contact}
                 limitType={usageLimitEvent.getContent().limit_type}
             />;
-        } else if (this.props.showCookieBar &&
-            this.props.config.piwik &&
-            navigator.doNotTrack !== "1"
-        ) {
-            const policyUrl = this.props.config.piwik.policyUrl || null;
-            topBar = <CookieBar policyUrl={policyUrl} />;
         } else if (this.props.hasNewVersion) {
             topBar = <NewVersionBar version={this.props.version} newVersion={this.props.newVersion}
                                     releaseNotes={this.props.newVersionReleaseNotes}

src/components/structures/MatrixChat.tsx

@@ -68,6 +68,10 @@ import * as StorageManager from "../../utils/StorageManager";
 import type LoggedInViewType from "./LoggedInView";
 import { ViewUserPayload } from "../../dispatcher/payloads/ViewUserPayload";
 import { Action } from "../../dispatcher/actions";
+import {
+    showToast as showAnalyticsToast,
+    hideToast as hideAnalyticsToast
+} from "../../toasts/AnalyticsToast";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -174,7 +178,6 @@ interface IState {
     hasNewVersion: boolean;
     newVersionReleaseNotes?: string;
     checkingForUpdate?: string; // updateCheckStatusEnum
-    showCookieBar: boolean;
     // Parameters used in the registration dance with the IS
     register_client_secret?: string;
     register_session_id?: string;
@@ -231,8 +234,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             newVersionReleaseNotes: null,
             checkingForUpdate: null,
 
-            showCookieBar: false,
-
             hideToSRUsers: false,
 
             syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
@@ -337,12 +338,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             });
         }
 
-        if (SettingsStore.getValue("showCookieBar")) {
-            this.setState({
-                showCookieBar: true,
-            });
-        }
-
         if (SettingsStore.getValue("analyticsOptIn")) {
             Analytics.enable();
         }
@@ -756,19 +751,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'accept_cookies':
                 SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, true);
                 SettingsStore.setValue("showCookieBar", null, SettingLevel.DEVICE, false);
-
+                hideAnalyticsToast();
-                this.setState({
-                    showCookieBar: false,
-                });
                 Analytics.enable();
                 break;
             case 'reject_cookies':
                 SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, false);
                 SettingsStore.setValue("showCookieBar", null, SettingLevel.DEVICE, false);
-
+                hideAnalyticsToast();
-                this.setState({
-                    showCookieBar: false,
-                });
                 break;
         }
     };
@@ -1246,6 +1235,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
 
         StorageManager.tryPersistStorage();
+
+        if (SettingsStore.getValue("showCookieBar") && this.props.config.piwik && navigator.doNotTrack !== "1") {
+            showAnalyticsToast(this.props.config.piwik && this.props.config.piwik.policyUrl);
+        }
     }
 
     private showScreenAfterLogin() {
@@ -2031,7 +2024,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                         onCloseAllSettings={this.onCloseAllSettings}
                         onRegistered={this.onRegistered}
                         currentRoomId={this.state.currentRoomId}
-                        showCookieBar={this.state.showCookieBar}
                     />
                 );
             } else {

src/components/views/globals/CookieBar.js

@@ -1,103 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import dis from '../../../dispatcher/dispatcher';
-import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
-import Analytics from '../../../Analytics';
-
-export default class CookieBar extends React.Component {
-    static propTypes = {
-        policyUrl: PropTypes.string,
-    }
-
-    constructor() {
-        super();
-    }
-
-    onUsageDataClicked(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        Analytics.showDetailsModal();
-    }
-
-    onAccept() {
-        dis.dispatch({
-            action: 'accept_cookies',
-        });
-    }
-
-    onReject() {
-        dis.dispatch({
-            action: 'reject_cookies',
-        });
-    }
-
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const toolbarClasses = "mx_MatrixToolbar";
-        return (
-            <div className={toolbarClasses}>
-                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
-                <div className="mx_MatrixToolbar_content">
-                    { this.props.policyUrl ? _t(
-                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
-                        "This will use a cookie " +
-                        "(please see our <PolicyLink>Cookie Policy</PolicyLink>).",
-                        {},
-                        {
-                            'UsageDataLink': (sub) => <a
-                                className="mx_MatrixToolbar_link"
-                                onClick={this.onUsageDataClicked}
-                            >
-                                { sub }
-                            </a>,
-                            // XXX: We need to link to the page that explains our cookies
-                            'PolicyLink': (sub) => <a
-                                    className="mx_MatrixToolbar_link"
-                                    target="_blank"
-                                    href={this.props.policyUrl}
-                                >
-                                    { sub }
-                                </a>
-                            ,
-                        },
-                    ) : _t(
-                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
-                        "This will use a cookie.",
-                        {},
-                        {
-                            'UsageDataLink': (sub) => <a
-                                className="mx_MatrixToolbar_link"
-                                onClick={this.onUsageDataClicked}
-                            >
-                                { sub }
-                            </a>,
-                        },
-                    ) }
-                </div>
-                <AccessibleButton element='button' className="mx_MatrixToolbar_action" onClick={this.onAccept}>
-                    { _t("Yes, I want to help!") }
-                </AccessibleButton>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
-                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
-                </AccessibleButton>
-            </div>
-        );
-    }
-}

src/i18n/strings/en_EN.json

@@ -391,10 +391,17 @@
     "Common names and surnames are easy to guess": "Common names and surnames are easy to guess",
     "Straight rows of keys are easy to guess": "Straight rows of keys are easy to guess",
     "Short keyboard patterns are easy to guess": "Short keyboard patterns are easy to guess",
+    "Notifications": "Notifications",
+    "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve Riot. This will use a <PolicyLink>cookie</PolicyLink>.": "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve Riot. This will use a <PolicyLink>cookie</PolicyLink>.",
+    "I want to help": "I want to help",
+    "No": "No",
     "Review where you’re logged in": "Review where you’re logged in",
     "Verify all your sessions to ensure your account & messages are safe": "Verify all your sessions to ensure your account & messages are safe",
     "Review": "Review",
     "Later": "Later",
+    "You are not receiving desktop notifications": "You are not receiving desktop notifications",
+    "Enable them now": "Enable them now",
+    "Close": "Close",
     "Set up encryption": "Set up encryption",
     "Encryption upgrade available": "Encryption upgrade available",
     "Verify this session": "Verify this session",
@@ -643,8 +650,6 @@
     "Last seen": "Last seen",
     "Failed to set display name": "Failed to set display name",
     "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.": "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.",
-    "Disable Notifications": "Disable Notifications",
-    "Enable Notifications": "Enable Notifications",
     "Securely cache encrypted messages locally for them to appear in search results, using ": "Securely cache encrypted messages locally for them to appear in search results, using ",
     " to store messages from ": " to store messages from ",
     "rooms.": "rooms.",
@@ -815,7 +820,6 @@
     "Ban list rules - %(roomName)s": "Ban list rules - %(roomName)s",
     "Server rules": "Server rules",
     "User rules": "User rules",
-    "Close": "Close",
     "You have not ignored anyone.": "You have not ignored anyone.",
     "You are currently ignoring:": "You are currently ignoring:",
     "You are not subscribed to any lists": "You are not subscribed to any lists",
@@ -836,7 +840,6 @@
     "If this isn't what you want, please use a different tool to ignore users.": "If this isn't what you want, please use a different tool to ignore users.",
     "Room ID or alias of ban list": "Room ID or alias of ban list",
     "Subscribe": "Subscribe",
-    "Notifications": "Notifications",
     "Start automatically after system login": "Start automatically after system login",
     "Always show the window menu bar": "Always show the window menu bar",
     "Show tray icon and minimize window to it on close": "Show tray icon and minimize window to it on close",
@@ -1287,7 +1290,6 @@
     "Verify by emoji": "Verify by emoji",
     "Almost there! Is your other session showing the same shield?": "Almost there! Is your other session showing the same shield?",
     "Almost there! Is %(displayName)s showing the same shield?": "Almost there! Is %(displayName)s showing the same shield?",
-    "No": "No",
     "Yes": "Yes",
     "Verify all users in a room to ensure it's secure.": "Verify all users in a room to ensure it's secure.",
     "In encrypted rooms, verify all users to ensure it’s secure.": "In encrypted rooms, verify all users to ensure it’s secure.",
@@ -1384,8 +1386,6 @@
     "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. This will use a cookie (please see our <PolicyLink>Cookie Policy</PolicyLink>).": "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. This will use a cookie (please see our <PolicyLink>Cookie Policy</PolicyLink>).",
     "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. This will use a cookie.": "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. This will use a cookie.",
     "Yes, I want to help!": "Yes, I want to help!",
-    "You are not receiving desktop notifications": "You are not receiving desktop notifications",
-    "Enable them now": "Enable them now",
     "What's New": "What's New",
     "Update": "Update",
     "What's new?": "What's new?",

src/toasts/AnalyticsToast.tsx

@@ -0,0 +1,75 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { _t } from "../languageHandler";
+import dis from "../dispatcher/dispatcher";
+import Analytics from "../Analytics";
+import AccessibleButton from "../components/views/elements/AccessibleButton";
+import GenericToast from "../components/views/toasts/GenericToast";
+import ToastStore from "../stores/ToastStore";
+
+const onAccept = () => {
+    dis.dispatch({
+        action: 'accept_cookies',
+    });
+};
+
+const onReject = () => {
+    dis.dispatch({
+        action: "reject_cookies",
+    });
+};
+
+const onUsageDataClicked = () => {
+    Analytics.showDetailsModal();
+};
+
+const TOAST_KEY = "analytics";
+
+export const showToast = (policyUrl?: string) => {
+    ToastStore.sharedInstance().addOrReplaceToast({
+        key: TOAST_KEY,
+        title: _t("Notifications"),
+        props: {
+            description: _t(
+                "Send <UsageDataLink>anonymous usage data</UsageDataLink> which helps us improve Riot. " +
+                "This will use a <PolicyLink>cookie</PolicyLink>.",
+                {},
+                {
+                    "UsageDataLink": (sub) => (
+                        <AccessibleButton kind="link" onClick={onUsageDataClicked}>{ sub }</AccessibleButton>
+                    ),
+                    // XXX: We need to link to the page that explains our cookies
+                    "PolicyLink": (sub) => policyUrl ? (
+                        <a target="_blank" href={policyUrl}>{ sub }</a>
+                    ) : sub,
+                },
+            ),
+            acceptLabel: _t("I want to help"),
+            onAccept,
+            rejectLabel: _t("No"),
+            onReject,
+        },
+        component: GenericToast,
+        priority: 10,
+    });
+};
+
+export const hideToast = () => {
+    ToastStore.sharedInstance().dismissToast(TOAST_KEY);
+};