[Glitch] Add button to dismiss desktop notifications permissions banner

Port 4790a126be to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

app/javascript/flavours/glitch/actions/notifications.js

@@ -50,8 +50,9 @@ export const NOTIFICATIONS_SET_VISIBILITY = 'NOTIFICATIONS_SET_VISIBILITY';
 
 export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';
 
-export const NOTIFICATIONS_SET_BROWSER_SUPPORT    = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
-export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
+export const NOTIFICATIONS_SET_BROWSER_SUPPORT        = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
+export const NOTIFICATIONS_SET_BROWSER_PERMISSION     = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
+export const NOTIFICATIONS_DISMISS_BROWSER_PERMISSION = 'NOTIFICATIONS_DISMISS_BROWSER_PERMISSION';
 
 defineMessages({
   mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
@@ -371,3 +372,7 @@ export function setBrowserPermission (value) {
     value,
   };
 }
+
+export const dismissBrowserPermission = () => ({
+  type: NOTIFICATIONS_DISMISS_BROWSER_PERMISSION,
+});

app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.js

@@ -1,25 +1,42 @@
 import React from 'react';
 import Icon from 'flavours/glitch/components/icon';
 import Button from 'flavours/glitch/components/button';
-import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
+import IconButton from 'flavours/glitch/components/icon_button';
+import { requestBrowserPermission, dismissBrowserPermission } from 'flavours/glitch/actions/notifications';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
-export default @connect(() => {})
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+export default @connect()
+@injectIntl
 class NotificationsPermissionBanner extends React.PureComponent {
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
   };
 
   handleClick = () => {
     this.props.dispatch(requestBrowserPermission());
   }
 
+  handleClose = () => {
+    this.props.dispatch(dismissBrowserPermission());
+  }
+
   render () {
+    const { intl } = this.props;
+
     return (
       <div className='notifications-permission-banner'>
+        <div className='notifications-permission-banner__close'>
+          <IconButton icon='times' onClick={this.handleClose} title={intl.formatMessage(messages.close)} />
+        </div>
+
         <h2><FormattedMessage id='notifications_permission_banner.title' defaultMessage='Never miss a thing' /></h2>
         <p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders' /> }} /></p>
         <Button onClick={this.handleClick}><FormattedMessage id='notifications_permission_banner.enable' defaultMessage='Enable desktop notifications' /></Button>

app/javascript/flavours/glitch/features/picture_in_picture/components/header.js

@@ -7,12 +7,18 @@ import IconButton from 'flavours/glitch/components/icon_button';
 import { Link } from 'react-router-dom';
 import Avatar from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
 
 const mapStateToProps = (state, { accountId }) => ({
   account: state.getIn(['accounts', accountId]),
 });
 
 export default @connect(mapStateToProps)
+@injectIntl
 class Header extends ImmutablePureComponent {
 
   static propTypes = {
@@ -20,10 +26,11 @@ class Header extends ImmutablePureComponent {
     statusId: PropTypes.string.isRequired,
     account: ImmutablePropTypes.map.isRequired,
     onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
   };
 
   render () {
-    const { account, statusId, onClose } = this.props;
+    const { account, statusId, onClose, intl } = this.props;
 
     return (
       <div className='picture-in-picture__header'>
@@ -32,7 +39,7 @@ class Header extends ImmutablePureComponent {
           <DisplayName account={account} />
         </Link>
 
-        <IconButton icon='times' onClick={onClose} title='Close' />
+        <IconButton icon='times' onClick={onClose} title={intl.formatMessage(messages.close)} />
       </div>
     );
   }

app/javascript/flavours/glitch/reducers/notifications.js

@@ -19,6 +19,7 @@ import {
   NOTIFICATIONS_MARK_AS_READ,
   NOTIFICATIONS_SET_BROWSER_SUPPORT,
   NOTIFICATIONS_SET_BROWSER_PERMISSION,
+  NOTIFICATIONS_DISMISS_BROWSER_PERMISSION,
 } from 'flavours/glitch/actions/notifications';
 import {
   ACCOUNT_BLOCK_SUCCESS,
@@ -283,6 +284,8 @@ export default function notifications(state = initialState, action) {
     return state.set('browserSupport', action.value);
   case NOTIFICATIONS_SET_BROWSER_PERMISSION:
     return state.set('browserPermission', action.value);
+  case NOTIFICATIONS_DISMISS_BROWSER_PERMISSION:
+    return state.set('browserPermission', 'denied');
 
   case NOTIFICATION_MARK_FOR_DELETE:
     return markForDelete(state, action.id, action.yes);

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -702,6 +702,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
+
+  &__close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
 
   h2 {
     font-size: 16px;