From 9190cd52e9ba153bba78db6f429f0ddd14efdb70 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Tue, 17 Dec 2019 11:46:14 +0100
Subject: [PATCH] wip: edit widget panel now viewable

---
 src/dashboard/dashboard-button-group.js      |  1 -
 src/dashboard/dashboard.js                   | 57 ++++++++++++--------
 src/dashboard/widget-context-menu.js         | 20 +++++--
 src/widget/edit-widget-color-control.js      |  8 +--
 src/widget/edit-widget-control-creator.js    | 38 ++++++-------
 src/widget/edit-widget-orientation.js        |  2 +-
 src/widget/edit-widget-signal-control.js     |  2 +-
 src/widget/edit-widget-simulation-control.js |  2 +-
 src/widget/edit-widget-text-control.js       |  2 +-
 src/widget/edit-widget-text-size-control.js  |  2 +-
 src/widget/edit-widget.js                    |  6 ++-
 11 files changed, 82 insertions(+), 58 deletions(-)

diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js
index 7653ff0..756a09d 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -26,7 +26,6 @@ import Icon from "../common/icon";
 
 class DashboardButtonGroup extends React.Component {
   render() {
-    console.log("DashboardButtonGroup was called");
     const buttonStyle = {
       marginLeft: '8px'
     };
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 9569e4d..b8ec62e 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -19,7 +19,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React from 'react';
+import React, {Component} from 'react';
 import { Container } from 'flux/utils';
 import Fullscreenable from 'react-fullscreenable';
 import classNames from 'classnames';
@@ -45,8 +45,8 @@ import AppDispatcher from '../common/app-dispatcher';
 
 import 'react-contexify/dist/ReactContexify.min.css';
 
-class Dashboard extends React.Component {
-
+class Dashboard extends Component {
+  
   static lastWidgetKey = 0;
   static getStores() {
     return [ DashboardStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, LoginStore, WidgetStore ];
@@ -66,7 +66,6 @@ class Dashboard extends React.Component {
     
     if (rawDashboard != null) {
       dashboard = Map(rawDashboard);
-      console.log("dashboard: " + dashboard);
 
       // convert widgets list to a dictionary to be able to reference widgets
       //let widgets = {};
@@ -159,9 +158,9 @@ class Dashboard extends React.Component {
       editing: prevState.editing || false,
       paused: prevState.paused || false,
 
-      editModal: prevState.editModal || false,
-      modalData: prevState.modalData || null,
-      modalIndex: prevState.modalIndex || null,
+      editModal:  false,
+      modalData:  null,
+      modalIndex:  null,
 
       maxWidgetHeight: maxHeight,
       dropZoneHeight: maxHeight +80,
@@ -269,7 +268,6 @@ class Dashboard extends React.Component {
   }
 
   reloadDashboard() {
-    console.log("Error: reloadDashboard was called");
     // select dashboard by param id
     this.state.dashboards.forEach((tempDashboard) => {
       if (tempDashboard._id === this.props.match.params.dashboard) {
@@ -294,7 +292,7 @@ class Dashboard extends React.Component {
     });
   }
 
-  handleDrop = widget => {
+  handleDrop(widget) {
     const widgets = this.state.dashboard.get('widgets') || [];
 
     const widgetKey = this.getNewWidgetKey();
@@ -347,12 +345,13 @@ class Dashboard extends React.Component {
   }
 
 
-  editWidget = (widget, index) => {
+  editWidget(widget, index){
+    console.log("dashboard editWidget was called widget: " + widget +" index: " + index);
     this.setState({ editModal: true, modalData: widget, modalIndex: index });
-  }
+  };
 
 
-  closeEdit = data => {
+  closeEdit(data){
     if (data == null) {
       this.setState({ editModal: false });
 
@@ -368,21 +367,27 @@ class Dashboard extends React.Component {
   };
 
 
-  deleteWidget = (widget, index) => {
-    const widgets = this.state.dashboard.get('widgets');
+  deleteWidget(widget, index) {
+    /*const widgets = this.state.dashboard.get('widgets');
     delete widgets[index];
 
     const dashboard = this.state.dashboard.set('widgets');
 
-    this.setState({ dashboard });
+    this.setState({ dashboard });*/
+    console.log("delete Widget in dashboard was called");
+    AppDispatcher.dispatch({
+      type: 'widgets/start-remove',
+      data: widget,
+      token: this.state.sessionToken
+    });
   };
 
 
-  startEditing = () => {
+  startEditing(){
     this.setState({ editing: true });
   };
 
-  saveEditing = () => {
+  saveEditing() {
     // Provide the callback so it can be called when state change is applied
     // TODO: Check if callback is needed
     this.setState({ editing: false }, this.saveChanges );
@@ -401,23 +406,23 @@ class Dashboard extends React.Component {
     });
   }
 
-  cancelEditing = () => {
+  cancelEditing() {
     this.setState({ editing: false, dasboard: {} });
 
     this.reloadDashboard();
   };
 
-  setGrid = value => {
+  setGrid(value) {
     const dashboard = this.state.dashboard.set('grid', value);
 
     this.setState({ dashboard });
   };
 
-  pauseData = () => {
+  pauseData(){
     this.setState({ paused: true });
   };
 
-  unpauseData = () => {
+  unpauseData() {
     this.setState({ paused: false });
   };
 
@@ -463,13 +468,21 @@ class Dashboard extends React.Component {
               grid={grid}
               paused={this.state.paused}
             />
+            
           ))}
         </WidgetArea>
 
         {/* TODO: Create only one context menu for all widgets */}
         {widgets != null && Object.keys(widgets).map(widgetKey => (
-          <WidgetContextMenu key={widgetKey} index={parseInt(widgetKey,10)} widget={widgets[widgetKey]} onEdit={this.editWidget} onDelete={this.deleteWidget} onChange={this.widgetChange} />
+          <WidgetContextMenu 
+            key={widgetKey} 
+            index={parseInt(widgetKey,10)} 
+            widget={widgets[widgetKey]} 
+            onEdit={this.editWidget.bind(this)}
+            onDelete={this.deleteWidget.bind(this)} 
+            onChange={this.widgetChange} />
         ))}
+        
         <EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
 
 
diff --git a/src/dashboard/widget-context-menu.js b/src/dashboard/widget-context-menu.js
index 9276d3c..c1cd082 100644
--- a/src/dashboard/widget-context-menu.js
+++ b/src/dashboard/widget-context-menu.js
@@ -21,7 +21,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Menu, Item, Separator } from 'react-contexify';
+import { Menu, Item, Separator, MenuProvider } from 'react-contexify';
 
 class WidgetContextMenu extends React.Component {
   editWidget = event => {
@@ -32,6 +32,7 @@ class WidgetContextMenu extends React.Component {
 
   deleteWidget = event => {
     if (this.props.onDelete != null) {
+      console.log("deleteWIget in wcm was called");
       this.props.onDelete(this.props.widget, this.props.index);
     }
   };
@@ -91,9 +92,10 @@ class WidgetContextMenu extends React.Component {
   };
 
   render() {
+   
     const isLocked = this.props.widget.locked;
-
-    return <Menu id={'widgetMenu'+ this.props.index}>
+    const ContextMenu = () => (
+      <Menu id={'widgetMenu'+ this.props.index}>
       <Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
       <Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>
 
@@ -108,14 +110,22 @@ class WidgetContextMenu extends React.Component {
 
       <Item disabled={isLocked} onClick={this.lockWidget}>Lock</Item>
       <Item disabled={isLocked === false} onClick={this.unlockWidget}>Unlock</Item>
-    </Menu>;
+      </Menu>
+  );
+
+    return <div>
+    <MenuProvider id={'widgetMenu'+ this.props.index} style={{ border: '1px solid purple', display: 'inline-block' }}>
+        {"Widget " + this.props.widget.name}
+    </MenuProvider>
+    <ContextMenu />
+    </div>
   }
 }
 
 WidgetContextMenu.propTypes = {
   index: PropTypes.number.isRequired,
   widget: PropTypes.object.isRequired,
-  onEdit: PropTypes.func,
+  onEdit: PropTypes.func.isRequired,
   onDelete: PropTypes.func,
   onChange: PropTypes.func
 };
diff --git a/src/widget/edit-widget-color-control.js b/src/widget/edit-widget-color-control.js
index b54b666..8ec2bd3 100644
--- a/src/widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget-color-control.js
@@ -53,14 +53,14 @@ class EditWidgetColorControl extends Component {
   }
 
   render() {
-
+    console.log("edit widgetcolorcontrol was called");
     return (
-      <FormGroup bsClass="color-control">
+      <FormGroup bsclass="color-control">
         <Row>
-          <Col componentClass={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
+          <Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
             { this.props.label }
           </Col>
-          <Col sm={10} bsClass='colors-column'>
+          <Col sm={10} bsclass='colors-column'>
           {
             EditWidgetColorControl.ColorPalette.map( (color, idx ) => {
                 let colorStyle = {
diff --git a/src/widget/edit-widget-control-creator.js b/src/widget/edit-widget-control-creator.js
index fdce7e5..f435085 100644
--- a/src/widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget-control-creator.js
@@ -38,13 +38,13 @@ import EditWidgetMinMaxControl from './edit-widget-min-max-control';
 import EditWidgetHTMLContent from './edit-widget-html-content';
 import EditWidgetParametersControl from './edit-widget-parameters-control';
 
-export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
+export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
     // Use a list to concatenate the controls according to the widget type
-    var dialogControls = [];
+    var DialogControls = [];
 
     switch(widgetType) {
         case 'CustomAction':
-            dialogControls.push(
+            DialogControls.push(
               <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
               <EditWidgetTextControl key={1} widget={widget} controlId={'icon'} label={'Icon'} placeholder={'Enter an awesome font icon name'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
               <EditWidgetSimulationControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
@@ -52,7 +52,7 @@ export default function createControls(widgetType = null, widget = null, session
             )
             break;
         case 'Action':
-            dialogControls.push(
+            DialogControls.push(
               <EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
             )
             break;
@@ -60,7 +60,7 @@ export default function createControls(widgetType = null, widget = null, session
             let valueBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'signal', value: 0}}]);
             }
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
                 <EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
                 <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
@@ -72,7 +72,7 @@ export default function createControls(widgetType = null, widget = null, session
               let lampBoundOnChange = (e) => {
                   handleChange([e, {target: {id: 'signal', value: 0}}]);
               }
-              dialogControls.push(
+              DialogControls.push(
                 <EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => lampBoundOnChange(e)} />,
                 <EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextControl key={2} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
@@ -84,7 +84,7 @@ export default function createControls(widgetType = null, widget = null, session
             let plotBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'signals', value: []}}]);
             }
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotBoundOnChange(e)} />,
                 <EditWidgetSignalsControl key={2} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
@@ -93,7 +93,7 @@ export default function createControls(widgetType = null, widget = null, session
             );
             break;
         case 'Table':
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={1} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
             );
@@ -101,7 +101,7 @@ export default function createControls(widgetType = null, widget = null, session
         case 'Image':
             // Restrict to only image file types (MIME)
             let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
-            dialogControls.push(
+            DialogControls.push(
                 <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetAspectControl key={1} widget={widget} handleChange={e => handleChange(e)} />
             );
@@ -110,7 +110,7 @@ export default function createControls(widgetType = null, widget = null, session
             let gaugeBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'signal', value: ''}}]);
             }
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
                 <EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => gaugeBoundOnChange(e) } />,
                 <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
@@ -123,7 +123,7 @@ export default function createControls(widgetType = null, widget = null, session
             let plotTableBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
             }
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetSimulationControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotTableBoundOnChange(e)} />,
                 <EditWidgetSignalsControl key={1} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
@@ -132,7 +132,7 @@ export default function createControls(widgetType = null, widget = null, session
             );
             break;
         case 'Slider':
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
                 <EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetSimulationControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
@@ -148,7 +148,7 @@ export default function createControls(widgetType = null, widget = null, session
             let buttonBoundOnChange = (e) => {
               handleChange([e, {target: {id: 'signal', value: 0}}]);
             }
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
                 <EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => buttonBoundOnChange(e)} />,
                 <EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
@@ -158,27 +158,27 @@ export default function createControls(widgetType = null, widget = null, session
             );
             break;
         case 'Box':
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetColorControl key={0} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background color'} handleChange={e => handleChange(e)} />
             );
             break;
         case 'Label':
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
                 <EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
                 <EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
             );
             break;
         case 'HTML':
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetHTMLContent key={0} widget={widget} placeholder='HTML Code' controlId='content' handleChange={e => handleChange(e)} />
             );
             break;
         case 'Topology':
             // Restrict to only xml files (MIME)
             let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
-            dialogControls.push(
+            DialogControls.push(
                 <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
             );
             break;
@@ -187,7 +187,7 @@ export default function createControls(widgetType = null, widget = null, session
             let inputBoundOnChange = (e) => {
               handleChange([e, {target: {id: 'signal', value: 0}}]);
             }
-            dialogControls.push(
+            DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
                 <EditWidgetSimulationControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => inputBoundOnChange(e)} />,
                 <EditWidgetSignalControl key={2} widget={widget} controlId={'signal'} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
@@ -198,5 +198,5 @@ export default function createControls(widgetType = null, widget = null, session
             console.log('Non-valid widget type: ' + widgetType);
         }
 
-    return dialogControls;
+    return DialogControls;
 }
diff --git a/src/widget/edit-widget-orientation.js b/src/widget/edit-widget-orientation.js
index 88ee57c..41503ba 100644
--- a/src/widget/edit-widget-orientation.js
+++ b/src/widget/edit-widget-orientation.js
@@ -48,7 +48,7 @@ class EditWidgetOrientation extends Component {
     return (
         <FormGroup controlId="orientation">
           <Row>
-            <Col componentClass={FormLabel} sm={2}>
+            <Col className={FormLabel} sm={2}>
               Orientation
             </Col>
             <Col sm={10}>
diff --git a/src/widget/edit-widget-signal-control.js b/src/widget/edit-widget-signal-control.js
index 05f3710..9591470 100644
--- a/src/widget/edit-widget-signal-control.js
+++ b/src/widget/edit-widget-signal-control.js
@@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component {
     return (
         <FormGroup controlId="signal">
           <FormLabel>Signal</FormLabel>
-          <FormControl componentClass="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
+          <FormControl className="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
             {
               signalsToRender.length === 0 ? (
                 <option disabled value style={{ display: 'none' }}>No signals available.</option>
diff --git a/src/widget/edit-widget-simulation-control.js b/src/widget/edit-widget-simulation-control.js
index c9ca495..a988b39 100644
--- a/src/widget/edit-widget-simulation-control.js
+++ b/src/widget/edit-widget-simulation-control.js
@@ -42,7 +42,7 @@ class EditWidgetSimulationControl extends Component {
     return (
         <FormGroup controlId="simulationModel">
             <FormLabel>Simulation Model</FormLabel>
-            <FormControl componentClass="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
+            <FormControl className="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
             {
               this.props.simulationModels.length === 0 ? (
               <option disabled value style={{ display: 'none' }}> No simulation models available. </option>
diff --git a/src/widget/edit-widget-text-control.js b/src/widget/edit-widget-text-control.js
index bbac6d2..c94887f 100644
--- a/src/widget/edit-widget-text-control.js
+++ b/src/widget/edit-widget-text-control.js
@@ -38,7 +38,7 @@ class EditWidgetTextControl extends Component {
 
   render() {
     return (
-        <FormGroup controlId={this.props.controlId} validationState={this.props.validate ? this.props.validate(this.props.controlId) : null}>
+        <FormGroup controlId={this.props.controlId} valid={this.props.validate ? this.props.validate(this.props.controlId) : null}>
           <FormLabel>{this.props.label}</FormLabel>
           <FormControl type="text" placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
           <FormControl.Feedback />
diff --git a/src/widget/edit-widget-text-size-control.js b/src/widget/edit-widget-text-size-control.js
index 655cdf5..949b1dd 100644
--- a/src/widget/edit-widget-text-size-control.js
+++ b/src/widget/edit-widget-text-size-control.js
@@ -29,7 +29,7 @@ class EditWidgetTextSizeControl extends React.Component {
     return (
       <FormGroup controlId="textSize">
         <FormLabel>Text size</FormLabel>
-        <FormControl componentClass="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
+        <FormControl as="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
           {sizes.map((size, index) => (
             <option key={index} value={size}>{size}</option>
           ))}
diff --git a/src/widget/edit-widget.js b/src/widget/edit-widget.js
index 051feae..d78069d 100644
--- a/src/widget/edit-widget.js
+++ b/src/widget/edit-widget.js
@@ -24,10 +24,11 @@ import React from 'react';
 
 import Dialog from '../common/dialogs/dialog';
 
-import createControls from './edit-widget-control-creator';
+import CreateControls from './edit-widget-control-creator';
 
 class EditWidgetDialog extends React.Component {
   valid = true;
+  
 
   constructor(props) {
     super(props);
@@ -121,9 +122,10 @@ class EditWidgetDialog extends React.Component {
   }
 
   render() {
+    console.log("####edit widget render was called");
     let controls = null;
     if (this.props.widget) {
-      controls = createControls(
+      controls = CreateControls(
             this.props.widget.type,
             this.state.temporal,
             this.props.sessionToken,