Merge pull request #623 from seamapi/disableConnectedAccountInformation

Add disableConnectedAccountInformation

Author: razor-x

src/lib/element.tsx

@@ -46,6 +46,7 @@ const commonProps: R2wcProps<CommonProps> = {
   disableEditAccessCode: 'boolean',
   disableDeleteAccessCode: 'boolean',
   disableResourceIds: 'boolean',
+  disableConnectedAccountInformation: 'boolean',
   disableClimateSettingSchedules: 'boolean',
   onBack: 'object',
   className: 'string',

src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx

@@ -42,6 +42,7 @@ export function AccessCodeDetails({
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableConnectedAccountInformation = false,
   disableClimateSettingSchedules,
   onBack,
   className,
@@ -69,6 +70,7 @@ export function AccessCodeDetails({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           selectDevice(null)

src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -83,6 +83,7 @@ export function AccessCodeTable({
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableConnectedAccountInformation = false,
   disableClimateSettingSchedules,
 }: AccessCodeTableProps): JSX.Element {
   useComponentTelemetry('AccessCodeTable')
@@ -147,6 +148,7 @@ export function AccessCodeTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setSelectedEditAccessCodeId(null)
@@ -183,6 +185,9 @@ export function AccessCodeTable({
           disableEditAccessCode={disableEditAccessCode}
           disableDeleteAccessCode={disableDeleteAccessCode}
           disableResourceIds={disableResourceIds}
+          disableConnectedAccountInformation={
+            disableConnectedAccountInformation
+          }
           disableClimateSettingSchedules={disableClimateSettingSchedules}
           onBack={() => {
             setSelectedViewAccessCodeId(null)
@@ -204,6 +209,7 @@ export function AccessCodeTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={toggleAddAccessCodeForm}
         className={className}

src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.tsx

@@ -40,6 +40,7 @@ export function ClimateSettingScheduleDetails({
   disableCreateAccessCode,
   disableEditAccessCode,
   disableResourceIds = false,
+  disableConnectedAccountInformation = false,
   disableClimateSettingSchedules,
 }: ClimateSettingScheduleDetailsProps): JSX.Element | null {
   useComponentTelemetry('ClimateSettingScheduleDetails')
@@ -70,6 +71,7 @@ export function ClimateSettingScheduleDetails({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           selectDevice(null)

src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.tsx

@@ -71,6 +71,7 @@ export function ClimateSettingScheduleTable({
   disableCreateAccessCode,
   disableEditAccessCode,
   disableResourceIds = false,
+  disableConnectedAccountInformation = false,
   disableClimateSettingSchedules,
 }: ClimateSettingScheduleTableProps): JSX.Element {
   useComponentTelemetry('ClimateSettingScheduleTable')
@@ -125,6 +126,7 @@ export function ClimateSettingScheduleTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setSelectedViewClimateSettingScheduleId(null)

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

@@ -15,11 +15,20 @@ export interface DeviceDetailsProps extends CommonProps {
 
 export const NestedDeviceDetails = withRequiredCommonProps(DeviceDetails)
 
+export interface NestedSpecificDeviceDetailsProps
+  extends Required<Omit<CommonProps, 'onBack' | 'className'>> {
+  onBack: (() => void) | undefined
+  className: string | undefined
+}
+
 export function DeviceDetails({
   deviceId,
+  errorFilter = () => true,
+  warningFilter = () => true,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableConnectedAccountInformation = false,
   disableCreateAccessCode = false,
   disableEditAccessCode = false,
   disableClimateSettingSchedules = false,
@@ -36,10 +45,13 @@ export function DeviceDetails({
     return null
   }
 
-  const props: Omit<DeviceDetailsProps, 'deviceId'> = {
+  const props: NestedSpecificDeviceDetailsProps = {
+    errorFilter,
+    warningFilter,
     disableLockUnlock,
     disableDeleteAccessCode,
     disableResourceIds,
+    disableConnectedAccountInformation,
     disableCreateAccessCode,
     disableEditAccessCode,
     disableClimateSettingSchedules,

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

@@ -0,0 +1,54 @@
+import type { CommonDevice } from 'seamapi'
+
+import { BeeIcon } from 'lib/icons/Bee.js'
+import type { CommonProps } from 'lib/seam/components/common-props.js'
+import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
+import { DetailRow } from 'lib/ui/layout/DetailRow.js'
+import { DetailSection } from 'lib/ui/layout/DetailSection.js'
+
+interface DeviceInfoProps
+  extends Required<
+    Pick<
+      CommonProps,
+      'disableConnectedAccountInformation' | 'disableResourceIds'
+    >
+  > {
+  device: CommonDevice
+}
+
+export function DeviceInfo({
+  device,
+  disableConnectedAccountInformation,
+  disableResourceIds,
+}: DeviceInfoProps): JSX.Element | null {
+  const { connectedAccount } = useConnectedAccount(device.connected_account_id)
+  return (
+    <DetailSection label={t.deviceInfo}>
+      <DetailRow label={t.manufacturer}>
+        <div className='seam-detail-row-hstack'>
+          {device.properties.model.manufacturer_display_name}
+          {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
+        </div>
+      </DetailRow>
+      {!disableConnectedAccountInformation && (
+        <DetailRow
+          label={t.linkedAccount}
+          sublabel={
+            connectedAccount?.user_identifier?.email ??
+            device.connected_account_id
+          }
+        />
+      )}
+      {!disableResourceIds && (
+        <DetailRow label={t.deviceId} sublabel={device.device_id} />
+      )}
+    </DetailSection>
+  )
+}
+
+const t = {
+  deviceInfo: 'Device info',
+  manufacturer: 'Manufacturer',
+  linkedAccount: 'Linked account',
+  deviceId: 'Device ID',
+}

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

@@ -4,7 +4,8 @@ import type { LockDevice } from 'seamapi'
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/AccessCodeTable.js'
-import type { CommonProps } from 'lib/seam/components/common-props.js'
+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 { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
@@ -16,27 +17,24 @@ import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
-interface LockDeviceDetailsProps extends CommonProps {
+interface LockDeviceDetailsProps extends NestedSpecificDeviceDetailsProps {
   device: LockDevice
 }
 
-export function LockDeviceDetails(
-  props: LockDeviceDetailsProps
-): JSX.Element | null {
-  const {
-    device,
-    errorFilter = () => true,
-    warningFilter = () => true,
-    disableLockUnlock,
-    disableCreateAccessCode,
-    disableEditAccessCode,
-    disableDeleteAccessCode,
-    disableResourceIds,
-    disableClimateSettingSchedules,
-    onBack,
-    className,
-  } = props
-
+export function LockDeviceDetails({
+  device,
+  errorFilter,
+  warningFilter,
+  disableLockUnlock,
+  disableCreateAccessCode,
+  disableEditAccessCode,
+  disableDeleteAccessCode,
+  disableResourceIds,
+  disableConnectedAccountInformation,
+  disableClimateSettingSchedules,
+  onBack,
+  className,
+}: LockDeviceDetailsProps): JSX.Element | null {
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock(device)
   const { accessCodes } = useAccessCodes({
@@ -63,6 +61,7 @@ export function LockDeviceDetails(
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={toggleAccessCodesOpen}
         className={className}
@@ -129,7 +128,7 @@ export function LockDeviceDetails(
               <span className='seam-value'>{lockStatus}</span>
             </div>
             <div className='seam-right'>
-              {disableLockUnlock !== true &&
+              {!disableLockUnlock &&
                 device.capabilities_supported.includes('lock') && (
                   <Button
                     size='small'
@@ -148,6 +147,13 @@ export function LockDeviceDetails(
             }
           />
         </div>
+        <DeviceInfo
+          device={device}
+          disableConnectedAccountInformation={
+            disableConnectedAccountInformation
+          }
+          disableResourceIds={disableResourceIds}
+        />
       </div>
     </div>
   )

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

@@ -3,12 +3,11 @@ import { useEffect, useState } from 'react'
 import type { HvacModeSetting, ThermostatDevice } from 'seamapi'
 
 import { debounce } from 'lib/debounce.js'
-import { BeeIcon } from 'lib/icons/Bee.js'
 import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { NestedClimateSettingScheduleTable } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js'
-import type { CommonProps } from 'lib/seam/components/common-props.js'
-import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
+import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
 import { useCoolThermostat } from 'lib/seam/thermostats/use-cool-thermostat.js'
 import { useHeatCoolThermostat } from 'lib/seam/thermostats/use-heat-cool-thermostat.js'
@@ -30,27 +29,27 @@ import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
 import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
 import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
 
-interface ThermostatDeviceDetailsProps extends CommonProps {
+interface ThermostatDeviceDetailsProps
+  extends NestedSpecificDeviceDetailsProps {
   device: ThermostatDevice
 }
 
 export function ThermostatDeviceDetails({
   device,
-  onBack,
-  className,
-  errorFilter = () => true,
-  warningFilter = () => true,
+  errorFilter,
+  warningFilter,
   disableLockUnlock,
   disableCreateAccessCode,
   disableEditAccessCode,
   disableDeleteAccessCode,
-  disableResourceIds = false,
-  disableClimateSettingSchedules = false,
+  disableResourceIds,
+  disableConnectedAccountInformation,
+  disableClimateSettingSchedules,
+  onBack,
+  className,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
   const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)
 
-  const { connectedAccount } = useConnectedAccount(device.connected_account_id)
-
   const { climateSettingSchedules } = useClimateSettingSchedules({
     device_id: device.device_id,
   })
@@ -66,6 +65,7 @@ export function ThermostatDeviceDetails({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setClimateSettingsOpen(false)
@@ -143,25 +143,13 @@ export function ThermostatDeviceDetails({
                 <ManualOverrideRow device={device} />
               </DetailSection>
             )}
-
-            <DetailSection label={t.deviceDetails}>
-              <DetailRow label={t.manufacturer}>
-                <div className='seam-detail-row-hstack'>
-                  {device.properties.model.manufacturer_display_name}
-                  {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
-                </div>
-              </DetailRow>
-              <DetailRow
-                label={t.linkedAccount}
-                sublabel={
-                  connectedAccount?.user_identifier?.email ??
-                  device.connected_account_id
-                }
-              />
-              {!disableResourceIds && (
-                <DetailRow label={t.deviceId} sublabel={device.device_id} />
-              )}
-            </DetailSection>
+            <DeviceInfo
+              device={device}
+              disableConnectedAccountInformation={
+                disableConnectedAccountInformation
+              }
+              disableResourceIds={disableResourceIds}
+            />
           </DetailSectionGroup>
         </div>
       </div>
@@ -455,10 +443,6 @@ const t = {
     'When a scheduled climate reaches its end time, the default settings will kick in.',
   defaultClimate: 'Default climate',
   allowManualOverride: 'Allow manual override',
-  deviceDetails: 'Device details',
-  manufacturer: 'Manufacturer',
-  linkedAccount: 'Linked account',
-  deviceId: 'Device ID',
   none: 'None',
   fanModeSuccess: 'Successfully updated fan mode!',
   fanModeError: 'Error updating fan mode. Please try again.',

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

@@ -69,6 +69,7 @@ export function DeviceTable({
   disableEditAccessCode = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableConnectedAccountInformation = false,
   disableClimateSettingSchedules = false,
   onBack,
   className,
@@ -112,6 +113,7 @@ export function DeviceTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setSelectedDeviceId(null)