POC of bifurcation of SimpleDropdown for FEMLab in PFE

app/classifier/tasks/dropdown/dropdown-dialog.cjsx

@@ -15,6 +15,7 @@ DropdownDialog = createReactClass
   getDefaultProps: ->
     selects: []
     initialSelect: {}
+    pfeLab: false
     related: []
     onCancel: ->
     onSave: ->
@@ -61,7 +62,7 @@ DropdownDialog = createReactClass
     select = @state.editSelect
     select.title = @refs.title.value
     select.required = @refs.required.checked
-    select.allowCreate = @refs.allowCreate.checked
+    select.allowCreate = if @refs.allowCreate then @refs.allowCreate.checked else false
     @setState editSelect: select
 
   onChangeConditionalAnswer: (select, index, e) ->
@@ -199,9 +200,11 @@ DropdownDialog = createReactClass
       <label className="pill-button" title={dropdownEditorHelp.required}>
         Required <input type="checkbox" ref="required" checked={select.required} onChange={@editSelect}></input>
       </label>{' '}
-      <label className="pill-button" title={dropdownEditorHelp.allowCreate}>
-        Allow Create <input type="checkbox" ref="allowCreate" checked={select.allowCreate} onChange={@editSelect}></input>
-      </label>
+      {if @props.pfeLab is true # for FEMLab we don't want to allow freeform responses
+        <label className="pill-button" title={dropdownEditorHelp.allowCreate}>
+          Allow Create <input type="checkbox" ref="allowCreate" checked={select.allowCreate} onChange={@editSelect}></input>
+        </label>
+      }
       <br />
 
       {if select.condition?

app/classifier/tasks/dropdown/editor.jsx

@@ -176,33 +176,35 @@ export default class DropdownEditor extends React.Component {
               editDropdown={this.editDropdown}
               deleteDropdown={this.deleteDropdown}
             />
-            <p>
-              <button type="button" className="minor-button" onClick={() => this.editDropdown('create')}>
-                <i className="fa fa-plus" />
-                Add a Dropdown
-              </button>
-              <label>
-                <span> Dependent On </span>
-                <select
-                  id="condition"
-                  ref={(node) => { this.condition = node; }}
-                  defaultValue={`${selects.length - 1}`}
-                >
-                  {selects.map((selectOption, i) => (
-                    <option key={selectOption.id} value={i}>{selectOption.title}</option>
-                  ))}
-                </select>
-              </label>
-              <br />
-
-            </p>
+            {this.props.pfeLab && // for FEMLab we don't want to allow nested dropdowns. Only SimpleDropdowns
+              <p>
+                <button type="button" className="minor-button" onClick={() => this.editDropdown('create')}>
+                  <i className="fa fa-plus" />
+                  Add a Dropdown
+                </button>
+                <label>
+                  <span> Dependent On </span>
+                  <select
+                    id="condition"
+                    ref={(node) => { this.condition = node; }}
+                    defaultValue={`${selects.length - 1}`}
+                  >
+                    {selects.map((selectOption, i) => (
+                      <option key={selectOption.id} value={i}>{selectOption.title}</option>
+                    ))}
+                  </select>
+                </label>
+                <br />
+              </p>
+            }
           </section>
 
           {this.state.editSelect &&
             <Dialog required={true}>
               <DropdownDialog
                 selects={selects}
                 initialSelect={this.state.editSelect}
+                pfeLab={this.props.pfeLab}
                 related={this.getRelated(this.state.editSelect)}
                 onSave={this.handleSave}
                 onCancel={this.handleCancel}

app/classifier/tasks/dropdown/editor.spec.js

@@ -141,3 +141,22 @@ describe('DropdownEditor: methods', function () {
     assert.equal(newSelect.allowCreate, true);
   });
 });
+
+describe('DropdownEditor SimpleDropdown', function () {
+  // NOTE: This is a very simple test for rendering differences between PFELab and FEMLab
+  // It does not test the functionality of the Dropdown Editor Modal
+
+  it('should render the multi-dropdown in PFE', function () {
+    let mockWorkflow = mockPanoptesResource('workflows', {});
+    let wrapper = shallow(<DropdownEditor pfeLab={true} task={defaultDropdownTask} workflow={mockWorkflow} />);
+    let button = wrapper.find('button.minor-button')
+    assert.equal(button.length, 1);
+  });
+
+  it('should not render the multidropdown in FEM', function () {
+    let mockWorkflow = mockPanoptesResource('workflows', {});
+    let wrapper = shallow(<DropdownEditor pfeLab={false} task={defaultDropdownTask} workflow={mockWorkflow} />);
+    let button = wrapper.find('button.minor-button')
+    assert.equal(button.length, 0);
+  });
+});