DeleteConfirmModal Documentation

Overview

The DeleteConfirmModal component is a dialog that prompts users to confirm the deletion of an entity within the Vantage analytics and data platform. It is designed for critical actions where users must verify their intention to delete, as this action cannot be undone. The modal can handle various types of deletions, such as organizations, clients, and users, displaying relevant information based on the type of entity being deleted.

Purpose

The purpose of this component is to provide a clear and engaging interface for users to confirm dangerous actions like deletions. It informs users of all entities that will be affected by the deletion and provides an option to reassign users instead of deleting them when appropriate. The component promotes a user-friendly approach to confirmation of sensitive operations.

Settings

1. open

• Input Type: Boolean
• Description: Controls whether the modal is visible or hidden. When set to true, the modal renders on the screen; when set to false, the modal is not displayed.
• Default Value: false

2. onClose

• Input Type: Function
• Description: A callback function that is invoked when the user clicks on the close button or the overlay area outside the modal. This enables the parent component to manage the modal's visibility state.
• Default Value: None (must be provided).

3. onConfirm

• Input Type: Function
• Description: A callback function that is called when the user confirms their intention to delete the entity. It optionally accepts a reassignClientId, which represents the ID of the client to which users can be reassigned. If this is null, it indicates that no reassignment should take place.
• Default Value: None (must be provided).

4. entityType

• Input Type: String (Enum: 'organization' | 'client' | 'user')
• Description: Specifies the type of entity that is being deleted. This setting determines the labels and messages displayed in the modal.
• Default Value: None (must be provided).

5. entityName

• Input Type: String
• Description: The name of the entity that is being deleted. It is displayed prominently in the modal to inform users of what they are about to delete.
• Default Value: None (must be provided).

6. affectedClients

• Input Type: Array of Objects
• Description: An array containing objects representing companies (clients) that will be deleted if the deletion of an organization occurs. Each object should have an id and name property. It's displayed in the modal to highlight the impact of the deletion.
• Default Value: [] (empty array).

7. affectedUsers

• Input Type: Array of Objects
• Description: An array containing user objects that will be affected by the deletion. Each user object should have an id, email, first_name, and last_name. This information is shown to confirm which users will lose access after the deletion.
• Default Value: [] (empty array).

8. availableClients

• Input Type: Array of Objects
• Description: An array of objects representing clients available for user reassignment. The id and name of each client can be used to reassign users instead of deleting them. This is particularly relevant in cases where a client is being deleted, and there are users associated with that client.
• Default Value: [] (empty array).

How It Works

The DeleteConfirmModal component utilizes several internal states and effects:

1. State Management: It manages two pieces of state: reassignClientId, which tracks the selected client for reassignment, and confirming, which indicates if the delete operation is in progress.
2. Effect Hook: When the modal opens, it resets the state variables to ensure a fresh start with every presentation of the modal.
3. Event Handling: Clicking the confirmation button triggers the handleConfirm function, which calls the onConfirm callback with the selected reassignment ID (if available).
4. Rendering Conditionality: The modal conditionally renders content based on the entity type and the lengths of affected clients and users arrays, ensuring that relevant information is displayed correctly.

Use Cases & Examples

Use Cases

1. Organization Deletion: A user wants to delete an organization and needs to know which clients and users will be affected by this action.
2. Client Deletion: A user needs to delete a client and has users associated with that client. The user must decide whether to reassign users to another client or delete them.
3. User Deletion: An admin removes a user from the system, ensuring they understand the implications of this deletion.

Example Configuration

Use Case: Deleting a Client (client) and Reassigning Users

<DeleteConfirmModal
    open={isModalOpen}
    onClose={handleCloseModal}
    onConfirm={handleDeleteClient}
    entityType='client'
    entityName='Acme Corp'
    affectedClients={[]}  // No clients are affected in this case.
    affectedUsers={[
        { id: 1, email: 'john.doe@example.com', first_name: 'John', last_name: 'Doe' },
        { id: 2, email: 'jane.smith@example.com', first_name: 'Jane', last_name: 'Smith' },
    ]}
    availableClients={[
        { id: 3, name: 'Tech Solutions Inc.' },
        { id: 4, name: 'Innovate LLC' },
    ]}
/>

In this configuration:

• The modal indicates that the user is attempting to delete the client 'Acme Corp.'
• It shows that two users, John Doe and Jane Smith, will be affected by this deletion.
• The option to reassign these users to either 'Tech Solutions Inc.' or 'Innovate LLC' is presented, allowing the user to select a new client for reassignment directly from the modal.