Merge pull request #330 from calisio/confirm-modal

feat: adds confirm bulk import modal, fixes modal types
UnlockedLabs · Aug 3, 2024 · b70114b · b70114b
2 parents ff3a976 + 79e2fca
commit b70114b
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 45 deletions.
diff --git a/frontend/src/Components/CategoryItem.tsx b/frontend/src/Components/CategoryItem.tsx
@@ -10,7 +10,7 @@ import {
   PlusIcon,
   ChevronUpIcon,
 } from "@heroicons/react/24/solid";
-import Modal from "./Modal";
+import Modal, { ModalType } from "./Modal";
 import DeleteForm from "./forms/DeleteForm";
 
 export default function CategoryItem({
@@ -99,8 +99,8 @@ export default function CategoryItem({
       </ul>
       {/* Modals */}
       <Modal
-        type="Delete"
-        item="Link"
+        type={ModalType.Confirm}
+        item="Delete Link"
         form={
           <DeleteForm
             item="Link"
@@ -111,7 +111,7 @@ export default function CategoryItem({
         ref={deleteLinkModal}
       />
       <Modal
-        type="Add"
+        type={ModalType.Add}
         item="Link"
         form={
           <AddLinkForm

diff --git a/frontend/src/Components/Modal.tsx b/frontend/src/Components/Modal.tsx
@@ -9,15 +9,16 @@ export interface ModalProps {
 export enum ModalType {
   Edit = "Edit",
   Add = "Add",
-  Delete = "Delete",
-  View = "View",
+  Show = "Show",
   Associate = "Associate",
+  Confirm = "Confirm",
+  Register = "Register",
   Blank = "",
 }
 
 const Modal = forwardRef<HTMLDialogElement, ModalProps>(function Modal(
   { type, item, form },
-  ref,
+  ref
 ) {
   return (
     <dialog ref={ref} className="modal">

diff --git a/frontend/src/Components/forms/ConfirmImportAllUsersForm.tsx b/frontend/src/Components/forms/ConfirmImportAllUsersForm.tsx
@@ -0,0 +1,29 @@
+import { CloseX } from "../inputs/CloseX";
+
+export default function ConfirmImportAllUsersForm({
+  onCancel,
+  onSuccess,
+}: {
+  onCancel: Function;
+  onSuccess: Function;
+}) {
+  return (
+    <div>
+      <CloseX close={() => onCancel()} />
+      <p className="py-4">Are you sure you would like to import all users?</p>
+      <form method="dialog" className="flex flex-row justify-between">
+        <button className="btn" onClick={() => onCancel()}>
+          Cancel
+        </button>
+        <button
+          className="btn bg-teal-3"
+          onClick={() => {
+            onSuccess();
+          }}
+        >
+          Confirm
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/src/Pages/ProviderPlatformManagement.tsx b/frontend/src/Pages/ProviderPlatformManagement.tsx
@@ -2,7 +2,7 @@ import PageNav from "@/Components/PageNav";
 import ProviderCard from "@/Components/ProviderCard";
 import AddProviderForm from "@/Components/forms/AddProviderForm";
 import EditProviderForm from "@/Components/forms/EditProviderForm";
-import Modal from "@/Components/Modal";
+import Modal, { ModalType } from "@/Components/Modal";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { OidcClient, ProviderPlatform, ServerResponse } from "@/common";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
@@ -24,7 +24,7 @@ export default function ProviderPlatformManagement() {
   const addProviderModal = useRef<null | HTMLDialogElement>(null);
   const editProviderModal = useRef<null | HTMLDialogElement>(null);
   const [editProvider, setEditProvider] = useState<ProviderPlatform | null>(
-    null,
+    null
   );
   const openOidcClientModal = useRef<null | HTMLDialogElement>(null);
   const openOidcRegistrationModal = useRef<null | HTMLDialogElement>(null);
@@ -44,7 +44,7 @@ export default function ProviderPlatformManagement() {
   // TO DO: SORT THIS IN THE BACKEND AND RETURN SORTED
   providers?.data.sort(function (
     providerA: ProviderPlatform,
-    providerB: ProviderPlatform,
+    providerB: ProviderPlatform
   ) {
     if (providerA.state === "enabled" && providerB.state !== "enabled") {
       return -1;
@@ -96,7 +96,7 @@ export default function ProviderPlatformManagement() {
 
   const onRegisterOidcClientClose = (
     response: ServerResponse<OidcClient>,
-    state: ToastState,
+    state: ToastState
   ) => {
     openOidcClientModal.current?.close();
     setEditProvider(null);
@@ -187,7 +187,7 @@ export default function ProviderPlatformManagement() {
       </div>
       {/* Modals */}
       <Modal
-        type="Add"
+        type={ModalType.Add}
         item="Provider"
         form={
           <AddProviderForm
@@ -199,7 +199,7 @@ export default function ProviderPlatformManagement() {
         ref={addProviderModal}
       />
       <Modal
-        type="Edit"
+        type={ModalType.Edit}
         item="Provider"
         form={
           editProvider ? (
@@ -216,7 +216,7 @@ export default function ProviderPlatformManagement() {
         ref={editProviderModal}
       />
       <Modal
-        type="Register"
+        type={ModalType.Register}
         item="Provider"
         form={
           editProvider ? (
@@ -232,7 +232,7 @@ export default function ProviderPlatformManagement() {
         ref={openOidcClientModal}
       />
       <Modal
-        type="Register"
+        type={ModalType.Register}
         item="OIDC Client"
         form={
           oidcClient ? (

diff --git a/frontend/src/Pages/ProviderUserManagement.tsx b/frontend/src/Pages/ProviderUserManagement.tsx
@@ -18,11 +18,13 @@ import PrimaryButton from "@/Components/PrimaryButton";
 import ShowImportedUsers from "@/Components/forms/ShowImportedUsers";
 import Pagination from "@/Components/Pagination";
 import useSWR from "swr";
+import ConfirmImportAllUsersForm from "@/Components/forms/ConfirmImportAllUsersForm";
 
 export default function ProviderUserManagement() {
   const auth = useAuth();
   const mapUserModal = useRef<null | HTMLDialogElement>(null);
   const importedUsersModal = useRef<null | HTMLDialogElement>(null);
+  const importAllUsersModal = useRef<null | HTMLDialogElement>(null);
   const [displayToast, setDisplayToast] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [usersToImport, setUsersToImport] = useState<ProviderUser[]>([]);
@@ -48,15 +50,15 @@ export default function ProviderUserManagement() {
     reset: () => {},
   });
   const { data, mutate } = useSWR<PaginatedResponse<ProviderUser>>(
-    `/api/actions/provider-platforms/${providerId}/get-users?page=${currentPage}&per_page=${perPage}&clear_cache=${cache}`,
+    `/api/actions/provider-platforms/${providerId}/get-users?page=${currentPage}&per_page=${perPage}&clear_cache=${cache}`
   );
 
   const changePage = (page: number) => {
     setCurrentPage(page);
   };
 
   const handleChangeUsersPerPage = (
-    e: React.ChangeEvent<HTMLSelectElement>,
+    e: React.ChangeEvent<HTMLSelectElement>
   ) => {
     setPerPage(parseInt(e.target.value));
     setCurrentPage(1); // Reset to the first page when changing per page
@@ -87,45 +89,39 @@ export default function ProviderUserManagement() {
   async function handleImportAllPrograms() {
     try {
       let resp = await axios.post(
-        `/api/actions/provider-platforms/${providerId}/import-programs`,
+        `/api/actions/provider-platforms/${providerId}/import-programs`
       );
       if (resp.status != 200) {
         showToast(
           "error importing all or some programs, please try again later",
-          ToastState.error,
+          ToastState.error
         );
         return;
       } else {
         showToast(
           "Programs imported successfully from provider",
-          ToastState.success,
+          ToastState.success
         );
         return;
       }
     } catch (err: any) {
       showToast(
         "error importing all or some programs, please try again later",
-        ToastState.error,
+        ToastState.error
       );
       return;
     }
   }
 
   async function handleImportAllUsers() {
-    let ans = prompt(
-      "Are you sure you want to import all users from this provider? (yes/no)",
-    );
-    if (ans != "yes") {
-      return;
-    }
     try {
       let res = await axios.post(
-        `/api/actions/provider-platforms/${providerId}/import-users`,
+        `/api/actions/provider-platforms/${providerId}/import-users`
       );
       if (res.status === 200) {
         showToast(
           "Users imported successfully, please check for accounts not created",
-          ToastState.success,
+          ToastState.success
         );
         window.location.reload();
       }
@@ -139,7 +135,7 @@ export default function ProviderUserManagement() {
     try {
       let res = await axios.post(
         `/api/provider-platforms/${providerId}/users/import`,
-        { users: usersToImport },
+        { users: usersToImport }
       );
       if (res.status === 200) {
         showToast(res.data.message, ToastState.success);
@@ -154,7 +150,7 @@ export default function ProviderUserManagement() {
       setUsersToImport([]);
       showToast(
         "error importing users, please check accounts",
-        ToastState.error,
+        ToastState.error
       );
     }
   }
@@ -239,7 +235,7 @@ export default function ProviderUserManagement() {
             Refresh
           </button>
           <PrimaryButton
-            onClick={() => handleImportAllUsers()}
+            onClick={() => importAllUsersModal.current?.showModal()}
             disabled={!provider}
           >
             Import All Users
@@ -360,7 +356,7 @@ export default function ProviderUserManagement() {
       )}
       <Modal
         ref={importedUsersModal}
-        type={ModalType.View}
+        type={ModalType.Show}
         item="Imported Users"
         form={
           <ShowImportedUsers
@@ -369,6 +365,17 @@ export default function ProviderUserManagement() {
           />
         }
       />
+      <Modal
+        ref={importAllUsersModal}
+        type={ModalType.Confirm}
+        item="Import All Users"
+        form={
+          <ConfirmImportAllUsersForm
+            onCancel={() => importAllUsersModal.current?.close()}
+            onSuccess={handleImportAllUsers}
+          />
+        }
+      />
       {displayToast && <Toast {...toast} />}
     </AuthenticatedLayout>
   );

diff --git a/frontend/src/Pages/ResourcesManagement.tsx b/frontend/src/Pages/ResourcesManagement.tsx
@@ -1,5 +1,5 @@
 import CategoryItem from "../Components/CategoryItem";
-import Modal from "../Components/Modal";
+import Modal, { ModalType } from "../Components/Modal";
 import PageNav from "../Components/PageNav";
 import Toast, { ToastState } from "../Components/Toast";
 import AddCategoryForm from "../Components/forms/AddCategoryForm";
@@ -294,16 +294,16 @@ export default function ResourcesManagement() {
       </div>
       {/* Modals */}
       <Modal
-        type="Add"
+        type={ModalType.Add}
         item="Category"
         form={
           <AddCategoryForm onSuccess={(title: string) => addCategory(title)} />
         }
         ref={addCategoryModal}
       />
       <Modal
-        type="Delete"
-        item="Category"
+        type={ModalType.Confirm}
+        item="Delete Category"
         form={
           <DeleteForm
             item="Category"

diff --git a/frontend/src/Pages/Users.tsx b/frontend/src/Pages/Users.tsx
@@ -45,7 +45,7 @@ export default function Users() {
   const [pageQuery, setPageQuery] = useState(1);
   const [sortQuery, setSortQuery] = useState("created_at DESC");
   const { data, mutate, error, isLoading } = useSWR(
-    `/api/users?search=${searchQuery[0]}&page=${pageQuery}&order_by=${sortQuery}`,
+    `/api/users?search=${searchQuery[0]}&page=${pageQuery}&order_by=${sortQuery}`
   );
   const userData = data as PaginatedResponse<User>;
   const showToast = (message: string, state: ToastState) => {
@@ -75,7 +75,7 @@ export default function Users() {
     if (targetUser?.id === DEFAULT_ADMIN_ID) {
       showToast(
         "This is the primary administrator and cannot be deleted",
-        ToastState.error,
+        ToastState.error
       );
       return;
     }
@@ -278,8 +278,8 @@ export default function Users() {
       />
       <Modal
         ref={deleteUserModal}
-        type={ModalType.Delete}
-        item="User"
+        type={ModalType.Confirm}
+        item="Delete User"
         form={
           <DeleteForm
             item="User"
@@ -290,8 +290,8 @@ export default function Users() {
       />
       <Modal
         ref={resetUserPasswordModal}
-        type={`Reset Password`}
-        item=""
+        type={ModalType.Confirm}
+        item="Reset Password"
         form={
           <ResetPasswordForm
             user={targetUser}
@@ -302,8 +302,8 @@ export default function Users() {
       />
       <Modal
         ref={showUserPassword}
-        type={`New Password`}
-        item={""}
+        type={ModalType.Show}
+        item={"New Password"}
         form={
           <ShowTempPasswordForm
             tempPassword={tempPassword}