= ({
+ isVerified,
+ isSelected,
+ deviceType,
+}) => (
+
{ /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
{
isVerified
?
:
diff --git a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
index 11e806e54e..127f5eedf6 100644
--- a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
+++ b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
@@ -21,11 +21,11 @@ import AccessibleButton from '../../elements/AccessibleButton';
import DeviceSecurityCard from './DeviceSecurityCard';
import {
DeviceSecurityVariation,
- DeviceWithVerification,
+ ExtendedDevice,
} from './types';
interface Props {
- device: DeviceWithVerification;
+ device: ExtendedDevice;
onVerifyDevice?: () => void;
}
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index baee4e1d0e..c2e8786052 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -17,6 +17,7 @@ limitations under the License.
import React, { ForwardedRef, forwardRef } from 'react';
import { IPusher } from 'matrix-js-sdk/src/@types/PushRules';
import { PUSHER_DEVICE_ID } from 'matrix-js-sdk/src/@types/event';
+import { LocalNotificationSettings } from 'matrix-js-sdk/src/@types/local_notifications';
import { _t } from '../../../../languageHandler';
import AccessibleButton from '../../elements/AccessibleButton';
@@ -24,35 +25,44 @@ import { FilterDropdown, FilterDropdownOption } from '../../elements/FilterDropd
import DeviceDetails from './DeviceDetails';
import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
import DeviceSecurityCard from './DeviceSecurityCard';
-import DeviceTile from './DeviceTile';
import {
filterDevicesBySecurityRecommendation,
INACTIVE_DEVICE_AGE_DAYS,
} from './filter';
+import SelectableDeviceTile from './SelectableDeviceTile';
import {
DevicesDictionary,
DeviceSecurityVariation,
- DeviceWithVerification,
+ ExtendedDevice,
} from './types';
import { DevicesState } from './useOwnDevices';
+import FilteredDeviceListHeader from './FilteredDeviceListHeader';
interface Props {
devices: DevicesDictionary;
pushers: IPusher[];
- expandedDeviceIds: DeviceWithVerification['device_id'][];
- signingOutDeviceIds: DeviceWithVerification['device_id'][];
+ localNotificationSettings: Map;
+ expandedDeviceIds: ExtendedDevice['device_id'][];
+ signingOutDeviceIds: ExtendedDevice['device_id'][];
+ selectedDeviceIds: ExtendedDevice['device_id'][];
filter?: DeviceSecurityVariation;
onFilterChange: (filter: DeviceSecurityVariation | undefined) => void;
- onDeviceExpandToggle: (deviceId: DeviceWithVerification['device_id']) => void;
- onSignOutDevices: (deviceIds: DeviceWithVerification['device_id'][]) => void;
+ onDeviceExpandToggle: (deviceId: ExtendedDevice['device_id']) => void;
+ onSignOutDevices: (deviceIds: ExtendedDevice['device_id'][]) => void;
saveDeviceName: DevicesState['saveDeviceName'];
- onRequestDeviceVerification?: (deviceId: DeviceWithVerification['device_id']) => void;
- setPusherEnabled: (deviceId: string, enabled: boolean) => Promise;
+ onRequestDeviceVerification?: (deviceId: ExtendedDevice['device_id']) => void;
+ setPushNotifications: (deviceId: string, enabled: boolean) => Promise;
+ setSelectedDeviceIds: (deviceIds: ExtendedDevice['device_id'][]) => void;
supportsMSC3881?: boolean | undefined;
}
+const isDeviceSelected = (
+ deviceId: ExtendedDevice['device_id'],
+ selectedDeviceIds: ExtendedDevice['device_id'][],
+) => selectedDeviceIds.includes(deviceId);
+
// devices without timestamp metadata should be sorted last
-const sortDevicesByLatestActivity = (left: DeviceWithVerification, right: DeviceWithVerification) =>
+const sortDevicesByLatestActivity = (left: ExtendedDevice, right: ExtendedDevice) =>
(right.last_seen_ts || 0) - (left.last_seen_ts || 0);
const getFilteredSortedDevices = (devices: DevicesDictionary, filter?: DeviceSecurityVariation) =>
@@ -139,46 +149,55 @@ const NoResults: React.FC = ({ filter, clearFilter }) =>
;
const DeviceListItem: React.FC<{
- device: DeviceWithVerification;
+ device: ExtendedDevice;
pusher?: IPusher | undefined;
+ localNotificationSettings?: LocalNotificationSettings | undefined;
isExpanded: boolean;
isSigningOut: boolean;
+ isSelected: boolean;
onDeviceExpandToggle: () => void;
onSignOutDevice: () => void;
saveDeviceName: (deviceName: string) => Promise
;
onRequestDeviceVerification?: () => void;
- setPusherEnabled: (deviceId: string, enabled: boolean) => Promise;
+ toggleSelected: () => void;
+ setPushNotifications: (deviceId: string, enabled: boolean) => Promise;
supportsMSC3881?: boolean | undefined;
}> = ({
device,
pusher,
+ localNotificationSettings,
isExpanded,
isSigningOut,
+ isSelected,
onDeviceExpandToggle,
onSignOutDevice,
saveDeviceName,
onRequestDeviceVerification,
- setPusherEnabled,
+ setPushNotifications,
+ toggleSelected,
supportsMSC3881,
}) =>
-
-
+
{
isExpanded &&
}
@@ -192,23 +211,35 @@ export const FilteredDeviceList =
forwardRef(({
devices,
pushers,
+ localNotificationSettings,
filter,
expandedDeviceIds,
signingOutDeviceIds,
+ selectedDeviceIds,
onFilterChange,
onDeviceExpandToggle,
saveDeviceName,
onSignOutDevices,
onRequestDeviceVerification,
- setPusherEnabled,
+ setPushNotifications,
+ setSelectedDeviceIds,
supportsMSC3881,
}: Props, ref: ForwardedRef) => {
const sortedDevices = getFilteredSortedDevices(devices, filter);
- function getPusherForDevice(device: DeviceWithVerification): IPusher | undefined {
+ function getPusherForDevice(device: ExtendedDevice): IPusher | undefined {
return pushers.find(pusher => pusher[PUSHER_DEVICE_ID.name] === device.device_id);
}
+ const toggleSelection = (deviceId: ExtendedDevice['device_id']): void => {
+ if (isDeviceSelected(deviceId, selectedDeviceIds)) {
+ // remove from selection
+ setSelectedDeviceIds(selectedDeviceIds.filter(id => id !== deviceId));
+ } else {
+ setSelectedDeviceIds([...selectedDeviceIds, deviceId]);
+ }
+ };
+
const options: FilterDropdownOption[] = [
{ id: ALL_FILTER_ID, label: _t('All') },
{
@@ -235,20 +266,50 @@ export const FilteredDeviceList =
onFilterChange(filterId === ALL_FILTER_ID ? undefined : filterId as DeviceSecurityVariation);
};
+ const isAllSelected = selectedDeviceIds.length >= sortedDevices.length;
+ const toggleSelectAll = () => {
+ if (isAllSelected) {
+ setSelectedDeviceIds([]);
+ } else {
+ setSelectedDeviceIds(sortedDevices.map(device => device.device_id));
+ }
+ };
+
return
-
-
- { _t('Sessions') }
-
-
- id='device-list-filter'
- label={_t('Filter devices')}
- value={filter || ALL_FILTER_ID}
- onOptionChange={onFilterOptionChange}
- options={options}
- selectedLabel={_t('Show')}
- />
-
+
+ { selectedDeviceIds.length
+ ? <>
+ onSignOutDevices(selectedDeviceIds)}
+ className='mx_FilteredDeviceList_headerButton'
+ >
+ { _t('Sign out') }
+
+ setSelectedDeviceIds([])}
+ className='mx_FilteredDeviceList_headerButton'
+ >
+ { _t('Cancel') }
+
+
+ :
+ id='device-list-filter'
+ label={_t('Filter devices')}
+ value={filter || ALL_FILTER_ID}
+ onOptionChange={onFilterOptionChange}
+ options={options}
+ selectedLabel={_t('Show')}
+ />
+ }
+
{ !!sortedDevices.length
?
:
onFilterChange(undefined)} />
@@ -258,8 +319,10 @@ export const FilteredDeviceList =
key={device.device_id}
device={device}
pusher={getPusherForDevice(device)}
+ localNotificationSettings={localNotificationSettings.get(device.device_id)}
isExpanded={expandedDeviceIds.includes(device.device_id)}
isSigningOut={signingOutDeviceIds.includes(device.device_id)}
+ isSelected={isDeviceSelected(device.device_id, selectedDeviceIds)}
onDeviceExpandToggle={() => onDeviceExpandToggle(device.device_id)}
onSignOutDevice={() => onSignOutDevices([device.device_id])}
saveDeviceName={(deviceName: string) => saveDeviceName(device.device_id, deviceName)}
@@ -268,7 +331,8 @@ export const FilteredDeviceList =
? () => onRequestDeviceVerification(device.device_id)
: undefined
}
- setPusherEnabled={setPusherEnabled}
+ setPushNotifications={setPushNotifications}
+ toggleSelected={() => toggleSelection(device.device_id)}
supportsMSC3881={supportsMSC3881}
/>,
) }
diff --git a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
new file mode 100644
index 0000000000..561431d12e
--- /dev/null
+++ b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
@@ -0,0 +1,63 @@
+/*
+Copyright 2022 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, { HTMLProps } from 'react';
+
+import { _t } from '../../../../languageHandler';
+import StyledCheckbox, { CheckboxStyle } from '../../elements/StyledCheckbox';
+import { Alignment } from '../../elements/Tooltip';
+import TooltipTarget from '../../elements/TooltipTarget';
+
+interface Props extends Omit, 'className'> {
+ selectedDeviceCount: number;
+ isAllSelected: boolean;
+ toggleSelectAll: () => void;
+ children?: React.ReactNode;
+}
+
+const FilteredDeviceListHeader: React.FC = ({
+ selectedDeviceCount,
+ isAllSelected,
+ toggleSelectAll,
+ children,
+ ...rest
+}) => {
+ const checkboxLabel = isAllSelected ? _t('Deselect all') : _t('Select all');
+ return
+
+
+
+
+ { selectedDeviceCount > 0
+ ? _t('%(selectedDeviceCount)s sessions selected', { selectedDeviceCount })
+ : _t('Sessions')
+ }
+
+ { children }
+
;
+};
+
+export default FilteredDeviceListHeader;
diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx
index 3132eba38a..ddeb2f2e2e 100644
--- a/src/components/views/settings/devices/SecurityRecommendations.tsx
+++ b/src/components/views/settings/devices/SecurityRecommendations.tsx
@@ -23,13 +23,13 @@ import DeviceSecurityCard from './DeviceSecurityCard';
import { filterDevicesBySecurityRecommendation, INACTIVE_DEVICE_AGE_DAYS } from './filter';
import {
DeviceSecurityVariation,
- DeviceWithVerification,
+ ExtendedDevice,
DevicesDictionary,
} from './types';
interface Props {
devices: DevicesDictionary;
- currentDeviceId: DeviceWithVerification['device_id'];
+ currentDeviceId: ExtendedDevice['device_id'];
goToFilteredList: (filter: DeviceSecurityVariation) => void;
}
@@ -38,7 +38,7 @@ const SecurityRecommendations: React.FC = ({
currentDeviceId,
goToFilteredList,
}) => {
- const devicesArray = Object.values(devices);
+ const devicesArray = Object.values(devices);
const unverifiedDevicesCount = filterDevicesBySecurityRecommendation(
devicesArray,
diff --git a/src/components/views/settings/devices/SelectableDeviceTile.tsx b/src/components/views/settings/devices/SelectableDeviceTile.tsx
index e232e5ff50..d784472a84 100644
--- a/src/components/views/settings/devices/SelectableDeviceTile.tsx
+++ b/src/components/views/settings/devices/SelectableDeviceTile.tsx
@@ -32,8 +32,9 @@ const SelectableDeviceTile: React.FC = ({ children, device, isSelected, o
onChange={onClick}
className='mx_SelectableDeviceTile_checkbox'
id={`device-tile-checkbox-${device.device_id}`}
+ data-testid={`device-tile-checkbox-${device.device_id}`}
/>
-
+
{ children }