Add support to open a redirect URL in new tab (#5480)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/pages/api/integrations/[...args].ts

@@ -65,8 +65,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       await handler(req, res);
     } else {
       await defaultIntegrationAddHandler({ user: req.session?.user, ...handler });
-      redirectUrl = handler.redirectUrl || getInstalledAppPath(handler);
-      res.json({ url: redirectUrl });
+      redirectUrl = handler.redirect?.url || getInstalledAppPath(handler);
+      res.json({ url: redirectUrl, newTab: handler.redirect?.newTab });
     }
     return res.status(200);
   } catch (error) {

packages/app-store/_utils/useAddAppMutation.ts

@@ -6,6 +6,14 @@ import { App } from "@calcom/types/App";
 
 import getInstalledAppPath from "./getInstalledAppPath";
 
+function gotoUrl(url: string, newTab?: boolean) {
+  if (newTab) {
+    window.open(url, "_blank");
+    return;
+  }
+  window.location.href = url;
+}
+
 function useAddAppMutation(_type: App["type"] | null, options?: Parameters<typeof useMutation>[2]) {
   const mutation = useMutation<
     unknown,
@@ -41,7 +49,7 @@ function useAddAppMutation(_type: App["type"] | null, options?: Parameters<typeo
     const json = await res.json();
 
     if (!isOmniInstall) {
-      window.location.href = json.url;
+      gotoUrl(json.url, json.newTab);
       return;
     }
 
@@ -51,7 +59,7 @@ function useAddAppMutation(_type: App["type"] | null, options?: Parameters<typeo
     // Check first that the URL is absolute, then check that it is of different origin from the current.
     if (/https?:\/\//.test(json.url) && !json.url.startsWith(window.location.origin)) {
       // TODO: For Omni installation to authenticate and come back to the page where installation was initiated, some changes need to be done in all apps' add callbacks
-      window.location.href = json.url;
+      gotoUrl(json.url, json.newTab);
     }
   }, options);
 

packages/app-store/ee/routing-forms/api/add.ts

@@ -20,7 +20,9 @@ const handler: AppDeclarativeHandler = {
       },
     });
   },
-  redirectUrl: "/apps/routing-forms/forms",
+  redirect: {
+    url: "/apps/routing-forms/forms",
+  },
 };
 
 export default handler;

packages/app-store/n8n/api/add.ts

@@ -10,7 +10,10 @@ const handler: AppDeclarativeHandler = {
   slug: appConfig.slug,
   supportsMultipleInstalls: false,
   handlerType: "add",
-  redirectUrl: "https://n8n.io/integrations/cal-trigger/",
+  redirect: {
+    url: "https://n8n.io/integrations/cal-trigger/",
+    newTab: true,
+  },
   createCredential: ({ appType, user, slug }) =>
     createDefaultInstallation({ appType, userId: user.id, slug, key: {} }),
 };

packages/app-store/pipedream/api/add.ts

@@ -10,7 +10,10 @@ const handler: AppDeclarativeHandler = {
   slug: appConfig.slug,
   supportsMultipleInstalls: false,
   handlerType: "add",
-  redirectUrl: "https://pipedream.com/apps/cal-com",
+  redirect: {
+    newTab: true,
+    url: "https://pipedream.com/apps/cal-com",
+  },
   createCredential: ({ appType, user, slug }) =>
     createDefaultInstallation({ appType, userId: user.id, slug, key: {} }),
 };

packages/app-store/raycast/api/add.ts

@@ -10,7 +10,9 @@ const handler: AppDeclarativeHandler = {
   variant: appConfig.variant,
   supportsMultipleInstalls: false,
   handlerType: "add",
-  redirectUrl: "raycast://extensions/eluce2/cal-com-share-meeting-links?source=webstore",
+  redirect: {
+    url: "raycast://extensions/eluce2/cal-com-share-meeting-links?source=webstore",
+  },
   createCredential: ({ appType, user, slug }) =>
     createDefaultInstallation({ appType, userId: user.id, slug, key: {} }),
 };

packages/app-store/typeform/api/add.ts

@@ -10,7 +10,9 @@ const handler: AppDeclarativeHandler = {
   variant: appConfig.variant,
   supportsMultipleInstalls: false,
   handlerType: "add",
-  redirectUrl: "/apps/typeform/how-to-use",
+  redirect: {
+    url: "/apps/typeform/how-to-use",
+  },
   createCredential: ({ appType, user, slug }) =>
     createDefaultInstallation({ appType, userId: user.id, slug, key: {} }),
 };

packages/types/AppHandler.d.ts

@@ -11,6 +11,9 @@ export type AppDeclarativeHandler = {
   handlerType: "add";
   createCredential: (arg: { user: Session["user"]; appType: string; slug: string }) => Promise<Credential>;
   supportsMultipleInstalls: boolean;
-  redirectUrl?: string;
+  redirect?: {
+    newTab?: boolean;
+    url: string;
+  };
 };
 export type AppHandler = AppDeclarativeHandler | NextApiHandler;

packages/ui/v2/core/apps/AppCard.tsx

@@ -1,4 +1,5 @@
 import type { Credential } from "@prisma/client";
+import { useRouter } from "next/router";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
@@ -15,8 +16,11 @@ interface AppCardProps {
 
 export default function AppCard({ app, credentials }: AppCardProps) {
   const { t } = useLocale();
+  const router = useRouter();
   const mutation = useAddAppMutation(null, {
     onSuccess: () => {
+      // Refresh SSR page content without actual reload
+      router.replace(router.asPath);
       showToast(t("app_successfully_installed"), "success");
     },
     onError: (error) => {