Merge pull request #1302 from akhilmhdh/feat/banner

feat: added main banner for migration

frontend/src/components/v2/Alert/Alert.tsx

@@ -58,7 +58,10 @@ const Alert = forwardRef<
         {typeof icon !== "undefined" ? (
           <>{icon} </>
         ) : (
-          <FontAwesomeIcon className="text-lg" icon={variantIconMap[variant ?? "default"]} />
+          <FontAwesomeIcon
+            className="text-lg text-primary"
+            icon={variantIconMap[variant ?? "default"]}
+          />
         )}
       </div>
       <div className="flex flex-col gap-y-1">

frontend/src/pages/org/[id]/overview/index.tsx

@@ -23,7 +23,9 @@ import {
   faNetworkWired,
   faPlug,
   faPlus,
-  faUserPlus
+  faUserPlus,
+  faWarning,
+  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -56,6 +58,7 @@ import {
   fetchOrgUsers,
   useAddUserToWs,
   useCreateWorkspace,
+  useGetUserAction,
   useRegisterUserAction,
   useUploadWsKey
 } from "@app/hooks/api";
@@ -70,13 +73,12 @@ const features = [
     link: "https://infisical.com/docs/documentation/getting-started/kubernetes",
     description:
       "Pull secrets into your Kubernetes containers and automatically redeploy upon secret changes."
-  }, 
+  },
   {
     _id: 1,
     name: "Infisical Agent",
     link: "https://infisical.com/docs/infisical-agent/overview",
-    description:
-      "Inject secrets into your apps without modifying any application logic."
+    description: "Inject secrets into your apps without modifying any application logic."
   }
 ];
 
