Merge pull request #3590 from metabase/fix-segment-inputs

Fix segment inputs

frontend/src/metabase/admin/datamodel/components/FormInput.jsx

 import React, { Component, PropTypes } from "react";
 
 import cx from "classnames";
+import { formDomOnlyProps } from "metabase/lib/redux";
 
 export default class FormInput extends Component {
     static propTypes = {};
 
     render() {
-        const { field, className } = this.props;
+        const { field, className, placeholder } = this.props;
         return (
             <input
-                {...this.props}
+                type="text"
+                placeholder={placeholder}
                 className={cx("input full text-default h4", { "border-error": !field.active && field.visited && field.invalid }, className)}
-                {...field}
+                {...formDomOnlyProps(field)}
             />
         );
     }

frontend/src/metabase/admin/datamodel/components/FormTextArea.jsx

@@ -2,16 +2,18 @@ import React, { Component, PropTypes } from "react";
 
 import cx from "classnames";
 
+import { formDomOnlyProps } from "metabase/lib/redux";
+
 export default class FormTextArea extends Component {
     static propTypes = {};
 
     render() {
-        const { field, className } = this.props;
+        const { field, className, placeholder } = this.props;
         return (
             <textarea
-                {...this.props}
+                placeholder={placeholder}
                 className={cx("input full text-default h4", { "border-error": !field.active && field.visited && field.invalid }, className)}
-                {...field}
+                {...formDomOnlyProps(field)}
             />
         );
     }

frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx

@@ -85,7 +85,7 @@ export default class Column extends Component {
         return (
             <li className="mt1 mb3">
                 <div>
-                    <Input style={{minWidth: 420}} className="AdminInput TableEditor-field-name float-left bordered inline-block rounded text-bold" type="text" value={this.props.field.display_name} onBlurChange={this.onNameChange}/>
+                    <Input style={{minWidth: 420}} className="AdminInput TableEditor-field-name float-left bordered inline-block rounded text-bold" type="text" value={this.props.field.display_name || ""} onBlurChange={this.onNameChange}/>
                     <div className="clearfix">
                         <div className="flex flex-full">
                             <div className="flex-full px1">
@@ -111,7 +111,7 @@ export default class Column extends Component {
                     </div>
                 </div>
                 <div className="MetadataTable-title flex flex-column flex-full bordered rounded mt1 mr1">
-                    <Input className="AdminInput TableEditor-field-description" type="text" value={this.props.field.description} onBlurChange={this.onDescriptionChange} placeholder="No column description yet" />
+                    <Input className="AdminInput TableEditor-field-description" type="text" value={this.props.field.description || ""} onBlurChange={this.onDescriptionChange} placeholder="No column description yet" />
                 </div>
             </li>
         )

frontend/src/metabase/admin/datamodel/components/database/MetadataSchemaList.jsx

@@ -12,7 +12,7 @@ export default class MetadataSchemaList extends Component {
         super(props, context);
 
         this.state = {
-            searchText: null,
+            searchText: "",
             searchRegex: null
         };
 

frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx

@@ -86,8 +86,8 @@ export default class MetadataTable extends Component {
         return (
             <div className="MetadataTable px3 flex-full">
                 <div className="MetadataTable-title flex flex-column bordered rounded">
-                    <Input className="AdminInput TableEditor-table-name text-bold border-bottom rounded-top" type="text" value={tableMetadata.display_name} onBlurChange={this.onNameChange}/>
-                    <Input className="AdminInput TableEditor-table-description rounded-bottom" type="text" value={tableMetadata.description} onBlurChange={this.onDescriptionChange} placeholder="No table description yet" />
+                    <Input className="AdminInput TableEditor-table-name text-bold border-bottom rounded-top" type="text" value={tableMetadata.display_name || ""} onBlurChange={this.onNameChange}/>
+                    <Input className="AdminInput TableEditor-table-description rounded-bottom" type="text" value={tableMetadata.description || ""} onBlurChange={this.onDescriptionChange} placeholder="No table description yet" />
                 </div>
                 <div className="MetadataTable-header flex align-center py2 text-grey-3">
                     <span className="mx1 text-uppercase">Visibility</span>

frontend/src/metabase/admin/datamodel/components/database/MetadataTableList.jsx

@@ -13,7 +13,7 @@ export default class MetadataTableList extends Component {
         super(props, context);
 
         this.state = {
-            searchText: null,
+            searchText: "",
             searchRegex: null
         };
 

frontend/src/metabase/components/EditBar.jsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 
 class EditBar extends Component {
     static propTypes = {
-        title: PropTypes.string.isRequires,
+        title: PropTypes.string.isRequired,
         subtitle: PropTypes.string,
         buttons: PropTypes.oneOfType([
             PropTypes.element,

frontend/src/metabase/components/Header.jsx

@@ -69,15 +69,15 @@ export default class Header extends Component {
         if (this.props.isEditingInfo) {
             titleAndDescription = (
                 <div className="Header-title flex flex-column flex-full bordered rounded my1">
-                    <Input className="AdminInput text-bold border-bottom rounded-top h3" type="text" value={this.props.item.name} onChange={this.setItemAttribute.bind(this, "name")}/>
-                    <Input className="AdminInput rounded-bottom h4" type="text" value={this.props.item.description} onChange={this.setItemAttribute.bind(this, "description")} placeholder="No description yet" />
+                    <Input className="AdminInput text-bold border-bottom rounded-top h3" type="text" value={this.props.item.name || ""} onChange={this.setItemAttribute.bind(this, "name")}/>
+                    <Input className="AdminInput rounded-bottom h4" type="text" value={this.props.item.description || ""} onChange={this.setItemAttribute.bind(this, "description")} placeholder="No description yet" />
                 </div>
             );
         } else {
             if (this.props.item && this.props.item.id != null) {
                 titleAndDescription = (
                     <TitleAndDescription
-                        title={this.props.item.name} 
+                        title={this.props.item.name}
                         description={this.props.item.description}
                     />
                 );

frontend/src/metabase/components/Input.jsx

 import React, { Component, PropTypes } from "react";
 
+import _ from "underscore";
+
 export default class Input extends Component {
     constructor(props, context) {
         super(props, context);
@@ -38,6 +40,7 @@ export default class Input extends Component {
     }
 
     render() {
-        return <input {...this.props} value={this.state.value} onBlur={this.onBlur} onChange={this.onChange} />
+        let props = _.omit(this.props, "onBlurChange", "value", "onBlur", "onChange");
+        return <input {...props} value={this.state.value} onBlur={this.onBlur} onChange={this.onChange} />
     }
 }

frontend/src/metabase/dashboard/components/parameters/widgets/DateMonthYearWidget.jsx

@@ -53,12 +53,12 @@ export default class DateMonthYearWidget extends Component {
                 <div className="flex">
                     <ol className="flex flex-column">
                     { _.range(0,6).map(m =>
-                        <Month month={m} selected={m === month} onClick={() => this.setState({ month: m }, onClose)} />
+                        <Month key={m} month={m} selected={m === month} onClick={() => this.setState({ month: m }, onClose)} />
                     )}
                     </ol>
                     <ol className="flex flex-column">
                     { _.range(6,12).map(m =>
-                        <Month month={m} selected={m === month} onClick={() => this.setState({ month: m }, onClose)} />
+                        <Month key={m} month={m} selected={m === month} onClick={() => this.setState({ month: m }, onClose)} />
                     )}
                     </ol>
                 </div>

frontend/src/metabase/lib/redux.js

@@ -147,3 +147,22 @@ export const updateData = async ({
         return existingData;
     }
 }
+
+// for filtering non-DOM props from redux-form field objects
+// https://github.com/erikras/redux-form/issues/1441
+export const formDomOnlyProps = ({
+    initialValue,
+    autofill,
+    onUpdate,
+    valid,
+    invalid,
+    dirty,
+    pristine,
+    active,
+    touched,
+    visited,
+    autofilled,
+    error,
+    defaultValue,
+    ...domProps
+}) => domProps

frontend/src/metabase/query_builder/template_tags/TagEditorParam.jsx

@@ -125,7 +125,7 @@ export default class TagEditorParam extends Component {
                             placeholder="Select…"
                         >
                             {databaseFields && databaseFields.map(field =>
-                                <Option value={field.id} name={field.name}>
+                                <Option key={field.id} value={field.id} name={field.name}>
                                     <div className="cursor-pointer">
                                         <div className="h6 text-bold text-uppercase text-grey-2">{dabaseHasSchemas && (field.schema + " > ")}{field.table_name}</div>
                                         <div className="h4 text-bold text-default">{field.name}</div>