diff --git a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
index a871b08049..d60c9628fb 100644
--- a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
+++ b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
@@ -25,7 +25,7 @@ limitations under the License.
display: grid;
grid-gap: $spacing-16;
margin: 0;
- padding: 0 $spacing-8;
+ padding: 0 $spacing-16;
}
.mx_FilteredDeviceList_listItem {
diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx
index 6d6668a854..4cf7ac1a63 100644
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/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
-
+
{ selectedDeviceIds.length
? <>
, '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 })
diff --git a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx b/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
index 8f7ecdc924..49e8d9a861 100644
--- a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
+++ b/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import FilteredDeviceListHeader from '../../../../../src/components/views/settings/devices/FilteredDeviceListHeader';
@@ -22,6 +22,8 @@ import FilteredDeviceListHeader from '../../../../../src/components/views/settin
describe('', () => {
const defaultProps = {
selectedDeviceCount: 0,
+ isAllSelected: false,
+ toggleSelectAll: jest.fn(),
children: test
,
['data-testid']: 'test123',
};
@@ -32,8 +34,21 @@ describe('', () => {
expect(container).toMatchSnapshot();
});
+ it('renders correctly when all devices are selected', () => {
+ const { container } = render(getComponent({ isAllSelected: true }));
+ expect(container).toMatchSnapshot();
+ });
+
it('renders correctly when some devices are selected', () => {
const { getByText } = render(getComponent({ selectedDeviceCount: 2 }));
expect(getByText('2 sessions selected')).toBeTruthy();
});
+
+ it('clicking checkbox toggles selection', () => {
+ const toggleSelectAll = jest.fn();
+ const { getByTestId } = render(getComponent({ toggleSelectAll }));
+ fireEvent.click(getByTestId('device-select-all-checkbox'));
+
+ expect(toggleSelectAll).toHaveBeenCalled();
+ });
});
diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index f474cca811..b8b2330ce9 100644
--- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
@@ -1,11 +1,80 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` renders correctly when no devices are selected 1`] = `
+exports[` renders correctly when all devices are selected 1`] = `
+
+`;
+
+exports[` renders correctly when no devices are selected 1`] = `
+
+