Update nav, header, and related elements

[codecovdesign]

Problem to solve

context: the nav element (not to confuse with org-selector>breadcrumb) was mostly untouched through the migration (was a former pattern on GH we mirrored). Today, those migration constraints have been lifted and present an opportunity to improve the nav/header/elements relationship. current UX: navigating the app starts at the org selection; then as user navigates there is a persistent breadcrumb:

The problem is the nav is not serving as a navigation tool, but rather displaying external links (doc, support, blog). Important items, but they are secondary and raises question whether they take precedent in the top nav?

While the elements do see some high traffic (pendo reporting), they may be equally or more as effective in alternative context/location (or out of the way for primary nav). Additionally, the org selector and resulting breadcrumb are persistant as user navigates app; but visually are sub-nav (secondary) from the top-nav (primary). While this is a pattern familiar on repo providers (GH/GL); for our purposes this may be unnecessary to be visualized as secondary. Other questions to looks at:

• Is the “All orgs and repos” view helpful? is it worth constraining to specific org selection?

  • Consider we seen UX bugs with adding plan to wrong org
  • For third part apps, its familiar to be restricted to org context only
  • If this was removed, where could the plan page live (when org is not selected)

• Consideration on how the top nav and header appear for both signed in and not signed in experience.

  • For not sign in experience, there is a high visibility and marketing opportunity of features (think open source dev that may use be interested in their org)

Ask for pendo related data to marketing team when ready to start this work.

Solution and discovery ideation

ideation details

- Look at merging current org selection > breadcrumb to top nav - Reconsider use and location of other elements - docs, support, blog, and feedback - profile dropdown (related to Pavillion updates, but better to be captured here) - Revisit previous user testing: - We didn’t see major nav/breadcrumb issues in the testing; however, we did see some short-lived confusion and opportunity for potentially applying improved visual treatment on the org selector. - Removing elements reduces visual friction - We did see users navigate to docs from the top nav.

• Previously look at left-nav to show persistent org selector (common pattern that allows for selector + other in-app items + external links). Downsides are 1) large overhaul/UX change, 2) departure from current learned pattern (not gradual change), 3) constrains, or reduces the body container width allowed.
  • Worth visualizing wireframe for for team feedback/exploration, but the downsides are pretty high

🎨 design overview

• Latest design

Screen.Recording.2023-09-19.at.7.55.26.AM.mov

Tasks

Preview Give feedback

1. Technical Planning for Updating Nav, Header and Related Elements #1858
   investigation +1
   
2. Configure feature flag for new header in LaunchDarkly #1933
   +0
   
3. Move layouts/Header to layouts/OldHeader #1934
   +0
   
4. Hide old header stuff when feature flag is set #1935
   2 of 2
   +0
   
5. Remove LimitedHeader #1936
   +0
   
6. Add Back and Cancel buttons to user onboarding steps #1940
   +0
   
7. Show user feedback widget on user onboarding #1941
   +0
   
8. Implement Dropdown component to be used in new header #1942
   +0
   
9. Create new placeholder Header component in layouts #1951
   +0
   
10. Implement user dropdown for new header #1952
    +0
    
11. Implement help dropdown for new header #1953
    +0
    
12. Implement self-hosted/enterprise items for new header #1954
    +0
    
13. Implement routing logic for Navigator in new header #1955
    +0
    
14. Copy MyContextSwitcher and consolidate secondary navs for new header #1956
    +0
    
15. Remove branch breadcrumb on RepoTab #2066
    +0
    
16. Remove secondary nav elements and their feature flagging #1958
    +0
    
17. Remove old header and its feature flagging #1959
    +0
    
18. Remove new header feature flag in LaunchDarkly #1960
    +0
    

Nice-to-haves:

• Convert useImage to TS #1943
• Convert Avatar component to TS/new style #1944
• Convert ContextSwitcher component to TS/new style #1945
• Convert MyContextSwitcher component to TS #1946
• Investigate/implement more generic pageName implementation for MyContextSwitcher #1947
• Convert useImpersonate to TS #1948 (low effort)
• Update docs post header/nav changes #1957 (debatably)

[codecovdesign]

investigation from Nick

Write up from notion: https://www.notion.so/sentry/CODE-3357-Removal-of-Desktop-Menu-2f4e9e18a99748029a665ad2b4ce7955

[katia-sentry]

@codecov/design is this a duplicate of #229?

[aj-codecov]

@katia-sentry Yes, I updated to use this w/ milestone and labels as needed

[katia-sentry]

[Applications] Deprioritized for Q3

[codecovdesign]

@Adal3n3 from our sync to prep this issue for dev ready

• not logged in state related issue: In-app marketing when not logged in #426
• related epic about branch: Audit: branch selection across features #1598
• supports: Information architecture: better structuring coverage and subcategories #1537

[Adal3n3]

Here's the latest design and please view the design mocks for more details.

• The font-size for Org selector remains “text-xl/Semibold”, but please double check the consistency across different plans.
• On the footer, add "Submit a Github issue" link for free plan customers only. No change on the paid plans.
• Enlarge font size to “text-xl/Semibold” for Repo breadcrumb.
• We have an on-going investigate branch display on breadcrumb BUG: for bundles / commit list mismatch branches show #1600
• The placement of a topBanner should stick to the top of the nav bar.

@codecovdesign @spalmurray-codecov @katia-sentry

[Adal3n3]

Making a note from the slack 🧵: link

• We need to regroup and relocate the support links from the footer to the new support icon/dropdown
• relocate the Sentry widget

[Adal3n3]

Making a note here from the sync with @spalmurray-codecov @nicholas-codecov @katia-sentry 5/23:

• Components will be use in this update: Breadcrumb, multi-selection, link with outbound link icon
• On the onboarding flow, we will remove top nav and add "back" and "cancel" button to make customers focus on the flow. We will keep the sentry feedback widget on the onboarding screens with no change.
• Sentry feedback widget will be reposition to the new support links icon.
• New footer, all links center-aligned the page.

Figma: link