fix: Flakyness on pages that use a hard refresh (#16752)

* fix: Flakyness on pages that use a hard refres

Signed-off-by: zomars <zomars@me.com>

* Update Shell.tsx

---------

Signed-off-by: zomars <zomars@me.com>

apps/web/components/booking/CancelBooking.tsx

@@ -2,12 +2,11 @@ import { useCallback, useState } from "react";
 
 import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Button, Icon, TextArea } from "@calcom/ui";
 
-import { useRefreshData } from "@lib/hooks/useRefreshData";
-
 type Props = {
   booking: {
     title?: string;

apps/web/playwright/fixtures/users.ts

@@ -1,4 +1,4 @@
-import type { Page, WorkerInfo } from "@playwright/test";
+import type { Browser, Page, WorkerInfo } from "@playwright/test";
 import { expect } from "@playwright/test";
 import type Prisma from "@prisma/client";
 import type { Team } from "@prisma/client";
@@ -732,6 +732,14 @@ const createUserFixture = (user: UserWithIncludes, page: Page) => {
     self,
     apiLogin: async (password?: string) =>
       apiLogin({ ...(await self()), password: password || user.username }, store.page),
+    /** Don't forget to close context at the end */
+    apiLoginOnNewBrowser: async (browser: Browser, password?: string) => {
+      const newContext = await browser.newContext();
+      const newPage = await newContext.newPage();
+      await apiLogin({ ...(await self()), password: password || user.username }, newPage);
+      // Don't forget to: newContext.close();
+      return [newContext, newPage] as const;
+    },
     /**
      * @deprecated use apiLogin instead
      */

apps/web/playwright/managed-event-types.e2e.ts

@@ -185,10 +185,7 @@ test.describe("Managed Event Types", () => {
     await saveAndWaitForResponse(memberPage);
 
     // We edit the managed event as original owner
-    const adminContext = await browser.newContext();
-    const adminPage = await adminContext.newPage();
-    const adminUserSnapshot = await adminUser.self();
-    await apiLogin({ ...adminUserSnapshot, password: adminUserSnapshot.username }, adminPage);
+    const [adminContext, adminPage] = await adminUser.apiLoginOnNewBrowser(browser);
     await adminPage.goto("/event-types");
     await adminPage.getByTestId("event-types").locator(`a[title="${teamEventTitle}"]`).click();
     await adminPage.waitForURL("event-types/**");

apps/web/playwright/organization/booking.e2e.ts

@@ -542,9 +542,9 @@ test.describe("Bookings", () => {
       const usernameOutsideOrg = userOutsideOrganization.username;
       // Before invite is accepted the booking page isn't available
       await expectPageToBeNotFound({ page, url: `/${usernameInOrg}` });
-      await userOutsideOrganization.apiLogin();
-      await acceptTeamOrOrgInvite(page);
-      await userOutsideOrganization.logout();
+      const [newContext, newPage] = await userOutsideOrganization.apiLoginOnNewBrowser(browser);
+      await acceptTeamOrOrgInvite(newPage);
+      await newContext.close();
       await test.step("Book through new link", async () => {
         await doOnOrgDomain(
           {

apps/web/playwright/reschedule.e2e.ts

@@ -287,10 +287,7 @@ test.describe("Reschedule Tests", async () => {
     const eventType = user.eventTypes.find((e) => e.slug === "opt-in")!;
 
     const confirmBooking = async (bookingId: number) => {
-      const authedContext = await browser.newContext();
-      const authedPage = await authedContext.newPage();
-      const userSnapshot = await user.self();
-      await apiLogin({ ...userSnapshot, password: userSnapshot.username }, authedPage);
+      const [authedContext, authedPage] = await user.apiLoginOnNewBrowser(browser);
       await authedPage.goto("/bookings/upcoming");
       await submitAndWaitForResponse(authedPage, "/api/trpc/bookings/confirm?batch=1", {
         action: () => authedPage.locator(`[data-bookingid="${bookingId}"][data-testid="confirm"]`).click(),

packages/features/ee/teams/components/TeamListItem.tsx

@@ -9,6 +9,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { getTeamUrlSync } from "@calcom/lib/getBookerUrl/client";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import { MembershipRole } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -51,6 +52,7 @@ export default function TeamListItem(props: Props) {
   const showDialog = searchParams?.get("inviteModal") === "true";
   const [openMemberInvitationModal, setOpenMemberInvitationModal] = useState(showDialog);
   const [openInviteLinkSettingsModal, setOpenInviteLinkSettingsModal] = useState(false);
+  const refreshData = useRefreshData();
 
   const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({
     onSuccess: (_data, variables) => {
@@ -64,7 +66,7 @@ export default function TeamListItem(props: Props) {
       const isDifferentOrg = team.isOrganization && team.id !== userOrganizationId;
       // If the user team being accepted is a sub-team of different organization or the different organization itself then page must be reloaded to let the session change reflect reliably everywhere.
       if (variables.accept && (isSubTeamOfDifferentOrg || isDifferentOrg)) {
-        window.location.reload();
+        refreshData();
       }
     },
   });

packages/features/shell/Shell.tsx

@@ -56,6 +56,7 @@ import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { ButtonState, useNotifications } from "@calcom/lib/hooks/useNotifications";
+import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { localStorage } from "@calcom/lib/webstorage";
@@ -1286,6 +1287,7 @@ function ProfileDropdown() {
   const { update, data: sessionData } = useSession();
   const { data } = trpc.viewer.me.useQuery();
   const [menuOpen, setMenuOpen] = useState(false);
+  const refreshData = useRefreshData();
 
   if (!data || !ENABLE_PROFILE_SWITCHER || !sessionData) {
     return null;
@@ -1349,7 +1351,7 @@ function ProfileDropdown() {
                   update({
                     upId: option.value,
                   }).then(() => {
-                    window.location.reload();
+                    refreshData();
                   });
                 }}
                 className={classNames("flex w-full", isSelected ? "bg-subtle text-emphasis" : "")}>