use toast instea modal for info messages (#932)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

components/Modal.tsx

@@ -1,85 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { CheckIcon, InformationCircleIcon } from "@heroicons/react/outline";
-import { Fragment, ReactNode } from "react";
-
-import classNames from "@lib/classNames";
-
-/**
- * @deprecated please refactor to use <Dialog> only
- */
-export default function Modal(props: {
-  heading: ReactNode;
-  description: ReactNode;
-  handleClose: () => void;
-  open: boolean;
-  variant?: "success" | "warning";
-}) {
-  const { variant = "success" } = props;
-  return (
-    <Transition.Root show={props.open} as={Fragment}>
-      <Dialog
-        as="div"
-        static
-        className="fixed z-50 inset-0 overflow-y-auto"
-        open={props.open}
-        onClose={props.handleClose}>
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0">
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-            <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
-              <div>
-                <div
-                  className={classNames(
-                    "mx-auto flex items-center justify-center h-12 w-12 rounded-full",
-                    variant === "success" && "bg-green-100",
-                    variant === "warning" && "bg-yellow-100"
-                  )}>
-                  {variant === "success" && (
-                    <CheckIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
-                  )}
-                  {variant === "warning" && (
-                    <InformationCircleIcon className={"h-6 w-6 text-yellow-400"} aria-hidden="true" />
-                  )}
-                </div>
-                <div className="mt-3 text-center sm:mt-5">
-                  <Dialog.Title as="h3" className="font-cal text-lg leading-6 font-medium text-gray-900">
-                    {props.heading}
-                  </Dialog.Title>
-                  <div className="mt-2">
-                    <p className="text-sm text-gray-500">{props.description}</p>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-5 sm:mt-6">
-                <button type="button" className="btn-wide btn-primary" onClick={() => props.handleClose()}>
-                  Dismiss
-                </button>
-              </div>
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}

components/security/ChangePasswordSection.tsx

@@ -2,13 +2,11 @@ import React, { SyntheticEvent, useState } from "react";
 
 import { ErrorCode } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
-
-import Modal from "@components/Modal";
+import showToast from "@lib/notification";
 
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
-  const [successModalOpen, setSuccessModalOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { t } = useLocale();
@@ -18,10 +16,6 @@ const ChangePasswordSection = () => {
     [ErrorCode.NewPasswordMatchesOld]: t("new_password_matches_old_password"),
   };
 
-  const closeSuccessModal = () => {
-    setSuccessModalOpen(false);
-  };
-
   async function changePasswordHandler(e: SyntheticEvent) {
     e.preventDefault();
 
@@ -44,7 +38,7 @@ const ChangePasswordSection = () => {
       if (response.status === 200) {
         setOldPassword("");
         setNewPassword("");
-        setSuccessModalOpen(true);
+        showToast(t("password_has_been_changed"), "success");
         return;
       }
 
@@ -112,12 +106,6 @@ const ChangePasswordSection = () => {
           <hr className="mt-4" />
         </div>
       </form>
-      <Modal
-        heading={t("password_updated_successfully")}
-        description={t("password_has_been_changed")}
-        open={successModalOpen}
-        handleClose={closeSuccessModal}
-      />
     </>
   );
 };

components/team/EditTeam.tsx

@@ -3,11 +3,11 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { useLocale } from "@lib/hooks/useLocale";
 import { Member } from "@lib/member";
+import showToast from "@lib/notification";
 import { Team } from "@lib/team";
 
 import { Dialog, DialogTrigger } from "@components/Dialog";
 import ImageUploader from "@components/ImageUploader";
-import Modal from "@components/Modal";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import MemberInvitationModal from "@components/team/MemberInvitationModal";
 import Avatar from "@components/ui/Avatar";
@@ -26,7 +26,6 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
   const hideBrandingRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
   const logoRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
   const [hasErrors, setHasErrors] = useState(false);
-  const [successModalOpen, setSuccessModalOpen] = useState(false);
   const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false);
   const [inviteModalTeam, setInviteModalTeam] = useState<Team | null | undefined>();
   const [errorMessage, setErrorMessage] = useState("");
@@ -96,7 +95,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
     })
       .then(handleError)
       .then(() => {
-        setSuccessModalOpen(true);
+        showToast(t("your_team_updated_successfully"), "success");
         setHasErrors(false); // dismiss any open errors
       })
       .catch((err) => {
@@ -110,10 +109,6 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
     setShowMemberInvitationModal(false);
   };
 
-  const closeSuccessModal = () => {
-    setSuccessModalOpen(false);
-  };
-
   const handleLogoChange = (newLogo: string) => {
     logoRef.current.value = newLogo;
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement?.prototype, "value").set;
@@ -288,12 +283,6 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
             </div>
           </div>
         </form>
-        <Modal
-          heading={t("team_updated_successfully")}
-          description={t("your_team_updated_successfully")}
-          open={successModalOpen}
-          handleClose={closeSuccessModal}
-        />
         {showMemberInvitationModal && (
           <MemberInvitationModal team={inviteModalTeam} onExit={onMemberInvitationModalExit} />
         )}

pages/event-types/[type].tsx

@@ -50,7 +50,6 @@ import { AdvancedOptions, EventTypeInput } from "@lib/types/event-type";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { Dialog, DialogContent, DialogTrigger } from "@components/Dialog";
-import Modal from "@components/Modal";
 import Shell from "@components/Shell";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
@@ -87,7 +86,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
 
   const { t } = useLocale();
   const router = useRouter();
-  const [successModalOpen, setSuccessModalOpen] = useState(false);
 
   const updateMutation = useMutation(updateEventType, {
     onSuccess: async ({ eventType }) => {
@@ -210,10 +208,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
     setShowLocationModal(false);
   };
 
-  const closeSuccessModal = () => {
-    setSuccessModalOpen(false);
-  };
-
   const updateLocations = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const newLocation = e.currentTarget.location.value;
@@ -954,12 +948,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   <Button type="submit">{t("update")}</Button>
                 </div>
               </form>
-              <Modal
-                heading={t("event_type_updated_successfully")}
-                description={t("event_type_updated_successfully_description")}
-                open={successModalOpen}
-                handleClose={closeSuccessModal}
-              />
             </div>
           </div>
           <div className="w-full px-2 mt-8 ml-2 sm:w-3/12 sm:mt-0 min-w-32">