-
Notifications
You must be signed in to change notification settings - Fork 875
feat: add breadcrumbs to admin settings pages #15865
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
Merged
Merged
Changes from all commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
fe442e6
wip
jaaydenh 66b921c
fix
jaaydenh 2d2a7fe
wip
jaaydenh 10ed32d
revert css
jaaydenh 7b280d4
feat: changes for premium page
jaaydenh 0371e7d
feat: implement Premium page with Tailwind and shadcn button
jaaydenh 37ac859
chore: updates to button styles
jaaydenh 32b127c
chore: update variant
jaaydenh ac8172c
chore: move CacheProvider to ThemeProvider
jaaydenh 26bc3da
chore: update paths for shadcn
jaaydenh 7dbbc46
feat: show premium tab if no premium license
jaaydenh f93b261
fix: fix format
jaaydenh 65250ef
fix: remove fontSize
jaaydenh f14c0e1
feat: add breadcrumbs to admin settings pages
jaaydenh a8e0bea
fix: breadcrumbs left alignment
jaaydenh 69cce6b
chore: add avatar next to organization name
jaaydenh f6fddb1
fix: format
jaaydenh 5b428e4
fix: format
jaaydenh 801bcff
fix: format
jaaydenh File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbEllipsis, | ||
| BreadcrumbItem, | ||
| BreadcrumbLink, | ||
| BreadcrumbList, | ||
| BreadcrumbPage, | ||
| BreadcrumbSeparator, | ||
| } from "components/Breadcrumb/Breadcrumb"; | ||
| import { MockOrganization } from "testHelpers/entities"; | ||
|
|
||
| const meta: Meta<typeof Breadcrumb> = { | ||
| title: "components/Breadcrumb", | ||
| component: Breadcrumb, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof Breadcrumb>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| children: ( | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbPage>Admin Settings</BreadcrumbPage> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbEllipsis /> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbLink href="/organizations">Organizations</BreadcrumbLink> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbPage className="text-content-primary"> | ||
| {MockOrganization.name} | ||
| </BreadcrumbPage> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| ), | ||
| }, | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| /** | ||
| * Copied from shadc/ui on 12/13/2024 | ||
| * @see {@link https://ui.shadcn.com/docs/components/breadcrumb} | ||
| */ | ||
| import { Slot } from "@radix-ui/react-slot"; | ||
| import { MoreHorizontal } from "lucide-react"; | ||
| import { | ||
| type ComponentProps, | ||
| type ComponentPropsWithoutRef, | ||
| type FC, | ||
| type ReactNode, | ||
| forwardRef, | ||
| } from "react"; | ||
| import { cn } from "utils/cn"; | ||
|
|
||
| export const Breadcrumb = forwardRef< | ||
| HTMLElement, | ||
| ComponentPropsWithoutRef<"nav"> & { | ||
| separator?: ReactNode; | ||
| } | ||
| >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />); | ||
| Breadcrumb.displayName = "Breadcrumb"; | ||
|
|
||
| export const BreadcrumbList = forwardRef< | ||
| HTMLOListElement, | ||
| ComponentPropsWithoutRef<"ol"> | ||
| >(({ className, ...props }, ref) => ( | ||
| <ol | ||
| ref={ref} | ||
| className={cn( | ||
| "flex flex-wrap items-center text-sm pl-12 my-4 gap-1.5 break-words font-medium list-none sm:gap-2.5", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
|
|
||
| export const BreadcrumbItem = forwardRef< | ||
| HTMLLIElement, | ||
| ComponentPropsWithoutRef<"li"> | ||
| >(({ className, ...props }, ref) => ( | ||
| <li | ||
| ref={ref} | ||
| className={cn( | ||
| "inline-flex items-center gap-1.5 text-content-secondary", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
|
|
||
| export const BreadcrumbLink = forwardRef< | ||
| HTMLAnchorElement, | ||
| ComponentPropsWithoutRef<"a"> & { | ||
| asChild?: boolean; | ||
| } | ||
| >(({ asChild, className, ...props }, ref) => { | ||
| const Comp = asChild ? Slot : "a"; | ||
|
|
||
| return ( | ||
| <Comp | ||
| ref={ref} | ||
| className={cn( | ||
| "text-content-secondary transition-colors hover:text-content-primary no-underline hover:underline", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| export const BreadcrumbPage = forwardRef< | ||
| HTMLSpanElement, | ||
| ComponentPropsWithoutRef<"span"> | ||
| >(({ className, ...props }, ref) => ( | ||
| <span | ||
| ref={ref} | ||
| aria-current="page" | ||
| className={cn("flex items-center gap-2 text-content-secondary", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
|
|
||
| export const BreadcrumbSeparator: FC<ComponentProps<"li">> = ({ | ||
| children, | ||
| className, | ||
| ...props | ||
| }) => ( | ||
| <li | ||
| role="presentation" | ||
| aria-hidden="true" | ||
| className={cn( | ||
| "text-content-disabled [&>svg]:w-3.5 [&>svg]:h-3.5", | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {"/"} | ||
| </li> | ||
| ); | ||
|
|
||
| export const BreadcrumbEllipsis: FC<ComponentProps<"span">> = ({ | ||
| className, | ||
| ...props | ||
| }) => ( | ||
| <span | ||
| role="presentation" | ||
| aria-hidden="true" | ||
| className={cn("flex h-9 w-9 items-center justify-center", className)} | ||
| {...props} | ||
| > | ||
| <MoreHorizontal className="h-4 w-4" /> | ||
| <span className="sr-only">More</span> | ||
| </span> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel like inserting the separator shouldn't be the responsibility of the consumer. The
BreadcrumbListcould useChildren.toArrayand intersperse them automatically, you could use some CSS tricks with:not(:first-of-kind)or whatever, etc. There are other options that reduce the risk of misusage.Also why are
<Breadcrumb>and<BreadcrumbList>even separate components?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was originally thinking that the Breadcrumb should be more universal so that it could be used in places without the separator line underneath and this is how shadcn/ui does it as well. Of course, if the argument is that breadcrumbs for Coder will always have a separator line underneath, it could make sense.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Having both and is a common pattern in the shadcn/ui components to add some semantic meaning. In general, I am not focused on altering or adding opinions to the way the components are constructed but always open to suggestions.