Add error Snackbar to table components

.storybook/preview.tsx

@@ -65,28 +65,34 @@ const preview: Preview = {
     },
   },
   decorators: [
-    (
-      Story,
-      {
+    (Story, context) => {
+      const {
         globals: {
           publishableKey,
           userIdentifierKey,
           seamEndpoint,
           simulatedOutage,
         },
-      }
-    ) => {
+      } = context
+
+      const usableKey =
+        simulatedOutage === 'outage' ? 'seam_pk_3' : publishableKey
+
       return (
         <SeamProvider
-          publishableKey={
-            simulatedOutage === 'outage' ? 'seam_pk_3' : publishableKey
-          }
+          publishableKey={usableKey}
           userIdentifierKey={userIdentifierKey}
           endpoint={seamEndpoint}
           disableCssInjection
           disableFontInjection
         >
-          <Story />
+          <Story
+            {...context}
+            globals={{
+              ...context.globals,
+              publishableKey: usableKey,
+            }}
+          />
         </SeamProvider>
       )
     },

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

@@ -90,7 +90,7 @@ export function AccessCodeTable({
 }: AccessCodeTableProps): JSX.Element {
   useComponentTelemetry('AccessCodeTable')
 
-  const { accessCodes, isInitialLoading, isError, error } = useAccessCodes({
+  const { accessCodes, isInitialLoading, isError, refetch } = useAccessCodes({
     device_id: deviceId,
   })
 
@@ -208,10 +208,6 @@ export function AccessCodeTable({
     )
   }
 
-  if (isError) {
-    return <p className={className}>{error?.message}</p>
-  }
-
   return (
     <>
       <Snackbar
@@ -268,6 +264,19 @@ export function AccessCodeTable({
             disableDeleteAccessCode={disableDeleteAccessCode}
           />
         </TableBody>
+
+        <Snackbar
+          variant='error'
+          visible={isError}
+          message={t.fallbackErrorMessage}
+          action={{
+            label: t.tryAgain,
+            onClick: () => {
+              void refetch()
+            },
+          }}
+          disableCloseButton
+        />
       </div>
     </>
   )
@@ -338,4 +347,6 @@ const t = {
   loading: 'Loading access codes',
   accesCodeUpdated: 'Access code updated',
   accesCodeCreated: 'Access code created',
+  tryAgain: 'Try again',
+  fallbackErrorMessage: 'Access codes could not be loaded',
 }

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

@@ -17,6 +17,7 @@ import {
 } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -72,7 +73,7 @@ export function ClimateSettingScheduleTable({
 }: ClimateSettingScheduleTableProps): JSX.Element {
   useComponentTelemetry('ClimateSettingScheduleTable')
 
-  const { climateSettingSchedules, isInitialLoading, isError, error } =
+  const { climateSettingSchedules, isInitialLoading, isError, refetch } =
     useClimateSettingSchedules({
       device_id: deviceId,
     })
@@ -128,10 +129,6 @@ export function ClimateSettingScheduleTable({
     )
   }
 
-  if (isError) {
-    return <p className={className}>{error?.message}</p>
-  }
-
   return (
     <div className={classNames('seam-table', className)}>
       <ContentHeader onBack={onBack} />
@@ -165,6 +162,19 @@ export function ClimateSettingScheduleTable({
           onClimateSettingScheduleClick={handleClimateSettingScheduleClick}
         />
       </TableBody>
+
+      <Snackbar
+        variant='error'
+        visible={isError}
+        message={t.fallbackErrorMessage}
+        action={{
+          label: t.tryAgain,
+          onClick: () => {
+            void refetch()
+          },
+        }}
+        disableCloseButton
+      />
     </div>
   )
 }
@@ -201,4 +211,6 @@ const t = {
   noClimateSettingSchedulesMessage:
     'Sorry, no climate setting schedules were found',
   loading: 'Loading schedules',
+  tryAgain: 'Try again',
+  fallbackErrorMessage: 'Climate settings could not be loaded',
 }

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

@@ -22,6 +22,7 @@ import {
 } from 'lib/seam/devices/use-devices.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -77,7 +78,7 @@ export function DeviceTable({
 }: DeviceTableProps = {}): JSX.Element {
   useComponentTelemetry('DeviceTable')
 
-  const { devices, isInitialLoading, isError, error } = useDevices({
+  const { devices, isInitialLoading, isError, refetch } = useDevices({
     device_ids: deviceIds,
     connected_account_ids: connectedAccountIds,
   })
@@ -120,10 +121,6 @@ export function DeviceTable({
     )
   }
 
-  if (isError) {
-    return <p className={className}>{error?.message}</p>
-  }
-
   return (
     <div className={classNames('seam-device-table', className)}>
       <ContentHeader onBack={onBack} />
@@ -154,6 +151,19 @@ export function DeviceTable({
       <TableBody>
         <Content devices={filteredDevices} onDeviceClick={handleDeviceClick} />
       </TableBody>
+
+      <Snackbar
+        variant='error'
+        visible={isError}
+        message={t.fallbackErrorMessage}
+        action={{
+          label: t.tryAgain,
+          onClick: () => {
+            void refetch()
+          },
+        }}
+        disableCloseButton
+      />
     </div>
   )
 }
@@ -216,4 +226,6 @@ const t = {
   devices: 'Devices',
   noDevicesMessage: 'Sorry, no devices were found',
   loading: 'Loading devices',
+  tryAgain: 'Try again',
+  fallbackErrorMessage: 'Devices could not be loaded',
 }