Merge pull request #4259 from Infisical/org-alert-banner-additions

improvement(frontend): revise org alter banner designs 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 { OrgAlertBanner } from "../OrgAlertBanner";
-import { faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton } from "@app/components/v2";
 
 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">
+    <OrgAlertBanner
-      <FontAwesomeIcon className="ml-3.5 mt-1" icon={faWarning} />
+      text="Your connection to this Infisical instance is not secured via HTTPS. Some features may not
-      <span className="mx-1 ml-2 mt-[0.04rem]">
+        behave as expected."
-        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>
   );
 };

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/configuration/envars#email-service"
+    />
+  );
+};

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

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

frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx

@@ -2,14 +2,11 @@
 import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { NewProjectModal } from "@app/components/projects";
 import { PageHeader } from "@app/components/v2";
 import { useSubscription } from "@app/context";
-import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AllProjectView } from "./components/AllProjectView";
@@ -38,8 +35,6 @@ export const ProjectsPage = () => {
     "upgradePlan"
   ] as const);
 
-  const { data: serverDetails, isLoading } = useFetchServerStatus();
-
   const { subscription } = useSubscription();
 
   const isAddingProjectsAllowed = subscription?.workspaceLimit
@@ -52,30 +47,6 @@ export const ProjectsPage = () => {
         <title>{t("common.head-title", { title: t("settings.members.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-
-      {!isLoading && !serverDetails?.redisConfigured && (
-        <div className="mb-4 flex flex-col items-start justify-start text-3xl">
-          <p className="mb-4 mr-4 font-semibold text-white">Announcements</p>
-          <div className="flex w-full items-center rounded-md border border-blue-400/70 bg-blue-900/70 p-2 text-base text-mineshaft-100">
-            <FontAwesomeIcon
-              icon={faExclamationCircle}
-              className="mr-4 p-4 text-2xl text-mineshaft-50"
-            />
-            Attention: Updated versions of Infisical now require Redis for full functionality. Learn
-            how to configure it
-            <a
-              href="https://infisical.com/docs/self-hosting/configuration/redis"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <span className="cursor-pointer pl-1 text-white underline underline-offset-2 duration-100 hover:text-blue-200 hover:decoration-blue-400">
-                here
-              </span>
-            </a>
-            .
-          </div>
-        </div>
-      )}
       <div className="mb-4 flex flex-col items-start justify-start">
         <PageHeader
           title={