improvement: revise org alter banners and add smtp banner

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -8,10 +8,13 @@ import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
 import { Banner } from "@app/components/page-frames/Banner";
 import { useServerConfig } from "@app/context";
 import { usePopUp } from "@app/hooks";
+import { useFetchServerStatus } from "@app/hooks/api";
 
 import { InsecureConnectionBanner } from "./components/InsecureConnectionBanner";
 import { Navbar } from "./components/NavBar";
 import { OrgSidebar } from "./components/OrgSidebar";
+import { RedisBanner } from "./components/RedisBanner";
+import { SmtpBanner } from "./components/SmtpBanner";
 
 export const OrganizationLayout = () => {
   const { config } = useServerConfig();
@@ -27,6 +30,8 @@ export const OrganizationLayout = () => {
 
   const containerHeight = config.pageFrameContent ? "h-[94vh]" : "h-screen";
 
+  const { data: serverDetails, isLoading } = useFetchServerStatus();
+
   return (
     <>
       <Banner />
@@ -34,6 +39,8 @@ export const OrganizationLayout = () => {
         className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
       >
         <Navbar />
+        {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
+        {!isLoading && !serverDetails?.emailConfigured && <SmtpBanner />}
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <OrgSidebar isHidden={isInsideProject} />

frontend/src/layouts/OrganizationLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx

@@ -1,37 +1,10 @@
-import { useState } from "react";
-import { faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton } from "@app/components/v2";
+import { OrgAlertBanner } from "../OrgAlertBanner";
 
 export const InsecureConnectionBanner = () => {
-  const [isAcknowledged, setIsAcknowledged] = useState(
-    localStorage.getItem("insecureConnectionAcknowledged") ?? false
-  );
-
-  const handleDismiss = () => {
-    setIsAcknowledged(true);
-    localStorage.setItem("insecureConnectionAcknowledged", "true");
-  };
-
-  if (isAcknowledged) return null;
-
   return (
-    <div className="flex w-screen items-start border-b border-red-900 bg-red-700 px-2 py-1 font-inter text-sm text-mineshaft-200">
-      <FontAwesomeIcon className="ml-3.5 mt-1" icon={faWarning} />
-      <span className="mx-1 ml-2 mt-[0.04rem]">
-        Your connection to this Infisical instance is not secured via HTTPS. Some features may not
-        behave as expected.
-      </span>
-      <IconButton
-        size="xs"
-        className="ml-auto"
-        colorSchema="danger"
-        onClick={handleDismiss}
-        ariaLabel="Dismiss banner"
-      >
-        <FontAwesomeIcon icon={faXmark} />
-      </IconButton>
-    </div>
+    <OrgAlertBanner
+      text="Your connection to this Infisical instance is not secured via HTTPS. Some features may not
+        behave as expected."
+    />
   );
 };

frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/OrgAlertBanner.tsx

@@ -0,0 +1,52 @@
+import { faArrowUpRightFromSquare, faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+  text: string;
+  link?: string;
+};
+
+export const OrgAlertBanner = ({ text, link }: Props) => {
+  const [isDismissed, setIsDismissed] = useToggle(false);
+
+  if (isDismissed) return null;
+
+  return (
+    <div className="flex w-full items-center border-b border-yellow/50 bg-yellow/30 px-4 py-2 text-sm text-yellow-200">
+      <FontAwesomeIcon icon={faWarning} className="mr-2.5 text-base text-yellow" />
+      {text}{" "}
+      {link && (
+        <>
+          Learn how to configure it
+          <a
+            href={link}
+            rel="noopener noreferrer"
+            target="_blank"
+            className="group flex items-center"
+          >
+            <span className="cursor-pointer pl-1 text-yellow-500 underline underline-offset-2 duration-100 group-hover:text-mineshaft-100 group-hover:decoration-mineshaft-100">
+              here
+            </span>
+            <FontAwesomeIcon
+              className="ml-0.5 mt-0.5 text-yellow group-hover:text-mineshaft-100"
+              icon={faArrowUpRightFromSquare}
+              size="xs"
+            />
+          </a>
+          .
+        </>
+      )}
+      <IconButton
+        className="ml-auto p-0 text-yellow-200"
+        ariaLabel="Dismiss banner"
+        variant="plain"
+        onClick={() => setIsDismissed.on()}
+      >
+        <FontAwesomeIcon icon={faXmark} />
+      </IconButton>
+    </div>
+  );
+};

frontend/src/layouts/OrganizationLayout/components/OrgAlertBanner/index.ts

@@ -0,0 +1 @@
+export * from "./OrgAlertBanner";

frontend/src/layouts/OrganizationLayout/components/RedisBanner/RedisBanner.tsx

@@ -0,0 +1,10 @@
+import { OrgAlertBanner } from "../OrgAlertBanner";
+
+export const RedisBanner = () => {
+  return (
+    <OrgAlertBanner
+      text="Attention: Updated versions of Infisical now require Redis for full functionality."
+      link="https://infisical.com/docs/self-hosting/configuration/requirements#redis"
+    />
+  );
+};

frontend/src/layouts/OrganizationLayout/components/RedisBanner/index.ts

@@ -0,0 +1 @@
+export * from "./RedisBanner";

frontend/src/layouts/OrganizationLayout/components/SmtpBanner/SmtpBanner.tsx

@@ -0,0 +1,10 @@
+import { OrgAlertBanner } from "../OrgAlertBanner";
+
+export const SmtpBanner = () => {
+  return (
+    <OrgAlertBanner
+      text="Attention: SMTP has not been configured for this instance."
+      link="https://infisical.com/docs/self-hosting/guides/production-hardening#smtp-security"
+    />
+  );
+};

frontend/src/layouts/OrganizationLayout/components/SmtpBanner/index.ts

@@ -0,0 +1 @@
+export * from "./SmtpBanner";