From 1fc09a0873438f734b95e49f92c3c52765679d00 Mon Sep 17 00:00:00 2001
From: Nicolas Borde <nicolas.borde@cosmotech.com>
Date: Thu, 24 Mar 2022 12:04:27 +0100
Subject: [PATCH] feat: add redirection to scenario view button in scenario
 node

---
 src/cards/ScenarioNode/ScenarioNode.js        | 34 +++++++++++++++++--
 .../ScenarioManagerTreeList.js                |  6 ++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/cards/ScenarioNode/ScenarioNode.js b/src/cards/ScenarioNode/ScenarioNode.js
index 9b79f656..66f7f3dc 100644
--- a/src/cards/ScenarioNode/ScenarioNode.js
+++ b/src/cards/ScenarioNode/ScenarioNode.js
@@ -20,6 +20,7 @@ import {
   Cancel as CancelIcon,
   ExpandMore as ExpandMoreIcon,
   Help as HelpIcon,
+  OpenInNew as OpenInNewIcon,
 } from '@material-ui/icons';
 import { DatasetUtils } from '@cosmotech/core';
 import { ConfirmDeleteDialog } from './components';
@@ -31,6 +32,7 @@ export const ScenarioNode = ({
   setIsExpanded,
   scenario,
   showDeleteIcon,
+  findScenarioById,
   deleteScenario,
   labels,
   buildScenarioNameToDelete,
@@ -176,6 +178,11 @@ export const ScenarioNode = ({
     );
   };
 
+  const redirectToScenarioView = (event) => {
+    event.stopPropagation();
+    findScenarioById(scenario.id);
+  };
+
   const getAccordionSummary = () => {
     return (
       <AccordionSummary className={classes.accordionSummary} expandIcon={<ExpandMoreIcon />}>
@@ -188,9 +195,22 @@ export const ScenarioNode = ({
             size="small"
             onClick={openConfirmDialog}
           >
-            <DeleteForeverIcon fontSize="small" />
+            <Tooltip key="scenario-status-tooltip" title={labels.delete}>
+              <DeleteForeverIcon fontSize="small" />
+            </Tooltip>
           </IconButton>
         )}
+        <IconButton
+          className={classes.scenarioDeleteButton}
+          data-cy="scenario-view-redirect"
+          aria-label="redirect to scenario view"
+          size="small"
+          onClick={redirectToScenarioView}
+        >
+          <Tooltip key="scenario-status-tooltip" title={labels.redirect}>
+            <OpenInNewIcon fontSize="small" color="primary" />
+          </Tooltip>
+        </IconButton>
       </AccordionSummary>
     );
   };
@@ -249,7 +269,11 @@ ScenarioNode.propTypes = {
    */
   showDeleteIcon: PropTypes.bool.isRequired,
   /**
-   *  Function bound on delete button
+   * Function bound to redirect to scenario view with matching current scenario
+   */
+  findScenarioById: PropTypes.func.isRequired,
+  /**
+   * Function bound on delete button
    */
   deleteScenario: PropTypes.func.isRequired,
   /**
@@ -262,6 +286,8 @@ ScenarioNode.propTypes = {
         successful: 'string',
         failed: 'string',
         created: 'string'
+        delete: 'string'
+        redirect: 'string' 
         running: 'string',
         dataset: 'string',
         deleteDialog : {
@@ -278,6 +304,8 @@ ScenarioNode.propTypes = {
     successful: PropTypes.string.isRequired,
     failed: PropTypes.string.isRequired,
     created: PropTypes.string.isRequired,
+    delete: PropTypes.string.isRequired,
+    redirect: PropTypes.string.isRequired,
     running: PropTypes.string.isRequired,
     dataset: PropTypes.string.isRequired,
     deleteDialog: PropTypes.shape({
@@ -301,6 +329,8 @@ ScenarioNode.defaultProps = {
     running: 'Running',
     failed: 'Failed',
     created: 'Created',
+    delete: 'Delete this scenario',
+    redirection: 'Redirect to scenario view',
     dataset: 'Datasets',
   },
 };
diff --git a/src/charts/ScenarioManagerTreeList/ScenarioManagerTreeList.js b/src/charts/ScenarioManagerTreeList/ScenarioManagerTreeList.js
index dccabdd3..5bd4ccf6 100644
--- a/src/charts/ScenarioManagerTreeList/ScenarioManagerTreeList.js
+++ b/src/charts/ScenarioManagerTreeList/ScenarioManagerTreeList.js
@@ -30,6 +30,7 @@ export const ScenarioManagerTreeList = (props) => {
   const {
     datasets,
     scenarios,
+    findScenarioById,
     deleteScenario,
     moveScenario,
     userId,
@@ -92,6 +93,7 @@ export const ScenarioManagerTreeList = (props) => {
             datasets={datasets}
             scenario={scenario}
             showDeleteIcon={displayDeleteIcon}
+            findScenarioById={findScenarioById}
             deleteScenario={deleteScenario}
             labels={labels}
             buildScenarioNameToDelete={buildScenarioNameToDelete}
@@ -239,6 +241,10 @@ ScenarioManagerTreeList.propTypes = {
    * Scenarios list
    */
   scenarios: PropTypes.array.isRequired,
+  /**
+   * Function bound to redirect to scenario view with matching current scenario
+   */
+  findScenarioById: PropTypes.func.isRequired,
   /**
    * Function bound to handle a scenario deletion
    */