From 50c2f5dad1f8574a2c67e8d991bff097ac456e57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Tue, 11 Jul 2023 14:29:21 -0400
Subject: [PATCH] CreateDialog: replace with TextField
Change-Id: I244dac3e2139fc27550504e0134d8d3ba7a583dc
---
.../views/Blueprints/CreateBlueprintDialog.js | 89 ++++++++-----------
.../src/views/Groups/CreateGroupDialog.js | 76 +++++++---------
jams-react-client/src/views/Groups/Groups.js | 2 +-
3 files changed, 73 insertions(+), 94 deletions(-)
diff --git a/jams-react-client/src/views/Blueprints/CreateBlueprintDialog.js b/jams-react-client/src/views/Blueprints/CreateBlueprintDialog.js
index ff6e1fa4..b7d3de00 100644
--- a/jams-react-client/src/views/Blueprints/CreateBlueprintDialog.js
+++ b/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>
diff --git a/jams-react-client/src/views/Groups/CreateGroupDialog.js b/jams-react-client/src/views/Groups/CreateGroupDialog.js
index 08497835..88b2e821 100644
--- a/jams-react-client/src/views/Groups/CreateGroupDialog.js
+++ b/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>
diff --git a/jams-react-client/src/views/Groups/Groups.js b/jams-react-client/src/views/Groups/Groups.js
index 90491f33..4396b8a8 100644
--- a/jams-react-client/src/views/Groups/Groups.js
+++ b/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);
}}
--
GitLab