DeleteWorkflowModal Documentation

Purpose

The DeleteWorkflowModal component is designed to prompt users with a confirmation dialog before permanently deleting a workflow within the Vantage analytics platform. This modal reinforces the gravity of the action by ensuring that users explicitly confirm their intention to delete the workflow, as this action cannot be undone. It facilitates data integrity by preventing accidental deletions and enhances user experience by providing a clear, interactive interface for critical actions.

How It Works

The component uses the BaseModal component as its foundation, allowing for a flexible modal dialog structure. It requires two key props: onClose and onDelete. When the user clicks the 'Delete' button, the onDelete function is invoked to process the deletion of the workflow, followed by closing the modal. The modal also features a cancellation option which allows users to back out of the deletion if accidentally accessed.

Settings

1. title

• Input Type: String
• Description: This setting specifies the title displayed at the top of the modal dialog. It communicates clearly to the user that the operation in question involves deleting a workflow.
• Default Value: "Delete Workflow"
• Behavior: The text can be customized to adapt to different deletion contexts, but remains consistent with the component’s primary function.

2. onClose

• Input Type: Function
• Description: This is a callback function to execute when the modal is closed, which is triggered when either the deletion process is confirmed or the user cancels the operation.
• Default Value: None
• Behavior: This function should hide or remove the modal from the user interface.

3. onDelete

• Input Type: Function
• Description: A callback function that executes the deletion of the workflow. It encapsulates the logic necessary to perform this action.
• Default Value: None
• Behavior: This is a critical setting that enables the deletion functionality and should handle any necessary backend operations to remove the workflow from storage.

4. footer

• Input Type: JSX Element
• Description: This setting allows customization of the modal footer, specifically the buttons displayed. The default implementation showcases "Cancel" and "Delete" buttons with specific actions tied to them.
• Default Value: Standard buttons are rendered, but can be customized by passing an alternative ModalFooterActions.
• Behavior: Customizing this setting permits additional actions or styling to be included in the modal footer.

5. closeOnBackdropClick

• Input Type: Boolean
• Description: This setting controls whether the modal should close when the backdrop area outside the modal is clicked. It is a common usability feature that enhances the user experience by allowing users an easy way to exit.
• Default Value: true
• Behavior: If set to true, clicking outside the modal will close it, providing users with an intuitive way to dismiss the modal without taking action.

Use Cases & Examples

Use Cases

1. User Interface Consistency: In large applications, maintaining a consistent user experience when performing destructive actions such as deletions is critical. The DeleteWorkflowModal ensures users are prompted consistently, reducing the chance of errors.

2. Workflow Management: Organizations often need to delete outdated or unnecessary workflows from their systems. This modal provides a dedicated interface for performing this task safely.

3. Preventing Data Loss: Accidental deletions are a common issue. By incorporating a modal confirmation, users are given an opportunity to rethink their actions and minimize the risk of important data loss.

Example Configuration

Suppose an organization wants to configure the DeleteWorkflowModal to delete a workflow named "Monthly Report Generation". Here’s how it might be set up:

function handleDelete() {
    // Logic to delete the workflow
}

function handleClose() {
    // Logic to close the modal, e.g., updating state to hide modal
}

// Usage of the DeleteWorkflow Modal
<DeleteWorkflowModal
    onClose={handleClose}
    onDelete={handleDelete}
/>

In this configuration:

• The onClose function will handle the modal's state change to ensure it is closed when the user cancels or confirms deletion.
• The onDelete function contains the deletion logic, ensuring that any necessary API calls or database operations are executed to remove the "Monthly Report Generation" workflow safely.

By utilizing the DeleteWorkflowModal in this way, users are provided with a clear, accessible method to manage their workflows effectively while minimizing the risks associated with irreversible actions.