Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a36cd0b

Browse files
kylecarbscode-asher
kylecarbs
and
code-asher
authored
refactor: move footer items into the user dropdown (#5562)
* refactor: move footer items into the user dropdown The items at the bottom looked unprofessional. Users don't always need to be prompted to join our Discord or see the active version of Coder. This moves the items in the user dropdown which looks better. * Update site/src/components/UserDropdownContent/UserDropdownContent.tsx Co-authored-by: Asher <[email protected]> * Fix import order Co-authored-by: Asher <[email protected]>
1 parent 925b298 commit a36cd0b

File tree

12 files changed

+119
-153
lines changed

12 files changed

+119
-153
lines changed

‎site/src/components/AuthAndFrame/AuthAndFrame.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useActor } from "@xstate/react"
33
import { Loader } from "components/Loader/Loader"
44
import { FC, Suspense, useContext, useEffect } from "react"
55
import { XServiceContext } from "../../xServices/StateContext"
6-
import { Footer } from "../Footer/Footer"
76
import { Navbar } from "../Navbar/Navbar"
87
import { RequireAuth } from "../RequireAuth/RequireAuth"
98
import { UpdateCheckBanner } from "components/UpdateCheckBanner/UpdateCheckBanner"
@@ -20,7 +19,6 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
2019
const styles = useStyles()
2120
const xServices = useContext(XServiceContext)
2221
const [authState] = useActor(xServices.authXService)
23-
const [buildInfoState] = useActor(xServices.buildInfoXService)
2422
const [updateCheckState, updateCheckSend] = useActor(
2523
xServices.updateCheckXService,
2624
)
@@ -51,7 +49,6 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
5149
<div className={styles.siteContent}>
5250
<Suspense fallback={<Loader />}>{children}</Suspense>
5351
</div>
54-
<Footer buildInfo={buildInfoState.context.buildInfo} />
5552
</div>
5653
</RequireAuth>
5754
)

‎site/src/components/DeploySettingsLayout/Badges.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { Stack } from "components/Stack/Stack"
33
import React, { PropsWithChildren } from "react"
4+
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
45
import { combineClasses } from "util/combineClasses"
56

67
export const EnabledBadge: React.FC = () => {
@@ -39,6 +40,17 @@ export const EnterpriseBadge: React.FC = () => {
3940
)
4041
}
4142

