CreateDialog: replace with TextField

Change-Id: I244dac3e2139fc27550504e0134d8d3ba7a583dc

jams-react-client/src/views/Blueprints/CreateBlueprintDialog.js

@@ -6,38 +6,41 @@ import {
   Dialog,
   DialogTitle,
   DialogContent,
-  FormControl,
-  InputLabel,
-  Input,
   InputAdornment,
   DialogActions,
-  Button,
   debounce,
+  TextField,
 } from "@mui/material";
 import { AllInbox } from "@mui/icons-material";
-import { makeStyles } from "@mui/styles";
 
 import configApiCall from "api";
 import { api_path_blueprints } from "globalUrls";
-import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle";
 
-const styles = {
-  ...headerLinksStyle,
-  whiteButtonText: {
-    color: "white",
-  },
-};
+import Button from "components/CustomButtons/Button.js";
+
+const getHelperText = (disableCreate, blueprintName) => {
+  if (disableCreate && blueprintName.length > 0) {
+    return i18next.t(
+      "blueprint_name_already_exists",
+      "Blueprint name already exists!"
+    );
+  }
+  if (disableCreate && blueprintName.length === 0) {
+    return i18next.t("blueprint_name_is_empty", "Blueprint name is empty");
+  }
 
-const useStyles = makeStyles(styles);
+  return "";
+};
 
 export default function CreateBlueprintDialog({ open, setOpen }) {
   const history = useHistory();
-  const classes = useStyles();
 
   const [blueprintName, setBlueprintName] = useState("");
-  const [blueprintNameExits, setBlueprintNameExits] = useState(false);
+  const [blueprintNameExists, setBlueprintNameExists] = useState(false);
   const [disableCreate, setDisableCreate] = useState(true);
 
+  const helperText = getHelperText(disableCreate, blueprintName);
+
   const handleClose = () => {
     setOpen(false);
   };
@@ -54,11 +57,11 @@ export default function CreateBlueprintDialog({ open, setOpen }) {
     )
       .then(() => {
         setDisableCreate(true);
-        setBlueprintNameExits(true);
+        setBlueprintNameExists(true);
       })
       .catch(() => {
         setDisableCreate(false);
-        setBlueprintNameExits(false);
+        setBlueprintNameExists(false);
       });
   };
 
