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>
pull/11799/head
Anik Dhabal Babu 2023-10-09 14:25:14 +05:30 committed by GitHub
parent 9857b46121
commit 76d476441f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 44 deletions

View File

@ -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();
});

View File

@ -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,39 +151,45 @@ 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">
<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>
{datesUnavailable ? (
<p className="text-subtle border-default rounded border p-2 text-sm">
{t("date_overrides_unavailable")}
</p>
) : (
<DayRanges name="range" />
)}
<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>
{datesUnavailable ? (
<p className="text-subtle border-default rounded border p-2 text-sm">
{t("date_overrides_unavailable")}
</p>
) : (
<DayRanges name="range" />
)}
</div>
<Switch
label={t("date_overrides_mark_all_day_unavailable_one")}
checked={datesUnavailable}
onCheckedChange={setDatesUnavailable}
data-testid="date-override-mark-unavailable"
/>
</div>
<Switch
label={t("date_overrides_mark_all_day_unavailable_one")}
checked={datesUnavailable}
onCheckedChange={setDatesUnavailable}
data-testid="date-override-mark-unavailable"
/>
<div className="mt-4 flex flex-row-reverse sm:mt-0">
<Button
className="ml-2"
color="primary"
type="submit"
disabled={selectedDates.length === 0}
data-testid="add-override-submit-btn">
{value ? t("date_overrides_update_btn") : t("date_overrides_add_btn")}
</Button>
<DialogClose />
</div>
</>
) : (
<div className="bottom-7 right-8 flex flex-row-reverse sm:absolute">
<DialogClose />
</div>
<div className="mt-4 flex flex-row-reverse sm:mt-0">
<Button
className="ml-2"
color="primary"
type="submit"
disabled={selectedDates.length === 0}
data-testid="add-override-submit-btn">
{value ? t("date_overrides_update_btn") : t("date_overrides_add_btn")}
</Button>
<DialogClose onClick={onClose} />
</div>
</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}

View File

@ -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>