Device manager - expandable session details in device list (PSG-644) (#9188)
* add expandable device details to session list * test device expansion in filtered list * test expanded device id management from sessionmanager tab * i18n * update snapshot * update snapshots * use css instead of br
This commit is contained in:
parent
fecc03289d
commit
e5fedfcd74
13 changed files with 155 additions and 12 deletions
|
@ -22,12 +22,21 @@ import SettingsSubsection from '../../shared/SettingsSubsection';
|
|||
import FilteredDeviceList from '../../devices/FilteredDeviceList';
|
||||
import CurrentDeviceSection from '../../devices/CurrentDeviceSection';
|
||||
import SecurityRecommendations from '../../devices/SecurityRecommendations';
|
||||
import { DeviceSecurityVariation } from '../../devices/types';
|
||||
import { DeviceSecurityVariation, DeviceWithVerification } from '../../devices/types';
|
||||
import SettingsTab from '../SettingsTab';
|
||||
|
||||
const SessionManagerTab: React.FC = () => {
|
||||
const { devices, currentDeviceId, isLoading } = useOwnDevices();
|
||||
const [filter, setFilter] = useState<DeviceSecurityVariation>();
|
||||
const [expandedDeviceIds, setExpandedDeviceIds] = useState([]);
|
||||
|
||||
const onDeviceExpandToggle = (deviceId: DeviceWithVerification['device_id']): void => {
|
||||
if (expandedDeviceIds.includes(deviceId)) {
|
||||
setExpandedDeviceIds(expandedDeviceIds.filter(id => id !== deviceId));
|
||||
} else {
|
||||
setExpandedDeviceIds([...expandedDeviceIds, deviceId]);
|
||||
}
|
||||
};
|
||||
|
||||
const { [currentDeviceId]: currentDevice, ...otherDevices } = devices;
|
||||
const shouldShowOtherSessions = Object.keys(otherDevices).length > 0;
|
||||
|
@ -51,7 +60,9 @@ const SessionManagerTab: React.FC = () => {
|
|||
<FilteredDeviceList
|
||||
devices={otherDevices}
|
||||
filter={filter}
|
||||
expandedDeviceIds={expandedDeviceIds}
|
||||
onFilterChange={setFilter}
|
||||
onDeviceExpandToggle={onDeviceExpandToggle}
|
||||
/>
|
||||
</SettingsSubsection>
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue