fix(availabilty): fix offline showing when availability is not enabled

Author: Koenkk

src/components/device-page/info.tsx

@@ -85,8 +85,10 @@ export class DeviceInfo extends Component<
                     availability: AvailabilityState,
                 ) => {
                     const { config } = bridgeInfo;
-                    const availabilityFeatureEnabled = !!config.availability?.enabled;
-                    const availabilityEnabledForDevice = config.devices[device.ieee_address]?.availability !== false;
+                    const availabilityFeatureEnabled = config.availability?.enabled;
+                    const availabilityEnabledForDevice = config.devices[device.ieee_address]?.availability as
+                        | boolean
+                        | undefined;
 
                     return (
                         <dd className="col-12 col-md-7">

src/components/zigbee/Availability.tsx

@@ -25,7 +25,7 @@ export function Availability(props: AvailabilityStateProps): JSX.Element {
     availabilityState = availabilityState.toLowerCase() as OnlineOrOffline;
     if (disabled) {
         return <span>{t('disabled')}</span>;
-    } else if (availabilityEnabledForDevice || (availabilityFeatureEnabled && availabilityEnabledForDevice !== false)) {
+    } else if (availabilityEnabledForDevice ?? availabilityFeatureEnabled) {
         return (
             <span
                 className={cx({

src/components/zigbee/DevicesTable.test.tsx

@@ -110,6 +110,14 @@ describe('Availability column visibility', () => {
         expect(screen.queryByRole('columnheader', { name: /avaliability:avaliability/i })).not.toBeInTheDocument();
     });
 
+    it('should show availability column when device has no config, and global availabilty is enabled', () => {
+        const deviceWithoutAvailability = createMockDeviceData({
+            availabilityEnabledForDevice: undefined,
+        });
+        render(<DevicesTable {...defaultProps} data={[deviceWithoutAvailability]} availabilityFeatureEnabled={true} />);
+        expect(screen.queryByRole('columnheader', { name: /avaliability:avaliability/i })).toBeInTheDocument();
+    });
+
     it('should show availability column when some devices have it enabled and others disabled', () => {
         const deviceWithAvailability = createMockDeviceData({
             availabilityEnabledForDevice: true,

src/components/zigbee/DevicesTable.tsx

@@ -53,9 +53,7 @@ export function DevicesTable(
               ]
             : [];
     const showAvailabilityColumn = data.some(
-        (device) =>
-            device.availabilityEnabledForDevice ||
-            (availabilityFeatureEnabled && device.availabilityEnabledForDevice !== false),
+        (device) => device.availabilityEnabledForDevice ?? availabilityFeatureEnabled,
     );
     const availabilityCol = showAvailabilityColumn
         ? [

src/components/zigbee/index.tsx

@@ -47,7 +47,7 @@ function DevicesPage(props: DevicesPageProps): JSX.Element {
                     device,
                     state,
                     availabilityState: availability[device.friendly_name] ?? 'offline',
-                    availabilityEnabledForDevice: config.devices[device.ieee_address]?.availability !== false,
+                    availabilityEnabledForDevice: config.devices[device.ieee_address]?.availability,
                 } as DevicesPageData;
             });
     };