From 67971c0799cec98fbe3e4d3bbd9c818b7da4c1e9 Mon Sep 17 00:00:00 2001
From: leko <leko@atomite.io>
Date: Mon, 9 May 2022 15:58:37 +0200
Subject: [PATCH] feat: add docker callback in result

---
 app/components/InfoMessage.tsx      | 18 ++++++++++++++++++
 app/components/TestAlert.tsx        | 29 -----------------------------
 app/components/ValidationResult.tsx |  5 ++++-
 app/pages/_app.tsx                  | 17 +++++++++++++++--
 4 files changed, 37 insertions(+), 32 deletions(-)
 create mode 100644 app/components/InfoMessage.tsx
 delete mode 100644 app/components/TestAlert.tsx

diff --git a/app/components/InfoMessage.tsx b/app/components/InfoMessage.tsx
new file mode 100644
index 0000000..d4a9938
--- /dev/null
+++ b/app/components/InfoMessage.tsx
@@ -0,0 +1,18 @@
+import { Alert, Box, Container, Stack } from '@mui/material';
+import theme from '../styles/theme';
+
+const InfoMessage = (props: any) => {
+  return (
+    <Box sx={props.sx}>
+      <Container>
+        <Alert severity="info">
+          <Stack direction="row" spacing={1} alignItems="center">
+            {props.children}
+          </Stack>
+        </Alert>
+      </Container>
+    </Box>
+  );
+};
+
+export default InfoMessage;
diff --git a/app/components/TestAlert.tsx b/app/components/TestAlert.tsx
deleted file mode 100644
index 636d0f9..0000000
--- a/app/components/TestAlert.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { Alert, Box, Container, Stack } from '@mui/material';
-import Link from 'next/link';
-import theme from '../styles/theme';
-
-const TestAlert = () => {
-  return (
-    <Box sx={{
-      paddingLeft: '80px',
-      paddingTop: '20px',
-      paddingRight: '40px',
-      [theme.breakpoints.down('md')]: {
-        paddingLeft: '0',
-        paddingTop: '20px',
-      },
-    }}>
-      <Container>
-        <Alert severity="info">
-          <Stack direction="row" spacing={1} alignItems="center">
-            <span>Note that this is an early build, please provide feedback in <Link href="https://forms.gle/eRfRYeFs2D7JhmPRA"><a target="_blank">this form</a></Link> or one of the channels listed to the right</span>
-            <ArrowForwardIcon />
-          </Stack>
-        </Alert>
-      </Container>
-    </Box>
-  );
-};
-
-export default TestAlert;
diff --git a/app/components/ValidationResult.tsx b/app/components/ValidationResult.tsx
index 3b11791..6209c3a 100644
--- a/app/components/ValidationResult.tsx
+++ b/app/components/ValidationResult.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 import ErrorAlert from './ErrorAlert';
+import InfoMessage from './InfoMessage';
 import TaskRow from './TaskRow';
 import { Session } from '../api/client';
 import useApiClient from '../hooks/useApiClient';
@@ -63,7 +64,6 @@ const ValidationResult = (props: ValidationResultProps) => {
     setAnchorEl(null);
   };
 
-
   React.useEffect(() => {
     if (!session) {
       return;
@@ -114,6 +114,9 @@ const ValidationResult = (props: ValidationResultProps) => {
         <Typography variant="h3">Validation result</Typography>
         { session && <Typography variant="body2" sx={{ [theme.breakpoints.down('md')]: { display: 'none' }}}>[{session.id}]</Typography> }
       </Stack>
+      <InfoMessage>
+        <span>Are you interested in diving deeper? Consider testing it locally with <Link href="https://hub.docker.com/r/lekojson/greenlight"><a target="_blank">Docker</a></Link></span>
+      </InfoMessage>
       <Box>
         { tasks && tasks.length ? (
           tasks.map(task => <TaskRow key={task.name} session={session} task={task} />)
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
index 1289bdd..4cd9e24 100644
--- a/app/pages/_app.tsx
+++ b/app/pages/_app.tsx
@@ -1,11 +1,13 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { AssignmentRounded, HomeRounded } from '@mui/icons-material';
 import { ThemeProvider } from '@mui/material/styles';
 import { AppProps } from 'next/app';
+import Link from 'next/link';
 import BugReport from '../components/BugReport';
 import Footer from '../components/Footer';
 import NavBar from '../components/NavBar';
 import NavDial from '../components/NavDial';
-import TestAlert from '../components/TestAlert';
+import InfoMessage from '../components/InfoMessage';
 import theme from '../styles/theme';
 import '../styles/globals.css';
 
@@ -22,7 +24,18 @@ const menuItems = [{
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <ThemeProvider theme={theme}>
-      <TestAlert />
+      <InfoMessage sx={{
+        paddingLeft: '80px',
+        paddingTop: '20px',
+        paddingRight: '40px',
+        [theme.breakpoints.down('md')]: {
+          paddingLeft: '0',
+          paddingTop: '20px',
+        },
+      }}>
+        <span>Note that this is an early build, please provide feedback in <Link href="https://forms.gle/eRfRYeFs2D7JhmPRA"><a target="_blank">this form</a></Link> or one of the channels listed to the right</span>
+        <ArrowForwardIcon />
+      </InfoMessage>
       <BugReport />
       <NavBar items={menuItems} />
       <NavDial items={menuItems} />