minimal test fail message

Signed-off-by: shmck <[email protected]>

Author: ShMcK

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

@@ -1,14 +1,10 @@
 import Message from '../Message'
 import * as React from 'react'
 import * as T from 'typings'
-import Button from '../Button'
 import { css, jsx } from '@emotion/core'
-import TestMessage from './TestMessage'
 
 interface Props {
-  testStatus?: T.TestStatus | null
   processes: T.ProcessEvent[]
-  onOpenLogs?: (channel: string) => void
 }
 
 const styles = {
@@ -19,22 +15,7 @@ const styles = {
 }
 
 // display a list of active processes
-const ProcessMessages = ({ processes, testStatus, onOpenLogs }: Props) => {
-  if (testStatus) {
-    return (
-      <TestMessage {...testStatus}>
-        {testStatus.type === 'warning' ? (
-          <Button
-            onClick={() => onOpenLogs && onOpenLogs('CodeRoad (Tests)')}
-            type="normal"
-            style={{ marginTop: '0.8rem' }}
-          >
-            Open Logs
-          </Button>
-        ) : null}
-      </TestMessage>
-    )
-  }
+const ProcessMessages = ({ processes }: Props) => {
   if (!processes.length) {
     return null
   }

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

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import Icon from '../Icon'
+import { css, jsx } from '@emotion/core'
+
+const styles = {
+  container: {
+    backgroundColor: '#fff3e0',
+    padding: '0.5rem',
+    animationDuration: '0.3s',
+    animationTimingFunction: 'ease-in-out',
+    borderTopLeftRadius: '4px',
+    borderTopRightRadius: '4px',
+    color: 'rgb(51, 51, 51)',
+    fontSize: '0.8rem',
+  },
+  icon: {
+    color: '#ff9300',
+  },
+  content: {
+    marginLeft: '0.5rem',
+  },
+}
+
+interface Props {
+  message?: string
+}
+
+const TestMessage = (props: Props) => {
+  const [visible, setVisible] = React.useState(true)
+
+  React.useEffect(() => {
+    setVisible(true)
+    const timeout = setTimeout(() => {
+      setVisible(false)
+    }, 4500)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [props.message])
+
+  return visible && props.message ? (
+    <div css={styles.container}>
+      <Icon type="warning" style={styles.icon} size="xs" />
+      <span css={styles.content}>{props.message}</span>
+    </div>
+  ) : null
+}
+
+export default TestMessage

web-app/src/components/TestMessage/index.tsx

@@ -7,6 +7,7 @@ import Icon from '../../../components/Icon'
 import Button from '../../../components/Button'
 import Markdown from '../../../components/Markdown'
 import ProcessMessages from '../../../components/ProcessMessages'
+import TestMessage from '../../../components/TestMessage'
 import ContentMenu from './ContentMenu'
 import Step from './Step'
 import { DISPLAY_RUN_TEST_BUTTON } from '../../../environment'
@@ -58,15 +59,17 @@ const styles = {
   processes: {
     padding: '0 1rem',
     position: 'fixed' as 'fixed',
-    bottom: '4rem',
+    bottom: '2rem',
     left: 0,
     right: 0,
+    top: 'auto',
   },
-  nux: {
-    position: 'fixed' as 'fixed',
+  testMessage: {
+    position: 'absolute' as 'absolute',
+    top: 'auto',
     bottom: '2rem',
-    left: 0,
-    right: 0,
+    left: '5px',
+    right: '5px',
   },
   footer: {
     display: 'flex' as 'flex',
@@ -119,8 +122,6 @@ const Level = ({
 }: Props) => {
   const level: TT.Level = tutorial.levels[index]
 
-  console.log(level)
-
   const [title, setTitle] = React.useState<string>(level.title)
   const [content, setContent] = React.useState<string>(level.content)
 
@@ -230,13 +231,20 @@ const Level = ({
 
         <div ref={pageBottomRef} />
 
-        {((testStatus && testStatus.type !== 'hidden') || processes.length > 0) && (
-          <div css={styles.processes}>
-            <ProcessMessages processes={processes} testStatus={testStatus} onOpenLogs={onOpenLogs} />
-          </div>
-        )}
-
         <div css={styles.footer}>
+          {/* Process Modal */}
+          {processes.length > 0 && (
+            <div css={styles.processes}>
+              <ProcessMessages processes={processes} />
+            </div>
+          )}
+          {/* Test Fail Modal */}
+          {testStatus && testStatus.type === 'warning' && (
+            <div css={styles.testMessage}>
+              <TestMessage message={testStatus.title} />
+            </div>
+          )}
+
           {DISPLAY_RUN_TEST_BUTTON && status !== 'COMPLETE' ? (
             <Button type="primary" onClick={onRunTest} disabled={processes.length > 0}>
               Run

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

@@ -11,8 +11,8 @@ interface Props {
   status: T.ProgressStatus
   subtasks: { name: string; pass: boolean }[] | null
   hints?: string[]
-  hintIndex?: number
-  setHintIndex?(value: number): void
+  hintIndex: number
+  setHintIndex(value: number): void
   onLoadSolution(): void
 }
 

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

@@ -14,7 +14,6 @@ storiesOf('Components', module)
   .addDecorator(SideBarDecorator)
   .add('Processes', () => (
     <ProcessMessages
-      testStatus={null}
       processes={[
         {
           title: 'npm install',
@@ -27,31 +26,3 @@ storiesOf('Components', module)
       ]}
     />
   ))
-  .add('Test Start', () => (
-    <ProcessMessages
-      testStatus={{
-        type: 'loading',
-        title: 'Test running...',
-      }}
-      processes={[]}
-    />
-  ))
-  .add('Test Pass', () => (
-    <ProcessMessages
-      testStatus={{
-        type: 'success',
-        title: 'Success!',
-      }}
-      processes={[]}
-    />
-  ))
-  .add('Test Fail', () => (
-    <ProcessMessages
-      testStatus={{
-        type: 'warning',
-        title: 'Fail!',
-        content: 'Test failed for some reason',
-      }}
-      processes={[]}
-    />
-  ))

web-app/stories/Commands.stories.tsx

@@ -65,6 +65,8 @@ storiesOf('Step', module)
       status="ACTIVE"
       onLoadSolution={action('onLoadSolution')}
       subtasks={null}
+      hintIndex={0}
+      setHintIndex={action('setHintIndex')}
     />
   ))
   .add('Step Markdown', () => (
@@ -74,6 +76,8 @@ storiesOf('Step', module)
       status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
       onLoadSolution={action('onLoadSolution')}
       subtasks={null}
+      hintIndex={0}
+      setHintIndex={action('setHintIndex')}
     />
   ))
   .add('Substasks', () => (
@@ -96,6 +100,8 @@ storiesOf('Step', module)
           pass: false,
         },
       ]}
+      hintIndex={0}
+      setHintIndex={action('setHintIndex')}
     />
   ))
   .add('Hints', () => (

web-app/stories/Step.stories.tsx

@@ -0,0 +1,8 @@
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import TestMessage from '../src/components/TestMessage'
+import SideBarDecorator from './utils/SideBarDecorator'
+
+storiesOf('Test Message', module)
+  .addDecorator(SideBarDecorator)
+  .add('Fail', () => <TestMessage content={'Test failed for some reason'} />)