insights layout (#18489)

apps/web/app/insights/layout.tsx

@@ -0,0 +1,5 @@
+import { WithLayout } from "app/layoutHOC";
+
+import { getInsightsLayout } from "~/insights/layout";
+
+export default WithLayout({ getLayout: getInsightsLayout });

apps/web/app/insights/page.tsx

@@ -1,10 +1,8 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
+import { notFound } from "next/navigation";
 
-import { getServerSideProps } from "@lib/insights/getServerSideProps";
+import { getFeatureFlag } from "@calcom/features/flags/server/utils";
 
-import type { PageProps } from "~/insights/insights-view";
 import InsightsPage from "~/insights/insights-view";
 
 export const generateMetadata = async () =>
@@ -13,6 +11,13 @@ export const generateMetadata = async () =>
     (t) => t("insights_subtitle")
   );
 
-const getData = withAppDirSsr<PageProps>(getServerSideProps);
+export default async function Page() {
+  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
+  const insightsEnabled = await getFeatureFlag(prisma, "insights");
 
-export default WithLayout({ getLayout: null, getData, Page: InsightsPage });
+  if (!insightsEnabled) {
+    return notFound();
+  }
+
+  return <InsightsPage />;
+}

apps/web/app/insights/routing/page.tsx

@@ -1,8 +1,7 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
+import { notFound } from "next/navigation";
 
-import { getServerSideProps } from "@lib/insights/getServerSideProps";
+import { getFeatureFlag } from "@calcom/features/flags/server/utils";
 
 import InsightsRoutingPage from "~/insights/insights-routing-view";
 
@@ -12,6 +11,13 @@ export const generateMetadata = async () =>
     (t) => t("insights_subtitle")
   );
 
-const getData = withAppDirSsr(getServerSideProps);
+export default async function Page() {
+  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
+  const insightsEnabled = await getFeatureFlag(prisma, "insights");
 
-export default WithLayout({ getLayout: null, getData, Page: InsightsRoutingPage });
+  if (!insightsEnabled) {
+    return notFound();
+  }
+
+  return <InsightsRoutingPage />;
+}

apps/web/app/insights/virtual-queues/page.tsx

@@ -1,8 +1,7 @@
-import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
-import { WithLayout } from "app/layoutHOC";
+import { notFound } from "next/navigation";
 
-import { getServerSideProps } from "@lib/insights/getServerSideProps";
+import { getFeatureFlag } from "@calcom/features/flags/server/utils";
 
 import InsightsVirtualQueuesPage from "~/insights/insights-virtual-queues-view";
 
@@ -12,6 +11,13 @@ export const generateMetadata = async () =>
     (t) => t("insights_subtitle")
   );
 
-const getData = withAppDirSsr(getServerSideProps);
+export default async function Page() {
+  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
+  const insightsEnabled = await getFeatureFlag(prisma, "insights");
 
-export default WithLayout({ getLayout: null, getData, Page: InsightsVirtualQueuesPage });
+  if (!insightsEnabled) {
+    return notFound();
+  }
+
+  return <InsightsVirtualQueuesPage />;
+}

apps/web/lib/insights/getServerSideProps.tsx

@@ -1,15 +0,0 @@
-import { getFeatureFlag } from "@calcom/features/flags/server/utils";
-
-// If feature flag is disabled, return not found on getServerSideProps
-export const getServerSideProps = async () => {
-  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
-  const insightsEnabled = await getFeatureFlag(prisma, "insights");
-
-  if (!insightsEnabled) {
-    return {
-      notFound: true,
-    } as const;
-  }
-
-  return { props: {} };
-};

apps/web/modules/insights/insights-routing-view.tsx

@@ -1,35 +1,35 @@
 "use client";
 
-import { FailedBookingsByField, RoutingFormResponsesTable, RoutedToPerPeriod } from "@calcom/features/insights/components";
+import {
+  FailedBookingsByField,
+  RoutingFormResponsesTable,
+  RoutedToPerPeriod,
+} from "@calcom/features/insights/components";
 import { FiltersProvider } from "@calcom/features/insights/context/FiltersProvider";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import InsightsLayout from "./layout";
-
 export default function InsightsRoutingFormResponsesPage() {
   const { t } = useLocale();
 
   return (
-    <InsightsLayout>
-      <FiltersProvider>
-        <div className="mb-4 space-y-4">
-          <RoutingFormResponsesTable />
+    <FiltersProvider>
+      <div className="mb-4 space-y-4">
+        <RoutingFormResponsesTable />
 
-          <RoutedToPerPeriod />
+        <RoutedToPerPeriod />
 
-          <FailedBookingsByField />
+        <FailedBookingsByField />
 
-          <small className="text-default block text-center">
-            {t("looking_for_more_insights")}{" "}
-            <a
-              className="text-blue-500 hover:underline"
-              href="mailto:updates@cal.com?subject=Feature%20Request%3A%20More%20Analytics&body=Hey%20Cal.com%20Team%2C%20I%20love%20the%20analytics%20page%20but%20I%20am%20looking%20for%20...">
-              {" "}
-              {t("contact_support")}
-            </a>
-          </small>
-        </div>
-      </FiltersProvider>
-    </InsightsLayout>
+        <small className="text-default block text-center">
+          {t("looking_for_more_insights")}{" "}
+          <a
+            className="text-blue-500 hover:underline"
+            href="mailto:updates@cal.com?subject=Feature%20Request%3A%20More%20Analytics&body=Hey%20Cal.com%20Team%2C%20I%20love%20the%20analytics%20page%20but%20I%20am%20looking%20for%20...">
+            {" "}
+            {t("contact_support")}
+          </a>
+        </small>
+      </div>
+    </FiltersProvider>
   );
 }

