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

Commit3a79d1d

Browse files
committed
minimal test fail message
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parente9b4c5d commit3a79d1d

File tree

8 files changed

+87
-110
lines changed

8 files changed

+87
-110
lines changed

‎web-app/src/components/ProcessMessages/TestMessage.tsx‎

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

‎web-app/src/components/ProcessMessages/index.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
importMessagefrom'../Message'
22
import*asReactfrom'react'
33
import*asTfrom'typings'
4-
importButtonfrom'../Button'
54
import{css,jsx}from'@emotion/core'
6-
importTestMessagefrom'./TestMessage'
75

86
interfaceProps{
9-
testStatus?:T.TestStatus|null
107
processes:T.ProcessEvent[]
11-
onOpenLogs?:(channel:string)=>void
128
}
139

1410
conststyles={
@@ -19,22 +15,7 @@ const styles = {
1915
}
2016

2117
// display a list of active processes
22-
constProcessMessages=({ processes, testStatus, onOpenLogs}:Props)=>{
23-
if(testStatus){
24-
return(
25-
<TestMessage{...testStatus}>
26-
{testStatus.type==='warning' ?(
27-
<Button
28-
onClick={()=>onOpenLogs&&onOpenLogs('CodeRoad (Tests)')}
29-
type="normal"
30-
style={{marginTop:'0.8rem'}}
31-
>
32-
Open Logs
33-
</Button>
34-
) :null}
35-
</TestMessage>
36-
)
37-
}
18+
constProcessMessages=({ processes}:Props)=>{
3819
if(!processes.length){
3920
returnnull
4021
}
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import*asReactfrom'react'
2+
importIconfrom'../Icon'
3+
import{css,jsx}from'@emotion/core'
4+
5+
conststyles={
6+
container:{
7+
backgroundColor:'#fff3e0',
8+
padding:'0.5rem',
9+
animationDuration:'0.3s',
10+
animationTimingFunction:'ease-in-out',
11+
borderTopLeftRadius:'4px',
12+
borderTopRightRadius:'4px',
13+
color:'rgb(51, 51, 51)',
14+
fontSize:'0.8rem',
15+
},
16+
icon:{
17+
color:'#ff9300',
18+
},
19+
content:{
20+
marginLeft:'0.5rem',
21+
},
22+
}
23+
24+
interfaceProps{
25+
message?:string
26+
}
27+
28+
constTestMessage=(props:Props)=>{
29+
const[visible,setVisible]=React.useState(true)
30+
31+
React.useEffect(()=>{
32+
setVisible(true)
33+
consttimeout=setTimeout(()=>{
34+
setVisible(false)
35+
},4500)
36+
return()=>{
37+
clearTimeout(timeout)
38+
}
39+
},[props.message])
40+
41+
returnvisible&&props.message ?(
42+
<divcss={styles.container}>
43+
<Icontype="warning"style={styles.icon}size="xs"/>
44+
<spancss={styles.content}>{props.message}</span>
45+
</div>
46+
) :null
47+
}
48+
49+
exportdefaultTestMessage

‎web-app/src/containers/Tutorial/components/Level.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Icon from '../../../components/Icon'
77
importButtonfrom'../../../components/Button'
88
importMarkdownfrom'../../../components/Markdown'
99
importProcessMessagesfrom'../../../components/ProcessMessages'
10+
importTestMessagefrom'../../../components/TestMessage'
1011
importContentMenufrom'./ContentMenu'
1112
importStepfrom'./Step'
1213
import{DISPLAY_RUN_TEST_BUTTON}from'../../../environment'
@@ -58,15 +59,17 @@ const styles = {
5859
processes:{
5960
padding:'0 1rem',
6061
position:'fixed'as'fixed',
61-
bottom:'4rem',
62+
bottom:'2rem',
6263
left:0,
6364
right:0,
65+
top:'auto',
6466
},
65-
nux:{
66-
position:'fixed'as'fixed',
67+
testMessage:{
68+
position:'absolute'as'absolute',
69+
top:'auto',
6770
bottom:'2rem',
68-
left:0,
69-
right:0,
71+
left:'5px',
72+
right:'5px',
7073
},
7174
footer:{
7275
display:'flex'as'flex',
@@ -119,8 +122,6 @@ const Level = ({
119122
}:Props)=>{
120123
constlevel:TT.Level=tutorial.levels[index]
121124

122-
console.log(level)
123-
124125
const[title,setTitle]=React.useState<string>(level.title)
125126
const[content,setContent]=React.useState<string>(level.content)
126127

@@ -230,13 +231,20 @@ const Level = ({
230231

231232
<divref={pageBottomRef}/>
232233

233-
{((testStatus&&testStatus.type!=='hidden')||processes.length>0)&&(
234-
<divcss={styles.processes}>
235-
<ProcessMessagesprocesses={processes}testStatus={testStatus}onOpenLogs={onOpenLogs}/>
236-
</div>
237-
)}
238-
239234
<divcss={styles.footer}>
235+
{/* Process Modal */}
236+
{processes.length>0&&(
237+
<divcss={styles.processes}>
238+
<ProcessMessagesprocesses={processes}/>
239+
</div>
240+
)}
241+
{/* Test Fail Modal */}
242+
{testStatus&&testStatus.type==='warning'&&(
243+
<divcss={styles.testMessage}>
244+
<TestMessagemessage={testStatus.title}/>
245+
</div>
246+
)}
247+
240248
{DISPLAY_RUN_TEST_BUTTON&&status!=='COMPLETE' ?(
241249
<Buttontype="primary"onClick={onRunTest}disabled={processes.length>0}>
242250
Run

‎web-app/src/containers/Tutorial/components/Step.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ interface Props {
1111
status:T.ProgressStatus
1212
subtasks:{name:string;pass:boolean}[]|null
1313
hints?:string[]
14-
hintIndex?:number
15-
setHintIndex?(value:number):void
14+
hintIndex:number
15+
setHintIndex(value:number):void
1616
onLoadSolution():void
1717
}
1818

‎web-app/stories/Commands.stories.tsx‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ storiesOf('Components', module)
1414
.addDecorator(SideBarDecorator)
1515
.add('Processes',()=>(
1616
<ProcessMessages
17-
testStatus={null}
1817
processes={[
1918
{
2019
title:'npm install',
@@ -27,31 +26,3 @@ storiesOf('Components', module)
2726
]}
2827
/>
2928
))
30-
.add('Test Start',()=>(
31-
<ProcessMessages
32-
testStatus={{
33-
type:'loading',
34-
title:'Test running...',
35-
}}
36-
processes={[]}
37-
/>
38-
))
39-
.add('Test Pass',()=>(
40-
<ProcessMessages
41-
testStatus={{
42-
type:'success',
43-
title:'Success!',
44-
}}
45-
processes={[]}
46-
/>
47-
))
48-
.add('Test Fail',()=>(
49-
<ProcessMessages
50-
testStatus={{
51-
type:'warning',
52-
title:'Fail!',
53-
content:'Test failed for some reason',
54-
}}
55-
processes={[]}
56-
/>
57-
))

‎web-app/stories/Step.stories.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ storiesOf('Step', module)
6565
status="ACTIVE"
6666
onLoadSolution={action('onLoadSolution')}
6767
subtasks={null}
68+
hintIndex={0}
69+
setHintIndex={action('setHintIndex')}
6870
/>
6971
))
7072
.add('Step Markdown',()=>(
@@ -74,6 +76,8 @@ storiesOf('Step', module)
7476
status={select('mode',{ACTIVE:'ACTIVE',COMPLETE:'COMPLETE',INCOMPLETE:'INCOMPLETE'},'ACTIVE','step')}
7577
onLoadSolution={action('onLoadSolution')}
7678
subtasks={null}
79+
hintIndex={0}
80+
setHintIndex={action('setHintIndex')}
7781
/>
7882
))
7983
.add('Substasks',()=>(
@@ -96,6 +100,8 @@ storiesOf('Step', module)
96100
pass:false,
97101
},
98102
]}
103+
hintIndex={0}
104+
setHintIndex={action('setHintIndex')}
99105
/>
100106
))
101107
.add('Hints',()=>(

‎web-app/stories/Tests.stories.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import{storiesOf}from'@storybook/react'
2+
importReactfrom'react'
3+
importTestMessagefrom'../src/components/TestMessage'
4+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
5+
6+
storiesOf('Test Message',module)
7+
.addDecorator(SideBarDecorator)
8+
.add('Fail',()=><TestMessagecontent={'Test failed for some reason'}/>)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp