feat: add calendar cache status and actions (#22532)

apps/web/package.json

@@ -8,7 +8,7 @@
     "analyze:browser": "BUNDLE_ANALYZE=browser next build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "yarn copy-static && next dev --turbopack",
-    "dev:cron": "ts-node cron-tester.ts",
+    "dev:cron": "npx tsx cron-tester.ts",
     "dev-https": "NODE_TLS_REJECT_UNAUTHORIZED=0 next dev --experimental-https",
     "dx": "yarn dev",
     "test-codegen": "yarn playwright codegen http://localhost:3000",

apps/web/public/static/locales/en/common.json

@@ -3379,5 +3379,12 @@
   "timezone_mismatch_tooltip": "You are viewing the report based on your profile timezone ({{userTimezone}}), while your browser is set to timezone ({{browserTimezone}})",
   "failed_bookings_by_field": "Failed Bookings By Field",
   "event_type_no_hosts": "No hosts are assigned to event type",
+  "cache_status": "Cache Status",
+  "cache_last_updated": "Last updated: {{timestamp}}",
+  "delete_cached_data": "Delete cached data",
+  "cache_deleted_successfully": "Cache deleted successfully",
+  "error_deleting_cache": "Error deleting cache",
+  "confirm_delete_cache": "Are you sure you want to delete the cached data? This action cannot be undone.",
+  "yes_delete_cache": "Yes, delete cache",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/app-store/googlecalendar/lib/CalendarService.ts

@@ -1019,6 +1019,9 @@ export default class GoogleCalendarService implements Calendar {
       const data = await this.fetchAvailability(parsedArgs);
       await this.setAvailabilityInCache(parsedArgs, data);
     }
+
+    // Update SelectedCalendar.updatedAt for all calendars under this credential
+    await SelectedCalendarRepository.updateManyByCredentialId(this.credential.id, {});
   }
 
   async createSelectedCalendar(

packages/features/apps/components/CredentialActionsDropdown.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { GOOGLE_CALENDAR_TYPE } from "@calcom/platform-constants";
+import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
+import { ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { Dialog } from "@calcom/ui/components/dialog";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@calcom/ui/components/dropdown";
+import { showToast } from "@calcom/ui/components/toast";
+
+interface CredentialActionsDropdownProps {
+  credentialId: number;
+  integrationType: string;
+  cacheUpdatedAt?: Date | null;
+  onSuccess?: () => void;
+  delegationCredentialId?: string | null;
+  disableConnectionModification?: boolean;
+}
+
+export default function CredentialActionsDropdown({
+  credentialId,
+  integrationType,
+  cacheUpdatedAt,
+  onSuccess,
+  delegationCredentialId,
+  disableConnectionModification,
+}: CredentialActionsDropdownProps) {
+  const { t } = useLocale();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [disconnectModalOpen, setDisconnectModalOpen] = useState(false);
+
+  const deleteCacheMutation = trpc.viewer.calendars.deleteCache.useMutation({
+    onSuccess: () => {
+      showToast(t("cache_deleted_successfully"), "success");
+      onSuccess?.();
+    },
+    onError: () => {
+      showToast(t("error_deleting_cache"), "error");
+    },
+  });
+
+  const utils = trpc.useUtils();
+  const disconnectMutation = trpc.viewer.credentials.delete.useMutation({
+    onSuccess: () => {
+      showToast(t("app_removed_successfully"), "success");
+      onSuccess?.();
+    },
+    onError: () => {
+      showToast(t("error_removing_app"), "error");
+    },
+    async onSettled() {
+      await utils.viewer.calendars.connectedCalendars.invalidate();
+      await utils.viewer.apps.integrations.invalidate();
+    },
+  });
+
+  const isGoogleCalendar = integrationType === GOOGLE_CALENDAR_TYPE;
+  const canDisconnect = !delegationCredentialId && !disableConnectionModification;
+  const hasCache = isGoogleCalendar && cacheUpdatedAt;
+
+  if (!canDisconnect && !hasCache) {
+    return null;
+  }
+
+  return (
+    <>
+      <Dropdown open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button type="button" variant="icon" color="secondary" StartIcon="ellipsis" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {hasCache && (
+            <>
+              <DropdownMenuItem className="focus:ring-muted">
+                <div className="px-2 py-1">
+                  <div className="text-sm font-medium text-gray-900 dark:text-white">{t("cache_status")}</div>
+                  <div className="text-xs text-gray-500 dark:text-white">
+                    {t("cache_last_updated", {
+                      timestamp: new Intl.DateTimeFormat("en-US", {
+                        dateStyle: "short",
+                        timeStyle: "short",
+                      }).format(new Date(cacheUpdatedAt)),
+                      interpolation: { escapeValue: false },
+                    })}
+                  </div>
+                </div>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="outline-none">
+                <DropdownItem
+                  type="button"
+                  color="destructive"
+                  StartIcon="trash"
+                  onClick={() => {
+                    setDeleteModalOpen(true);
+                    setDropdownOpen(false);
+                  }}>
+                  {t("delete_cached_data")}
+                </DropdownItem>
+              </DropdownMenuItem>
+            </>
+          )}
+          {canDisconnect && hasCache && <hr className="my-1" />}
+          {canDisconnect && (
+            <DropdownMenuItem className="outline-none">
+              <DropdownItem
+                type="button"
+                color="destructive"
+                StartIcon="trash"
+                onClick={() => {
+                  setDisconnectModalOpen(true);
+                  setDropdownOpen(false);
+                }}>
+                {t("remove_app")}
+              </DropdownItem>
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </Dropdown>
+
+      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
+        <ConfirmationDialogContent
+          variety="danger"
+          title={t("delete_cached_data")}
+          confirmBtnText={t("yes_delete_cache")}
+          onConfirm={() => {
+            deleteCacheMutation.mutate({ credentialId });
+            setDeleteModalOpen(false);
+          }}>
+          {t("confirm_delete_cache")}
+        </ConfirmationDialogContent>
+      </Dialog>
+
+      <Dialog open={disconnectModalOpen} onOpenChange={setDisconnectModalOpen}>
+        <ConfirmationDialogContent
+          variety="danger"
+          title={t("remove_app")}
+          confirmBtnText={t("yes_remove_app")}
+          onConfirm={() => {
+            disconnectMutation.mutate({ id: credentialId });
+            setDisconnectModalOpen(false);
+          }}>
+          {t("are_you_sure_you_want_to_remove_this_app")}
+        </ConfirmationDialogContent>
+      </Dialog>
+    </>
+  );
+}

packages/features/calendar-cache/calendar-cache.repository.interface.ts

@@ -27,4 +27,7 @@ export interface ICalendarCacheRepository {
     userId: number | null;
     args: FreeBusyArgs;
   }): Promise<CalendarCache | null>;
+  getCacheStatusByCredentialIds(
+    credentialIds: number[]
+  ): Promise<{ credentialId: number; updatedAt: Date | null }[]>;
 }

packages/features/calendar-cache/calendar-cache.repository.mock.ts

@@ -23,4 +23,9 @@ export class CalendarCacheRepositoryMock implements ICalendarCacheRepository {
   async deleteManyByCredential() {
     log.info(`Skipping deleteManyByCredential due to calendar-cache being disabled`);
   }
+
+  async getCacheStatusByCredentialIds() {
+    log.info(`Skipping getCacheStatusByCredentialIds due to calendar-cache being disabled`);
+    return [];
+  }
 }

packages/features/calendar-cache/calendar-cache.repository.ts

@@ -169,4 +169,21 @@ export class CalendarCacheRepository implements ICalendarCacheRepository {
       },
     });
   }
