From e12669144b690b8b33d0ada1f673c394208b2659 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Fri, 22 Nov 2024 19:12:00 +0530 Subject: [PATCH 01/33] feat: add DeleteOrResetModal component and integrate it into the dashboard toolbar --- src/components/Misc/DeleteOrResetModal.tsx | 71 +++++++++++++++++++ .../Misc/styles/deletemodal.module.css | 13 ++++ src/pages/Dashboards/Toolbar.tsx | 56 ++++----------- 3 files changed, 97 insertions(+), 43 deletions(-) create mode 100644 src/components/Misc/DeleteOrResetModal.tsx create mode 100644 src/components/Misc/styles/deletemodal.module.css diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx new file mode 100644 index 00000000..96d9d743 --- /dev/null +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -0,0 +1,71 @@ +import { Box, Button, Modal, Stack, Text, TextInput } from '@mantine/core'; +import classes from './styles/deletemodal.module.css'; + +type DeleteOrResetModalProps = { + type: 'delete' | 'reset'; + header: string; + content: string; + isOpen: boolean; + onClose: () => void; + inputValue: string; + confirmationText: string; + onInputChange: (event: React.ChangeEvent) => void; + isProcessing: boolean; + onConfirm: () => void; +}; + +const DeleteOrResetModal = ({ + type, + header, + content, + isOpen, + onClose, + inputValue, + confirmationText, + onInputChange, + isProcessing, + onConfirm, +}: DeleteOrResetModalProps) => { + return ( + {header}}> + + + {content} + + Please type {`"${confirmationText}"`} to confirm{' '} + {type === 'delete' ? 'deletion' : 'reset'}. + + + + + + + + + + + + + + + ); +}; + +export default DeleteOrResetModal; diff --git a/src/components/Misc/styles/deletemodal.module.css b/src/components/Misc/styles/deletemodal.module.css new file mode 100644 index 00000000..1247dd80 --- /dev/null +++ b/src/components/Misc/styles/deletemodal.module.css @@ -0,0 +1,13 @@ +.warningText { + font-size: 0.7rem; + color: var(--mantine-color-gray-7); +} + +.confirmationText { + font-size: 0.7rem; + color: var(--mantine-color-gray-6); +} + +.confirmationTextHighlight { + font-weight: 500; +} \ No newline at end of file diff --git a/src/pages/Dashboards/Toolbar.tsx b/src/pages/Dashboards/Toolbar.tsx index 0b85b510..b20cabde 100644 --- a/src/pages/Dashboards/Toolbar.tsx +++ b/src/pages/Dashboards/Toolbar.tsx @@ -1,5 +1,5 @@ import TimeRange from '@/components/Header/TimeRange'; -import { Box, Button, FileInput, Modal, px, Stack, Text, Menu, TextInput } from '@mantine/core'; +import { Box, Button, FileInput, Modal, px, Stack, Text, Menu } from '@mantine/core'; import { IconCheck, IconCopy, @@ -21,6 +21,7 @@ import { Dashboard } from '@/@types/parseable/api/dashboards'; import { exportJson } from '@/utils/exportHelpers'; import { copyTextToClipboard } from '@/utils'; import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; +import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal'; const { toggleEditDashboardModal, @@ -143,49 +144,18 @@ const DeleteDashboardModal = () => { if (!activeDashboard?.dashboard_id) return null; return ( - Delete Dashboard}> - - - - Are you sure want to delete this dashboard and its contents ? - - - Please type {`"${activeDashboard.name}"`}{' '} - to confirm deletion. - - - - - - - - - - - - - - + inputValue={confirmText} + confirmationText={activeDashboard.name} + onInputChange={onChangeHandler} + isProcessing={isDeleting} + onConfirm={onDelete} + /> ); }; From 25548a78a714bd8e9d4dc27680e969b9a6350d72 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Fri, 22 Nov 2024 19:27:46 +0530 Subject: [PATCH 02/33] feat: refactor DeleteOrResetModal integration in PrivilegeTR and make isProcessing optional --- src/components/Misc/DeleteOrResetModal.tsx | 6 ++- src/pages/AccessManagement/PrivilegeTR.tsx | 45 +++++++--------------- 2 files changed, 17 insertions(+), 34 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 96d9d743..1caf6bb8 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -10,8 +10,9 @@ type DeleteOrResetModalProps = { inputValue: string; confirmationText: string; onInputChange: (event: React.ChangeEvent) => void; - isProcessing: boolean; + isProcessing?: boolean; onConfirm: () => void; + placeholder: string; }; const DeleteOrResetModal = ({ @@ -25,6 +26,7 @@ const DeleteOrResetModal = ({ onInputChange, isProcessing, onConfirm, + placeholder, }: DeleteOrResetModalProps) => { return ( - + diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index e91d75c4..97af9096 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/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; @@ -284,39 +285,19 @@ const PrivilegeTR: FC = (props) => { - - { - setUserInput(e.target.value); - }} - placeholder={`Please enter the Role to confirm, i.e. ${roleName}`} - required - mb={20} - /> - - - - - + setUserInput(e.target.value)} + /> {getRoleData?.data?.[deletePrivilegeIndex] ? ( Date: Fri, 22 Nov 2024 20:07:19 +0530 Subject: [PATCH 03/33] feat: enhance DeleteOrResetModal moving input state logic in the modal and added jsdocs --- src/components/Misc/DeleteOrResetModal.tsx | 44 +++++++++++++++++----- src/pages/AccessManagement/PrivilegeTR.tsx | 3 -- src/pages/Dashboards/Toolbar.tsx | 16 +++----- 3 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 1caf6bb8..08923ece 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -1,5 +1,6 @@ import { Box, Button, Modal, Stack, Text, TextInput } from '@mantine/core'; import classes from './styles/deletemodal.module.css'; +import { ChangeEvent, useCallback, useState } from 'react'; type DeleteOrResetModalProps = { type: 'delete' | 'reset'; @@ -7,32 +8,57 @@ type DeleteOrResetModalProps = { content: string; isOpen: boolean; onClose: () => void; - inputValue: string; confirmationText: string; - onInputChange: (event: React.ChangeEvent) => void; isProcessing?: boolean; onConfirm: () => void; placeholder: string; }; +/** + * Confirmation modal for deleting or resetting an item. + * @param type - Type of the modal. + * @param isOpen - Whether the modal is open. + * @param onClose - Function to close the modal. + * @param header - Header text for the modal. + * @param content - Content text for the modal. + * @param confirmationText - Text to confirm the action. + * @param isProcessing - Whether the action is processing. + * @param onConfirm - Function to confirm the action. + * @param placeholder - Placeholder text for the input field. + * */ const DeleteOrResetModal = ({ type, header, content, isOpen, onClose, - inputValue, confirmationText, - onInputChange, isProcessing, onConfirm, placeholder, }: DeleteOrResetModalProps) => { + const [confirmText, setConfirmText] = useState(''); + + const onChangeHandler = useCallback((e: ChangeEvent) => { + setConfirmText(e.target.value); + }, []); + + const tryConfirm = () => { + if (confirmationText === confirmText) { + setConfirmText(''); + onConfirm(); + } + }; + + const closeModal = () => { + setConfirmText(''); + onClose(); + }; return ( - + - diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index 97af9096..4762b926 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -141,7 +141,6 @@ const PrivilegeTR: FC = (props) => { const handleCloseDelete = () => { closeDeleteRole(); - setUserInput(''); }; const handleCloseUpdateRole = () => { @@ -295,8 +294,6 @@ const PrivilegeTR: FC = (props) => { placeholder="Type the role name to confirm" onConfirm={handleDelete} confirmationText={roleName} - inputValue={UserInput} - onInputChange={(e) => setUserInput(e.target.value)} /> {getRoleData?.data?.[deletePrivilegeIndex] ? ( { const DeleteDashboardModal = () => { const [activeDashboard, setDashbaordsStore] = useDashboardsStore((store) => store.activeDashboard); const [deleteDashboardModalOpen] = useDashboardsStore((store) => store.deleteDashboardModalOpen); - const [confirmText, setConfirmText] = useState(''); + const { isDeleting, deleteDashboard } = useDashboardsQuery({}); const closeModal = useCallback(() => { setDashbaordsStore((store) => toggleDeleteDashboardModal(store, false)); }, []); - const onChangeHandler = useCallback((e: ChangeEvent) => { - setConfirmText(e.target.value); - }, []); - const onDelete = useCallback(() => { if (activeDashboard?.dashboard_id) { deleteDashboard({ dashboardId: activeDashboard?.dashboard_id, onSuccess: () => { closeModal(); - setConfirmText(''); }, }); } @@ -148,11 +143,10 @@ const DeleteDashboardModal = () => { type="delete" header="Delete Dashboard" content="Are you sure want to delete this dashboard and its contents ?" + placeholder="Type the dashboard name to confirm deletion" isOpen={deleteDashboardModalOpen} onClose={closeModal} - inputValue={confirmText} confirmationText={activeDashboard.name} - onInputChange={onChangeHandler} isProcessing={isDeleting} onConfirm={onDelete} /> @@ -234,7 +228,9 @@ const ImportTileModal = () => { setFile(null); }, }); - } catch (error) {} + } catch (error) { + console.error('Error importing tile:', error); + } }; reader.readAsText(file); } else { From ff239107a3ab9643da9fbaa80685693745b1fc36 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Fri, 22 Nov 2024 23:52:46 +0530 Subject: [PATCH 04/33] fix: update placeholder text for role name input in delete confirmation modal --- tests/helpers/users_roles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/helpers/users_roles.ts b/tests/helpers/users_roles.ts index 0ecbe84b..f665d830 100644 --- a/tests/helpers/users_roles.ts +++ b/tests/helpers/users_roles.ts @@ -61,7 +61,7 @@ const deleteIfRoleExists = async (page: Page, ROLE_NAME: string) => { await deleteButton.click(); await page.waitForSelector('text=Are you sure you want to delete this role?'); - const roleNameInput = page.getByPlaceholder('Please enter the Role'); + const roleNameInput = page.getByPlaceholder('Type the role name'); await roleNameInput.fill(ROLE_NAME); const confirmDeleteButton = page.getByRole('button', { name: 'Delete' }); From 12d9934d512cbbb3840ddb189e0eb15595011ce9 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 00:14:04 +0530 Subject: [PATCH 05/33] fix: react warning for props --- src/components/Button/IconButton.tsx | 4 ++-- src/pages/AccessManagement/Roles.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx index 26d5292d..18b8ea38 100644 --- a/src/components/Button/IconButton.tsx +++ b/src/components/Button/IconButton.tsx @@ -18,7 +18,7 @@ const IconButton: FC = (props) => { return ( @@ -29,7 +29,7 @@ const IconButton: FC = (props) => { } else { return ( diff --git a/src/pages/AccessManagement/Roles.tsx b/src/pages/AccessManagement/Roles.tsx index 43073c48..127c2b67 100644 --- a/src/pages/AccessManagement/Roles.tsx +++ b/src/pages/AccessManagement/Roles.tsx @@ -173,7 +173,7 @@ const Roles: FC = () => { From eaf7af8ff652bf6bf9a1d2d6ee73a4c05a7b1717 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 02:45:08 +0530 Subject: [PATCH 06/33] feat: add optional specialContent prop to DeleteOrResetModal and update styles --- src/components/Misc/DeleteOrResetModal.tsx | 4 ++++ src/components/Misc/styles/deletemodal.module.css | 6 ++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 08923ece..d61082cb 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -5,6 +5,7 @@ import { ChangeEvent, useCallback, useState } from 'react'; type DeleteOrResetModalProps = { type: 'delete' | 'reset'; header: string; + specialContent?: React.ReactNode; content: string; isOpen: boolean; onClose: () => void; @@ -20,6 +21,7 @@ type DeleteOrResetModalProps = { * @param isOpen - Whether the modal is open. * @param onClose - Function to close the modal. * @param header - Header text for the modal. + * @param specialContent - Could be used to render additional text or components. * @param content - Content text for the modal. * @param confirmationText - Text to confirm the action. * @param isProcessing - Whether the action is processing. @@ -29,6 +31,7 @@ type DeleteOrResetModalProps = { const DeleteOrResetModal = ({ type, header, + specialContent, content, isOpen, onClose, @@ -68,6 +71,7 @@ const DeleteOrResetModal = ({ title={{header}}> + {specialContent} {content} Please type {`"${confirmationText}"`} to confirm{' '} diff --git a/src/components/Misc/styles/deletemodal.module.css b/src/components/Misc/styles/deletemodal.module.css index 1247dd80..6bb83694 100644 --- a/src/components/Misc/styles/deletemodal.module.css +++ b/src/components/Misc/styles/deletemodal.module.css @@ -1,11 +1,13 @@ .warningText { + margin-top: 0.4rem; font-size: 0.7rem; - color: var(--mantine-color-gray-7); + font-weight: 500; + color: var(--mantine-color-gray-8); } .confirmationText { font-size: 0.7rem; - color: var(--mantine-color-gray-6); + color: var(--mantine-color-gray-7); } .confirmationTextHighlight { From 03067ef5b47048cd870340e8b68abfc3d15f1f02 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 02:45:19 +0530 Subject: [PATCH 07/33] feat: replace Modal with DeleteOrResetModal for privilege deletion confirmation --- src/pages/AccessManagement/PrivilegeTR.tsx | 87 ++++++++++++---------- 1 file changed, 49 insertions(+), 38 deletions(-) diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index 4762b926..ef6b2fee 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -296,45 +296,56 @@ const PrivilegeTR: FC = (props) => { confirmationText={roleName} /> {getRoleData?.data?.[deletePrivilegeIndex] ? ( - - - {getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)} - { - setUserInput(e.target.value); - }} - placeholder={`Please enter the role to confirm, i.e. ${roleName}`} - required - /> - + // + // + // {getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)} + // { + // setUserInput(e.target.value); + // }} + // placeholder={`Please enter the role to confirm, i.e. ${roleName}`} + // required + // /> + // - - - - - + // + // + // + // + // + {getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)}} + type="delete" + content={`Are you sure you want to delete this role privilege?`} + placeholder={`Type name of the role to confirm.`} + onConfirm={handlePrivilegeDelete} + confirmationText={roleName} + /> ) : ( '' )} From 7f4987166015aa01df5f3aeeaacfe3d23461be12 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 03:00:28 +0530 Subject: [PATCH 08/33] Updated DeleteOrResetModal for user and user-role deletion confirmation modals --- src/pages/AccessManagement/RoleTR.tsx | 86 +++++++-------------------- 1 file changed, 20 insertions(+), 66 deletions(-) diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index 75161d92..e799344d 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -21,6 +21,7 @@ import { useUser } from '@/hooks/useUser'; import { useRole } from '@/hooks/useRole'; import styles from './styles/AccessManagement.module.css'; import { CodeHighlight } from '@mantine/code-highlight'; +import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal'; interface RoleTRProps { user: { @@ -225,75 +226,28 @@ const RoleTR: FC = (props) => { - - { - setUserInput(e.target.value); - }} - placeholder={`Please enter the user to confirm, i.e. ${user.id}`} - required - /> - - - - - - + header="Delete user" + content="Are you sure you want to delete this user?" + type="delete" + onConfirm={handleDelete} + placeholder={`Please enter the user name to confirm.`} + confirmationText={user.id} + /> {getUserRolesData?.data && deleteRole && getUserRolesData?.data[deleteRole] ? ( - - - {getBadge(deleteRole, false)} - { - setUserInput(e.target.value); - }} - placeholder={`Please enter the user to confirm, i.e. ${user.id}`} - required - /> - - - - - - - + header="Delete user role" + specialContent={{getBadge(deleteRole, false)}} + content="Are you sure you want to delete this user role?" + type="delete" + onConfirm={handleRoleDelete} + placeholder={`Please enter the user name to confirm.`} + confirmationText={user.id} + /> ) : ( '' )} From 9a44597423e40a1cbdf0bd645abaa3c1e17a8ad6 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 03:36:40 +0530 Subject: [PATCH 09/33] feat: add processContent prop to DeleteOrResetModal for additional processing information --- src/components/Misc/DeleteOrResetModal.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index d61082cb..6891cb2d 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -10,6 +10,7 @@ type DeleteOrResetModalProps = { isOpen: boolean; onClose: () => void; confirmationText: string; + processContent?: React.ReactNode; isProcessing?: boolean; onConfirm: () => void; placeholder: string; @@ -24,6 +25,7 @@ type DeleteOrResetModalProps = { * @param specialContent - Could be used to render additional text or components. * @param content - Content text for the modal. * @param confirmationText - Text to confirm the action. + * @param processContent - Content below text input ideally for some process. * @param isProcessing - Whether the action is processing. * @param onConfirm - Function to confirm the action. * @param placeholder - Placeholder text for the input field. @@ -36,6 +38,7 @@ const DeleteOrResetModal = ({ isOpen, onClose, confirmationText, + processContent, isProcessing, onConfirm, placeholder, @@ -79,6 +82,9 @@ const DeleteOrResetModal = ({ + + {/* Content below text input ideally for some process */} + {processContent} @@ -87,10 +93,7 @@ const DeleteOrResetModal = ({ - From f1397e4a5cccb5ddd981f57f2bfadfedfa7e3c20 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 03:38:37 +0530 Subject: [PATCH 10/33] Updated modal for reset password with common modal --- src/pages/AccessManagement/PrivilegeTR.tsx | 39 ----------- src/pages/AccessManagement/RoleTR.tsx | 79 ++++++---------------- 2 files changed, 21 insertions(+), 97 deletions(-) diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index ef6b2fee..f2f88328 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -296,45 +296,6 @@ const PrivilegeTR: FC = (props) => { confirmationText={roleName} /> {getRoleData?.data?.[deletePrivilegeIndex] ? ( - // - // - // {getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)} - // { - // setUserInput(e.target.value); - // }} - // placeholder={`Please enter the role to confirm, i.e. ${roleName}`} - // required - // /> - // - - // - // - // - // - // = (props) => { '' )} - - - { - setUserInput(e.target.value); - }} - required - mb={4} - /> - - {updateUserPasswordIsError ? ( - + header="Change user password" + content="Are you sure you want to reset this user's password?" + type="reset" + onConfirm={handleResetPassword} + processContent={ + updateUserPasswordIsError ? ( + {resetPasswordError} ) : updateUserPasswordIsLoading ? ( - loading + + loading + ) : udpateUserPasswordData?.data ? ( - + Password = (props) => { code={udpateUserPasswordData?.data} copiedLabel="Password copied to clipboard" /> - + Warning this is the only time you are able to see Password ) : ( '' - )} - - - {user.method === 'native' ? ( - - ) : ( - Cannot reset password for this user - )} - - - + ) + } + placeholder={`Please enter the user to confirm, i.e. ${user.id}`} + confirmationText={user.id} + isProcessing={!updateUserPasswordIsLoading} + /> Date: Sat, 23 Nov 2024 03:58:12 +0530 Subject: [PATCH 11/33] feat: enhance DeleteOrResetModal to support 'simple' type and adjust confirmation logic --- src/components/Misc/DeleteOrResetModal.tsx | 49 ++++++++++++++-------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 6891cb2d..196ad64a 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -2,23 +2,33 @@ import { Box, Button, Modal, Stack, Text, TextInput } from '@mantine/core'; import classes from './styles/deletemodal.module.css'; import { ChangeEvent, useCallback, useState } from 'react'; -type DeleteOrResetModalProps = { - type: 'delete' | 'reset'; +type BaseProps = { header: string; specialContent?: React.ReactNode; content: string; isOpen: boolean; onClose: () => void; - confirmationText: string; processContent?: React.ReactNode; isProcessing?: boolean; onConfirm: () => void; - placeholder: string; }; +// 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 - Type of the modal. + * @param type - Type of the modal, could be 'delete', 'reset' or 'simple'. * @param isOpen - Whether the modal is open. * @param onClose - Function to close the modal. * @param header - Header text for the modal. @@ -29,7 +39,7 @@ type DeleteOrResetModalProps = { * @param isProcessing - Whether the action is processing. * @param onConfirm - Function to confirm the action. * @param placeholder - Placeholder text for the input field. - * */ + */ const DeleteOrResetModal = ({ type, header, @@ -50,7 +60,7 @@ const DeleteOrResetModal = ({ }, []); const tryConfirm = () => { - if (confirmationText === confirmText) { + if (type === 'simple' || confirmationText === confirmText) { setConfirmText(''); onConfirm(); } @@ -60,6 +70,7 @@ const DeleteOrResetModal = ({ setConfirmText(''); onClose(); }; + return ( {specialContent} {content} - - Please type {`"${confirmationText}"`} to confirm{' '} - {type === 'delete' ? 'deletion' : 'reset'}. - - - - - {/* Content below text input ideally for some process */} + {type !== 'simple' && ( + <> + + Please type {`"${confirmationText}"`} to + confirm {type === 'delete' ? 'deletion' : 'reset'}. + + + + )} {processContent} @@ -93,8 +105,11 @@ const DeleteOrResetModal = ({ - From 426a356fecd70c7858c4841120874ac1bfce5108 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 04:00:42 +0530 Subject: [PATCH 12/33] Updated delete tile modal in dashboard with a simple delete or reset modal --- src/pages/Dashboards/Dashboard.tsx | 36 ++++++++---------------------- 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/src/pages/Dashboards/Dashboard.tsx b/src/pages/Dashboards/Dashboard.tsx index b5609408..d9b61d5d 100644 --- a/src/pages/Dashboards/Dashboard.tsx +++ b/src/pages/Dashboards/Dashboard.tsx @@ -22,6 +22,7 @@ import { Layout } from 'react-grid-layout'; import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider'; import { EditTileType, ImportDashboardType, Tile as TileType } from '@/@types/parseable/api/dashboards'; import { templates } from './assets/templates'; +import DeleteOrResetModal from '@/components/Misc/DeleteOrResetModal'; const { toggleCreateDashboardModal, @@ -126,34 +127,15 @@ const DeleteTileModal = () => { if (!activeDashboard?.dashboard_id || !deleteTileId || !selectedTile) return null; return ( - Delete Tile}> - - - Are you sure want to delete this tile ? - - - - - - - - - - - + header="Delete Tile" + content="Are you sure you want to delete this tile?" + type="simple" + onConfirm={onConfirm} + isProcessing={isUpdatingDashboard} + /> ); }; From 42f2e559d5811ec76d34ab8b916cf4c40f2a4229 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 04:03:31 +0530 Subject: [PATCH 13/33] chore: minor change --- src/pages/AccessManagement/RoleTR.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index 68b89e77..6f989bc9 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -252,7 +252,7 @@ const RoleTR: FC = (props) => { ) : updateUserPasswordIsLoading ? ( - loading + loading... ) : udpateUserPasswordData?.data ? ( From 83eda63f74f5af9b834a4d33569a288194e20034 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 04:31:53 +0530 Subject: [PATCH 14/33] Updated delete stream modal to be consistent with other deletion modals --- .../Stream/components/DeleteStreamModal.tsx | 49 +++++++++++-------- src/pages/Stream/styles/Logs.module.css | 22 +++++++-- 2 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/pages/Stream/components/DeleteStreamModal.tsx b/src/pages/Stream/components/DeleteStreamModal.tsx index 7c4b0003..f8806328 100644 --- a/src/pages/Stream/components/DeleteStreamModal.tsx +++ b/src/pages/Stream/components/DeleteStreamModal.tsx @@ -1,4 +1,4 @@ -import { Button, Group, Modal, TextInput } from '@mantine/core'; +import { Button, Group, Modal, Stack, Text, TextInput } from '@mantine/core'; import styles from '../styles/Logs.module.css'; import { useCallback, useState } from 'react'; import { useLogStream } from '@/hooks/useLogStream'; @@ -15,6 +15,7 @@ const DeleteStreamModal = () => { setConfirmInputValue(e.target.value); }, []); const onCloseModal = useCallback(() => { + setConfirmInputValue(''); setLogsStore((store) => toggleDeleteModal(store, false)); }, []); const { deleteLogStreamMutation } = useLogStream(); @@ -42,25 +43,33 @@ const DeleteStreamModal = () => { centered className={styles.modalStyle} styles={{ title: { fontWeight: 700 } }}> - - - - - + + + Are you sure you want to delete this stream? + + Please type {`"${currentStream}"`} to confirm. + + + + + + + + + ); }; diff --git a/src/pages/Stream/styles/Logs.module.css b/src/pages/Stream/styles/Logs.module.css index 0ab4c807..bfe7e164 100644 --- a/src/pages/Stream/styles/Logs.module.css +++ b/src/pages/Stream/styles/Logs.module.css @@ -196,6 +196,22 @@ font-weight: 600; } +.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; +} + .fieldTitle { font-size: var(--mantine-font-size-sm); font-weight: 500; @@ -250,10 +266,10 @@ .copyIcon { color: #211f1f; } -.copyIcon:hover {background-color: #f1f3f5; +.copyIcon:hover { + background-color: #f1f3f5; } - .customCell { position: relative; @@ -273,4 +289,4 @@ display: none; } } -} \ No newline at end of file +} From 63cf0984887b7759df79e997d503f8fdd29064f0 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 04:50:58 +0530 Subject: [PATCH 15/33] removed loading from confirm button in DeleteOrResetModal and rearrange Cancel button in DeleteIngestorModal --- src/components/Misc/DeleteOrResetModal.tsx | 3 +-- src/pages/Systems/DeleteIngestorModal.tsx | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 196ad64a..844b1a62 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -107,8 +107,7 @@ const DeleteOrResetModal = ({ diff --git a/src/pages/Systems/DeleteIngestorModal.tsx b/src/pages/Systems/DeleteIngestorModal.tsx index 285b6136..5a42a6e8 100644 --- a/src/pages/Systems/DeleteIngestorModal.tsx +++ b/src/pages/Systems/DeleteIngestorModal.tsx @@ -59,6 +59,9 @@ export default function DeleteIngestorModal(props: { modalOpened: boolean; close Do you want to delete {currentMachineAddress} ? + - ) : ( From a433c2fc10cff231ea32faac87783b54d6e08732 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 05:05:39 +0530 Subject: [PATCH 16/33] Improved button disable logic in DeleteOrResetModal for better UX --- src/components/Misc/DeleteOrResetModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 844b1a62..81101277 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -105,8 +105,9 @@ const DeleteOrResetModal = ({ + {/* Disable the button if the confirmation text is not correct or the action is processing. */} From f1d320cdb9bfe469d10e2f61e1c5c554e9c3f665 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 05:08:10 +0530 Subject: [PATCH 17/33] Refactor RoleTR component: remove unused user input state, fixed reset password functionality, and update placeholder texts for better clarity --- src/pages/AccessManagement/RoleTR.tsx | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index 6f989bc9..d41bc3bb 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -43,7 +43,6 @@ const RoleTR: FC = (props) => { const [deleteRole, setDeleteRole] = useState(null); const [opened, { open, close }] = useDisclosure(false); - const [UserInput, setUserInput] = useState(''); const [SelectedRole, setSelectedRole] = useState(''); const [roleSearchValue, setRoleSearchValue] = useState(''); @@ -101,18 +100,16 @@ const RoleTR: FC = (props) => { // For Delete User const handleCloseDelete = () => { closeDelete(); - setUserInput(''); }; const handleDelete = () => { deleteUserMutation({ userName: user.id, onSuccess: props.getUserRefetch }); closeDelete(); - setUserInput(''); }; // For Delete Role const handleRoleDelete = () => { - let filtered = Object.keys(getUserRolesData?.data).filter((role) => role !== deleteRole); + const filtered = Object.keys(getUserRolesData?.data).filter((role) => role !== deleteRole); updateUserMutation({ userName: user.id, roles: filtered }); closeDeleteRole(); setDeleteRole(null); @@ -120,7 +117,6 @@ const RoleTR: FC = (props) => { }; const handleCloseRoleDelete = () => { closeDeleteRole(); - setUserInput(''); }; // For Edit Role @@ -131,7 +127,7 @@ const RoleTR: FC = (props) => { }; const handleEditUserRole = () => { - let userRoleArray: any = Object.keys(getUserRolesData?.data); + const userRoleArray: any = Object.keys(getUserRolesData?.data); if (userRoleArray.includes(SelectedRole) || SelectedRole === '') { return; } @@ -144,11 +140,10 @@ const RoleTR: FC = (props) => { // for reset password const handleCloseResetPassword = () => { close(); - setUserInput(''); }; - const handleResetPassword = () => { - updateUserPasswordMutation({ userName: UserInput }); + const handleResetPassword = (userName: string) => { + updateUserPasswordMutation({ userName: userName }); }; const classes = styles; @@ -219,7 +214,7 @@ const RoleTR: FC = (props) => { content="Are you sure you want to delete this user?" type="delete" onConfirm={handleDelete} - placeholder={`Please enter the user name to confirm.`} + placeholder={`Type the name of the user`} confirmationText={user.id} /> {getUserRolesData?.data && deleteRole && getUserRolesData?.data[deleteRole] ? ( @@ -231,7 +226,7 @@ const RoleTR: FC = (props) => { content="Are you sure you want to delete this user role?" type="delete" onConfirm={handleRoleDelete} - placeholder={`Please enter the user name to confirm.`} + placeholder={`Type the name of the user`} confirmationText={user.id} /> ) : ( @@ -244,7 +239,7 @@ const RoleTR: FC = (props) => { header="Change user password" content="Are you sure you want to reset this user's password?" type="reset" - onConfirm={handleResetPassword} + onConfirm={() => handleResetPassword(user.id)} processContent={ updateUserPasswordIsError ? ( @@ -272,9 +267,9 @@ const RoleTR: FC = (props) => { '' ) } - placeholder={`Please enter the user to confirm, i.e. ${user.id}`} + placeholder={`Type the name of the user`} confirmationText={user.id} - isProcessing={!updateUserPasswordIsLoading} + isProcessing={updateUserPasswordIsLoading} /> Date: Sat, 23 Nov 2024 05:12:55 +0530 Subject: [PATCH 18/33] Rearranged props according to the modal UI flow --- src/components/Misc/DeleteOrResetModal.tsx | 12 ++++++------ src/pages/AccessManagement/PrivilegeTR.tsx | 8 ++++---- src/pages/AccessManagement/RoleTR.tsx | 14 +++++++------- src/pages/Dashboards/Dashboard.tsx | 2 +- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 81101277..05de552f 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -3,11 +3,11 @@ import classes from './styles/deletemodal.module.css'; import { ChangeEvent, useCallback, useState } from 'react'; type BaseProps = { + isOpen: boolean; + onClose: () => void; header: string; specialContent?: React.ReactNode; content: string; - isOpen: boolean; - onClose: () => void; processContent?: React.ReactNode; isProcessing?: boolean; onConfirm: () => void; @@ -34,24 +34,24 @@ type DeleteOrResetModalProps = * @param header - Header text for the modal. * @param specialContent - Could be used to render additional text or components. * @param content - Content text for the modal. + * @param placeholder - Placeholder text for the input field. * @param confirmationText - Text to confirm the action. * @param processContent - Content below text input ideally for some process. * @param isProcessing - Whether the action is processing. * @param onConfirm - Function to confirm the action. - * @param placeholder - Placeholder text for the input field. */ const DeleteOrResetModal = ({ type, + isOpen, + onClose, header, specialContent, content, - isOpen, - onClose, + placeholder, confirmationText, processContent, isProcessing, onConfirm, - placeholder, }: DeleteOrResetModalProps) => { const [confirmText, setConfirmText] = useState(''); diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index f2f88328..847297cf 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -286,26 +286,26 @@ const PrivilegeTR: FC = (props) => { {getRoleData?.data?.[deletePrivilegeIndex] ? ( {getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)}} - type="delete" content={`Are you sure you want to delete this role privilege?`} placeholder={`Type name of the role to confirm.`} - onConfirm={handlePrivilegeDelete} confirmationText={roleName} + onConfirm={handlePrivilegeDelete} /> ) : ( '' diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index d41bc3bb..168e62c8 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -208,37 +208,39 @@ const RoleTR: FC = (props) => { {getUserRolesData?.data && deleteRole && getUserRolesData?.data[deleteRole] ? ( {getBadge(deleteRole, false)}} content="Are you sure you want to delete this user role?" - type="delete" - onConfirm={handleRoleDelete} placeholder={`Type the name of the user`} confirmationText={user.id} + onConfirm={handleRoleDelete} /> ) : ( '' )} handleResetPassword(user.id)} processContent={ updateUserPasswordIsError ? ( @@ -267,8 +269,6 @@ const RoleTR: FC = (props) => { '' ) } - placeholder={`Type the name of the user`} - confirmationText={user.id} isProcessing={updateUserPasswordIsLoading} /> { return ( From 57b75de433746b4e83ffa764600c972434be72c8 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 05:21:22 +0530 Subject: [PATCH 19/33] Removed unwanted userunput state and renamte useState value var --- src/pages/AccessManagement/PrivilegeTR.tsx | 31 ++++++++++------------ 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index 847297cf..6632edc1 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -33,8 +33,6 @@ interface PrivilegeTRProps { const PrivilegeTR: FC = (props) => { const { roleName, defaultRole, deleteRoleMutation, getRoleIsLoading, getRoleIsError } = props; - const [UserInput, setUserInput] = useState(''); - // Delete Privilege Modal Constants : Starts const [deletePrivilegeIndex, setDeletePrivilegeIndex] = useState(0); const [isDeletedPrivilegeOpen, { open: openDeletePrivilege, close: closeDeletePrivilege }] = useDisclosure(); @@ -47,7 +45,7 @@ const PrivilegeTR: FC = (props) => { // Update Role Modal Constants : Starts const [isUpdatedRoleOpen, { open: openUpdateRole, close: closeUpdateRole }] = useDisclosure(); const [selectedPrivilege, setSelectedPrivilege] = useState(''); - const [SelectedStream, setSelectedStream] = useState(''); + const [selectedStream, setSelectedStream] = useState(''); const [streamSearchValue, setStreamSearchValue] = useState(''); const [tagInput, setTagInput] = useState(''); const { getLogStreamListData } = useGetLogStreamList(); @@ -105,7 +103,6 @@ const PrivilegeTR: FC = (props) => { const handleClosePrivilegeDelete = () => { closeDeletePrivilege(); - setUserInput(''); }; const handlePrivilegeDelete = () => { @@ -158,12 +155,12 @@ const PrivilegeTR: FC = (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, }, }); @@ -171,7 +168,7 @@ const PrivilegeTR: FC = (props) => { getRoleData?.data?.push({ privilege: selectedPrivilege, resource: { - stream: SelectedStream, + stream: selectedStream, }, }); } @@ -193,7 +190,7 @@ const PrivilegeTR: FC = (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 = (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 = (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; } @@ -336,10 +333,10 @@ const PrivilegeTR: FC = (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 From c72c1255b5c20259e38a8c6eace55f17afe1e66f Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 05:26:07 +0530 Subject: [PATCH 20/33] fix: :pencil2: fixed selectedRole state value var naming --- src/pages/AccessManagement/RoleTR.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index 168e62c8..d4ad396e 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -43,7 +43,7 @@ const RoleTR: FC = (props) => { const [deleteRole, setDeleteRole] = useState(null); const [opened, { open, close }] = useDisclosure(false); - const [SelectedRole, setSelectedRole] = useState(''); + const [selectedRole, setSelectedRole] = useState(''); const [roleSearchValue, setRoleSearchValue] = useState(''); const { getUserRolesData, getUserRolesMutation, updateUserMutation, updateUserIsSuccess } = useUser(); @@ -128,10 +128,10 @@ const RoleTR: FC = (props) => { const handleEditUserRole = () => { const userRoleArray: any = Object.keys(getUserRolesData?.data); - if (userRoleArray.includes(SelectedRole) || SelectedRole === '') { + if (userRoleArray.includes(selectedRole) || selectedRole === '') { return; } - userRoleArray.push(SelectedRole); + userRoleArray.push(selectedRole); updateUserMutation({ userName: user.id, roles: userRoleArray }); handleCloseRoleEdit(); @@ -284,10 +284,10 @@ const RoleTR: FC = (props) => { setSelectedRole(value ?? ''); }} nothingFoundMessage="No roles found" - value={SelectedRole} + value={selectedRole} searchValue={roleSearchValue} onSearchChange={(value) => setRoleSearchValue(value)} - onDropdownClose={() => setRoleSearchValue(SelectedRole)} + onDropdownClose={() => setRoleSearchValue(selectedRole)} onDropdownOpen={() => setRoleSearchValue('')} data={getRolesData?.data} searchable @@ -305,7 +305,7 @@ const RoleTR: FC = (props) => { // if role is already assigned or no role is selected then disable the button disabled={ getUserRolesData?.data && - (Object.keys(getUserRolesData?.data).includes(SelectedRole) || SelectedRole === '') + (Object.keys(getUserRolesData?.data).includes(selectedRole) || selectedRole === '') ? true : false }> From 1174d1067c84cbdbbb83425d75b7ef41bf1f162d Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sat, 23 Nov 2024 23:57:47 +0530 Subject: [PATCH 21/33] updated variable names for clarity and consistency in DeleteOrResetModal and related components --- src/components/Misc/DeleteOrResetModal.tsx | 20 +++++++++---------- ...dule.css => DeleteOrResetModal.module.css} | 0 src/pages/AccessManagement/RoleTR.tsx | 4 ++-- src/pages/Dashboards/Dashboard.tsx | 2 +- src/pages/Dashboards/Toolbar.tsx | 2 +- 5 files changed, 14 insertions(+), 14 deletions(-) rename src/components/Misc/styles/{deletemodal.module.css => DeleteOrResetModal.module.css} (100%) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 05de552f..51e28d74 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -1,5 +1,5 @@ import { Box, Button, Modal, Stack, Text, TextInput } from '@mantine/core'; -import classes from './styles/deletemodal.module.css'; +import classes from './styles/DeleteOrResetModal.module.css'; import { ChangeEvent, useCallback, useState } from 'react'; type BaseProps = { @@ -8,8 +8,8 @@ type BaseProps = { header: string; specialContent?: React.ReactNode; content: string; - processContent?: React.ReactNode; - isProcessing?: boolean; + actionProcessingContent?: React.ReactNode; + isActionInProgress?: boolean; onConfirm: () => void; }; @@ -35,9 +35,9 @@ type DeleteOrResetModalProps = * @param specialContent - Could be used to render additional text or components. * @param content - Content text for the modal. * @param placeholder - Placeholder text for the input field. - * @param confirmationText - Text to confirm the action. - * @param processContent - Content below text input ideally for some process. - * @param isProcessing - Whether the action is processing. + * @param confirmationText - Expected text to confirm the action. + * @param actionProcessingContent - Content below text input ideally to show processing status or related information. + * @param isActionInProgress - Whether the action is processing, to disable the confirm button. * @param onConfirm - Function to confirm the action. */ const DeleteOrResetModal = ({ @@ -49,8 +49,8 @@ const DeleteOrResetModal = ({ content, placeholder, confirmationText, - processContent, - isProcessing, + actionProcessingContent, + isActionInProgress, onConfirm, }: DeleteOrResetModalProps) => { const [confirmText, setConfirmText] = useState(''); @@ -96,7 +96,7 @@ const DeleteOrResetModal = ({ )} - {processContent} + {actionProcessingContent} @@ -107,7 +107,7 @@ const DeleteOrResetModal = ({ {/* Disable the button if the confirmation text is not correct or the action is processing. */} diff --git a/src/components/Misc/styles/deletemodal.module.css b/src/components/Misc/styles/DeleteOrResetModal.module.css similarity index 100% rename from src/components/Misc/styles/deletemodal.module.css rename to src/components/Misc/styles/DeleteOrResetModal.module.css diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index d4ad396e..d6917108 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -242,7 +242,7 @@ const RoleTR: FC = (props) => { placeholder={`Type the name of the user`} confirmationText={user.id} onConfirm={() => handleResetPassword(user.id)} - processContent={ + actionProcessingContent={ updateUserPasswordIsError ? ( {resetPasswordError} @@ -269,7 +269,7 @@ const RoleTR: FC = (props) => { '' ) } - isProcessing={updateUserPasswordIsLoading} + isActionInProgress={updateUserPasswordIsLoading} /> { header="Delete Tile" content="Are you sure you want to delete this tile?" onConfirm={onConfirm} - isProcessing={isUpdatingDashboard} + isActionInProgress={isUpdatingDashboard} /> ); }; diff --git a/src/pages/Dashboards/Toolbar.tsx b/src/pages/Dashboards/Toolbar.tsx index 652eb2d9..8a49686b 100644 --- a/src/pages/Dashboards/Toolbar.tsx +++ b/src/pages/Dashboards/Toolbar.tsx @@ -147,7 +147,7 @@ const DeleteDashboardModal = () => { isOpen={deleteDashboardModalOpen} onClose={closeModal} confirmationText={activeDashboard.name} - isProcessing={isDeleting} + isActionInProgress={isDeleting} onConfirm={onDelete} /> ); From edaf44638e152bc1ad66e5cf450fb3ee62e7af95 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Sun, 24 Nov 2024 00:07:01 +0530 Subject: [PATCH 22/33] Revamped prop descriptions and code clarity in DeleteOrResetModal --- src/components/Misc/DeleteOrResetModal.tsx | 29 ++++++++++++++-------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 51e28d74..ff9e2a9c 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -28,17 +28,17 @@ type DeleteOrResetModalProps = /** * Confirmation modal for deleting or resetting an item. - * @param type - Type of the modal, could be 'delete', 'reset' or 'simple'. - * @param isOpen - Whether the modal is open. - * @param onClose - Function to close the modal. - * @param header - Header text for the modal. - * @param specialContent - Could be used to render additional text or components. - * @param content - Content text for the modal. - * @param placeholder - Placeholder text for the input field. - * @param confirmationText - Expected text to confirm the action. - * @param actionProcessingContent - Content below text input ideally to show processing status or related information. - * @param isActionInProgress - Whether the action is processing, to disable the confirm button. - * @param onConfirm - Function to confirm the action. + * @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, @@ -55,10 +55,12 @@ const DeleteOrResetModal = ({ }: DeleteOrResetModalProps) => { const [confirmText, setConfirmText] = useState(''); + // Handler for the confirmation input field const onChangeHandler = useCallback((e: ChangeEvent) => { setConfirmText(e.target.value); }, []); + // Function to validate and trigger confirmation logic const tryConfirm = () => { if (type === 'simple' || confirmationText === confirmText) { setConfirmText(''); @@ -66,6 +68,7 @@ const DeleteOrResetModal = ({ } }; + // Function to close the modal and reset the confirmation text state. const closeModal = () => { setConfirmText(''); onClose(); @@ -87,6 +90,8 @@ const DeleteOrResetModal = ({ {specialContent} {content} + + {/* Render confirmation field for 'delete' or 'reset' types */} {type !== 'simple' && ( <> @@ -98,6 +103,8 @@ const DeleteOrResetModal = ({ )} {actionProcessingContent} + + {/* Action buttons */} - - - - + header="Delete Stream" + content="Are you sure you want to delete this stream?" + confirmationText={`${currentStream}`} + type="delete" + placeholder="Type the name of the stream" + onConfirm={handleDeleteStream} + /> ); }; diff --git a/src/pages/Stream/styles/Logs.module.css b/src/pages/Stream/styles/Logs.module.css index bfe7e164..cd2308d8 100644 --- a/src/pages/Stream/styles/Logs.module.css +++ b/src/pages/Stream/styles/Logs.module.css @@ -196,22 +196,6 @@ font-weight: 600; } -.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; -} - .fieldTitle { font-size: var(--mantine-font-size-sm); font-weight: 500; From ccb9d132adba2563f2f994a5ba3f9af1c6a113c6 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Thu, 28 Nov 2024 12:10:23 +0530 Subject: [PATCH 31/33] Refactor header properties in PrivilegeTR component to use string literals --- src/pages/AccessManagement/PrivilegeTR.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index 3a78d5af..e4d65798 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -286,7 +286,7 @@ const PrivilegeTR: FC = (props) => { type="delete" isOpen={isDeletedRoleOpen} onClose={handleCloseDelete} - header={'Delete Role'} + header="Delete Role" content="Are you sure you want to delete this Role?" placeholder="Type the role name to confirm" confirmationText={roleName} @@ -297,7 +297,7 @@ const PrivilegeTR: FC = (props) => { type="delete" isOpen={isDeletedPrivilegeOpen} onClose={handleClosePrivilegeDelete} - header={'Delete Privilege'} + header="Delete Privilege" specialContent={{getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)}} content="Are you sure you want to delete this role privilege?" placeholder="Type name of the role to confirm." From 7566323af21bb309551df7e1104ac0edd9a8e401 Mon Sep 17 00:00:00 2001 From: pranavgoel29 Date: Thu, 28 Nov 2024 12:35:33 +0530 Subject: [PATCH 32/33] moved DeleteOrResetModal styles to use CSS modules --- src/components/Misc/DeleteOrResetModal.tsx | 10 ++--- .../Misc/styles/DeleteOrResetModal.module.css | 38 +++++++++++++++---- 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/components/Misc/DeleteOrResetModal.tsx b/src/components/Misc/DeleteOrResetModal.tsx index 6f9e8a00..47ef920c 100644 --- a/src/components/Misc/DeleteOrResetModal.tsx +++ b/src/components/Misc/DeleteOrResetModal.tsx @@ -81,11 +81,11 @@ const DeleteOrResetModal = ({ onClose={closeModal} size="auto" centered - styles={{ - body: { padding: '0 1rem 1rem 1rem', width: 400 }, - header: { padding: '1rem', paddingBottom: '0.4rem' }, + classNames={{ + body: classes.modalBody, + header: classes.modalHeader, }} - title={{header}}> + title={{header}}> {specialContent} @@ -107,7 +107,7 @@ const DeleteOrResetModal = ({ {/* Action buttons */} - +