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

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",