fix: Dialog is open after adding a new overwrite (#11220)

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/playwright/availability.e2e.ts

@@ -28,6 +28,7 @@ test.describe("Availablity tests", () => {
       await page.locator('[data-testid="day"][data-disabled="false"]').nth(0).click();
       await page.locator('[data-testid="date-override-mark-unavailable"]').click();
       await page.locator('[data-testid="add-override-submit-btn"]').click();
+      await page.locator('[data-testid="dialog-rejection"]').click();
       await expect(page.locator('[data-testid="date-overrides-list"] > li')).toHaveCount(1);
       await page.locator('[form="availability-form"][type="submit"]').click();
     });

packages/features/schedules/components/DateOverrideInputDialog.tsx

@@ -3,7 +3,6 @@ import { useForm } from "react-hook-form";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
-import { classNames } from "@calcom/lib";
 import { yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
@@ -23,15 +22,11 @@ import DatePicker from "../../calendars/DatePicker";
 import type { TimeRange } from "./Schedule";
 import { DayRanges } from "./Schedule";
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
 const DateOverrideForm = ({
   value,
   workingHours,
   excludedDates,
   onChange,
-  onClose = noop,
 }: {
   workingHours?: WorkingHours[];
   onChange: (newValue: TimeRange[]) => void;
@@ -137,14 +132,10 @@ const DateOverrideForm = ({
               })
             : datesInRanges
         );
-        onClose();
+        setSelectedDates([]);
       }}
       className="p-6 sm:flex sm:p-0 md:flex-col lg:flex-col xl:flex-row">
-      <div
-        className={classNames(
-          selectedDates[0] && "sm:border-subtle w-full sm:border-r sm:pr-6",
-          "sm:p-4 md:p-8"
-        )}>
+      <div className="sm:border-subtle w-full sm:border-r sm:p-4 sm:pr-6 md:p-8">
         <DialogHeader title={t("date_overrides_dialog_title")} />
         <DatePicker
           excludedDates={excludedDates}
@@ -160,8 +151,9 @@ const DateOverrideForm = ({
           locale={isLocaleReady ? i18n.language : "en"}
         />
       </div>
-      {selectedDates[0] && (
       <div className="relative mt-8 flex w-full flex-col sm:mt-0 sm:p-4 md:p-8">
+        {selectedDates[0] ? (
+          <>
             <div className="mb-4 flex-grow space-y-4">
               <p className="text-medium text-emphasis text-sm">{t("date_overrides_dialog_which_hours")}</p>
               <div>
@@ -189,10 +181,15 @@ const DateOverrideForm = ({
                 data-testid="add-override-submit-btn">
                 {value ? t("date_overrides_update_btn") : t("date_overrides_add_btn")}
               </Button>
-            <DialogClose onClick={onClose} />
+              <DialogClose />
             </div>
+          </>
+        ) : (
+          <div className="bottom-7 right-8 flex flex-row-reverse sm:absolute">
+            <DialogClose />
           </div>
         )}
+      </div>
     </Form>
   );
 };
@@ -220,7 +217,7 @@ const DateOverrideInputDialog = ({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{Trigger}</DialogTrigger>
 
-      <DialogContent enableOverflow={enableOverflow} size="md" className="p-0 md:w-auto">
+      <DialogContent enableOverflow={enableOverflow} size="md" className="p-0">
         <DateOverrideForm
           excludedDates={excludedDates}
           {...passThroughProps}

packages/ui/components/dialog/Dialog.tsx

@@ -187,7 +187,7 @@ export function DialogClose(
   return (
     <DialogPrimitive.Close asChild {...props.dialogCloseProps}>
       {/* This will require the i18n string passed in */}
-      <Button color={props.color || "minimal"} {...props}>
+      <Button data-testid="dialog-rejection" color={props.color || "minimal"} {...props}>
         {props.children ? props.children : t("Close")}
       </Button>
     </DialogPrimitive.Close>