Device manager - select all devices (#9330)

* add device selection that does nothing

* multi select and sign out of sessions

* test multiple selection

* fix type after rebase

* select all sessions

src/components/views/settings/devices/FilteredDeviceList.tsx

@@ -266,8 +266,21 @@ 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 <div className='mx_FilteredDeviceList' ref={ref}>
-            <FilteredDeviceListHeader selectedDeviceCount={selectedDeviceIds.length}>
+            <FilteredDeviceListHeader
+                selectedDeviceCount={selectedDeviceIds.length}
+                isAllSelected={isAllSelected}
+                toggleSelectAll={toggleSelectAll}
+            >
                 { selectedDeviceIds.length
                     ? <>
                         <AccessibleButton

src/components/views/settings/devices/FilteredDeviceListHeader.tsx

@@ -17,18 +17,39 @@ 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<HTMLProps<HTMLDivElement>, 'className'> {
     selectedDeviceCount: number;
+    isAllSelected: boolean;
+    toggleSelectAll: () => void;
     children?: React.ReactNode;
 }
 
 const FilteredDeviceListHeader: React.FC<Props> = ({
     selectedDeviceCount,
+    isAllSelected,
+    toggleSelectAll,
     children,
     ...rest
 }) => {
+    const checkboxLabel = isAllSelected ? _t('Deselect all') : _t('Select all');
     return <div className='mx_FilteredDeviceListHeader' {...rest}>
+        <TooltipTarget
+            label={checkboxLabel}
+            alignment={Alignment.Top}
+        >
+            <StyledCheckbox
+                kind={CheckboxStyle.Solid}
+                checked={isAllSelected}
+                onChange={toggleSelectAll}
+                id='device-select-all-checkbox'
+                data-testid='device-select-all-checkbox'
+                aria-label={checkboxLabel}
+            />
+        </TooltipTarget>
         <span className='mx_FilteredDeviceListHeader_label'>
             { selectedDeviceCount > 0
                 ? _t('%(selectedDeviceCount)s sessions selected', { selectedDeviceCount })