refactor: update generic dialog to have title and maybe description

Client/src/Components/Dialog/genericDialog.jsx

@@ -1,10 +1,15 @@
-import { Modal, Stack } from "@mui/material";
+import { useId } from "react";
 import PropTypes from "prop-types";
+import { Modal, Stack, Typography } from "@mui/material";
+
 const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+	const titleId = useId();
+	const descriptionId = useId();
+	const ariaDescribedBy = description?.length > 0 ? descriptionId : "";
 	return (
 		<Modal
-			aria-labelledby={title}
-			aria-describedby={description}
+			aria-labelledby={titleId}
+			aria-describedby={ariaDescribedBy}
 			open={open}
 			onClose={onClose}
 		>
@@ -27,6 +32,23 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					},
 				}}
 			>
+				<Typography
+					id={titleId}
+					component="h2"
+					fontSize={16}
+					color={theme.palette.text.primary}
+					fontWeight={600}
+				>
+					{title}
+				</Typography>
+				{description && (
+					<Typography
+						id={descriptionId}
+						color={theme.palette.text.tertiary}
+					>
+						{description}
+					</Typography>
+				)}
 				{children}
 			</Stack>
 		</Modal>
@@ -35,7 +57,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 
 GenericDialog.propTypes = {
 	title: PropTypes.string.isRequired,
-	description: PropTypes.string.isRequired,
+	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
 	theme: PropTypes.object.isRequired,

Client/src/Components/Dialog/index.jsx

@@ -1,46 +1,27 @@
-import LoadingButton from "@mui/lab/LoadingButton";
-import { Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { Button, Stack } from "@mui/material";
 import { GenericDialog } from "./genericDialog";
-import { useId } from "react";
+
 const Dialog = ({
+	title,
+	description,
 	open,
 	onClose,
 	theme,
-	title,
-	description,
 	onCancel,
 	confirmationButtonLabel,
 	onConfirm,
 	isLoading,
 }) => {
-	const titleId = useId();
-	const descriptionId = useId();
 	return (
 		<GenericDialog
-			title={titleId}
-			description={descriptionId}
+			title={title}
+			description={description}
 			open={open}
 			onClose={onClose}
 			theme={theme}
 		>
-			<Typography
-				id={titleId}
-				component="h2"
-				fontSize={16}
-				color={theme.palette.text.primary}
-				fontWeight={600}
-			>
-				{title}
-			</Typography>
-			{description && (
-				<Typography
-					id={descriptionId}
-					color={theme.palette.text.tertiary}
-				>
-					{description}
-				</Typography>
-			)}
 			<Stack
 				direction="row"
 				gap={theme.spacing(4)}
@@ -68,11 +49,11 @@ const Dialog = ({
 };
 
 Dialog.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
 	theme: PropTypes.object.isRequired,
-	title: PropTypes.string.isRequired,
-	description: PropTypes.string,
 	onCancel: PropTypes.func.isRequired,
 	confirmationButtonLabel: PropTypes.string.isRequired,
 	onConfirm: PropTypes.func.isRequired,