Use React's codemod to translate most remaining 0.12 components to 0.…

…13 ES6 classes

frontend/src/admin/metadata/components/MetadataEditor.react.js

@@ -1,60 +1,68 @@
+import React, { Component, PropTypes } from "react";
+
 import MetadataHeader from './MetadataHeader.react';
 import MetadataTableList from './MetadataTableList.react';
 import MetadataTable from './MetadataTable.react';
 import MetadataSchema from './MetadataSchema.react';
 
-export default React.createClass({
-    displayName: "MetadataEditor",
-    propTypes: {
-        databaseId: React.PropTypes.number,
-        databases: React.PropTypes.array.isRequired,
-        selectDatabase: React.PropTypes.func.isRequired,
-        tableId: React.PropTypes.number,
-        tables: React.PropTypes.object.isRequired,
-        selectTable: React.PropTypes.func.isRequired,
-        idfields: React.PropTypes.array.isRequired,
-        updateTable: React.PropTypes.func.isRequired,
-        updateField: React.PropTypes.func.isRequired,
-        updateFieldSpecialType: React.PropTypes.func.isRequired,
-        updateFieldTarget: React.PropTypes.func.isRequired
-    },
+export default class MetadataEditor extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.toggleShowSchema = this.toggleShowSchema.bind(this);
+        this.updateField = this.updateField.bind(this);
+        this.updateFieldSpecialType = this.updateFieldSpecialType.bind(this);
+        this.updateFieldTarget = this.updateFieldTarget.bind(this);
+        this.updateTable = this.updateTable.bind(this);
 
-    getInitialState: function() {
-        return {
+        this.state = {
             isShowingSchema: false
-        }
-    },
+        };
+    }
 
-    toggleShowSchema: function() {
+    static propTypes = {
+        databaseId: PropTypes.number,
+        databases: PropTypes.array.isRequired,
+        selectDatabase: PropTypes.func.isRequired,
+        tableId: PropTypes.number,
+        tables: PropTypes.object.isRequired,
+        selectTable: PropTypes.func.isRequired,
+        idfields: PropTypes.array.isRequired,
+        updateTable: PropTypes.func.isRequired,
+        updateField: PropTypes.func.isRequired,
+        updateFieldSpecialType: PropTypes.func.isRequired,
+        updateFieldTarget: PropTypes.func.isRequired
+    };
+
+    toggleShowSchema() {
         this.setState({ isShowingSchema: !this.state.isShowingSchema });
-    },
+    }
 
-    handleSaveResult: function(promise) {
+    handleSaveResult(promise) {
         this.refs.header.setSaving();
         promise.then(() => {
             this.refs.header.setSaved();
         }, (error) => {
             this.refs.header.setSaveError(error.data);
         });
-    },
+    }
 
-    updateTable: function(table) {
+    updateTable(table) {
         this.handleSaveResult(this.props.updateTable(table));
-    },
+    }
 
-    updateField: function(field) {
+    updateField(field) {
         this.handleSaveResult(this.props.updateField(field));
-    },
+    }
 
-    updateFieldSpecialType: function(field) {
+    updateFieldSpecialType(field) {
         this.handleSaveResult(this.props.updateFieldSpecialType(field));
-    },
+    }
 
-    updateFieldTarget: function(field) {
+    updateFieldTarget(field) {
         this.handleSaveResult(this.props.updateFieldTarget(field));
-    },
+    }
 
-    render: function() {
+    render() {
         var table = this.props.tables[this.props.tableId];
         var content;
         if (table) {
@@ -100,4 +108,4 @@ export default React.createClass({
             </div>
         );
     }
-});
+}

frontend/src/admin/metadata/components/MetadataField.react.js

@@ -1,44 +1,56 @@
+import React, { Component, PropTypes } from "react";
+
 import Input from "metabase/components/Input.react";
 import Select from "metabase/components/Select.react";
 
 import MetabaseCore from "metabase/lib/core";
 
 import _  from "underscore";
 
-export default React.createClass({
-    displayName: "MetadataField",
-    propTypes: {
-        field: React.PropTypes.object,
-        idfields: React.PropTypes.array.isRequired,
-        updateField: React.PropTypes.func.isRequired,
-        updateFieldSpecialType: React.PropTypes.func.isRequired,
-        updateFieldTarget: React.PropTypes.func.isRequired
-    },
-
-    isVisibilityType: function(visibility) {
+export default class MetadataField extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.isVisibilityType = this.isVisibilityType.bind(this);
+        this.onDescriptionChange = this.onDescriptionChange.bind(this);
+        this.onNameChange = this.onNameChange.bind(this);
+        this.onSpecialTypeChange = this.onSpecialTypeChange.bind(this);
+        this.onTargetChange = this.onTargetChange.bind(this);
+        this.onTypeChange = this.onTypeChange.bind(this);
+        this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    }
+
+    static propTypes = {
+        field: PropTypes.object,
+        idfields: PropTypes.array.isRequired,
+        updateField: PropTypes.func.isRequired,
+        updateFieldSpecialType: PropTypes.func.isRequired,
+        updateFieldTarget: PropTypes.func.isRequired
+    };
+
+    isVisibilityType(visibility) {
         switch(visibility.id) {
             case "do_not_include": return (this.props.field.field_type === "sensitive");
             case "everywhere": return (this.props.field.field_type !== "sensitive" && this.props.field.preview_display === true);
             case "detail_views": return (this.props.field.field_type !== "sensitive" && this.props.field.preview_display === false);
         }
 
         return false;
-    },
+    }
 
-    updateProperty: function(name, value) {
+    updateProperty(name, value) {
         this.props.field[name] = value;
         this.props.updateField(this.props.field);
-    },
+    }
 
-    onNameChange: function(event) {
+    onNameChange(event) {
         this.updateProperty("display_name", event.target.value);
-    },
+    }
 
-    onDescriptionChange: function(event) {
+    onDescriptionChange(event) {
         this.updateProperty("description", event.target.value);
-    },
+    }
 
-    onVisibilityChange: function(visibility) {
+    onVisibilityChange(visibility) {
         switch(visibility.id) {
             case "do_not_include":
                 this.updateProperty("field_type", "sensitive");
@@ -56,23 +68,23 @@ export default React.createClass({
                 this.updateProperty("preview_display", false);
                 return;
         }
-    },
+    }
 
-    onTypeChange: function(type) {
+    onTypeChange(type) {
         this.updateProperty("field_type", type.id);
-    },
+    }
 
-    onSpecialTypeChange: function(special_type) {
+    onSpecialTypeChange(special_type) {
         this.props.field.special_type = special_type.id;
         this.props.updateFieldSpecialType(this.props.field);
-    },
+    }
 
-    onTargetChange: function(target_field) {
+    onTargetChange(target_field) {
         this.props.field.target_id = target_field.id;
         this.props.updateFieldTarget(this.props.field);
-    },
+    }
 
-    render: function() {
+    render() {
         var targetSelect;
         if (this.props.field.special_type === "fk") {
             targetSelect = (
@@ -131,4 +143,4 @@ export default React.createClass({
             </li>
         )
     }
-})
+}

frontend/src/admin/metadata/components/MetadataHeader.react.js

@@ -1,33 +1,33 @@
+import React, { Component, PropTypes } from "react";
+
 import SaveStatus from "metabase/components/SaveStatus.react";
 import Toggle from "metabase/components/Toggle.react";
-
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.react";
 import ColumnarSelector from "metabase/components/ColumnarSelector.react";
 import Icon from "metabase/components/Icon.react";
 
-export default React.createClass({
-    displayName: "MetadataHeader",
-    propTypes: {
-        databaseId: React.PropTypes.number,
-        databases: React.PropTypes.array.isRequired,
-        selectDatabase: React.PropTypes.func.isRequired,
-        isShowingSchema: React.PropTypes.bool.isRequired,
-        toggleShowSchema: React.PropTypes.func.isRequired,
-    },
+export default class MetadataHeader extends Component {
+    static propTypes = {
+        databaseId: PropTypes.number,
+        databases: PropTypes.array.isRequired,
+        selectDatabase: PropTypes.func.isRequired,
+        isShowingSchema: PropTypes.bool.isRequired,
+        toggleShowSchema: PropTypes.func.isRequired,
+    };
 
-    setSaving: function() {
+    setSaving() {
         this.refs.status.setSaving.apply(this, arguments);
-    },
+    }
 
-    setSaved: function() {
+    setSaved() {
         this.refs.status.setSaved.apply(this, arguments);
-    },
+    }
 
-    setSaveError: function() {
+    setSaveError() {
         this.refs.status.setSaveError.apply(this, arguments);
-    },
+    }
 
-    renderDbSelector: function() {
+    renderDbSelector() {
         var database = this.props.databases.filter((db) => db.id === this.props.databaseId)[0];
         if (database) {
             var columns = [{
@@ -54,9 +54,9 @@ export default React.createClass({
                 </PopoverWithTrigger>
             );
         }
-    },
+    }
 
-    render: function() {
+    render() {
         return (
             <div className="MetadataEditor-header flex align-center">
                 <div className="MetadataEditor-headerSection h2">
@@ -70,4 +70,4 @@ export default React.createClass({
             </div>
         );
     }
-});
+}

frontend/src/admin/metadata/components/MetadataSchema.react.js

@@ -1,10 +1,11 @@
-export default React.createClass({
-    displayName: "MetadataSchema",
-    propTypes: {
-        table: React.PropTypes.object
-    },
+import React, { Component, PropTypes } from "react";
 
-    render: function() {
+export default class MetadataSchema extends Component {
+    static propTypes = {
+        table: PropTypes.object
+    };
+
+    render() {
         var table = this.props.table;
         if (!table) {
             return false;
@@ -43,4 +44,4 @@ export default React.createClass({
             </div>
         );
     }
-});
+}