apps/web/modules/insights/insights-view.tsx

@@ -16,52 +16,43 @@ import { FiltersProvider } from "@calcom/features/insights/context/FiltersProvid
 import { Filters } from "@calcom/features/insights/filters";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import type { getServerSideProps } from "@lib/insights/getServerSideProps";
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
-
-import InsightsLayout from "./layout";
-
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
-
 export default function InsightsPage() {
   const { t } = useLocale();
 
   return (
-    <InsightsLayout>
-      <FiltersProvider>
-        <Filters />
+    <FiltersProvider>
+      <Filters />
 
-        <div className="mb-4 space-y-4">
-          <BookingKPICards />
+      <div className="mb-4 space-y-4">
+        <BookingKPICards />
 
-          <BookingStatusLineChart />
+        <BookingStatusLineChart />
 
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <PopularEventsTable />
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <PopularEventsTable />
 
-            <AverageEventDurationChart />
-          </div>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <MostBookedTeamMembersTable />
-            <LeastBookedTeamMembersTable />
-          </div>
-          <RecentFeedbackTable />
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <HighestNoShowHostTable />
-            <HighestRatedMembersTable />
-            <LowestRatedMembersTable />
-          </div>
-          <small className="text-default block text-center">
-            {t("looking_for_more_insights")}{" "}
-            <a
-              className="text-blue-500 hover:underline"
-              href="mailto:updates@cal.com?subject=Feature%20Request%3A%20More%20Analytics&body=Hey%20Cal.com%20Team%2C%20I%20love%20the%20analytics%20page%20but%20I%20am%20looking%20for%20...">
-              {" "}
-              {t("contact_support")}
-            </a>
-          </small>
+          <AverageEventDurationChart />
         </div>
-      </FiltersProvider>
-    </InsightsLayout>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <MostBookedTeamMembersTable />
+          <LeastBookedTeamMembersTable />
+        </div>
+        <RecentFeedbackTable />
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <HighestNoShowHostTable />
+          <HighestRatedMembersTable />
+          <LowestRatedMembersTable />
+        </div>
+        <small className="text-default block text-center">
+          {t("looking_for_more_insights")}{" "}
+          <a
+            className="text-blue-500 hover:underline"
+            href="mailto:updates@cal.com?subject=Feature%20Request%3A%20More%20Analytics&body=Hey%20Cal.com%20Team%2C%20I%20love%20the%20analytics%20page%20but%20I%20am%20looking%20for%20...">
+            {" "}
+            {t("contact_support")}
+          </a>
+        </small>
+      </div>
+    </FiltersProvider>
   );
 }

apps/web/modules/insights/insights-virtual-queues-view.tsx

@@ -8,8 +8,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import { Label, Select } from "@calcom/ui";
 
-import InsightsLayout from "./layout";
-
 export default function InsightsVirtualQueuesPage() {
   const { t } = useLocale();
   const { data: routingForms, isLoading: isRoutingFormsLoading } =
@@ -24,7 +22,7 @@ export default function InsightsVirtualQueuesPage() {
   }
 
   return (
-    <InsightsLayout>
+    <>
       <Label>{t("routing_form")}</Label>
       <Select
         placeholder="Select project"
@@ -42,7 +40,7 @@ export default function InsightsVirtualQueuesPage() {
       <div className="mt-10">
         {selectedForm ? <TestForm form={selectedForm} showAllData={false} /> : <></>}
       </div>
-    </InsightsLayout>
+    </>
   );
 
   return <></>;

apps/web/modules/insights/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import type { ReactElement } from "react";
+
 import Shell from "@calcom/features/shell/Shell";
 import { UpgradeTip } from "@calcom/features/tips";
 import { WEBAPP_URL } from "@calcom/lib/constants";
@@ -8,11 +10,6 @@ import { trpc } from "@calcom/trpc";
 import { Button, ButtonGroup } from "@calcom/ui";
 import { Icon } from "@calcom/ui";
 
-import type { getServerSideProps } from "@lib/insights/getServerSideProps";
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
-
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
-
 export default function InsightsLayout({ children }: { children: React.ReactNode }) {
   const { t } = useLocale();
   const { data: user } = trpc.viewer.me.useQuery();
@@ -67,3 +64,5 @@ export default function InsightsLayout({ children }: { children: React.ReactNode
     </div>
   );
 }
+
+export const getInsightsLayout = (page: ReactElement) => <InsightsLayout>{page}</InsightsLayout>;