@@ -122,13 +124,13 @@ const CodeItem = ({
 }) => {
   return (
     <>
-      <p className="mb-2 mt-4 text-bunker-300 text-sm leading-normal">{textExplanation}</p>
-      <div className="font-mono text-sm px-3 py-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between">
+      <p className="mb-2 mt-4 text-sm leading-normal text-bunker-300">{textExplanation}</p>
+      <div className="flex flex-row items-center justify-between rounded-md border border-mineshaft-600 bg-bunker px-3 py-2 font-mono text-sm">
         <input disabled value={code} id={id} className="w-full bg-transparent text-bunker-200" />
         <button
           type="button"
           onClick={() => copyToClipboard(id, setIsCopied)}
-          className="h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200"
+          className="h-full pl-3.5 pr-2 text-bunker-300 duration-200 hover:text-primary-200"
         >
           {isCopied ? (
             <FontAwesomeIcon icon={faCheck} className="pr-0.5" />
@@ -150,21 +152,21 @@ const TabsObject = () => {
 
   return (
     <Tabs.Root
-      className="flex flex-col w-full cursor-default border border-mineshaft-600 rounded-md"
+      className="flex w-full cursor-default flex-col rounded-md border border-mineshaft-600"
       defaultValue="tab1"
     >
       <Tabs.List
-        className="shrink-0 flex border-b border-mineshaft-600"
+        className="flex shrink-0 border-b border-mineshaft-600"
         aria-label="Manage your account"
       >
         <Tabs.Trigger
-          className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
+          className="flex h-10 flex-1 cursor-default select-none items-center justify-center bg-bunker-700 px-5 text-sm leading-none text-bunker-300 outline-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:font-medium data-[state=active]:text-primary data-[state=active]:focus:relative"
           value="tab1"
         >
           MacOS
         </Tabs.Trigger>
         <Tabs.Trigger
-          className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
+          className="flex h-10 flex-1 cursor-default select-none items-center justify-center bg-bunker-700 px-5 text-sm leading-none text-bunker-300 outline-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:font-medium data-[state=active]:text-primary data-[state=active]:focus:relative"
           value="tab2"
         >
           Windows
@@ -178,14 +180,14 @@ const TabsObject = () => {
         <a
           target="_blank"
           rel="noopener noreferrer"
-          className="bg-bunker-700 hover:text-bunker-100 duration-200 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
+          className="flex h-10 flex-1 cursor-default select-none items-center justify-center bg-bunker-700 px-5 text-sm leading-none text-bunker-300 outline-none duration-200 first:rounded-tl-md last:rounded-tr-md hover:text-bunker-100 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:font-medium data-[state=active]:text-primary data-[state=active]:focus:relative"
           href="https://infisical.com/docs/cli/overview"
         >
           Other Platforms <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
         </a>
       </Tabs.List>
       <Tabs.Content
-        className="grow p-5 pt-0 bg-bunker-700 rounded-b-md outline-none cursor-default"
+        className="grow cursor-default rounded-b-md bg-bunker-700 p-5 pt-0 outline-none"
         value="tab1"
       >
         <CodeItem
@@ -216,7 +218,7 @@ const TabsObject = () => {
           code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]"
           id="runCode"
         />
-        <p className="text-bunker-300 text-sm mt-2">
+        <p className="mt-2 text-sm text-bunker-300">
           You can find example of start commands for different frameworks{" "}
           <a
             className="text-primary underline underline-offset-2"
@@ -229,7 +231,7 @@ const TabsObject = () => {
           .{" "}
         </p>
       </Tabs.Content>
-      <Tabs.Content className="grow p-5 pt-0 bg-bunker-700 rounded-b-md outline-none" value="tab2">
+      <Tabs.Content className="grow rounded-b-md bg-bunker-700 p-5 pt-0 outline-none" value="tab2">
         <CodeItem
           isCopied={downloadCodeCopied}
           setIsCopied={setDownloadCodeCopied}
@@ -237,7 +239,7 @@ const TabsObject = () => {
           code="scoop bucket add org https://github.com/Infisical/scoop-infisical.git"
           id="downloadCodeW"
         />
-        <div className="font-mono text-sm px-3 py-2 mt-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between">
+        <div className="mt-2 flex flex-row items-center justify-between rounded-md border border-mineshaft-600 bg-bunker px-3 py-2 font-mono text-sm">
           <input
             disabled
             value="scoop install infisical"
@@ -247,7 +249,7 @@ const TabsObject = () => {
           <button
             type="button"
             onClick={() => copyToClipboard("downloadCodeW2", setDownloadCode2Copied)}
-            className="h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200"
+            className="h-full pl-3.5 pr-2 text-bunker-300 duration-200 hover:text-primary-200"
           >
             {downloadCode2Copied ? (
               <FontAwesomeIcon icon={faCheck} className="pr-0.5" />
@@ -277,7 +279,7 @@ const TabsObject = () => {
           code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]"
           id="runCodeW"
         />
-        <p className="text-bunker-300 text-sm mt-2">
+        <p className="mt-2 text-sm text-bunker-300">
           You can find example of start commands for different frameworks{" "}
           <a
             className="text-primary underline underline-offset-2"
@@ -481,6 +483,13 @@ const OrganizationPage = withPermission(
     const { createNotification } = useNotificationContext();
     const addWsUser = useAddUserToWs();
 
+    const { data: updateClosed } = useGetUserAction("jan_2023_db_update_closed");
+
+    const registerUserAction = useRegisterUserAction();
+    const closeUpdate = async () => {
+      await registerUserAction.mutateAsync("jan_2023_db_update_closed");
+    };
+
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "addNewWs",
       "upgradePlan"
@@ -586,10 +595,10 @@ const OrganizationPage = withPermission(
         {!serverDetails?.redisConfigured && (
           <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
             <p className="mr-4 mb-4 font-semibold text-white">Announcements</p>
-            <div className="w-full border border-blue-400/70 rounded-md bg-blue-900/70 p-2 text-base text-mineshaft-100 flex items-center">
+            <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="text-2xl mr-4 p-4 text-mineshaft-50"
+                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
@@ -597,7 +606,7 @@ const OrganizationPage = withPermission(
                 href="https://infisical.com/docs/self-hosting/configuration/redis"
                 target="_blank"
               >
-                <span className="pl-1 text-white underline underline-offset-2 hover:decoration-blue-400 hover:text-blue-200 duration-100 cursor-pointer">
+                <span className="cursor-pointer pl-1 text-white underline underline-offset-2 duration-100 hover:text-blue-200 hover:decoration-blue-400">
                   here
                 </span>
               </Link>
@@ -606,6 +615,22 @@ const OrganizationPage = withPermission(
           </div>
         )}
         <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
+          <div className={`${
+              !updateClosed ? "block" : "hidden"
+            } mb-4 w-full border rounded-md p-2 text-base border-primary-600 bg-primary/10 text-white flex flex-row items-center`}>
+              <FontAwesomeIcon icon={faWarning} className="text-primary text-4xl p-6"/>
+              <div className="text-sm">
+                <span className="text-lg font-semibold">Scheduled maintenance on January 20th</span>  <br />
+                We&apos;ve planned a database upgrade and need to pause certain functionality for approximately 6 hours on Saturday, January 20th, 10am EST. Read operations will continue to function as normal but nothing will be editable. As a user you don&apos;t have to perform any action – your applications will not be affected.<br />
+              </div>
+              <button
+                type="button"
+                onClick={() => closeUpdate()}
+                className="text-mineshaft-100 duration-200 hover:text-red-400 h-full flex items-start"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </button>
+          </div>
           <p className="mr-4 font-semibold text-white">Projects</p>
           <div className="mt-6 flex w-full flex-row">
             <Input
@@ -701,7 +726,7 @@ const OrganizationPage = withPermission(
         </div>
         <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-6 text-3xl">
           <p className="mr-4 font-semibold text-white">Explore Infisical</p>
-          <div className="mt-4 grid grid-cols-3 w-full gap-4">
+          <div className="mt-4 grid w-full grid-cols-3 gap-4">
             {features.map((feature) => (
               <div
                 key={feature._id}