fix: Feature flag user cache (#10359)

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

apps/web/pages/api/trpc/features/[trpc].ts

@@ -1,4 +1,4 @@
 import { featureFlagRouter } from "@calcom/features/flags/server/router";
 import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
 
-export default createNextApiHandler(featureFlagRouter);
+export default createNextApiHandler(featureFlagRouter, true, "features");

packages/features/flags/components/FlagAdminList.tsx

@@ -32,7 +32,7 @@ const FlagToggle = (props: { flag: Flag }) => {
     flag: { slug, enabled },
   } = props;
   const utils = trpc.useContext();
-  const mutation = trpc.viewer.features.toggle.useMutation({
+  const mutation = trpc.viewer.admin.toggleFeatureFlag.useMutation({
     onSuccess: () => {
       showToast("Flags successfully updated", "success");
       utils.viewer.features.list.invalidate();

packages/features/flags/server/router.ts

@@ -1,6 +1,3 @@
-import { z } from "zod";
-
-import { authedAdminProcedure } from "@calcom/trpc/server/procedures/authedProcedure";
 import publicProcedure from "@calcom/trpc/server/procedures/publicProcedure";
 import { router } from "@calcom/trpc/server/trpc";
 
@@ -17,14 +14,4 @@ export const featureFlagRouter = router({
     const { prisma } = ctx;
     return getFeatureFlagMap(prisma);
   }),
-  toggle: authedAdminProcedure
-    .input(z.object({ slug: z.string(), enabled: z.boolean() }))
-    .mutation(({ ctx, input }) => {
-      const { prisma, user } = ctx;
-      const { slug, enabled } = input;
-      return prisma.feature.update({
-        where: { slug },
-        data: { enabled, updatedBy: user.id },
-      });
-    }),
 });

packages/trpc/server/createNextApiHandler.ts

@@ -8,7 +8,7 @@ import type { AnyRouter } from "@trpc/server";
 /**
  * Creates an API handler executed by Next.js.
  */
-export function createNextApiHandler(router: AnyRouter, isPublic = false) {
+export function createNextApiHandler(router: AnyRouter, isPublic = false, namespace = "") {
   return trpcNext.createNextApiHandler({
     router,
     /**
@@ -64,10 +64,13 @@ export function createNextApiHandler(router: AnyRouter, isPublic = false) {
           // Revalidation time here should be 1 second, per https://github.com/calcom/cal.com/pull/6823#issuecomment-1423215321
           "slots.getSchedule": `no-cache`, // FIXME
           cityTimezones: `max-age=${ONE_DAY_IN_SECONDS}, stale-while-revalidate`,
+          "features.map": `max-age=${ONE_DAY_IN_SECONDS}, stale-while-revalidate`, // "map" - Feature Flag Map
         } as const;
 
-        const matchedPath = paths.find((v) => v in cacheRules) as keyof typeof cacheRules;
+        const prependNamespace = (key: string) =>
-        if (matchedPath) defaultHeaders.headers["cache-control"] = cacheRules[matchedPath];
+          (namespace ? `${namespace}.${key}` : key) as keyof typeof cacheRules;
+        const matchedPath = paths.find((v) => prependNamespace(v) in cacheRules);
+        if (matchedPath) defaultHeaders.headers["cache-control"] = cacheRules[prependNamespace(matchedPath)];
       }
 
       return defaultHeaders;

packages/trpc/server/routers/viewer/admin/_router.ts

@@ -1,3 +1,5 @@
+import { z } from "zod";
+
 import { authedAdminProcedure } from "../../../procedures/authedProcedure";
 import { router } from "../../../trpc";
 import { ZListMembersSchema } from "./listPaginated.schema";
@@ -47,4 +49,14 @@ export const adminRouter = router({
         input,
       });
     }),
+  toggleFeatureFlag: authedAdminProcedure
+    .input(z.object({ slug: z.string(), enabled: z.boolean() }))
+    .mutation(({ ctx, input }) => {
+      const { prisma, user } = ctx;
+      const { slug, enabled } = input;
+      return prisma.feature.update({
+        where: { slug },
+        data: { enabled, updatedBy: user.id },
+      });
+    }),
 });