perf: Event-type config page (#10238)

apps/web/components/Embed.tsx

@@ -191,8 +191,8 @@ export default function MyApp() {
       ${uiInstructionCode}
     })();
   }, [])
-  return <Cal 
-    calLink="${calLink}" 
+  return <Cal
+    calLink="${calLink}"
     style={{width:"${width}",height:"${height}",overflow:"scroll"}}
     ${previewState.layout ? "config={{layout: '" + previewState.layout + "'}}" : ""}${
         IS_SELF_HOSTED
@@ -243,11 +243,11 @@ export default function App() {
       ${uiInstructionCode}
     })();
   }, [])
-  return <button 
+  return <button
     data-cal-link="${calLink}"${IS_SELF_HOSTED ? `\ndata-cal-origin="${EMBED_CAL_ORIGIN}"` : ""}
     ${`data-cal-config='${JSON.stringify({
       layout: previewState.layout,
-    })}'`}  
+    })}'`}
     >Click me</button>;
 };`;
     },
@@ -292,10 +292,10 @@ ${uiInstructionCode}`;
     }) => {
       return code`
 // Important: Please add following attributes to the element you want to open Cal on click
-// \`data-cal-link="${calLink}"\` 
+// \`data-cal-link="${calLink}"\`
 // \`data-cal-config='${JSON.stringify({
         layout: previewState.layout,
-      })}'\` 
+      })}'\`
 
 ${uiInstructionCode}`;
     },
@@ -1182,7 +1182,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
           </div>
         </div>
         <div className="flex w-2/3 flex-col p-8">
