Implement push notification toggle in device detail (#9308)
Co-authored-by: Travis Ralston <travisr@matrix.org>
This commit is contained in:
parent
ace6591f43
commit
641cf28e4c
13 changed files with 269 additions and 3 deletions
|
@ -15,21 +15,27 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { IPusher } from 'matrix-js-sdk/src/@types/PushRules';
|
||||
import { PUSHER_ENABLED } from 'matrix-js-sdk/src/@types/event';
|
||||
|
||||
import { formatDate } from '../../../../DateUtils';
|
||||
import { _t } from '../../../../languageHandler';
|
||||
import AccessibleButton from '../../elements/AccessibleButton';
|
||||
import Spinner from '../../elements/Spinner';
|
||||
import ToggleSwitch from '../../elements/ToggleSwitch';
|
||||
import { DeviceDetailHeading } from './DeviceDetailHeading';
|
||||
import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
|
||||
import { DeviceWithVerification } from './types';
|
||||
|
||||
interface Props {
|
||||
device: DeviceWithVerification;
|
||||
pusher?: IPusher | undefined;
|
||||
isSigningOut: boolean;
|
||||
onVerifyDevice?: () => void;
|
||||
onSignOutDevice: () => void;
|
||||
saveDeviceName: (deviceName: string) => Promise<void>;
|
||||
setPusherEnabled?: (deviceId: string, enabled: boolean) => Promise<void> | undefined;
|
||||
supportsMSC3881?: boolean | undefined;
|
||||
}
|
||||
|
||||
interface MetadataTable {
|
||||
|
@ -39,10 +45,13 @@ interface MetadataTable {
|
|||
|
||||
const DeviceDetails: React.FC<Props> = ({
|
||||
device,
|
||||
pusher,
|
||||
isSigningOut,
|
||||
onVerifyDevice,
|
||||
onSignOutDevice,
|
||||
saveDeviceName,
|
||||
setPusherEnabled,
|
||||
supportsMSC3881,
|
||||
}) => {
|
||||
const metadata: MetadataTable[] = [
|
||||
{
|
||||
|
@ -93,6 +102,28 @@ const DeviceDetails: React.FC<Props> = ({
|
|||
</table>,
|
||||
) }
|
||||
</section>
|
||||
{ pusher && (
|
||||
<section
|
||||
className='mx_DeviceDetails_section mx_DeviceDetails_pushNotifications'
|
||||
data-testid='device-detail-push-notification'
|
||||
>
|
||||
<ToggleSwitch
|
||||
// For backwards compatibility, if `enabled` is missing
|
||||
// default to `true`
|
||||
checked={pusher?.[PUSHER_ENABLED.name] ?? true}
|
||||
disabled={!supportsMSC3881}
|
||||
onChange={(checked) => setPusherEnabled?.(device.device_id, checked)}
|
||||
aria-label={_t("Toggle push notifications on this session.")}
|
||||
data-testid='device-detail-push-notification-checkbox'
|
||||
/>
|
||||
<p className='mx_DeviceDetails_sectionHeading'>
|
||||
{ _t('Push notifications') }
|
||||
<small className='mx_DeviceDetails_sectionSubheading'>
|
||||
{ _t('Receive push notifications on this session.') }
|
||||
</small>
|
||||
</p>
|
||||
</section>
|
||||
) }
|
||||
<section className='mx_DeviceDetails_section'>
|
||||
<AccessibleButton
|
||||
onClick={onSignOutDevice}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue