add field picker tests and message for unknown variable name

src/pages-tab/components/var-picker/field/var-picker-field-test.js

@@ -22,7 +22,7 @@ describe('<VarPickerField>', () => {
       vm = new VarPickerFieldVM({ appState })
     })
 
-    it('showMessage', () => {
+    it('showMessage - type mismatch', () => {
       vm.obj = testField
       vm.key = 'name'
       vm.filterText = 'Test Variable'
@@ -34,6 +34,19 @@ describe('<VarPickerField>', () => {
       assert.equal(vm.showMessage, false, 'should return false/hide message when types match')
     })
 
+    it('showMessage - unknown variable name', () => {
+      const originalName = testField.name
+      testField.name = 'Bad Var'
+      vm.obj = testField
+      vm.key = 'name'
+
+      const expectedHealthMessage = 'Variable Not Found, please assign a valid Variable Name'
+      assert.equal(vm.showMessage, true, 'should return true when unknown variable found ex: typo')
+      assert.equal(vm.message, expectedHealthMessage, 'should show variable not found message')
+
+      testField.name = originalName
+    })
+
     it('message', () => {
       vm.obj = testField
       vm.key = 'name'

src/pages-tab/components/var-picker/field/var-picker-field.js

@@ -11,16 +11,18 @@ export const VarPickerFieldVM = DefineMap.extend('VarPickerFieldVM', {
   get showMessage () {
     const assignedVarType = this.assignedVariable ? this.assignedVariable.type.toLowerCase() : ''
     const expectedVarType = this.expectedVarType ? this.expectedVarType.toLowerCase() : ''
+    const validVarName = this.validVarName(this.filterText)
 
-    // if they don't match, show 'will not save' message as well
-    // validVarName might matter here as well - like while they are typing/assiging, no error? warning?
-    return assignedVarType !== expectedVarType
+    return !validVarName || (assignedVarType !== '' && assignedVarType !== expectedVarType)
   },
   get message () {
     const assignedVarType = this.assignedVariable ? this.assignedVariable.type.toLowerCase() : ''
     const expectedVarType = this.expectedVarType ? this.expectedVarType.toLowerCase() : ''
+    const validVarName = this.validVarName(this.filterText)
 
-    return `Found Variable Type: (${assignedVarType}) but expected Variable Type: (${expectedVarType})`
+    return validVarName
+      ? `Found Variable Type: (${assignedVarType}) but expected Variable Type: (${expectedVarType})`
+      : 'Variable Not Found, please assign a valid Variable Name'
   },
   // obj[key] like button['name']
   obj: {

src/pages-tab/components/var-picker/field/var-picker-field.stache

@@ -9,9 +9,6 @@
   {{let showVariableModal = newObservableBool(false)}}
   {{let showVariableEditModal = newObservableBool(false)}}
   <label class="control-label">{{label}}</label>
-  {{#if(showMessage)}}
-    <span class="alert-warning"> ( Warning! Mismatched Variable will be removed on Close/Save. ) </span>
-  {{/if}}
   <div class="form-group has-var-picker">
     <input
       class="