refactor: update the navbar to match the new designs #15964
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,10 +7,12 @@ | |
| */ | ||
|
|
||
| import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; | ||
| import { Button } from "components/Button/Button"; | ||
| import { Check, ChevronDownIcon, ChevronRight, Circle } from "lucide-react"; | ||
| import { | ||
| type ComponentPropsWithoutRef, | ||
| type ElementRef, | ||
| type FC, | ||
| type HTMLAttributes, | ||
| forwardRef, | ||
| } from "react"; | ||
|
|
@@ -196,7 +198,7 @@ export const DropdownMenuSeparator = forwardRef< | |
| >(({ className, ...props }, ref) => ( | ||
| <DropdownMenuPrimitive.Separator | ||
| ref={ref} | ||
| className={cn(["-mx-1 my-3 h-px bg-border"], className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
|
|
@@ -214,3 +216,23 @@ export const DropdownMenuShortcut = ({ | |
| ); | ||
| }; | ||
| DropdownMenuShortcut.displayName = "DropdownMenuShortcut"; | ||
|
|
||
| export interface DropdownMenuButtonProps | ||
| extends ComponentPropsWithoutRef<typeof Button> {} | ||
|
|
||
| export const DropdownMenuButton = forwardRef< | ||
|
There was a problem hiding this comment. I'm wondering if it's a little confusing to have a file export both a trigger and a button, especially since the button doesn't use the trigger internally There was a problem hiding this comment. Hm... I hadn’t thought of that 🤔. Honestly—maybe it’s just personal—I don’t see any confusion since a trigger is a behavioral component and a button is a visual component. To me, it feels okay to have both. What would you suggest? There was a problem hiding this comment. @BrunoQuaresma It looks like you are adding DropdownMenuButton to the shadcn DropdownMenu component? Im curious why it is necessary to add this? There was a problem hiding this comment. The purpose of this component is to make dropdown button styling consistent. For example, instead of composing a Before: <Button ref={ref} variant="outline">
Admin settings
<DropdownMenuChevronDown />
</Button>After: <DropdownMenuButton>Admin settings</DropdownMenuButton>However, while writing this, I thought of another approach that might be better—creating a new <Button ref={ref} variant="dropdown">
Admin settings
</Button>Thoughts? There was a problem hiding this comment. If every DropdownMenu component will always use the DropdownMenuButton with this styling then it could make sense. However. that may not always be the case. I personally like having a dropdown variant for the button component more than altering the DropdownMenu component. There was a problem hiding this comment. I decided to remove the |
||
| HTMLButtonElement, | ||
| DropdownMenuButtonProps | ||
| >(({ children, ...props }, ref) => { | ||
| return ( | ||
| <Button ref={ref} variant="outline" {...props}> | ||
| {children} | ||
| <DropdownMenuChevronDown /> | ||
| </Button> | ||
| ); | ||
| }); | ||
| DropdownMenuButton.displayName = "DropdownMenuButton"; | ||
|
|
||
| export const DropdownMenuChevronDown: FC = () => { | ||
| return <ChevronDownIcon className="text-content-primary !size-icon-xs" />; | ||
| }; | ||
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { fn, userEvent, within } from "@storybook/test"; | ||
| import { PointerEventsCheckLevel } from "@testing-library/user-event"; | ||
| import type { FC } from "react"; | ||
| import { chromaticWithTablet } from "testHelpers/chromatic"; | ||
| import { | ||
| MockPrimaryWorkspaceProxy, | ||
| MockProxyLatencies, | ||
| MockSupportLinks, | ||
| MockUser, | ||
| MockUser2, | ||
| MockWorkspaceProxies, | ||
| } from "testHelpers/entities"; | ||
| import { MobileMenu } from "./MobileMenu"; | ||
|
|
||
| const meta: Meta<typeof MobileMenu> = { | ||
| title: "modules/dashboard/MobileMenu", | ||
| parameters: { | ||
| layout: "fullscreen", | ||
| viewport: { | ||
| defaultViewport: "iphone12", | ||
| }, | ||
| }, | ||
| component: MobileMenu, | ||
| args: { | ||
| proxyContextValue: { | ||
| proxy: { | ||
| preferredPathAppURL: "", | ||
| preferredWildcardHostname: "", | ||
| proxy: MockPrimaryWorkspaceProxy, | ||
| }, | ||
| isLoading: false, | ||
| isFetched: true, | ||
| setProxy: fn(), | ||
| clearProxy: fn(), | ||
| refetchProxyLatencies: fn(), | ||
| proxyLatencies: MockProxyLatencies, | ||
| proxies: MockWorkspaceProxies, | ||
| }, | ||
| user: MockUser, | ||
| supportLinks: MockSupportLinks, | ||
| docsHref: "https://coder.com/docs", | ||
| onSignOut: fn(), | ||
| isDefaultOpen: true, | ||
| canViewAuditLog: true, | ||
| canViewDeployment: true, | ||
| canViewHealth: true, | ||
| canViewOrganizations: true, | ||
| }, | ||
| decorators: [withNavbarMock], | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof MobileMenu>; | ||
|
|
||
| export const Closed: Story = { | ||
| args: { | ||
| isDefaultOpen: false, | ||
| }, | ||
| }; | ||
|
|
||
| export const Admin: Story = { | ||
| play: openAdminSettings, | ||
| }; | ||
|
|
||
| export const Auditor: Story = { | ||
| args: { | ||
| user: MockUser2, | ||
| canViewAuditLog: true, | ||
| canViewDeployment: false, | ||
| canViewHealth: false, | ||
| canViewOrganizations: false, | ||
| }, | ||
| play: openAdminSettings, | ||
| }; | ||
|
|
||
| export const OrgAdmin: Story = { | ||
| args: { | ||
| user: MockUser2, | ||
| canViewAuditLog: true, | ||
| canViewDeployment: false, | ||
| canViewHealth: false, | ||
| canViewOrganizations: true, | ||
| }, | ||
| play: openAdminSettings, | ||
| }; | ||
|
|
||
| export const Member: Story = { | ||
| args: { | ||
| user: MockUser2, | ||
| canViewAuditLog: false, | ||
| canViewDeployment: false, | ||
| canViewHealth: false, | ||
| canViewOrganizations: false, | ||
| }, | ||
| }; | ||
|
|
||
| export const ProxySettings: Story = { | ||
| play: async ({ canvasElement }) => { | ||
| const user = setupUser(); | ||
| const body = within(canvasElement.ownerDocument.body); | ||
| const menuItem = await body.findByRole("menuitem", { | ||
| name: /workspace proxy settings/i, | ||
| }); | ||
| await user.click(menuItem); | ||
| }, | ||
| }; | ||
|
|
||
| export const UserSettings: Story = { | ||
| play: async ({ canvasElement }) => { | ||
| const user = setupUser(); | ||
| const body = within(canvasElement.ownerDocument.body); | ||
| const menuItem = await body.findByRole("menuitem", { | ||
| name: /user settings/i, | ||
| }); | ||
| await user.click(menuItem); | ||
| }, | ||
| }; | ||
|
|
||
| function withNavbarMock(Story: FC) { | ||
| return ( | ||
| <div className="h-[72px] border-0 border-b border-solid px-6 flex items-center justify-end"> | ||
| <Story /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function setupUser() { | ||
| // It seems the dropdown component is disabling pointer events, which is | ||
| // causing Testing Library to throw an error. As a workaround, we can | ||
| // disable the pointer events check. | ||
| return userEvent.setup({ | ||
| pointerEventsCheck: PointerEventsCheckLevel.Never, | ||
| }); | ||
| } | ||
|
|
||
| async function openAdminSettings({ | ||
| canvasElement, | ||
| }: { canvasElement: HTMLElement }) { | ||
| const user = setupUser(); | ||
| const body = within(canvasElement.ownerDocument.body); | ||
| const menuItem = await body.findByRole("menuitem", { | ||
| name: /admin settings/i, | ||
| }); | ||
| await user.click(menuItem); | ||
| } |
Oops, something went wrong.
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'm just now realizing: do we want the ref type to always be
HTMLButtonElement? I'm thinking about cases like this:Where TypeScript will think it's a button, but the actual HTML node will be for an anchor. I'm not sure what properties are on one but not the other, but calling a button method that doesn't exist could blow up the app
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.
Only thing is, I'm not actually sure how you would add a generic ref type to forwardRef, since it's just a function call, and not a full function signature
I don't think this is worth blocking over, but I'll try to figure out a fix next week
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 think your concern is totally valid, but this is the default implementation from the shadcn/ui Button. I’d be open to changing it only if necessary, as I’d prefer not to add complexity without bringing justifiable value to us.