diff --git a/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx b/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx index bb71e4f9a..875ee134b 100644 --- a/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx +++ b/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx @@ -1,6 +1,6 @@ -'use client' +"use client"; -import { Button } from "@/components/ui/button" +import { Button } from "@/components/ui/button"; import { DataTable } from "@/components/shared/data-table"; import { Dialog, @@ -10,7 +10,7 @@ import { DialogHeader, DialogTitle, DialogTrigger, -} from "@/components/ui/dialog" +} from "@/components/ui/dialog"; import { Form, FormControl, @@ -18,20 +18,20 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/ui/form" +} from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import useApiKeys from "@/hooks/get/useApiKeys"; import useProjectStore from "@/state/projectStore"; import useCreateApiKey from "@/hooks/create/useCreateApiKey"; import useProfileStore from "@/state/profileStore"; import { Suspense, useEffect, useState } from "react"; -import { usePostHog } from 'posthog-js/react' +import { usePostHog } from "posthog-js/react"; import config from "@/lib/config"; -import * as z from "zod" -import { zodResolver } from "@hookform/resolvers/zod" -import { useForm } from "react-hook-form" +import * as z from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; import { DataTableLoading } from "@/components/shared/data-table-loading"; -import {CustomHeading} from "@/components/shared/custom-heading"; +import { CustomHeading } from "@/components/shared/custom-heading"; import { useColumns } from "@/components/ApiKeys/columns"; import { PlusCircle } from "lucide-react"; import { toast } from "sonner"; @@ -41,22 +41,22 @@ import { useQueryClient } from "@tanstack/react-query"; const formSchema = z.object({ apiKeyIdentifier: z.string().min(2, { message: "apiKeyIdentifier must be at least 2 characters.", - }) -}) + }), +}); interface TSApiKeys { id_api_key: string; - name : string; - token : string; + name: string; + token: string; } export default function Page() { - const [open,setOpen] = useState(false) - const [tsApiKeys,setTSApiKeys] = useState([]) + const [open, setOpen] = useState(false); + const [tsApiKeys, setTSApiKeys] = useState([]); const queryClient = useQueryClient(); - const {idProject} = useProjectStore(); - const {profile} = useProfileStore(); + const { idProject } = useProjectStore(); + const { profile } = useProfileStore(); const { createApiKeyPromise } = useCreateApiKey(); const { data: apiKeys, isLoading, error } = useApiKeys(); const columns = useColumns(); @@ -66,13 +66,13 @@ export default function Page() { id_api_key: key.id_api_key, name: key.name || "", token: key.api_key_hash, - })) - setTSApiKeys(temp_tsApiKeys) - },[apiKeys]) + })); + setTSApiKeys(temp_tsApiKeys); + }, [apiKeys]); - const posthog = usePostHog() + const posthog = usePostHog(); - if(error){ + if (error) { console.log("error apiKeys.."); } @@ -81,54 +81,67 @@ export default function Page() { defaultValues: { apiKeyIdentifier: "", }, - - }) + }); const onCancel = () => { - setOpen(!open) - } + setOpen(!open); + }; const handleOpenChange = (open: boolean) => { - setOpen(open) - form.reset() - } - + setOpen(open); + form.reset(); + }; const onSubmit = (values: z.infer) => { toast.promise( - createApiKeyPromise({ + createApiKeyPromise({ userId: profile!.id_user, projectId: idProject, - keyName: values.apiKeyIdentifier - }), + keyName: values.apiKeyIdentifier, + }), { - loading: 'Loading...', - success: (data: any) => { - queryClient.setQueryData(['api-keys'], (oldQueryData = []) => { - return [...oldQueryData, data]; - }); - return ( -
- -
- Api key - {`${data.name}`} - has been created + loading: "Loading...", + success: (data: any) => { + queryClient.setQueryData(["api-keys"], (oldQueryData = []) => { + return [...oldQueryData, data]; + }); + return ( +
+ + + +
+ Api key + {`${data.name}`} + has been created +
-
- ) - ; - }, - error: (err: any) => err.message || 'Error' - }); + ); + }, + error: (err: any) => err.message || "Error", + } + ); - posthog?.capture('api_key_created', { + posthog?.capture("api_key_created", { id_project: idProject, - mode: config.DISTRIBUTION - }) - - setOpen(!open) + mode: config.DISTRIBUTION, + }); + setOpen(!open); }; return ( @@ -136,95 +149,121 @@ export default function Page() {
- Create a key that unlocks full API access to this project. - More details in our documentation. - - } + title="API Keys" + description={ + <> + Create a key that unlocks full API access to this project. + + {" "} + More details in our documentation + + . + + } /> -
+
- + - {idProject==="" ? ( + {idProject === "" ? ( <> - - - -

You have to create project in order to create API Key.

- - - + + + +

+ You have to create project in order to create API Key. +

+ + + - ) - : - ( + ) : ( <> - - Create a new API key - - Keep your key safe.

Save and store this new key to a secure place, such as a password manager or secret store. You will not be able to see it again. - - - -
- -
-
- ( - - Name your API key - - - - - - )} - /> -
-
- - - - -
- + + Create a new API key + + Keep your key safe.

Save and store this new key + to a secure place, such as a password manager or secret + store. You will not be able to see it again. + + + +
+ +
+
+ ( + + Name your API key + + + + + + )} + /> +
+
+ + + + +
+ )}
- {isLoading && } + {isLoading && } {tsApiKeys && }
); -} \ No newline at end of file +}