43+
export const VersionBadge: React.FC<{
44+
version: string
45+
}> = ({ version }) => {
46+
const styles = useStyles()
47+
return (
48+
<span className={combineClasses([styles.badge, styles.versionBadge])}>
49+
Version: {version}
50+
</span>
51+
)
52+
}
53+
4254
export const Badges: React.FC<PropsWithChildren> = ({ children }) => {
4355
const styles = useStyles()
4456
return (
@@ -76,6 +88,16 @@ const useStyles = makeStyles((theme) => ({
7688
border: `1px solid ${theme.palette.info.light}`,
7789
},
7890

91+
versionBadge: {
92+
border: `1px solid ${theme.palette.success.light}`,
93+
backgroundColor: theme.palette.success.dark,
94+
textTransform: "none",
95+
color: "white",
96+
fontFamily: MONOSPACE_FONT_FAMILY,
97+
textDecoration: "none",
98+
fontSize: 12,
99+
},
100+
79101
enabledBadge: {
80102
border: `1px solid ${theme.palette.success.light}`,
81103
backgroundColor: theme.palette.success.dark,

‎site/src/components/Footer/Footer.stories.tsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎site/src/components/Footer/Footer.test.tsx

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎site/src/components/Footer/Footer.tsx

Lines changed: 0 additions & 98 deletions
This file was deleted.

‎site/src/components/Navbar/Navbar.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { NavbarView } from "../NavbarView/NavbarView"
88
export const Navbar: React.FC = () => {
99
const xServices = useContext(XServiceContext)
1010
const [authState, authSend] = useActor(xServices.authXService)
11+
const [buildInfoState] = useActor(xServices.buildInfoXService)
1112
const { me, permissions } = authState.context
1213
const featureVisibility = useSelector(
1314
xServices.entitlementsXService,
@@ -23,6 +24,7 @@ export const Navbar: React.FC = () => {
2324
return (
2425
<NavbarView
2526
user={me}
27+
buildInfo={buildInfoState.context.buildInfo}
2628
onSignOut={onSignOut}
2729
canViewAuditLog={canViewAuditLog}
2830
canViewDeployment={canViewDeployment}

‎site/src/components/NavbarView/NavbarView.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { UserDropdown } from "../UserDropdown/UsersDropdown"
1515

1616
export interface NavbarViewProps {
1717
user?: TypesGen.User
18+
buildInfo?: TypesGen.BuildInfoResponse
1819
onSignOut: () => void
1920
canViewAuditLog: boolean
2021
canViewDeployment: boolean
@@ -83,6 +84,7 @@ const NavItems: React.FC<
8384
}
8485
export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
8586
user,
87+
buildInfo,
8688
onSignOut,
8789
canViewAuditLog,
8890
canViewDeployment,
@@ -130,7 +132,13 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
130132
/>
131133

132134
<div className={styles.profileButton}>
133-
{user && <UserDropdown user={user} onSignOut={onSignOut} />}
135+
{user && (
136+
<UserDropdown
137+
user={user}
138+
buildInfo={buildInfo}
139+
onSignOut={onSignOut}
140+
/>
141+
)}
134142
</div>
135143
</div>
136144
</nav>

‎site/src/components/SignInLayout/SignInLayout.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { FC, ReactNode } from "react"
3-
import { Footer } from "../../components/Footer/Footer"
43

54
export const useStyles = makeStyles((theme) => ({
65
root: {
@@ -28,7 +27,7 @@ export const SignInLayout: FC<{ children: ReactNode }> = ({ children }) => {
2827
<div className={styles.root}>
2928
<div className={styles.layout}>
3029
<div className={styles.container}>{children}</div>
31-
<Footer />
30+
{`\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`}
3231
</div>
3332
</div>
3433
)

‎site/src/components/UserDropdown/UsersDropdown.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ import { UserDropdownContent } from "../UserDropdownContent/UserDropdownContent"
1212

1313
export interface UserDropdownProps {
1414
user: TypesGen.User
15+
buildInfo?: TypesGen.BuildInfoResponse
1516
onSignOut: () => void
1617
}
1718

1819
export const UserDropdown: React.FC<
1920
React.PropsWithChildren<UserDropdownProps>
20-
> = ({ user, onSignOut }: UserDropdownProps) => {
21+
> = ({ buildInfo, user, onSignOut }: UserDropdownProps) => {
2122
const styles = useStyles()
2223
const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>()
2324

@@ -65,6 +66,7 @@ export const UserDropdown: React.FC<
6566
>
6667
<UserDropdownContent
6768
user={user}
69+
buildInfo={buildInfo}
6870
onPopoverClose={onPopoverClose}
6971
onSignOut={onSignOut}
7072
/>

‎site/src/components/UserDropdownContent/UserDropdownContent.test.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { screen } from "@testing-library/react"
2-
import { MockUser } from "../../testHelpers/entities"
2+
import { MockBuildInfo, MockUser } from "../../testHelpers/entities"
33
import { render } from "../../testHelpers/renderHelpers"
44
import { Language, UserDropdownContent } from "./UserDropdownContent"
55

@@ -20,13 +20,18 @@ describe("UserDropdownContent", () => {
2020
render(
2121
<UserDropdownContent
2222
user={MockUser}
23+
buildInfo={MockBuildInfo}
2324
onSignOut={jest.fn()}
2425
onPopoverClose={jest.fn()}
2526
/>,
2627
)
2728
expect(screen.getByText(Language.accountLabel)).toBeDefined()
2829
expect(screen.getByText(Language.docsLabel)).toBeDefined()
2930
expect(screen.getByText(Language.signOutLabel)).toBeDefined()
31+
expect(screen.getByText(Language.bugLabel)).toBeDefined()
32+
expect(screen.getByText(Language.discordLabel)).toBeDefined()
33+
expect(screen.getByText(Language.copyrightText)).toBeDefined()
34+
expect(screen.getByText(MockBuildInfo.version)).toBeDefined()
3035
})
3136

3237
it("has the correct link for the account item", () => {

0 commit comments

Comments
 (0)