fix: various fixes

src/components/device-page/info.tsx

@@ -183,7 +183,7 @@ export class DeviceInfo extends Component<
             },
             {
                 key: 'software_build_id',
-                translationKey: 'firmware_version',
+                translationKey: 'firmware_id',
                 if: 'software_build_id',
             },
 

src/components/features/composite/color/color.tsx

@@ -15,7 +15,7 @@ const Light: FunctionComponent<ColorProps> = (props) => {
     }
     return (
         <ColorEditor
-            onChange={(color) => onChange(feature.endpoint as Endpoint, { color })}
+            onChange={(color) => onChange(feature.endpoint as Endpoint, { [feature.property ?? 'color']: color })}
             value={value as AnyColor}
             format={feature.name}
             minimal={minimal}

src/components/features/gradient/gradient.tsx

@@ -29,7 +29,7 @@ function Gradient(props: GradientProps & WithTranslation<'gradient'>) {
         t,
         minimal,
         onChange,
-        feature: { endpoint, length_min, length_max },
+        feature: { endpoint, length_min, length_max, property },
         deviceState,
     } = props;
     const [colors, setColors] = useState<Array<RGBColor>>(Array(gradientColors).fill({ x: 0, y: 0 }));
@@ -94,7 +94,7 @@ function Gradient(props: GradientProps & WithTranslation<'gradient'>) {
             <div>
                 <Button
                     className={cx('btn btn-primary float-end', { 'btn-sm': minimal })}
-                    onClick={() => onChange(endpoint as Endpoint, { gradient: colors.map(rgbToHex) })}
+                    onClick={() => onChange(endpoint as Endpoint, { [property ?? 'gradient']: colors.map(rgbToHex) })}
                 >
                     {t('common:apply')}
                 </Button>

src/components/ota-page/index.tsx

@@ -37,7 +37,11 @@ const StateCell: FunctionComponent<OtaRowProps & OtaApi> = (props) => {
                             {otaState.progress}%
                         </div>
                     </div>
-                    <div>{t('remaining_time', { remaining: toHHMMSS(otaState.remaining) })}</div>
+                    <div>
+                        {t('remaining_time', {
+                            remaining: otaState.remaining != null ? toHHMMSS(otaState.remaining) : 'N/A',
+                        })}
+                    </div>
                 </>
             );
         case 'available':
@@ -185,17 +189,31 @@ class OtaPage extends Component<PropsFromStore & OtaApi & WithTranslation<'ota'>
                 }) => <ModelLink device={device} />,
             },
             {
-                Header: t('zigbee:firmware_installed_version') as string,
+                Header: t('zigbee:firmware_id') as string,
+                accessor: ({ device }) => device.software_build_id,
+                Cell: ({
+                    row: {
+                        original: { device },
+                    },
+                }) => (
+                    <>
+                        <OTALink device={device} />
+                        <span title={t('zigbee:firmware_build_date')}> ({device.date_code ?? 'N/A'})</span>
+                    </>
+                ),
+            },
+            {
+                Header: t('zigbee:installed_version') as string,
                 accessor: ({ state }) => {
                     const installed_version = ((state?.update ?? {}) as OTAState).installed_version;
 
                     if (typeof installed_version === 'number' && installed_version >= 0)
                         return fileVersion2String(installed_version);
-                    else return t('zigbee:firmware_installed_version_na');
+                    else return t('zigbee:installed_version_na');
                 },
             },
             {
-                Header: t('zigbee:firmware_available_version') as string,
+                Header: t('zigbee:available_version') as string,
                 accessor: ({ state }) => {
                     const latest_version = ((state?.update ?? {}) as OTAState).latest_version;
 

src/components/vendor-links/vendor-links.tsx

@@ -51,7 +51,7 @@ export const ModelLink: React.FunctionComponent<VendorProps> = (props: VendorPro
 export const OTALink: React.FunctionComponent<VendorProps> = (props: VendorProps) => {
     const { device } = props;
     let url = '';
-    const title = device.software_build_id;
+    const title = device.software_build_id ?? 'N/A';
 
     switch (device?.definition?.vendor) {
         case 'IKEA':

src/i18n/locales/en.json

@@ -2659,10 +2659,10 @@
     "device_type": "Device type",
     "endpoint": "Endpoint",
     "firmware_build_date": "Firmware build date",
-    "firmware_version": "Firmware version",
-    "firmware_installed_version": "Firmware installed version",
-    "firmware_available_version": "Firmware available version",
-    "firmware_installed_version_na": "Not yet reported by device",
+    "firmware_id": "Firmware ID",
+    "installed_version": "Installed version",
+    "available_version": "Available version",
+    "installed_version_na": "Not yet reported by device",
     "force_remove": "Force remove",
     "friendly_name": "Friendly name",
     "ieee_address": "IEEE Address",

src/i18n/locales/eu.json

@@ -2646,7 +2646,7 @@
     "device_type": "Gailu moeta",
     "endpoint": "Endpoint",
     "firmware_build_date": "Firmware eraikitze data",
-    "firmware_version": "Firmware bertsioa",
+    "firmware_id": "Firmware ID",
     "force_remove": "Force remove",
     "friendly_name": "Lagunarteko izena",
     "ieee_address": "IEEE Helbidea",

src/types.ts

@@ -7,8 +7,10 @@ export type IEEEEAddress = string;
 
 export type OTAState = {
     state: 'available' | 'updating' | 'scheduled';
-    progress: number;
-    remaining: number;
+    progress?: number;
+    remaining?: number;
+    installed_version: number | null;
+    latest_version: number | null;
 };
 export type RGBColor = {
     r: number;