Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: add a divider after Account menu item#1927

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletionssite/src/components/UserDropdown/UserDropdown.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,8 +17,8 @@ const Template: Story<UserDropdownProps> = (args: UserDropdownProps) => (
</Box>
)

export constExampleNoRoles = Template.bind({})
ExampleNoRoles.args = {
export constExample = Template.bind({})
Example.args = {
user: MockUser,
onSignOut: () => {
return Promise.resolve()
Expand Down
57 changes: 3 additions & 54 deletionssite/src/components/UserDropdown/UserDropdown.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
import { screen } from "@testing-library/react"
import {MockAdminRole,MockUser } from "../../testHelpers/entities"
import { MockUser } from "../../testHelpers/entities"
import { render } from "../../testHelpers/renderHelpers"
import { Language, UserDropdown, UserDropdownProps } from "./UsersDropdown"
import { Language } from "../UserDropdownContent/UserDropdownContent"
import { UserDropdown, UserDropdownProps } from "./UsersDropdown"

const renderAndClick = async (props: Partial<UserDropdownProps> = {}) => {
render(<UserDropdown user={props.user ?? MockUser} onSignOut={props.onSignOut ?? jest.fn()} />)
Expand All@@ -10,18 +11,6 @@ const renderAndClick = async (props: Partial<UserDropdownProps> = {}) => {
}

describe("UserDropdown", () => {
const env = process.env

// REMARK: copying process.env so we don't mutate that object or encounter conflicts between tests
beforeEach(() => {
process.env = { ...env }
})

// REMARK: restoring process.env
afterEach(() => {
process.env = env
})

describe("when the trigger is clicked", () => {
it("opens the menu", async () => {
await renderAndClick()
Expand All@@ -30,44 +19,4 @@ describe("UserDropdown", () => {
expect(screen.getByText(Language.signOutLabel)).toBeDefined()
})
})

describe("when the menu is open", () => {
it("displays the user's roles", async () => {
await renderAndClick()

expect(screen.getByText(MockAdminRole.display_name)).toBeDefined()
})

it("has the correct link for the documentation item", async () => {
process.env.CODER_VERSION = "v0.5.4"
await renderAndClick()

const link = screen.getByText(Language.docsLabel).closest("a")
if (!link) {
throw new Error("Anchor tag not found for the documentation menu item")
}

expect(link.getAttribute("href")).toBe(`https://github.com/coder/coder/tree/${process.env.CODER_VERSION}/docs`)
})

it("has the correct link for the account item", async () => {
await renderAndClick()

const link = screen.getByText(Language.accountLabel).closest("a")
if (!link) {
throw new Error("Anchor tag not found for the account menu item")
}

expect(link.getAttribute("href")).toBe("/settings/account")
})

describe("and sign out is clicked", () => {
it("calls the onSignOut function", async () => {
const onSignOut = jest.fn()
await renderAndClick({ onSignOut })
screen.getByText(Language.signOutLabel).click()
expect(onSignOut).toBeCalledTimes(1)
})
})
})
})
63 changes: 2 additions & 61 deletionssite/src/components/UserDropdown/UsersDropdown.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,14 @@
import Badge from "@material-ui/core/Badge"
import Divider from "@material-ui/core/Divider"
import ListItemIcon from "@material-ui/core/ListItemIcon"
import ListItemText from "@material-ui/core/ListItemText"
import MenuItem from "@material-ui/core/MenuItem"
import { fade, makeStyles } from "@material-ui/core/styles"
import AccountIcon from "@material-ui/icons/AccountCircleOutlined"
import React, { useState } from "react"
import { Link } from "react-router-dom"
import * as TypesGen from "../../api/typesGenerated"
import { navHeight } from "../../theme/constants"
import { BorderedMenu } from "../BorderedMenu/BorderedMenu"
import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
import { DocsIcon } from "../Icons/DocsIcon"
import { LogoutIcon } from "../Icons/LogoutIcon"
import { UserAvatar } from "../UserAvatar/UserAvatar"
import {UserProfileCard } from "../UserProfileCard/UserProfileCard"
import {UserDropdownContent } from "../UserDropdownContent/UserDropdownContent"

export const Language = {
accountLabel: "Account",
docsLabel: "Documentation",
signOutLabel: "Sign Out",
}
export interface UserDropdownProps {
user: TypesGen.User
onSignOut: () => void
Expand DownExpand Up@@ -64,41 +52,7 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
variant="user-dropdown"
onClose={onPopoverClose}
>
<div className={styles.userInfo}>
<UserProfileCard user={user} />

<Divider />

<Link to="/settings/account" className={styles.link}>
<MenuItem className={styles.menuItem} onClick={onPopoverClose}>
<ListItemIcon className={styles.icon}>
<AccountIcon />
</ListItemIcon>
<ListItemText primary={Language.accountLabel} />
</MenuItem>
</Link>

<a
href={`https://github.com/coder/coder/tree/${process.env.CODER_VERSION}/docs`}
target="_blank"
rel="noreferrer"
className={styles.link}
>
<MenuItem className={styles.menuItem} onClick={onPopoverClose}>
<ListItemIcon className={styles.icon}>
<DocsIcon />
</ListItemIcon>
<ListItemText primary={Language.docsLabel} />
</MenuItem>
</a>

<MenuItem className={styles.menuItem} onClick={onSignOut}>
<ListItemIcon className={styles.icon}>
<LogoutIcon />
</ListItemIcon>
<ListItemText primary={Language.signOutLabel} />
</MenuItem>
</div>
<UserDropdownContent user={user} onPopoverClose={onPopoverClose} onSignOut={onSignOut} />
</BorderedMenu>
</>
)
Expand All@@ -117,10 +71,6 @@ export const useStyles = makeStyles((theme) => ({
maxWidth: 300,
},

userInfo: {
marginBottom: theme.spacing(1),
},

menuItem: {
height: navHeight,
padding: `${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
Expand All@@ -130,13 +80,4 @@ export const useStyles = makeStyles((theme) => ({
transition: "background-color 0.3s ease",
},
},

link: {
textDecoration: "none",
color: "inherit",
},

icon: {
color: theme.palette.text.secondary,
},
}))
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
import { Story } from "@storybook/react"
import React from "react"
import { MockUser } from "../../testHelpers/entities"
import {UserProfileCard, UserProfileCardProps } from "./UserProfileCard"
import {UserDropdownContent, UserDropdownContentProps } from "./UserDropdownContent"

export default {
title: "components/UserDropdown",
component: UserProfileCard,
argTypes: {
onSignOut: { action: "Sign Out" },
},
title: "components/UserDropdownContent",
component: UserDropdownContent,
}

const Template: Story<UserProfileCardProps> = (args: UserProfileCardProps) => <UserProfileCard {...args} />
const Template: Story<UserDropdownContentProps> = (args) => <UserDropdownContent {...args} />

export const ExampleNoRoles = Template.bind({})
ExampleNoRoles.args = {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
import { screen } from "@testing-library/react"
import { MockAdminRole, MockUser } from "../../testHelpers/entities"
import { render } from "../../testHelpers/renderHelpers"
import { Language, UserDropdownContent } from "./UserDropdownContent"

describe("UserDropdownContent", () => {
const env = process.env

// REMARK: copying process.env so we don't mutate that object or encounter conflicts between tests
beforeEach(() => {
process.env = { ...env }
})

// REMARK: restoring process.env
afterEach(() => {
process.env = env
})

it("displays the menu items", () => {
render(<UserDropdownContent user={MockUser} onSignOut={jest.fn()} onPopoverClose={jest.fn()} />)
expect(screen.getByText(Language.accountLabel)).toBeDefined()
expect(screen.getByText(Language.docsLabel)).toBeDefined()
expect(screen.getByText(Language.signOutLabel)).toBeDefined()
})

it("displays the user's roles", () => {
render(<UserDropdownContent user={MockUser} onSignOut={jest.fn()} onPopoverClose={jest.fn()} />)

expect(screen.getByText(MockAdminRole.display_name)).toBeDefined()
})

it("has the correct link for the documentation item", () => {
process.env.CODER_VERSION = "v0.5.4"
render(<UserDropdownContent user={MockUser} onSignOut={jest.fn()} onPopoverClose={jest.fn()} />)

const link = screen.getByText(Language.docsLabel).closest("a")
if (!link) {
throw new Error("Anchor tag not found for the documentation menu item")
}

expect(link.getAttribute("href")).toBe(`https://github.com/coder/coder/tree/${process.env.CODER_VERSION}/docs`)
})

it("has the correct link for the account item", () => {
render(<UserDropdownContent user={MockUser} onSignOut={jest.fn()} onPopoverClose={jest.fn()} />)

const link = screen.getByText(Language.accountLabel).closest("a")
if (!link) {
throw new Error("Anchor tag not found for the account menu item")
}

expect(link.getAttribute("href")).toBe("/settings/account")
})

it("calls the onSignOut function", () => {
const onSignOut = jest.fn()
render(<UserDropdownContent user={MockUser} onSignOut={onSignOut} onPopoverClose={jest.fn()} />)
screen.getByText(Language.signOutLabel).click()
expect(onSignOut).toBeCalledTimes(1)
})
})
Loading
[8]ページ先頭
©2009-2025 Movatter.jp