From 2bb43203dc3b4a9ef3cf48d2ce29108dcdfdc6dc Mon Sep 17 00:00:00 2001
From: Piero Toffanin <pt@masseranolabs.com>
Date: Wed, 24 Jan 2018 11:07:06 -0500
Subject: [PATCH] Updated to React16, restart dropdown button

---
 app/static/app/js/Dashboard.jsx               |  2 +
 app/static/app/js/components/TaskListItem.jsx | 41 +++++++++++++++----
 app/static/app/js/css/TaskListItem.scss       | 14 +++++++
 package.json                                  |  4 +-
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/app/static/app/js/Dashboard.jsx b/app/static/app/js/Dashboard.jsx
index c4444967..7dad56ba 100644
--- a/app/static/app/js/Dashboard.jsx
+++ b/app/static/app/js/Dashboard.jsx
@@ -9,6 +9,8 @@ import {
 } from 'react-router-dom';
 import $ from 'jquery';
 
+console.log(React.version);
+
 class Dashboard extends React.Component {
   constructor(){
     super();
diff --git a/app/static/app/js/components/TaskListItem.jsx b/app/static/app/js/components/TaskListItem.jsx
index e7c969f2..0e1f2757 100644
--- a/app/static/app/js/components/TaskListItem.jsx
+++ b/app/static/app/js/components/TaskListItem.jsx
@@ -260,9 +260,9 @@ class TaskListItem extends React.Component {
           memoryErrorLink = this.isMacOS() ? "http://stackoverflow.com/a/39720010" : "https://docs.docker.com/docker-for-windows/#advanced";
       
       let actionButtons = [];
-      const addActionButton = (label, className, icon, onClick) => {
+      const addActionButton = (label, className, icon, onClick, options = {}) => {
         actionButtons.push({
-          className, icon, label, onClick
+          className, icon, label, onClick, options
         });
       };
       
@@ -285,6 +285,8 @@ class TaskListItem extends React.Component {
           (!task.processing_node)){
         addActionButton("Edit", "btn-primary pull-right edit-button", "glyphicon glyphicon-pencil", () => {
           this.startEditing();
+        }, {
+          className: "inline"
         });
       }
 
@@ -295,14 +297,22 @@ class TaskListItem extends React.Component {
 
       if ([statusCodes.FAILED, statusCodes.COMPLETED, statusCodes.CANCELED].indexOf(task.status) !== -1 &&
             task.processing_node){
-          addActionButton("Restart", "btn-primary", "glyphicon glyphicon-remove-circle", this.genActionApiCall("restart", {
+          addActionButton("Restart", "btn-primary", "glyphicon glyphicon-repeat", this.genActionApiCall("restart", {
               success: () => {
                   if (this.console) this.console.clear();
                   this.setState({time: -1});
               },
               defaultError: "Cannot restart task."
             }
-          ));
+          ), {
+            subItems: [{
+              label: "Meshing",
+              icon: "glyphicon glyphicon-remove-circle",
+              onClick: (cb) => {
+                console.log("OK");
+              }
+            }]
+          });
       }
 
       addActionButton("Delete", "btn-danger", "glyphicon glyphicon-trash", this.genActionApiCall("remove", {
@@ -317,12 +327,25 @@ class TaskListItem extends React.Component {
               <AssetDownloadButtons task={this.state.task} disabled={disabled} />
             : ""}
             {actionButtons.map(button => {
+              const subItems = button.options.subItems || [];
+              const className = button.options.className || "";
+
               return (
-                  <button key={button.label} type="button" className={"btn btn-sm " + button.className} onClick={button.onClick} disabled={disabled}>
-                    <i className={button.icon}></i>
-                    {button.label}
-                  </button> 
-                )
+                  <div className={"inline-block " + 
+                                  (subItems.length > 0 ? "btn-group" : "") + " " +
+                                  className}>
+                    <button key={button.label} type="button" className={"btn btn-sm " + button.className} onClick={button.onClick} disabled={disabled}>
+                      <i className={button.icon}></i>
+                      {button.label}
+                    </button>
+                    {subItems.length > 0 && 
+                      [<button key="dropdown-button" type="button" className={"btn btn-sm dropdown-toggle "  + button.className} data-toggle="dropdown"><span className="caret"></span></button>,
+                      <ul key="dropdown-menu" className="dropdown-menu">
+                        {subItems.map(subItem => <li key={subItem.label}>
+                            <a href="javascript:void(0);" onClick={subItem.onClick}><i className={subItem.icon}></i>{subItem.label}</a>
+                          </li>)}
+                      </ul>]}
+                  </div>);
             })}
           </div>);
 
diff --git a/app/static/app/js/css/TaskListItem.scss b/app/static/app/js/css/TaskListItem.scss
index a6d8e795..5229aa02 100644
--- a/app/static/app/js/css/TaskListItem.scss
+++ b/app/static/app/js/css/TaskListItem.scss
@@ -73,6 +73,12 @@
                 margin-right: 4px;
             }
 
+            .btn-group{
+                button:first-child{
+                    margin-right: 0;
+                }
+            }
+
             .edit-button{
                 margin-right: 15px;
             }
@@ -82,4 +88,12 @@
             }
         }
     }
+
+    .inline-block{
+        display: inline-block;
+    }
+
+    .inline{
+        display: inline;
+    }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 4b2041ca..d7a6d1f5 100644
--- a/package.json
+++ b/package.json
@@ -45,9 +45,9 @@
     "object.values": "^1.0.3",
     "proj4": "^2.4.3",
     "raw-loader": "^0.5.1",
-    "react": "^15.6.0",
+    "react": "^16.2.0",
     "react-addons-test-utils": "^15.6.0",
-    "react-dom": "^15.6.0",
+    "react-dom": "^16.2.0",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "react-test-renderer": "^15.6.1",