Device manager - extract filtered device list header (#9323)

* extract filtered device list header

* stylelint

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

@@ -36,6 +36,7 @@ import {
     DeviceWithVerification,
 } from './types';
 import { DevicesState } from './useOwnDevices';
+import FilteredDeviceListHeader from './FilteredDeviceListHeader';
 
 interface Props {
     devices: DevicesDictionary;
@@ -242,10 +243,7 @@ export const FilteredDeviceList =
         };
 
         return <div className='mx_FilteredDeviceList' ref={ref}>
-            <div className='mx_FilteredDeviceList_header'>
-                <span className='mx_FilteredDeviceList_headerLabel'>
-                    { _t('Sessions') }
-                </span>
+            <FilteredDeviceListHeader selectedDeviceCount={0}>
                 <FilterDropdown<DeviceFilterKey>
                     id='device-list-filter'
                     label={_t('Filter devices')}
@@ -254,7 +252,7 @@ export const FilteredDeviceList =
                     options={options}
                     selectedLabel={_t('Show')}
                 />
-            </div>
+            </FilteredDeviceListHeader>
             { !!sortedDevices.length
                 ? <FilterSecurityCard filter={filter} />
                 : <NoResults filter={filter} clearFilter={() => onFilterChange(undefined)} />

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

@@ -0,0 +1,42 @@
+/*
+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';
+
+interface Props extends Omit<HTMLProps<HTMLDivElement>, 'className'> {
+    selectedDeviceCount: number;
+    children?: React.ReactNode;
+}
+
+const FilteredDeviceListHeader: React.FC<Props> = ({
+    selectedDeviceCount,
+    children,
+    ...rest
+}) => {
+    return <div className='mx_FilteredDeviceListHeader' {...rest}>
+        <span className='mx_FilteredDeviceListHeader_label'>
+            { selectedDeviceCount > 0
+                ? _t('%(selectedDeviceCount)s sessions selected', { selectedDeviceCount })
+                : _t('Sessions')
+            }
+        </span>
+        { children }
+    </div>;
+};
+
+export default FilteredDeviceListHeader;

src/i18n/strings/en_EN.json

@@ -1753,6 +1753,7 @@
     "Inactive for %(inactiveAgeDays)s days or longer": "Inactive for %(inactiveAgeDays)s days or longer",
     "Filter devices": "Filter devices",
     "Show": "Show",
+    "%(selectedDeviceCount)s sessions selected": "%(selectedDeviceCount)s sessions selected",
     "Security recommendations": "Security recommendations",
     "Improve your account security by following these recommendations": "Improve your account security by following these recommendations",
     "View all": "View all",