+
+  async getCacheStatusByCredentialIds(credentialIds: number[]) {
+    const cacheStatuses = await prisma.calendarCache.groupBy({
+      by: ["credentialId"],
+      where: {
+        credentialId: { in: credentialIds },
+      },
+      _max: {
+        updatedAt: true,
+      },
+    });
+
+    return cacheStatuses.map((cache) => ({
+      credentialId: cache.credentialId,
+      updatedAt: cache._max.updatedAt,
+    }));
+  }
 }

packages/lib/getConnectedDestinationCalendars.ts

@@ -18,8 +18,14 @@ type ReturnTypeGetConnectedCalendars = Awaited<ReturnType<typeof getConnectedCal
 type ConnectedCalendarsFromGetConnectedCalendars = ReturnTypeGetConnectedCalendars["connectedCalendars"];
 
 export type UserWithCalendars = Pick<User, "id" | "email"> & {
-  allSelectedCalendars: Pick<SelectedCalendar, "externalId" | "integration" | "eventTypeId">[];
-  userLevelSelectedCalendars: Pick<SelectedCalendar, "externalId" | "integration" | "eventTypeId">[];
+  allSelectedCalendars: Pick<
+    SelectedCalendar,
+    "externalId" | "integration" | "eventTypeId" | "updatedAt" | "googleChannelId"
+  >[];
+  userLevelSelectedCalendars: Pick<
+    SelectedCalendar,
+    "externalId" | "integration" | "eventTypeId" | "updatedAt" | "googleChannelId"
+  >[];
   destinationCalendar: DestinationCalendar | null;
 };
 

packages/lib/server/repository/selectedCalendar.ts

@@ -257,8 +257,7 @@ export class SelectedCalendarRepository {
   }
 
   static async findMany({ where, select, orderBy }: FindManyArgs) {
-    const args = { where, select, orderBy } satisfies Prisma.SelectedCalendarFindManyArgs;
-    return await prisma.selectedCalendar.findMany(args);
+    return await prisma.selectedCalendar.findMany({ where, select, orderBy });
   }
 
   static async findUniqueOrThrow({ where }: { where: Prisma.SelectedCalendarWhereInput }) {
@@ -398,6 +397,13 @@ export class SelectedCalendarRepository {
     });
   }
 
