feat: root keys table - Merge after #3331

apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/assigned-items-cell.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { Page2 } from "@unkey/icons";
+
+export const AssignedItemsCell = ({
+  permissionSummary,
+  isSelected = false,
+}: {
+  permissionSummary: {
+    total: number;
+    categories: Record<string, number>;
+  };
+  isSelected?: boolean;
+}) => {
+  const { total } = permissionSummary;
+
+  const itemClassName = cn(
+    "font-mono rounded-md py-[2px] px-1.5 items-center w-fit flex gap-2 transition-all duration-100 border border-dashed text-grayA-12",
+    isSelected ? "bg-grayA-4 border-grayA-7" : "bg-grayA-3 border-grayA-6 group-hover:bg-grayA-4",
+  );
+
+  const emptyClassName = cn(
+    "rounded-md py-[2px] px-1.5 items-center w-fit flex gap-2 transition-all duration-100 border border-dashed bg-grayA-2",
+    isSelected ? "border-grayA-7 text-grayA-9" : "border-grayA-6 text-grayA-8",
+  );
+
+  if (total === 0) {
+    return (
+      <div className="flex flex-col gap-1 py-1 max-w-[300px]">
+        <div className={emptyClassName}>
+          <Page2 className="size-3" />
+          <span className="text-grayA-9 text-xs">None assigned</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1 py-2 max-w-[300px]">
+      <div className={itemClassName}>
+        <Page2 className="size-3" />
+        <span className="text-grayA-11 text-xs max-w-[150px] truncate">{total} Permissions</span>
+      </div>
+    </div>
+  );
+};

apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/critical-perm-warning.tsx

@@ -0,0 +1,39 @@
+import type { RootKey } from "@/lib/trpc/routers/settings/root-keys/query";
+import { InfoTooltip } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+
+type CriticalPermissionIndicatorProps = {
+  rootKey: RootKey;
+  isSelected: boolean;
+};
+
+export const CriticalPermissionIndicator = ({
+  rootKey,
+  isSelected,
+}: CriticalPermissionIndicatorProps) => {
+  const hasCriticalPerm = rootKey.permissionSummary.hasCriticalPerm;
+
+  if (!hasCriticalPerm) {
+    return <div className="w-2" />;
+  }
+  return (
+    <InfoTooltip
+      variant="inverted"
+      content={
+        <div className="text-xs">
+          <div className="font-medium">
+            This root key has critical permissions that can permanently destroy data or compromise
+            security.
+          </div>
+        </div>
+      }
+    >
+      <div
+        className={cn(
+          "size-2 rounded-full cursor-pointer ml-auto",
+          isSelected ? "bg-orange-11" : "bg-orange-10 hover:bg-orange-11",
+        )}
+      />
+    </InfoTooltip>
+  );
+};

apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/last-updated.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import { ChartActivity2 } from "@unkey/icons";
+import { Badge, TimestampInfo } from "@unkey/ui";
+import { useRef, useState } from "react";
+import { STATUS_STYLES } from "../utils/get-row-class";
+
+export const LastUpdated = ({
+  isSelected,
+  lastUpdated,
+}: {
+  isSelected: boolean;
+  lastUpdated?: number | null;
+}) => {
+  const badgeRef = useRef<HTMLDivElement>(null);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <Badge
+      ref={badgeRef}
+      className={cn(
+        "px-1.5 rounded-md flex gap-2 items-center max-w-min h-[22px] border-none cursor-pointer",
+        isSelected ? STATUS_STYLES.badge.selected : STATUS_STYLES.badge.default,
+      )}
+      onMouseOver={() => {
+        setShowTooltip(true);
+      }}
+      onMouseLeave={() => {
+        setShowTooltip(false);
+      }}
+    >
+      <div>
+        <ChartActivity2 size="sm-regular" />
+      </div>
+      <div className="truncate">
+        {lastUpdated ? (
+          <TimestampInfo
+            displayType="relative"
+            value={lastUpdated}
+            className="truncate"
+            triggerRef={badgeRef}
+            open={showTooltip}
+            onOpenChange={setShowTooltip}
+          />
+        ) : (
+          "Never used"
+        )}
+      </div>
+    </Badge>
+  );
+};

apps/dashboard/app/(app)/settings/root-keys-v2/components/table/components/skeletons.tsx

