fix: Make routing-form a preinstalled app (#9836)

Co-authored-by: zomars <zomars@me.com>

apps/web/middleware.ts

@@ -54,10 +54,9 @@ const middleware: NextMiddleware = async (req) => {
     }
   }
 
-  // Don't 404 old routing_forms links
-  if (url.pathname.startsWith("/apps/routing_forms")) {
-    url.pathname = url.pathname.replace("/apps/routing_forms", "/apps/routing-forms");
-    return NextResponse.rewrite(url);
+  const res = routingForms.handle(url);
+  if (res) {
+    return res;
   }
 
   if (url.pathname.startsWith("/api/trpc/")) {
@@ -76,15 +75,34 @@ const middleware: NextMiddleware = async (req) => {
   });
 };
 
+const routingForms = {
+  handle: (url: URL) => {
+    // Next.config.js Redirects don't handle Client Side navigations and we need that.
+    // So, we add the rewrite here instead.
+    if (url.pathname.startsWith("/routing-forms/")) {
+      url.pathname = url.pathname.replace(/^\/routing-forms\//, "/apps/routing-forms/");
+      return NextResponse.rewrite(url);
+    }
+
+    // Don't 404 old routing_forms links
+    if (url.pathname.startsWith("/apps/routing_forms")) {
+      url.pathname = url.pathname.replace(/^\/apps\/routing_forms\//, "/apps/routing-forms/");
+      return NextResponse.rewrite(url);
+    }
+  },
+  // Matcher paths that are required by the handle function to work
+  paths: ["/apps/routing_forms/:path*", "/routing-forms/:path*"],
+};
+
 export const config = {
   matcher: [
     "/((?!_next|.*avatar.png$|favicon.ico$).*)",
     "/api/collect-events/:path*",
     "/api/auth/:path*",
-    "/apps/routing_forms/:path*",
     "/:path*/embed",
     "/api/trpc/:path*",
     "/auth/login",
+    ...routingForms.paths,
   ],
 };
 

apps/web/pages/apps/[slug]/[...pages].tsx

@@ -1,6 +1,7 @@
 import type { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 
+import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
 import RoutingFormsRoutingConfig from "@calcom/app-store/routing-forms/pages/app-routing.config";
 import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
@@ -127,6 +128,12 @@ export async function getServerSideProps(
     params.appPages = pages.slice(1);
     const session = await getServerSession({ req, res });
     const user = session?.user;
+    const app = await getAppWithMetadata({ slug: appName });
+    if (!app) {
+      return {
+        notFound: true,
+      };
+    }
 
     const result = await route.getServerSideProps(
       context as GetServerSidePropsContext<{
@@ -153,7 +160,7 @@ export async function getServerSideProps(
     return {
       props: {
         appName,
-        appUrl: `/apps/${appName}`,
+        appUrl: app.simplePath || `/apps/${appName}`,
         ...result.props,
       },
     };

apps/web/playwright/webhook.e2e.ts

@@ -409,13 +409,6 @@ test.describe("FORM_SUBMITTED", async () => {
 
     await page.waitForLoadState("networkidle");
 
-    // Install Routing Forms App
-    await page.goto(`/apps/routing-forms`);
-    // eslint-disable-next-line playwright/no-conditional-in-test
-
-    await page.click('[data-testid="install-app-button"]');
-    await page.click('[data-testid="install-app-button-personal"]');
-
     await page.waitForLoadState("networkidle");
     await page.goto(`/settings/developer/webhooks/new`);
 
@@ -428,7 +421,7 @@ test.describe("FORM_SUBMITTED", async () => {
     expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined();
 
     await page.waitForLoadState("networkidle");
-    await page.goto("/apps/routing-forms/forms");
+    await page.goto("/routing-forms/forms");
     await page.click('[data-testid="new-routing-form"]');
     // Choose to create the Form for the user(which is the first option) and not the team
     await page.click('[data-testid="option-0"]');