feat: dry run behaviour for CalendarSettings atom (#20690)

packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx

@@ -10,23 +10,27 @@ type CalendarSettingsPlatformWrapperProps = {
   };
   calendarRedirectUrls?: CalendarRedirectUrls;
   allowDelete?: boolean;
+  isDryRun?: boolean;
 };
 
 export const CalendarSettingsPlatformWrapper = ({
   classNames,
   calendarRedirectUrls,
   allowDelete = true,
+  isDryRun,
 }: CalendarSettingsPlatformWrapperProps) => {
   return (
     <div className={classNames?.calendarSettingsCustomClassnames}>
       <DestinationCalendarSettingsPlatformWrapper
         statusLoader={<></>}
         classNames={classNames?.destinationCalendarSettingsCustomClassnames}
+        isDryRun={isDryRun}
       />
       <SelectedCalendarsSettingsPlatformWrapper
         classNames={classNames?.selectedCalendarSettingsCustomClassnames}
         calendarRedirectUrls={calendarRedirectUrls}
         allowDelete={allowDelete}
+        isDryRun={isDryRun}
       />
     </div>
   );

packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx

@@ -6,9 +6,11 @@ import { DestinationCalendarSettings } from "../DestinationCalendar";
 export const DestinationCalendarSettingsPlatformWrapper = ({
   statusLoader,
   classNames = "mx-5",
+  isDryRun = false,
 }: {
   statusLoader?: JSX.Element;
   classNames?: string;
+  isDryRun?: boolean;
 }) => {
   const calendars = useConnectedCalendars({});
   const { mutate: updateDestinationCalendars, isPending: isUpdatingCalendar } =
@@ -39,11 +41,13 @@ export const DestinationCalendarSettingsPlatformWrapper = ({
         hidePlaceholder
         hideAdvancedText
         onChange={async ({ externalId, integration, delegationCredentialId }) => {
-          await updateDestinationCalendars({
-            integration,
-            externalId,
-            delegationCredentialId,
-          });
+          if (!isDryRun) {
+            await updateDestinationCalendars({
+              integration,
+              externalId,
+              delegationCredentialId,
+            });
+          }
         }}
         isPending={isUpdatingCalendar}
       />

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

@@ -33,12 +33,14 @@ type SelectedCalendarsSettingsPlatformWrapperProps = {
   classNames?: string;
   calendarRedirectUrls?: CalendarRedirectUrls;
   allowDelete?: boolean;
+  isDryRun?: boolean;
 };
 
 export const SelectedCalendarsSettingsPlatformWrapper = ({
   classNames = "mx-5 mb-6",
   calendarRedirectUrls,
   allowDelete,
+  isDryRun,
 }: SelectedCalendarsSettingsPlatformWrapperProps) => {
   const { t } = useLocale();
   const query = useConnectedCalendars({});
@@ -54,7 +56,10 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
             if (!data.connectedCalendars.length) {
               return (
                 <SelectedCalendarsSettings classNames={classNames}>
-                  <SelectedCalendarsSettingsHeading calendarRedirectUrls={calendarRedirectUrls} />
+                  <SelectedCalendarsSettingsHeading
+                    calendarRedirectUrls={calendarRedirectUrls}
+                    isDryRun={isDryRun}
+                  />
                   <h1 className="px-6 py-4 text-base leading-5">No connected calendars found.</h1>
                 </SelectedCalendarsSettings>
               );
@@ -62,7 +67,10 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
 
             return (
               <SelectedCalendarsSettings classNames={classNames}>
-                <SelectedCalendarsSettingsHeading calendarRedirectUrls={calendarRedirectUrls} />
+                <SelectedCalendarsSettingsHeading
+                  calendarRedirectUrls={calendarRedirectUrls}
+                  isDryRun={isDryRun}
+                />
                 <List noBorderTreatment className="p-6 pt-2">
                   {data.connectedCalendars.map((connectedCalendar) => {
                     if (!!connectedCalendar.calendars && connectedCalendar.calendars.length > 0) {
@@ -85,6 +93,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                                   trashIcon
                                   buttonProps={{ className: "border border-default" }}
                                   slug={connectedCalendar.integration.slug}
+                                  isDryRun={isDryRun}
                                 />
                               )}
                             </div>
@@ -105,6 +114,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                                     credentialId={cal.credentialId}
                                     delegationCredentialId={connectedCalendar.delegationCredentialId}
                                     eventTypeId={null}
+                                    isDryRun={isDryRun}
                                   />
                                 );
                               })}
@@ -128,6 +138,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                                 trashIcon
                                 buttonProps={{ className: "border border-default" }}
                                 slug={connectedCalendar.integration.slug}
+                                isDryRun={isDryRun}
                               />
                             </div>
                           )
@@ -147,8 +158,10 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
 
 const SelectedCalendarsSettingsHeading = ({
   calendarRedirectUrls,
+  isDryRun,
 }: {
   calendarRedirectUrls?: CalendarRedirectUrls;
+  isDryRun?: boolean;
 }) => {
   const { t } = useLocale();
 
@@ -161,7 +174,10 @@ const SelectedCalendarsSettingsHeading = ({
         </div>
         <div className="flex flex-col xl:flex-row xl:space-x-5">
           <div className="flex items-center">
-            <PlatformAdditionalCalendarSelector calendarRedirectUrls={calendarRedirectUrls} />
+            <PlatformAdditionalCalendarSelector
+              calendarRedirectUrls={calendarRedirectUrls}
+              isDryRun={isDryRun}
+            />
           </div>
         </div>
       </div>
@@ -177,6 +193,7 @@ const PlatformDisconnectIntegration = (props: {
   isGlobal?: boolean;
   onSuccess?: () => void;
   buttonProps?: ButtonProps;
+  isDryRun?: boolean;
 }) => {
   const { t } = useLocale();
   const { onSuccess, credentialId, slug } = props;
@@ -202,11 +219,20 @@ const PlatformDisconnectIntegration = (props: {
   return (
     <DisconnectIntegrationComponent
       onDeletionConfirmation={async () => {
-        slug &&
-          (await deleteCalendarCredentials({
+        !props.isDryRun && setModalOpen(false);
+
+        if (props.isDryRun) {
+          toast({
+            description: t("app_removed_successfully"),
+          });
+        }
+
+        if (!props.isDryRun && slug) {
+          await deleteCalendarCredentials({
             calendar: slug.split("-")[0] as unknown as (typeof CALENDARS)[number],
             id: credentialId,
-          }));
+          });
+        }
       }}
       {...props}
       isModalOpen={modalOpen}
@@ -215,7 +241,7 @@ const PlatformDisconnectIntegration = (props: {
   );
 };
 
-const PlatformCalendarSwitch = (props: ICalendarSwitchProps) => {
+const PlatformCalendarSwitch = (props: ICalendarSwitchProps & { isDryRun?: boolean }) => {
   const { isChecked, title, credentialId, type, externalId, delegationCredentialId } = props;
   const [checkedInternal, setCheckedInternal] = useState(isChecked);
   const { toast } = useToast();
@@ -271,12 +297,15 @@ const PlatformCalendarSwitch = (props: ICalendarSwitchProps) => {
         id={externalId}
         onCheckedChange={async () => {
           setCheckedInternal((prevValue) => !prevValue);
-          await toggleSelectedCalendars({
-            isOn: !checkedInternal,
-            credentialId,
-            externalId,
-            integration: type,
-          });
+
+          if (!props.isDryRun) {
+            await toggleSelectedCalendars({
+              isOn: !checkedInternal,
+              credentialId,
+              externalId,
+              integration: type,
+            });
+          }
         }}
       />
     </CalendarSwitchComponent>
@@ -285,8 +314,10 @@ const PlatformCalendarSwitch = (props: ICalendarSwitchProps) => {
 
 const PlatformAdditionalCalendarSelector = ({
   calendarRedirectUrls,
+  isDryRun,
 }: {
   calendarRedirectUrls?: CalendarRedirectUrls;
+  isDryRun?: boolean;
 }) => {
   const { t } = useLocale();
   const { refetch } = useConnectedCalendars({});
@@ -302,6 +333,7 @@ const PlatformAdditionalCalendarSelector = ({
         <div>
           <div>
             <Connect.GoogleCalendar
+              // isDryRun={isDryRun}
               isMultiCalendar={true}
               isClickable={true}
               tooltip={<></>}
@@ -314,6 +346,7 @@ const PlatformAdditionalCalendarSelector = ({
           </div>
           <div>
             <Connect.OutlookCalendar
+              // isDryRun={isDryRun}
               isMultiCalendar={true}
               isClickable={true}
               tooltip={<></>}
@@ -326,6 +359,7 @@ const PlatformAdditionalCalendarSelector = ({
           </div>
           <div>
             <AppleConnect
+              // isDryRun={isDryRun}
               onSuccess={refetch}
               isClickable={true}
               isMultiCalendar={true}