Finish API Key V2

frontend/src/hooks/api/apiKeys/index.ts

@@ -0,0 +1,4 @@
+export {
+  useCreateAPIKeyV2,
+  useDeleteAPIKeyV2,
+  useUpdateAPIKeyV2} from "./queries";

frontend/src/hooks/api/apiKeys/queries.tsx

@@ -0,0 +1,62 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { userKeys } from "../users/queries";
+import {
+  APIKeyDataV2,
+  CreateAPIKeyDataV2DTO,
+  CreateServiceTokenDataV3Res,
+  DeleteAPIKeyDataV2DTO,
+  UpdateAPIKeyDataV2DTO} from "./types";
+
+export const useCreateAPIKeyV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<CreateServiceTokenDataV3Res, {}, CreateAPIKeyDataV2DTO>({
+    mutationFn: async ({
+      name
+    }) => {
+      const { data } = await apiRequest.post("/api/v3/api-key", {
+        name
+      });
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.myAPIKeysV2);
+    }
+  });
+};
+
+export const useUpdateAPIKeyV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<APIKeyDataV2, {}, UpdateAPIKeyDataV2DTO>({
+    mutationFn: async ({
+      apiKeyDataId,
+      name
+    }) => {
+      const { data: { apiKeyData } } = await apiRequest.patch(`/api/v3/api-key/${apiKeyDataId}`, {
+        name
+      });
+      return apiKeyData;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.myAPIKeysV2);
+    }
+  });
+};
+
+export const useDeleteAPIKeyV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation<APIKeyDataV2, {}, DeleteAPIKeyDataV2DTO>({
+    mutationFn: async ({
+      apiKeyDataId
+    }) => {
+      const { data: { apiKeyData } } = await apiRequest.delete(`/api/v3/api-key/${apiKeyDataId}`);
+      return apiKeyData;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.myAPIKeysV2);
+    }
+  });
+};

frontend/src/hooks/api/apiKeys/types.ts

@@ -0,0 +1,27 @@
+export type APIKeyDataV2 = {
+    _id: string;
+    name: string;
+    user: string;
+    lastUsed?: string;
+    usageCount: number;
+    createdAt: string;
+    updatedAt: string;
+  };
+
+export type CreateAPIKeyDataV2DTO = {
+    name: string;
+}
+
+export type CreateServiceTokenDataV3Res = {
+    apiKeyData: APIKeyDataV2;
+    apiKey: string;
+}
+
+export type UpdateAPIKeyDataV2DTO = {
+    apiKeyDataId: string;
+    name: string;
+}
+
+export type DeleteAPIKeyDataV2DTO = {
+    apiKeyDataId: string;
+}

frontend/src/hooks/api/index.tsx

@@ -1,3 +1,4 @@
+export * from "./apiKeys";
 export * from "./auditLogs";
 export * from "./auth";
 export * from "./bots";

frontend/src/hooks/api/serviceTokens/index.ts

@@ -4,4 +4,5 @@ export {
     useDeleteServiceToken, 
     useDeleteServiceTokenV3,
     useGetUserWsServiceTokens,
-    useUpdateServiceTokenV3} from "./queries";
+    useUpdateServiceTokenV3
+} from "./queries";

frontend/src/hooks/api/users/index.tsx

