Feat: Deprecate API keys

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

@@ -2,7 +2,7 @@ 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";
@@ -10,17 +10,17 @@ import { APIKeyTable } from "./APIKeyTable";
 
 export const APIKeySection = () => {
   const { t } = useTranslation();
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addAPIKey"] as const);
-        "addAPIKey"
-    ] as const);
 
   return (
-        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <div className="flex justify-between mb-8">
+      <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} />}
@@ -28,12 +28,10 @@ export const APIKeySection = () => {
           >
             Add API Key
           </Button>
+        </Tooltip>
       </div>
       <APIKeyTable />
-            <AddAPIKeyModal 
+      <AddAPIKeyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-                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 (
+  return <APIKeySection />;
-        <>
+};
-            {/* <APIKeyV2Section /> */}
-            <APIKeySection />
-        </>
-    );
-}

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

@@ -1,5 +1,8 @@
-import { Fragment } from "react"
+import { Fragment } from "react";
-import { Tab } from "@headlessui/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";
@@ -14,13 +17,15 @@ const tabs = [
 export const PersonalTabGroup = () => {
   return (
     <Tab.Group>
-            <Tab.List className="mb-4 border-b-2 border-mineshaft-800 w-full">
+      <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 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
+                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>
@@ -36,9 +41,28 @@ export const PersonalTabGroup = () => {
           <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>
   );
-}
+};