feat(storybook): Add guide for adding tabs to a scene #18495
Conversation
📸 UI snapshots have been updated2 snapshot changes in total. 0 added, 2 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated3 snapshot changes in total. 0 added, 3 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
| tabs={Object.values(DashboardsTabs).map((tab) => ({ | ||
| label: DASHBOARDS_TAB_TO_NAME[tab], | ||
| key: tab, | ||
| content: DASHBOARDS_TAB_TO_CONTENT[tab], |
There was a problem hiding this comment.
For non-advanced use cases it's better for the content to be part of the tab's definition
There was a problem hiding this comment.
could you bring me examples of when it's advanced vs not?
There was a problem hiding this comment.
Basically if you want to put some extra UI between the tab bar and tab contents. Otherwise, it's simpler to keep everything together,
| export const DASHBOARDS_TAB_TO_NAME: Record<DashboardsTabs, string> = { | ||
| [DashboardsTabs.First]: 'First', | ||
| [DashboardsTabs.Second]: 'Second', | ||
| } |
There was a problem hiding this comment.
It was slightly overkill for this to be a function, so turned into an object
| ...Object.fromEntries( | ||
| Object.values(DashboardsTabs).map((tab) => [urls.dashboards(tab), Scene.Dashboards]) | ||
| ) as Record<string, Scene>, |
There was a problem hiding this comment.
Object.fromEntries() > Array.prototype.reduce()
| 2. Update the URL in `frontend/src/scenes/urls.ts` to handle tabs: | ||
|
|
||
| ```ts title="frontend/src/scenes/urls.ts" | ||
| dashboards: (tab: DashboardsTabs = DashboardsTabs.First): string => `/dashboards/${tab}` |
There was a problem hiding this comment.
Default args > optional args with a constant fallback deeper in the function
Problem
Many of our pages have tabs and we add tabs in many different ways, which lead to it taking way longer for me to figure out how I should be adding tabs to a new scene. Additionally the app doesn't look polished if we do it in different ways - sometimes as
/tab/other times as?tab=name.Note that there is a problem with this implementation, that I don't know how to fix. The base URL now shows 404, instead of redirecting to the first tab.
Changes
👉 Stay up-to-date with PostHog coding conventions for a smoother review.
How did you test this code?
checked storybook locally