10000 Fix margins, improve alert banner and add stories · coder/coder@b80de3c · GitHub
[go: up one dir, main page]
Skip to content

Commit b80de3c

Browse files
mafredrimafredri
committed
Fix margins, improve alert banner and add stories
1 parent 979ff80 commit b80de3c

File tree

5 files changed

+58
-35
lines changed

5 files changed

+58
-35
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AlertBanner } from "./AlertBanner"
33
import Button from "@material-ui/core/Button"
44
import { makeMockApiError } from "testHelpers/entities"
55
import { AlertBannerProps } from "./alertTypes"
6+
import Link from "@material-ui/core/Link"
67

78
export default {
89
title: "components/AlertBanner",
@@ -106,3 +107,16 @@ ErrorAsWarning.args = {
106107
error: mockError,
107108
severity: "warning",
108109
}
110+
111+
const WithChildren: Story<AlertBannerProps> = (args) => (
112+
<AlertBanner {...args}>
113+
<div>
114+
This is a message with a <Link href="#">link</Link>
115+
</div>
116+
</AlertBanner>
117+
)
118+
119+
export const InfoWithChildContent = WithChildren.bind({})
120+
InfoWithChildContent.args = {
121+
severity: "info",
122+
}

‎site/src/components/AlertBanner/AlertBanner.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, FC } from "react"
1+
import { useState, FC, Children } from "react"
22
import Collapse from "@material-ui/core/Collapse"
33
import { Stack } from "components/Stack/Stack"
44
import { makeStyles, Theme } from "@material-ui/core/styles"
@@ -11,6 +11,7 @@ import { severityConstants } from "./severityConstants"
1111
import { AlertBannerCtas } from "./AlertBannerCtas"
1212

1313
/**
14+
* @param children: the children to be displayed in the alert
1415
* @param severity: the level of alert severity (see ./severityTypes.ts)
1516
* @param text: default text to be displayed to the user; useful for warnings or as a fallback error message
1617
* @param error: should be passed in if the severity is 'Error'; warnings can use 'text' instead
@@ -31,12 +32,16 @@ export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
3132

3233
const [open, setOpen] = useState(true)
3334

35+
// Set a fallback message if no text or children are provided.
36+
const defaultMessage =
37+
text ??
38+
(Children.count(children) === 0
39+
? t("warningsAndErrors.somethingWentWrong")
40+
: "")
41+
3442
// if an error is passed in, display that error, otherwise
3543
// display the text passed in, e.g. warning text
36-
const alertMessage = getErrorMessage(
37-
error,
38-
text ?? t("warningsAndErrors.somethingWentWrong"),
39-
)
44+
const alertMessage = getErrorMessage(error, defaultMessage)
4045

4146
// if we have an error, check if there's detail to display
4247
const detail = error ? getErrorDetail(error) : undefined

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Footer } from "../Footer/Footer"
77
import { Navbar } from "../Navbar/Navbar"
88
import { RequireAuth } from "../RequireAuth/RequireAuth"
99
import { UpdateCheckBanner } from "components/UpdateCheckBanner/UpdateCheckBanner"
10+
import { Margins } from "components/Margins/Margins"
1011

1112
interface AuthAndFrameProps {
1213
children: JSX.Element
@@ -16,7 +17,7 @@ interface AuthAndFrameProps {
1617
* Wraps page in RequireAuth and renders it between Navbar and Footer
1718
*/
1819
export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
19-
const styles = useStyles()
20+
const styles = useStyles({})
2021
const xServices = useContext(XServiceContext)
2122
const [buildInfoState] = useActor(xServices.buildInfoXService)
2223
const [updateCheckState] = useActor(xServices.updateCheckXService)
@@ -25,7 +26,13 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
2526
<RequireAuth>
2627
<div className={styles.site}>
2728
<Navbar />
28-
<UpdateCheckBanner updateCheck={updateCheckState.context.updateCheck} />
29+
<div className={styles.siteBanner}>
30+
<Margins>
31+
<UpdateCheckBanner
32+
updateCheck={updateCheckState.context.updateCheck}
33+
/>
34+
</Margins>
35+
</div>
2936
<div className={styles.siteContent}>
3037
<Suspense fallback={<Loader />}>{children}</Suspense>
3138
</div>
@@ -35,13 +42,18 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
3542
)
3643
}
3744

38-
const useStyles = makeStyles(() => ({
45+
const useStyles = makeStyles((theme) => ({
3946
site: {
4047
display: "flex",
4148
minHeight: "100vh",
4249
flexDirection: "column",
4350
},
51+
siteBanner: {
52+
marginTop: theme.spacing(2),
53+
},
4454
siteContent: {
4555
flex: 1,
56+
// Accommodate for banner margin since it is dismissible.
57+
marginTop: -theme.spacing(2),
4658
},
4759
}))

‎site/src/components/UpdateCheckBanner/UpdateCheckBanner.tsx

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import Link from "@material-ui/core/Link"
2-
import { makeStyles } from "@material-ui/core/styles"
32
import { AlertBanner } from "components/AlertBanner/AlertBanner"
4-
import { Margins } from "components/Margins/Margins"
53
import { Trans, useTranslation } from "react-i18next"
64
import * as TypesGen from "api/typesGenerated"
75

@@ -12,34 +10,28 @@ export interface UpdateCheckBannerProps {
1210
export const UpdateCheckBanner: React.FC<
1311
React.PropsWithChildren<UpdateCheckBannerProps>
1412
> = ({ updateCheck }) => {
15-
const styles = useStyles({})
1613
const { t } = useTranslation("common")
1714

1815
return (
19-
<div className={styles.root}>
16+
<>
2017
{updateCheck && !updateCheck.current && (
21-
<Margins>
22-
<AlertBanner severity="info" text="" dismissible>
23-
<div>
24-
<Trans t={t} i18nKey="updateCheck.message">
25-
Coder {updateCheck.version} is now available. View the{" "}
26-
<Link href={updateCheck.url}>release notes</Link> and{" "}
27-
<Link href="https://coder.com/docs/coder-oss/latest/admin/upgrade">
28-
upgrade instructions
29-
</Link>{" "}
30-
for more information.
31-
</Trans>
32-
</div>
33-
</AlertBanner>
34-
</Margins>
18+
<AlertBanner severity="info" dismissible>
19+
<div>
20+
<Trans
21+
t={t}
22+
i18nKey="updateCheck.message"
23+
values={{ version: updateCheck.version }}
24+
>
25+
Coder {"{{version}}"} is now available. View the{" "}
26+
<Link href={updateCheck.url}>release notes</Link> and{" "}
27+
<Link href="https://coder.com/docs/coder-oss/latest/admin/upgrade">
28+
upgrade instructions
29+
</Link>{" "}
30+
for more information.
31+
</Trans>
32+
</div>
33+
</AlertBanner>
3534
)}
36-
</div>
35+
</>
3736
)
3837
}
39-
40-
const useStyles = makeStyles((theme) => ({
41-
root: {
42-
// Common spacing between elements, adds separation from Navbar.
43-
paddingTop: theme.spacing(2),
44-
},
45-
}))

‎site/src/i18n/en/common.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,6 @@
3737
"select": "Select emoji"
3838
},
3939
"updateCheck": {
40-
"message": "Coder {updateCheck.version} is now available. View the <4>release notes</4> and <7>upgrade instructions</7> for more information."
40+
"message": "Coder {{version}} is now available. View the <4>release notes</4> and <7>upgrade instructions</7> for more information."
4141
}
4242
}

0 commit comments

Comments
 (0)
0