diff --git a/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeySection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeySection.tsx index eb3c12cc5..a0f033049 100644 --- a/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeySection.tsx +++ b/frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeySection.tsx @@ -2,38 +2,36 @@ import { useTranslation } from "react-i18next"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Button } from "@app/components/v2"; +import { Button, Tooltip } from "@app/components/v2"; import { usePopUp } from "@app/hooks/usePopUp"; import { AddAPIKeyModal } from "./AddAPIKeyModal"; import { APIKeyTable } from "./APIKeyTable"; export const APIKeySection = () => { - const { t } = useTranslation(); - const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ - "addAPIKey" - ] as const); + const { t } = useTranslation(); + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addAPIKey"] as const); - return ( -
-
-

- {t("settings.personal.api-keys.title")} -

- -
- - -
- ); -} \ No newline at end of file + return ( +
+
+

+ {t("settings.personal.api-keys.title")} +

+ + + +
+ + +
+ ); +}; 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 diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx index aba48b23e..ca1fa130e 100644 --- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx +++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx @@ -1,11 +1,5 @@ import { APIKeySection } from "../APIKeySection"; -// import { APIKeyV2Section } from "../APIKeyV2Section"; export const PersonalAPIKeyTab = () => { - return ( - <> - {/* */} - - - ); -} \ No newline at end of file + return ; +}; diff --git a/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx b/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx index f2e367b36..c1e282c4e 100644 --- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx +++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx @@ -1,44 +1,68 @@ -import { Fragment } from "react" -import { Tab } from "@headlessui/react" +import { Fragment } from "react"; +import Link from "next/link"; +import { faWarning } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Tab } from "@headlessui/react"; import { PersonalAPIKeyTab } from "../PersonalAPIKeyTab"; import { PersonalAuthTab } from "../PersonalAuthTab"; import { PersonalGeneralTab } from "../PersonalGeneralTab"; const tabs = [ - { name: "General", key: "tab-account-general" }, - { name: "Authentication", key: "tab-account-auth" }, - { name: "API Keys", key: "tab-account-api-keys" } + { name: "General", key: "tab-account-general" }, + { name: "Authentication", key: "tab-account-auth" }, + { name: "API Keys", key: "tab-account-api-keys" } ]; export const PersonalTabGroup = () => { - return ( - - - {tabs.map((tab) => ( - - {({ selected }) => ( - - )} - - ))} - - - - - - - - - - - - - - ); -} \ No newline at end of file + return ( + + + {tabs.map((tab) => ( + + {({ selected }) => ( + + )} + + ))} + + + + + + + + + +
+
+ +
+ Deprecation Notice +

+ API Keys are deprecated and will be removed in the future. +
Please use Machine Identity authentication for your applications and + services. +

+ + + Learn more about Machine Identities + + +
+
+ + +
+
+
+
+ ); +};