GlobalCommandPalette Documentation

Overview

The GlobalCommandPalette is a versatile user interface component designed for efficient navigation and interaction within the Vantage analytics and data platform. It allows users to search for pages, notifications, and integrations, providing a seamless experience while promoting accessibility through keyboard navigation. The GlobalCommandPalette enhances user productivity by offering quick access to frequently used items and notifications.

Purpose

The component serves multiple functions:

• Search Capability: Users can search for pages or settings by typing keywords.
• Shortcut Navigation: Users can navigate to recent items, function pages, settings, and notifications quickly.
• Notification Management: View and interact with notifications directly from the palette.

Settings

Input Settings

The GlobalCommandPalette does not expose external configuration settings at the component level, as it primarily utilizes internal states and hooks. However, it incorporates the following settings which affect its functionality and behavior:

1. searchText

   • Input Type: String
   • Description: This state variable contains the text inputted by the user for searching items. It controls what users can find in the palette. Changing this value filters the displayed search results based on user input.
   • Default Value: '' (empty string)

2. selectedIndex

   • Input Type: Numeric
   • Description: Represents the currently selected index in the filtered results. This allows for keyboard navigation where users can cycle through available options using the up or down arrows. Changing this may change the highlighted item in the search results.
   • Default Value: 0

3. activeTab

   • Input Type: String (literal values: 'search' | 'notifications')
   • Description: This state determines the currently active tab of the command palette. Switching tabs changes what information is displayed (search results vs. notifications). The user can toggle between these states using keyboard shortcuts.
   • Default Value: 'search'

4. isOpen (from useHotkeys hook)

   • Input Type: Boolean
   • Description: Indicates whether the command palette is currently open or closed. The component's visibility is contingent upon this state.
   • Default Value: false (inferred)

5. notifications

   • Input Type: Array
   • Description: This holds the notifications fetched from the notification store. The state updates when the notifications tab is active and new notifications are fetched.
   • Default Value: - None until fetched

6. unreadCount

   • Input Type: Numeric
   • Description: Stores the count of unread notifications, allowing users to see how many notifications are pending. When notifications are read or marked, this count updates accordingly.
   • Default Value: 0 (the initial state)

Functionality

How It Works

1. Search Functionality:

   • As users type into the input field, the input is captured in the searchText state. The component filters through a combined list of static and recent items based on whether the item's title contains the input text.
   • Items are limited to the first 8 matches for display.

2. Notification Management:

   • The notifications list is fetched and displayed when the user switches to the notifications tab. It includes notification interaction features such as viewing detailed notifications.

3. Keyboard Shortcuts:

   • Users can navigate through the command palette using keyboard shortcuts (e.g., Arrow Up, Arrow Down, Enter, Esc, and Tab), which enhances usability.
   • Specific actions, such as fetching notifications or switching tabs, are triggered by key events.

4. Styling and Presentation:

   • The command palette is styled to adapt to light and dark themes, improving readability and user experience across different environments.

5. Dynamic Content:

   • The component dynamically renders the items based on the current state and user actions, ensuring a responsive UI experience.

Data Expectations

• Recent Items: The component expects to receive a list of recent items as part of the user’s interactions. Each item must contain necessary identifiers and properties like id, title, type, href, icon, and description.

• Notifications: The component should handle a structured array of notification objects containing relevant information such as id, metadata, and link for navigation.

Use Cases & Examples

Use Cases

1. User Navigation: Users looking to quickly access frequently used pages or settings without browsing through menus can utilize the command palette for immediate navigation.

2. Notification Management: Users wanting to stay updated on events, alerts, or messages can use the notifications feature of the palette to view and interact with notifications efficiently.

3. AI Model Configuration: Users adjusting settings related to integrated AI capabilities can quickly access settings related to AI through concise search functionality.

Example Configuration

Use Case: Quick Access to Notifications

Objective: A customer success manager needs to quickly access recent notifications to stay updated on client feedback.

Configuration:

const managerSettings = {
    isOpen: true,
    searchText: '',
    notifications: [
        {
            id: '1',
            metadata: { link: '/notifications/1' },
            message: 'New feedback received from client X',
        },
        {
            id: '2',
            metadata: { link: '/notifications/2' },
            message: 'Client Y responded to your request',
        },
    ],
    unreadCount: 2,
};

The command palette allows the manager to quickly view these notifications, click to navigate to them, and stay informed without needing to sift through various sections of the platform.

In conclusion, the GlobalCommandPalette is a powerful interface design that streamlines user navigation and enhances the working efficiency of the Vantage platform through intuitive search and notification management.