feat: Add edit functionality to DeviceDetails (#670)

* feat: Add edit functionality to DeviceDetails

* ci: Format code

* add update call

* ci: Format code

* Fix type error

* ci: Format code

* Use mutation

* ci: Format code

* Update according to reviews

* Format

---------

Co-authored-by: Seam Bot <[email protected]>
Co-authored-by: Evan Sosenko <[email protected]>

Author: 3 people

assets/icons/edit.svg

@@ -6,6 +6,7 @@ import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceD
 import { NoiseSensorDeviceDetails } from 'lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js'
 import { ThermostatDeviceDetails } from 'lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
+import { useUpdateDeviceName } from 'lib/seam/devices/use-update-device-name.js'
 import { isLockDevice } from 'lib/seam/locks/lock-device.js'
 import { isNoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
 import { isThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
@@ -16,7 +17,6 @@ export interface DeviceDetailsProps extends CommonProps {
 }
 
 export const NestedDeviceDetails = withRequiredCommonProps(DeviceDetails)
-
 export interface NestedSpecificDeviceDetailsProps
   extends Required<Omit<CommonProps, 'onBack' | 'className'>> {
   onBack: (() => void) | undefined
@@ -42,6 +42,19 @@ export function DeviceDetails({
     device_id: deviceId,
   })
 
+  const { mutate: setDeviceName } = useUpdateDeviceName({
+    device_id: deviceId,
+  })
+
+  const updateDeviceName = (newName: string): void => {
+    if (device != null) {
+      setDeviceName({
+        device_id: device.device_id,
+        name: newName,
+      })
+    }
+  }
+
   if (device == null) {
     return null
   }
@@ -60,15 +73,33 @@ export function DeviceDetails({
   }
 
   if (isLockDevice(device)) {
-    return <LockDeviceDetails device={device} {...props} />
+    return (
+      <LockDeviceDetails
+        device={device}
+        onEditName={updateDeviceName}
+        {...props}
+      />
+    )
   }
 
   if (isThermostatDevice(device)) {
-    return <ThermostatDeviceDetails device={device} {...props} />
+    return (
+      <ThermostatDeviceDetails
+        device={device}
+        onEditName={updateDeviceName}
+        {...props}
+      />
+    )
   }
 
   if (isNoiseSensorDevice(device)) {
-    return <NoiseSensorDeviceDetails device={device} {...props} />
+    return (
+      <NoiseSensorDeviceDetails
+        device={device}
+        onEditName={updateDeviceName}
+        {...props}
+      />
+    )
   }
 
   return null

src/lib/icons/Edit.tsx

@@ -6,6 +6,7 @@ import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/Acces
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
 import type { LockDevice } from 'lib/seam/locks/lock-device.js'
 import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
@@ -19,6 +20,7 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 
 interface LockDeviceDetailsProps extends NestedSpecificDeviceDetailsProps {
   device: LockDevice
+  onEditName?: (newName: string) => void | Promise<void>
 }
 
 export function LockDeviceDetails({
@@ -33,6 +35,7 @@ export function LockDeviceDetails({
   disableConnectedAccountInformation,
   onBack,
   className,
+  onEditName,
 }: LockDeviceDetailsProps): JSX.Element | null {
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock()
@@ -95,7 +98,12 @@ export function LockDeviceDetails({
             </div>
             <div className='seam-info'>
               <span className='seam-label'>{t.device}</span>
-              <h4 className='seam-device-name'>{device.properties.name}</h4>
+              <SeamEditableDeviceName
+                tagName='h4'
+                value={device.properties.name}
+                className='seam-device-name'
+                onEdit={onEditName}
+              />
               <div className='seam-properties'>
                 <span className='seam-label'>{t.status}:</span>{' '}
                 <OnlineStatus device={device} />

src/lib/seam/components/DeviceDetails/DeviceDetails.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { SeamEditableDeviceName } from 'lib/seam/components/SeamEditableDeviceName/SeamEditableDeviceName.js'
 import type { NoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { NoiseLevelStatus } from 'lib/ui/device/NoiseLevelStatus.js'
@@ -18,6 +19,7 @@ type TabType = 'details' | 'activity'
 interface NoiseSensorDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
   device: NoiseSensorDevice
+  onEditName?: (newName: string) => void | Promise<void>
 }
 
 export function NoiseSensorDeviceDetails({
@@ -26,6 +28,7 @@ export function NoiseSensorDeviceDetails({
   disableResourceIds,
   onBack,
   className,
+  onEditName,
 }: NoiseSensorDeviceDetailsProps): JSX.Element | null {
   const [tab, setTab] = useState<TabType>('details')
 
@@ -45,7 +48,11 @@ export function NoiseSensorDeviceDetails({
               </div>
               <div className='seam-info'>
                 <span className='seam-label'>{t.noiseSensor}</span>
-                <h4 className='seam-device-name'>{device.properties.name}</h4>
+                <SeamEditableDeviceName
+                  onEdit={onEditName}
+                  tagName='h4'
+                  value={device.properties.name}
+                />
                 <div className='seam-properties'>
                   <span className='seam-label'>{t.status}:</span>{' '}
                   <OnlineStatus device={device} />

src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx

@@ -29,6 +29,7 @@ import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
 interface ThermostatDeviceDetailsProps
   extends NestedSpecificDeviceDetailsProps {
   device: ThermostatDevice
+  onEditName?: (newName: string) => void | Promise<void>
 }
 
 export function ThermostatDeviceDetails({
@@ -37,6 +38,7 @@ export function ThermostatDeviceDetails({
   disableConnectedAccountInformation,
   onBack,
   className,
+  onEditName,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
   if (device == null) {
     return null
@@ -47,7 +49,7 @@ export function ThermostatDeviceDetails({
       <ContentHeader title={t.thermostat} onBack={onBack} />
 
       <div className='seam-body'>
-        <ThermostatCard device={device} />
+        <ThermostatCard device={device} onEditName={onEditName} />
 
         <div className='seam-thermostat-device-details'>
           <DetailSectionGroup>