feat: Add Noise Sensors to DeviceTable (#630)

* feat: Add Noise Sensors to `DeviceTable`

* ci: Format code

* Add `ContentHeader`

* ci: Format code

* Add `image_url`

---------

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

Author: xplato

.storybook/seed-fake.js

@@ -480,6 +480,8 @@ export const seedFake = (db) => {
         manufacturer_display_name: 'NoiseAware',
         display_name: 'Indoor Sensor',
       },
+      image_url:
+        'https://connect.getseam.com/assets/images/devices/noiseaware_indoor_sensor_front.png',
     },
     errors: [],
   })

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

@@ -1,10 +1,12 @@
+import classNames from 'classnames'
 import type { NoiseSensorDevice } from 'seamapi'
 
 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 { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
 
 interface NoiseSensorDeviceDetailsProps
@@ -16,9 +18,13 @@ export function NoiseSensorDeviceDetails({
   device,
   disableConnectedAccountInformation,
   disableResourceIds,
+  onBack,
+  className,
 }: NoiseSensorDeviceDetailsProps): JSX.Element | null {
   return (
-    <div className='seam-device-details'>
+    <div className={classNames('seam-device-details', className)}>
+      <ContentHeader title={t.noiseSensor} onBack={onBack} />
+
       <div className='seam-body'>
         <div className='seam-summary'>
           <div className='seam-content'>

src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -1,6 +1,11 @@
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
-import { type CommonDevice, isLockDevice, isThermostatDevice } from 'seamapi'
+import {
+  type CommonDevice,
+  isLockDevice,
+  isNoiseSensorDevice,
+  isThermostatDevice,
+} from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import {
@@ -87,7 +92,12 @@ export function DeviceTable({
   const filteredDevices = useMemo(
     () =>
       devices
-        ?.filter((device) => isLockDevice(device) || isThermostatDevice(device))
+        ?.filter(
+          (device) =>
+            isLockDevice(device) ||
+            isThermostatDevice(device) ||
+            isNoiseSensorDevice(device)
+        )
         ?.filter((device) => deviceFilter(device, searchInputValue))
         ?.sort(deviceComparator) ?? [],
     [devices, searchInputValue, deviceFilter, deviceComparator]