@@ -7,6 +7,7 @@ export {
   useDeleteOrgMembership,
   useDeleteUser,
   useGetMyAPIKeys,
+  useGetMyAPIKeysV2,
   useGetMyIp,
   useGetMyOrganizationProjects,
   useGetMySessions,

frontend/src/hooks/api/users/queries.tsx

@@ -7,6 +7,7 @@ import {
 import { apiRequest } from "@app/config/request";
 import { setAuthToken } from "@app/reactQuery";
 
+import { APIKeyDataV2 } from "../apiKeys/types";
 import { useUploadWsKey } from "../keys/queries";
 import { workspaceKeys } from "../workspace/queries";
 import {
@@ -24,12 +25,13 @@ import {
   User
 } from "./types";
 
-const userKeys = {
+export const userKeys = {
   getUser: ["user"] as const,
   userAction: ["user-action"] as const,
   getOrgUsers: (orgId: string) => [{ orgId }, "user"],
   myIp: ["ip"] as const,
   myAPIKeys: ["api-keys"] as const,
+  myAPIKeysV2: ["api-keys-v2"] as const,
   mySessions: ["sessions"] as const,
   myOrganizationProjects: (orgId: string) => [{ orgId }, "organization-projects"] as const
 };
@@ -270,7 +272,7 @@ export const useGetMyIp = () => {
   });
 };
 
-export const useGetMyAPIKeys = () => {
+export const useGetMyAPIKeys = () => { // TODO: deprecate (moving to API Key V2)
   return useQuery({
     queryKey: userKeys.myAPIKeys,
     queryFn: async () => {
@@ -281,7 +283,18 @@ export const useGetMyAPIKeys = () => {
   });
 };
 
-export const useCreateAPIKey = () => {
+export const useGetMyAPIKeysV2 = () => {
+  return useQuery({
+    queryKey: userKeys.myAPIKeysV2,
+    queryFn: async () => {
+      const { data: { apiKeyData } } = await apiRequest.get<{ apiKeyData: APIKeyDataV2[] }>("/api/v3/users/me/api-keys");
+      return apiKeyData;
+    },
+    enabled: true
+  });
+};
+
+export const useCreateAPIKey = () => { // TODO: deprecate (moving to API Key V2)
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({ name, expiresIn }: { name: string; expiresIn: number }) => {
@@ -298,7 +311,7 @@ export const useCreateAPIKey = () => {
   });
 };
 
-export const useDeleteAPIKey = () => {
+export const useDeleteAPIKey = () => { // TODO: deprecate (moving to API Key V2)
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (apiKeyDataId: string) => {

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Modal.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    IconButton,
+    Input,
+    Modal,
+    ModalContent} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import {
+    useCreateAPIKeyV2,
+    useUpdateAPIKeyV2
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    name: yup.string().required("API Key V2 name is required")
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+    popUp: UsePopUpState<["apiKeyV2"]>;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["apiKeyV2"]>, state?: boolean) => void;
+};
+
+// TODO: copy to clipboard stuff
+
+export const APIKeyV2Modal = ({
+    popUp,
+    handlePopUpToggle
+}: Props) => {
+    const [newAPIKey, setNewAPIKey] = useState("");
+    const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+
+    const { createNotification } = useNotificationContext();
+    
+    const { mutateAsync: createMutateAsync } = useCreateAPIKeyV2();
+    const { mutateAsync: updateMutateAsync } = useUpdateAPIKeyV2();
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema),
+        defaultValues: {
+            name: ""
+        }
+    });
+
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+
+        if (isAPIKeyCopied) {
+            timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+        }
+
+        return () => clearTimeout(timer);
+    }, [setIsAPIKeyCopied]);
+
+    useEffect(() => {
+        const apiKeyData = popUp?.apiKeyV2?.data as { 
+            apiKeyDataId: string;
+            name: string;
+        };
+        
+        if (apiKeyData) {
+            reset({
+                name: apiKeyData.name
+            });
+        } else {
+            reset({
+                name: ""
+            });
+        }
+    }, [popUp?.apiKeyV2?.data]);
+
+    const copyTokenToClipboard = () => {
+        navigator.clipboard.writeText(newAPIKey);
+        setIsAPIKeyCopied.on();
+    };
+
+    const onFormSubmit = async ({
+        name
+    }: FormData) => {
+        try {
+            const apiKeyData = popUp?.apiKeyV2?.data as { 
+                apiKeyDataId: string;
+                name: string;
+            };
+            
+            if (apiKeyData) {
+                // update
+
+                await updateMutateAsync({
+                    apiKeyDataId: apiKeyData.apiKeyDataId,
+                    name
+                });
+
+                handlePopUpToggle("apiKeyV2", false);
+            } else {
+                // create
+
+                const { apiKey } = await createMutateAsync({
+                    name
+                });
+                
+                setNewAPIKey(apiKey);
+            }
+            
+            createNotification({
+                text: `Successfully ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
+                type: "success"
+            });
+        
+            reset();
+            
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
+                type: "error"
+            });
+        }
+    }
+
+    const hasAPIKey = Boolean(newAPIKey);
+
+    return (
+        <Modal
+            isOpen={popUp?.apiKeyV2?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("apiKeyV2", isOpen);
+                reset();
+                setNewAPIKey("");
+            }}
+        >
+            <ModalContent title={`${popUp?.apiKeyV2?.data ? "Update" : "Create"} API Key V2`}>
+                {!hasAPIKey ? (
+                    <form onSubmit={handleSubmit(onFormSubmit)}>
+                        <Controller
+                            control={control}
+                            defaultValue=""
+                            name="name"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Name"
+                                    isError={Boolean(error)}
+                                    errorText={error?.message}
+                                >
+                                <Input 
+                                    {...field} 
+                                    placeholder="My API Key"
+                                />
+                                </FormControl>
+                            )}
+                        />
+                        <div className="mt-8 flex items-center">
+                            <Button
+                                className="mr-4"
+                                size="sm"
+                                type="submit"
+                                isLoading={isSubmitting}
+                                isDisabled={isSubmitting}
+                            >
+                                {popUp?.apiKeyV2?.data ? "Update" : "Create"}
+                            </Button>
+                            <Button colorSchema="secondary" variant="plain">
+                                Cancel
+                            </Button>
+                        </div>
+                    </form>
+                ) : (
+                    <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+                        <p className="mr-4 break-all">{newAPIKey}</p>
+                        <IconButton
+                            ariaLabel="copy icon"
+                            colorSchema="secondary"
+                            className="group relative"
+                            onClick={copyTokenToClipboard}
+                        >
+                            <FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
+                            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                                Click to copy
+                            </span>
+                        </IconButton>
+                    </div>
+                )}
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Section.tsx

@@ -0,0 +1,81 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    DeleteActionModal
+} from "@app/components/v2";
+import { useDeleteAPIKeyV2 } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { APIKeyV2Modal } from "./APIKeyV2Modal";
+import { APIKeyV2Table } from "./APIKeyV2Table";
+
+export const APIKeyV2Section = () => {
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync: deleteMutateAsync } = useDeleteAPIKeyV2();
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "apiKeyV2",
+        "deleteAPIKeyV2"
+    ] as const);
+    
+    const onDeleteAPIKeyDataSubmit = async (apiKeyDataId: string) => {
+        try {
+            await deleteMutateAsync({
+                apiKeyDataId
+            });
+            
+            createNotification({
+                text: "Successfully deleted API Key V2",
+                type: "success"
+            });
+            
+            handlePopUpClose("deleteAPIKeyV2");
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to delete API Key V2",
+                type: "error"
+            });
+        }
+      }
+
+    return (
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+            <div className="flex justify-between mb-8">
+                <p className="text-xl font-semibold text-mineshaft-100">
+                    API Keys V2 (Beta)
+                </p>
+                <Button
+                    colorSchema="secondary"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={() => handlePopUpOpen("apiKeyV2")}
+                >
+                    Add API Key
+                </Button>
+            </div>
+            <APIKeyV2Table 
+                handlePopUpOpen={handlePopUpOpen}
+            />
+            <APIKeyV2Modal
+                popUp={popUp}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+            <DeleteActionModal
+                isOpen={popUp.deleteAPIKeyV2.isOpen}
+                title={`Are you sure want to delete ${
+                (popUp?.deleteAPIKeyV2?.data as { name: string })?.name || ""
+                }?`}
+                onChange={(isOpen) => handlePopUpToggle("deleteAPIKeyV2", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={() => 
+                    onDeleteAPIKeyDataSubmit(
+                        (popUp?.deleteAPIKeyV2?.data as { apiKeyDataId: string })?.apiKeyDataId
+                    )
+                }
+            />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Table.tsx

@@ -0,0 +1,107 @@
+import { faKey, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import {
+    EmptyState,
+    IconButton,
+    Table,
+    TableContainer,
+    TableSkeleton,
+    TBody,
+    Td,
+    Th,
+    THead,
+    Tr
+} from "@app/components/v2";
+import {
+    useGetMyAPIKeysV2
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    handlePopUpOpen: (
+      popUpName: keyof UsePopUpState<["deleteAPIKeyV2", "apiKeyV2"]>,
+      data?: {
+        apiKeyDataId?: string;
+        name?: string;
+      }
+    ) => void;
+  };
+
+export const APIKeyV2Table = ({
+    handlePopUpOpen
+}: Props) => {
+    const { data, isLoading } = useGetMyAPIKeysV2();
+    return (
+        <TableContainer>
+            <Table>
+                <THead>
+                    <Tr>
+                        <Th className="">Name</Th>
+                        <Th className="">Last Used</Th>
+                        <Th className="">Created At</Th>
+                        <Th className="w-5" />
+                    </Tr>
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={4} innerKey="api-keys-v2" />}
+                    {!isLoading && 
+                    data && 
+                    data.length > 0 && 
+                    data.map(({
+                        _id,
+                        name,
+                        lastUsed,
+                        createdAt
+                    }) => {
+                        return (
+                            <Tr className="h-10" key={`api-key-v2-${_id}`}>
+                                <Td>{name}</Td>
+                                <Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
+                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                                <Td className="flex justify-end">
+                                    <IconButton
+                                        onClick={async () => {
+                                            handlePopUpOpen("apiKeyV2", {
+                                                apiKeyDataId: _id,
+                                                name
+                                            });
+                                        }}
+                                        size="lg"
+                                        colorSchema="primary"
+                                        variant="plain"
+                                        ariaLabel="update"
+                                    >
+                                        <FontAwesomeIcon icon={faPencil} />
+                                    </IconButton>
+                                    <IconButton
+                                        onClick={() => {
+                                            handlePopUpOpen("deleteAPIKeyV2", {
+                                                apiKeyDataId: _id
+                                            });
+                                        }}
+                                        size="lg"
+                                        colorSchema="danger"
+                                        variant="plain"
+                                        ariaLabel="update"
+                                        className="ml-4"
+                                    >
+                                        <FontAwesomeIcon icon={faXmark} />
+                                    </IconButton>
+                                </Td>
+                            </Tr>
+                        );
+                    })}
+                    {!isLoading && data && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={4}>
+                                <EmptyState title="No API key v2 on file" icon={faKey} />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/index.tsx

@@ -0,0 +1 @@
+export { APIKeyV2Section } from "./APIKeyV2Section";

frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx

@@ -1,7 +1,11 @@
+// import { APIKeyV2Section } from "../APIKeyV2Section";
 import { APIKeySection } from "../APIKeySection";
 
 export const PersonalAPIKeyTab = () => {
     return (
-        <APIKeySection />
+        <>
+            {/* <APIKeyV2Section /> */}
+            <APIKeySection />
+        </>
     );
 }