Merge branch 'main' into capital_letters

calcom · Jan 15, 2025 · 4fb7b5c · 4fb7b5c
2 parents e238142 + 7897e14
commit 4fb7b5c
Show file tree

Hide file tree

Showing 22 changed files with 488 additions and 6,203 deletions.
diff --git a/.yarn/versions/d05ae1e0.yml b/.yarn/versions/d05ae1e0.yml
@@ -0,0 +1,3 @@
+undecided:
+  - calcom-monorepo
+  - "@calcom/prisma"
diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
@@ -12,12 +12,12 @@ import { ErrorPage } from "@components/error/error-page";
 
 const log = logger.getSubLogger({ prefix: ["[error]"] });
 
-type ErrorProps = {
+export type ErrorProps = {
   error: Error;
-  reset: () => void;
+  reset?: () => void;
 };
 
-export default function Error({ error, reset }: ErrorProps) {
+export default function Error({ error }: ErrorProps) {
   React.useEffect(() => {
     log.error(error);
 

diff --git a/apps/web/app/global-error.tsx b/apps/web/app/global-error.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { type NextPage } from "next";
+
+import CustomError from "./error";
+import type { ErrorProps } from "./error";
+
+export const GlobalError: NextPage<ErrorProps> = (props) => {
+  return (
+    <html>
+      <body>
+        <CustomError {...props} />
+      </body>
+    </html>
+  );
+};
+
+export default GlobalError;
diff --git a/apps/web/app/org/[orgSlug]/[user]/[type]/page.tsx b/apps/web/app/org/[orgSlug]/[user]/[type]/page.tsx
@@ -54,7 +54,7 @@ export const generateMetadata = async ({ params, searchParams }: PageProps) => {
   };
 };
 
-export const Page = async (props: OrgTypePageProps) => {
+const Page = async (props: OrgTypePageProps) => {
   if ((props as TeamTypePageProps)?.teamId) {
     return <TeamTypePage {...(props as TeamTypePageProps)} />;
   }

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
@@ -511,9 +511,9 @@ function BookingListItem(booking: BookingItemProps) {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-      <tr data-testid="booking-item" className="hover:bg-muted group transition ">
+      <div data-testid="booking-item" className="hover:bg-muted group w-full">
         <div className="flex flex-col sm:flex-row">
-          <td className="hidden align-top ltr:pl-3 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
+          <div className="hidden align-top ltr:pl-3 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
             <div className="flex h-full items-center">
               {eventTypeColor && (
                 <div className="h-[70%] w-0.5" style={{ backgroundColor: eventTypeColor }} />
@@ -562,8 +562,10 @@ function BookingListItem(booking: BookingItemProps) {
                 </div>
               </Link>
             </div>
-          </td>
-          <td data-testid="title-and-attendees" className={`w-full px-4${isRejected ? " line-through" : ""}`}>
+          </div>
+          <div
+            data-testid="title-and-attendees"
+            className={`w-full px-4${isRejected ? " line-through" : ""}`}>
             <Link href={bookingLink}>
               {/* Time and Badges for mobile */}
               <div className="w-full pb-2 pt-4 sm:hidden">
@@ -648,8 +650,8 @@ function BookingListItem(booking: BookingItemProps) {
                 )}
               </div>
             </Link>
-          </td>
-          <td className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 space-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:space-y-0 sm:pl-0">
+          </div>
+          <div className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 space-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:space-y-0 sm:pl-0">
             {isUpcoming && !isCancelled ? (
               <>
                 {isPending && <TableActions actions={pendingActions} />}
@@ -674,7 +676,7 @@ function BookingListItem(booking: BookingItemProps) {
                   <TableActions actions={chargeCardActions} />
                 </div>
               )}
-          </td>
+          </div>
         </div>
         <BookingItemBadges
           booking={booking}
@@ -683,7 +685,7 @@ function BookingListItem(booking: BookingItemProps) {
           userTimeFormat={userTimeFormat}
           userTimeZone={userTimeZone}
         />
-      </tr>
+      </div>
 
       {isBookingReroutable(parsedBooking) && (
         <RerouteDialog
@@ -712,7 +714,7 @@ const BookingItemBadges = ({
   const { t } = useLocale();
 
   return (
-    <div className="hidden h-9 flex-row pb-4 pl-6 sm:flex">
+    <div className="hidden h-9 flex-row items-center pb-4 pl-6 sm:flex">
       {isPending && (
         <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
           {t("unconfirmed")}
@@ -1251,11 +1253,9 @@ const AssignmentReasonTooltip = ({ assignmentReason }: { assignmentReason: Assig
   const badgeTitle = assignmentReasonBadgeTitleMap(assignmentReason.reasonEnum);
   return (
     <Tooltip content={<p>{assignmentReason.reasonString}</p>}>
-      <div className="-mt-1">
-        <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
-          {t(badgeTitle)}
-        </Badge>
-      </div>
+      <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
+        {t(badgeTitle)}
+      </Badge>
     </Tooltip>
   );
 };

diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx
@@ -1,8 +1,14 @@
 "use client";
 
-import { useAutoAnimate } from "@formkit/auto-animate/react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  createColumnHelper,
+} from "@tanstack/react-table";
 import type { ReactElement } from "react";
-import { Fragment, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import type { z } from "zod";
 
 import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
@@ -11,13 +17,13 @@ import { FilterToggle } from "@calcom/features/bookings/components/FilterToggle"
 import { FiltersContainer } from "@calcom/features/bookings/components/FiltersContainer";
 import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
+import { DataTableProvider, DataTableWrapper } from "@calcom/features/data-table";
 import Shell from "@calcom/features/shell/Shell";
-import { useInViewObserver } from "@calcom/lib/hooks/useInViewObserver";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
-import { Alert, Button, EmptyScreen, HorizontalTabs } from "@calcom/ui";
+import { Alert, EmptyScreen, HorizontalTabs } from "@calcom/ui";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -67,7 +73,24 @@ const descriptionByStatus: Record<NonNullable<BookingListingStatus>, string> = {
   unconfirmed: "unconfirmed_bookings",
 };
 
-export default function Bookings({ status }: { status: (typeof validStatuses)[number] }) {
+type BookingsProps = {
+  status: (typeof validStatuses)[number];
+};
+
+export default function Bookings(props: BookingsProps) {
+  return (
+    <DataTableProvider>
+      <BookingsContent {...props} />
+    </DataTableProvider>
+  );
+}
+
+type RowData = {
+  booking: BookingOutput;
+  recurringInfo?: RecurringInfo;
+};
+
+function BookingsContent({ status }: BookingsProps) {
   const { data: filterQuery } = useFilterQuery();
 
   const { t } = useLocale();
@@ -88,13 +111,32 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
     }
   );
 
-  // Animate page (tab) transitions to look smoothing
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<RowData>();
 
-  const buttonInView = useInViewObserver(() => {
-    if (!query.isFetching && query.hasNextPage && query.status === "success") {
-      query.fetchNextPage();
-    }
-  });
+    return [
+      columnHelper.display({
+        id: "custom-view",
+        cell: (props) => {
+          const { booking, recurringInfo } = props.row.original;
+          return (
+            <BookingListItem
+              key={booking.id}
+              loggedInUser={{
+                userId: user?.id,
+                userTimeZone: user?.timeZone,
+                userTimeFormat: user?.timeFormat,
+                userEmail: user?.email,
+              }}
+              listingStatus={status}
+              recurringInfo={recurringInfo}
+              {...booking}
+            />
+          );
+        },
+      }),
+    ];
+  }, [user, status]);
 
   const isEmpty = !query.data?.pages[0]?.bookings.length;
 
@@ -121,6 +163,27 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
     return true;
   };
 
+  const flatData = useMemo(() => {
+    return (
+      query.data?.pages.flatMap((page) =>
+        page.bookings.filter(filterBookings).map((booking) => ({
+          booking,
+          recurringInfo: page.recurringInfo.find(
+            (info) => info.recurringEventId === booking.recurringEventId
+          ),
+        }))
+      ) || []
+    );
+  }, [query.data]);
+
+  const table = useReactTable<RowData>({
+    data: flatData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
   let recurringInfoToday: RecurringInfo | undefined;
 
   const bookingsToday =
@@ -137,8 +200,6 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
       })
     )[0] || [];
 
-  const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
-
   return (
     <div className="flex flex-col">
       <div className="flex flex-row flex-wrap justify-between">
@@ -147,7 +208,7 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
       </div>
       <FiltersContainer isFiltersVisible={isFiltersVisible} />
       <main className="w-full">
-        <div className="flex w-full flex-col" ref={animationParentRef}>
+        <div className="flex w-full flex-col">
           {query.status === "error" && (
             <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
           )}
@@ -159,69 +220,41 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
                   <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
                   <p className="text-subtle mb-2 text-xs font-medium uppercase leading-4">{t("today")}</p>
                   <div className="border-subtle overflow-hidden rounded-md border">
-                    <table className="w-full max-w-full table-fixed">
-                      <tbody className="bg-default divide-subtle divide-y" data-testid="today-bookings">
-                        <Fragment>
-                          {bookingsToday.map((booking: BookingOutput) => (
-                            <BookingListItem
-                              key={booking.id}
-                              loggedInUser={{
-                                userId: user?.id,
-                                userTimeZone: user?.timeZone,
-                                userTimeFormat: user?.timeFormat,
-                                userEmail: user?.email,
-                              }}
-                              listingStatus={status}
-                              recurringInfo={recurringInfoToday}
-                              {...booking}
-                            />
-                          ))}
-                        </Fragment>
-                      </tbody>
-                    </table>
+                    <div
+                      className="bg-default divide-subtle w-full max-w-full divide-y"
+                      data-testid="today-bookings">
+                      <Fragment>
+                        {bookingsToday.map((booking: BookingOutput) => (
+                          <BookingListItem
+                            key={booking.id}
+                            loggedInUser={{
+                              userId: user?.id,
+                              userTimeZone: user?.timeZone,
+                              userTimeFormat: user?.timeFormat,
+                              userEmail: user?.email,
+                            }}
+                            listingStatus={status}
+                            recurringInfo={recurringInfoToday}
+                            {...booking}
+                          />
+                        ))}
+                      </Fragment>
+                    </div>
                   </div>
                 </div>
               )}
-              <div className="pt-2 xl:pt-0">
-                <div className="border-subtle overflow-hidden rounded-md border">
-                  <table data-testid={`${status}-bookings`} className="w-full max-w-full table-fixed">
-                    <tbody className="bg-default divide-subtle divide-y" data-testid="bookings">
-                      {query.data.pages.map((page, index) => (
-                        <Fragment key={index}>
-                          {page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
-                            const recurringInfo = page.recurringInfo.find(
-                              (info) => info.recurringEventId === booking.recurringEventId
-                            );
-                            return (
-                              <BookingListItem
-                                key={booking.id}
-                                loggedInUser={{
-                                  userId: user?.id,
-                                  userTimeZone: user?.timeZone,
-                                  userTimeFormat: user?.timeFormat,
-                                  userEmail: user?.email,
-                                }}
-                                listingStatus={status}
-                                recurringInfo={recurringInfo}
-                                {...booking}
-                              />
-                            );
-                          })}
-                        </Fragment>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-                <div className="text-default p-4 text-center" ref={buttonInView.ref}>
-                  <Button
-                    color="minimal"
-                    loading={query.isFetchingNextPage}
-                    disabled={!query.hasNextPage}
-                    onClick={() => query.fetchNextPage()}>
-                    {query.hasNextPage ? t("load_more_results") : t("no_more_results")}
-                  </Button>
-                </div>
-              </div>
+
+              <DataTableWrapper
+                table={table}
+                testId={`${status}-bookings`}
+                bodyTestId="bookings"
+                hideHeader={true}
+                isPending={query.isFetching && !flatData}
+                hasNextPage={query.hasNextPage}
+                fetchNextPage={query.fetchNextPage}
+                isFetching={query.isFetching}
+                variant="compact"
+              />
             </>
           )}
           {query.status === "success" && isEmpty && (

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "4.8.18",
+  "version": "4.8.19",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",

diff --git a/packages/features/bookings/components/PeopleFilter.tsx b/packages/features/bookings/components/PeopleFilter.tsx
@@ -54,6 +54,8 @@ export const PeopleFilter = () => {
   return (
     <AnimatedPopover text={getTextForPopover()} prefix={`${t("people")}: `}>
       <FilterCheckboxFieldsContainer>
+        <FilterSearchField onChange={(e) => setSearchText(e.target.value)} placeholder={t("search")} />
+
         <FilterCheckboxField
           id="all"
           icon={<Icon name="user" className="h-4 w-4" />}
@@ -62,7 +64,6 @@ export const PeopleFilter = () => {
           label={t("all_users_filter_label")}
         />
         <Divider />
-        <FilterSearchField onChange={(e) => setSearchText(e.target.value)} placeholder={t("search")} />
 
         {filteredMembers?.map((member) => (
           <FilterCheckboxField