Added possibility for videos and documentation for usecases to map to workflows

backend/go-app/go.mod

@@ -2,7 +2,7 @@ module main
 
 go 1.16
 
-//replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared
+replace github.com/shuffle/shuffle-shared => ../../../shuffle-shared
 
 //replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi
 //replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch

frontend/src/views/Dashboard.jsx

@@ -20,6 +20,8 @@ import {
 import {
   Close as CloseIcon,
 	DoneAll as DoneAllIcon,
+	Description as DescriptionIcon,
+	PlayArrow as PlayArrowIcon,
 } from "@material-ui/icons";
 
 import WorkflowPaper from "../components/WorkflowPaper.jsx"
@@ -87,25 +89,28 @@ const UsecaseListComponent = ({keys, isCloud}) => {
       						<Grid item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
 										if (selectedItem) {
 										} else {
+											if (subcase.description !== undefined && subcase.description !== null && subcase.description.length > 0) {
 												setExpandedIndex(index)
 												setExpandedItem(subindex)
 											}
+										}
 									}}>
 										<Paper style={{padding: "30px 30px 30px 30px", minHeight: 75, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
 											console.log("Clicked: ", subcase)
 										}}>
 											{!selectedItem ? 
 												<div style={{textAlign: "left", position: "relative",}}>
-													<Typography variant="h6">
+													<Typography variant="h6" style={{maxWidth: 215}}>
 														<b>{subcase.name}</b>
 													</Typography>
+													<div style={{position: "absolute", top: -26, right: -20, width: 50, }}>
 														{finished ? 
 															<Tooltip
-															title="A workflow has been assigned"
+																title="A workflow has been assigned for this use case"
 																placement="top"
 															>
 																<IconButton
-																style={{ position: "absolute", top: -20, right: -20}}
+																	style={{}}
 																	onClick={(e) => {
 																	}}
 																>
@@ -113,6 +118,49 @@ const UsecaseListComponent = ({keys, isCloud}) => {
 																</IconButton>
 															</Tooltip>
 														: null}
+													{subcase.blogpost !== null && subcase.blogpost !== undefined && subcase.blogpost.length > 0 ? 
+															<a 
+																href={subcase.blogpost}
+																rel="noopener noreferrer"
+																target="_blank"
+                  							style={{ textDecoration: "none", color: "#f85a3e" }}
+															>
+																<Tooltip
+																	title="Click to visit the blogpost"
+																	placement="top"
+																>
+																	<IconButton
+																		style={{paddingTop: 5, }}
+																		onClick={(e) => {
+																		}}
+																	>
+																		<DescriptionIcon style={{ color: usecase.color }} />
+																	</IconButton>
+																</Tooltip>
+															</a>
+														: null}
+														{subcase.video !== null && subcase.video !== undefined && subcase.video.length > 0 ? 
+															<a 
+																href={subcase.video}
+																rel="noopener noreferrer"
+																target="_blank"
+                  							style={{ textDecoration: "none", color: "#f85a3e" }}
+															>
+																<Tooltip
+																	title="Click to see a video for this usecase"
+																	placement="top"
+																>
+																	<IconButton
+																		style={{paddingTop: 5,}}
+																		onClick={(e) => {
+																		}}
+																	>
+            												<PlayArrowIcon style={{ color: usecase.color }} />
+																	</IconButton>
+																</Tooltip>
+															</a>
+													: null}
+													</div>
 												</div>
 											: 
 												<div style={{textAlign: "left", position: "relative",}}>
@@ -122,13 +170,56 @@ const UsecaseListComponent = ({keys, isCloud}) => {
 													<Typography variant="body2">
 														Description: {subcase.description}
 													</Typography>
+													<div style={{ position: "absolute", top: 0, right: 0 }}>
+														{subcase.blogpost !== null && subcase.blogpost !== undefined && subcase.blogpost.length > 0 ? 
+																<a 
+																	href={subcase.blogpost}
+																	rel="noopener noreferrer"
+																	target="_blank"
+                  								style={{ textDecoration: "none", color: "#f85a3e" }}
+																>
+																	<Tooltip
+																		title="Click to visit the blogpost"
+																		placement="top"
+																	>
+																		<IconButton
+																			style={{paddingTop: 5, }}
+																			onClick={(e) => {
+																			}}
+																		>
+																			<DescriptionIcon style={{ color: usecase.color }} />
+																		</IconButton>
+																	</Tooltip>
+																</a>
+															: null}
+															{subcase.video !== null && subcase.video !== undefined && subcase.video.length > 0 ? 
+																<a 
+																	href={subcase.video}
+																	rel="noopener noreferrer"
+																	target="_blank"
+                  								style={{ textDecoration: "none", color: "#f85a3e" }}
+																>
+																	<Tooltip
+																		title="See video for this use case"
+																		placement="top"
+																	>
+																		<IconButton
+																			style={{paddingTop: 5,}}
+																			onClick={(e) => {
+																			}}
+																		>
+            													<PlayArrowIcon style={{ color: usecase.color }} />
+																		</IconButton>
+																	</Tooltip>
+																</a>
+														: null}
           									<Tooltip
           									  title="Close window"
           									  placement="top"
           									  style={{ zIndex: 10011 }}
           									>
           									  <IconButton
-          								    style={{ position: "absolute", top: 0, right: 0}}
+          									    style={{}}
           									    onClick={(e) => {
 																	setExpandedItem(-1)
 																	setExpandedIndex(-1)
@@ -137,6 +228,7 @@ const UsecaseListComponent = ({keys, isCloud}) => {
           									    <CloseIcon style={{ color: "white" }} />
           									  </IconButton>
           									</Tooltip>
+													</div>
 													<div style={{marginTop: 25, display: "flex", minHeight: 400, maxHeight: 400, }}>
 														<img
 															alt={subcase.name}