From c05469a42c7ef23dbdcacbd6de506209441d45d5 Mon Sep 17 00:00:00 2001
From: Mikael VALLENET <mikael.vallenet@epitech.eu>
Date: Thu, 4 Aug 2022 00:17:22 +0200
Subject: [PATCH] feat: add assign in cards with links for each person (#549)

---
 web/src/ui/Visualizer/InfoBox.js   | 28 +++++++++++++++++++++++++---
 web/src/ui/Visualizer/infoBox.scss | 12 ++++++++++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/web/src/ui/Visualizer/InfoBox.js b/web/src/ui/Visualizer/InfoBox.js
index 1d32cae24..3949b74fa 100644
--- a/web/src/ui/Visualizer/InfoBox.js
+++ b/web/src/ui/Visualizer/InfoBox.js
@@ -4,6 +4,7 @@ import { User } from 'react-feather'
 import Issue from '../components/icons/Issue'
 import Pr from '../components/icons/Pr'
 import './infoBox.scss'
+import {element} from "prop-types";
 
 const InfoBox = ({ data }) => {
   const openWebLink = () => {
@@ -24,7 +25,11 @@ const InfoBox = ({ data }) => {
     default:
       break
   }
-  const auhorLink = data.has_author
+  const authorLink = data.has_author
+  let assignLength = 0
+  if (data.has_assignee !== undefined) {
+    assignLength = data.has_assignee.length
+  }
   return (
     <Draggable>
       <div className="info-box">
@@ -43,10 +48,27 @@ const InfoBox = ({ data }) => {
           <div className="info-box-body">
             {data.title ? data.title.replace(/"/gi, '\'') : 'No title'}
           </div>
-          {auhorLink && (
+          {assignLength !== 0 && authorLink && (
+            <div>
+              <div className="info-box-assign-link">
+                <User size={16} />
+                Assign:&nbsp;
+                {data.has_assignee.map((element, i) => <a href={element} target="_blank" rel="noopener noreferrer">{element.toString().replace('https://github.com/', '')}
+                  {i !== assignLength-1? ', ' : ''}
+                </a>)}
+              </div>
+              <div className="info-box-assign-link">
+              <User size={16} />
+              Author:&nbsp;
+              <a href={`${authorLink}`} target="_blank" rel="noopener noreferrer">{authorLink.replace('https://github.com/', '')}</a>
+              </div>
+            </div>
+          )}
+          {authorLink && assignLength === 0 && (
           <div className="info-box-author-link">
             <User size={16} />
-            <a href={`${auhorLink}`} target="_blank" rel="noopener noreferrer">{auhorLink.replace('https://github.com/', '')}</a>
+             Author:&nbsp;
+            <a href={`${authorLink}`} target="_blank" rel="noopener noreferrer">{authorLink.replace('https://github.com/', '')}</a>
           </div>
           )}
           <div className="info-box-actions">
diff --git a/web/src/ui/Visualizer/infoBox.scss b/web/src/ui/Visualizer/infoBox.scss
index 72a0cf107..e1a543d5a 100644
--- a/web/src/ui/Visualizer/infoBox.scss
+++ b/web/src/ui/Visualizer/infoBox.scss
@@ -4,8 +4,8 @@
   position: absolute;
   left: 0.5rem;
   top: 0.5rem;
-  width: 320px;
-  height: 160px;
+  width: 360px;
+  height: 180px;
   color: #383B62;
   background-color: #ffffff;
   border-radius: 6px;
@@ -54,11 +54,19 @@
     }
     .info-box-author-link {
       display: flex;
+      margin-top: 1.5rem;
       align-items: center;
       svg {
         margin-right: 0.35rem;
       }
     }
+    .info-box-assign-link {
+          display: flex;
+          align-items: center;
+          svg {
+            margin-right: 0.35rem;
+          }
+        }
   }
   .info-box-actions {
     position: absolute;