Migrate Desktop Notifications MatrixToolbar to a Toast

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

src/Notifier.js

@@ -26,6 +26,10 @@ import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
 import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
+import {
+    showToast as showNotificationsToast,
+    hideToast as hideNotificationsToast,
+} from "./toasts/DesktopNotificationsToast";
 
 /*
  * Dispatches:
@@ -184,6 +188,10 @@ const Notifier = {
         MatrixClientPeg.get().on("sync", this.boundOnSyncStateChange);
         this.toolbarHidden = false;
         this.isSyncing = false;
+
+        if (this.shouldShowToolbar()) {
+            showNotificationsToast();
+        }
     },
 
     stop: function() {
@@ -278,12 +286,7 @@ const Notifier = {
 
         Analytics.trackEvent('Notifier', 'Set Toolbar Hidden', hidden);
 
-        // XXX: why are we dispatching this here?
-        // this is nothing to do with notifier_enabled
-        dis.dispatch({
-            action: "notifier_enabled",
-            value: this.isEnabled(),
-        });
+        hideNotificationsToast();
 
         // update the info to localStorage for persistent settings
         if (persistent && global.localStorage) {

src/components/structures/LoggedInView.tsx

@@ -68,7 +68,6 @@ interface IProps {
     showCookieBar: boolean;
     hasNewVersion: boolean;
     userHasGeneratedPassword: boolean;
-    showNotifierToolbar: boolean;
     page_type: string;
     autoJoin: boolean;
     thirdPartyInvite?: object;
@@ -184,8 +183,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         if (
             (prevProps.showCookieBar !== this.props.showCookieBar) ||
             (prevProps.hasNewVersion !== this.props.hasNewVersion) ||
-            (prevState.userHasGeneratedPassword !== this.state.userHasGeneratedPassword) ||
-            (prevProps.showNotifierToolbar !== this.props.showNotifierToolbar)
+            (prevState.userHasGeneratedPassword !== this.state.userHasGeneratedPassword)
         ) {
             this.props.resizeNotifier.notifyBannersChanged();
         }
@@ -599,7 +597,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 MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
         const CookieBar = sdk.getComponent('globals.CookieBar');
         const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
         const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
@@ -680,8 +677,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
         } else if (this.state.userHasGeneratedPassword) {
             topBar = <PasswordNagBar />;
-        } else if (this.props.showNotifierToolbar) {
-            topBar = <MatrixToolbar />;
         }
 
         let bodyClasses = 'mx_MatrixChat';

src/components/structures/MatrixChat.tsx

@@ -184,7 +184,6 @@ interface IState {
     hideToSRUsers: boolean;
     syncError?: Error;
     resizeNotifier: ResizeNotifier;
-    showNotifierToolbar: boolean;
     serverConfig?: ValidatedServerConfig;
     ready: boolean;
     thirdPartyInvite?: object;
@@ -238,7 +237,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
             syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
             resizeNotifier: new ResizeNotifier(),
-            showNotifierToolbar: false,
             ready: false,
         };
 
@@ -686,9 +684,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     dis.dispatch({action: 'view_my_groups'});
                 }
                 break;
-            case 'notifier_enabled':
-                this.setState({showNotifierToolbar: Notifier.shouldShowToolbar()});
-                break;
             case 'hide_left_panel':
                 this.setState({
                     collapseLhs: true,
@@ -1381,7 +1376,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             dis.dispatch({action: 'focus_composer'});
             this.setState({
                 ready: true,
-                showNotifierToolbar: Notifier.shouldShowToolbar(),
             });
         });
         cli.on('Call.incoming', function(call) {

src/components/views/globals/MatrixToolbar.js

@@ -1,45 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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 createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-import Notifier from '../../../Notifier';
-import AccessibleButton from '../../../components/views/elements/AccessibleButton';
-
-export default createReactClass({
-    displayName: 'MatrixToolbar',
-
-    hideToolbar: function() {
-        Notifier.setToolbarHidden(true);
-    },
-
-    onClick: function() {
-        Notifier.setEnabled(true);
-    },
-
-    render: function() {
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
-                <div className="mx_MatrixToolbar_content">
-                   { _t('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
-                </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} /></AccessibleButton>
-            </div>
-        );
-    },
-});

src/toasts/DesktopNotificationsToast.ts

@@ -0,0 +1,50 @@
+/*
+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 { _t } from "../languageHandler";
+import Notifier from "../Notifier";
+import GenericToast from "../components/views/toasts/GenericToast";
+import ToastStore from "../stores/ToastStore";
+
+const onAccept = () => {
+    Notifier.setEnabled(true);
+};
+
+const onReject = () => {
+    Notifier.setToolbarHidden(true);
+};
+
+const TOAST_KEY = "desktopnotifications";
+
+export const showToast = () => {
+    ToastStore.sharedInstance().addOrReplaceToast({
+        key: TOAST_KEY,
+        title: _t("Notifications"),
+        props: {
+            description: _t("You are not receiving desktop notifications"),
+            acceptLabel: _t("Enable them now"),
+            onAccept,
+            rejectLabel: _t("Close"),
+            onReject,
+        },
+        component: GenericToast,
+        priority: 20,
+    });
+};
+
+export const hideToast = () => {
+    ToastStore.sharedInstance().dismissToast(TOAST_KEY);
+};