+  static async updateManyByCredentialId(credentialId: number, data: Prisma.SelectedCalendarUpdateInput) {
+    return await prisma.selectedCalendar.updateMany({
+      where: { credentialId },
+      data,
+    });
+  }
+
   static async setErrorInWatching({ id, error }: { id: string; error: string }) {
     await SelectedCalendarRepository.updateById(id, {
       error,

packages/lib/server/repository/user.ts

@@ -896,6 +896,8 @@ export class UserRepository {
             eventTypeId: true,
             externalId: true,
             integration: true,
+            updatedAt: true,
+            googleChannelId: true,
           },
         },
         completedOnboarding: true,

packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import React from "react";
 
 import AppListCard from "@calcom/features/apps/components/AppListCard";
-import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+import CredentialActionsDropdown from "@calcom/features/apps/components/CredentialActionsDropdown";
 import AdditionalCalendarSelector from "@calcom/features/calendars/AdditionalCalendarSelector";
 import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -67,18 +67,16 @@ const ConnectedCalendarList = ({
               description={connectedCalendar.primary?.email ?? connectedCalendar.integration.description}
               className="border-subtle mt-4 rounded-lg border"
               actions={
-                // Delegation credential can't be disconnected
-                !connectedCalendar.delegationCredentialId &&
-                !disableConnectionModification && (
-                  <div className="flex w-32 justify-end">
-                    <DisconnectIntegration
-                      credentialId={connectedCalendar.credentialId}
-                      trashIcon
-                      onSuccess={onChanged}
-                      buttonProps={{ className: "border border-default" }}
-                    />
-                  </div>
-                )
+                <div className="flex w-32 justify-end">
+                  <CredentialActionsDropdown
+                    credentialId={connectedCalendar.credentialId}
+                    integrationType={connectedCalendar.integration.type}
+                    cacheUpdatedAt={connectedCalendar.cacheUpdatedAt}
+                    onSuccess={onChanged}
+                    delegationCredentialId={connectedCalendar.delegationCredentialId}
+                    disableConnectionModification={disableConnectionModification}
+                  />
+                </div>
               }>
               <div className="border-subtle border-t">
                 {!fromOnboarding && (
@@ -97,7 +95,7 @@ const ConnectedCalendarList = ({
                           destination={cal.externalId === destinationCalendarId}
                           credentialId={cal.credentialId}
                           eventTypeId={shouldUseEventTypeScope ? eventTypeId : null}
-                          delegationCredentialId={connectedCalendar.delegationCredentialId}
+                          delegationCredentialId={connectedCalendar.delegationCredentialId || null}
                         />
                       ))}
                     </ul>
@@ -122,17 +120,16 @@ const ConnectedCalendarList = ({
             }
             iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5"
             actions={
-              // Delegation credential can't be disconnected
-              !connectedCalendar.delegationCredentialId && (
-                <div className="flex w-32 justify-end">
-                  <DisconnectIntegration
-                    credentialId={connectedCalendar.credentialId}
-                    trashIcon
-                    onSuccess={onChanged}
-                    buttonProps={{ className: "border border-default" }}
-                  />
-                </div>
-              )
+              <div className="flex w-32 justify-end">
+                <CredentialActionsDropdown
+                  credentialId={connectedCalendar.credentialId}
+                  integrationType={connectedCalendar.integration.type}
+                  cacheUpdatedAt={connectedCalendar.cacheUpdatedAt}
+                  onSuccess={onChanged}
+                  delegationCredentialId={connectedCalendar.delegationCredentialId}
+                  disableConnectionModification={disableConnectionModification}
+                />
+              </div>
             }
           />
         );
@@ -162,6 +159,7 @@ export const SelectedCalendarsSettingsWebWrapper = (props: SelectedCalendarsSett
       refetchOnWindowFocus: false,
     }
   );
+
   const { isPending } = props;
   const showScopeSelector = !!props.eventTypeId;
   const isDisabled = disabledScope ? disabledScope === scope : false;

packages/prisma/migrations/20250715160635_add_calendar_cache_updated_at/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - Added the required column `updatedAt` to the `CalendarCache` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+-- Add the column with a default value to safely handle existing rows
+ALTER TABLE "CalendarCache" ADD COLUMN "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT NOW();

packages/prisma/schema.prisma

@@ -1715,6 +1715,8 @@ model CalendarCache {
   key          String
   value        Json
   expiresAt    DateTime
+  // Provide an initial value for legacy rows and future raw inserts
+  updatedAt    DateTime    @default(now()) @updatedAt
   credentialId Int
   userId       Int?
   credential   Credential? @relation(fields: [credentialId], references: [id], onDelete: Cascade)

packages/trpc/server/routers/viewer/calendars/_router.tsx

@@ -1,3 +1,5 @@
+import { z } from "zod";
+
 import authedProcedure from "../../../procedures/authedProcedure";
 import { router } from "../../../trpc";
 import { ZConnectedCalendarsInputSchema } from "./connectedCalendars.schema";
@@ -22,4 +24,11 @@ export const calendarsRouter = router({
 
       return setDestinationCalendarHandler({ ctx, input });
     }),
+
+  deleteCache: authedProcedure
+    .input(z.object({ credentialId: z.number() }))
+    .mutation(async ({ ctx, input }) => {
+      const { deleteCacheHandler } = await import("./deleteCache.handler");
+      return deleteCacheHandler({ ctx, input });
+    }),
 });