Add hideAccessCodes flag to device table (#583)

* disable access codes

* ci: Format code

* no show access codes

* ci: Format code

* typechecks

* ci: Format code

---------

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

Author: Andrewjeska

src/lib/seam/components/DeviceDetails/DeviceDetails.element.ts

@@ -6,6 +6,7 @@ export const name = 'seam-device-details'
 
 export const props: ElementProps<DeviceDetailsProps> = {
   deviceId: 'string',
+  hideAccessCodes: 'boolean',
 }
 
 export { DeviceDetails as Component } from './DeviceDetails.js'

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

@@ -12,6 +12,7 @@ import { useDevice } from 'lib/seam/devices/use-device.js'
 
 export interface DeviceDetailsProps extends CommonProps {
   deviceId: string
+  hideAccessCodes?: boolean
 }
 
 export const NestedDeviceDetails = withRequiredCommonProps(DeviceDetails)
@@ -21,6 +22,7 @@ export function DeviceDetails({
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  hideAccessCodes = false,
   onBack,
   className,
 }: DeviceDetailsProps): JSX.Element | null {
@@ -38,6 +40,7 @@ export function DeviceDetails({
     disableLockUnlock,
     disableDeleteAccessCode,
     disableResourceIds,
+    hideAccessCodes,
     onBack,
     className,
   }

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

@@ -18,6 +18,7 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 
 interface LockDeviceDetailsProps extends CommonProps {
   device: LockDevice
+  hideAccessCodes?: boolean
 }
 
 export function LockDeviceDetails(
@@ -32,6 +33,7 @@ export function LockDeviceDetails(
     disableEditAccessCode,
     disableDeleteAccessCode,
     disableResourceIds,
+    hideAccessCodes,
     onBack,
     className,
   } = props
@@ -108,17 +110,19 @@ export function LockDeviceDetails(
           </div>
           <Alerts alerts={alerts} className='seam-alerts-space-top' />
         </div>
-        <div className='seam-box'>
-          <div
-            className='seam-content seam-access-codes'
-            onClick={toggleAccessCodesOpen}
-          >
-            <span className='seam-value'>
-              {accessCodeCount} {t.accessCodes}
-            </span>
-            <ChevronRightIcon />
+        {hideAccessCodes !== true && (
+          <div className='seam-box'>
+            <div
+              className='seam-content seam-access-codes'
+              onClick={toggleAccessCodesOpen}
+            >
+              <span className='seam-value'>
+                {accessCodeCount} {t.accessCodes}
+              </span>
+              <ChevronRightIcon />
+            </div>
           </div>
-        </div>
+        )}
 
         <div className='seam-box'>
           <div className='seam-content seam-lock-status'>

src/lib/seam/components/DeviceTable/DeviceTable.element.ts

@@ -13,6 +13,7 @@ export const props: ElementProps<Omit<DeviceTableProps, 'title'>> = {
   onDeviceClick: 'object',
   preventDefaultOnDeviceClick: 'boolean',
   heading: 'string',
+  hideAccessCodes: 'boolean',
 }
 
 export { DeviceTable as Component } from './DeviceTable.js'

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

@@ -40,6 +40,7 @@ export interface DeviceTableProps extends CommonProps {
   deviceComparator?: (deviceA: Device, deviceB: Device) => number
   onDeviceClick?: (deviceId: string) => void
   preventDefaultOnDeviceClick?: boolean
+  hideAccessCodes?: boolean
   heading?: string | null
 }
 
@@ -70,6 +71,7 @@ export function DeviceTable({
   disableEditAccessCode = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  hideAccessCodes = false,
   onBack,
   className,
 }: DeviceTableProps = {}): JSX.Element {
@@ -112,6 +114,7 @@ export function DeviceTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        hideAccessCodes={hideAccessCodes}
         onBack={() => {
           setSelectedDeviceId(null)
         }}