Improve: UX and DX in delete and reset modals

src/components/Button/IconButton.tsx

@@ -18,7 +18,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 		return (
 			<Tooltip label={tooltipLabel}>
 				<ActionIcon
-					data-testId={props.data_id}
+					data-testid={props.data_id}
 					size={props.size ? props.size : 'xl'}
 					className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 					onClick={props.onClick && props.onClick}>
@@ -29,7 +29,7 @@ const IconButton: FC<IconButtonProps> = (props) => {
 	} else {
 		return (
 			<ActionIcon
-				data-testId={props.data_id}
+				data-testid={props.data_id}
 				size={props.size ? props.size : 'xl'}
 				className={`${classes.iconBtn} ${props.active && classes.iconBtnActive}`}
 				onClick={props.onClick && props.onClick}>

src/components/Misc/DeleteOrResetModal.tsx

@@ -0,0 +1,130 @@
+import { Box, Button, Modal, Stack, Text, TextInput } from '@mantine/core';
+import classes from './styles/DeleteOrResetModal.module.css';
+import { ChangeEvent, useCallback, useState } from 'react';
+
+type BaseProps = {
+	isOpen: boolean;
+	onClose: () => void;
+	header: string;
+	specialContent?: React.ReactNode;
+	content: string;
+	actionProcessingContent?: React.ReactNode;
+	isActionInProgress?: boolean;
+	onConfirm: () => void;
+};
+
+// Note: The `confirmationText` and `placeholder` props are required for 'delete' and 'reset' types, but not for 'simple' type.
+type DeleteOrResetModalProps =
+	| (BaseProps & {
+			type: 'simple';
+			confirmationText?: never; // Will throw an error if `confirmationText` is passed
+			placeholder?: never;
+	  })
+	| (BaseProps & {
+			type: 'delete' | 'reset';
+			confirmationText: string;
+			placeholder: string;
+	  });
+
+/**
+ * Confirmation modal for deleting or resetting an item.
+ * @param type - Specifies the type of modal ('simple', 'delete', or 'reset').
+ * @param isOpen - Controls whether the modal is visible.
+ * @param onClose - Callback to close the modal and reset the state.
+ * @param header - Header text displayed in the modal title.
+ * @param specialContent - Optional content for additional context or customization.
+ * @param content - Main descriptive content of the modal.
+ * @param placeholder - Input placeholder for confirmation text (applicable to 'delete' and 'reset').
+ * @param confirmationText - Text required to confirm the action (applicable to 'delete' and 'reset').
+ * @param actionProcessingContent - Optional content below text input for showing progress status or related information.
+ * @param isActionInProgress - Disables the confirm button when action is in progress.
+ * @param onConfirm - Callback function to be executed when the confirm button is clicked.
+ */
+const DeleteOrResetModal = ({
+	type,
+	isOpen,
+	onClose,
+	header,
+	specialContent,
+	content,
+	placeholder,
+	confirmationText,
+	actionProcessingContent,
+	isActionInProgress,
+	onConfirm,
+}: DeleteOrResetModalProps) => {
+	const [confirmText, setConfirmText] = useState<string>('');
+
+	// Handler for the confirmation input field
+	const onChangeHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		setConfirmText(e.target.value);
+	}, []);
+
+	// Function to validate and trigger confirmation logic
+	const tryConfirm = useCallback(() => {
+		if (type === 'simple' || confirmationText === confirmText) {
+			setConfirmText('');
+			onConfirm();
+		}
+	}, [type, confirmationText, confirmText, onConfirm]);
+
+	// Function to close the modal and reset the confirmation text state.
+	const closeModal = useCallback(() => {
+		setConfirmText('');
+		onClose();
+	}, [onClose]);
+
+	return (
+		<Modal
+			withinPortal
+			opened={isOpen}
+			onClose={closeModal}
+			size="auto"
+			centered
+			styles={{
+				body: { padding: '0 1rem 1rem 1rem', width: 400 },
+				header: { padding: '1rem', paddingBottom: '0.4rem' },
+			}}
+			title={<Text style={{ fontSize: '0.9rem', fontWeight: 600 }}>{header}</Text>}>
+			<Stack>
+				<Stack gap={8}>
+					{specialContent}
+					<Text className={classes.warningText}>{content}</Text>
+
+					{/* Render confirmation field for 'delete' or 'reset' types */}
+					{type !== 'simple' && (
+						<>
+							<Text className={classes.confirmationText}>
+								Please type <span className={classes.confirmationTextHighlight}>{`"${confirmationText}"`}</span> to
+								confirm {type === 'delete' ? 'deletion' : 'reset'}.
+							</Text>
+							<TextInput value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
+						</>
+					)}
+
+					{/* Renders the action processing content if provided */}
+					{actionProcessingContent}
+				</Stack>
+
+				{/* Action buttons */}
+				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
+					<Box>
+						<Button variant="outline" onClick={closeModal}>
+							Cancel
+						</Button>
+					</Box>
+					<Box>
+						{/* Disable the button if the confirmation text is not correct or the action is processing. */}
+						<Button
+							disabled={(type !== 'simple' && confirmationText !== confirmText) || isActionInProgress}
+							onClick={tryConfirm}>
+							{type === 'reset' ? 'Reset' : 'Delete'}
+						</Button>
+					</Box>
+				</Stack>
+			</Stack>
+		</Modal>
+	);
+};
+
+export default DeleteOrResetModal;

src/components/Misc/styles/DeleteOrResetModal.module.css

@@ -0,0 +1,15 @@
+.warningText {
+    margin-top: 0.4rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: var(--mantine-color-gray-8);
+}
+
+.confirmationText {
+    font-size: 0.7rem;
+    color: var(--mantine-color-gray-7);
+}
+
+.confirmationTextHighlight {
+    font-weight: 500;
+}

src/pages/AccessManagement/PrivilegeTR.tsx

@@ -19,6 +19,7 @@ import { FC, useEffect, useState } from 'react';
 import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
 import { useRole } from '@/hooks/useRole';
 import styles from './styles/AccessManagement.module.css';
+import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal';
 
 interface PrivilegeTRProps {
 	roleName: string;
@@ -32,8 +33,6 @@ interface PrivilegeTRProps {
 const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 	const { roleName, defaultRole, deleteRoleMutation, getRoleIsLoading, getRoleIsError } = props;
 
-	const [UserInput, setUserInput] = useState<string>('');
-
 	// Delete Privilege Modal Constants  : Starts
 	const [deletePrivilegeIndex, setDeletePrivilegeIndex] = useState<number>(0);
 	const [isDeletedPrivilegeOpen, { open: openDeletePrivilege, close: closeDeletePrivilege }] = useDisclosure();
@@ -46,7 +45,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 	// Update Role Modal Constants  : Starts
 	const [isUpdatedRoleOpen, { open: openUpdateRole, close: closeUpdateRole }] = useDisclosure();
 	const [selectedPrivilege, setSelectedPrivilege] = useState<string>('');
-	const [SelectedStream, setSelectedStream] = useState<string>('');
+	const [selectedStream, setSelectedStream] = useState<string>('');
 	const [streamSearchValue, setStreamSearchValue] = useState<string>('');
 	const [tagInput, setTagInput] = useState<string>('');
 	const { getLogStreamListData } = useGetLogStreamList();
@@ -104,7 +103,6 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 
 	const handleClosePrivilegeDelete = () => {
 		closeDeletePrivilege();
-		setUserInput('');
 	};
 
 	const handlePrivilegeDelete = () => {
@@ -140,7 +138,6 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 
 	const handleCloseDelete = () => {
 		closeDeleteRole();
-		setUserInput('');
 	};
 
 	const handleCloseUpdateRole = () => {
@@ -158,20 +155,20 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 			});
 		}
 		if (selectedPrivilege === 'reader' || selectedPrivilege === 'writer' || selectedPrivilege === 'ingestor') {
-			if (getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream)) {
+			if (getLogStreamListData?.data?.find((stream) => stream.name === selectedStream)) {
 				if (tagInput !== '' && tagInput !== undefined && selectedPrivilege === 'reader') {
 					getRoleData?.data?.push({
 						privilege: selectedPrivilege,
 						resource: {
-							stream: SelectedStream,
+							stream: selectedStream,
 							tag: tagInput,
 						},
 					});
 				} else {
 					getRoleData?.data?.push({
 						privilege: selectedPrivilege,
 						resource: {
-							stream: SelectedStream,
+							stream: selectedStream,
 						},
 					});
 				}
@@ -193,7 +190,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 				getRoleData?.data?.find(
 					(role: any) =>
 						role.privilege === selectedPrivilege &&
-						role.resource?.stream === SelectedStream &&
+						role.resource?.stream === selectedStream &&
 						(tagInput
 							? role.resource?.tag === tagInput
 							: role.resource?.tag === null || role.resource?.tag === undefined),
@@ -202,9 +199,9 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 				return true;
 			}
 			if (
-				getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream) &&
-				SelectedStream !== '' &&
-				SelectedStream !== undefined
+				getLogStreamListData?.data?.find((stream) => stream.name === selectedStream) &&
+				selectedStream !== '' &&
+				selectedStream !== undefined
 			) {
 				return false;
 			}
@@ -213,15 +210,15 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 		if (selectedPrivilege === 'writer' || selectedPrivilege === 'ingestor') {
 			if (
 				getRoleData?.data?.find(
-					(role: any) => role.privilege === selectedPrivilege && role.resource?.stream === SelectedStream,
+					(role: any) => role.privilege === selectedPrivilege && role.resource?.stream === selectedStream,
 				)
 			) {
 				return true;
 			}
 			if (
-				getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream) &&
-				SelectedStream !== '' &&
-				SelectedStream !== undefined
+				getLogStreamListData?.data?.find((stream) => stream.name === selectedStream) &&
+				selectedStream !== '' &&
+				selectedStream !== undefined
 			) {
 				return false;
 			}
@@ -284,79 +281,29 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 					</Box>
 				</td>
 			</tr>
-			<Modal
-				withinPortal
-				size="md"
-				opened={isDeletedRoleOpen}
-				onClose={handleCloseDelete}
-				title={'Delete Role'}
-				className={classes.modalStyle}
-				centered>
-				<TextInput
-					label="Are you sure you want to delete this Role?"
-					type="text"
-					onChange={(e) => {
-						setUserInput(e.target.value);
-					}}
-					placeholder={`Please enter the Role to confirm, i.e. ${roleName}`}
-					required
-					mb={20}
-				/>
 
-				<Group justify="right" mt={10}>
-					<Button
-						variant="filled"
-						color="gray"
-						className={classes.modalActionBtn}
-						disabled={UserInput === roleName ? false : true}
-						onClick={handleDelete}>
-						Delete
-					</Button>
-					<Button onClick={handleCloseDelete} variant="outline" color="gray" className={classes.modalCancelBtn}>
-						Cancel
-					</Button>
-				</Group>
-			</Modal>
+			<DeleteOrResetModal
+				type="delete"
+				isOpen={isDeletedRoleOpen}
+				onClose={handleCloseDelete}
+				header={'Delete Role'}
+				content="Are you sure you want to delete this Role?"
+				placeholder="Type the role name to confirm"
+				confirmationText={roleName}
+				onConfirm={handleDelete}
+			/>
 			{getRoleData?.data?.[deletePrivilegeIndex] ? (
-				<Modal
-					withinPortal
-					size="md"
-					opened={isDeletedPrivilegeOpen}
+				<DeleteOrResetModal
+					type="delete"
+					isOpen={isDeletedPrivilegeOpen}
 					onClose={handleClosePrivilegeDelete}
-					title={'Delete Privilege'}
-					centered
-					className={classes.modalStyle}>
-					<Stack>
-						<Text>{getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)}</Text>
-						<TextInput
-							label="Are you sure you want to delete this role privilege?"
-							type="text"
-							onChange={(e) => {
-								setUserInput(e.target.value);
-							}}
-							placeholder={`Please enter the role to confirm, i.e. ${roleName}`}
-							required
-						/>
-					</Stack>
-
-					<Group justify="right" mt={10}>
-						<Button
-							variant="filled"
-							color="gray"
-							className={classes.modalActionBtn}
-							disabled={UserInput === roleName ? false : true}
-							onClick={handlePrivilegeDelete}>
-							Delete
-						</Button>
-						<Button
-							onClick={handleClosePrivilegeDelete}
-							variant="outline"
-							color="gray"
-							className={classes.modalCancelBtn}>
-							Cancel
-						</Button>
-					</Group>
-				</Modal>
+					header={'Delete Privilege'}
+					specialContent={<Text>{getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)}</Text>}
+					content="Are you sure you want to delete this role privilege?"
+					placeholder="Type name of the role to confirm."
+					confirmationText={roleName}
+					onConfirm={handlePrivilegeDelete}
+				/>
 			) : (
 				''
 			)}
@@ -386,10 +333,10 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 									setSelectedStream(value ?? '');
 								}}
 								nothingFoundMessage="No options"
-								value={SelectedStream}
+								value={selectedStream}
 								searchValue={streamSearchValue}
 								onSearchChange={(value) => setStreamSearchValue(value)}
-								onDropdownClose={() => setStreamSearchValue(SelectedStream)}
+								onDropdownClose={() => setStreamSearchValue(selectedStream)}
 								onDropdownOpen={() => setStreamSearchValue('')}
 								data={getLogStreamListData?.data?.map((stream) => ({ value: stream.name, label: stream.name })) ?? []}
 								searchable