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

Commitb80de3c

Browse files
committed
Fix margins, improve alert banner and add stories
1 parent979ff80 commitb80de3c

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
importButtonfrom"@material-ui/core/Button"
44
import{makeMockApiError}from"testHelpers/entities"
55
import{AlertBannerProps}from"./alertTypes"
6+
importLinkfrom"@material-ui/core/Link"
67

78
exportdefault{
89
title:"components/AlertBanner",
@@ -106,3 +107,16 @@ ErrorAsWarning.args = {
106107
error:mockError,
107108
severity:"warning",
108109
}
110+
111+
constWithChildren:Story<AlertBannerProps>=(args)=>(
112+
<AlertBanner{...args}>
113+
<div>
114+
This is a message with a<Linkhref="#">link</Link>
115+
</div>
116+
</AlertBanner>
117+
)
118+
119+
exportconstInfoWithChildContent=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
importCollapsefrom"@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+
constdefaultMessage=
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-
constalertMessage=getErrorMessage(
37-
error,
38-
text??t("warningsAndErrors.somethingWentWrong"),
39-
)
44+
constalertMessage=getErrorMessage(error,defaultMessage)
4045

4146
// if we have an error, check if there's detail to display
4247
constdetail=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
interfaceAuthAndFrameProps{
1213
children:JSX.Element
@@ -16,7 +17,7 @@ interface AuthAndFrameProps {
1617
* Wraps page in RequireAuth and renders it between Navbar and Footer
1718
*/
1819
exportconstAuthAndFrame:FC<AuthAndFrameProps>=({ children})=>{
19-
conststyles=useStyles()
20+
conststyles=useStyles({})
2021
constxServices=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
<divclassName={styles.site}>
2728
<Navbar/>
28-
<UpdateCheckBannerupdateCheck={updateCheckState.context.updateCheck}/>
29+
<divclassName={styles.siteBanner}>
30+
<Margins>
31+
<UpdateCheckBanner
32+
updateCheck={updateCheckState.context.updateCheck}
33+
/>
34+
</Margins>
35+
</div>
2936
<divclassName={styles.siteContent}>
3037
<Suspensefallback={<Loader/>}>{children}</Suspense>
3138
</div>
@@ -35,13 +42,18 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
3542
)
3643
}
3744

38-
constuseStyles=makeStyles(()=>({
45+
constuseStyles=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
}))
Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
importLinkfrom"@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*asTypesGenfrom"api/typesGenerated"
75

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

1815
return(
19-
<divclassName={styles.root}>
16+
<>
2017
{updateCheck&&!updateCheck.current&&(
21-
<Margins>
22-
<AlertBannerseverity="info"text=""dismissible>
23-
<div>
24-
<Transt={t}i18nKey="updateCheck.message">
25-
Coder{updateCheck.version} is now available. View the{" "}
26-
<Linkhref={updateCheck.url}>release notes</Link> and{" "}
27-
<Linkhref="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+
<AlertBannerseverity="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+
<Linkhref={updateCheck.url}>release notes</Link> and{" "}
27+
<Linkhref="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-
constuseStyles=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)
[8]ページ先頭
©2009-2025 Movatter.jp