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/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">API Keys are deprecated</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>
+  );
+};