Add "Add View" Flow to Saved View Selectors Nav

Add + Add View button to the Saved Views Selectors Nav bar.

The Add View has two flows:

  1. Add view -> New view
  2. Add view > Existing view

Since this issue is not going to involve any API integration, create mock data to be displayed in the Add existing view modal

Flow 1 UI Requirements

When saving a new view (either selecting the Save view button or Add view > New view), display a form within a modal with the following fields:

  • Title (text input)
    • Required
  • Description (text area)
    • Optional
    • Limit this to 140 characters max (help text on input to indicate this).
    • When more than 140 characters are entered, use an inline validation error message to indicate the user can only include 140 characters.
  • Visibility (radio options)
    • Options for Private or Shared
    • When Private – only the author has access and can view it
      • We plan to expand on this in the future to allow sharing private views with specified users
    • When Shared
      • Anyone who has access to the namespace can add and see the view
      • Anyone who has Planner+ access can edit the view
      • Only the view author can modify the visibility settings

Flow 2 UI Requirements:

  • Users can select Add view > Existing view to add a previously created view
  • This opens a modal which includes:
    • Title: Add an existing view
    • Close button (icon only)
    • Search field
      • Placeholder: Search by view name or description
    • Option list: include the following for each option
      • View mode icon: List or board (Note: Board view may not be available yet)
      • View title
      • View description (if it has one)
  • When the option list is long enough to require scrolling, only the option list should scroll (header should be fixed above, including Search).
  • Verify clicking outside of the modal and using esc closes the modal

Prototype walkthrough

Edited by Anastasia Khomchenko