feat(3000): Show the 3000 index-less navbar with labels #18263

Twixes · 2023-10-30T10:30:09Z

Changes

We want to initially release the 3000 look with labels in the navbar, not too dissimilar to what the app looks like now, so that the change isn't disorienting. This PRs add the labels, along with a few navbar items that were missing.

Note: when the posthog-3000-nav flag is active (i.e. sidebar-based navigation), the buttons are still icons.

posthog-bot · 2023-10-30T10:56:07Z

📸 UI snapshots have been updated

3 snapshot changes in total. 0 added, 3 modified, 0 deleted:

chromium: 0 added, 3 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

benjackwhite

Love it!

We discussed perhaps trying out the resizer thing in a follow up once this and #18204 are merged 👍

benjackwhite · 2023-10-30T11:27:34Z

frontend/src/layout/navigation-3000/components/Navbar.tsx

+                {navbarItems.map((section, index) => (
+                    <ul key={index}>
+                        {section.map((item) =>
+                            item.featureFlag && !featureFlags[item.featureFlag] ? null : (


Nice featureFlag helper!

posthog-bot · 2023-10-31T11:26:49Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-10-31T17:03:02Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

corywatilo · 2023-11-01T17:10:09Z

A few suggestions:

Replace "Project homepage" with the actual project name
Persons and groups -> People
Just move Cohorts into People now
Data management -> Data
Just move Annotations into Data now
Support beta/alpha labels?
The second section is intended for products, so I'd move Toolbar out to the lower section
Alphabetize products
Project settings -> Settings

If we make these changes now, we'll be pretty close to what we'll release in full 3000, so we can just have a tooltip/popup saying "We moved some things around! Data is up top, products are in the middle. Cohorts now live in Data, and Cohorts moved to People"

Twixes · 2023-11-02T19:22:18Z

Thanks for considering this! @corywatilo
Tried addressing all your points. With three I ran into some blocking trickiness (marked with orange):

➡️ I think that makes sense, though it should happen alongside the project name being pulled out of the breadcrumbs bar, so will do that in a separate PR.
❇️ Agreed with "People", but a bit wary of removing "groups" from that label, because 1. makes it harder to learn about group analytics 2. in our model groups are not made up of people – they're made up purely out of events. Named "People and groups" for now.
➡️ Cohorts and annotations are being moved in feat: Sidebar cohorts and annotations movement #18200.
🆚 I don't quite see renaming "Data management" to "Data" improving clarity. I mean, "Data" is more concrete, but it's also concretely not what's on that page. The data can be found in "People and groups", and "Event explorer". "Data management" is basically "Data taxonomy" though – perhaps that'd be clearer?
➡️ Same as 3.
✅ Good catch, added alpha and beta labels. They feel too prominent in dark mode, but that's a color scheme issue…
I came up with an outlined style for that case, but it's not legible in light mode, and not sure if it'll work outside of the navbar in dark. Hence leaving out of this PR.
✅ Put Toolbar in the top segment.
🆚 One problem I see with alphabetic sorting is that related products would be far apart, e.g. "Product analytics" would be separated from "Web analytics" by "Session replay" + "Surveys". I don't feel like this is outweighed by the alphabetic aspect.
✴️ The "Project" part in "Project settings" is currently pretty key, because a user might easily think that's where you can find all the settings or at least navigate wherever you need. That's not the case, there are separate entry points (i.e. buttons) for organization and account settings. It would be nice to be able to treat this button as just "Settings", but currently we can't – we'll need to solve this as part of designing settings at some point (as the current experience is the result of pure organic growth).

Current state:

posthog-bot · 2023-11-02T19:45:32Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

corywatilo · 2023-11-02T22:09:19Z

Settings

Just FYI I do have some thoughts on the settings UI here.

Twixes · 2023-11-02T22:12:54Z

Deployed this, but obviously happy to follow up on all the remaining (orange) points! Settings very much included.

Twixes added 2 commits October 30, 2023 11:10

feat(3000): Show the 3000 index-less navbar with labels

0caa1f0

Use new icons and move "Event explorer"

1c4a3c5

Twixes requested a review from a team October 30, 2023 10:30

github-actions bot added 2 commits October 30, 2023 10:49

Update UI snapshots for chromium (1)

2e9eeab

Update UI snapshots for chromium (2)

3aa30c4

benjackwhite approved these changes Oct 30, 2023

View reviewed changes

Twixes and others added 2 commits October 31, 2023 11:58

Merge branch 'master' into 3000-full-sidebar

6c07eae

Update UI snapshots for chromium (1)

8897aee

Twixes and others added 2 commits October 31, 2023 17:32

Merge branch 'master' into 3000-full-sidebar

e369259

Update UI snapshots for chromium (1)

324b5d8

Twixes enabled auto-merge (squash) October 31, 2023 19:08

corywatilo disabled auto-merge November 1, 2023 17:05

benjackwhite and others added 5 commits November 2, 2023 16:12

feat: Allow new nav to be collapsed (#18343)

6c3305c

Add alpha/beta tags, move "Toolbar", rename "Persons"

1f8f5da

Fix tooltips not showing when navbar collapsed

ce113d9

Align "Session replay" in using sentence case

654e575

Merge branch 'master' into 3000-full-sidebar

1954abc

Update UI snapshots for chromium (1)

bd88346

Twixes merged commit 243cf56 into master Nov 2, 2023
73 checks passed

Twixes deleted the 3000-full-sidebar branch November 2, 2023 21:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(3000): Show the 3000 index-less navbar with labels #18263

feat(3000): Show the 3000 index-less navbar with labels #18263

Twixes commented Oct 30, 2023 •

edited

Loading

posthog-bot commented Oct 30, 2023

benjackwhite left a comment

benjackwhite Oct 30, 2023

posthog-bot commented Oct 31, 2023

posthog-bot commented Oct 31, 2023

corywatilo commented Nov 1, 2023 •

edited by Twixes

Loading

Twixes commented Nov 2, 2023

posthog-bot commented Nov 2, 2023

corywatilo commented Nov 2, 2023

Twixes commented Nov 2, 2023

feat(3000): Show the 3000 index-less navbar with labels #18263

feat(3000): Show the 3000 index-less navbar with labels #18263

Conversation

Twixes commented Oct 30, 2023 • edited Loading

Changes

posthog-bot commented Oct 30, 2023

📸 UI snapshots have been updated

benjackwhite left a comment

Choose a reason for hiding this comment

benjackwhite Oct 30, 2023

Choose a reason for hiding this comment

posthog-bot commented Oct 31, 2023

📸 UI snapshots have been updated

posthog-bot commented Oct 31, 2023

📸 UI snapshots have been updated

corywatilo commented Nov 1, 2023 • edited by Twixes Loading

Twixes commented Nov 2, 2023

Current state:

posthog-bot commented Nov 2, 2023

📸 UI snapshots have been updated

corywatilo commented Nov 2, 2023

Twixes commented Nov 2, 2023

Twixes commented Oct 30, 2023 •

edited

Loading

corywatilo commented Nov 1, 2023 •

edited by Twixes

Loading