Feature/maintenance mode (#6930)

* Implement maintenance mode with Vercel Edge Config

* Error log is spam during development/ added \n in .env.example

* Exclude _next, /api for /maintenance page

* Re-instate previous config

* rtl: begone

* Added note to explain why /auth/login covers the maintenance page.

---------

Co-authored-by: Omar López <zomars@me.com>

apps/web/middleware.ts

@@ -1,3 +1,4 @@
+import { get } from "@vercel/edge-config";
 import { collectEvents } from "next-collect/server";
 import { NextMiddleware, NextResponse, userAgent } from "next/server";
 
@@ -8,6 +9,28 @@ import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry
 const middleware: NextMiddleware = async (req) => {
   const url = req.nextUrl;
 
+  if (!url.pathname.startsWith("/api")) {
+    //
+    // NOTE: When tRPC hits an error a 500 is returned, when this is received
+    //       by the application the user is automatically redirected to /auth/login.
+    //
+    //     - For this reason our matchers are sufficient for an app-wide maintenance page.
+    //
+    try {
+      // Check whether the maintenance page should be shown
+      const isInMaintenanceMode = await get<boolean>("isInMaintenanceMode");
+      // If is in maintenance mode, point the url pathname to the maintenance page
+      if (isInMaintenanceMode) {
+        req.nextUrl.pathname = `/maintenance`;
+        return NextResponse.rewrite(req.nextUrl);
+      }
+    } catch (error) {
+      // show the default page if EDGE_CONFIG env var is missing,
+      // but log the error to the console
+      // console.error(error);
+    }
+  }
+
   if (["/api/collect-events", "/api/auth"].some((p) => url.pathname.startsWith(p))) {
     const callbackUrl = url.searchParams.get("callbackUrl");
     const { isBot } = userAgent(req);

apps/web/package.json

@@ -61,6 +61,7 @@
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
     "@types/turndown": "^5.0.1",
+    "@vercel/edge-config": "^0.1.1",
     "@vercel/edge-functions-ui": "^0.2.1",
     "@vercel/og": "^0.0.21",
     "accept-language-parser": "^1.5.0",

apps/web/pages/maintenance.tsx

@@ -0,0 +1,27 @@
+import Head from "next/head";
+
+import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui";
+
+export default function MaintenancePage() {
+  const { t, isLocaleReady } = useLocale();
+  if (!isLocaleReady) return null;
+  return (
+    <div className="flex h-screen bg-gray-100">
+      <Head>
+        <title>
+          {t("under_maintenance")} | {APP_NAME}
+        </title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="m-auto rounded-md bg-white p-10 text-right ltr:text-left">
+        <h1 className="text-2xl font-medium text-black">{t("under_maintenance")}</h1>
+        <p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
+          {t("under_maintenance_description", { appName: APP_NAME })}
+        </p>
+        <Button href={`${WEBSITE_URL}/support`}>{t("contact_support")}</Button>
+      </div>
+    </div>
+  );
+}

apps/web/public/static/locales/en/common.json

@@ -1589,5 +1589,7 @@
   "create_a_one_one_template": "Create a one-one one template for an event type and distribute it to multiple members.",
   "collective_or_roundrobin": "Collective or round-robin",
   "book_your_team_members": "Book your team members together with collective events or cycle through to get the right person with round-robin.",
+  "under_maintenance": "Down for maintenance",
+  "under_maintenance_description": "The {{appName}} team are performing scheduled maintenance. If you have any questions, please contact support.",
   "event_type_seats": "{{numberOfSeats}} seats" 
 }