maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dialog Api improvements (#5714)

This commit is contained in:
sean-brydon 2022-11-28 19:14:38 +00:00 committed by GitHub
parent 26d675e162
commit 7ebea57602
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 218 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/components/Embed.tsx
View File

@ -619,7 +619,7 @@ const ChooseEmbedTypesDialogContent = () => {
const { t } = useLocale();
const router = useRouter();
return (
<DialogContent type="creation" useOwnActionButtons size="lg">
<DialogContent type="creation" size="lg">
<div className="mb-4">
<h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
{t("how_you_want_add_cal_site")}
@ -797,7 +797,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
];
return (
<DialogContent size="xl" className="p-0.5" type="creation" useOwnActionButtons>
<DialogContent size="xl" className="p-0.5" type="creation">
<div className="flex">
<div className="flex w-1/3 flex-col bg-gray-50 p-8">
<h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
@ -1095,9 +1095,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
{t("copy_code")}
</Button>
) : null}
<DialogClose asChild>
<Button color="secondary">{t("Close")}</Button>
</DialogClose>
<DialogClose />
</div>
</div>
);

8
apps/web/components/ImageUploader.tsx
View File

@ -156,12 +156,8 @@ export default function ImageUploader({
</div>
</div>
<div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
<DialogClose asChild>
<Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
</DialogClose>
<DialogClose asChild>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
<DialogClose color="secondary">{t("cancel")}</DialogClose>
</div>
</DialogContent>
</Dialog>

4
apps/web/components/booking/BookingListItem.tsx
View File

@ -237,9 +237,7 @@ function BookingListItem(booking: BookingItemProps) {
/>
<DialogFooter>
<DialogClose>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<DialogClose />
<Button
disabled={mutation.isLoading}

2
apps/web/components/dialog/EditLocationDialog.tsx
View File

@ -212,7 +212,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
return (
<Dialog open={isOpenDialog}>
<DialogContent useOwnActionButtons>
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<Icon.FiMapPin className="text-primary-600 h-6 w-6" />

85
apps/web/components/dialog/RescheduleDialog.tsx
View File

@ -2,7 +2,17 @@ import { Dispatch, SetStateAction, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, Dialog, DialogContent, Icon, showToast, TextArea } from "@calcom/ui";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
Icon,
showToast,
TextArea,
} from "@calcom/ui";
interface IRescheduleDialog {
isOpenDialog: boolean;
@ -30,44 +40,41 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
return (
<Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
<DialogContent
Icon={Icon.FiClock}
useOwnActionButtons
title={t("send_reschedule_request")}
description={t("reschedule_modal_description")}>
<div>
<p className="text-sm font-medium text-black">
{t("reason_for_reschedule_request")}
<span className="font-normal text-gray-500"> (Optional)</span>
</p>
<TextArea
data-testid="reschedule_reason"
name={t("reschedule_reason")}
value={rescheduleReason}
onChange={(e) => setRescheduleReason(e.target.value)}
className="mt-2"
/>
</div>
<div className="flex justify-end space-x-2">
<Button
onClick={() => {
setRescheduleReason("");
setIsOpenDialog(false);
}}
color="secondary">
{t("cancel")}
</Button>
<Button
data-testid="send_request"
disabled={isLoading}
onClick={() => {
rescheduleApi({
bookingId,
rescheduleReason,
});
}}>
{t("send_reschedule_request")}
</Button>
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<Icon.FiClock className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("send_reschedule_request")} />
<p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
<p className="mt-6 mb-2 text-sm font-bold text-black">
{t("reason_for_reschedule_request")}
<span className="font-normal text-gray-500"> (Optional)</span>
</p>
<TextArea
data-testid="reschedule_reason"
name={t("reschedule_reason")}
value={rescheduleReason}
onChange={(e) => setRescheduleReason(e.target.value)}
className="mb-5 sm:mb-6"
/>
<DialogFooter>
<DialogClose />
<Button
data-testid="send_request"
disabled={isLoading}
onClick={() => {
rescheduleApi({
bookingId,
rescheduleReason,
});
}}>
{t("send_reschedule_request")}
</Button>
</DialogFooter>
</div>
</div>
</DialogContent>
</Dialog>

4
apps/web/components/eventtype/CreateEventType.tsx
View File

@ -264,9 +264,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
<Button type="submit" loading={createMutation.isLoading}>
{t("continue")}
</Button>
<DialogClose asChild>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<DialogClose />
</div>
</Form>
</DialogContent>

1
apps/web/components/eventtype/EditLocationDialog.tsx
View File

@ -211,7 +211,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
<DialogContent
type="creation"
Icon={Icon.FiMapPin}
useOwnActionButtons
title={t("edit_location")}
description={!booking ? t("this_input_will_shown_booking_this_event") : undefined}>
{booking && (

15
apps/web/components/eventtype/EventAdvancedTab.tsx
View File

@ -15,7 +15,9 @@ import {
Checkbox,
CustomInputItem,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
Icon,
Label,
SettingsToggle,
@ -352,11 +354,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
<DialogContent
title={t("custom_event_name")}
description={t("custom_event_name_description")}
type="creation"
actionText="Create"
// Set event name back to what it was on close
actionOnClose={() => formMethods.setValue("eventName", eventType.eventName ?? "")}
actionOnClick={() => setShowEventNameTip(false)}>
type="creation">
<TextField
label={t("event_name")}
type="text"
@ -370,6 +368,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
<p>{`{HOST/ATTENDEE} = ${t("dynamically_display_attendee_or_organizer")}`}</p>
<p>{`{LOCATION} = ${t("event_location")}`}</p>
</div>
<DialogFooter>
<Button color="primary" onClick={() => setShowEventNameTip(false)}>
{t("create")}
</Button>
<DialogClose onClick={() => formMethods.setValue("eventName", eventType.eventName ?? "")} />
</DialogFooter>
</DialogContent>
</Dialog>
)}
@ -383,7 +387,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
type="creation"
Icon={Icon.FiPlus}
title={t("add_new_custom_input_field")}
useOwnActionButtons
description={t("this_input_will_shown_booking_this_event")}>
<CustomInputTypeForm
selectedCustomInput={selectedCustomInput}

6
apps/web/components/settings/DisableTwoFactorModal.tsx
View File

@ -72,11 +72,7 @@ const DisableTwoFactorAuthModal = ({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
title={t("disable_2fa")}
description={t("disable_2fa_recommendation")}
type="creation"
useOwnActionButtons>
<DialogContent title={t("disable_2fa")} description={t("disable_2fa_recommendation")} type="creation">
<Form form={form} handleSubmit={handleDisable}>
<div className="mb-4">
<PasswordField

6
apps/web/components/settings/EnableTwoFactorModal.tsx
View File

@ -130,11 +130,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
title={t("enable_2fa")}
description={setupDescriptions[step]}
type="creation"
useOwnActionButtons>
<DialogContent title={t("enable_2fa")} description={setupDescriptions[step]} type="creation">
<WithStep step={SetupStep.ConfirmPassword} current={step}>
<form onSubmit={handleSetup}>
<div className="mb-4">

6
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
View File

@ -347,10 +347,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
{t("save")}
</Button>
)}
<DialogClose asChild>
<Button color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
{t("cancel")}
</Button>
<DialogClose color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
{t("cancel")}
</DialogClose>
</div>
</DialogContent>

6
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
View File

@ -194,10 +194,8 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
{t("save")}
</Button>
<DialogClose asChild>
<Button color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
{t("cancel")}
</Button>
<DialogClose color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
{t("cancel")}
</DialogClose>
</div>
</DialogContent>

2
apps/web/pages/settings/developer/api-keys.tsx
View File

@ -79,7 +79,7 @@ const ApiKeysView = () => {
</LicenseRequired>
<Dialog open={apiKeyModal} onOpenChange={setApiKeyModal}>
<DialogContent type="creation" useOwnActionButtons>
<DialogContent type="creation">
<ApiKeyDialogForm handleClose={() => setApiKeyModal(false)} defaultValues={apiKeyToEdit} />
</DialogContent>
</Dialog>

14
apps/web/pages/settings/my-account/conferencing.tsx
View File

@ -5,7 +5,9 @@ import { trpc } from "@calcom/trpc/react";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
@ -111,10 +113,14 @@ const ConferencingLayout = () => {
title={t("Remove app")}
description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation"
actionText={t("yes_remove_app")}
Icon={Icon.FiAlertCircle}
actionOnClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}
/>
Icon={Icon.FiAlertCircle}>
<DialogFooter>
<Button color="primary" onClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}>
{t("yes_remove_app")}
</Button>
<DialogClose />
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);

29
apps/web/pages/settings/my-account/profile.tsx
View File

@ -14,7 +14,9 @@ import {
Avatar,
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogTrigger,
Form,
getSettingsLayout as getLayout,
@ -298,13 +300,7 @@ const ProfileView = () => {
title={t("delete_account_modal_title")}
description={t("confirm_delete_account_modal")}
type="creation"
actionText={t("delete_my_account")}
actionProps={{
// @ts-expect-error data attributes aren't typed
"data-testid": "delete-account-confirm",
}}
Icon={Icon.FiAlertTriangle}
actionOnClick={(e) => e && onConfirmButton(e)}>
Icon={Icon.FiAlertTriangle}>
<>
<p className="mb-7">{t("delete_account_confirmation_message")}</p>
{isCALIdentityProviver && (
@ -326,6 +322,15 @@ const ProfileView = () => {
)}
{hasDeleteErrors && <Alert severity="error" title={deleteErrorMessage} />}
<DialogFooter>
<Button
color="primary"
data-testid="delete-account-confirm"
onClick={(e) => onConfirmButton(e)}>
{t("delete_my_account")}
</Button>
<DialogClose />
</DialogFooter>
</>
</DialogContent>
</Dialog>
@ -337,9 +342,7 @@ const ProfileView = () => {
title={t("confirm_password")}
description={t("confirm_password_change_email")}
type="creation"
actionText={t("confirm")}
Icon={Icon.FiAlertTriangle}
actionOnClick={(e) => e && onConfirmPassword(e)}>
Icon={Icon.FiAlertTriangle}>
<>
<PasswordField
data-testid="password"
@ -352,6 +355,12 @@ const ProfileView = () => {
/>
{confirmPasswordErrorMessage && <Alert severity="error" title={confirmPasswordErrorMessage} />}
<DialogFooter>
<Button color="primary" onClick={(e) => onConfirmPassword(e)}>
{t("confirm")}
</Button>
<DialogClose />
</DialogFooter>
</>
</DialogContent>
</Dialog>

4
packages/app-store/ee/routing-forms/components/FormActions.tsx
View File

@ -120,9 +120,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
<Button loading={mutation.isLoading} data-testid="add-form" type="submit">
{t("continue")}
</Button>
<DialogClose asChild>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<DialogClose />
</div>
</Form>
</DialogContent>

18
packages/app-store/ee/routing-forms/components/SingleForm.tsx
View File

@ -379,16 +379,14 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
)}
</div>
<DialogFooter>
<DialogClose asChild>
<Button
color="secondary"
onClick={() => {
setIsTestPreviewOpen(false);
setDecidedAction(null);
setResponse({});
}}>
{t("close")}
</Button>
<DialogClose
color="secondary"
onClick={() => {
setIsTestPreviewOpen(false);
setDecidedAction(null);
setResponse({});
}}>
{t("close")}
</DialogClose>
<Button type="submit" data-testid="test-routing">
{t("test_routing")}

9
packages/app-store/giphy/components/SearchDialog.tsx
View File

@ -187,13 +187,12 @@ export const SearchDialog = (props: ISearchDialog) => {
)}
<DialogFooter>
<DialogClose
color="minimal"
tabIndex={-1}
onClick={() => {
props.setIsOpenDialog(false);
}}
asChild>
<Button type="button" color="minimal" tabIndex={-1}>
{t("cancel")}
</Button>
}}>
{t("cancel")}
</DialogClose>
<Button

10
packages/app-store/office365video/components/AccountDialog.tsx
View File

@ -15,13 +15,13 @@ export function AccountDialog(props: DialogProps) {
<DialogFooter>
<DialogClose
type="button"
color="secondary"
tabIndex={-1}
onClick={() => {
props.onOpenChange?.(false);
}}
asChild>
<Button type="button" color="secondary" tabIndex={-1}>
Cancel
</Button>
}}>
Cancel
</DialogClose>
<Button type="button" onClick={() => mutation.mutate("")}>

2
packages/features/ee/sso/components/SAMLConfiguration.tsx
View File

@ -174,7 +174,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
{/* Add/Update SAML Connection */}
<Dialog open={configModal} onOpenChange={setConfigModal}>
<DialogContent type="creation" useOwnActionButtons>
<DialogContent type="creation">
<ConfigDialogForm handleClose={() => setConfigModal(false)} teamId={teamId} />
</DialogContent>
</Dialog>

2
packages/features/ee/teams/components/MemberChangeRoleModal.tsx
View File

@ -67,7 +67,7 @@ export default function MemberChangeRoleModal(props: {
}
return (
<Dialog open={props.isOpen} onOpenChange={props.onExit}>
<DialogContent type="creation" useOwnActionButtons size="md">
<DialogContent type="creation" size="md">
<>
<div className="mb-4 sm:flex sm:items-start">
<div className="text-center sm:text-left">

1
packages/features/ee/teams/components/MemberInvitationModal.tsx
View File

@ -66,7 +66,6 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
}}>
<DialogContent
type="creation"
useOwnActionButtons
title={t("invite_new_member")}
description={
IS_TEAM_BILLING_ENABLED ? (

7
packages/features/ee/teams/components/MemberListItem.tsx
View File

@ -13,6 +13,7 @@ import {
ConfirmationDialogContent,
Dialog,
DialogContent,
DialogFooter,
DialogTrigger,
Dropdown,
DropdownItem,
@ -258,11 +259,11 @@ export default function MemberListItem(props: Props) {
)}
{showTeamAvailabilityModal && (
<Dialog open={showTeamAvailabilityModal} onOpenChange={() => setShowTeamAvailabilityModal(false)}>
<DialogContent type="creation" useOwnActionButtons size="md">
<DialogContent type="creation" size="md">
<TeamAvailabilityModal team={props.team} member={props.member} />
<div className="flex justify-end border-t pt-5">
<DialogFooter>
<Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
)}

28
packages/features/ee/workflows/components/AddActionDialog.tsx
View File

@ -102,7 +102,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
return (
<Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
<DialogContent type="creation" useOwnActionButtons={true} title={t("add_action")}>
<DialogContent type="creation" title={t("add_action")}>
<div className="space-x-3 ">
<div className="pt-1">
<Form
@ -188,21 +188,17 @@ export const AddActionDialog = (props: IAddActionDialog) => {
</div>
)}
<DialogFooter>
<DialogClose asChild>
<Button
color="secondary"
onClick={() => {
setIsOpenDialog(false);
form.unregister("sendTo");
form.unregister("action");
form.unregister("numberRequired");
setIsPhoneNumberNeeded(false);
setIsEmailAddressNeeded(false);
setIsSenderIdNeeded(false);
}}>
{t("cancel")}
</Button>
</DialogClose>
<DialogClose
onClick={() => {
setIsOpenDialog(false);
form.unregister("sendTo");
form.unregister("action");
form.unregister("numberRequired");
setIsPhoneNumberNeeded(false);
setIsEmailAddressNeeded(false);
setIsSenderIdNeeded(false);
}}
/>
<Button type="submit">{t("add")}</Button>
</DialogFooter>
</Form>

8
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
View File

@ -603,7 +603,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
</ConfirmationDialogContent>
</Dialog>
<Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
<DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
<DialogContent type="creation" className="sm:max-w-[610px] md:h-[570px]">
<div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
<h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
<div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
@ -649,11 +649,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
</div>
</div>
<div className="flex flex-row-reverse">
<DialogClose asChild>
<Button color="primary" type="button">
{t("close")}
</Button>
</DialogClose>
<DialogClose color="primary" />
</div>
</DialogContent>
</Dialog>

20
packages/features/schedules/components/NewScheduleButton.tsx
View File

@ -4,7 +4,17 @@ import { useForm } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { HttpError } from "@calcom/lib/http-error";
import { trpc } from "@calcom/trpc/react";
import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Form, Icon, showToast } from "@calcom/ui";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogTrigger,
Form,
Icon,
showToast,
} from "@calcom/ui";
export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
const router = useRouter();
@ -78,14 +88,12 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
/>
</div>
</div>
<div className="mt-8 flex flex-row-reverse gap-x-2">
<DialogFooter>
<Button type="submit" loading={createMutation.isLoading}>
{t("continue")}
</Button>
<DialogClose asChild>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
</div>
<DialogClose />
</DialogFooter>
</Form>
</DialogContent>
</Dialog>

86
packages/ui/ConfirmationDialogContent.tsx
View File

@ -1,86 +0,0 @@
/**
* @deprecated file
* All new changes should be made to the V2 file in
* `/packages/ui/v2/core/ConfirmationDialogContent.tsx`
*/
import * as DialogPrimitive from "@radix-ui/react-dialog";
import React, { PropsWithChildren, ReactNode } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, DialogClose, DialogContent, Icon } from ".";
export type ConfirmationDialogContentProps = {
confirmBtn?: ReactNode;
confirmBtnText?: string;
cancelBtnText?: string;
isLoading?: boolean;
loadingText?: string;
onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
title: string;
variety?: "danger" | "warning" | "success";
};
/**
* @deprecated file
* All new changes should be made to the V2 file in
* `/packages/ui/v2/core/ConfirmationDialogContent.tsx`
*/
export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
const { t } = useLocale();
const {
title,
variety,
confirmBtn = null,
confirmBtnText = t("confirm"),
cancelBtnText = t("cancel"),
loadingText = t("loading"),
isLoading = false,
onConfirm,
children,
} = props;
return (
<DialogContent>
<div className="flex">
{variety && (
<div className="mt-0.5 ltr:mr-3">
{variety === "danger" && (
<div className="mx-auto rounded-full bg-red-100 p-2 text-center">
<Icon.FiAlertCircle className="h-5 w-5 text-red-600" />
</div>
)}
{variety === "warning" && (
<div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
<Icon.FiAlertCircle className="h-5 w-5 text-orange-600" />
</div>
)}
{variety === "success" && (
<div className="mx-auto rounded-full bg-green-100 p-2 text-center">
<Icon.FiCheck className="h-5 w-5 text-green-600" />
</div>
)}
</div>
)}
<div>
<DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
<DialogPrimitive.Description className="text-sm text-neutral-500">
{children}
</DialogPrimitive.Description>
</div>
</div>
<div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
<DialogClose disabled={isLoading} onClick={onConfirm} asChild>
{confirmBtn || (
<Button data-testid="confirm-button" color="primary" loading={isLoading}>
{isLoading ? loadingText : confirmBtnText}
</Button>
)}
</DialogClose>
<DialogClose disabled={isLoading} asChild>
<Button color="secondary">{cancelBtnText}</Button>
</DialogClose>
</div>
</DialogContent>
);
}

16
packages/ui/TimezoneChangeDialog.tsx
View File

@ -6,6 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Dialog, DialogContent, showToast } from ".";
import { DialogClose, DialogFooter } from "./Dialog";
export default function TimezoneChangeDialog() {
const { t } = useLocale();
@ -58,20 +59,23 @@ export default function TimezoneChangeDialog() {
if (data?.user.impersonatedByUID) return null;
const ONE_DAY = 60 * 60 * 24; // 1 day in seconds (60 seconds * 60 minutes * 24 hours)
const THREE_MONTHS = ONE_DAY * 90; // 90 days in seconds (90 days * 1 day in seconds)
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent
title={t("update_timezone_question")}
description={t("update_timezone_description", { formattedCurrentTz })}
type="creation"
actionText={t("update_timezone")}
actionOnClick={() => updateTimezone()}
closeText={t("dont_update")}
onInteractOutside={() => onCancel(86400, false) /* 1 day expire */}
actionOnClose={() => onCancel(7776000, true) /* 3 months expire */}>
{/* todo: save this in db and auto-update when timezone changes (be able to disable??? if yes, /settings)
onInteractOutside={() => onCancel(ONE_DAY, false) /* 1 day expire */}>
{/* todo: save this in db and auto-update when timezone changes (be able to disable??? if yes, /settings)
<Checkbox description="Always update timezone" />
*/}
<DialogFooter>
<DialogClose onClick={() => onCancel(THREE_MONTHS, true)}>{t("dont_update")}</DialogClose>
<DialogClose onClick={() => updateTimezone()}>{t("update_timezone")}</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);

20
packages/ui/v2/core/ConfirmationDialogContent.tsx
View File

@ -33,7 +33,7 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
} = props;
return (
<DialogContent type="creation" useOwnActionButtons={true}>
<DialogContent type="creation">
<div className="flex">
{variety && (
<div className="mt-0.5 ltr:mr-3">
@ -62,16 +62,14 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
</div>
</div>
<div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
<DialogClose disabled={isLoading} onClick={onConfirm} asChild>
{confirmBtn || (
<Button color="primary" loading={isLoading}>
{isLoading ? loadingText : confirmBtnText}
</Button>
)}
</DialogClose>
<DialogClose disabled={isLoading} asChild>
<Button color="secondary">{cancelBtnText}</Button>
</DialogClose>
{confirmBtn ? (
confirmBtn
) : (
<DialogClose color="primary" loading={isLoading} onClick={(e) => onConfirm && onConfirm(e)}>
{isLoading ? loadingText : confirmBtnText}
</DialogClose>
)}
<DialogClose disabled={isLoading}>{cancelBtnText}</DialogClose>
</div>
</DialogContent>
);

64
packages/ui/v2/core/Dialog.tsx
View File

@ -1,12 +1,12 @@
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { useRouter } from "next/router";
import React, { ReactNode, useState } from "react";
import React, { forwardRef, HTMLProps, ReactNode, useState } from "react";
import { Icon } from "react-feather";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "../../components/button";
import { Button, ButtonProps } from "../../components/button";
export type DialogProps = React.ComponentProps<typeof DialogPrimitive["Root"]> & {
name?: string;
@ -70,20 +70,11 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
description?: string | JSX.Element | undefined;
closeText?: string;
actionDisabled?: boolean;
actionText?: string;
Icon?: Icon;
// If this is set it allows you to overide the action buttons. Usefull if you need to use formcontext
useOwnActionButtons?: boolean;
actionOnClick?: (e: Event | React.MouseEvent<HTMLElement, MouseEvent>) => void;
actionOnClose?: () => void;
actionProps?: React.ComponentProps<typeof Button>;
};
export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
(
{ children, title, Icon, actionProps, useOwnActionButtons, type = "creation", ...props },
forwardedRef
) => {
({ children, title, Icon, type = "creation", ...props }, forwardedRef) => {
const { t } = useLocale();
return (
@ -125,31 +116,6 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
</div>
</div>
)}
{!useOwnActionButtons && (
<DialogFooter>
<div className="mt-2 flex space-x-2">
<DialogClose asChild>
{/* This will require the i18n string passed in */}
<Button color="minimal" onClick={props.actionOnClose}>
{props.closeText ?? t("close")}
</Button>
</DialogClose>
{props.actionOnClick ? (
<Button
color="primary"
disabled={props.actionDisabled}
onClick={props.actionOnClick}
{...actionProps}>
{props.actionText}
</Button>
) : (
<Button color="primary" type="submit" disabled={props.actionDisabled} {...actionProps}>
{props.actionText}
</Button>
)}
</div>
</DialogFooter>
)}
</DialogPrimitive.Content>
</DialogPrimitive.Portal>
);
@ -175,7 +141,7 @@ export function DialogHeader(props: DialogHeaderProps) {
export function DialogFooter(props: { children: ReactNode }) {
return (
<div>
<div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse">{props.children}</div>
<div className="mt-7 flex justify-end space-x-2 rtl:space-x-reverse ">{props.children}</div>
</div>
);
}
@ -183,4 +149,24 @@ export function DialogFooter(props: { children: ReactNode }) {
DialogContent.displayName = "DialogContent";
export const DialogTrigger = DialogPrimitive.Trigger;
export const DialogClose = DialogPrimitive.Close;
// export const DialogClose = DialogPrimitive.Close;
export function DialogClose(
props: {
dialogCloseProps?: React.ComponentProps<typeof DialogPrimitive["Close"]>;
children?: ReactNode;
onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
disabled?: boolean;
color?: ButtonProps["color"];
} & React.ComponentProps<typeof Button>
) {
const { t } = useLocale();
return (
<DialogPrimitive.Close asChild {...props.dialogCloseProps}>
{/* This will require the i18n string passed in */}
<Button color={props.color || "minimal"} {...props}>
{props.children ? props.children : t("Close")}
</Button>
</DialogPrimitive.Close>
);
}

10
packages/ui/v2/core/ImageUploader.tsx
View File

@ -163,7 +163,7 @@ export default function ImageUploader({
{buttonMsg}
</Button>
</DialogTrigger>
<DialogContent useOwnActionButtons>
<DialogContent>
<div className="mb-4 sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
@ -201,12 +201,8 @@ export default function ImageUploader({
</div>
</div>
<div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-4">
<DialogClose asChild>
<Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
</DialogClose>
<DialogClose asChild>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
<DialogClose color="secondary">{t("cancel")}</DialogClose>
</div>
</DialogContent>
</Dialog>

5
packages/ui/v2/modules/event-types/CreateEventType.tsx
View File

@ -205,7 +205,6 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
<DialogContent
type="creation"
className="overflow-y-auto"
useOwnActionButtons
title={teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
description={t("new_event_type_to_book_description")}>
<Form
@ -315,9 +314,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
<Button type="submit" loading={createMutation.isLoading}>
{t("continue")}
</Button>
<DialogClose asChild>
<Button color="secondary">{t("cancel")}</Button>
</DialogClose>
<DialogClose />
</div>
</Form>
</DialogContent>

24
packages/ui/v2/modules/integrations/DisconnectIntegration.tsx
View File

@ -3,7 +3,17 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button, ButtonProps, Dialog, DialogContent, DialogTrigger, Icon, showToast } from "../../..";
import {
Button,
ButtonProps,
Dialog,
DialogContent,
DialogTrigger,
Icon,
showToast,
DialogFooter,
DialogClose,
} from "../../..";
export default function DisconnectIntegration({
credentialId,
@ -52,10 +62,14 @@ export default function DisconnectIntegration({
title={t("remove_app")}
description={t("are_you_sure_you_want_to_remove_this_app")}
type="confirmation"
actionText={t("yes_remove_app")}
Icon={Icon.FiAlertCircle}
actionOnClick={() => mutation.mutate({ id: credentialId })}
/>
Icon={Icon.FiAlertCircle}>
<DialogFooter>
<DialogClose onClick={() => setModalOpen(false)} />
<DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>
{t("yes_remove_app")}
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);