-          <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkProps={{ shallow: true }} />
+          <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkShallow />
           {tabs.map((tab) => {
             return (
               <div

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -407,13 +407,13 @@ function EventTypeSingleLayout({
               className="primary-navigation"
               tabs={EventTypeTabs}
               sticky
-              linkProps={{ shallow: true }}
+              linkShallow
               itemClassname="items-start"
               iconClassName="md:mt-px"
             />
           </div>
           <div className="p-2 md:mx-0 md:p-0 xl:hidden">
-            <HorizontalTabs tabs={EventTypeTabs} linkProps={{ shallow: true }} />
+            <HorizontalTabs tabs={EventTypeTabs} linkShallow />
           </div>
           <div className="w-full ltr:mr-2 rtl:ml-2">
             <div

packages/app-store/_components/AppCategoryNavigation.tsx

@@ -33,15 +33,10 @@ const AppCategoryNavigation = ({
   return (
     <div className={cs("flex flex-col gap-x-6 md:p-0 xl:flex-row", classNames?.root ?? className)}>
       <div className="hidden xl:block">
-        <VerticalTabs
-          tabs={appCategories}
-          sticky
-          linkProps={{ shallow: true }}
-          itemClassname={classNames?.verticalTabsItem}
-        />
+        <VerticalTabs tabs={appCategories} sticky linkShallow itemClassname={classNames?.verticalTabsItem} />
       </div>
       <div className="block overflow-x-scroll xl:hidden">
-        <HorizontalTabs tabs={appCategories} linkProps={{ shallow: true }} />
+        <HorizontalTabs tabs={appCategories} linkShallow />
       </div>
       <main className={classNames?.container ?? containerClassname} ref={animationRef}>
         {children}

packages/features/shell/Shell.tsx

@@ -136,6 +136,41 @@ function useRedirectToLoginIfUnauthenticated(isPublic = false) {
   };
 }
 
+function AppTop({ setBannersHeight }: { setBannersHeight: Dispatch<SetStateAction<number>> }) {
+  const router = useRouter();
+  const bannerRef = useRef<HTMLDivElement | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      const { offsetHeight } = entries[0].target as HTMLElement;
+      setBannersHeight(offsetHeight);
+    });
+
+    const currentBannerRef = bannerRef.current;
+
+    if (currentBannerRef) {
+      resizeObserver.observe(currentBannerRef);
+    }
+
+    return () => {
+      if (currentBannerRef) {
+        resizeObserver.unobserve(currentBannerRef);
+      }
+    };
+  }, [bannerRef]);
+
+  return (
+    <div ref={bannerRef} className="sticky top-0 z-10 w-full divide-y divide-black">
+      <NProgressNextRouter router={router} />
+      <TeamsUpgradeBanner />
+      <OrgUpgradeBanner />
+      <ImpersonatingBanner />
+      <AdminPasswordBanner />
+      <VerifyEmailBanner />
+    </div>
+  );
+}
+
 function useRedirectToOnboardingIfNeeded() {
   const router = useRouter();
   const query = useMeQuery();
@@ -163,29 +198,8 @@ function useRedirectToOnboardingIfNeeded() {
 }
 
 const Layout = (props: LayoutProps) => {
-  const router = useRouter();
-  const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
-  const bannerRef = useRef<HTMLDivElement | null>(null);
   const [bannersHeight, setBannersHeight] = useState<number>(0);
-
-  useIsomorphicLayoutEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      const { offsetHeight } = entries[0].target as HTMLElement;
-      setBannersHeight(offsetHeight);
-    });
-
-    const currentBannerRef = bannerRef.current;
-
-    if (currentBannerRef) {
-      resizeObserver.observe(currentBannerRef);
-    }
-
-    return () => {
-      if (currentBannerRef) {
-        resizeObserver.unobserve(currentBannerRef);
-      }
-    };
-  }, [bannerRef]);
+  const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title;
 
   return (
     <>
@@ -202,14 +216,7 @@ const Layout = (props: LayoutProps) => {
       {/* todo: only run this if timezone is different */}
       <TimezoneChangeDialog />
       <div className="flex min-h-screen flex-col">
-        <div ref={bannerRef} className="sticky top-0 z-10 w-full divide-y divide-black">
-          <NProgressNextRouter router={router} />
-          <TeamsUpgradeBanner />
-          <OrgUpgradeBanner />
-          <ImpersonatingBanner />
-          <AdminPasswordBanner />
-          <VerifyEmailBanner />
-        </div>
+        <AppTop setBannersHeight={setBannersHeight} />
         <div className="flex flex-1" data-testid="dashboard-shell">
           {props.SidebarContainer || <SideBarContainer bannersHeight={bannersHeight} />}
           <div className="flex w-0 flex-1 flex-col">

packages/ui/components/navigation/tabs/HorizontalTabItem.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import type { ComponentProps } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -14,12 +13,20 @@ export type HorizontalTabItemProps = {
   disabled?: boolean;
   className?: string;
   href: string;
-  linkProps?: Omit<ComponentProps<typeof Link>, "href">;
+  linkShallow?: boolean;
+  linkScroll?: boolean;
   icon?: SVGComponent;
   avatar?: string;
 };
 
-const HorizontalTabItem = function ({ name, href, linkProps, avatar, ...props }: HorizontalTabItemProps) {
+const HorizontalTabItem = function ({
+  name,
+  href,
+  linkShallow,
+  linkScroll,
+  avatar,
+  ...props
+}: HorizontalTabItemProps) {
   const { t, isLocaleReady } = useLocale();
   const { asPath } = useRouter();
 
@@ -29,7 +36,8 @@ const HorizontalTabItem = function ({ name, href, linkProps, avatar, ...props }:
     <Link
       key={name}
       href={href}
-      {...linkProps}
+      shallow={linkShallow}
+      scroll={linkScroll}
       className={classNames(
         isCurrent ? "bg-emphasis text-emphasis" : "hover:bg-subtle hover:text-emphasis text-default",
         "inline-flex items-center justify-center whitespace-nowrap rounded-[6px] p-2 text-sm font-medium leading-4 md:mb-0",

packages/ui/components/navigation/tabs/HorizontalTabs.tsx

@@ -3,11 +3,12 @@ import HorizontalTabItem from "./HorizontalTabItem";
 
 export interface NavTabProps {
   tabs: HorizontalTabItemProps[];
-  linkProps?: HorizontalTabItemProps["linkProps"];
+  linkShallow?: boolean;
+  linkScroll?: boolean;
   actions?: JSX.Element;
 }
 
-const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabProps) {
+const HorizontalTabs = function ({ tabs, linkShallow, linkScroll, actions, ...props }: NavTabProps) {
   return (
     <div className="mb-4 h-9 max-w-[calc(100%+40px)] lg:mb-5">
       <nav
@@ -15,7 +16,13 @@ const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabP
         aria-label="Tabs"
         {...props}>
         {tabs.map((tab, idx) => (
-          <HorizontalTabItem className="px-4 py-2.5" {...tab} key={idx} {...linkProps} />
+          <HorizontalTabItem
+            className="px-4 py-2.5"
+            {...tab}
+            key={idx}
+            linkShallow={linkShallow}
+            linkScroll={linkScroll}
+          />
         ))}
       </nav>
       {actions && actions}

packages/ui/components/navigation/tabs/VerticalTabItem.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import type { ComponentProps } from "react";
 import { Fragment } from "react";
 
 import classNames from "@calcom/lib/classNames";
@@ -23,7 +22,8 @@ export type VerticalTabItemProps = {
   disableChevron?: boolean;
   href: string;
   isExternalLink?: boolean;
-  linkProps?: Omit<ComponentProps<typeof Link>, "href">;
+  linkShallow?: boolean;
+  linkScroll?: boolean;
   avatar?: string;
   iconClassName?: string;
 };
@@ -34,7 +34,8 @@ const VerticalTabItem = ({
   info,
   isChild,
   disableChevron,
-  linkProps,
+  linkShallow,
+  linkScroll,
   ...props
 }: VerticalTabItemProps) => {
   const { t } = useLocale();
@@ -47,7 +48,8 @@ const VerticalTabItem = ({
           <Link
             key={name}
             href={href}
-            {...linkProps}
+            shallow={linkShallow}
+            scroll={linkScroll}
             target={props.isExternalLink ? "_blank" : "_self"}
             className={classNames(
               props.textClassNames || "text-default text-sm font-medium leading-none",

packages/ui/components/navigation/tabs/VerticalTabs.tsx

@@ -10,7 +10,8 @@ export interface NavTabProps {
   children?: React.ReactNode;
   className?: string;
   sticky?: boolean;
-  linkProps?: VerticalTabItemProps["linkProps"];
+  linkShallow?: boolean;
+  linkScroll?: boolean;
   itemClassname?: string;
   iconClassName?: string;
 }
@@ -19,7 +20,8 @@ const NavTabs = function ({
   tabs,
   className = "",
   sticky,
-  linkProps,
+  linkShallow,
+  linkScroll,
   itemClassname,
   iconClassName,
   ...props
@@ -39,7 +41,8 @@ const NavTabs = function ({
         <VerticalTabItem
           {...tab}
           key={idx}
-          linkProps={linkProps}
+          linkShallow={linkShallow}
+          linkScroll={linkScroll}
           className={itemClassname}
           iconClassName={iconClassName}
         />