ManageDashboardsModal Documentation

Overview

The ManageDashboardsModal component is a modal dialog within the Vantage analytics and data platform that allows users to manage their dashboards. This includes viewing, duplicating, deleting, and navigating to different dashboards categorized by "My Dashboards," "Company Dashboards," and "Organization Dashboards." The component also features a search functionality to filter dashboards based on user input.

Purpose

The purpose of this component is to provide an intuitive interface for users to manage their dashboards efficiently, enabling easy access and organization of dashboards based on different ownership categories.

How It Works

1. State Management:

   • It uses state management to manage local state for loading status, fetched dashboard data, search input, and active menu options.

2. Data Fetching:

   • Upon opening the modal (isOpen prop), it triggers a data fetch from the /api/dashboard/list endpoint to retrieve available dashboards.
   • It maintains a loading state during the fetch, updating the UI accordingly.

3. Search Functionality:

   • Users can filter dashboards by typing into a search bar. The input is stored in the search state, and it dynamically filters the displayed dashboards.

4. Dashboard Actions:

   • Each dashboard can be duplicated or deleted through contextual actions that appear when a user selects a dashboard.
   • The component handles these actions via API calls to respective endpoints (/api/dashboard/duplicate and /api/dashboard/delete).

5. Routing:

   • When users select a dashboard, they are navigated to the corresponding dashboard page using the router.

6. UI Structure:

   • It presents dashboards in sections with the ability to show or hide action buttons based on permissions.

Settings

1. isOpen

• Input Type: Boolean
• Description: Determines whether the modal is open (true) or closed (false).
• Effect: If true, the modal is rendered; otherwise, it is not displayed.
• Default Value: false

2. onClose

• Input Type: Function
• Description: A callback function triggered to close the modal.
• Effect: Called when the user clicks the close button or when a dashboard is navigated to.
• Default Value: Not applicable (must be provided)

State Variables

• dashboards:

  • Type: Object
  • Description: Holds fetched dashboards, categorized into mine, company, and organization.

• loading:

  • Type: Boolean
  • Description: Indicates if data is currently loading.

• search:

  • Type: String
  • Description: Holds the current search input for filtering dashboards.

• activeMenu:

  • Type: String | null
  • Description: Tracks which dashboard's action menu is currently active.

• processingAction:

  • Type: String | null
  • Description: Indicates if a dashboard action (like duplicate/delete) is currently being processed.

API Expectations

The component expects the following data from APIs:

• GET /api/dashboard/list: Should return an object containing arrays of dashboards under mine, company, and organization.
• POST /api/dashboard/duplicate: Expects a body containing the dashboardId and returns the duplicated dashboard details.
• POST /api/dashboard/delete: Expects a body containing the dashboardId and returns a success or failure message.

Use Cases & Examples

Use Case 1: Team Collaboration

A project management team needs to manage shared dashboards where each member can duplicate templates for their projects while maintaining their view of the original dashboards.

Use Case 2: Personal Dashboard Organization

A data analyst requires a personal space to sort and manage their unique dashboards distinct from those shared by colleagues.

Use Case 3: Quick Access to Dashboards

Sales analysts need a quick way to navigate to important dashboards while having the option to organize or remove outdated dashboards.

Detailed Example Configuration

For the second use case, suppose a user wants to manage their personal dashboards effectively within the ManageDashboardsModal.

Configuration Example:

{
    "isOpen": true,
    "onClose": () => console.log("Modal closed")
}

Behavior:

• When the modal is opened, the user can see all their personal dashboards. They can filter through them using the search bar.
• The user may select a dashboard to view and use the duplicate action to create a copy of their preferred dashboard template to modify for a new project.
• The modal will display a loading state while fetching dashboards and a confirmation dialog before any deletion action occurs to prevent accidental loss of important data.

This example illustrates how the ManageDashboardsModal can facilitate the organization and management of dashboards within the Vantage platform, aligning with user needs and enhancing productivity.