feat(ui): Add feature flag system (#208)

ui/src/routes/devices.$id.settings.general._index.tsx

@@ -1,43 +1,32 @@
 import { SettingsPageHeader } from "../components/SettingsPageheader";
 
 import { SettingsItem } from "./devices.$id.settings";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { useEffect } from "react";
-import { SystemVersionInfo } from "./devices.$id.settings.general.update";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { Button } from "../components/Button";
 import notifications from "../notifications";
 import Checkbox from "../components/Checkbox";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
+import { useDeviceStore } from "../hooks/stores";
 
 export default function SettingsGeneralRoute() {
   const [send] = useJsonRpc();
   const { navigateTo } = useDeviceUiNavigation();
-
   const [autoUpdate, setAutoUpdate] = useState(true);
-  const [currentVersions, setCurrentVersions] = useState<{
-    appVersion: string;
-    systemVersion: string;
-  } | null>(null);
 
-  const getCurrentVersions = useCallback(() => {
-    send("getUpdateStatus", {}, resp => {
-      if ("error" in resp) return;
-      const result = resp.result as SystemVersionInfo;
-      setCurrentVersions({
-        appVersion: result.local.appVersion,
-        systemVersion: result.local.systemVersion,
-      });
-    });
-  }, [send]);
+  const currentVersions = useDeviceStore(state => {
+    const { appVersion, systemVersion } = state;
+    if (!appVersion || !systemVersion) return null;
+    return { appVersion, systemVersion };
+  });
 
   useEffect(() => {
-    getCurrentVersions();
     send("getAutoUpdateState", {}, resp => {
       if ("error" in resp) return;
       setAutoUpdate(resp.result as boolean);
     });
-  }, [getCurrentVersions, send]);
+  }, [send]);
 
   const handleAutoUpdateChange = (enabled: boolean) => {
     send("setAutoUpdateState", { enabled }, resp => {

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -3,7 +3,7 @@ import Card from "@/components/Card";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { Button } from "@components/Button";
-import { UpdateState, useUpdateStore } from "@/hooks/stores";
+import { UpdateState, useDeviceStore, useUpdateStore } from "@/hooks/stores";
 import notifications from "@/notifications";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import LoadingSpinner from "@/components/LoadingSpinner";
@@ -134,6 +134,9 @@ function LoadingState({
   const abortControllerRef = useRef<AbortController | null>(null);
   const [send] = useJsonRpc();
 
+  const setAppVersion = useDeviceStore(state => state.setAppVersion);
+  const setSystemVersion = useDeviceStore(state => state.setSystemVersion);
+
   const getVersionInfo = useCallback(() => {
     return new Promise<SystemVersionInfo>((resolve, reject) => {
       send("getUpdateStatus", {}, async resp => {
@@ -142,11 +145,13 @@ function LoadingState({
           reject(new Error("Failed to check for updates"));
         } else {
           const result = resp.result as SystemVersionInfo;
+          setAppVersion(result.local.appVersion);
+          setSystemVersion(result.local.systemVersion);
           resolve(result);
         }
       });
     });
-  }, [send]);
+  }, [send, setAppVersion, setSystemVersion]);
 
   const progressBarRef = useRef<HTMLDivElement>(null);
   useEffect(() => {

ui/src/routes/devices.$id.settings.hardware.tsx

@@ -1,97 +1,20 @@
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsItem } from "@routes/devices.$id.settings";
-import { BacklightSettings, UsbConfigState, useSettingsStore } from "@/hooks/stores";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { BacklightSettings, useSettingsStore } from "@/hooks/stores";
+import { useEffect } from "react";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 
 import notifications from "../notifications";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
-import USBConfigDialog from "@components/USBConfigDialog";
-
-const generatedSerialNumber = [generateNumber(1, 9), generateHex(7, 7), 0, 1].join("&");
-
-function generateNumber(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
-function generateHex(min: number, max: number) {
-  const len = generateNumber(min, max);
-  const n = (Math.random() * 0xfffff * 1000000).toString(16);
-  return n.slice(0, len);
-}
-
-export interface USBConfig {
-  vendor_id: string;
-  product_id: string;
-  serial_number: string;
-  manufacturer: string;
-  product: string;
-}
-
-const usbConfigs = [
-  {
-    label: "JetKVM Default",
-    value: "USB Emulation Device",
-  },
-  {
-    label: "Logitech Universal Adapter",
-    value: "Logitech USB Input Device",
-  },
-  {
-    label: "Microsoft Wireless MultiMedia Keyboard",
-    value: "Wireless MultiMedia Keyboard",
-  },
-  {
-    label: "Dell Multimedia Pro Keyboard",
-    value: "Multimedia Pro Keyboard",
-  },
-];
-
-type UsbConfigMap = Record<string, USBConfig>;
+import { UsbConfigSetting } from "../components/UsbConfigSetting";
+import { FeatureFlag } from "../components/FeatureFlag";
 
 export default function SettingsHardwareRoute() {
   const [send] = useJsonRpc();
   const settings = useSettingsStore();
 
-  const [usbConfigProduct, setUsbConfigProduct] = useState("");
-  const [deviceId, setDeviceId] = useState("");
-
   const setBacklightSettings = useSettingsStore(state => state.setBacklightSettings);
 
-  const usbConfigData: UsbConfigMap = useMemo(
-    () => ({
-      "USB Emulation Device": {
-        vendor_id: "0x1d6b",
-        product_id: "0x0104",
-        serial_number: deviceId,
-        manufacturer: "JetKVM",
-        product: "USB Emulation Device",
-      },
-      "Logitech USB Input Device": {
-        vendor_id: "0x046d",
-        product_id: "0xc52b",
-        serial_number: generatedSerialNumber,
-        manufacturer: "Logitech (x64)",
-        product: "Logitech USB Input Device",
-      },
-      "Wireless MultiMedia Keyboard": {
-        vendor_id: "0x045e",
-        product_id: "0x005f",
-        serial_number: generatedSerialNumber,
-        manufacturer: "Microsoft",
-        product: "Wireless MultiMedia Keyboard",
-      },
-      "Multimedia Pro Keyboard": {
-        vendor_id: "0x413c",
-        product_id: "0x2011",
-        serial_number: generatedSerialNumber,
-        manufacturer: "Dell Inc.",
-        product: "Multimedia Pro Keyboard",
-      },
-    }),
-    [deviceId],
-  );
-
   const handleBacklightSettingsChange = (settings: BacklightSettings) => {
     // If the user has set the display to dim after it turns off, set the dim_after
     // value to never.
@@ -114,42 +37,6 @@ export default function SettingsHardwareRoute() {
       notifications.success("Backlight settings updated successfully");
     });
   };
-  const syncUsbConfigProduct = useCallback(() => {
-    send("getUsbConfig", {}, resp => {
-      if ("error" in resp) {
-        console.error("Failed to load USB Config:", resp.error);
-        notifications.error(
-          `Failed to load USB Config: ${resp.error.data || "Unknown error"}`,
-        );
-      } else {
-        console.log("syncUsbConfigProduct#getUsbConfig result:", resp.result);
-        const usbConfigState = resp.result as UsbConfigState;
-        const product = usbConfigs.map(u => u.value).includes(usbConfigState.product)
-          ? usbConfigState.product
-          : "custom";
-        setUsbConfigProduct(product);
-      }
-    });
-  }, [send]);
-
-  const handleUsbConfigChange = useCallback(
-    (usbConfig: USBConfig) => {
-      send("setUsbConfig", { usbConfig }, resp => {
-        if ("error" in resp) {
-          notifications.error(
-            `Failed to set usb config: ${resp.error.data || "Unknown error"}`,
-          );
-          return;
-        }
-        // setUsbConfigProduct(usbConfig.product);
-        notifications.success(
-          `USB Config set to ${usbConfig.manufacturer} ${usbConfig.product}`,
-        );
-        syncUsbConfigProduct();
-      });
-    },
-    [send, syncUsbConfigProduct],
-  );
 
   useEffect(() => {
     send("getBacklightSettings", {}, resp => {
@@ -161,18 +48,7 @@ export default function SettingsHardwareRoute() {
       const result = resp.result as BacklightSettings;
       setBacklightSettings(result);
     });
-
-    send("getDeviceID", {}, async resp => {
-      if ("error" in resp) {
-        return notifications.error(
-          `Failed to get device ID: ${resp.error.data || "Unknown error"}`,
-        );
-      }
-      setDeviceId(resp.result as string);
-    });
-
-    syncUsbConfigProduct();
-  }, [send, setBacklightSettings, syncUsbConfigProduct]);
+  }, [send, setBacklightSettings]);
 
   return (
     <div className="space-y-4">
@@ -253,36 +129,9 @@ export default function SettingsHardwareRoute() {
         </p>
       </div>
 
-      <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
-
-      <SettingsItem
-        title="USB Device Emulation"
-        description="Set a Preconfigured USB Device"
-      >
-        <SelectMenuBasic
-          size="SM"
-          label=""
-          className="max-w-[192px]"
-          value={usbConfigProduct}
-          onChange={e => {
-            if (e.target.value === "custom") {
-              setUsbConfigProduct(e.target.value);
-            } else {
-              const usbConfig = usbConfigData[e.target.value];
-              handleUsbConfigChange(usbConfig);
-            }
-          }}
-          options={[...usbConfigs, { value: "custom", label: "Custom" }]}
-        />
-      </SettingsItem>
-      {usbConfigProduct === "custom" && (
-        <USBConfigDialog
-          onSetUsbConfig={usbConfig => handleUsbConfigChange(usbConfig)}
-          onRestoreToDefault={() =>
-            handleUsbConfigChange(usbConfigData[usbConfigs[0].value])
-          }
-        />
-      )}
+      <FeatureFlag minAppVersion="0.3.8">
+        <UsbConfigSetting />
+      </FeatureFlag>
     </div>
   );
 }

ui/src/routes/devices.$id.tsx

@@ -3,6 +3,7 @@ import { cx } from "@/cva.config";
 import {
   HidState,
   UpdateState,
+  useDeviceStore,
   useHidStore,
   useMountMediaStore,
   User,
@@ -39,6 +40,9 @@ import { CLOUD_API, DEVICE_API } from "@/ui.config";
 import Modal from "../components/Modal";
 import { motion, AnimatePresence } from "motion/react";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
+import { FeatureFlagProvider } from "../providers/FeatureFlagProvider";
+import { SystemVersionInfo } from "./devices.$id.settings.general.update";
+import notifications from "../notifications";
 
 interface LocalLoaderResp {
   authMode: "password" | "noPassword" | null;
@@ -442,8 +446,26 @@ export default function KvmIdRoute() {
     if (location.pathname !== "/other-session") navigateTo("/");
   }, [navigateTo, location.pathname]);
 
+  const appVersion = useDeviceStore(state => state.appVersion);
+  const setAppVersion = useDeviceStore(state => state.setAppVersion);
+  const setSystemVersion = useDeviceStore(state => state.setSystemVersion);
+
+  useEffect(() => {
+    if (appVersion) return;
+
+    send("getUpdateStatus", {}, async resp => {
+      if ("error" in resp) {
+        notifications.error("Failed to get device version");
+      } else {
+        const result = resp.result as SystemVersionInfo;
+        setAppVersion(result.local.appVersion);
+        setSystemVersion(result.local.systemVersion);
+      }
+    });
+  }, [appVersion, send, setAppVersion, setSystemVersion]);
+
   return (
-    <>
+    <FeatureFlagProvider appVersion={appVersion}>
       {!outlet && otaState.updating && (
         <AnimatePresence>
           <motion.div
@@ -507,7 +529,7 @@ export default function KvmIdRoute() {
       {serialConsole && (
         <Terminal type="serial" dataChannel={serialConsole} title="Serial Console" />
       )}
-    </>
+    </FeatureFlagProvider>
   );
 }