@@ -119,41 +122,27 @@ export default function CreateBlueprintDialog({ open, setOpen }) {
         {i18next.t("create_blueprint", "Create blueprint")}
       </DialogTitle>
       <DialogContent>
-        <FormControl
-          className={classes.margin}
-          size="medium"
-          error={blueprintNameExits}
-        >
-          <InputLabel htmlFor="blueprintName">
-            {i18next.t("blueprint_name", "Blueprint name")}
-          </InputLabel>
-          <Input
-            id="blueprintName"
-            placeholder={i18next.t("blueprint_name", "Blueprint name")}
-            startAdornment={
+        <TextField
+          autoFocus
+          error={blueprintNameExists}
+          margin="dense"
+          id="blueprintName"
+          label={i18next.t("blueprint_name", "Blueprint name")}
+          helperText={helperText}
+          type="text"
+          variant="standard"
+          InputProps={{
+            startAdornment: (
               <InputAdornment position="start">
                 <AllInbox />
               </InputAdornment>
-            }
-            onChange={(e) => {
-              setBlueprintName(e.target.value);
-              initCheckBlueprintNameExists(e.target.value);
-            }}
-          />
-        </FormControl>
-        {disableCreate && blueprintName.length > 0 && (
-          <p>
-            {i18next.t(
-              "blueprint_name_already_exists",
-              "Blueprint name already exists!"
-            )}
-          </p>
-        )}
-        {disableCreate && blueprintName.length === 0 && (
-          <p>
-            {i18next.t("blueprint_name_is_empty", "Blueprint name is empty")}
-          </p>
-        )}
+            ),
+          }}
+          onChange={(e) => {
+            setBlueprintName(e.target.value);
+            initCheckBlueprintNameExists(e.target.value);
+          }}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="primary">
@@ -162,9 +151,7 @@ export default function CreateBlueprintDialog({ open, setOpen }) {
         <Button
           onClick={handleCreateBlueprint}
           color="info"
-          className={classes.whiteButtonText}
           disabled={disableCreate}
-          autoFocus
         >
           {i18next.t("create_blueprint", "Create blueprint")}
         </Button>

jams-react-client/src/views/Groups/CreateGroupDialog.js

@@ -5,12 +5,9 @@ import {
   DialogTitle,
   DialogContent,
   Grid,
-  FormControl,
-  InputLabel,
-  Input,
   InputAdornment,
-  Select,
   DialogActions,
+  TextField,
 } from "@mui/material";
 import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
 import axios from "axios";
@@ -28,6 +25,17 @@ import auth from "auth";
 import * as tool from "../../tools";
 import Button from "components/CustomButtons/Button.js";
 
+const getHelperText = (disableCreate, groupName) => {
+  if (disableCreate && groupName.length > 0) {
+    return i18next.t("group_name_already_exists", "Group name already exists!");
+  }
+  if (disableCreate && groupName.length === 0) {
+    return i18next.t("group_name_is_empty", "Group name is empty");
+  }
+
+  return "";
+};
+
 export default function CreateGroupDialog({
   openCreate,
   setOpenCreate,
@@ -45,6 +53,8 @@ export default function CreateGroupDialog({
     label: "No blueprint",
   });
 
+  const helperText = getHelperText(disableCreate, groupName);
+
   const handleCheckGroupNameExists = (searchGroupNameValue) => {
     setDisableCreate(true);
     axios(
@@ -151,57 +161,39 @@ export default function CreateGroupDialog({
       <DialogContent>
         <Grid container spacing={2}>
           <Grid item xs={12} sm={12} md={12}>
-            <FormControl
-              className={classes.margin}
+            <TextField
+              autoFocus
               error={groupNameExits}
+              id="groupName"
+              label={i18next.t("group_name", "Group name")}
+              helperText={helperText}
+              type="text"
               fullWidth
-            >
-              <InputLabel htmlFor="groupName">
-                {i18next.t("group_name", "Group name")}
-              </InputLabel>
-              <Input
-                id="groupName"
-                placeholder={i18next.t("group_name", "Group name")}
-                startAdornment={
+              variant="standard"
+              InputProps={{
+                startAdornment: (
                   <InputAdornment position="start">
                     <PeopleOutlineIcon />
                   </InputAdornment>
-                }
-                onChange={(e) => {
-                  setGroupName(e.target.value);
-                  initCheckGroupNameExists(e.target.value);
-                }}
-              />
-            </FormControl>
-            {disableCreate && groupName.length > 0 && (
-              <p>
-                {i18next.t(
-                  "group_name_already_exists",
-                  "Group name already exists!"
-                )}
-              </p>
-            )}
-            {disableCreate && groupName.length === 0 && (
-              <p>{i18next.t("group_name_is_empty", "Group name is empty")}</p>
-            )}
+                ),
+              }}
+              onChange={(e) => {
+                setGroupName(e.target.value);
+                initCheckGroupNameExists(e.target.value);
+              }}
+            />
           </Grid>
           <Grid item xs={12} sm={12} md={12}>
-            <InputLabel
-              className={classes.inputBottomMargin}
-              htmlFor="blueprint"
-            >
-              {i18next.t("select_blueprint", "Select a blueprint")}
-            </InputLabel>
-            <Select
-              labelId="demo-simple-select-label"
+            <TextField
+              select
               fullWidth
+              label={i18next.t("select_blueprint", "Select a blueprint")}
               value={selectedBlueprint.value}
               onChange={handleBlueprintsChange}
-              variant="outlined"
               disabled={blueprints.length === 0}
             >
               {blueprintsOptionsItems}
-            </Select>
+            </TextField>
           </Grid>
         </Grid>
       </DialogContent>

jams-react-client/src/views/Groups/Groups.js

@@ -315,7 +315,7 @@ export default function Groups() {
                     </Link>
                     <CardFooter>
                       <IconButton
-                        color="secondary"
+                        color="primary"
                         onClick={() => {
                           handleRemoveGroup(group);
                         }}