From cd952dc93c0043da3db9316f878158a57fc7f327 Mon Sep 17 00:00:00 2001 From: Morgan <33722304+ThyMinimalDev@users.noreply.github.com> Date: Thu, 27 Mar 2025 09:24:42 +0200 Subject: [PATCH] chore: decouple ui dialog from AppRouter and Atoms (#20088) * chore: decouple ui dialog from AppRouter and Atoms * fix type e2e test * fix: import dialog from @calcom/ui/components/dialog * fix: remove log * fix unit test * fix * fix and move data-override-list test to features package --------- Co-authored-by: hbjORbj --- .../apps/MultiDisconnectIntegration.tsx | 2 +- .../components/booking/BookingListItem.tsx | 3 +- .../web/components/dialog/AddGuestsDialog.tsx | 3 +- .../components/dialog/ChargeCardDialog.tsx | 3 +- .../components/dialog/EditLocationDialog.tsx | 3 +- apps/web/components/dialog/ReassignDialog.tsx | 2 +- apps/web/components/dialog/RerouteDialog.tsx | 3 +- .../components/dialog/RescheduleDialog.tsx | 3 +- .../__tests__/EditLocationDialog.test.tsx | 12 ++ .../security/DisableTwoFactorModal.tsx | 3 +- .../security/EnableTwoFactorModal.tsx | 3 +- .../settings/DisableTwoFactorModal.tsx | 3 +- .../settings/EnableTwoFactorModal.tsx | 3 +- .../settings/SecondaryEmailConfirmModal.tsx | 3 +- .../settings/SecondaryEmailModal.tsx | 3 +- .../settings/TravelScheduleModal.tsx | 3 +- apps/web/components/ui/ModalContainer.tsx | 3 +- .../UsernameAvailability/PremiumTextfield.tsx | 3 +- .../UsernameTextfield.tsx | 3 +- .../connect-and-join-view.tsx | 2 +- .../views/event-types-listing-view.tsx | 3 +- .../settings/developer/api-keys-view.tsx | 3 +- .../settings/my-account/profile-view.tsx | 9 +- apps/web/modules/signup-view.tsx | 2 +- .../giphy/components/SearchDialog.tsx | 9 +- packages/app-store/make/pages/setup/index.tsx | 2 +- .../components/AccountDialog.tsx | 7 +- .../__tests__/TestFormDialog.test.tsx | 12 ++ .../routing-forms/components/FormActions.tsx | 2 +- .../components/InfoLostWarningDialog.tsx | 3 +- .../routing-forms/components/SingleForm.tsx | 3 +- .../components/confirmDialog.tsx | 5 +- .../app-store/zapier/pages/setup/index.tsx | 2 +- .../AdminOrganizationNotificationEmail.tsx | 2 +- .../src/templates/BrokenIntegrationEmail.tsx | 2 +- .../templates/OrganizationCreationEmail.tsx | 2 +- .../src/templates/SlugReplacementEmail.tsx | 2 +- .../emails/src/templates/TeamInviteEmail.tsx | 2 +- packages/features/apps/AdminAppsList.tsx | 2 +- .../components/AppSetDefaultLinkDialog.tsx | 3 +- .../components/DisconnectIntegrationModal.tsx | 3 +- .../BookEventForm/BookEventForm.tsx | 2 +- .../BookEventForm/BookFormAsModal.tsx | 3 +- .../Booker/components/OutOfOfficeInSlots.tsx | 2 +- .../OverlayCalendarContinueModal.tsx | 3 +- .../OverlayCalendarSettingsModal.tsx | 3 +- .../RedirectToInstantMeetingModal.tsx | 3 +- .../bookings/components/VerifyCodeDialog.tsx | 5 +- .../components/controlled-dialog/index.tsx | 72 +++++++++++ .../components/ConfigureDirectorySync.tsx | 9 +- .../ee/dsync/components/CreateDirectory.tsx | 3 +- .../ee/dsync/components/CreateTeamDialog.tsx | 3 +- .../pages/components/LockEventTypeSwitch.tsx | 3 +- .../pages/components/OtherTeamListItem.tsx | 3 +- .../pages/settings/admin/AdminOrgPage.tsx | 3 +- .../settings/admin/WorkspacePlatformPage.tsx | 3 +- .../settings/attributes/AttributesForm.tsx | 3 +- .../attributes/DeleteAttributeModal.tsx | 3 +- .../__tests__/AttributeForm.test.tsx | 12 ++ .../pages/settings/delegationCredential.tsx | 3 +- .../settings/other-team-profile-view.tsx | 3 +- .../ee/sso/components/ConnectionInfo.tsx | 3 +- .../ee/sso/components/OIDCConnection.tsx | 5 +- .../ee/sso/components/SAMLConnection.tsx | 5 +- .../components/DeleteBulkTeamMembers.tsx | 3 +- .../components/InviteLinkSettingsModal.tsx | 5 +- .../components/MemberChangeRoleModal.tsx | 5 +- .../components/MemberInvitationModal.tsx | 5 +- .../ee/teams/components/MemberList.tsx | 2 +- .../ee/teams/components/TeamListItem.tsx | 3 +- .../ee/teams/pages/team-profile-view.tsx | 3 +- .../ee/users/components/UsersTable.tsx | 2 +- .../ee/video/ViewRecordingsDialog.tsx | 3 +- .../workflows/components/AddActionDialog.tsx | 5 +- .../ee/workflows/components/DeleteDialog.tsx | 3 +- .../components/WorkflowStepContainer.tsx | 3 +- packages/features/embed/Embed.tsx | 3 +- .../BulkEditDefaultForEventsModal.tsx | 3 +- .../components/CreateEventTypeDialog.tsx | 5 +- .../eventtypes/components/DuplicateDialog.tsx | 3 +- .../EditWeightsForAllTeamMembers.tsx | 2 +- .../eventtypes/components/HostEditDialogs.tsx | 3 +- .../eventtypes/components/Locations.tsx | 2 +- .../dialogs/AssignmentWarningDialog.tsx | 3 +- .../components/dialogs/DeleteDialog.tsx | 7 +- .../components/dialogs/ManagedEventDialog.tsx | 2 +- .../tabs/advanced/CustomEventTypeModal.tsx | 7 +- .../tabs/advanced/DisableAllEmailsSetting.tsx | 5 +- .../RequiresConfirmationController.tsx | 2 +- .../components/tabs/apps/EventAppsTab.tsx | 2 +- .../assignment/EventTeamAssignmentTab.tsx | 2 +- .../tabs/instant/InstantEventController.tsx | 5 +- .../tabs/webhooks/EventWebhooksTab.tsx | 5 +- .../tabs/workflows/EventWorkfowsTab.tsx | 2 +- .../form-builder/FormBuilder.test.tsx | 12 ++ .../features/form-builder/FormBuilder.tsx | 3 +- .../components/DateOverrideInputDialog.tsx | 2 +- .../components/NewScheduleButton.tsx | 5 +- .../components}/date-override-list.test.tsx | 13 ++ .../settings/BookerLayoutSelector.tsx | 2 +- .../settings/TimezoneChangeDialog.tsx | 3 +- .../CreateOrEditOutOfOfficeModal.tsx | 3 +- .../outOfOffice/OutOfOfficeEntriesList.tsx | 2 +- .../UserTable/BulkActions/DeleteBulkUsers.tsx | 3 +- .../UserTable/DeleteMemberModal.tsx | 3 +- .../UserTable/ImpersonationMemberModal.tsx | 3 +- .../availability/AvailabilitySettings.tsx | 3 +- packages/platform/atoms/package.json | 2 +- .../atoms/src/components/ui/dialog.tsx | 71 +++++++---- packages/platform/atoms/vite.config.ts | 1 + packages/ui/components/dialog/Dialog.tsx | 120 ++---------------- packages/ui/components/dialog/dialog.test.tsx | 2 +- 112 files changed, 392 insertions(+), 269 deletions(-) create mode 100644 packages/features/components/controlled-dialog/index.tsx rename packages/{ui/components/schedules => features/schedules/components}/date-override-list.test.tsx (92%) diff --git a/apps/web/components/apps/MultiDisconnectIntegration.tsx b/apps/web/components/apps/MultiDisconnectIntegration.tsx index b29d002b16..af3afbfd0b 100644 --- a/apps/web/components/apps/MultiDisconnectIntegration.tsx +++ b/apps/web/components/apps/MultiDisconnectIntegration.tsx @@ -1,11 +1,11 @@ import { useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/types/server/routers/_app"; import { Button } from "@calcom/ui/components/button"; import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; -import { Dialog } from "@calcom/ui/components/dialog"; import { Dropdown, DropdownItem, diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx index cb43683ffb..a4d29d9e12 100644 --- a/apps/web/components/booking/BookingListItem.tsx +++ b/apps/web/components/booking/BookingListItem.tsx @@ -8,6 +8,7 @@ import { getSuccessPageLocationMessage, guessEventLocationType } from "@calcom/a import dayjs from "@calcom/dayjs"; // TODO: Use browser locale, implement Intl in Dayjs maybe? import "@calcom/dayjs/locales"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog"; import { formatTime } from "@calcom/lib/date-fns"; import { getPaymentAppData } from "@calcom/lib/getPaymentAppData"; @@ -24,7 +25,7 @@ import type { Ensure } from "@calcom/types/utils"; import classNames from "@calcom/ui/classNames"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Dropdown, DropdownItem, diff --git a/apps/web/components/dialog/AddGuestsDialog.tsx b/apps/web/components/dialog/AddGuestsDialog.tsx index f7471cadeb..57a3441da3 100644 --- a/apps/web/components/dialog/AddGuestsDialog.tsx +++ b/apps/web/components/dialog/AddGuestsDialog.tsx @@ -2,11 +2,12 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { MultiEmail } from "@calcom/ui/components/address"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/apps/web/components/dialog/ChargeCardDialog.tsx b/apps/web/components/dialog/ChargeCardDialog.tsx index fa67463ad1..8006c2c17b 100644 --- a/apps/web/components/dialog/ChargeCardDialog.tsx +++ b/apps/web/components/dialog/ChargeCardDialog.tsx @@ -1,10 +1,11 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx index 59ec9ae7ba..d4410d3957 100644 --- a/apps/web/components/dialog/EditLocationDialog.tsx +++ b/apps/web/components/dialog/EditLocationDialog.tsx @@ -14,13 +14,14 @@ import { LocationType, OrganizerDefaultConferencingAppType, } from "@calcom/app-store/locations"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import PhoneInput from "@calcom/features/components/phone-input"; import type { LocationOption } from "@calcom/features/form/components/LocationSelect"; import LocationSelect from "@calcom/features/form/components/LocationSelect"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { Form, Input } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; diff --git a/apps/web/components/dialog/ReassignDialog.tsx b/apps/web/components/dialog/ReassignDialog.tsx index 2a7380f2e2..f26e2c53eb 100644 --- a/apps/web/components/dialog/ReassignDialog.tsx +++ b/apps/web/components/dialog/ReassignDialog.tsx @@ -5,6 +5,7 @@ import { useMemo, useState } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { ErrorCode } from "@calcom/lib/errorCodes"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useInViewObserver } from "@calcom/lib/hooks/useInViewObserver"; @@ -13,7 +14,6 @@ import { trpc } from "@calcom/trpc/react"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; import { - Dialog, DialogContent, DialogFooter, DialogClose, diff --git a/apps/web/components/dialog/RerouteDialog.tsx b/apps/web/components/dialog/RerouteDialog.tsx index 83f744a1e0..e7e4d482d7 100644 --- a/apps/web/components/dialog/RerouteDialog.tsx +++ b/apps/web/components/dialog/RerouteDialog.tsx @@ -16,6 +16,7 @@ import type { FormResponse, LocalRoute } from "@calcom/app-store/routing-forms/t import { RouteActionType } from "@calcom/app-store/routing-forms/zod"; import dayjs from "@calcom/dayjs"; import { createBooking } from "@calcom/features/bookings/lib/create-booking"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { EventType, User, Team, Attendee, Booking as PrismaBooking } from "@calcom/prisma/client"; @@ -25,7 +26,7 @@ import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { Ensure } from "@calcom/types/utils"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx index 9a035e102b..94dc20bb94 100644 --- a/apps/web/components/dialog/RescheduleDialog.tsx +++ b/apps/web/components/dialog/RescheduleDialog.tsx @@ -1,10 +1,11 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; import { TextArea } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/apps/web/components/dialog/__tests__/EditLocationDialog.test.tsx b/apps/web/components/dialog/__tests__/EditLocationDialog.test.tsx index 4157885536..63a0fc2a53 100644 --- a/apps/web/components/dialog/__tests__/EditLocationDialog.test.tsx +++ b/apps/web/components/dialog/__tests__/EditLocationDialog.test.tsx @@ -18,6 +18,18 @@ vi.mock("@calcom/trpc/react", () => ({ }, })); +vi.mock("next/navigation", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useRouter: vi.fn(() => ({ + push: vi.fn(() => { + return; + }), + })), + }; +}); + vi.mock("@calcom/lib/hooks/useLocale", () => ({ useLocale: () => ({ t: (key: string) => key }), })); diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx index 76debcfbb2..0fe0766b33 100644 --- a/apps/web/components/security/DisableTwoFactorModal.tsx +++ b/apps/web/components/security/DisableTwoFactorModal.tsx @@ -2,9 +2,10 @@ import { useState } from "react"; import { useForm } from "react-hook-form"; import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; import { Form, PasswordField } from "@calcom/ui/components/form"; import TwoFactor from "@components/auth/TwoFactor"; diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx index 2319ee2618..2486beec46 100644 --- a/apps/web/components/security/EnableTwoFactorModal.tsx +++ b/apps/web/components/security/EnableTwoFactorModal.tsx @@ -3,10 +3,11 @@ import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import TwoFactor from "@components/auth/TwoFactor"; diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx index b10808e2ad..2d6491fcf3 100644 --- a/apps/web/components/settings/DisableTwoFactorModal.tsx +++ b/apps/web/components/settings/DisableTwoFactorModal.tsx @@ -2,9 +2,10 @@ import { useState } from "react"; import { useForm } from "react-hook-form"; import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { Form, PasswordField } from "@calcom/ui/components/form"; import BackupCode from "@components/auth/BackupCode"; diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx index 290f428704..f377f39057 100644 --- a/apps/web/components/settings/EnableTwoFactorModal.tsx +++ b/apps/web/components/settings/EnableTwoFactorModal.tsx @@ -3,10 +3,11 @@ import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { Form, PasswordField } from "@calcom/ui/components/form"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/apps/web/components/settings/SecondaryEmailConfirmModal.tsx b/apps/web/components/settings/SecondaryEmailConfirmModal.tsx index 93145fed8a..47b6c9ff07 100644 --- a/apps/web/components/settings/SecondaryEmailConfirmModal.tsx +++ b/apps/web/components/settings/SecondaryEmailConfirmModal.tsx @@ -1,6 +1,7 @@ +import { Dialog } from "@calcom/features/components/controlled-dialog"; import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; interface SecondaryEmailConfirmModalProps { email: string; diff --git a/apps/web/components/settings/SecondaryEmailModal.tsx b/apps/web/components/settings/SecondaryEmailModal.tsx index 8f9ac3354a..84eea3cb6a 100644 --- a/apps/web/components/settings/SecondaryEmailModal.tsx +++ b/apps/web/components/settings/SecondaryEmailModal.tsx @@ -3,10 +3,11 @@ import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { emailSchema } from "@calcom/lib/emailSchema"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Form, TextField, InputError } from "@calcom/ui/components/form"; interface SecondaryEmailModalProps { diff --git a/apps/web/components/settings/TravelScheduleModal.tsx b/apps/web/components/settings/TravelScheduleModal.tsx index ee54655f5e..e4ae2c6fc2 100644 --- a/apps/web/components/settings/TravelScheduleModal.tsx +++ b/apps/web/components/settings/TravelScheduleModal.tsx @@ -3,10 +3,11 @@ import type { UseFormSetValue } from "react-hook-form"; import dayjs from "@calcom/dayjs"; import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { TimezoneSelect } from "@calcom/features/components/timezone-select"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Label, SettingsToggle, DateRangePicker, DatePicker } from "@calcom/ui/components/form"; import type { FormValues } from "~/settings/my-account/general-view"; diff --git a/apps/web/components/ui/ModalContainer.tsx b/apps/web/components/ui/ModalContainer.tsx index 6110003f8d..1e8f2a495b 100644 --- a/apps/web/components/ui/ModalContainer.tsx +++ b/apps/web/components/ui/ModalContainer.tsx @@ -2,7 +2,8 @@ import classNames from "classnames"; import type { PropsWithChildren } from "react"; import React from "react"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; export default function ModalContainer( props: PropsWithChildren<{ diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx index f9c86cef67..b2d19c0977 100644 --- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx +++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx @@ -7,6 +7,7 @@ import type { RefCallback } from "react"; import { useEffect, useState } from "react"; import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { fetchUsername } from "@calcom/lib/fetchUsername"; import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata"; @@ -16,7 +17,7 @@ import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/types/server/routers/_app"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Label, Input } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx index c897cb4bcf..9e66d3d673 100644 --- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx +++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx @@ -5,13 +5,14 @@ import { useSession } from "next-auth/react"; import type { RefCallback } from "react"; import { useEffect, useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { fetchUsername } from "@calcom/lib/fetchUsername"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/types/server/routers/_app"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { TextField } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { Tooltip } from "@calcom/ui/components/tooltip"; diff --git a/apps/web/modules/connect-and-join/connect-and-join-view.tsx b/apps/web/modules/connect-and-join/connect-and-join-view.tsx index ca52c97e4f..634a1b9743 100644 --- a/apps/web/modules/connect-and-join/connect-and-join-view.tsx +++ b/apps/web/modules/connect-and-join/connect-and-join-view.tsx @@ -6,13 +6,13 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc"; import { Alert } from "@calcom/ui/components/alert"; import { Button } from "@calcom/ui/components/button"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import { TRPCClientError } from "@trpc/client"; diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx index 5d5008c02f..0403536eee 100644 --- a/apps/web/modules/event-types/views/event-types-listing-view.tsx +++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx @@ -7,6 +7,7 @@ import type { FC } from "react"; import { memo, useEffect, useState } from "react"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; import { CreateButton } from "@calcom/features/ee/teams/components/createButton/CreateButton"; import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed"; @@ -39,7 +40,7 @@ import { UserAvatarGroup } from "@calcom/ui/components/avatar"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; -import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Dropdown, DropdownItem, diff --git a/apps/web/modules/settings/developer/api-keys-view.tsx b/apps/web/modules/settings/developer/api-keys-view.tsx index c41fefcbbd..1be96cc998 100644 --- a/apps/web/modules/settings/developer/api-keys-view.tsx +++ b/apps/web/modules/settings/developer/api-keys-view.tsx @@ -4,13 +4,14 @@ import { useEffect, useState } from "react"; import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem"; import LicenseRequired from "@calcom/ee/common/components/LicenseRequired"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm"; import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton"; diff --git a/apps/web/modules/settings/my-account/profile-view.tsx b/apps/web/modules/settings/my-account/profile-view.tsx index 919f17a8c9..671e50cfa6 100644 --- a/apps/web/modules/settings/my-account/profile-view.tsx +++ b/apps/web/modules/settings/my-account/profile-view.tsx @@ -10,6 +10,7 @@ import { Controller, useFieldArray, useForm } from "react-hook-form"; import { z } from "zod"; import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import SectionBottomActions from "@calcom/features/settings/SectionBottomActions"; import { DisplayInfo } from "@calcom/features/users/components/UserTable/EditSheet/DisplayInfo"; import { APP_NAME, FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants"; @@ -25,13 +26,7 @@ import type { AppRouter } from "@calcom/trpc/types/server/routers/_app"; import { Alert } from "@calcom/ui/components/alert"; import { UserAvatar } from "@calcom/ui/components/avatar"; import { Button } from "@calcom/ui/components/button"; -import { - Dialog, - DialogContent, - DialogFooter, - DialogTrigger, - DialogClose, -} from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogTrigger, DialogClose } from "@calcom/ui/components/dialog"; import { Editor } from "@calcom/ui/components/editor"; import { Form } from "@calcom/ui/components/form"; import { PasswordField } from "@calcom/ui/components/form"; diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx index c354214f51..0cbfbcc2d0 100644 --- a/apps/web/modules/signup-view.tsx +++ b/apps/web/modules/signup-view.tsx @@ -17,6 +17,7 @@ import getStripe from "@calcom/app-store/stripepayment/lib/client"; import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils"; import { getOrgUsernameFromEmail } from "@calcom/features/auth/signup/utils/getOrgUsernameFromEmail"; import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { APP_NAME, URL_PROTOCOL_REGEX, @@ -44,7 +45,6 @@ import { Button } from "@calcom/ui/components/button"; import { PasswordField, CheckboxField, TextField, Form } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import type { getServerSideProps } from "@lib/signup/getServerSideProps"; diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx index b68f28ed42..10ef77e56d 100644 --- a/packages/app-store/giphy/components/SearchDialog.tsx +++ b/packages/app-store/giphy/components/SearchDialog.tsx @@ -1,13 +1,14 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Icon } from "@calcom/ui/components/icon"; -import { Input } from "@calcom/ui/components/form"; +import classNames from "@calcom/ui/classNames"; import { Alert } from "@calcom/ui/components/alert"; import { Button } from "@calcom/ui/components/button"; -import classNames from "@calcom/ui/classNames"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { Input } from "@calcom/ui/components/form"; +import { Icon } from "@calcom/ui/components/icon"; import type { IconName } from "@calcom/ui/components/icon"; interface ISearchDialog { diff --git a/packages/app-store/make/pages/setup/index.tsx b/packages/app-store/make/pages/setup/index.tsx index 73665f094b..7829ac25c0 100644 --- a/packages/app-store/make/pages/setup/index.tsx +++ b/packages/app-store/make/pages/setup/index.tsx @@ -4,13 +4,13 @@ import { useState } from "react"; import { Toaster } from "sonner"; import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import type { getServerSideProps } from "./_getServerSideProps"; diff --git a/packages/app-store/office365video/components/AccountDialog.tsx b/packages/app-store/office365video/components/AccountDialog.tsx index a633d36ae0..2ea94ebfe2 100644 --- a/packages/app-store/office365video/components/AccountDialog.tsx +++ b/packages/app-store/office365video/components/AccountDialog.tsx @@ -1,9 +1,10 @@ +import type { DialogProps as ControlledDialogProps } from "@calcom/features/components/controlled-dialog"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { Button } from "@calcom/ui/components/button"; -import type { DialogProps } from "@calcom/ui/components/dialog"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; export function AccountDialog( - props: DialogProps & { + props: ControlledDialogProps & { handleSubmit: () => void; } ) { diff --git a/packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx b/packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx index 0ecab21e9d..75d028664c 100644 --- a/packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx +++ b/packages/app-store/routing-forms/__tests__/TestFormDialog.test.tsx @@ -9,6 +9,18 @@ vi.mock("../lib/processRoute", () => ({ findMatchingRoute: vi.fn(), })); +vi.mock("next/navigation", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useRouter: vi.fn(() => ({ + push: vi.fn(() => { + return; + }), + })), + }; +}); + function mockMatchingRoute(route: any) { (findMatchingRoute as Mock).mockReturnValue({ ...route, diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx index 70980fa2ab..fa3de6cea9 100644 --- a/packages/app-store/routing-forms/components/FormActions.tsx +++ b/packages/app-store/routing-forms/components/FormActions.tsx @@ -3,6 +3,7 @@ import { createContext, forwardRef, useContext, useState } from "react"; import { useForm } from "react-hook-form"; import { v4 as uuidv4 } from "uuid"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; import { RoutingFormEmbedButton, RoutingFormEmbedDialog } from "@calcom/features/embed/RoutingFormEmbed"; import { EmbedDialogProvider } from "@calcom/features/embed/lib/hooks/useEmbedDialogCtx"; @@ -14,7 +15,6 @@ import classNames from "@calcom/ui/classNames"; import type { ButtonProps } from "@calcom/ui/components/button"; import { Button } from "@calcom/ui/components/button"; import { - Dialog, DialogContent, DialogFooter, DialogClose, diff --git a/packages/app-store/routing-forms/components/InfoLostWarningDialog.tsx b/packages/app-store/routing-forms/components/InfoLostWarningDialog.tsx index cbef49a56d..bf94a3dfbb 100644 --- a/packages/app-store/routing-forms/components/InfoLostWarningDialog.tsx +++ b/packages/app-store/routing-forms/components/InfoLostWarningDialog.tsx @@ -1,9 +1,10 @@ import { useRouter } from "next/navigation"; import type { Dispatch, SetStateAction } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; interface InfoLostWarningDialog { isOpenInfoLostDialog: boolean; diff --git a/packages/app-store/routing-forms/components/SingleForm.tsx b/packages/app-store/routing-forms/components/SingleForm.tsx index 1771dc370d..167a608e8f 100644 --- a/packages/app-store/routing-forms/components/SingleForm.tsx +++ b/packages/app-store/routing-forms/components/SingleForm.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import type { UseFormReturn } from "react-hook-form"; import { Controller, useFormContext } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; import AddMembersWithSwitch from "@calcom/features/eventtypes/components/AddMembersWithSwitch"; import { ShellMain } from "@calcom/features/shell/Shell"; @@ -18,7 +19,7 @@ import { Alert } from "@calcom/ui/components/alert"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; -import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; import { VerticalDivider } from "@calcom/ui/components/divider"; import { DropdownMenuSeparator } from "@calcom/ui/components/dropdown"; import { Form } from "@calcom/ui/components/form"; diff --git a/packages/app-store/wipemycalother/components/confirmDialog.tsx b/packages/app-store/wipemycalother/components/confirmDialog.tsx index cb982f785a..d29ad6634b 100644 --- a/packages/app-store/wipemycalother/components/confirmDialog.tsx +++ b/packages/app-store/wipemycalother/components/confirmDialog.tsx @@ -3,13 +3,14 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import dayjs from "@calcom/dayjs"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import logger from "@calcom/lib/logger"; import { trpc } from "@calcom/trpc/react"; +import { Button } from "@calcom/ui/components/button"; +import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; interface IConfirmDialogWipe { isOpenDialog: boolean; diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx index 73330e4263..3b63951188 100644 --- a/packages/app-store/zapier/pages/setup/index.tsx +++ b/packages/app-store/zapier/pages/setup/index.tsx @@ -3,13 +3,13 @@ import { useState } from "react"; import { Toaster } from "sonner"; import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; export interface IZapierSetupProps { inviteLink?: string; diff --git a/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx b/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx index e1bb6c196a..a42ec8c191 100644 --- a/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx +++ b/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx @@ -1,7 +1,7 @@ import type { TFunction } from "i18next"; -import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants"; import ServerTrans from "@calcom/lib/components/ServerTrans"; +import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants"; import { BaseEmailHtml, CallToAction } from "../components"; diff --git a/packages/emails/src/templates/BrokenIntegrationEmail.tsx b/packages/emails/src/templates/BrokenIntegrationEmail.tsx index 6f81b79a08..e47cbe5961 100644 --- a/packages/emails/src/templates/BrokenIntegrationEmail.tsx +++ b/packages/emails/src/templates/BrokenIntegrationEmail.tsx @@ -1,9 +1,9 @@ import type { TFunction } from "i18next"; import { AppStoreLocationType } from "@calcom/app-store/locations"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { WEBAPP_URL } from "@calcom/lib/constants"; import type { CalendarEvent, Person } from "@calcom/types/Calendar"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import { BaseScheduledEmail } from "./BaseScheduledEmail"; diff --git a/packages/emails/src/templates/OrganizationCreationEmail.tsx b/packages/emails/src/templates/OrganizationCreationEmail.tsx index 84a8d1549a..150b13ca8f 100644 --- a/packages/emails/src/templates/OrganizationCreationEmail.tsx +++ b/packages/emails/src/templates/OrganizationCreationEmail.tsx @@ -1,5 +1,5 @@ -import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants"; import ServerTrans from "@calcom/lib/components/ServerTrans"; +import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants"; import type { OrganizationCreation } from "../../templates/organization-creation-email"; import { V2BaseEmailHtml } from "../components"; diff --git a/packages/emails/src/templates/SlugReplacementEmail.tsx b/packages/emails/src/templates/SlugReplacementEmail.tsx index 25ca7877d8..a63c908ec8 100644 --- a/packages/emails/src/templates/SlugReplacementEmail.tsx +++ b/packages/emails/src/templates/SlugReplacementEmail.tsx @@ -1,7 +1,7 @@ import type { TFunction } from "i18next"; -import { WEBAPP_URL } from "@calcom/lib/constants"; import ServerTrans from "@calcom/lib/components/ServerTrans"; +import { WEBAPP_URL } from "@calcom/lib/constants"; import { BaseEmailHtml, CallToAction } from "../components"; diff --git a/packages/emails/src/templates/TeamInviteEmail.tsx b/packages/emails/src/templates/TeamInviteEmail.tsx index 4efe172fa7..4cc62dd272 100644 --- a/packages/emails/src/templates/TeamInviteEmail.tsx +++ b/packages/emails/src/templates/TeamInviteEmail.tsx @@ -1,7 +1,7 @@ import type { TFunction } from "i18next"; -import { APP_NAME, WEBAPP_URL, IS_PRODUCTION } from "@calcom/lib/constants"; import ServerTrans from "@calcom/lib/components/ServerTrans"; +import { APP_NAME, WEBAPP_URL, IS_PRODUCTION } from "@calcom/lib/constants"; import { getSubject, getTypeOfInvite } from "../../templates/team-invite-email"; import { V2BaseEmailHtml, CallToAction } from "../components"; diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx index 8d4ab75f12..0d25fe6813 100644 --- a/packages/features/apps/AdminAppsList.tsx +++ b/packages/features/apps/AdminAppsList.tsx @@ -11,6 +11,7 @@ import { z } from "zod"; import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation"; import { appKeysSchemas } from "@calcom/app-store/apps.keys-schemas.generated"; import AppListCard from "@calcom/features/apps/components/AppListCard"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { AppCategories } from "@calcom/prisma/enums"; @@ -19,7 +20,6 @@ import { trpc } from "@calcom/trpc/react"; import cs from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; import { - Dialog, DialogContent, DialogFooter, DialogClose, diff --git a/packages/features/apps/components/AppSetDefaultLinkDialog.tsx b/packages/features/apps/components/AppSetDefaultLinkDialog.tsx index 191742d003..e4f501c742 100644 --- a/packages/features/apps/components/AppSetDefaultLinkDialog.tsx +++ b/packages/features/apps/components/AppSetDefaultLinkDialog.tsx @@ -5,9 +5,10 @@ import { z } from "zod"; import type { EventLocationType } from "@calcom/app-store/locations"; import { getEventLocationType } from "@calcom/app-store/locations"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { TextField } from "@calcom/ui/components/form"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/packages/features/apps/components/DisconnectIntegrationModal.tsx b/packages/features/apps/components/DisconnectIntegrationModal.tsx index 90188ceb1c..137f6f8f13 100644 --- a/packages/features/apps/components/DisconnectIntegrationModal.tsx +++ b/packages/features/apps/components/DisconnectIntegrationModal.tsx @@ -1,7 +1,8 @@ import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { App } from "@calcom/types/App"; -import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; export type RemoveAppParams = { credentialId: number; diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx index 105c0906f4..29280b0a0a 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx +++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx @@ -5,6 +5,7 @@ import type { FieldError } from "react-hook-form"; import { useIsPlatformBookerEmbed } from "@calcom/atoms/hooks/useIsPlatformBookerEmbed"; import type { BookerEvent } from "@calcom/features/bookings/types"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { WEBSITE_PRIVACY_POLICY_URL, WEBSITE_TERMS_URL } from "@calcom/lib/constants"; import { getPaymentAppData } from "@calcom/lib/getPaymentAppData"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -12,7 +13,6 @@ import { Alert } from "@calcom/ui/components/alert"; import { Button } from "@calcom/ui/components/button"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; import { Form } from "@calcom/ui/components/form"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useBookerStore } from "../../store"; import type { UseBookingFormReturnType } from "../hooks/useBookingForm"; diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx index 99df679bb5..dce506f198 100644 --- a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx +++ b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx @@ -3,9 +3,10 @@ import React from "react"; import { useEventTypeById } from "@calcom/atoms/hooks/event-types/private/useEventTypeById"; import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Badge } from "@calcom/ui/components/badge"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; import { getDurationFormatted } from "../../../components/event-meta/Duration"; import { useBookerStore } from "../../store"; diff --git a/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx b/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx index 83b09a0239..6f51ea7b0f 100644 --- a/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx +++ b/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx @@ -1,11 +1,11 @@ import { useRouter } from "next/navigation"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import type { IOutOfOfficeData } from "@calcom/lib/getUserAvailability"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; interface IOutOfOfficeInSlotsProps { date: string; diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx index 330a57ce8f..310ca7f845 100644 --- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx +++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx @@ -1,7 +1,8 @@ +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; interface IOverlayCalendarContinueModalProps { open?: boolean; diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx index 576d47fd96..1689aaba91 100644 --- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx +++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx @@ -2,10 +2,11 @@ import Link from "next/link"; import { Fragment } from "react"; import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import classNames from "@calcom/ui/classNames"; import { Alert } from "@calcom/ui/components/alert"; -import { Dialog, DialogContent, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogClose } from "@calcom/ui/components/dialog"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; import { Switch } from "@calcom/ui/components/form"; import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/components/list"; diff --git a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx index 16b8929a66..971d213a39 100644 --- a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx +++ b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx @@ -2,9 +2,10 @@ import { useRouter } from "next/navigation"; import { useState, useEffect } from "react"; import dayjs from "@calcom/dayjs"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; const handleBeforeUnload = (event: BeforeUnloadEvent) => { const message = "/o"; diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx index 62d6c4d1bc..11bdc3e611 100644 --- a/packages/features/bookings/components/VerifyCodeDialog.tsx +++ b/packages/features/bookings/components/VerifyCodeDialog.tsx @@ -2,10 +2,11 @@ import type { Dispatch, SetStateAction } from "react"; import { useCallback, useEffect, useState } from "react"; import useDigitInput from "react-digit-input"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Input } from "@calcom/ui/components/form"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; +import { Input } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; diff --git a/packages/features/components/controlled-dialog/index.tsx b/packages/features/components/controlled-dialog/index.tsx new file mode 100644 index 0000000000..6e9549d147 --- /dev/null +++ b/packages/features/components/controlled-dialog/index.tsx @@ -0,0 +1,72 @@ +import * as DialogPrimitive from "@radix-ui/react-dialog"; +import { usePathname, useRouter } from "next/navigation"; +import { useState } from "react"; + +import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform"; +import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; +import { Dialog as BaseDialog } from "@calcom/ui/components/dialog"; + +export type DialogProps = React.ComponentProps<(typeof DialogPrimitive)["Root"]> & { + name?: string; + clearQueryParamsOnClose?: string[]; +}; + +const enum DIALOG_STATE { + // Dialog is there in the DOM but not visible. + CLOSED = "CLOSED", + // State from the time b/w the Dialog is dismissed and the time the "dialog" query param is removed from the URL. + CLOSING = "CLOSING", + // Dialog is visible. + OPEN = "OPEN", +} + +export function Dialog(props: DialogProps) { + const isPlatform = useIsPlatform(); + return !isPlatform ? : ; +} + +function ControlledDialog(props: DialogProps) { + const router = useRouter(); + const pathname = usePathname(); + const searchParams = useCompatSearchParams(); + const newSearchParams = new URLSearchParams(searchParams.toString()); + const { children, name, ...dialogProps } = props; + + // only used if name is set + const [dialogState, setDialogState] = useState(dialogProps.open ? DIALOG_STATE.OPEN : DIALOG_STATE.CLOSED); + const shouldOpenDialog = newSearchParams.get("dialog") === name; + if (name) { + const clearQueryParamsOnClose = ["dialog", ...(props.clearQueryParamsOnClose || [])]; + dialogProps.onOpenChange = (open) => { + if (props.onOpenChange) { + props.onOpenChange(open); + } + + // toggles "dialog" query param + if (open) { + newSearchParams.set("dialog", name); + } else { + clearQueryParamsOnClose.forEach((queryParam) => { + newSearchParams.delete(queryParam); + }); + router.push(`${pathname}?${newSearchParams.toString()}`); + } + setDialogState(open ? DIALOG_STATE.OPEN : DIALOG_STATE.CLOSING); + }; + + if (dialogState === DIALOG_STATE.CLOSED && shouldOpenDialog) { + setDialogState(DIALOG_STATE.OPEN); + } + + if (dialogState === DIALOG_STATE.CLOSING && !shouldOpenDialog) { + setDialogState(DIALOG_STATE.CLOSED); + } + + // allow overriding + if (!("open" in dialogProps)) { + dialogProps.open = dialogState === DIALOG_STATE.OPEN ? true : false; + } + } + + return {children}; +} diff --git a/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx b/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx index a7cbd42799..1fd090c11c 100644 --- a/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx +++ b/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx @@ -1,16 +1,11 @@ import { useState } from "react"; import { SkeletonLoader } from "@calcom/features/apps/components/SkeletonLoader"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { - Dialog, - DialogContent, - DialogFooter, - DialogTrigger, - DialogClose, -} from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogTrigger, DialogClose } from "@calcom/ui/components/dialog"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; import { Label } from "@calcom/ui/components/form"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/packages/features/ee/dsync/components/CreateDirectory.tsx b/packages/features/ee/dsync/components/CreateDirectory.tsx index ccc6d2aaf1..8a85fad203 100644 --- a/packages/features/ee/dsync/components/CreateDirectory.tsx +++ b/packages/features/ee/dsync/components/CreateDirectory.tsx @@ -1,10 +1,11 @@ import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { Form, TextField, SelectField } from "@calcom/ui/components/form"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/packages/features/ee/dsync/components/CreateTeamDialog.tsx b/packages/features/ee/dsync/components/CreateTeamDialog.tsx index 70879d5390..8c1bfbdcc8 100644 --- a/packages/features/ee/dsync/components/CreateTeamDialog.tsx +++ b/packages/features/ee/dsync/components/CreateTeamDialog.tsx @@ -1,7 +1,8 @@ +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { CreateANewTeamForm } from "@calcom/features/ee/teams/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; interface CreateTeamDialogProps { open: boolean; diff --git a/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx b/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx index 918fde50b1..c6123fe681 100644 --- a/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx +++ b/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx @@ -1,12 +1,13 @@ import { useState } from "react"; import { useForm } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc"; import { trpc } from "@calcom/trpc"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { SettingsToggle } from "@calcom/ui/components/form"; import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio"; diff --git a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx index 3bbba17835..3127b9c90a 100644 --- a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx +++ b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx @@ -1,10 +1,11 @@ +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc/react"; import { Avatar } from "@calcom/ui/components/avatar"; import { Button } from "@calcom/ui/components/button"; import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Dropdown, DropdownItem, diff --git a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx index 489d6af7ca..d13d059f1f 100644 --- a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx +++ b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx @@ -2,10 +2,11 @@ import { useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Badge } from "@calcom/ui/components/badge"; -import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { DropdownActions, Table } from "@calcom/ui/components/table"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx b/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx index 2bad2f9558..92bb6ab3d4 100644 --- a/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx +++ b/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx @@ -6,11 +6,12 @@ import type { SubmitHandler } from "react-hook-form"; import { useForm, useFormContext } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { serviceAccountKeySchema } from "@calcom/prisma/zod-utils"; import { trpc, type RouterOutputs } from "@calcom/trpc"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { TextAreaField } from "@calcom/ui/components/form"; import { TextField } from "@calcom/ui/components/form"; diff --git a/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx b/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx index 8399d351c6..7d9aa70add 100644 --- a/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx +++ b/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx @@ -4,9 +4,10 @@ import type { UseFormReturn, FieldArrayWithId } from "react-hook-form"; import { Controller, useForm, useFieldArray } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { SettingsToggle, SelectField, Input, InputField, Form, Label } from "@calcom/ui/components/form"; const attributeFormSchema = z.object({ diff --git a/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx b/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx index ab3111381e..e0db01c860 100644 --- a/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx +++ b/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx @@ -1,9 +1,10 @@ import type { Dispatch, SetStateAction } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; -import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; type AttributeItemProps = RouterOutputs["viewer"]["attributes"]["list"][number]; diff --git a/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx b/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx index 41da58b3dd..a0529877c8 100644 --- a/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx +++ b/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx @@ -14,6 +14,18 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({ })), })); +vi.mock("next/navigation", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useRouter: vi.fn(() => ({ + push: vi.fn(() => { + return; + }), + })), + }; +}); + type InitialOption = { id?: string; value: string; diff --git a/packages/features/ee/organizations/pages/settings/delegationCredential.tsx b/packages/features/ee/organizations/pages/settings/delegationCredential.tsx index b69a9528d3..7c6b09beb4 100644 --- a/packages/features/ee/organizations/pages/settings/delegationCredential.tsx +++ b/packages/features/ee/organizations/pages/settings/delegationCredential.tsx @@ -3,6 +3,7 @@ import { useState } from "react"; import { useForm, Controller, useFormContext } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { ServiceAccountKey } from "@calcom/lib/server/serviceAccountKey"; import { serviceAccountKeySchema } from "@calcom/prisma/zod-utils"; @@ -10,7 +11,7 @@ import { trpc } from "@calcom/trpc/react"; import { Badge } from "@calcom/ui/components/badge"; import { InfoBadge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; import { Form } from "@calcom/ui/components/form"; import { TextAreaField } from "@calcom/ui/components/form"; diff --git a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx index b4b5c4f1c1..6a778f0f57 100644 --- a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx +++ b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx @@ -9,6 +9,7 @@ import { useEffect, useLayoutEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { IS_TEAM_BILLING_ENABLED_CLIENT, WEBAPP_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { trackFormbricksAction } from "@calcom/lib/formbricks-client"; @@ -22,7 +23,7 @@ import turndown from "@calcom/lib/turndownService"; import { trpc } from "@calcom/trpc/react"; import { Avatar } from "@calcom/ui/components/avatar"; import { Button, LinkIconButton } from "@calcom/ui/components/button"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Editor } from "@calcom/ui/components/editor"; import { Form } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; diff --git a/packages/features/ee/sso/components/ConnectionInfo.tsx b/packages/features/ee/sso/components/ConnectionInfo.tsx index c736771792..5daca906e4 100644 --- a/packages/features/ee/sso/components/ConnectionInfo.tsx +++ b/packages/features/ee/sso/components/ConnectionInfo.tsx @@ -1,9 +1,10 @@ import type { SSOConnection } from "@calcom/ee/sso/lib/saml"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Label } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; diff --git a/packages/features/ee/sso/components/OIDCConnection.tsx b/packages/features/ee/sso/components/OIDCConnection.tsx index f670b3ab47..87855acd67 100644 --- a/packages/features/ee/sso/components/OIDCConnection.tsx +++ b/packages/features/ee/sso/components/OIDCConnection.tsx @@ -2,13 +2,14 @@ import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import type { SSOConnection } from "@calcom/ee/sso/lib/saml"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; +import { Button } from "@calcom/ui/components/button"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { TextField } from "@calcom/ui/components/form"; import { showToast } from "@calcom/ui/components/toast"; -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; type FormValues = { clientId: string; diff --git a/packages/features/ee/sso/components/SAMLConnection.tsx b/packages/features/ee/sso/components/SAMLConnection.tsx index 54e17af01b..d55522a64e 100644 --- a/packages/features/ee/sso/components/SAMLConnection.tsx +++ b/packages/features/ee/sso/components/SAMLConnection.tsx @@ -2,12 +2,13 @@ import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import type { SSOConnection } from "@calcom/ee/sso/lib/saml"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; +import { Button } from "@calcom/ui/components/button"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { TextArea } from "@calcom/ui/components/form"; -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; interface FormValues { diff --git a/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx b/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx index 9db7eb315e..a3ed1b16f7 100644 --- a/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx +++ b/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx @@ -1,8 +1,9 @@ +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { DataTableSelectionBar } from "@calcom/features/data-table"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import type { RouterOutputs } from "@calcom/trpc/react"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; export type User = RouterOutputs["viewer"]["teams"]["listMembers"]["members"][number]; diff --git a/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx b/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx index 9765b1d7cf..dacf0261cf 100644 --- a/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx +++ b/packages/features/ee/teams/components/InviteLinkSettingsModal.tsx @@ -1,13 +1,14 @@ import { useMemo } from "react"; import { Controller, useForm } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc"; +import { Button } from "@calcom/ui/components/button"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; import { Select } from "@calcom/ui/components/form"; -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; type InvitationLinkSettingsModalProps = { diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx index 70ea0c8d47..10e8eb4b5c 100644 --- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx +++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx @@ -1,12 +1,13 @@ import type { SyntheticEvent } from "react"; import { useMemo, useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { MembershipRole } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; -import { Select } from "@calcom/ui/components/form"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { Select } from "@calcom/ui/components/form"; type MembershipRoleOption = { label: string; diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx index c5a5e53f7d..cfd1d36bf5 100644 --- a/packages/features/ee/teams/components/MemberInvitationModal.tsx +++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx @@ -4,6 +4,8 @@ import { useMemo, useRef, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import TeamInviteFromOrg from "@calcom/ee/organizations/components/TeamInviteFromOrg"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { IS_TEAM_BILLING_ENABLED_CLIENT, MAX_NB_INVITES } from "@calcom/lib/constants"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -14,7 +16,7 @@ import { trpc } from "@calcom/trpc"; import { isEmail } from "@calcom/trpc/server/routers/viewer/teams/util"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; import { TextAreaField } from "@calcom/ui/components/form"; import { Form } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; @@ -23,7 +25,6 @@ import { Select } from "@calcom/ui/components/form"; import { ToggleGroup } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import type { PendingMember } from "../lib/types"; import { GoogleWorkspaceInviteButton } from "./GoogleWorkspaceInviteButton"; diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx index fea4072e52..5f9b4db50e 100644 --- a/packages/features/ee/teams/components/MemberList.tsx +++ b/packages/features/ee/teams/components/MemberList.tsx @@ -16,6 +16,7 @@ import { useQueryState, parseAsBoolean } from "nuqs"; import { useMemo, useReducer, useRef, useState } from "react"; import type { Dispatch, SetStateAction } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { DataTable, DataTableProvider, @@ -38,7 +39,6 @@ import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; import { - Dialog, DialogContent, DialogFooter, DialogClose, diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx index ccef60ed73..3f07441e12 100644 --- a/packages/features/ee/teams/components/TeamListItem.tsx +++ b/packages/features/ee/teams/components/TeamListItem.tsx @@ -4,6 +4,7 @@ import { useState } from "react"; import InviteLinkSettingsModal from "@calcom/ee/teams/components/InviteLinkSettingsModal"; import { MemberInvitationModalWithoutMembers } from "@calcom/ee/teams/components/MemberInvitationModal"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { getTeamUrlSync } from "@calcom/lib/getBookerUrl/client"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; @@ -17,7 +18,7 @@ import { Avatar } from "@calcom/ui/components/avatar"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; import { ButtonGroup } from "@calcom/ui/components/buttonGroup"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Dropdown, DropdownItem, diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx index 9a068a12c0..9777b4fce1 100644 --- a/packages/features/ee/teams/pages/team-profile-view.tsx +++ b/packages/features/ee/teams/pages/team-profile-view.tsx @@ -9,6 +9,7 @@ import { useEffect, useLayoutEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import SectionBottomActions from "@calcom/features/settings/SectionBottomActions"; import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; @@ -26,7 +27,7 @@ import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import { Avatar } from "@calcom/ui/components/avatar"; import { Button, LinkIconButton } from "@calcom/ui/components/button"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Editor } from "@calcom/ui/components/editor"; import { Form } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; diff --git a/packages/features/ee/users/components/UsersTable.tsx b/packages/features/ee/users/components/UsersTable.tsx index 83e909513f..630f957e3e 100644 --- a/packages/features/ee/users/components/UsersTable.tsx +++ b/packages/features/ee/users/components/UsersTable.tsx @@ -3,6 +3,7 @@ import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -11,7 +12,6 @@ import { Avatar } from "@calcom/ui/components/avatar"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; import { - Dialog, DialogContent, DialogFooter, DialogClose, diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx index 159c3eef97..27a7c9f55e 100644 --- a/packages/features/ee/video/ViewRecordingsDialog.tsx +++ b/packages/features/ee/video/ViewRecordingsDialog.tsx @@ -2,6 +2,7 @@ import { useRouter } from "next/navigation"; import { Suspense, useEffect, useState } from "react"; import dayjs from "@calcom/dayjs"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -10,7 +11,7 @@ import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { PartialReference } from "@calcom/types/EventManager"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; import RecordingListSkeleton from "./components/RecordingListSkeleton"; diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx index 623194c676..d037dfd61a 100644 --- a/packages/features/ee/workflows/components/AddActionDialog.tsx +++ b/packages/features/ee/workflows/components/AddActionDialog.tsx @@ -5,15 +5,16 @@ import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import PhoneInput from "@calcom/features/components/phone-input"; import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { WorkflowActions } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; +import { Button } from "@calcom/ui/components/button"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { EmailField } from "@calcom/ui/components/form"; import { Select } from "@calcom/ui/components/form"; -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { CheckboxField } from "@calcom/ui/components/form"; import { Form } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; diff --git a/packages/features/ee/workflows/components/DeleteDialog.tsx b/packages/features/ee/workflows/components/DeleteDialog.tsx index 3cab91bbb4..b7343e2f51 100644 --- a/packages/features/ee/workflows/components/DeleteDialog.tsx +++ b/packages/features/ee/workflows/components/DeleteDialog.tsx @@ -1,9 +1,10 @@ import type { Dispatch, SetStateAction } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HttpError } from "@calcom/lib/http-error"; import { trpc } from "@calcom/trpc/react"; -import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; interface IDeleteDialog { diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx index 10efb93e85..4dfc89370d 100644 --- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx +++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx @@ -6,6 +6,7 @@ import type { UseFormReturn } from "react-hook-form"; import { Controller } from "react-hook-form"; import "react-phone-number-input/style.css"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import PhoneInput from "@calcom/features/components/phone-input"; import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants"; import { useHasActiveTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan"; @@ -18,7 +19,7 @@ import { trpc } from "@calcom/trpc/react"; import classNames from "@calcom/ui/classNames"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Dropdown, DropdownItem, diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx index 9e143e82ca..4c5a67f7cd 100644 --- a/packages/features/embed/Embed.tsx +++ b/packages/features/embed/Embed.tsx @@ -14,6 +14,7 @@ import { AvailableTimes, AvailableTimesHeader } from "@calcom/features/bookings" import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store"; import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event"; import DatePicker from "@calcom/features/calendars/DatePicker"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { TimezoneSelect } from "@calcom/features/components/timezone-select"; import type { Slot } from "@calcom/features/schedules"; import { useNonEmptyScheduleDays } from "@calcom/features/schedules"; @@ -26,7 +27,7 @@ import { BookerLayouts } from "@calcom/prisma/zod-utils"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Select, ColorPicker } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; import { TextField } from "@calcom/ui/components/form"; diff --git a/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx b/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx index 2af2ed8cc2..bbd462b566 100644 --- a/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx +++ b/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx @@ -2,9 +2,10 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { CheckboxField } from "@calcom/ui/components/form"; diff --git a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx index 926711f1ad..5ce8324536 100644 --- a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx +++ b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx @@ -3,6 +3,7 @@ import { isValidPhoneNumber } from "libphonenumber-js"; import { useRouter } from "next/navigation"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; import { TeamEventTypeForm } from "@calcom/features/ee/teams/components/TeamEventTypeForm"; import { useCreateEventType } from "@calcom/lib/hooks/useCreateEventType"; @@ -10,9 +11,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery"; import { MembershipRole, SchedulingType } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; -import { showToast } from "@calcom/ui/components/toast"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { showToast } from "@calcom/ui/components/toast"; import CreateEventTypeForm from "./CreateEventTypeForm"; diff --git a/packages/features/eventtypes/components/DuplicateDialog.tsx b/packages/features/eventtypes/components/DuplicateDialog.tsx index 5bb2c8462e..34e2534ead 100644 --- a/packages/features/eventtypes/components/DuplicateDialog.tsx +++ b/packages/features/eventtypes/components/DuplicateDialog.tsx @@ -4,6 +4,7 @@ import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -15,7 +16,7 @@ import turndown from "@calcom/lib/turndownService"; import { EventTypeDuplicateInput } from "@calcom/prisma/zod/custom/eventtype"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Editor } from "@calcom/ui/components/editor"; import { Form } from "@calcom/ui/components/form"; import { TextField } from "@calcom/ui/components/form"; diff --git a/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx b/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx index e2a3eabdd2..08bc5f61a4 100644 --- a/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx +++ b/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import { useState, useEffect, useRef, useMemo } from "react"; import type { Host, TeamMember } from "@calcom/features/eventtypes/lib/types"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { downloadAsCsv } from "@calcom/lib/csvUtils"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { AttributesQueryValue } from "@calcom/lib/raqb/types"; @@ -23,7 +24,6 @@ import { SheetTitle, } from "@calcom/ui/components/sheet"; import { showToast } from "@calcom/ui/components/toast"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; type TeamMemberItemProps = { member: Omit & { weight?: number }; diff --git a/packages/features/eventtypes/components/HostEditDialogs.tsx b/packages/features/eventtypes/components/HostEditDialogs.tsx index abd0e957cc..cb2b5c45c0 100644 --- a/packages/features/eventtypes/components/HostEditDialogs.tsx +++ b/packages/features/eventtypes/components/HostEditDialogs.tsx @@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import { useFormContext } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import type { FormValues, Host, @@ -11,7 +12,7 @@ import type { import { useLocale } from "@calcom/lib/hooks/useLocale"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { Label } from "@calcom/ui/components/form"; import { Select } from "@calcom/ui/components/form"; import { TextField } from "@calcom/ui/components/form"; diff --git a/packages/features/eventtypes/components/Locations.tsx b/packages/features/eventtypes/components/Locations.tsx index 5ed0d056da..9ef2e796ed 100644 --- a/packages/features/eventtypes/components/Locations.tsx +++ b/packages/features/eventtypes/components/Locations.tsx @@ -20,6 +20,7 @@ import type { SingleValueLocationOption, } from "@calcom/features/form/components/LocationSelect"; import LocationSelect from "@calcom/features/form/components/LocationSelect"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import classNames from "@calcom/ui/classNames"; @@ -27,7 +28,6 @@ import { Button } from "@calcom/ui/components/button"; import { Input } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; export type TEventTypeLocation = Pick; export type TLocationOptions = Pick["locationOptions"]; diff --git a/packages/features/eventtypes/components/dialogs/AssignmentWarningDialog.tsx b/packages/features/eventtypes/components/dialogs/AssignmentWarningDialog.tsx index 2dde259e8e..7687ba8dce 100644 --- a/packages/features/eventtypes/components/dialogs/AssignmentWarningDialog.tsx +++ b/packages/features/eventtypes/components/dialogs/AssignmentWarningDialog.tsx @@ -2,9 +2,10 @@ import { useRouter } from "next/navigation"; import type { Dispatch, SetStateAction } from "react"; import type { MutableRefObject } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; interface AssignmentWarningDialogProps { isOpenAssignmentWarnDialog: boolean; diff --git a/packages/features/eventtypes/components/dialogs/DeleteDialog.tsx b/packages/features/eventtypes/components/dialogs/DeleteDialog.tsx index f1c3dedc0e..7c8311c5ac 100644 --- a/packages/features/eventtypes/components/dialogs/DeleteDialog.tsx +++ b/packages/features/eventtypes/components/dialogs/DeleteDialog.tsx @@ -1,6 +1,7 @@ +import { Dialog } from "@calcom/features/components/controlled-dialog"; +import type { DialogProps as ControlledDialogProps } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import type { DialogProps } from "@calcom/ui/components/dialog"; -import { ConfirmationDialogContent, Dialog } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; export function DeleteDialog({ isManagedEvent, @@ -14,7 +15,7 @@ export function DeleteDialog({ eventTypeId: number; onDelete: (id: number) => void; isDeleting?: boolean; -} & Pick) { +} & Pick) { const { t } = useLocale(); return ( diff --git a/packages/features/eventtypes/components/dialogs/ManagedEventDialog.tsx b/packages/features/eventtypes/components/dialogs/ManagedEventDialog.tsx index bd52553c7f..0093759393 100644 --- a/packages/features/eventtypes/components/dialogs/ManagedEventDialog.tsx +++ b/packages/features/eventtypes/components/dialogs/ManagedEventDialog.tsx @@ -1,7 +1,7 @@ import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { ConfirmationDialogContent, Dialog } from "@calcom/ui/components/dialog"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; interface ManagedEventDialogProps { slugExistsChildrenDialogOpen: ChildrenEventType[]; diff --git a/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx b/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx index b5f81e5567..1557f01406 100644 --- a/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx +++ b/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx @@ -3,14 +3,15 @@ import type { SubmitHandler } from "react-hook-form"; import { FormProvider } from "react-hook-form"; import { useForm, useFormContext } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import type { InputClassNames } from "@calcom/features/eventtypes/lib/types"; import type { EventNameObjectType } from "@calcom/lib/event"; import { getEventName, validateCustomEventName } from "@calcom/lib/event"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { TextField } from "@calcom/ui/components/form"; -import { Button } from "@calcom/ui/components/button"; import classNames from "@calcom/ui/classNames"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { Button } from "@calcom/ui/components/button"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { TextField } from "@calcom/ui/components/form"; interface FormValues { customEventName: string; diff --git a/packages/features/eventtypes/components/tabs/advanced/DisableAllEmailsSetting.tsx b/packages/features/eventtypes/components/tabs/advanced/DisableAllEmailsSetting.tsx index 2b5af951cd..59be5da447 100644 --- a/packages/features/eventtypes/components/tabs/advanced/DisableAllEmailsSetting.tsx +++ b/packages/features/eventtypes/components/tabs/advanced/DisableAllEmailsSetting.tsx @@ -1,13 +1,14 @@ import type { TFunction } from "i18next"; import { useState } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import type { InputClassNames, SettingsToggleClassNames } from "@calcom/features/eventtypes/lib/types"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import { InputField } from "@calcom/ui/components/form"; import { SettingsToggle } from "@calcom/ui/components/form"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; export type EmailNotificationToggleCustomClassNames = SettingsToggleClassNames & { confirmationDialog?: { diff --git a/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx b/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx index 7a539e033b..5615a6d083 100644 --- a/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx +++ b/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx @@ -8,6 +8,7 @@ import type z from "zod"; import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager"; import type { EventTypeSetup, SettingsToggleClassNames } from "@calcom/features/eventtypes/lib/types"; import type { FormValues } from "@calcom/features/eventtypes/lib/types"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils"; import classNames from "@calcom/ui/classNames"; @@ -16,7 +17,6 @@ import { CheckboxField } from "@calcom/ui/components/form"; import { Input } from "@calcom/ui/components/form"; import { SettingsToggle } from "@calcom/ui/components/form"; import { RadioField } from "@calcom/ui/components/radio"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; export type RequiresConfirmationCustomClassNames = SettingsToggleClassNames & { radioGroupContainer?: string; diff --git a/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx b/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx index 190fcaf52f..d5613630eb 100644 --- a/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx +++ b/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx @@ -6,13 +6,13 @@ import type { EventTypeAppCardComponentProps } from "@calcom/app-store/types"; import type { EventTypeAppsList } from "@calcom/app-store/utils"; import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager"; import type { FormValues, EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import useAppsData from "@calcom/lib/hooks/useAppsData"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Alert } from "@calcom/ui/components/alert"; import { Button } from "@calcom/ui/components/button"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; export type EventType = Pick["eventType"] & EventTypeAppCardComponentProps["eventType"]; diff --git a/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx b/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx index 6eead0bf0f..c5acb735dc 100644 --- a/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx +++ b/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx @@ -21,6 +21,7 @@ import type { SelectClassNames, SettingsToggleClassNames, } from "@calcom/features/eventtypes/lib/types"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { SchedulingType } from "@calcom/prisma/enums"; import classNames from "@calcom/ui/classNames"; @@ -28,7 +29,6 @@ import { Label } from "@calcom/ui/components/form"; import { Select } from "@calcom/ui/components/form"; import { SettingsToggle } from "@calcom/ui/components/form"; import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import { EditWeightsForAllTeamMembers } from "../../EditWeightsForAllTeamMembers"; import WeightDescription from "../../WeightDescription"; diff --git a/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx b/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx index 38e001f844..ada73af6e4 100644 --- a/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx +++ b/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx @@ -5,6 +5,7 @@ import { useFormContext, Controller } from "react-hook-form"; import { components } from "react-select"; import type { OptionProps, SingleValueProps } from "react-select"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager"; import type { EventTypeSetup, FormValues, AvailabilityOption } from "@calcom/features/eventtypes/lib/types"; @@ -15,11 +16,11 @@ import { subscriberUrlReserved } from "@calcom/features/webhooks/lib/subscriberU import { useLocale } from "@calcom/lib/hooks/useLocale"; import { WebhookTriggerEvents } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; +import classNames from "@calcom/ui/classNames"; import { Alert } from "@calcom/ui/components/alert"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; -import classNames from "@calcom/ui/classNames"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; import { Label } from "@calcom/ui/components/form"; import { TextField } from "@calcom/ui/components/form"; diff --git a/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx b/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx index af9ceb034d..2f78b5340d 100644 --- a/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx +++ b/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx @@ -3,21 +3,22 @@ import Link from "next/link"; import { useState } from "react"; import { useFormContext } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager"; import type { FormValues, EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types"; import { WebhookForm } from "@calcom/features/webhooks/components"; import EventTypeWebhookListItem from "@calcom/features/webhooks/components/EventTypeWebhookListItem"; import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm"; import { subscriberUrlReserved } from "@calcom/features/webhooks/lib/subscriberUrlReserved"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Alert } from "@calcom/ui/components/alert"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { DialogContent } from "@calcom/ui/components/dialog"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; import { showToast } from "@calcom/ui/components/toast"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; export const EventWebhooksTab = ({ eventType }: Pick) => { const { t } = useLocale(); diff --git a/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx b/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx index 865ed77085..6b091f08bf 100644 --- a/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx +++ b/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx @@ -9,6 +9,7 @@ import SkeletonLoader from "@calcom/features/ee/workflows/components/SkeletonLoa import type { WorkflowType } from "@calcom/features/ee/workflows/components/WorkflowListPage"; import { getActionIcon } from "@calcom/features/ee/workflows/lib/getActionIcon"; import type { FormValues } from "@calcom/features/eventtypes/lib/types"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HttpError } from "@calcom/lib/http-error"; import { WorkflowActions } from "@calcom/prisma/enums"; @@ -22,7 +23,6 @@ import { Switch } from "@calcom/ui/components/form"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; type PartialWorkflowType = Pick; diff --git a/packages/features/form-builder/FormBuilder.test.tsx b/packages/features/form-builder/FormBuilder.test.tsx index 0a7aeb5319..7c1375a8fa 100644 --- a/packages/features/form-builder/FormBuilder.test.tsx +++ b/packages/features/form-builder/FormBuilder.test.tsx @@ -20,6 +20,18 @@ vi.mock("@formkit/auto-animate/react", () => ({ useAutoAnimate: () => [null], })); +vi.mock("next/navigation", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useRouter: vi.fn(() => ({ + push: vi.fn(() => { + return; + }), + })), + }; +}); + const renderComponent = ({ formBuilderProps: formBuilderProps, formDefaultValues: formDefaultValues, diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx index 9cef0f4fc9..f3940f3fe8 100644 --- a/packages/features/form-builder/FormBuilder.tsx +++ b/packages/features/form-builder/FormBuilder.tsx @@ -5,6 +5,7 @@ import { Controller, useFieldArray, useForm, useFormContext } from "react-hook-f import type { z } from "zod"; import { ZodError } from "zod"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { md } from "@calcom/lib/markdownIt"; import { markdownToSafeHTMLClient } from "@calcom/lib/markdownToSafeHTMLClient"; @@ -12,7 +13,7 @@ import turndown from "@calcom/lib/turndownService"; import classNames from "@calcom/ui/classNames"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; import { Editor } from "@calcom/ui/components/editor"; import { Switch, diff --git a/packages/features/schedules/components/DateOverrideInputDialog.tsx b/packages/features/schedules/components/DateOverrideInputDialog.tsx index 2e06f270a6..cf97a506eb 100644 --- a/packages/features/schedules/components/DateOverrideInputDialog.tsx +++ b/packages/features/schedules/components/DateOverrideInputDialog.tsx @@ -3,13 +3,13 @@ import { useForm } from "react-hook-form"; import type { Dayjs } from "@calcom/dayjs"; import dayjs from "@calcom/dayjs"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { yyyymmdd } from "@calcom/lib/date-fns"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { WorkingHours } from "@calcom/types/schedule"; import cs from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; import { - Dialog, DialogContent, DialogHeader, DialogTrigger, diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx index b779ac5bee..36c474b914 100644 --- a/packages/features/schedules/components/NewScheduleButton.tsx +++ b/packages/features/schedules/components/NewScheduleButton.tsx @@ -1,13 +1,14 @@ import { useRouter } from "next/navigation"; import { useForm } from "react-hook-form"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HttpError } from "@calcom/lib/http-error"; import { trpc } from "@calcom/trpc/react"; +import { Button } from "@calcom/ui/components/button"; +import { DialogContent, DialogFooter, DialogTrigger, DialogClose } from "@calcom/ui/components/dialog"; import { Form } from "@calcom/ui/components/form"; import { InputField } from "@calcom/ui/components/form"; -import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogTrigger, DialogClose } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; export function NewScheduleButton({ diff --git a/packages/ui/components/schedules/date-override-list.test.tsx b/packages/features/schedules/components/date-override-list.test.tsx similarity index 92% rename from packages/ui/components/schedules/date-override-list.test.tsx rename to packages/features/schedules/components/date-override-list.test.tsx index 9ea7fb5bf9..c36d5ba689 100644 --- a/packages/ui/components/schedules/date-override-list.test.tsx +++ b/packages/features/schedules/components/date-override-list.test.tsx @@ -3,11 +3,24 @@ import { render, renderHook, screen } from "@testing-library/react"; // eslint-disable-next-line no-restricted-imports import { noop } from "lodash"; import { useFieldArray, useForm, FormProvider } from "react-hook-form"; +import { vi } from "vitest"; import dayjs from "@calcom/dayjs"; import DateOverrideList from "@calcom/features/schedules/components/DateOverrideList"; import type { TimeRange } from "@calcom/types/schedule"; +vi.mock("next/navigation", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useRouter: vi.fn(() => ({ + push: vi.fn(() => { + return; + }), + })), + }; +}); + type FormValues = { dateOverrides: { ranges: TimeRange[] }[]; }; diff --git a/packages/features/settings/BookerLayoutSelector.tsx b/packages/features/settings/BookerLayoutSelector.tsx index 8b4d07265c..af01891798 100644 --- a/packages/features/settings/BookerLayoutSelector.tsx +++ b/packages/features/settings/BookerLayoutSelector.tsx @@ -3,6 +3,7 @@ import Link from "next/link"; import { useCallback, useState } from "react"; import { Controller, useFormContext } from "react-hook-form"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils"; import { bookerLayoutOptions, type BookerLayoutSettings } from "@calcom/prisma/zod-utils"; @@ -11,7 +12,6 @@ import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; import { Label } from "@calcom/ui/components/form"; import { CheckboxField } from "@calcom/ui/components/form"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import SectionBottomActions from "./SectionBottomActions"; diff --git a/packages/features/settings/TimezoneChangeDialog.tsx b/packages/features/settings/TimezoneChangeDialog.tsx index 0997213722..6d8dd07d50 100644 --- a/packages/features/settings/TimezoneChangeDialog.tsx +++ b/packages/features/settings/TimezoneChangeDialog.tsx @@ -5,11 +5,12 @@ import { useSession } from "next-auth/react"; import { useEffect, useState } from "react"; import dayjs from "@calcom/dayjs"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants"; import { trpc } from "@calcom/trpc/react"; +import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; -import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog"; function hideDialogFor(hideFor: [number, DayjsManipulateType], toastContent: string) { document.cookie = `calcom-timezone-dialog=1;max-age=${ diff --git a/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx b/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx index bbcf86326d..3b78615fb8 100644 --- a/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx +++ b/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import dayjs from "@calcom/dayjs"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan"; @@ -12,7 +13,7 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import classNames from "@calcom/ui/classNames"; import { UpgradeTeamsBadge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog"; import { DateRangePicker, TextArea, Input } from "@calcom/ui/components/form"; import { Label } from "@calcom/ui/components/form"; import { Select } from "@calcom/ui/components/form"; diff --git a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx index a7fe7627fa..f49c5d7274 100644 --- a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx +++ b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx @@ -20,6 +20,7 @@ import { ZDateRangeFilterValue, DataTableFilters, } from "@calcom/features/data-table"; +import ServerTrans from "@calcom/lib/components/ServerTrans"; import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -31,7 +32,6 @@ import { Icon } from "@calcom/ui/components/icon"; import { SkeletonText } from "@calcom/ui/components/skeleton"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; -import ServerTrans from "@calcom/lib/components/ServerTrans"; import CreateNewOutOfOfficeEntryButton from "./CreateNewOutOfOfficeEntryButton"; import { CreateOrEditOutOfOfficeEntryModal } from "./CreateOrEditOutOfOfficeModal"; diff --git a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx index c531aa2c67..257ff36de6 100644 --- a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx +++ b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx @@ -1,7 +1,8 @@ +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { DataTableSelectionBar } from "@calcom/features/data-table"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; import type { UserTableUser } from "../types"; diff --git a/packages/features/users/components/UserTable/DeleteMemberModal.tsx b/packages/features/users/components/UserTable/DeleteMemberModal.tsx index da9baacb41..ca8a6efe65 100644 --- a/packages/features/users/components/UserTable/DeleteMemberModal.tsx +++ b/packages/features/users/components/UserTable/DeleteMemberModal.tsx @@ -1,9 +1,10 @@ import { useSession } from "next-auth/react"; import type { Dispatch } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc"; -import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { showToast } from "@calcom/ui/components/toast"; import type { UserTableAction, UserTableState } from "./types"; diff --git a/packages/features/users/components/UserTable/ImpersonationMemberModal.tsx b/packages/features/users/components/UserTable/ImpersonationMemberModal.tsx index 9999af731b..ac190e3bea 100644 --- a/packages/features/users/components/UserTable/ImpersonationMemberModal.tsx +++ b/packages/features/users/components/UserTable/ImpersonationMemberModal.tsx @@ -1,9 +1,10 @@ import { signIn, useSession } from "next-auth/react"; import type { Dispatch } from "react"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; +import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog"; import type { UserTableAction, UserTableState } from "./types"; diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx index ea0ac96c78..6d25e5b4a5 100644 --- a/packages/platform/atoms/availability/AvailabilitySettings.tsx +++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx @@ -5,6 +5,7 @@ import { useMemo, useState } from "react"; import { Controller, useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form"; import dayjs from "@calcom/dayjs"; +import { Dialog } from "@calcom/features/components/controlled-dialog"; import { TimezoneSelect as WebTimezoneSelect } from "@calcom/features/components/timezone-select"; import type { BulkUpdatParams, @@ -23,7 +24,7 @@ import type { RouterOutputs } from "@calcom/trpc/react"; import type { TimeRange, WorkingHours } from "@calcom/types/schedule"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; -import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; +import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { VerticalDivider } from "@calcom/ui/components/divider"; import { EditableHeading } from "@calcom/ui/components/editable-heading"; import { Form } from "@calcom/ui/components/form"; diff --git a/packages/platform/atoms/package.json b/packages/platform/atoms/package.json index d496c31dcd..9eab7fec6e 100644 --- a/packages/platform/atoms/package.json +++ b/packages/platform/atoms/package.json @@ -67,7 +67,7 @@ }, "types": "./dist/index.d.ts", "dependencies": { - "@radix-ui/react-dialog": "^1.0.4", + "@radix-ui/react-dialog-atoms": "npm:@radix-ui/react-dialog@^1.0.4", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-toast": "^1.1.5", diff --git a/packages/platform/atoms/src/components/ui/dialog.tsx b/packages/platform/atoms/src/components/ui/dialog.tsx index ee029027f2..a5fb90f16c 100644 --- a/packages/platform/atoms/src/components/ui/dialog.tsx +++ b/packages/platform/atoms/src/components/ui/dialog.tsx @@ -1,23 +1,38 @@ -import * as DialogPrimitive from "@radix-ui/react-dialog"; +/* +In this file we can edit all the Primitives from radix-ui/react-dialog +when building atoms package this will automatically replace the DialogPrimitives used in components from all over the monorepo +ensuring that we don't have issues with atoms. +*/ +import * as DialogPrimitives from "@radix-ui/react-dialog-atoms"; import * as React from "react"; import { Icon } from "@calcom/ui/components/icon"; import { cn } from "../../lib/utils"; -const Dialog = DialogPrimitive.Root; +const Dialog = DialogPrimitives.Root; -const DialogTrigger = DialogPrimitive.Trigger; +const DialogTrigger = DialogPrimitives.Trigger; -const DialogPortal = DialogPrimitive.Portal; +const DialogPortal = ({ children }: { children: ReactElement | ReactElement[] }) => <>{children}; -const DialogClose = DialogPrimitive.Close; +const DialogClose = DialogPrimitives.Close; + +const Portal = ({ children }: { children: ReactElement | ReactElement[] }) => <>{children}; +const Root = DialogPrimitives.Root; +const Trigger = DialogPrimitives.Trigger; +const Overlay = DialogPrimitives.Overlay; +const Content = DialogPrimitives.Content; +const Title = DialogPrimitives.Title; +const Description = DialogPrimitives.Description; + +const Close = DialogPrimitives.Close; const DialogOverlay = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - )); -DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; +DialogOverlay.displayName = DialogPrimitives.Overlay.displayName; const DialogContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( <>
- {children} - + Close - - + +
)); -DialogContent.displayName = DialogPrimitive.Content.displayName; +DialogContent.displayName = DialogPrimitives.Content.displayName; const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
@@ -69,28 +84,28 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - )); -DialogTitle.displayName = DialogPrimitive.Title.displayName; +DialogTitle.displayName = DialogPrimitives.Title.displayName; const DialogDescription = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - )); -DialogDescription.displayName = DialogPrimitive.Description.displayName; +DialogDescription.displayName = DialogPrimitives.Description.displayName; export { Dialog, @@ -103,4 +118,12 @@ export { DialogFooter, DialogTitle, DialogDescription, + Portal, + Root, + Overlay, + Trigger, + Close, + Content, + Description, + Title, }; diff --git a/packages/platform/atoms/vite.config.ts b/packages/platform/atoms/vite.config.ts index 0341467663..9d8aead66c 100644 --- a/packages/platform/atoms/vite.config.ts +++ b/packages/platform/atoms/vite.config.ts @@ -54,6 +54,7 @@ export default defineConfig(({ mode }) => { "@": path.resolve(__dirname, "./src"), "@calcom/lib/markdownToSafeHTML": path.resolve(__dirname, "./lib/markdownToSafeHTML"), "@radix-ui/react-tooltip": path.resolve(__dirname, "./src/components/ui/tooltip.tsx"), + "@radix-ui/react-dialog": path.resolve(__dirname, "./src/components/ui/dialog.tsx"), ".prisma/client": path.resolve(__dirname, "../../prisma-client"), "@prisma/client": path.resolve(__dirname, "../../prisma-client"), "@calcom/prisma": path.resolve(__dirname, "../../prisma"), diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx index baa2b5b2ad..d455b66df7 100644 --- a/packages/ui/components/dialog/Dialog.tsx +++ b/packages/ui/components/dialog/Dialog.tsx @@ -2,16 +2,12 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"; import { cva, type VariantProps } from "class-variance-authority"; -import { usePathname, useRouter } from "next/navigation"; -import type { ForwardRefExoticComponent, ReactElement, ReactNode } from "react"; -import React, { useMemo, useState } from "react"; +import type { ForwardRefExoticComponent, ReactNode } from "react"; +import React from "react"; -import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform"; -import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import classNames from "@calcom/ui/classNames"; -import * as PlatformDialogPrimitives from "../../../platform/atoms/src/components/ui/dialog"; import type { ButtonProps } from "../button"; import { Button } from "../button"; import type { IconName } from "../icon"; @@ -34,68 +30,10 @@ const dialogClasses = cva( } ); -export type DialogProps = React.ComponentProps<(typeof DialogPrimitive)["Root"]> & { - name?: string; - clearQueryParamsOnClose?: string[]; -}; - -const enum DIALOG_STATE { - // Dialog is there in the DOM but not visible. - CLOSED = "CLOSED", - // State from the time b/w the Dialog is dismissed and the time the "dialog" query param is removed from the URL. - CLOSING = "CLOSING", - // Dialog is visible. - OPEN = "OPEN", -} +export type DialogProps = React.ComponentProps<(typeof DialogPrimitive)["Root"]>; export function Dialog(props: DialogProps) { - const isPlatform = useIsPlatform(); - return !isPlatform ? : ; -} - -function WebDialog(props: DialogProps) { - const router = useRouter(); - const pathname = usePathname(); - const searchParams = useCompatSearchParams(); - const newSearchParams = new URLSearchParams(searchParams.toString()); - const { children, name, ...dialogProps } = props; - - // only used if name is set - const [dialogState, setDialogState] = useState(dialogProps.open ? DIALOG_STATE.OPEN : DIALOG_STATE.CLOSED); - const shouldOpenDialog = newSearchParams.get("dialog") === name; - if (name) { - const clearQueryParamsOnClose = ["dialog", ...(props.clearQueryParamsOnClose || [])]; - dialogProps.onOpenChange = (open) => { - if (props.onOpenChange) { - props.onOpenChange(open); - } - - // toggles "dialog" query param - if (open) { - newSearchParams.set("dialog", name); - } else { - clearQueryParamsOnClose.forEach((queryParam) => { - newSearchParams.delete(queryParam); - }); - router.push(`${pathname}?${newSearchParams.toString()}`); - } - setDialogState(open ? DIALOG_STATE.OPEN : DIALOG_STATE.CLOSING); - }; - - if (dialogState === DIALOG_STATE.CLOSED && shouldOpenDialog) { - setDialogState(DIALOG_STATE.OPEN); - } - - if (dialogState === DIALOG_STATE.CLOSING && !shouldOpenDialog) { - setDialogState(DIALOG_STATE.CLOSED); - } - - // allow overriding - if (!("open" in dialogProps)) { - dialogProps.open = dialogState === DIALOG_STATE.OPEN ? true : false; - } - } - + const { children, ...dialogProps } = props; return {children}; } @@ -129,26 +67,14 @@ export const DialogContent = React.forwardRef { - const isPlatform = useIsPlatform(); - const [Portal, Overlay, Content] = useMemo( - () => - isPlatform - ? [ - ({ children }: { children: ReactElement | ReactElement[] }) => <>{children}, - PlatformDialogPrimitives.DialogOverlay, - PlatformDialogPrimitives.DialogContent, - ] - : [DialogPrimitive.Portal, DialogPrimitive.Overlay, DialogPrimitive.Content], - [isPlatform] - ); return ( - + {forceOverlayWhenNoModal ? (
) : ( - + )} - { if (preventCloseOnOutsideClick) { @@ -184,8 +110,8 @@ export const DialogContent = React.forwardRef )} {!type && children} - - + + ); } ); @@ -242,25 +168,11 @@ DialogContent.displayName = "DialogContent"; export const DialogTrigger: ForwardRefExoticComponent< DialogPrimitive.DialogTriggerProps & React.RefAttributes > = React.forwardRef((props, ref) => { - const isPlatform = useIsPlatform(); - return !isPlatform ? ( - - ) : ( - - ); + return ; }); DialogTrigger.displayName = "DialogTrigger"; -type DialogCloseProps = { - "data-testid"?: string; - dialogCloseProps?: React.ComponentProps<(typeof DialogPrimitive)["Close"]>; - children?: ReactNode; - onClick?: (e: React.MouseEvent) => void; - disabled?: boolean; - color?: ButtonProps["color"]; -} & React.ComponentProps; - export function DialogClose( props: { "data-testid"?: string; @@ -272,16 +184,10 @@ export function DialogClose( } & React.ComponentProps ) { const { t } = useLocale(); - const isPlatform = useIsPlatform(); - const Close = useMemo( - () => (isPlatform ? PlatformDialogPrimitives.DialogClose : DialogPrimitive.Close), - [isPlatform] - ); - const { className, ...buttonProps } = props; return ( - + - + ); } - -DialogClose.displayName = "WebDialogClose"; diff --git a/packages/ui/components/dialog/dialog.test.tsx b/packages/ui/components/dialog/dialog.test.tsx index e5962481f2..c16ffbe9e6 100644 --- a/packages/ui/components/dialog/dialog.test.tsx +++ b/packages/ui/components/dialog/dialog.test.tsx @@ -41,7 +41,7 @@ describe("Dialog", () => { preventCloseOnOutsideClick?: boolean; enableOverflow?: boolean; }) => ( - +