Merge pull request #1565 from Infisical/daniel/deprecate-service-tokens-and-api-keys

Feat: Deprecate API keys

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 (
-        <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">
-                    {t("settings.personal.api-keys.title")}
-                </p>
-                <Button
-                    colorSchema="secondary"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    onClick={() => handlePopUpOpen("addAPIKey")}
-                >
-                    Add API Key
-                </Button>
-            </div>
-            <APIKeyTable />
-            <AddAPIKeyModal 
-                popUp={popUp}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-        </div>
-    );
-}
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">
+          {t("settings.personal.api-keys.title")}
+        </p>
+        <Tooltip content="API Keys are deprecated and will be removed in the future.">
+          <Button
+            isDisabled
+            colorSchema="secondary"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={() => handlePopUpOpen("addAPIKey")}
+          >
+            Add API Key
+          </Button>
+        </Tooltip>
+      </div>
+      <APIKeyTable />
+      <AddAPIKeyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+    </div>
+  );
+};

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

@@ -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<typeof schema>;
-
-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<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

@@ -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 (
-        <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

@@ -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 (
-    <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

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

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

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

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 (
-        <Tab.Group>
-            <Tab.List className="mb-4 border-b-2 border-mineshaft-800 w-full">
-                {tabs.map((tab) => (
-                    <Tab as={Fragment} key={tab.key}> 
-                        {({ selected }) => (
-                            <button 
-                                type="button"
-                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
-                            >
-                                {tab.name}
-                            </button>
-                        )}
-                    </Tab>
-                ))}
-            </Tab.List>
-            <Tab.Panels>
-                <Tab.Panel>
-                    <PersonalGeneralTab />
-                </Tab.Panel>
-                <Tab.Panel>
-                    <PersonalAuthTab />
-                </Tab.Panel>
-                <Tab.Panel>
-                    <PersonalAPIKeyTab />
-                </Tab.Panel>
-            </Tab.Panels>
-        </Tab.Group>
-    );
-}
+  return (
+    <Tab.Group>
+      <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
+        {tabs.map((tab) => (
+          <Tab as={Fragment} key={tab.key}>
+            {({ selected }) => (
+              <button
+                type="button"
+                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
+                  selected ? "border-b border-white text-white" : "text-mineshaft-400"
+                }`}
+              >
+                {tab.name}
+              </button>
+            )}
+          </Tab>
+        ))}
+      </Tab.List>
+      <Tab.Panels>
+        <Tab.Panel>
+          <PersonalGeneralTab />
+        </Tab.Panel>
+        <Tab.Panel>
+          <PersonalAuthTab />
+        </Tab.Panel>
+        <Tab.Panel>
+          <div className="space-y-3">
+            <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
+              <FontAwesomeIcon icon={faWarning} className="pr-6 text-4xl text-white/80" />
+              <div className="flex w-full flex-col text-sm">
+                <span className="mb-4 text-lg font-semibold">Deprecation Notice</span>
+                <p>
+                  API Keys are deprecated and will be removed in the future.
+                  <br /> Please use Machine Identity authentication for your applications and
+                  services.
+                </p>
+                <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
+                  <a target="_blank" className="font-semibold text-primary-400">
+                    Learn more about Machine Identities
+                  </a>
+                </Link>
+              </div>
+            </div>
+
+            <PersonalAPIKeyTab />
+          </div>
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};