@@ -0,0 +1,66 @@
+import { cn } from "@/lib/utils";
+import { ChartActivity2, Dots, Key2, Page2 } from "@unkey/icons";
+
+export const RootKeyColumnSkeleton = () => (
+  <div className="flex flex-col items-start px-[18px] py-[6px]">
+    <div className="flex gap-4 items-center">
+      <div className="size-5 rounded flex items-center justify-center border border-grayA-3 bg-grayA-3 animate-pulse">
+        <Key2 size="sm-regular" className="text-gray-12 opacity-50" />
+      </div>
+      <div className="h-4 w-24 bg-grayA-3 rounded animate-pulse" />
+    </div>
+  </div>
+);
+
+export const CreatedAtColumnSkeleton = () => (
+  <div className="flex flex-col items-start py-[6px]">
+    <div className="h-4 w-24 bg-grayA-3 rounded animate-pulse" />
+  </div>
+);
+export const KeyColumnSkeleton = () => (
+  <div className="rounded-lg border bg-grayA-2 border-grayA-3 text-transparent w-[160px] px-2 py-1 flex gap-2 items-center h-[28px] animate-pulse">
+    <div className="h-2 w-2 bg-grayA-3 rounded-full animate-pulse" />
+    <div className="h-2 w-full bg-grayA-3 rounded animate-pulse" />
+  </div>
+);
+
+export const AssignedKeysColumnSkeleton = () => (
+  <div className="flex flex-col gap-1 py-2 max-w-[200px]">
+    <div className="rounded-md py-[2px] px-1.5 items-center w-fit flex gap-2 border border-dashed bg-grayA-3 border-grayA-6 animate-pulse h-[22px]">
+      <Key2 size="md-regular" className="opacity-50" />
+      <div className="h-2 w-12 bg-grayA-3 rounded animate-pulse" />
+    </div>
+  </div>
+);
+
+export const PermissionsColumnSkeleton = () => (
+  <div className="flex flex-col gap-1 py-2 max-w-[200px]">
+    <div className="rounded-md py-[2px] px-1.5 items-center w-fit flex gap-2 border border-dashed bg-grayA-3 border-grayA-6 animate-pulse h-[22px]">
+      <Page2 className="size-3 opacity-50" size="md-regular" />
+      <div className="h-2 w-20 bg-grayA-3 rounded animate-pulse" />
+    </div>
+    <div className="rounded-md py-[2px] px-1.5 items-center w-fit flex gap-2 border border-dashed bg-grayA-3 border-grayA-6 animate-pulse h-[22px]">
+      <Page2 className="size-3 opacity-50" size="md-regular" />
+      <div className="h-2 w-16 bg-grayA-3 rounded animate-pulse" />
+    </div>
+  </div>
+);
+
+export const LastUpdatedColumnSkeleton = () => (
+  <div className="px-1.5 rounded-md flex gap-2 items-center max-w-min h-[22px] bg-grayA-3 border-none animate-pulse">
+    <ChartActivity2 size="sm-regular" className="opacity-50" />
+    <div className="h-2 w-16 bg-grayA-3 rounded animate-pulse" />
+  </div>
+);
+
+export const ActionColumnSkeleton = () => (
+  <button
+    type="button"
+    className={cn(
+      "group size-5 p-0 rounded m-0 items-center flex justify-center animate-pulse",
+      "border border-gray-6",
+    )}
+  >
+    <Dots className="text-gray-11" size="sm-regular" />
+  </button>
+);

apps/dashboard/app/(app)/settings/root-keys-v2/components/table/hooks/use-root-keys-list-query.ts

@@ -0,0 +1,82 @@
+import { trpc } from "@/lib/trpc/client";
+import type { RootKey } from "@/lib/trpc/routers/settings/root-keys/query";
+import { useEffect, useMemo, useState } from "react";
+import { rootKeysFilterFieldConfig, rootKeysListFilterFieldNames } from "../../../filters.schema";
+import { useFilters } from "../../../hooks/use-filters";
+import type { RootKeysQueryPayload } from "../query-logs.schema";
+
+export function useRootKeysListQuery() {
+  const [totalCount, setTotalCount] = useState(0);
+  const [rootKeysMap, setRootKeysMap] = useState(() => new Map<string, RootKey>());
+  const { filters } = useFilters();
+
+  const rootKeys = useMemo(() => Array.from(rootKeysMap.values()), [rootKeysMap]);
+
+  const queryParams = useMemo(() => {
+    const params: RootKeysQueryPayload = {
+      ...Object.fromEntries(rootKeysListFilterFieldNames.map((field) => [field, []])),
+    };
+
+    filters.forEach((filter) => {
+      if (!rootKeysListFilterFieldNames.includes(filter.field) || !params[filter.field]) {
+        return;
+      }
+
+      const fieldConfig = rootKeysFilterFieldConfig[filter.field];
+      const validOperators = fieldConfig.operators;
+      if (!validOperators.includes(filter.operator)) {
+        throw new Error("Invalid operator");
+      }
+
+      if (typeof filter.value === "string") {
+        params[filter.field]?.push({
+          operator: filter.operator,
+          value: filter.value,
+        });
+      }
+    });
+
+    return params;
+  }, [filters]);
+
+  const {
+    data: rootKeyData,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    isLoading: isLoadingInitial,
+  } = trpc.settings.rootKeys.query.useInfiniteQuery(queryParams, {
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    staleTime: Number.POSITIVE_INFINITY,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  useEffect(() => {
+    if (rootKeyData) {
+      const newMap = new Map<string, RootKey>();
+
+      rootKeyData.pages.forEach((page) => {
+        page.keys.forEach((rootKey) => {
+          // Use slug as the unique identifier
+          newMap.set(rootKey.id, rootKey);
+        });
+      });
+
+      if (rootKeyData.pages.length > 0) {
+        setTotalCount(rootKeyData.pages[0].total);
+      }
+
+      setRootKeysMap(newMap);
+    }
+  }, [rootKeyData]);
+
+  return {
+    rootKeys,
+    isLoading: isLoadingInitial,
+    hasMore: hasNextPage,
+    loadMore: fetchNextPage,
+    isLoadingMore: isFetchingNextPage,
+    totalCount,
+  };
+}

apps/dashboard/app/(app)/settings/root-keys-v2/components/table/query-logs.schema.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+import { rootKeysFilterOperatorEnum, rootKeysListFilterFieldNames } from "../../filters.schema";
+
+const filterItemSchema = z.object({
+  operator: rootKeysFilterOperatorEnum,
+  value: z.string(),
+});
+
+const baseFilterArraySchema = z.array(filterItemSchema).nullish();
+
+const filterFieldsSchema = rootKeysListFilterFieldNames.reduce(
+  (acc, fieldName) => {
+    acc[fieldName] = baseFilterArraySchema;
+    return acc;
+  },
+  {} as Record<string, typeof baseFilterArraySchema>,
+);
+
+const baseRootKeysSchema = z.object(filterFieldsSchema);
+
+export const rootKeysQueryPayload = baseRootKeysSchema.extend({
+  cursor: z.number().nullish(),
+});
+
+export type RootKeysQueryPayload = z.infer<typeof rootKeysQueryPayload>;