From c7a8352aa914b7c56faa1b4c20981aa2fb9b25f8 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 19 Sep 2024 15:05:35 +0000
Subject: [PATCH] [autofix.ci] apply automated fixes

---
 .../[keyId]/update-root-key-name.tsx          |  23 +-
 .../(app)/settings/root-keys/new/client.tsx   | 215 +++++++-----------
 2 files changed, 84 insertions(+), 154 deletions(-)

diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
index 441274c167..c482e0a42b 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
@@ -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";
@@ -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">
@@ -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>
@@ -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>
diff --git a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
index 56a671042e..80ebc511bf 100644
--- a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
+++ b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
@@ -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,
@@ -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;
@@ -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) {
@@ -59,9 +44,7 @@ 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 '{
@@ -69,9 +52,7 @@ export const Client: React.FC<Props> = ({ apis }) => {
     "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);
 
@@ -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>
@@ -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>
@@ -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">
@@ -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>
@@ -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>