Merge pull request #1313 from akhilmhdh/feat/migration-mode

feat(infisical-pg): added migration mode env and page

frontend/src/context/ServerConfigContext/ServerConfigContext.tsx

@@ -1,4 +1,5 @@
 import { createContext, ReactNode, useContext, useEffect, useMemo } from "react";
+import Head from "next/head";
 import { useRouter } from "next/router";
 
 import { ContentLoader } from "@app/components/v2/ContentLoader";
@@ -27,11 +28,37 @@ export const ServerConfigProvider = ({ children }: Props): JSX.Element => {
   }, [data]);
 
   useEffect(() => {
-    if (!isLoading && data && !data.initialized) {
+    if (!isLoading && data && !data.initialized && !data.isMigrationModeOn) {
       router.push("/admin/signup");
     }
   }, [isLoading, data]);
 
+  if (!isLoading && data?.isMigrationModeOn) {
+    return (
+      <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center space-y-8 bg-bunker-800 px-8 text-mineshaft-50 dark:[color-scheme:dark]">
+        <Head>
+          <title>Infisical Maintenance Mode</title>
+          <link rel='icon' href='/infisical.ico' />
+        </Head>
+        <img src="/images/maintenance.png" height={175} width={300} alt="maintenance mode" className="w-[40rem]"/>
+        <p className="mx-8 mb-4 flex justify-center bg-gradient-to-tr from-mineshaft-300 to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
+          Scheduled Maintenance
+        </p>
+        <div className="mt-2 text-center text-lg text-bunker-300">
+          Infisical is undergoing planned maintenance. <br /> No action is required on your end — your applications will continue to fetch secrets. 
+          <br /> If you have questions, please <a
+            className="text-bunker-300 underline underline-offset-4 decoration-primary-800 hover:decoration-primary-600 hover:text-mineshaft-100 duration-200"
+            href="https://infisical.com/slack"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            join our Slack community
+          </a>.
+        </div>
+      </div>
+    );
+  }
+
   if (isLoading || (!data?.initialized && router.pathname !== "/admin/signup")) {
     return (
       <div className="bg-bunker-800">

frontend/src/hooks/api/admin/types.ts

@@ -1,6 +1,7 @@
 export type TServerConfig = {
   initialized: boolean;
   allowSignUp: boolean;
+  isMigrationModeOn?: boolean;
 };
 
 export type TCreateAdminUserDTO = {

frontend/src/views/admin/SignUpPage/SignUpPage.tsx

@@ -61,7 +61,7 @@ export const SignUpPage = () => {
         router.push("/login");
       }
     }
-  }, []);
+  }, [config?.initialized]);
 
   const { mutateAsync: createAdminUser } = useCreateAdminUser();
 
@@ -117,7 +117,7 @@ export const SignUpPage = () => {
     return <ContentLoader text="Redirecting to admin page..." />;
 
   return (
-    <div className="flex justify-center items-center">
+    <div className="flex items-center justify-center">
       <AnimatePresence exitBeforeEnter>
         {step === SignupSteps.DetailsForm && (
           <motion.div
@@ -128,7 +128,7 @@ export const SignUpPage = () => {
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: 30 }}
           >
-            <div className="text-center flex flex-col items-center space-y-4">
+            <div className="flex flex-col items-center space-y-4 text-center">
               <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
               <div className="text-4xl">Welcome to Infisical</div>
               <div>Create your first Admin Account</div>