feat: Overlay Calendar v2 and Troubleshooter v2

[kart1ka]

What does this PR do?

• This PR currently only fetches event titles for Google and Office365 Calendar.
• This PR allows users to use Overlay Calendar feature by signing in using their Google Account.
• It also pulls actual event title from the calendar instead of just showing "Busy" for both overlay calendar and troubleshooter.
• This feature upgrade does not need any Google scope changes.
• As per the comment here https://github.com/calcom/cal.com/pull/14575#pullrequestreview-2000344073, I am sticking with the existing Google OAuth Provider. But since we're using it for both regular and overlay user sign-ups, telling them apart during registration is tricky. So, I couldn't automate Google Calendar setup for overlay users after sign-up. Instead, I'm redirecting them to "/getting-started/connect-calendar" to connect it manually. Let me know if you have any other ideas.

Fixes #12763 Fixes #12752

Type of change

• New feature (non-breaking change which adds functionality)

How should this be tested?

Testing Overlay Calendar v2

• Just go to a booking page and toggle the Overlay Calendar switch.
• Choose Continue with Google and sign in with a google id.
• You will be taken to "/getting-started/connect-calendar" page.
• Connect your google calendar.
• You will then be redirected to the booking page.
• You will see that now event titles are being displayed instead of just "Busy" for the calendar busy events.

Testing Troubleshooter v2

• Just go to the Troubleshooter and make sure that google calendar is connected and the app is checking google calendar for conflicts.
• You will see that now event titles are being displayed instead of just "Busy" for the calendar busy events.

Mandatory Tasks

