Users Management

Purpose

The Users Management component of the Vantage analytics and data platform is designed to serve as the central interface for administrators to manage user accounts. This includes functionalities for viewing, adding, editing, and deleting users, as well as managing user-specific meta-data such as roles and associated clients. The component simplifies user management by offering intuitive controls and real-time data fetching to keep the user interface up-to-date.

Settings

The Users Management component does not expose traditional settings in the form of configurable inputs, but rather features various internal states and functions that dictate how the component behaves. Below is a detailed analysis of these state variables and their effects:

1. users

• Input Type: Array of objects
• Purpose: Stores the list of users retrieved from the backend API.
• Effect of Change: When updated (e.g., users are added, modified, or deleted), the user list in the UI is re-rendered to reflect the latest information.
• Default Value: [] (empty array)

2. clients

• Input Type: Array of objects
• Purpose: Holds the list of clients associated with users for selections in user creation/editing.
• Effect of Change: When clients are modified, it updates the available options in the user editor modal for assigning clients to users.
• Default Value: [] (empty array)

3. roles

• Input Type: Array of objects
• Purpose: Contains the list of roles users can be assigned to during creation or editing.
• Effect of Change: When roles are modified, it updates the available options in the user editor modal for assigning roles to users.
• Default Value: [] (empty array)

4. isLoading

• Input Type: Boolean
• Purpose: Indicates whether the component is currently fetching user data.
• Effect of Change: If true, loading indicators are shown; if false, the user interface displays the user list.
• Default Value: true

5. searchQuery

• Input Type: String
• Purpose: Captures the text input for user search functionality.
• Effect of Change: Filters the displayed user list based on the input. As the search query changes, the UI dynamically updates to show matching users.
• Default Value: '' (empty string)

6. isModalOpen

• Input Type: Boolean
• Purpose: Tracks whether the user editor modal is currently open for adding or editing users.
• Effect of Change: When true, the modal is displayed, allowing user details to be entered or edited.
• Default Value: false

7. editingUser

• Input Type: Object or null
• Purpose: Stores the currently selected user for editing.
• Effect of Change: When set to a user object, the editor modal is pre-populated with that user's data.
• Default Value: null

8. activeMenu

• Input Type: String or null
• Purpose: Stores the state of the currently opened menu (if any).
• Effect of Change: Determines which menu is expanded for user actions (like edit/delete) and controls menu visibility.
• Default Value: null

Deletion Impact Modal State Variables:

9. deleteTarget

   • Input Type: Object or null
   • Purpose: References the user selected for deletion.
   • Effect of Change: Allows for confirmation and displays relevant information before proceeding with deletion.
   • Default Value: null

10. deleteImpact

    • Input Type: Object or null
    • Purpose: Holds data related to the potential impacts of deleting a user (like data ownership or responsibilities).
    • Effect of Change: Displays critical information about the deletion consequences.
    • Default Value: null

11. deleteLoading

    • Input Type: Boolean
    • Purpose: Indicates if the application is currently fetching deletion impact data.
    • Effect of Change: Shows/hides loading indicators in the modal.
    • Default Value: false

12. deleteConfirming

    • Input Type: Boolean
    • Purpose: Indicates if the system is in the process of confirming a delete operation.
    • Effect of Change: Can enable or disable UI elements while a deletion is processed.
    • Default Value: false

How It Works

1. Data Loading: Upon mounting, the component fetches users, clients, and roles data asynchronously from the API. State variables are set based on the responses.
2. User Interaction: Users can be filtered using the search functionality. Clicking on a user card allows for editing, while buttons are available for adding or deleting users.
3. Modals: Two modals are employed:
   • The UserEditorModal for editing and creating users.
   • A confirmation modal for understanding the impact before a user deletion.
4. State Management: state management is heavily utilized to manage the various aspects of user interaction and data representation effectively.

Use Cases & Examples

Use Case 1: Onboarding New Users

Organizations can utilize the Users Management component to quickly add new users to their analytics platform as they scale or onboard new team members. The admin can input necessary details directly into the modal to streamline the process.

Use Case 2: Role Management in Teams

Teams may frequently adjust user permissions based on project dynamics. Administrators can easily edit existing users to grant or revisit the roles within the platform using the user editor modal.

Example Configuration Data:

A real-world scenario might involve an organization needing to add a new marketing user. Here's a sample configuration that might be submitted:

{
    "first_name": "Jane",
    "last_name": "Doe",
    "email": "jane.doe@example.com",
    "client_id": 1, // A specific client that this user will be associated with
    "roles": [1, 2], // Array of role IDs that will define the permissions for Jane
    "is_active": true
}

Use Case 3: Removing Inactive Users

An organization could periodically review and remove inactive users within their system to maintain data security and compliance. The deletion process allows administrators to analyze the impact before proceeding, ensuring no essential roles or accesses are unintentionally removed.

By detailing how the Users Management component operates, its expected settings, and practical usage scenarios, organizations can leverage the full capability of user management within the Vantage platform.