Device manager - rename session (PSG-528) (#9282)

* split heading into component

* switch between editing and view

* style file

* basic tests

* style device rename component

* add loading state

* kind of handle missing current device in drilled props

* use local loading state, add basic error message

* integration-ish test rename

* tidy

* fussy import ordering

* strict errors

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -88,9 +88,10 @@ const SessionManagerTab: React.FC = () => {
     const {
         devices,
         currentDeviceId,
-        isLoading,
+        isLoadingDeviceList,
         requestDeviceVerification,
         refreshDevices,
+        saveDeviceName,
     } = useOwnDevices();
     const [filter, setFilter] = useState<DeviceSecurityVariation>();
     const [expandedDeviceIds, setExpandedDeviceIds] = useState<DeviceWithVerification['device_id'][]>([]);
@@ -167,8 +168,9 @@ const SessionManagerTab: React.FC = () => {
         />
         <CurrentDeviceSection
             device={currentDevice}
-            isLoading={isLoading}
             isSigningOut={signingOutDeviceIds.includes(currentDevice?.device_id)}
+            isLoading={isLoadingDeviceList}
+            saveDeviceName={(deviceName) => saveDeviceName(currentDevice?.device_id, deviceName)}
             onVerifyCurrentDevice={onVerifyCurrentDevice}
             onSignOutCurrentDevice={onSignOutCurrentDevice}
         />
@@ -191,6 +193,7 @@ const SessionManagerTab: React.FC = () => {
                     onDeviceExpandToggle={onDeviceExpandToggle}
                     onRequestDeviceVerification={requestDeviceVerification ? onTriggerDeviceVerification : undefined}
                     onSignOutDevices={onSignOutOtherDevices}
+                    saveDeviceName={saveDeviceName}
                     ref={filteredDeviceListRef}
                 />
             </SettingsSubsection>