Skip to content

Commit

Permalink
[autofix.ci] apply automated fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@autofix-ci
autofix-ci[bot] authored Sep 19, 2024
1 parent f184be8 commit c7a8352
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 154 deletions.
23 changes: 4 additions & 19 deletions apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,7 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/components/ui/form";
import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "@/components/ui/toaster";
Expand Down Expand Up @@ -75,8 +69,7 @@ export const UpdateRootKeyName: React.FC<Props> = ({ apiKey }) => {
<CardHeader>
<CardTitle>Name</CardTitle>
<CardDescription>
Give your root key a name. This is optional and not customer
facing.
Give your root key a name. This is optional and not customer facing.
</CardDescription>
</CardHeader>
<CardContent className="flex justify-between item-center">
Expand All @@ -89,12 +82,7 @@ export const UpdateRootKeyName: React.FC<Props> = ({ apiKey }) => {
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
type="string"
className="h-8 max-w-sm"
autoComplete="off"
/>
<Input {...field} type="string" className="h-8 max-w-sm" autoComplete="off" />
</FormControl>
<FormMessage />
</FormItem>
Expand All @@ -103,10 +91,7 @@ export const UpdateRootKeyName: React.FC<Props> = ({ apiKey }) => {
</div>
</CardContent>
<CardFooter className="justify-end">
<Button
disabled={updateName.isLoading || !form.formState.isValid}
type="submit"
>
<Button disabled={updateName.isLoading || !form.formState.isValid} type="submit">
{updateName.isLoading ? <Loading /> : "Save"}
</Button>
</CardFooter>
Expand Down
215 changes: 80 additions & 135 deletions apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,7 @@ import { VisibleButton } from "@/components/dashboard/visible-button";
import { Button } from "@/components/ui/button";
import { Code } from "@/components/ui/code";

import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import {
Dialog,
Expand All @@ -25,19 +19,12 @@ import {
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "@/components/ui/toaster";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { trpc } from "@/lib/trpc/client";
import type { UnkeyPermission } from "@unkey/rbac";
import { useRouter } from "next/navigation";
import { useState } from "react";
import {
apiPermissions,
workspacePermissions,
} from "../[keyId]/permissions/permissions";
import { apiPermissions, workspacePermissions } from "../[keyId]/permissions/permissions";
type Props = {
apis: {
id: string;
Expand All @@ -48,9 +35,7 @@ type Props = {
export const Client: React.FC<Props> = ({ apis }) => {
const router = useRouter();
const [name, setName] = useState<string | undefined>(undefined);
const [selectedPermissions, setSelectedPermissions] = useState<
UnkeyPermission[]
>([]);
const [selectedPermissions, setSelectedPermissions] = useState<UnkeyPermission[]>([]);

const key = trpc.rootKey.create.useMutation({
onError(err) {
Expand All @@ -59,19 +44,15 @@ export const Client: React.FC<Props> = ({ apis }) => {
},
});

const snippet = `curl -XPOST '${
process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.dev"
}/v1/keys.createKey' \\
const snippet = `curl -XPOST '${process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.dev"}/v1/keys.createKey' \\
-H 'Authorization: Bearer ${key.data?.key}' \\
-H 'Content-Type: application/json' \\
-d '{
"prefix": "hello",
"apiId": "<API_ID>"
}'`;

const maskedKey = `unkey_${"*".repeat(
key.data?.key.split("_").at(1)?.length ?? 0
)}`;
const maskedKey = `unkey_${"*".repeat(key.data?.key.split("_").at(1)?.length ?? 0)}`;
const [showKey, setShowKey] = useState(false);
const [showKeyInSnippet, setShowKeyInSnippet] = useState(false);

Expand Down Expand Up @@ -108,58 +89,45 @@ export const Client: React.FC<Props> = ({ apis }) => {
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4">
{Object.entries(workspacePermissions).map(
([category, allPermissions]) => {
const allPermissionNames = Object.values(allPermissions).map(
({ permission }) => permission
);
const isAllSelected = allPermissionNames.every((permission) =>
selectedPermissions.includes(permission)
);
{Object.entries(workspacePermissions).map(([category, allPermissions]) => {
const allPermissionNames = Object.values(allPermissions).map(
({ permission }) => permission,
);
const isAllSelected = allPermissionNames.every((permission) =>
selectedPermissions.includes(permission),
);

return (
<div
key={`workspace-${category}`}
className="flex flex-col gap-2"
>
<div className="flex flex-col">
return (
<div key={`workspace-${category}`} className="flex flex-col gap-2">
<div className="flex flex-col">
<PermissionToggle
permissionName={`selectAll-${category}`}
label={<span className="text-base font-bold">{category}</span>}
description={`Select all permissions for ${category} in this workspace`}
checked={isAllSelected}
setChecked={(isChecked) => {
allPermissionNames.forEach((permission) => {
handleSetChecked(permission, isChecked);
});
}}
/>
</div>

<div className="flex flex-col gap-1">
{Object.entries(allPermissions).map(([action, { description, permission }]) => (
<PermissionToggle
permissionName={`selectAll-${category}`}
label={
<span className="text-base font-bold">
{category}
</span>
}
description={`Select all permissions for ${category} in this workspace`}
checked={isAllSelected}
setChecked={(isChecked) => {
allPermissionNames.forEach((permission) => {
handleSetChecked(permission, isChecked);
});
}}
key={action}
permissionName={permission}
label={action}
description={description}
checked={selectedPermissions.includes(permission)}
setChecked={(isChecked) => handleSetChecked(permission, isChecked)}
/>
</div>

<div className="flex flex-col gap-1">
{Object.entries(allPermissions).map(
([action, { description, permission }]) => (
<PermissionToggle
key={action}
permissionName={permission}
label={action}
description={description}
checked={selectedPermissions.includes(permission)}
setChecked={(isChecked) =>
handleSetChecked(permission, isChecked)
}
/>
)
)}
</div>
))}
</div>
);
}
)}
</div>
);
})}
</div>
</CardContent>
</Card>
Expand All @@ -168,64 +136,49 @@ export const Client: React.FC<Props> = ({ apis }) => {
<CardHeader>
<CardTitle>{api.name}</CardTitle>
<CardDescription>
Permissions scoped to this API. Enabling these roles only grants
access to this specific API.
Permissions scoped to this API. Enabling these roles only grants access to this
specific API.
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col gap-4">
{Object.entries(apiPermissions(api.id)).map(
([category, roles]) => {
const allPermissionNames = Object.values(roles).map(
({ permission }) => permission
);
const isAllSelected = allPermissionNames.every((permission) =>
selectedPermissions.includes(permission)
);
{Object.entries(apiPermissions(api.id)).map(([category, roles]) => {
const allPermissionNames = Object.values(roles).map(({ permission }) => permission);
const isAllSelected = allPermissionNames.every((permission) =>
selectedPermissions.includes(permission),
);

return (
<div key={`api-${category}`} className="flex flex-col gap-2">
<div className="flex flex-col">
<PermissionToggle
permissionName={`selectAll-${category}`}
label={<span className="text-base font-bold">{category}</span>}
description={`Select all for ${category} permissions for this API`}
checked={isAllSelected}
setChecked={(isChecked) => {
allPermissionNames.forEach((permission) => {
handleSetChecked(permission, isChecked);
});
}}
/>
</div>

return (
<div
key={`api-${category}`}
className="flex flex-col gap-2"
>
<div className="flex flex-col">
<div className="flex flex-col gap-1">
{Object.entries(roles).map(([action, { description, permission }]) => (
<PermissionToggle
permissionName={`selectAll-${category}`}
label={
<span className="text-base font-bold">
{category}
</span>
}
description={`Select all for ${category} permissions for this API`}
checked={isAllSelected}
setChecked={(isChecked) => {
allPermissionNames.forEach((permission) => {
handleSetChecked(permission, isChecked);
});
}}
key={action}
permissionName={permission}
label={action}
description={description}
checked={selectedPermissions.includes(permission)}
setChecked={(isChecked) => handleSetChecked(permission, isChecked)}
/>
</div>

<div className="flex flex-col gap-1">
{Object.entries(roles).map(
([action, { description, permission }]) => (
<PermissionToggle
key={action}
permissionName={permission}
label={action}
description={description}
checked={selectedPermissions.includes(permission)}
setChecked={(isChecked) =>
handleSetChecked(permission, isChecked)
}
/>
)
)}
</div>
))}
</div>
);
}
)}
</div>
);
})}
</div>
</CardContent>
</Card>
Expand Down Expand Up @@ -257,8 +210,7 @@ export const Client: React.FC<Props> = ({ apis }) => {
<DialogHeader>
<DialogTitle>Your API Key</DialogTitle>
<DialogDescription className="w-fit">
This key is only shown once and can not be recovered. Please store
it somewhere safe.
This key is only shown once and can not be recovered. Please store it somewhere safe.
</DialogDescription>

<Code className="flex items-center justify-between gap-4 my-8 ph-no-capture">
Expand All @@ -275,16 +227,11 @@ export const Client: React.FC<Props> = ({ apis }) => {
</p>
<Code className="flex flex-col items-start gap-2 w-full text-xs">
<div className="w-full shrink-0 flex items-center justify-end gap-2">
<VisibleButton
isVisible={showKeyInSnippet}
setIsVisible={setShowKeyInSnippet}
/>
<VisibleButton isVisible={showKeyInSnippet} setIsVisible={setShowKeyInSnippet} />
<CopyButton value={snippet} />
</div>
<div className="text-wrap">
{showKeyInSnippet
? snippet
: snippet.replace(key.data?.key ?? "", maskedKey)}
{showKeyInSnippet ? snippet : snippet.replace(key.data?.key ?? "", maskedKey)}
</div>
</Code>
<DialogClose asChild>
Expand Down Expand Up @@ -328,9 +275,7 @@ const PermissionToggle: React.FC<PermissionToggleProps> = ({
<Label className="text-xs text-content">{label}</Label>
</TooltipTrigger>
<TooltipContent className="flex items-center gap-2">
<span className="font-mono text-sm font-medium">
{permissionName}
</span>
<span className="font-mono text-sm font-medium">{permissionName}</span>
<CopyButton value={permissionName} />
</TooltipContent>
</Tooltip>
Expand Down

0 comments on commit c7a8352

Please sign in to comment.