• [x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

[vercel[bot]]

@kart1ka is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions[bot]]

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link.

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Seventy-eight Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/apps	279.89 KB	507.57 KB	145.02% (🟢 -1.23%)
/apps/[slug]	297.48 KB	525.15 KB	150.04% (🟢 -1.22%)
/apps/[slug]/[...pages]	588.57 KB	816.24 KB	233.21% (🟢 -1.16%)
/apps/categories	256.24 KB	483.92 KB	138.26% (🟢 -1.23%)
/apps/categories/[category]	262 KB	489.67 KB	139.91% (🟢 -1.23%)
/apps/installed/[category]	278.34 KB	506.02 KB	144.58% (🟢 -1.79%)
/auth/saml-idp	12.22 KB	239.9 KB	68.54% (🟢 -20.80%)
/availability	426.14 KB	653.82 KB	186.81% (🟢 -1.80%)
/availability/[schedule]	410.56 KB	638.24 KB	182.35% (🟢 -1.64%)
/bookings/[status]	325.93 KB	553.6 KB	158.17% (🟢 -1.22%)
/enterprise	256.3 KB	483.98 KB	138.28% (🟢 -1.23%)
/event-types	561.28 KB	788.95 KB	225.42% (🟢 -1.17%)
/event-types/[type]	437.48 KB	665.15 KB	190.04% (🟢 -1.15%)
/insights	474.66 KB	702.33 KB	200.67% (🟢 -1.69%)
/more	255.81 KB	483.48 KB	138.14% (🟢 -1.23%)
/settings/admin	262.24 KB	489.92 KB	139.98% (🟢 -1.22%)
/settings/admin/apps	275.48 KB	503.16 KB	143.76% (🟢 -1.24%)
/settings/admin/apps/[category]	275.47 KB	503.14 KB	143.76% (🟢 -1.25%)
/settings/admin/flags	265.96 KB	493.64 KB	141.04% (🟢 -1.25%)
/settings/admin/impersonation	262.63 KB	490.31 KB	140.09% (🟢 -1.22%)
/settings/admin/lockedSMS	283.69 KB	511.37 KB	146.11% (🟢 -1.20%)
/settings/admin/oAuth	274.24 KB	501.92 KB	143.40% (🟢 -1.24%)
/settings/admin/orgMigrations/_OrgMigrationLayout	251.17 KB	478.85 KB	136.81% (🟢 -1.21%)
/settings/admin/orgMigrations/moveTeamToOrg	300.91 KB	528.58 KB	151.02% (🟢 -1.20%)
/settings/admin/orgMigrations/moveUserToOrg	320.7 KB	548.38 KB	156.68% (🟢 -1.18%)
/settings/admin/orgMigrations/removeTeamFromOrg	300.67 KB	528.35 KB	150.96% (🟢 -1.20%)
/settings/admin/orgMigrations/removeUserFromOrg	300.68 KB	528.36 KB	150.96% (🟢 -1.20%)
/settings/admin/organizations	264.13 KB	491.8 KB	140.52% (🟢 -1.22%)
/settings/admin/organizations/[id]/edit	262.79 KB	490.47 KB	140.13% (🟢 -1.21%)
/settings/admin/users	264.9 KB	492.58 KB	140.74% (🟢 -1.22%)
/settings/admin/users/[id]/edit	393.96 KB	621.63 KB	177.61% (🟢 -1.22%)
/settings/admin/users/add	393.63 KB	621.3 KB	177.51% (🟢 -1.21%)
/settings/billing	262.45 KB	490.12 KB	140.04% (🟢 -1.22%)
/settings/developer/api-keys	266.73 KB	494.41 KB	141.26% (🟢 -1.25%)
/settings/developer/webhooks	266.9 KB	494.58 KB	141.31% (🟢 -1.25%)
/settings/developer/webhooks/[id]	267.89 KB	495.57 KB	141.59% (🟢 -1.23%)
/settings/developer/webhooks/new	267.92 KB	495.59 KB	141.60% (🟢 -1.23%)
/settings/my-account/appearance	314.33 KB	542.01 KB	154.86% (🟢 -1.53%)
/settings/my-account/calendars	274.36 KB	502.04 KB	143.44% (🟢 -1.11%)
/settings/my-account/conferencing	272.34 KB	500.02 KB	142.86% (🟢 -1.94%)
/settings/my-account/general	377.85 KB	605.52 KB	173.01% (🟢 -1.24%)
/settings/my-account/out-of-office	267.37 KB	495.05 KB	141.44% (🟢 -1.24%)
/settings/my-account/profile	410.3 KB	637.97 KB	182.28% (🟢 -1.24%)
/settings/organizations/[id]/about	159.67 KB	387.35 KB	110.67% (🟡 +0.48%)
/settings/organizations/[id]/add-teams	159.67 KB	387.34 KB	110.67% (🟡 +0.47%)
/settings/organizations/admin-api	262.4 KB	490.08 KB	140.02% (🟢 -1.21%)
/settings/organizations/appearance	122.33 KB	350.01 KB	100.00% (🟢 -48.02%)
/settings/organizations/billing	262.48 KB	490.16 KB	140.05% (🟢 -1.22%)
/settings/organizations/dsync	295.11 KB	522.78 KB	149.37% (🟢 -1.22%)
/settings/organizations/general	350.69 KB	578.37 KB	165.25% (🟢 -1.24%)
/settings/organizations/members	400.51 KB	628.19 KB	179.48% (🟢 -1.62%)
/settings/organizations/new	159.68 KB	387.35 KB	110.67% (🟡 +0.48%)
/settings/organizations/privacy	267.89 KB	495.57 KB	141.59% (🟢 -1.24%)
/settings/organizations/profile	415.16 KB	642.84 KB	183.67% (🟡 +2.29%)
/settings/organizations/sso	273.07 KB	500.75 KB	143.07% (🟢 -1.21%)
/settings/organizations/teams/other	263.31 KB	490.99 KB	140.28% (🟢 -1.21%)
/settings/organizations/teams/other/[id]/appearance	275.12 KB	502.79 KB	143.65% (🟢 -1.19%)
/settings/organizations/teams/other/[id]/members	269.8 KB	497.48 KB	142.14% (🟢 -1.25%)
/settings/organizations/teams/other/[id]/profile	473.52 KB	701.2 KB	200.34% (🟢 -1.24%)
/settings/platform	260.91 KB	488.58 KB	139.59% (🟢 -1.22%)
/settings/platform/new	120.69 KB	348.36 KB	99.53% (🟡 +0.51%)
/settings/platform/oauth-clients/[clientId]/edit	259.21 KB	486.89 KB	139.11% (🟢 -1.23%)
/settings/platform/oauth-clients/create	258.35 KB	486.03 KB	138.87% (🟢 -1.23%)
/settings/security/impersonation	267.55 KB	495.22 KB	141.49% (🟢 -1.24%)
/settings/security/password	305.7 KB	533.38 KB	152.39% (🟢 -1.22%)
/settings/security/sso	272.52 KB	500.2 KB	142.91% (🟢 -1.21%)
/settings/security/two-factor-auth	271.03 KB	498.71 KB	142.49% (🟢 -1.24%)
/settings/teams	261.98 KB	489.66 KB	139.90% (🟢 -1.21%)
/settings/teams/[id]/appearance	275.1 KB	502.78 KB	143.65% (🟢 -1.19%)
/settings/teams/[id]/billing	262.49 KB	490.16 KB	140.05% (🟢 -1.22%)
/settings/teams/[id]/members	379.92 KB	607.6 KB	173.60% (🟢 -1.24%)
/settings/teams/[id]/profile	474.3 KB	701.98 KB	200.57% (🟢 -1.24%)
/settings/teams/new	193.08 KB	420.76 KB	120.22% (🟢 -1.81%)
/teams	256.03 KB	483.71 KB	138.20% (🟢 -1.23%)
/upgrade	256.15 KB	483.83 KB	138.24% (🟢 -1.23%)
/video/[uid]	291.18 KB	518.85 KB	148.24% (🟢 -0.18%)
/workflows	287.93 KB	515.6 KB	147.32% (🟢 -1.21%)
/workflows/[workflow]	413.85 KB	641.52 KB	183.29% (🟢 -1.66%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[kart1ka]

@kart1ka Everything looks good we just have a unit test failing by the looks of things.

Despite the Unit test:

From a UX standpoint this works pretty damn well thanks for this! Tested

• Troubleshooter
• When authed with a gcal - view another user and test overlay calendar
• Signup a new user (had to toggle off overflow and on again) but i honestly think thats in main also.

Code looks pretty good to me - I'd like a second eye by someone with a bit more appstore experience than myself for these changes

@joeauyeung @zomars would you give this a second pair of eyes before we approve?

@sean-brydon Thanks for the review.

I have fixed the unit test.

Regarding the overflow toggle during signup, you're right—it's present in the main branch too. I've tried to figure out the cause but haven't found a solution yet.

[kart1ka]

I am working on adding the Microsoft Provider for overlay user sign up.

[graphite-app[bot]]

Graphite Automations

"Add community label" took an action on this PR • (05/01/24)

1 label was added to this PR based on Keith Williams's automation.

"Add foundation team as reviewer" took an action on this PR • (05/01/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add consumer team as reviewer" took an action on this PR • (05/01/24)

1 reviewer was added to this PR based on Keith Williams's automation.

[kart1ka]

Hi @sean-brydon. I have added Microsoft OAuth Provider for Overlay User sign up. Please review the changes. I have created client id and secret as per the steps mentioned here. In addition to that, set the Web redirect URI in the application registration to <Cal.com URL>/api/auth/callback/azure-ad

[kart1ka]

I noticed that in the both CalendarService files there's logic in the getAvailability method between if we need to get just the free/busy times vs calendar events with the title.

I would like to see this being split into two separate methods. getAvailability can stay the way it is, but I would love to see a separate method like getEvents or something similar when getting detailed calendar events.

A good example of why we would want two methods is Google Calendar. getAvailability calls on the free/busy endpoint but if we want to list events we call the events endpoints.

Hi @joeauyeung

I've already added the getEventLists method into the Google Calendar Service to retrieve event lists along with their titles. So, I'm a bit unsure about how to further separate it.

Or do you want me to just call getEventLists directly here instead of calling getAvailability (and then calling getEventLists inside it) whenever we need to fetch event list titles.

As for the Office 365 Calendar, the only difference is that instead of passing "$select=showAs,start,end" in the select parameters, I'm passing "$select=showAs,start,end,subject" when isOverlayUser is true. Would you like me to create a separate method for this scenario as well?

[joeauyeung]

I noticed that in the both CalendarService files there's logic in the getAvailability method between if we need to get just the free/busy times vs calendar events with the title. I would like to see this being split into two separate methods. getAvailability can stay the way it is, but I would love to see a separate method like getEvents or something similar when getting detailed calendar events. A good example of why we would want two methods is Google Calendar. getAvailability calls on the free/busy endpoint but if we want to list events we call the events endpoints.

Hi @joeauyeung

I've already added the getEventLists method into the Google Calendar Service to retrieve event lists along with their titles. So, I'm a bit unsure about how to further separate it.

Or do you want me to just call getEventLists directly here instead of calling getAvailability (and then calling getEventLists inside it) whenever we need to fetch event list titles.

As for the Office 365 Calendar, the only difference is that instead of passing "$select=showAs,start,end" in the select parameters, I'm passing "$select=showAs,start,end,subject" when isOverlayUser is true. Would you like me to create a separate method for this scenario as well?

If we're expanding this to other calendars, I'd like to see a new public method that's a part of the CalendarService type that's separate from the getAvailability method. There might be instances where the logic is going to be very similar like O365 which I think is ok as long as that logic is abstracted properly and passed to getAvailability and the new method to grab calendar events.

[kart1ka]

I have added getEventList method as a public method on the CalendarService type, Google and office365 calendar service. I have also abstracted the common logic from getAvailability and getEventList method. I am directly calling getEventList instead of getAvailability whenever we need to get event data along with the event title. Do let me know if any other changes need to be made.

[keithwillcode]

@zomars @emrysal Added high-risk label to this because it touches auth. Please review before merging.

[keithwillcode]

/tip 50 @kart1ka

[algora-pbc[bot]]

🎉🎈 @kart1ka has been awarded $50! 🎈🎊

• Share on socials
• Give feedback

[PeerRich]

/tip 100

[algora-pbc[bot]]

🎉🎈 @kart1ka has been awarded $100! 🎈🎊

• Share on socials
• Give feedback

[kart1ka]

Hey @zomars. I've removed the Azure ID Provider. Could you please review the changes and let me know if any further changes are needed?

[TyceHerrman]

@zomars, I'm just a long-time lurker of this feature (and all the other manifestations of open issues related to it), but this is the one feature that is keeping me from switching from savvycal to cal.com (and has been my personal blocker for almost a year). Really hoping that @kart1ka's amazing work can be incorporated and released in 4.2. Totally understand prioritization needs, but every month that the milestone gets bumped another month breaks my heart just a little more.

[kart1ka]

Hi @sean-brydon Just wanted to check in on the status of this PR. I've already removed the Azure Provider from this PR as suggested. If there's anything else I need to do before merging, please let me know.

[TyceHerrman]

@zomars, @sean-brydon, I hate to keep bugging y'all, but really hoping that this can get reviewed and merged before https://github.com/calcom/cal.com/issues/15521 kicks off. I'm eager to move off savvycal, but still waiting on this. ✌️

[zomars]

Re-revieweing now...

[github-actions[bot]]

E2E results are ready!

• Workflow #30050.1 latest results

[kart1ka]

@zomars Just checking on the status of this PR. Do let me know if any changes need to be made before merging. Thanks.