Merge pull request #1772 from Infisical/service-token-deprecation-notice

Add deprecation notice banner to service token section

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx

@@ -1,3 +1,5 @@
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { motion } from "framer-motion";
 
 import { ServiceTokenSection } from "./components";
@@ -11,7 +13,37 @@ export const ServiceTokenTab = () => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: 30 }}
     >
-      <ServiceTokenSection />
+      <div className="space-y-3">
+        <div className="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>
+              Service Tokens are being deprecated in favor of Machine Identities.
+              <br />
+              They will be removed in the future in accordance with the deprecation notice and
+              timeline stated{" "}
+              <a
+                href="https://infisical.com/blog/deprecating-api-keys"
+                target="_blank"
+                className="font-semibold text-primary-400" rel="noreferrer"
+              >
+                here
+              </a>
+              .
+              <br />
+              <a
+                href="https://infisical.com/docs/documentation/platform/identities/overview"
+                target="_blank"
+                className="font-semibold text-primary-400" rel="noreferrer"
+              >
+                Learn more about Machine Identities
+              </a>
+            </p>
+          </div>
+        </div>
+        <ServiceTokenSection />
+      </div>
     </motion.div>
   );
 };

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

@@ -1,5 +1,4 @@
 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";
@@ -47,18 +46,29 @@ export const PersonalTabGroup = () => {
               <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.
+                  API Keys are being deprecated in favor of Machine Identities.
-                  <br /> Please use Machine Identity authentication for your applications and
+                  <br />
-                  services.
+                  They will be removed in the future in accordance with the deprecation notice and
-                </p>
+                  timeline stated{" "}
-                <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
+                  <a
-                  <a target="_blank" className="font-semibold text-primary-400">
+                    href="https://infisical.com/blog/deprecating-api-keys"
+                    target="_blank"
+                    className="font-semibold text-primary-400" rel="noreferrer"
+                  >
+                    here
+                  </a>
+                  .
+                  <br />
+                  <a
+                    href="https://infisical.com/docs/documentation/platform/identities/overview"
+                    target="_blank"
+                    className="font-semibold text-primary-400" rel="noreferrer"
+                  >
                     Learn more about Machine Identities
                   </a>
-                </Link>
+                </p>
               </div>
             </div>
-
             <PersonalAPIKeyTab />
           </div>
         </Tab.Panel>