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

Author: adamshiervani

ui/package-lock.json

@@ -41,6 +41,7 @@
     "react-simple-keyboard": "^3.7.112",
     "react-xtermjs": "^1.0.9",
     "recharts": "^2.15.0",
+    "semver": "^7.7.1",
     "tailwind-merge": "^2.5.5",
     "usehooks-ts": "^3.1.0",
     "validator": "^13.12.0",

ui/package.json

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { useFeatureFlag } from "../hooks/useFeatureFlag";
+
+export function FeatureFlag({
+  minAppVersion,
+  name = "unnamed",
+  fallback = null,
+  children,
+}: {
+  minAppVersion: string;
+  name?: string;
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const { isEnabled, appVersion } = useFeatureFlag(minAppVersion);
+
+  useEffect(() => {
+    if (!appVersion) return;
+    console.log(
+      `Feature '${name}' ${isEnabled ? "ENABLED" : "DISABLED"}: ` +
+        `Current version: ${appVersion}, ` +
+        `Required min version: ${minAppVersion || "N/A"}`,
+    );
+  }, [isEnabled, name, minAppVersion, appVersion]);
+
+  return isEnabled ? children : fallback;
+}

ui/src/components/FeatureFlag.tsx

@@ -0,0 +1,177 @@
+import { useMemo } from "react";
+
+import { useCallback } from "react";
+
+import { useEffect, useState } from "react";
+import { UsbConfigState } from "../hooks/stores";
+import { useJsonRpc } from "../hooks/useJsonRpc";
+import notifications from "../notifications";
+import { SettingsItem } from "../routes/devices.$id.settings";
+import { SelectMenuBasic } from "./SelectMenuBasic";
+import USBConfigDialog from "./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>;
+
+export function UsbConfigSetting() {
+  const [send] = useJsonRpc();
+
+  const [usbConfigProduct, setUsbConfigProduct] = useState("");
+  const [deviceId, setDeviceId] = useState("");
+  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 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("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, syncUsbConfigProduct]);
+
+  return (
+    <>
+      <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])
+          }
+        />
+      )}
+    </>
+  );
+}

ui/src/components/UsbConfigSetting.tsx

@@ -553,3 +553,19 @@ export const useLocalAuthModalStore = create<LocalAuthModalState>(set => ({
   modalView: "createPassword",
   setModalView: view => set({ modalView: view }),
 }));
+
+export interface DeviceState {
+  appVersion: string | null;
+  systemVersion: string | null;
+
+  setAppVersion: (version: string) => void;
+  setSystemVersion: (version: string) => void;
+}
+
+export const useDeviceStore = create<DeviceState>(set => ({
+  appVersion: null,
+  systemVersion: null,
+
+  setAppVersion: version => set({ appVersion: version }),
+  setSystemVersion: version => set({ systemVersion: version }),
+}));

ui/src/hooks/stores.ts

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { FeatureFlagContext } from "../providers/FeatureFlagProvider";
+
+export const useFeatureFlag = (minAppVersion: string) => {
+  const context = useContext(FeatureFlagContext);
+
+  if (!context) {
+    throw new Error("useFeatureFlag must be used within a FeatureFlagProvider");
+  }
+
+  const { isFeatureEnabled, appVersion } = context;
+
+  const isEnabled = isFeatureEnabled(minAppVersion);
+  return { isEnabled, appVersion };
+};

ui/src/hooks/useFeatureFlag.ts

@@ -0,0 +1,42 @@
+import { createContext } from "react";
+import semver from "semver";
+
+interface FeatureFlagContextType {
+  appVersion: string | null;
+  isFeatureEnabled: (minVersion: string) => boolean;
+}
+
+// Create the context
+export const FeatureFlagContext = createContext<FeatureFlagContextType>({
+  appVersion: null,
+  isFeatureEnabled: () => false,
+});
+
+// Provider component that fetches version and provides context
+export const FeatureFlagProvider = ({
+  children,
+  appVersion,
+}: {
+  children: React.ReactNode;
+  appVersion: string | null;
+}) => {
+  const isFeatureEnabled = (minAppVersion: string) => {
+    // If no version is set, feature is disabled.
+    // The feature flag component can deside what to display as a fallback - either omit the component or like a "please upgrade to enable".
+    if (!appVersion) return false;
+
+    // Extract the base versions without prerelease identifier
+    const baseCurrentVersion = semver.coerce(appVersion)?.version;
+    const baseMinVersion = semver.coerce(minAppVersion)?.version;
+
+    if (!baseCurrentVersion || !baseMinVersion) return false;
+
+    return semver.gte(baseCurrentVersion, baseMinVersion);
+  };
+
+  const value = { appVersion, isFeatureEnabled };
+
+  return (
+    <FeatureFlagContext.Provider value={value}>{children}</FeatureFlagContext.Provider>
+  );
+};