#netpyne-149 validation for inputs in bubble tutorial

Author: ddelpiano

webapp/components/general/TutorialBubble.js

@@ -72,7 +72,7 @@ const TutorialBubble = ({
   const nextTourStep = steps[requestedTourStep];
   const { target: nextTarget } = nextTourStep || { target: undefined };
 
-  const { target, title, content } = tourStep;
+  const { target, validation, title, content } = tourStep;
 
   const DOMtarget = getDOMTarget(target, tourStep);
   const nextDOMtarget = getDOMTarget(nextTarget, nextTourStep);
@@ -117,6 +117,17 @@ const TutorialBubble = ({
     stopTutorial(event);
   };
 
+  const isNextDisabled = (validationTarget, step, isDisabled) => {
+    if (validationTarget) {
+      const validationDOMTarget = getDOMTarget(validationTarget, undefined);
+      if (validationDOMTarget && validationDOMTarget.checkVisibility()) {
+        return !isDisabled;
+      }
+      return true;
+    }
+    return !isDisabled;
+  };
+
   if (currentTourStep === requestedTourStep) {
     tutorialTarget.current = null;
   }
@@ -195,7 +206,7 @@ const TutorialBubble = ({
                   variant="contained"
                   color="primary"
                   onClick={listen}
-                  disabled={!nextIsVisible}
+                  disabled={isNextDisabled(validation, tourStep, isNextDisabled)}
                 >
                   Next
                 </Button>

webapp/redux/reducers/data/tutorial_steps.js

@@ -22,6 +22,7 @@ const tutorial_steps = [
   },
   {
     target: '#cellRuleName',
+    validation: 'input[value="pyr"]',
     title: 'Cell Customization',
     content: (
       <p>Rename the cell type: "pyr" for pyramidal.</p>