diff --git a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Modal.tsx b/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Modal.tsx deleted file mode 100644 index 3cc010bee..000000000 --- a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Modal.tsx +++ /dev/null @@ -1,199 +0,0 @@ -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; - -type Props = { - popUp: UsePopUpState<["apiKeyV2"]>; - handlePopUpToggle: (popUpName: keyof UsePopUpState<["apiKeyV2"]>, state?: boolean) => void; -}; - -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({ - 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 ( - { - handlePopUpToggle("apiKeyV2", isOpen); - reset(); - setNewAPIKey(""); - }} - > - - {!hasAPIKey ? ( -
- ( - - - - )} - /> -
- - -
- - ) : ( -
-

{newAPIKey}

- - - - Click to copy - - -
- )} -
-
- ); -} \ No newline at end of file diff --git a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Section.tsx b/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Section.tsx deleted file mode 100644 index 213d4bd65..000000000 --- a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Section.tsx +++ /dev/null @@ -1,81 +0,0 @@ -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 ( -
-
-

- API Keys V2 (Beta) -

- -
- - - handlePopUpToggle("deleteAPIKeyV2", isOpen)} - deleteKey="confirm" - onDeleteApproved={() => - onDeleteAPIKeyDataSubmit( - (popUp?.deleteAPIKeyV2?.data as { apiKeyDataId: string })?.apiKeyDataId - ) - } - /> -
- ); -} \ No newline at end of file diff --git a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Table.tsx b/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Table.tsx deleted file mode 100644 index 878e091c9..000000000 --- a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Table.tsx +++ /dev/null @@ -1,98 +0,0 @@ -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 ( - - - - - - - - - - - {isLoading && } - {!isLoading && - data && - data.length > 0 && - data.map(({ id, name, lastUsed, createdAt }) => { - return ( - - - - - - - ); - })} - {!isLoading && data && data?.length === 0 && ( - - - - )} - -
NameLast UsedCreated At -
{name}{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}{format(new Date(createdAt), "yyyy-MM-dd")} - { - handlePopUpOpen("apiKeyV2", { - apiKeyDataId: id, - name - }); - }} - size="lg" - colorSchema="primary" - variant="plain" - ariaLabel="update" - > - - - { - handlePopUpOpen("deleteAPIKeyV2", { - apiKeyDataId: id - }); - }} - size="lg" - colorSchema="danger" - variant="plain" - ariaLabel="update" - className="ml-4" - > - - -
- -
-
- ); -}; diff --git a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/index.tsx b/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/index.tsx deleted file mode 100644 index b215d8028..000000000 --- a/frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { APIKeyV2Section } from "./APIKeyV2Section"; \ No newline at end of file