fix: add missing DataTableProvider (#20473)

* fix: add missing DataTableProvider

* add e2e test

apps/web/playwright/team-availability.e2e.ts

@@ -0,0 +1,41 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.describe("Team Availability", () => {
+  test.beforeEach(async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+  });
+
+  test.afterEach(async ({ users }) => {
+    await users.deleteAll();
+  });
+
+  test("page loads", async ({ page, users }) => {
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      { username: "pro-user", name: "pro-user" },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+      }
+    );
+
+    await owner.apiLogin();
+
+    await page.goto("/availability?type=team");
+
+    await page.waitForSelector('div[data-testid="data-table"] table');
+    const rows = await page.locator('div[data-testid="data-table"] table tbody tr').count();
+    expect(rows).toBe(teamMatesObj.length + 1);
+  });
+});

packages/features/ee/dsync/components/GroupTeamMappingTable.tsx

@@ -2,7 +2,8 @@ import type { ColumnDef } from "@tanstack/react-table";
 import { useReactTable, getCoreRowModel } from "@tanstack/react-table";
 import { useRef, useState } from "react";
 
-import { DataTable, DataTableToolbar } from "@calcom/features/data-table";
+import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTable, DataTableToolbar } from "@calcom/features/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 
@@ -17,6 +18,14 @@ interface TeamGroupMapping {
 }
 
 const GroupTeamMappingTable = () => {
+  return (
+    <DataTableProvider>
+      <GroupTeamMappingTableContent />
+    </DataTableProvider>
+  );
+};
+
+const GroupTeamMappingTableContent = () => {
   const { t } = useLocale();
   const [createTeamDialogOpen, setCreateTeamDialogOpen] = useState(false);
 

packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx

@@ -6,7 +6,8 @@ import { getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/r
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { DataTable, DataTableToolbar } from "@calcom/features/data-table";
+import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTable, DataTableToolbar } from "@calcom/features/data-table/components";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import type { DateRange } from "@calcom/lib/date-ranges";
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
@@ -67,6 +68,14 @@ function UpgradeTeamTip() {
 }
 
 export function AvailabilitySliderTable(props: { userTimeFormat: number | null; isOrg: boolean }) {
+  return (
+    <DataTableProvider>
+      <AvailabilitySliderTableContent {...props} />
+    </DataTableProvider>
+  );
+}
+
+function AvailabilitySliderTableContent(props: { userTimeFormat: number | null; isOrg: boolean }) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [browsingDate, setBrowsingDate] = useState(dayjs());
   const [editSheetOpen, setEditSheetOpen] = useState(false);