diff --git a/.storybook/seed-fake.js b/.storybook/seed-fake.js index 392111d85..a65afe118 100644 --- a/.storybook/seed-fake.js +++ b/.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: [], }) diff --git a/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx index 729887d0b..1a6fbb7d8 100644 --- a/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx +++ b/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames' import type { NoiseSensorDevice } from 'seamapi' import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js' @@ -5,6 +6,7 @@ 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 ( -
+
+ +
diff --git a/src/lib/seam/components/DeviceTable/DeviceTable.tsx b/src/lib/seam/components/DeviceTable/DeviceTable.tsx index 6dbccb32d..01bfcb58a 100644 --- a/src/lib/seam/components/DeviceTable/DeviceTable.tsx +++ b/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]