test: Bring back broken out-of-office tests, prevent modal button clickable before flicker, and fix timezone issue

[ImBIOS]

What does this PR do?

• Fixes [CAL-3337] Bring back broken out-of-office tests as per @ #14286 #14287
• Fixes CAL-3337

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• N/A
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

• Are there environment variables that should be set? none
• What are the minimal test data to have? none
• What is expected (happy path) to have (input and output)? i don't have idea what is it
• Any other important info that could help to test that PR:

yarn e2e out-of-office.e2e.ts

Message

Hey everyone! 👋

I'm working on addressing the issue [CAL-3337] to bring back the broken out-of-office tests. Here's the lowdown on what's happening and how we can fix it! 🚀

Cause:

• There's a full page flicker during the hydration period, which causes the Modal state to reset. 😵‍💫
• Our e2e test, Playwright, is opening the modal at superhuman speed, but while waiting for the dropdown data to load, the modal gets reset by the flicker. This results in an error when the element isn't found. 😓

Known:

• Why does the flicker happen? Still a mystery! 🔍 I suspect this: https://github.com/calcom/cal.com/blob/5b7f2a6ffcfcda3aa9411fe482fd58519a76ed07/packages/ui/components/meta/Meta.tsx#L52

Potential Solutions:

1. Change the test:
   • Wait for certain text (like the title) to load, indicating the hydration is done and the flicker has passed. ⏳
2. Change the code:
   • Fix the flicker cause: If we can identify and resolve the root cause of the flicker, the problem will be solved! 🛠️
   • Change add button with loading skeleton until flicker passes: This ensures the UX isn't affected by the modal closing unexpectedly and prevents Playwright from picking the modal before flickering. ✨

Let's tackle this issue and make the tests robust again! 💪💻

If you have any ideas or insights on why the flicker happens, feel free to share! Collaboration is key! 🤝🔧

Note: I'm not using this, because it will require the component to become async, which makes me want to write a new component inside this file for this button, but I'm not doing it, I don't know why:

  const data = await utils.viewer.outOfOfficeEntriesList.ensureData();

[vercel]

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

A member of the Team first needs to authorize it.

[graphite-app]

Graphite Automations

"Add community label" took an action on this PR • (07/31/24)

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

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

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

[anikdhabal]

Hey @ImBIOS ooo e2e test is still failing, can you figure it out and make the final thing

[ImBIOS]

Hey @ImBIOS ooo e2e test is still failing, can you figure it out and make the final thing

I'm on it 🏃

[ImBIOS]

found the culprit, it's another problem but I'm looking into it:

    throw new TRPCError({ code: "BAD_REQUEST", message: "start_date_must_be_in_the_future" });

the UI shows it's already in the future, but the data behind it seems not match.

[ImBIOS]

@anikdhabal any update on review?

[anikdhabal]

LGTM!!