Load Workflow Modal Documentation

Overview

The LoadWorkflowModal component is an integral part of the Vantage analytics and data platform, designed to facilitate the loading of predefined workflows. This modal allows users to search, select, and manage workflows efficiently, supporting bulk operations such as deletion. It is particularly valuable for users who manage multiple workflows within the platform and need to streamline their workflow management processes.

Settings

The LoadWorkflowModal accepts several properties and utilizes internal state to manage its behavior. Below is the detailed explanation of each setting:

Props

1. onClose

   • Input Type: Function
   • Description: A callback function that is invoked when the modal is closed. This should typically handle any cleanup or state updates related to modal closure.
   • Default Value: None. This must be supplied by the parent component.

2. onLoad

   • Input Type: Function
   • Description: A callback function that is triggered when a workflow is selected and loaded. This function should receive the selected workflow's ID as an argument, allowing the parent to take appropriate action based on the selected workflow.
   • Default Value: None. This must be supplied by the parent component.

3. apiBasePath

   • Input Type: String
   • Description: This sets the base path for API calls made by the modal to fetch and manage workflows. Changes to this setting will affect where the component sends its API requests.
   • Default Value: /api/workflow. This is the default endpoint for workflow management.

Internal State Variables

1. workflows

   • Input Type: Array or Object
   • Description: This state stores the fetched workflows, either in categorized (object format with mine, company, organization) or uncategorized (array of all workflows) form.
   • Default Value: null. Initially, it has no workflows until fetched from the API.

2. selectedWorkflowId

   • Input Type: String or null
   • Description: Holds the ID of the currently selected workflow. This is used to highlight the selected workflow and determine which workflow to load when the user triggers the load operation.
   • Default Value: null. Indicates no workflow is selected until an action is taken.

3. search

   • Input Type: String
   • Description: Stores the current search query input by the user. This value is dynamically used to filter the displayed workflows based on the user's search criteria.
   • Default Value: '' (an empty string).

4. deleteIds

   • Input Type: Set
   • Description: A Set that tracks the IDs of workflows that the user wishes to delete. This supports bulk deletion operations. It changes dynamically as the user toggles selections for deletion.
   • Default Value: A new empty Set (new Set()).

5. deleteMode

   • Input Type: Boolean
   • Description: Indicates whether the modal is currently in delete mode. In this mode, users can select multiple workflows for deletion.
   • Default Value: false. The modal begins in standard browsing mode.

6. deleting

   • Input Type: Boolean
   • Description: A flag to indicate that a delete operation is in progress. This is used to disable buttons and provide feedback to the user during the deletion process.
   • Default Value: false.

How It Works

1. Fetching Workflows: On component mount, the LoadWorkflowModal triggers the fetchWorkflows function, which makes an API call to retrieve workflows. Depending on the API response, workflows may be categorized or listed in a flat structure.

2. Workflow Search and Filtering: The component utilizes memoization to flatten and filter workflows based on the user's search query. This provides a responsive experience where the list of workflows updates in real-time as the user types.

3. Selection and Management of Workflows: Users can select workflows by clicking on them, and in delete mode, they can toggle multiple workflows for bulk deletion. The appearance of each workflow row changes based on its selection state or delete mode status.

4. Bulk Deletion: If in delete mode, users can perform bulk deletions. Upon confirmation, the selected workflows are deleted via API calls, and the modal retrieves updated workflow data afterward.

5. Loading Selected Workflow: When the "Load" button is clicked, the onLoad function is invoked with the ID of the selected workflow, allowing the parent component to handle the loading mechanism.

Use Cases & Examples

Use Case 1: Workflow Management for Data Analysts

A data analyst frequently switches between various predefined workflows for different analysis tasks. The LoadWorkflowModal allows the analyst to quickly select and load the needed workflow, improving efficiency.

Use Case 2: Bulk Workflow Deletion

A user needs to clean up their workflow list by removing obsolete workflows. This functionality can be achieved with bulk deletion capabilities offered in the modal.

Use Case 3: Collaborative Workflow Sharing

In a team setting, multiple users may need to share workflows. The modal's categorized view helps team members identify workflows relevant to their specific roles (e.g., 'My Workflows', 'Company').

Example Configuration Data

For a technical implementation, the LoadWorkflowModal can be configured within a parent component as follows:

function ParentComponent() {
    const handleClose = () => {
        // Logic to handle modal close
    };

    const handleLoad = (workflowId) => {
        // Logic to handle loading a specific workflow
        console.log('Loading workflow with ID:', workflowId);
    };

    return (
        <LoadWorkflowModal
            onClose={handleClose}
            onLoad={handleLoad}
            apiBasePath="/custom/api/workflow" // Custom endpoint for API requests
        />
    );
}

In this configuration, the LoadWorkflowModal is set to use a custom API base path, enabling specific backend configurations predefined by the organization while ensuring necessary callbacks for managing the modal's lifecycle.