Skip to content

chore: Navigation becomes loosely tied to the pages #2927

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chronark merged 6 commits into from
Feb 28, 2025
Merged

chore: Navigation becomes loosely tied to the pages #2927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f524191
Split navigation into a navigation.tsx
perkinsjr Feb 27, 2025
021252a
formats the code
perkinsjr Feb 27, 2025
6dd6f56
Refactoring
perkinsjr Feb 27, 2025
8a36a4f
format all code
perkinsjr Feb 27, 2025
5c52b7f
vercel insted of billing
perkinsjr Feb 27, 2025
7be51ac
Merge branch 'main' into navbar-fixes
ogzhanolguncu Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
"use client";

import { CopyButton } from "@/components/dashboard/copy-button";
import { CreateKeyButton } from "@/components/dashboard/create-key-button";
import { Navbar } from "@/components/navigation/navbar";
import { Badge } from "@/components/ui/badge";
import type { Api } from "@unkey/db";
import { Nodes } from "@unkey/icons";

type Key = {
id: string;
keyAuth: {
id: string;
};
};

interface NavigationProps {
api: Api;
apiKey: Key;
}

export function Navigation({ api, apiKey }: NavigationProps) {
return (
<Navbar>
<Navbar.Breadcrumbs icon={<Nodes />}>
<Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${api.id}`} isIdentifier>
{api.name}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Ellipsis />
<Navbar.Breadcrumbs.Link
href={`/apis/${api.id}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
isIdentifier
active
>
{apiKey.id}
</Navbar.Breadcrumbs.Link>
</Navbar.Breadcrumbs>
<Navbar.Actions>
<Badge
variant="secondary"
className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
>
{apiKey.id}
<CopyButton value={apiKey.id} />
</Badge>

<CreateKeyButton apiId={api.id} keyAuthId={apiKey.keyAuth.id} />
</Navbar.Actions>
</Navbar>
);
}
33 changes: 2 additions & 31 deletions apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ import { CreateNewPermission } from "@/app/(app)/authorization/permissions/creat
import type { NestedPermissions } from "@/app/(app)/authorization/roles/[roleId]/tree";
import { CreateNewRole } from "@/app/(app)/authorization/roles/create-new-role";
import { StackedColumnChart } from "@/components/dashboard/charts";
import { CopyButton } from "@/components/dashboard/copy-button";
import { CreateKeyButton } from "@/components/dashboard/create-key-button";
import { Navbar } from "@/components/navbar";
import { PageContent } from "@/components/page-content";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
Expand All @@ -18,12 +15,12 @@ import { getTenantId } from "@/lib/auth";
import { clickhouse } from "@/lib/clickhouse";
import { and, db, eq, isNull, schema } from "@/lib/db";
import { formatNumber } from "@/lib/fmt";
import { Nodes } from "@unkey/icons";
import { Empty } from "@unkey/ui";
import { Button } from "@unkey/ui";
import { Minus } from "lucide-react";
import ms from "ms";
import { notFound } from "next/navigation";
import { Navigation } from "./navigation";
import PermissionTree from "./permission-list";
import { VerificationTable } from "./verification-table";
export default async function APIKeyDetailPage(props: {
Expand Down Expand Up @@ -264,33 +261,7 @@ export default async function APIKeyDetailPage(props: {

return (
<div>
<Navbar>
<Navbar.Breadcrumbs icon={<Nodes />}>
<Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
{api.name}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Ellipsis />
<Navbar.Breadcrumbs.Link
href={`/apis/${props.params.apiId}/keys/${key.keyAuth.id}/${key.id}`}
isIdentifier
active
>
{key.id}
</Navbar.Breadcrumbs.Link>
</Navbar.Breadcrumbs>
<Navbar.Actions>
<Badge
variant="secondary"
className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
>
{key.id}
<CopyButton value={key.id} />
</Badge>

<CreateKeyButton apiId={api.id} keyAuthId={key.keyAuthId} />
</Navbar.Actions>
</Navbar>
<Navigation api={api} apiKey={key} />

<PageContent>
<div className="flex flex-col">
Expand Down
59 changes: 59 additions & 0 deletions apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
"use client";

import { CopyButton } from "@/components/dashboard/copy-button";
import { CreateKeyButton } from "@/components/dashboard/create-key-button";
import { Navbar } from "@/components/navigation/navbar";
import { Badge } from "@/components/ui/badge";
import { Nodes } from "@unkey/icons";

type Key = {
id: string;
keyAuth: {
id: string;
api: {
id: string;
name: string;
};
};
};

interface NavigationProps {
apiId: string;
apiKey: Key;
}

export function Navigation({ apiId, apiKey }: NavigationProps) {
return (
<Navbar>
<Navbar.Breadcrumbs icon={<Nodes />}>
<Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
{apiKey.keyAuth.api.name}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Ellipsis />
<Navbar.Breadcrumbs.Link
href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}`}
isIdentifier
>
{apiKey.id}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link
href={`/apis/${apiId}/keys/${apiKey.keyAuth.id}/${apiKey.id}/settings`}
active
>
Settings
</Navbar.Breadcrumbs.Link>
</Navbar.Breadcrumbs>
<Navbar.Actions>
<Badge
variant="secondary"
className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
>
{apiKey.id}
<CopyButton value={apiKey.id} />
</Badge>
<CreateKeyButton apiId={apiKey.keyAuth.api.id} keyAuthId={apiKey.keyAuth.id} />
</Navbar.Actions>
</Navbar>
);
}
37 changes: 2 additions & 35 deletions apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import { CopyButton } from "@/components/dashboard/copy-button";
import { CreateKeyButton } from "@/components/dashboard/create-key-button";
import { Navbar } from "@/components/navbar";
import { PageContent } from "@/components/page-content";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Code } from "@/components/ui/code";
import { getTenantId } from "@/lib/auth";
import { and, db, eq, isNull, schema } from "@/lib/db";
import { Nodes } from "@unkey/icons";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import { notFound } from "next/navigation";
import { DeleteKey } from "./delete-key";
import { Navigation } from "./navigation";
import { UpdateKeyEnabled } from "./update-key-enabled";
import { UpdateKeyExpiration } from "./update-key-expiration";
import { UpdateKeyMetadata } from "./update-key-metadata";
Expand Down Expand Up @@ -44,37 +41,7 @@ export default async function SettingsPage(props: Props) {

return (
<div>
<Navbar>
<Navbar.Breadcrumbs icon={<Nodes />}>
<Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
{key.keyAuth.api.name}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Ellipsis />
<Navbar.Breadcrumbs.Link
href={`/apis/${props.params.apiId}/keys/${key.keyAuth.id}/${key.id}`}
isIdentifier
>
{key.id}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link
href={`/apis/${props.params.apiId}/keys/${key.keyAuth.id}/${key.id}/settings`}
active
>
Settings
</Navbar.Breadcrumbs.Link>
</Navbar.Breadcrumbs>
<Navbar.Actions>
<Badge
variant="secondary"
className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
>
{key.id}
<CopyButton value={key.id} />
</Badge>
<CreateKeyButton apiId={key.keyAuth.api.id} keyAuthId={key.keyAuth.id} />
</Navbar.Actions>
</Navbar>
<Navigation apiId={props.params.apiId} apiKey={key} />

<PageContent>
<div className="mb-20 flex flex-col gap-8 ">
Expand Down
51 changes: 51 additions & 0 deletions apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
"use client";

import { CopyButton } from "@/components/dashboard/copy-button";
import { CreateKeyButton } from "@/components/dashboard/create-key-button";
import { Navbar } from "@/components/navigation/navbar";
import { Badge } from "@/components/ui/badge";
import { Nodes } from "@unkey/icons";

type KeyAuthProps = {
id: string;
api: {
id: string;
name: string;
keyAuthId: string | null;
};
workspace: {
tenantId: string;
};
};

interface NavigationProps {
apiId: string;
keyA: KeyAuthProps;
}

export function Navigation({ apiId, keyA }: NavigationProps) {
return (
<Navbar>
<Navbar.Breadcrumbs icon={<Nodes />}>
<Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
{keyA.api.name}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link active href={`/apis/${apiId}/keys/${keyA.id}`}>
Keys
</Navbar.Breadcrumbs.Link>
</Navbar.Breadcrumbs>
<Navbar.Actions>
<Badge
key="apiId"
variant="secondary"
className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
>
{keyA.api.id}
<CopyButton value={keyA.api.id} />
</Badge>
<CreateKeyButton apiId={keyA.api.id} keyAuthId={keyA.api.keyAuthId!} />
</Navbar.Actions>
</Navbar>
);
}
52 changes: 52 additions & 0 deletions apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
"use client";

import { CopyButton } from "@/components/dashboard/copy-button";
import { Navbar } from "@/components/navigation/navbar";
import { Badge } from "@/components/ui/badge";
import { Nodes } from "@unkey/icons";

type KeyAuthProps = {
id: string;
api: {
id: string;
name: string;
keyAuthId: string | null;
};
workspace: {
tenantId: string;
};
};

interface NavigationProps {
apiId: string;
keyA: KeyAuthProps;
}

export function Navigation({ apiId, keyA }: NavigationProps) {
return (
<Navbar>
<Navbar.Breadcrumbs icon={<Nodes />}>
<Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${apiId}`} isIdentifier>
{keyA.api.name}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${apiId}/keys/${keyA.id}`}>
Keys
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link active href={`/apis/${apiId}/keys/${keyA.id}/new`}>
Create new key
</Navbar.Breadcrumbs.Link>
</Navbar.Breadcrumbs>
<Navbar.Actions>
<Badge
key="apiId"
variant="secondary"
className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
>
{keyA.api.id}
<CopyButton value={keyA.api.id} />
</Badge>
</Navbar.Actions>
</Navbar>
);
}
33 changes: 2 additions & 31 deletions apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import { CopyButton } from "@/components/dashboard/copy-button";
import { Navbar } from "@/components/navbar";
import { PageContent } from "@/components/page-content";
import { Badge } from "@/components/ui/badge";
import { getTenantId } from "@/lib/auth";
import { db } from "@/lib/db";
import { Nodes } from "@unkey/icons";
import { notFound } from "next/navigation";
import { CreateKey } from "./client";
import { Navigation } from "./navigation";

export default async function CreateKeypage(props: {
params: {
Expand All @@ -30,33 +27,7 @@ export default async function CreateKeypage(props: {

return (
<div>
<Navbar>
<Navbar.Breadcrumbs icon={<Nodes />}>
<Navbar.Breadcrumbs.Link href="/apis">APIs</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}`} isIdentifier>
{keyAuth.api.name}
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link href={`/apis/${props.params.apiId}/keys/${keyAuth.id}`}>
Keys
</Navbar.Breadcrumbs.Link>
<Navbar.Breadcrumbs.Link
active
href={`/apis/${props.params.apiId}/keys/${keyAuth.id}/new`}
>
Create new key
</Navbar.Breadcrumbs.Link>
</Navbar.Breadcrumbs>
<Navbar.Actions>
<Badge
key="apiId"
variant="secondary"
className="flex justify-between w-full gap-2 font-mono font-medium ph-no-capture"
>
{keyAuth.api.id}
<CopyButton value={keyAuth.api.id} />
</Badge>
</Navbar.Actions>
</Navbar>
<Navigation apiId={props.params.apiId} keyA={keyAuth} />

<PageContent>
<CreateKey
Expand Down
Loading
Loading