feat: improve create category form

label-sleuth · Mar 21, 2023 · c53161c · c53161c
1 parent 058334a
commit c53161c
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 98 deletions.
diff --git a/frontend/src/const.ts b/frontend/src/const.ts
@@ -54,6 +54,7 @@ export const PRECISION_RESULT_MSG = (precision: number, currentModelVersion: num
 export const NO_MODEL_AVAILABLE_MSG = "not available yet";
 export const CREATE_NEW_CATEGORY_MODAL_MSG = "Create a new category";
 export const CREATE_NEW_CATEGORY_PLACEHOLDER_MSG = "New category name";
+export const CREATE_NEW_CATEGORY_HELPER_MSG = "Please select a meaningful name for your category.";
 export const UPLOAD_NEW_DATASET_MSG = "Upload new data";
 export const UPLOAD_NEW_DATASET_NAME_PLACEHOLER_MSG = "Choose or set name";
 export const UPLOAD_NEW_DATASET_FILE_HELPER_MSG = `The csv file must have a header line (of "text" and optional "document_id")`;

diff --git a/frontend/src/modules/Workplace/upperbar/Modal/CreateCategoryModal.tsx b/frontend/src/modules/Workplace/upperbar/Modal/CreateCategoryModal.tsx
@@ -16,8 +16,6 @@
 import * as React from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import Modal from "@mui/material/Modal";
 import { useAppDispatch } from "../../../../customHooks/useRedux";
 import { isFulfilled } from "@reduxjs/toolkit";
 import { createCategoryOnServer } from "../../redux";
@@ -30,32 +28,23 @@ import {
   WRONG_INPUT_NAME_BAD_CHARACTER,
   REGEX_LETTER_NUMBERS_UNDERSCORE_SPACES,
   KeyboardKeysEnum,
+  CREATE_NEW_CATEGORY_HELPER_MSG,
 } from "../../../../const";
+import { DialogContentText, Dialog, DialogTitle, DialogContent } from "@mui/material";
 import { useNotification } from "../../../../utils/notification";
 import { toast } from "react-toastify";
 import { ChangeEvent } from "react";
 
-const style = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: 350,
-  bgcolor: "background.paper",
-  border: "none",
-  boxShadow: 24,
-  p: 4,
-};
-
 interface CreateCategoryModalProps {
-  open: boolean, setOpen: (newValue: boolean) => void
+  open: boolean;
+  setOpen: (newValue: boolean) => void;
 }
 
 export const CreateCategoryModal = ({ open, setOpen }: CreateCategoryModalProps) => {
   const [text, setText] = React.useState("");
   const [categoryNameError, setCategoryNameError] = React.useState("");
   const dispatch = useAppDispatch();
-  const { notify } = useNotification()
+  const { notify } = useNotification();
 
   const handleTextFieldChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     e.preventDefault();
@@ -82,16 +71,15 @@ export const CreateCategoryModal = ({ open, setOpen }: CreateCategoryModalProps)
   const onSubmit = async () => {
     const newCategoryName = text.trim();
 
-    dispatch(createCategoryOnServer({ categoryName: newCategoryName }))
-      .then((actionResult) => {
-        if (isFulfilled(actionResult)) {
-          setOpen(false);
-          notify(`The category '${newCategoryName}' has been created`, {
-            type: toast.TYPE.SUCCESS,
-            autoClose: 5000,
-          });
-        }
-      });
+    dispatch(createCategoryOnServer({ categoryName: newCategoryName })).then((actionResult) => {
+      if (isFulfilled(actionResult)) {
+        setOpen(false);
+        notify(`The category '${newCategoryName}' has been created`, {
+          type: toast.TYPE.SUCCESS,
+          autoClose: 5000,
+        });
+      }
+    });
   };
 
   const onModalClose = () => {
@@ -100,58 +88,53 @@ export const CreateCategoryModal = ({ open, setOpen }: CreateCategoryModalProps)
   };
 
   return (
-    <div>
-      <Modal
-        open={open}
-        onClose={onModalClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-        disableRestoreFocus
-        onKeyDown={e => e.stopPropagation()}
+    <Dialog
+      open={open}
+      onClose={onModalClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      disableRestoreFocus
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      <DialogTitle
+        id="modal-modal-title"
       >
-        <Box sx={style}>
-          <Typography
-            id="modal-modal-title"
-            variant="h6"
-            component="h2"
-            sx={{ marginBottom: 2 }}
-          >
-            {CREATE_NEW_CATEGORY_MODAL_MSG}
-          </Typography>
-          <Box
-            sx={{
-              display: "grid",
-              gap: 1,
-              gridTemplateColumns: "60% 40%",
-              alignItems: "center",
-              width: "300px",
-            }}
+        {CREATE_NEW_CATEGORY_MODAL_MSG}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText sx={{ width: "300px" }}>{CREATE_NEW_CATEGORY_HELPER_MSG}</DialogContentText>
+        <Box
+          sx={{
+            display: "grid",
+            gap: 1,
+            gridTemplateColumns: "60% 40%",
+            alignItems: "center",
+            width: "300px",
+            marginTop: "20px",
+          }}
+        >
+          <TextField
+            id="outlined-basic"
+            className={classes.new_modal_name}
+            label={CREATE_NEW_CATEGORY_PLACEHOLDER_MSG}
+            onChange={handleTextFieldChange}
+            onKeyUp={onKeyDown}
+            error={categoryNameError ? true : false}
+            autoFocus
+          />
+          <Button
+            onClick={onSubmit}
+            className={categoryNameError || !text ? classes["btn-disabled"] : classes.btn}
+            sx={{ marginLeft: 3 }}
+            disabled={categoryNameError !== "" || text === ""}
           >
-            <TextField
-              id="outlined-basic"
-              className={classes.new_modal_name}
-              label={CREATE_NEW_CATEGORY_PLACEHOLDER_MSG}
-              onChange={handleTextFieldChange}
-              onKeyUp={onKeyDown}
-              error={categoryNameError ? true : false}
-              autoFocus
-            />
-            <Button
-              onClick={onSubmit}
-              className={
-                categoryNameError || !text
-                  ? classes["btn-disabled"]
-                  : classes.btn
-              }
-              sx={{ marginLeft: 3 }}
-              disabled={categoryNameError !== "" || text === ""}
-            >
-              Create
-            </Button>
-            <p className={classes["error"]}>{categoryNameError}</p>
-          </Box>
+            Create
+          </Button>
+          <p className={classes["error"]}>{categoryNameError}</p>
         </Box>
-      </Modal>
-    </div>
+      </DialogContent>
+
+      {/* </Box> */}
+    </Dialog>
   );
-}
+};
diff --git a/frontend/src/modules/Workplace/upperbar/Modal/DeleteCategoryModal.tsx b/frontend/src/modules/Workplace/upperbar/Modal/DeleteCategoryModal.tsx
@@ -24,13 +24,14 @@ import { toast } from "react-toastify";
 import { isFulfilled } from "@reduxjs/toolkit";
 
 interface DeleteCategoryModalProps {
-  open: boolean, setOpen: (newValue: boolean) => void
+  open: boolean;
+  setOpen: (newValue: boolean) => void;
 }
 
 export const DeleteCategoryModal = ({ open, setOpen }: DeleteCategoryModalProps) => {
   const curCategoryName = useAppSelector(curCategoryNameSelector);
   const dispatch = useAppDispatch();
-  const { notify } = useNotification()
+  const { notify } = useNotification();
 
   const handleClose = () => {
     setOpen(false);
@@ -49,22 +50,20 @@ export const DeleteCategoryModal = ({ open, setOpen }: DeleteCategoryModalProps)
   };
 
   return (
-    <div>
-      <Dialog open={open} onClose={handleClose} onKeyDown={(e) => e.stopPropagation()}>
-        <DialogTitle>{`Are you sure you want to delete the category '${curCategoryName}'?`}</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            This action will permanently delete the category along with all the labels and models associated with it.
-            The deletion cannot be reversed
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose}>No</Button>
-          <Button onClick={onSubmit} autoFocus>
-            Yes
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
+    <Dialog open={open} onClose={handleClose} onKeyDown={(e) => e.stopPropagation()}>
+      <DialogTitle>{`Are you sure you want to delete the category '${curCategoryName}'?`}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          This action will permanently delete the category along with all the labels and models associated with it. The
+          deletion cannot be reversed
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>No</Button>
+        <Button onClick={onSubmit} autoFocus>
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
   );
-}
+};
diff --git a/frontend/src/modules/Workplace/upperbar/Modal/index.module.css b/frontend/src/modules/Workplace/upperbar/Modal/index.module.css
@@ -50,6 +50,7 @@
     pointer-events: none;
 }
 
+/* TODO: use MUI to replace this custom css (its intended to mimic the error helper text) */
 .error {
     display: block;
     margin-block-start: 1em;

diff --git a/frontend/src/modules/Workplace/upperbar/index.tsx b/frontend/src/modules/Workplace/upperbar/index.tsx
@@ -79,7 +79,7 @@ export const UpperBar = () => {
   }, [curCategory, cardOpen]);
 
   return (
-    <AppBarLS sx={{}}>
+    <AppBarLS>
       <Box className={classes["app-bar-container"]}>
         <p className={classes["dropdown-label"]}>Category: </p>
         <CategoryFormControl />