From daded82117a4c082eeb8b88f9ac5c2ed873ddc9b Mon Sep 17 00:00:00 2001
From: Julien Eluard <julien.eluard@gmail.com>
Date: Thu, 18 Jun 2020 17:37:00 +0200
Subject: [PATCH] Added image details in template selector

---
 frontend/src/components.tsx | 32 +++++++++++++++++++++++++++++---
 frontend/src/server.tsx     |  2 +-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components.tsx b/frontend/src/components.tsx
index 77650ca38..e6cf365dd 100644
--- a/frontend/src/components.tsx
+++ b/frontend/src/components.tsx
@@ -16,6 +16,7 @@ import Divider from '@material-ui/core/Divider';
 import FeedbackIcon from '@material-ui/icons/Feedback';
 import HelpIcon from '@material-ui/icons/Help';
 import IconButton from '@material-ui/core/IconButton';
+import Link from '@material-ui/core/Link';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -28,6 +29,7 @@ import TableRow from '@material-ui/core/TableRow';
 import Toolbar from '@material-ui/core/Toolbar';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import marked from 'marked';
 import { useLocation, useParams } from "react-router-dom";
 import Zoom from '@material-ui/core/Zoom';
@@ -409,9 +411,20 @@ function Nav({ toggleDetails }) {
     );
 }
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& > * + *': {
+        marginLeft: theme.spacing(2),
+      },
+    },
+  }),
+);
+
 function TemplateSelector({templates, onSelect, onRetryClick, state}) {
     const [selection, select] = useState(templates[0]);
     const templatesAvailable = templates?.length > 0;
+    const classes = useStyles();
     return (
     <React.Fragment>
         <Typography variant="h5" style={{padding: 20}}>Select a template</Typography>
@@ -428,9 +441,22 @@ function TemplateSelector({templates, onSelect, onRetryClick, state}) {
                     </List>
                     <Divider flexItem={true} orientation={"vertical"} light={true} />
                     {selection &&
-                    <Typography component="div" style={{width: "100%", marginLeft: 20, overflow: "auto", textAlign: "left"}}>
-                        <div dangerouslySetInnerHTML={{__html:marked(selection.description)}}></div>
-                    </Typography>}
+                    <div style={{flex: 1, marginLeft: 20, paddingRight: 20, overflow: "auto", textAlign: "left"}}>
+                        <Typography>
+                            <span dangerouslySetInnerHTML={{__html:marked(selection.description)}}></span>
+                        </Typography>
+                        <Divider orientation={"horizontal"} light={true} />
+                        <Typography className={classes.root} variant="overline">
+                            Built using the following
+                            <Link
+                                href={`https://${selection.image}`}
+                                rel="noreferrer"
+                                variant="inherit"
+                                style={{margin: 5}}>
+                            image
+                            </Link>
+                        </Typography>
+                    </div>}
                 </div>
                 : <ErrorMessage reason={"Can't find any template. Is the templates configuration incorrect."} onClick={onRetryClick} />
             }
diff --git a/frontend/src/server.tsx b/frontend/src/server.tsx
index e67e0fd42..9cc11385c 100644
--- a/frontend/src/server.tsx
+++ b/frontend/src/server.tsx
@@ -20,7 +20,7 @@ dsfds dsfdsf dsf dsf dsf dsf dsf dsf dsfdsf dsf ds fds fdsf ds fds fds
 ## erez`;
 const runtime = {env: [{name: "SOME_ENV", value: "1234"}], ports: [{name: "web", protocol: "TCP", path: "/", port: 123, target: 123}]};
 const build = {base: "", extensions: [{name: "", value: ""}], repositories: [{name: "", value: ""}], commands: [{name: "", run: "", working_directory: ""}]};
-const template = {image: "gcr.io/substrateplayground-252112/jeluard/substrate-playground-template-base@sha256:0b3ec9ad567d0f5b0eed8a0fc2b1fa3fe1cca24cc02416047d71f83770b05e34", name: "workshop", description: description, runtime: runtime, build: build}
+const template = {image: "gcr.io/substrateplayground-252112/jeluard/substrate-playground-template-base@sha256:0b3ec9ad567d0f5b0eed8a0fc2b1fa3fe1cca24cc02416047d71f83770b05e34", name: "Node Template", description: description, runtime: runtime, build: build}
 const url = "http://www.google.fr";
 const pod = {version: "1.23", details: {status: {phase: "Running", startTime: "2020-05-15T14:06:18Z"}}};
 const uuid = "1234";