fix: Key settings is missing from keys/keyAuthId/keyId

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/key-settings-dialog.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { TableActionPopover } from "@/components/logs/table-action.popover";
+import { NavbarActionButton } from "@/components/navigation/action-button";
+import { trpc } from "@/lib/trpc/client";
+import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
+import { Gear } from "@unkey/icons";
+import { getKeysTableActionItems } from "../keys/[keyAuthId]/_components/components/table/components/actions/keys-table-action.popover.constants";
+
+interface KeySettingsDialogProps {
+  keyData: KeyDetails;
+}
+
+export const KeySettingsDialog = ({ keyData }: KeySettingsDialogProps) => {
+  const trpcUtils = trpc.useUtils();
+  const items = getKeysTableActionItems(keyData, trpcUtils);
+
+  return (
+    <TableActionPopover items={items}>
+      <NavbarActionButton>
+        <Gear />
+        Settings
+      </NavbarActionButton>
+    </TableActionPopover>
+  );
+};

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/api-id-navbar.tsx

@@ -2,13 +2,15 @@
 
 import { QuickNavPopover } from "@/components/navbar-popover";
 import { NavbarActionButton } from "@/components/navigation/action-button";
+import { CopyableIDButton } from "@/components/navigation/copyable-id-button";
 import { Navbar } from "@/components/navigation/navbar";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useWorkspaceNavigation } from "@/hooks/use-workspace-navigation";
 import { trpc } from "@/lib/trpc/client";
 import type { Workspace } from "@unkey/db";
-import { ChevronExpandY, Nodes, Plus, TaskUnchecked } from "@unkey/icons";
+import { ChevronExpandY, Gear, Nodes, Plus, TaskUnchecked } from "@unkey/icons";
 import { CreateKeyDialog } from "./_components/create-key";
+import { KeySettingsDialog } from "./_components/key-settings-dialog";
 
 // Types for better type safety
 interface ApiLayoutData {
@@ -83,10 +85,6 @@ const LoadingNavbar = ({ workspace }: LoadingNavbarProps) => (
       </Navbar.Breadcrumbs.Link>
     </Navbar.Breadcrumbs>
     <Navbar.Actions>
-      <NavbarActionButton disabled>
-        <Plus />
-        Create new key
-      </NavbarActionButton>
       <div className="h-7 bg-grayA-2 border border-gray-6 rounded-md animate-pulse px-3 flex gap-2 items-center justify-center w-[190px] transition-all ">
         <div className="h-3 w-[190px] bg-grayA-3 rounded" />
         <div>
@@ -108,12 +106,32 @@ const NavbarContent = ({
 }: NavbarContentProps) => {
   const shouldFetchKey = Boolean(keyspaceId && keyId);
 
-  // If we expected to find a key but this component doesn't handle key details,
-  // we should handle this at a higher level or in a different component
-  if (shouldFetchKey) {
-    console.warn("Key fetching logic should be handled at a higher level");
+  // Fetch key details when viewing a specific key
+  const {
+    data: keyData,
+    isLoading: isKeyLoading,
+    error: keyError,
+  } = trpc.api.keys.list.useQuery(
+    {
+      // This cannot be empty string but required to silence TS errors
+      keyAuthId: keyspaceId ?? "",
+      // This cannot be empty string but required to silence TS errors
+      keyIds: [{ operator: "is", value: keyId ?? "" }],
+      cursor: null,
+      identities: null,
+      limit: 1,
+      names: null,
+    },
+    {
+      enabled: shouldFetchKey,
+    },
+  );
+
+  if (keyError) {
+    throw new Error(`Failed to fetch key details: ${keyError.message}`);
   }
 
+  const specificKey = keyData?.keys.find((key) => key.id === keyId);
   const { currentApi } = layoutData;
 
   // Define base path for API navigation
@@ -171,19 +189,34 @@ const NavbarContent = ({
             </QuickNavPopover>
           </Navbar.Breadcrumbs.Link>
         </Navbar.Breadcrumbs>
-        {layoutData.keyAuth ? (
-          <CreateKeyDialog
-            keyspaceId={layoutData.keyAuth.id}
-            apiId={currentApi.id}
-            copyIdValue={currentApi.id}
-            keyspaceDefaults={currentApi.keyspaceDefaults}
-          />
-        ) : (
-          <NavbarActionButton disabled>
-            <Plus />
-            Create new key
-          </NavbarActionButton>
-        )}
+        <Navbar.Actions>
+          {shouldFetchKey && specificKey ? (
+            <>
+              <KeySettingsDialog keyData={specificKey} />
+              <CopyableIDButton value={keyId as string} />
+            </>
+          ) : shouldFetchKey && isKeyLoading ? (
+            <>
+              <NavbarActionButton disabled>
+                <Gear />
+                Settings
+              </NavbarActionButton>
+              <CopyableIDButton value={keyId as string} />
+            </>
+          ) : layoutData.keyAuth ? (
+            <CreateKeyDialog
+              keyspaceId={layoutData.keyAuth.id}
+              apiId={currentApi.id}
+              copyIdValue={currentApi.id}
+              keyspaceDefaults={currentApi.keyspaceDefaults}
+            />
+          ) : (
+            <NavbarActionButton disabled>
+              <Plus />
+              Create new key
+            </NavbarActionButton>
+          )}
+        </Navbar.Actions>
       </Navbar>
     </div>
   );