Add fallbacks for setup key name & setup key group names (#370)

* Add try catch block for global search

* Add fallback for group name

* Add fallback for setup key name

* Do not load setup key modal if it's not open

* Check if auto_groups actually exists for the setup keys

* Add fallback for group names in setup keys table

* Add fallback for group names in peers table

Author: heisbrot

src/app/(dashboard)/setup-keys/page.tsx

@@ -7,7 +7,7 @@ import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useMemo } from "react";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { Group } from "@/interfaces/Group";
@@ -22,16 +22,21 @@ export default function SetupKeys() {
   const { data: setupKeys, isLoading } = useFetchApi<SetupKey[]>("/setup-keys");
   const { groups } = useGroups();
 
-  const setupKeysWithGroups = setupKeys?.map((setupKey) => {
-    if (!setupKey.auto_groups) return setupKey;
-    if (!groups) return setupKey;
-    return {
-      ...setupKey,
-      groups: setupKey.auto_groups.map((group) => {
-        return groups.find((g) => g.id === group) || undefined;
-      }) as Group[] | undefined,
-    };
-  });
+  const setupKeysWithGroups = useMemo(() => {
+    if (!setupKeys) return [];
+    return setupKeys?.map((setupKey) => {
+      if (!setupKey.auto_groups) return setupKey;
+      if (!groups) return setupKey;
+      return {
+        ...setupKey,
+        groups: setupKey.auto_groups
+          ?.map((group) => {
+            return groups.find((g) => g.id === group) || undefined;
+          })
+          .filter((group) => group !== undefined) as Group[],
+      };
+    });
+  }, [setupKeys, groups]);
 
   return (
     <PageContainer>

src/components/table/DataTable.tsx

@@ -55,11 +55,15 @@ declare module "@tanstack/table-core" {
 }
 
 const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
-  const val = row.getValue(columnId);
-  if (!val) return false;
-  if (typeof val !== "string") return false;
-  const lowerCaseValue = removeAllSpaces(trim(value.toLowerCase()));
-  return val.toLowerCase().includes(lowerCaseValue);
+  try {
+    const val = row.getValue(columnId);
+    if (!val) return false;
+    if (typeof val !== "string") return false;
+    const lowerCaseValue = removeAllSpaces(trim(value.toLowerCase()));
+    return val.toLowerCase().includes(lowerCaseValue);
+  } catch (e) {
+    return false;
+  }
 };
 
 const exactMatch: FilterFn<any> = (row, columnId, value) => {

src/components/ui/GroupBadge.tsx

@@ -21,14 +21,14 @@ export default function GroupBadge({
 }: Props) {
   return (
     <Badge
-      key={group.name}
+      key={group.id}
       useHover={true}
       variant={"gray-ghost"}
       className={cn("transition-all group whitespace-nowrap", className)}
       onClick={onClick}
     >
       <FolderGit2 size={12} className={"shrink-0"} />
-      <TextWithTooltip text={group.name} maxChars={20} />
+      <TextWithTooltip text={group?.name || ""} maxChars={20} />
       {children}
       {showX && (
         <XIcon

src/modules/groups/GroupSelector.tsx

@@ -142,7 +142,8 @@ export function GroupSelector({
                 <div className={""}>
                   <div className={"grid grid-cols-1 gap-1"}>
                     {orderBy(groups, "name")?.map((item) => {
-                      const value = item.name;
+                      const value = item?.name || "";
+                      if (value === "") return null;
                       const isSelected =
                         values.find((c) => c == value) != undefined;
 

src/modules/peers/PeersTable.tsx

@@ -72,12 +72,12 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
   },
   {
     accessorKey: "group_name_strings",
-    accessorFn: (peer) => peer.groups?.map((g) => g.name).join(", "),
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join(", "),
     sortingFn: "text",
   },
   {
     accessorKey: "group_names",
-    accessorFn: (peer) => peer.groups?.map((g) => g.name),
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || ""),
     sortingFn: "text",
     filterFn: "arrIncludesSome",
   },

src/modules/setup-keys/SetupKeyActionCell.tsx

@@ -17,11 +17,11 @@ export default function SetupKeyActionCell({ setupKey }: Props) {
 
   const handleRevoke = async () => {
     notify({
-      title: "Setup Key: " + setupKey.name,
+      title: setupKey?.name || "Setup Key",
       description: "Setup key was successfully revoked",
       promise: deleteRequest
         .put({
-          name: setupKey.name,
+          name: setupKey?.name || "Setup Key",
           type: setupKey.type,
           expires_in: setupKey.expires_in,
           revoked: true,
@@ -39,7 +39,7 @@ export default function SetupKeyActionCell({ setupKey }: Props) {
 
   const handleConfirm = async () => {
     const choice = await confirm({
-      title: `Revoke '${setupKey.name}'?`,
+      title: `Revoke '${setupKey?.name || "Setup Key"}'?`,
       description:
         "Are you sure you want to revoke the setup key? This action cannot be undone.",
       confirmText: "Revoke",

src/modules/setup-keys/SetupKeyGroupsCell.tsx

@@ -17,15 +17,15 @@ export default function SetupKeyGroupsCell({ setupKey }: Props) {
     const groups = await Promise.all(promises);
 
     notify({
-      title: setupKey.name,
+      title: setupKey?.name || "Setup Key",
       description: "Groups of the setup key were successfully saved",
       promise: request
         .put({
-          name: setupKey.name,
+          name: setupKey?.name || "Setup Key",
           type: setupKey.type,
           expires_in: setupKey.expires_in,
           revoked: setupKey.revoked,
-          auto_groups: groups.map((group) => group.id),
+          auto_groups: groups?.map((group) => group.id) || [],
           usage_limit: setupKey.usage_limit,
           ephemeral: setupKey.ephemeral,
         })

src/modules/setup-keys/SetupKeysTable.tsx

@@ -52,7 +52,7 @@ export default function SetupKeysTable({ setupKeys, isLoading }: Props) {
 
   return (
     <>
-      <SetupKeyModal open={open} setOpen={setOpen} />
+      {open && <SetupKeyModal open={open} setOpen={setOpen} />}
       <DataTable
         isLoading={isLoading}
         text={"Setup Keys"}

src/modules/setup-keys/SetupKeysTableColumns.tsx

@@ -39,7 +39,10 @@ export const SetupKeysTableColumns: ColumnDef<SetupKey>[] = [
     },
     sortingFn: "text",
     cell: ({ row }) => (
-      <SetupKeyNameCell valid={row.original.valid} name={row.original.name} />
+      <SetupKeyNameCell
+        valid={row.original.valid}
+        name={row.original?.name || ""}
+      />
     ),
   },
   {
@@ -66,7 +69,7 @@ export const SetupKeysTableColumns: ColumnDef<SetupKey>[] = [
   {
     id: "group_strings",
     accessorKey: "group_strings",
-    accessorFn: (s) => s.groups?.map((g) => g.name).join(", "),
+    accessorFn: (s) => s.groups?.map((g) => g?.name || "").join(", "),
   },
   {
     accessorKey: "last_used",