fix: Crash when navigator.serial is undefined (#670)

* Fix crash when navigator.serial is undefined

* Change value

---------

Co-authored-by: philon- <philon-@users.noreply.github.com>

src/components/Dialog/NewDeviceDialog.tsx

@@ -18,9 +18,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.tsx";
-import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import { AlertCircle } from "lucide-react";
-import { useMemo } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "../UI/Typography/Link.tsx";
 
@@ -29,6 +27,7 @@ export interface TabElementProps {
 }
 
 export interface TabManifest {
+  id: "HTTP" | "BLE" | "Serial";
   label: string;
   element: React.FC<TabElementProps>;
   isDisabled: boolean;
@@ -41,29 +40,28 @@ export interface NewDeviceProps {
 
 interface FeatureErrorProps {
   missingFeatures: BrowserFeature[];
+  tabId: "HTTP" | "BLE" | "Serial";
 }
 
-const links: { [key: string]: string } = {
-  "Web Bluetooth":
-    "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
-  "Web Serial":
-    "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
-  "Secure Context":
-    "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts",
+const errors: Record<BrowserFeature, { href: string; i18nKey: string }> = {
+  "Web Bluetooth": {
+    href:
+      "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
+    i18nKey: "newDeviceDialog.validation.requiresWebBluetooth",
+  },
+  "Web Serial": {
+    href:
+      "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
+    i18nKey: "newDeviceDialog.validation.requiresWebSerial",
+  },
+  "Secure Context": {
+    href:
+      "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts",
+    i18nKey: "newDeviceDialog.validation.requiresSecureContext",
+  },
 };
 
-const ErrorMessage = ({ missingFeatures }: FeatureErrorProps) => {
-  const { i18n } = useTranslation("dialog");
-
-  const listFormatter = useMemo(
-    () =>
-      new Intl.ListFormat(i18n.language, {
-        style: "long",
-        type: "disjunction",
-      }),
-    [i18n.language],
-  );
-
+const ErrorMessage = ({ missingFeatures, tabId }: FeatureErrorProps) => {
   if (missingFeatures.length === 0) return null;
 
   const browserFeatures = missingFeatures.filter(
@@ -71,37 +69,32 @@ const ErrorMessage = ({ missingFeatures }: FeatureErrorProps) => {
   );
   const needsSecureContext = missingFeatures.includes("Secure Context");
 
-  const formatFeatureList = (features: string[]) => {
-    const parts = listFormatter.formatToParts(features);
-    return parts.map((part) => {
-      if (part.type === "element") {
-        return (
-          <Link key={part.value} href={links[part.value]}>
-            {part.value}
-          </Link>
-        );
-      }
-      return <span key={part.value}>{part.value}</span>;
-    });
-  };
-
-  const featureNodes = formatFeatureList(browserFeatures);
+  const needsFeature =
+    (tabId === "BLE" && browserFeatures.includes("Web Bluetooth"))
+      ? "Web Bluetooth"
+      : (tabId === "Serial" && browserFeatures.includes("Web Serial"))
+      ? "Web Serial"
+      : undefined;
 
   return (
-    <Subtle className="flex flex-col items-start gap-2 bg-red-500 p-4 rounded-md">
+    <div className="flex flex-col items-start gap-2 bg-red-500 p-4 rounded-md text-sm text-slate-500 dark:text-slate-400">
       <div className="flex items-center gap-2 w-full">
         <AlertCircle size={40} className="mr-2 shrink-0 text-white" />
         <div className="flex flex-col gap-3">
-          <p className="text-sm text-white">
-            {browserFeatures.length > 0 && (
+          <div className="text-sm text-white">
+            {needsFeature && (
               <Trans
-                i18nKey="newDeviceDialog.validation.requiresFeatures"
-                components={{
-                  "0": <>{featureNodes}</>,
-                }}
+                i18nKey={errors[needsFeature].i18nKey}
+                components={[
+                  <Link
+                    key="0"
+                    href={errors[needsFeature].href}
+                    className="underline hover:text-slate-200 text-white dark:text-white dark:hover:text-slate-300"
+                  />,
+                ]}
               />
             )}
-            {browserFeatures.length > 0 && needsSecureContext && " "}
+            {needsFeature && needsSecureContext && " "}
             {needsSecureContext && (
               <Trans
                 i18nKey={browserFeatures.length > 0
@@ -110,17 +103,17 @@ const ErrorMessage = ({ missingFeatures }: FeatureErrorProps) => {
                 components={{
                   "0": (
                     <Link
-                      href={links["Secure Context"]}
+                      href={errors["Secure Context"].href}
                       className="underline hover:text-slate-200"
                     />
                   ),
                 }}
               />
             )}
-          </p>
+          </div>
         </div>
       </div>
-    </Subtle>
+    </div>
   );
 };
 
@@ -133,17 +126,20 @@ export const NewDeviceDialog = ({
 
   const tabs: TabManifest[] = [
     {
+      id: "HTTP",
       label: t("newDeviceDialog.tabHttp"),
       element: HTTP,
       isDisabled: false,
     },
     {
+      id: "BLE",
       label: t("newDeviceDialog.tabBluetooth"),
       element: BLE,
       isDisabled: unsupported.includes("Web Bluetooth") ||
         unsupported.includes("Secure Context"),
     },
     {
+      id: "Serial",
       label: t("newDeviceDialog.tabSerial"),
       element: Serial,
       isDisabled: unsupported.includes("Web Serial") ||
@@ -161,21 +157,27 @@ export const NewDeviceDialog = ({
         <Tabs defaultValue="HTTP">
           <TabsList>
             {tabs.map((tab) => (
-              <TabsTrigger key={tab.label} value={tab.label}>
+              <TabsTrigger key={tab.id} value={tab.id}>
                 {tab.label}
               </TabsTrigger>
             ))}
           </TabsList>
           {tabs.map((tab) => (
-            <TabsContent key={tab.label} value={tab.label}>
+            <TabsContent key={tab.id} value={tab.id}>
               <fieldset disabled={tab.isDisabled}>
-                {(tab.label !== "HTTP" &&
+                {(tab.id !== "HTTP" &&
                     tab.isDisabled)
-                  ? <ErrorMessage missingFeatures={unsupported} />
-                  : null}
-                <tab.element
-                  closeDialog={() => onOpenChange(false)}
-                />
+                  ? (
+                    <ErrorMessage
+                      missingFeatures={unsupported}
+                      tabId={tab.id}
+                    />
+                  )
+                  : (
+                    <tab.element
+                      closeDialog={() => onOpenChange(false)}
+                    />
+                  )}
               </fieldset>
             </TabsContent>
           ))}

src/i18n/locales/en/dialog.json

@@ -64,7 +64,8 @@
       "newDeviceButton": "New device"
     },
     "validation": {
-      "requiresFeatures": "This connection type requires <0></0>. Please use a supported browser, like Chrome or Edge.",
+      "requiresWebBluetooth": "This connection type requires <0>Web Bluetooth</0>. Please use a supported browser, like Chrome or Edge.",
+      "requiresWebSerial": "This connection type requires <0>Web Serial</0>. Please use a supported browser, like Chrome or Edge.",
       "requiresSecureContext": "This application requires a <0>secure context</0>. Please connect using HTTPS or localhost.",
       "additionallyRequiresSecureContext": "Additionally, it requires a <0>secure context</0>. Please connect using HTTPS or localhost."
     }