influxdata / ui

UI for InfluxDB
94 stars 42 forks source link

Epic: Multi Org - Phase 1 (OEMs Only - Switch Orgs & Set Defaults) #3968

Closed Luckette closed 2 years ago

Luckette commented 2 years ago

As an InfluxDB Cloud account holder with multiple users that are allocated to different organizations within my company, I want to be able to manage members (users) per organization within my account. This means that my account should be able to contain multiple organizations to that I can allocate users/members.

Business Goal

Phase 1 of Multi-Org is characterized by the ability to switch orgs, set default account, and set default org. Phase 1 also launches the new header navigation and the new user profile page.

Product Brief

Target Audience

Extended Team

Design Notes

Link to Prototype in Figma

User Stories & Acceptance Criteria

User Story: Header Global Component As a user, I want to be able to see which account and org I'm on at all times and always be able to navigate to my user profile regardless of what screen I'm on.

  ACs
     - The header section (global component) displays the current account, org, and user profile icon. 
     - The header section and account/org dropdowns are global components that can be viewed on any screen
     - Display additional icons near switch org and switch account as shown in the Figma. For example, the breadcrumb icon that shows org being lower in hierarchy than account. 
     - The "Upgrade Now" Button should be to the left of the User Profile icon in the header component
     - The header component should be either black or transparent
     - If the user is in light mode - which is allowed on the dashboard page - then the icons and text should be Dark Grey (consult design - Julia James for exact color)
     - If the user is in regular standard dark mode, then the icons and text should be light grey and white respectively. (consult design - Julia James for exact color)
     - In support of mobile, ensure the header component is responsive and fits mobile screens. Refer to the Figma file. 

  Dev Notes
     -

User Story: Switch Account As a user, I want to switch accounts from the new switch account dropdown so that I don't have to navigate to the account settings page when switching accounts.

    ACs
    - The header section (global component) allows the user to click on the account to view the switch account dropdown
    - The account dropdown component exists and includes the following options: switch account, settings, members, billing. 
    (See Figma)
    - If the user only has 1 account, then the users will not see a switch account option in the switch account dropdown        
    - The existing switch account functionality is deleted/removed from the account setting page 
    - When the user clicks the switch account section of the switch account dropdown, the system displays a sub-searchable and scrollable dropdown with all the accounts listed.
    - The search functionality should remain predictive text
    - There is a blue checkmark on the currently selected account
    - The accounts are listed in alphabetical order 
    - The currently selected account should always display at the top of the dropdown regardless of the ABC order so that the user can quickly see which account is currently selected
    - When the user clicks on switch account on the sub-dropdown, the system navigates the user back to the parent dropdown. 

    Dev Notes
    -  Searchable and scrollable account dropdown already exists, we could reuse this component
    - DESIGN: Working on messaging for when there are too many options in the dropdown (Julia James)

User Story: User Profile Icon & Dropdown As a user, I want a way to navigate to a user profile page separate from account and org pages so that I can set user-specific settings such as my default org.

    ACs
    - The user can always navigate to the user profile via an icon on the right side of the screen
    - When the user clicks the user profile icon in the header, then the system displays a user profile dropdown containing: First and Last Name, Email, Profile, and Logout
    - When the user clicks the user profile icon, the icon turns into a gradient color scheme
    - Prior to the user profile icon being clicked, the icon should display as a transparent outlined icon. 
    - When the user clicks Profile, the system navigates the user to the new user profile screen
    - When the user clicks Logout, the system navigates the user to the existing login page
    - The user profile dropdown contains all icons in accordance with the Figma design

   Dev Notes
    - 

User Story: User Profile Page As a user, I want a user profile page separate from account and org pages so that I can set user-specific settings such as my default org.

    ACs
    - The user profile page displays the user's first and last name, email address, and Default Settings including default account selection and default org selection.
    - Add text and text color to the user profile page in accordance with the Figma. Consult design as needed (Julia James)
    - The dropdowns used for default account and default org should be the same components as are used in the header dropdowns with 1 exception: remove the "Switch Account" and "Switch Org" portion of the dropdown. See Figma. 
    - Selections are saved

   Dev Notes
    - Implementation will determine auto-save vs manual save button

User Story: Default Org Experience IN PROGRESS - DESIGN As a user, I want to be able to view and change my default organization upon account creation.

    ACs
    - The user can view their default org upon account creation on the User Profile Page
    - The user can change their default account via the user profile page
    - The user can change their default org via the user profile page 

    Dev Notes
    - We cannot save both account AND org changes simultaneously because org lists depend on the account selected. 
    (Implementation Detail)
    - When does it make most sense for a user to create their orgs within the user journey? 
    - The system automatically sets the default organization for the user upon account creation (Quartz)
    - Assumption: eCommerce will automatically set the default org upon account creation

User Story: Switch Org As a user, in the event I belong to more than one organization, I want to be able to switch the organization within which I'm operating; so that I can use InfluxDB Cloud to support more than one team/initiative within my company.

    ACs
    - The header section (global component) allows the user to click on the org to view the switch org dropdown
    - The account dropdown component exists and includes the following options: switch account, settings, members, billing. 
    (See Figma)
    - If the account only has 1 org, then the users will not see a switch org option in the switch org dropdown
    - When the user clicks the switch org section of the switch org dropdown, the system displays a sub-searchable and scrollable dropdown with all the orgs listed.
    - The search functionality should allow predictive text
    - There is a blue checkmark on the currently selected org
    - The orgs are listed in alphabetical order 
    - The currently selected org should always display at the top of the dropdown regardless of the ABC order so that the user can quickly see which org is currently selected
    - When the user clicks on switch org on the sub-dropdown, the system navigates the user back to the parent dropdown. 

    Dev Notes
    -  Searchable and scrollable account dropdown already exists, we could reuse this component
    - DESIGN: Working on messaging for when there are too many options in the dropdown (Julia James)

User Story: Org Settings As a user, I want to see the Host Name in my Org settings so that I know what it is.

    ACs
    - Change "Cluster URL" to "Host Name" in the Org Settings Page OR put "Host Name" next too Cluster URL in parenthesis. 

    Dev Notes
    - PM to work with Docs and other PMs to drive consistency with what we call it...host name or cluster URL

User Story: Measure Launch Success

  ACs
   - Track....

  Dev Notes
    - We might use Amplitude
    - We might use InfluxDB
    - Eventually this should end up in Domo for PM and Analytics to create visuals

User Story: End to End Testing

User Story: Managed by Feature Flag

Luckette commented 2 years ago

Link to eCommerce API Spec Epic: https://github.com/influxdata/quartz/issues/6137

FYI @kristinarobinson & @hoorayimhelping