Add button for requesting notification permission

ui/src/index.tsx

@@ -14,7 +14,6 @@ import {UserStore} from './user/UserStore';
 import {MessagesStore} from './message/MessagesStore';
 import {ClientStore} from './client/ClientStore';
 import {PluginStore} from './plugin/PluginStore';
-import * as Notifications from './snack/browserNotification';
 import {registerReactions} from './reactions';
 
 const defaultDevConfig = {
@@ -62,7 +61,6 @@ const initStores = (): StoreMapping => {
 };
 
 (function clientJS() {
-    Notifications.requestPermission();
     if (process.env.NODE_ENV === 'production') {
         config.set(window.config || defaultProdConfig);
     } else {

ui/src/layout/Navigation.tsx

@@ -7,6 +7,8 @@ import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
 import {observer} from 'mobx-react';
 import {inject, Stores} from '../inject';
+import {mayAllowPermission, requestPermission} from '../snack/browserNotification';
+import {Button, Typography} from '@material-ui/core';
 
 const styles = (theme: Theme): StyleRules<'drawerPaper' | 'toolbar' | 'link'> => ({
     drawerPaper: {
@@ -29,9 +31,15 @@ interface IProps {
 }
 
 @observer
-class Navigation extends Component<IProps & Styles & Stores<'appStore'>> {
+class Navigation extends Component<
+    IProps & Styles & Stores<'appStore'>,
+    {showRequestNotification: boolean}
+> {
+    public state = {showRequestNotification: mayAllowPermission()};
+
     public render() {
         const {classes, loggedIn, appStore} = this.props;
+        const {showRequestNotification} = this.state;
         const apps = appStore.getItems();
 
         const userApps =
@@ -73,6 +81,17 @@ class Navigation extends Component<IProps & Styles & Stores<'appStore'>> {
                 <Divider />
                 <div>{loggedIn ? userApps : placeholderItems}</div>
                 <Divider />
+                <Typography align="center" style={{marginTop: 10}}>
+                    {showRequestNotification ? (
+                        <Button
+                            onClick={() => {
+                                requestPermission();
+                                this.setState({showRequestNotification: false});
+                            }}>
+                            Enable Notifications
+                        </Button>
+                    ) : null}
+                </Typography>
             </Drawer>
         );
     }

ui/src/snack/browserNotification.ts

@@ -2,6 +2,10 @@ import Notify from 'notifyjs';
 import removeMarkdown from 'remove-markdown';
 import {IMessage} from '../types';
 
+export function mayAllowPermission(): boolean {
+    return Notify.needsPermission && Notify.isSupported() && Notification.permission !== 'denied';
+}
+
 export function requestPermission() {
     if (Notify.needsPermission && Notify.isSupported()) {
         Notify.requestPermission(