Fix node list sorting, dark mode text colors (#613)

* Fix node list sorting, dark mode text colors

* Update tests

* Remove unused import

* Fix warnings for missing DialogDescription

src/components/Dialog/NewDeviceDialog.tsx

@@ -135,7 +135,7 @@ export const NewDeviceDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent aria-describedby={undefined}>
         <DialogClose />
         <DialogHeader>
           <DialogTitle>Connect New Device</DialogTitle>

src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@@ -65,7 +65,7 @@ export const NodeDetailsDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent aria-describedby={undefined}>
         <DialogClose />
         <DialogHeader>
           <DialogTitle>
@@ -128,7 +128,7 @@ export const NodeDetailsDialog = ({
 
               {device.deviceMetrics && (
                 <div className="text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                  <p className="text-lg font-semibold text-slate-900 dark:text-slate-0">
+                  <p className="text-lg font-semibold text-slate-900 dark:text-slate-100">
                     Device Metrics:
                   </p>
                   {deviceMetricsMap.map(

src/components/Dialog/NodeOptionsDialog.tsx

@@ -75,7 +75,7 @@ export const NodeOptionsDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent aria-describedby={undefined}>
         <DialogClose />
         <DialogHeader>
           <DialogTitle>{`${longName} (${shortName})`}</DialogTitle>

src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx

@@ -41,7 +41,10 @@ export const RefreshKeysDialog = (
   };
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-8 flex flex-col gap-2">
+      <DialogContent
+        className="max-w-8 flex flex-col gap-2"
+        aria-describedby={undefined}
+      >
         <DialogClose onClick={handleCloseDialog} />
         <DialogHeader>
           <DialogTitle>{text.title}</DialogTitle>
@@ -77,7 +80,6 @@ export const RefreshKeysDialog = (
             </div>
           </li>
         </ul>
-        {/* </DialogDescription> */}
       </DialogContent>
     </Dialog>
   );

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -27,7 +27,7 @@ const RoutePath = (
   return (
     <span
       id={title}
-      className="ml-4 border-l-2 border-l-background-primary pl-2 text-slate-900 dark:text-slate-900"
+      className="ml-4 border-l-2 pl-2 border-l-slate-900 text-slate-900 dark:text-slate-100 dark:border-l-slate-100"
     >
       <p className="font-semibold">{title}</p>
       <p>{startNode?.user?.longName}</p>

src/components/generic/Table/index.test.tsx

@@ -4,7 +4,6 @@ import { Table } from "@components/generic/Table/index.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
 // @ts-types="react"
-import React from "react";
 
 describe("Generic Table", () => {
   it("Can render an empty table.", () => {
@@ -40,25 +39,46 @@ describe("Generic Table", () => {
 
   // A simplified version of the rows in pages/Nodes.tsx for testing purposes
   const mockDevicesWithShortNameAndConnection = [
-    { user: { shortName: "TST1" }, hopsAway: 1, lastHeard: Date.now() + 1000 },
+    {
-    { user: { shortName: "TST2" }, hopsAway: 0, lastHeard: Date.now() + 4000 },
+      user: { shortName: "TST1" },
-    { user: { shortName: "TST3" }, hopsAway: 4, lastHeard: Date.now() },
+      hopsAway: 1,
-    { user: { shortName: "TST4" }, hopsAway: 3, lastHeard: Date.now() + 2000 },
+      lastHeard: Date.now() + 1000,
+      viaMqtt: false,
+    },
+    {
+      user: { shortName: "TST2" },
+      hopsAway: 0,
+      lastHeard: Date.now() + 4000,
+      viaMqtt: true,
+    },
+    {
+      user: { shortName: "TST3" },
+      hopsAway: 4,
+      lastHeard: Date.now(),
+      viaMqtt: false,
+    },
+    {
+      user: { shortName: "TST4" },
+      hopsAway: 3,
+      lastHeard: Date.now() + 2000,
+      viaMqtt: true,
+    },
   ];
 
   const mockRows = mockDevicesWithShortNameAndConnection.map((node) => [
     <h1 data-testshortname key={node.user.shortName}>{node.user.shortName}</h1>,
-    <React.Fragment key={node.user.shortName}>
+    <Mono key="lastHeard" data-testheard>
       <TimeAgo timestamp={node.lastHeard * 1000} />
-    </React.Fragment>,
+    </Mono>,
     <Mono key="hops" data-testhops>
       {node.lastHeard !== 0
-        ? node.hopsAway === 0
+        ? node.viaMqtt === false && node.hopsAway === 0
           ? "Direct"
           : `${node.hopsAway?.toString()} ${
-            node.hopsAway > 1 ? "hops" : "hop"
+            node.hopsAway ?? 0 > 1 ? "hops" : "hop"
           } away`
         : "-"}
+      {node.viaMqtt === true ? ", via MQTT" : ""}
     </Mono>,
   ]);
 

src/components/generic/Table/index.tsx

@@ -62,16 +62,16 @@ export const Table = ({ headings, rows }: TableProps) => {
     const elementB = getElement(b[columnIndex]);
 
     if (sortColumn === "Last Heard") {
-      const aTimestamp = elementA?.props?.timestamp ?? 0;
+      const aTimestamp = elementA?.props?.children?.props?.timestamp ?? 0;
-      const bTimestamp = elementB?.props?.timestamp ?? 0;
+      const bTimestamp = elementB?.props?.children?.props?.timestamp ?? 0;
       if (aTimestamp < bTimestamp) return sortOrder === "asc" ? -1 : 1;
       if (aTimestamp > bTimestamp) return sortOrder === "asc" ? 1 : -1;
       return 0;
     }
 
     if (sortColumn === "Connection") {
-      const aHopsStr = elementA?.props?.children;
+      const aHopsStr = elementA?.props?.children[0];
-      const bHopsStr = elementB?.props?.children;
+      const bHopsStr = elementB?.props?.children[0];
       const aNumHops = numericHops(aHopsStr);
       const bNumHops = numericHops(bHopsStr);
       if (aNumHops < bNumHops) return sortOrder === "asc" ? -1 : 1;