From 6f0b4f94e642646d2f32749cae031b4510532d03 Mon Sep 17 00:00:00 2001 From: Leo Giovanetti Date: Mon, 19 Sep 2022 13:35:21 +0200 Subject: [PATCH 1/3] Hotfix: Fixing installed app navigation (#4597) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../pages/v2/apps/installed/[category].tsx | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/apps/web/pages/v2/apps/installed/[category].tsx b/apps/web/pages/v2/apps/installed/[category].tsx index cca605e990..a9c85eff34 100644 --- a/apps/web/pages/v2/apps/installed/[category].tsx +++ b/apps/web/pages/v2/apps/installed/[category].tsx @@ -1,4 +1,4 @@ -import { useRouter } from "next/router"; +import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next"; import z from "zod"; import { InstallAppButton } from "@calcom/app-store/components"; @@ -177,12 +177,8 @@ const querySchema = z.object({ category: z.nativeEnum(InstalledAppVariants), }); -export default function InstalledApps() { +export default function InstalledApps({ category }: InferGetStaticPropsType) { const { t } = useLocale(); - const router = useRouter(); - const { category } = router.isReady - ? querySchema.parse(router.query) - : { category: InstalledAppVariants.calendar as const }; return ( @@ -202,3 +198,25 @@ export default function InstalledApps() { ); } + +export const getStaticProps: GetStaticProps = (ctx) => { + const params = querySchema.safeParse(ctx.params); + + if (!params.success) return { notFound: true }; + + return { + props: { + category: params.data.category, + }, + }; +}; + +export const getStaticPaths: GetStaticPaths = () => { + return { + paths: Object.values(InstalledAppVariants).map((category) => ({ + params: { category }, + locale: "en", + })), + fallback: "blocking", + }; +}; From 344710d1f9b88f6a356a114321b9bae7831bf27a Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Mon, 19 Sep 2022 17:17:57 +0530 Subject: [PATCH 2/3] Hotfix/ Embed Tabs (#4593) (#4598) --- apps/web/components/Embed.tsx | 65 +++++++++++-------- .../v2/eventtype/EventTypeSingleLayout.tsx | 1 + .../playwright/embed-code-generator.e2e.ts | 34 ++++------ packages/ui/Dialog.tsx | 2 +- packages/ui/v2/core/Dialog.tsx | 4 +- 5 files changed, 57 insertions(+), 49 deletions(-) diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx index 780ca6af3e..1405fe1ac0 100644 --- a/apps/web/components/Embed.tsx +++ b/apps/web/components/Embed.tsx @@ -1,6 +1,6 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import classNames from "classnames"; -import { useRouter } from "next/router"; +import { NextRouter, useRouter } from "next/router"; import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react"; import { components, ControlProps } from "react-select"; @@ -45,6 +45,23 @@ const getDimension = (dimension: string) => { return dimension; }; +const goto = (router: NextRouter, searchParams: Record) => { + const newQuery = new URLSearchParams(router.asPath.split("?")[1]); + Object.keys(searchParams).forEach((key) => { + newQuery.set(key, searchParams[key]); + }); + router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, { + shallow: true, + }); +}; + +const removeQueryParams = (router: NextRouter, queryParams: string[]) => { + queryParams.forEach((param) => { + delete router.query[param]; + }); + router.push(`${router.asPath.split("?")[0]}?${router.query.toString()}`); +}; + /** * It allows us to show code with certain reusable blocks indented according to the block variable placement * So, if you add a variable ${abc} with indentation of 4 spaces, it will automatically indent all newlines in `abc` with the same indent before constructing the final string @@ -605,9 +622,9 @@ const ChooseEmbedTypesDialogContent = () => { key={index} data-testid={embed.type} onClick={() => { - const newQuery = new URLSearchParams(router.asPath); - newQuery.set("embedType", embed.type); - router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`); + goto(router, { + embedType: embed.type, + }); }}>
{embed.illustration} @@ -632,7 +649,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ const router = useRouter(); const iframeRef = useRef(null); const s = (href: string) => { - const searchParams = new URLSearchParams(router.asPath); + const searchParams = new URLSearchParams(router.asPath.split("?")[1] || ""); const [a, b] = href.split("="); searchParams.set(a, b); return `${router.asPath.split("?")[0]}?${searchParams.toString()}`; @@ -664,21 +681,16 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ }); const close = () => { - const noPopupQuery = { - ...router.query, - }; - - delete noPopupQuery.dialog; - - queryParamsForDialog.forEach((queryParam) => { - delete noPopupQuery[queryParam]; - }); - - router.push({ - query: noPopupQuery, - }); + removeQueryParams(router, ["dialog", ...queryParamsForDialog]); }; + // Use embed-code as default tab + if (!router.query.embedTabName) { + goto(router, { + embedTabName: "embed-code", + }); + } + if (!embed || !embedUrl) { close(); return null; @@ -778,10 +790,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({