app-page Documentation

Purpose

The app-page component serves as the main landing page for the Vantage platform. It provides users with easy access to critical features such as Global Search, Recently Accessed Items, and a News Board displaying updates and announcements. This page is designed to enhance user engagement and streamline interaction with various functionalities of the Vantage platform, making it easier for users to create workflows and dashboards efficiently.

Settings

The app-page component does not expose any settings for external configuration. All functionalities depend on internal state management and APIs. Below are the specific functionalities and their effects as handled within the code without explicit settings.

1. Global Search:

   • Input Type: N/A (Dynamically fetched data).
   • Functionality: Allows users to search items across the application. Its behavior is influenced directly by the GlobalSearch component invoked in the UI.
   • Default Value: Fetches existing items by default without additional configuration.

2. New Workflow Button:

   • Input Type: N/A (Button Action).
   • Functionality: On click, it triggers the createNewWorkflow action provided via the useHotkeys hook. It directly allows users to initiate the creation of new workflows.
   • Default Value: There is no default value since this action dynamically creates workflows based on user actions.

3. New Dashboard Button:

   • Input Type: N/A (Button Action).
   • Functionality: Triggers the createNewDashboard function. Similar to workflows, users can create a dashboard with ease.
   • Default Value: No default; this is action-based.

4. Page Context for AI Assistant:

   • Input Type: N/A (Uses internal context).
   • Functionality: The setPageContext function populates page metadata to assist in AI inquiries regarding how to navigate or utilize features within the platform.
   • Default Value: Metadata is set when the component is mounted and reflects initial data concerning the page's title and description.

5. First-login Detection:

   • Input Type: N/A (State management).
   • Functionality: A state variable checkedFirstLogin manages whether the first login check has occurred. This leads to onboarding flows including setting a default dashboard and initiating a user speed run.
   • Default Value: Initially false, indicating the first login process has not yet been checked.

6. Keyboard Shortcuts:

   • Input Type: N/A (Static configuration).
   • Functionality: Displays a static list of keyboard shortcuts available to users. It helps users quickly interact with frequently used app functions without needing to transition away from the keyboard.
   • Default Value: Always shows these shortcuts; no additional input required.

How it Works

The app-page component renders a comprehensive user interface that includes:

• A header containing navigation and branding.
• A global search component for quick item searches.
• Buttons for creating new workflows and dashboards that trigger respective functions.
• A section for displaying recently accessed items to help users quickly locate and return to their previous activities.
• A news board to keep users informed about platform updates and announcements.
• Keyboard shortcuts to enhance user experience through rapid navigation.

The component uses lifecycle management to handle the onboarding experience for first-time users. It fetches relevant data from APIs such as /api/onboarding/first-login to determine whether a user is logging in for the first time and conditionally manage user state.

Data Expectations

The app-page expects the following data:

• API Responses: The component interacts directly with the /api/onboarding/first-login API for onboarding functionality. The expected response data structure includes:

  • isFirstLogin: Boolean indicating if this is the user's first login.
  • dashboardId: Optional string containing the ID of the user's default dashboard on first login.

• Context Providers:

  • PageContext: Used to set the page title, description, and metadata, enhancing the context for AI assistance.
  • UserProvider: Responsible for holding user data such as the default dashboard.

AI Integrations

The integration of an AI Assistant is enabled through the PageContext settings, which inform the AI about the available actions and elements on the page. The AI uses this information to facilitate user inquiries regarding the functionalities and features present in the app.

Billing Impacts

The app-page does not directly manage billing features or subscribe users to plans. However, the creation of new dashboards and workflows initiated by users potentially affects billing based on the underlying pricing model of the Vantage platform, which may charge based on the number of active entities (dashboards/workflows).

Use Cases & Examples

Use Cases

1. First-Time User Onboarding: Simplifying the initial login experience by guiding new users through setting up their default workspace and showing important features.
2. Quick Item Creation: Providing power users with the capability to rapidly create new dashboards and workflows via keyboard shortcuts and dedicated buttons.
3. Maintaining Awareness of App Updates: Utilizing the News Board to keep users updated with the latest changes or features that enhance platform usability and workflow efficiency.

Example Configuration

For a fictitious company "Acme Corp," assuming they have a first-time user, the configuration might look like this:

{
  "user": {
    "isFirstLogin": true,
    "dashboardId": "dashboard_12345"
  }
}

On their first login:

• The app-page component detects first-time login via the API call.
• It updates the UserProvider to set dashboard_12345 as the default dashboard.
• The startSpeedRun function is executed to guide the user through the best practices for using Vantage.
• The user sees the Recent Items section pre-populated with related content and the News Board displaying any updates related to their account setup.

This vast array of functionality ensures that users have immediate access to essential tools and information right from their landing page experience in Vantage.