Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sidebar to v2 UI #15925

Merged
merged 19 commits into from
Nov 11, 2024
Merged

Add sidebar to v2 UI #15925

merged 19 commits into from
Nov 11, 2024

Conversation

desertaxle
Copy link
Member

@desertaxle desertaxle commented Nov 4, 2024

This PR adds a sidebar to the v2 UI. It looks like this:
Screenshot 2024-11-06 at 2 23 02 PM

The sidebar was created entirely with components from shadcn/ui.

All the tabs correspond to real routes, but most will take the user to a placeholder page.

This PR also introduces husky for pre-commit checks/formatting and vitest and msw for tests. msw seems to work well for mocking out API calls in tests.

Related to #15512

Copy link
Collaborator

@aaazzam aaazzam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's omit color palette for a bit and roll forward the shadcn default for a bit. on my last pass through prefect-design we have some wonky color stuff that I'm fine carrying forward but want to understand them before we do


const items = [
{
title: "Dashboard",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

over optimization, but if instead of 'title', 'url' we do

{'children': whatever, 'linkProps': { to: '/' }}

then it can easier to reason about and include non text item for children. Also, if we type linkProps correctly we can use typesafety to make sure this nav items list handshakes right. happy to do this in a future PR this isn't blocking

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I implemented a new way to define these items in dae469e. It's a bit different than what you suggested, but I think it gives the flexibility that we need.

@desertaxle desertaxle marked this pull request as ready for review November 6, 2024 20:26
@desertaxle desertaxle changed the title Add side bar to v2 UI Add sidebar to v2 UI Nov 6, 2024
import { Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";

const navItems = [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

at this point would recommend just having a million sidebar items than this config object

@desertaxle desertaxle merged commit 0a623a6 into main Nov 11, 2024
8 checks passed
@desertaxle desertaxle deleted the side-bar branch November 11, 2024 16:47
@desertaxle desertaxle added the development Tech debt, refactors, CI, tests, and other related work. label Nov 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
development Tech debt, refactors, CI, tests, and other related work.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants