#311 confirm user action for tutorials

Author: Muhaddatha

webapp/components/general/ConfirmationDialog.js

@@ -5,7 +5,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '@material-ui/core/styles';
-import { PYTHON_CALL } from '../../redux/actions/general';
+import { PYTHON_CALL, LOAD_TUTORIAL } from '../../redux/actions/general';
 
 const styles = () => ({
   cancel: { marginRight: 10 },
@@ -18,14 +18,21 @@ class ConfirmationDialog extends React.Component {
   }
 
   handleConfirmation = () => {
-    if (this.props.confirmationDialogOnConfirm
-        && this.props.confirmationDialogOnConfirm.type === PYTHON_CALL) {
-      this.props.pythonCall({
-        cmd: this.props.confirmationDialogOnConfirm.cmd,
-        args: this.props.confirmationDialogOnConfirm.args,
-      });
+    if (this.props.confirmationDialogOnConfirm) {
+      if (this.props.confirmationDialogOnConfirm.type === PYTHON_CALL) {
+        this.props.pythonCall({
+          cmd: this.props.confirmationDialogOnConfirm.cmd,
+          args: this.props.confirmationDialogOnConfirm.args,
+        });
+      } else if (this.props.confirmationDialogOnConfirm.type === LOAD_TUTORIAL) {
+        if (this.props.confirmationDialogOnConfirm.payload !== undefined) {
+          this.props.dispatchAction(this.props.confirmationDialogOnConfirm.action(this.props.confirmationDialogOnConfirm.payload));
+        } else {
+          this.props.dispatchAction(this.props.confirmationDialogOnConfirm.action);
+        }
+      }
     } else {
-      console.log('confirmationAction not passed or it is not a python call');
+      console.log('Command/desired behaviour not passed to confirmation dialog');
     }
   }
 

webapp/components/index.js

@@ -314,6 +314,7 @@ export const Topbar = connect(
     dispatchAction: (action) => dispatch(action),
     closeDialog: () => dispatch(closeTopbarDialog),
     resetModel: () => dispatch(resetModel),
+    openConfirmationDialog: (payload) => dispatch(openConfirmationDialog(payload)),
   }),
 )(_Topbar);
 
@@ -357,6 +358,7 @@ export const ConfirmationDialog = connect(
     confirmationDialogOnConfirm: state.general.confirmationDialogOnConfirm,
   }),
   (dispatch) => ({
+    dispatchAction: (action) => dispatch(action),
     closeConfirmationDialog: () => dispatch(closeConfirmationDialog),
     pythonCall: (cmd, args) => dispatch(pythonCall(cmd, args)),
   }),

webapp/components/topbar/Topbar.js

@@ -20,7 +20,8 @@ import ImportExportHLSDialog from './dialogs/ImportExportHLS';
 import ImportCellParamsDialog from './dialogs/ImportCellParams';
 import UploadDownloadFilesDialog from './dialogs/UploadDownloadFiles';
 
-import { TOPBAR_CONSTANTS } from '../../constants';
+import { TOPBAR_CONSTANTS, MODEL_STATE } from '../../constants';
+import { LOAD_TUTORIAL } from '../../redux/actions/general';
 
 const styles = () => ({
   topbar: {
@@ -85,6 +86,27 @@ class Topbar extends Component {
         }
         break;
       }
+      case 'handleTutorial': {
+        const [action, payload] = click.parameters;
+        if (this.props.modelState === MODEL_STATE.INSTANTIATED || this.props.modelState === MODEL_STATE.SIMULATED) {
+          this.props.openConfirmationDialog({
+            title: 'Warning',
+            message: 'A NetPyNE model has already been instantiated or simulated.'
+            + 'Continuing with this action will use the old value of netParams and simConfig for the new model. Do you want to continue?',
+            onConfirm: {
+              type: LOAD_TUTORIAL,
+              action,
+              payload,
+            },
+          });
+        } else if (payload !== undefined) {
+          this.props.dispatchAction(action(payload));
+        } else {
+          this.props.dispatchAction(action);
+        }
+
+        break;
+      }
 
       default:
         console.log(`Menu action not mapped, it is ${click}`);

webapp/components/topbar/menuConfiguration.js

@@ -83,7 +83,7 @@ export const getTutorials = () => {
         label: tutLabel,
         icon: '',
         action: {
-          handlerAction: 'redux',
+          handlerAction: 'handleTutorial',
           parameters: [loadTutorial, tutFile],
         },
       };

webapp/redux/reducers/general.js

@@ -55,7 +55,7 @@ export default function reduceGeneral (state = GENERAL_DEFAULT_STATE, action) {
       };
     case Actions.CLOSE_CONFIRMATION_DIALOG:
       return {
-        ...state, confirmationDialogOpen: false, dialogTitle: '', dialogMessage: '',
+        ...state, confirmationDialogOpen: false, dialogTitle: '', dialogMessage: '', confirmationDialogOnConfirm: {},
       };
     case Actions.AUTOMATIC_INSTANTIATION: {
       return { ...state, automaticInstantiation: action.payload, automaticSimulation: state.automaticSimulation && action.payload };