From 3d25c768bf799f3eae93ab1e7a2c6c0077fb13e2 Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Fri, 4 Mar 2022 03:50:28 +0100
Subject: [PATCH] Added possibility for videos and documentation for usecases
 to map to workflows

---
 backend/go-app/go.mod            |   2 +-
 frontend/src/views/Dashboard.jsx | 152 +++++++++++++++++++++++++------
 2 files changed, 123 insertions(+), 31 deletions(-)

diff --git a/backend/go-app/go.mod b/backend/go-app/go.mod
index a0289ae9..5475e9b0 100644
--- a/backend/go-app/go.mod
+++ b/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
diff --git a/frontend/src/views/Dashboard.jsx b/frontend/src/views/Dashboard.jsx
index 395680b5..08c4687a 100644
--- a/frontend/src/views/Dashboard.jsx
+++ b/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,8 +89,10 @@ const UsecaseListComponent = ({keys, isCloud}) => {
       						<Grid item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
 										if (selectedItem) {
 										} else {
-											setExpandedIndex(index)
-											setExpandedItem(subindex)
+											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={() => {
@@ -96,23 +100,67 @@ const UsecaseListComponent = ({keys, isCloud}) => {
 										}}>
 											{!selectedItem ? 
 												<div style={{textAlign: "left", position: "relative",}}>
-													<Typography variant="h6">
+													<Typography variant="h6" style={{maxWidth: 215}}>
 														<b>{subcase.name}</b>
 													</Typography>
-													{finished ? 
-														<Tooltip
-															title="A workflow has been assigned"
-															placement="top"
-														>
-															<IconButton
-																style={{ position: "absolute", top: -20, right: -20}}
-																onClick={(e) => {
-																}}
+													<div style={{position: "absolute", top: -26, right: -20, width: 50, }}>
+														{finished ? 
+															<Tooltip
+																title="A workflow has been assigned for this use case"
+																placement="top"
 															>
-																<DoneAllIcon style={{ color: usecase.color }} />
-															</IconButton>
-														</Tooltip>
+																<IconButton
+																	style={{}}
+																	onClick={(e) => {
+																	}}
+																>
+																	<DoneAllIcon style={{ color: usecase.color }} />
+																</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,21 +170,65 @@ const UsecaseListComponent = ({keys, isCloud}) => {
 													<Typography variant="body2">
 														Description: {subcase.description}
 													</Typography>
-          								<Tooltip
-          								  title="Close window"
-          								  placement="top"
-          								  style={{ zIndex: 10011 }}
-          								>
-          								  <IconButton
-          								    style={{ position: "absolute", top: 0, right: 0}}
-          								    onClick={(e) => {
-																setExpandedItem(-1)
-																setExpandedIndex(-1)
-          								    }}
-          								  >
-          								    <CloseIcon style={{ color: "white" }} />
-          								  </IconButton>
-          								</Tooltip>
+													<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={{}}
+          									    onClick={(e) => {
+																	setExpandedItem(-1)
+																	setExpandedIndex(-1)
+          									    }}
+          									  >
+          									    <CloseIcon style={{ color: "white" }} />
+          									  </IconButton>
+          									</Tooltip>
+													</div>
 													<div style={{marginTop: 25, display: "flex", minHeight: 400, maxHeight: 400, }}>
 														<img
 															alt={subcase.name}