A little more metadata editing

resources/frontend_client/app/admin/metadata/components/MetadataEditor.react.js

+'use strict';
+
+import MetadataHeader from './MetadataHeader.react';
+import MetadataTableList from './MetadataTableList.react';
+import MetadataTableEditor from './MetadataTableEditor.react';
+
+export default React.createClass({
+    displayName: "MetadataEditor",
+    propTypes: {
+        databases: React.PropTypes.array.isRequired,
+        metabaseApi: React.PropTypes.func.isRequired,
+        selectDatabaseFn: React.PropTypes.func.isRequired,
+    },
+
+    render: function() {
+        console.log("render")
+        return (
+            <div className="MetadataEditor p3">
+                <MetadataHeader
+                    database={this.props.database}
+                    databases={this.props.databases}
+                    selectDatabaseFn={this.props.selectDatabaseFn}
+                />
+                <div className="MetadataEditor-main flex">
+                    <MetadataTableList />
+                    <MetadataTableEditor />
+                </div>
+            </div>
+        );
+    }
+});

resources/frontend_client/app/admin/metadata/components/MetadataHeader.react.js

+'use strict';
+
+import PopoverWithTrigger from '../../../query_builder/popover_with_trigger.react';
+import ColumnarSelector from '../../../query_builder/columnar_selector.react';
+import Icon from '../../../query_builder/icon.react';
+
+export default React.createClass({
+    displayName: "MetadataHeader",
+    propTypes: {
+        database: React.PropTypes.object.isRequired,
+        databases: React.PropTypes.array.isRequired,
+        // metabaseApi: React.PropTypes.func.isRequired,
+        // isShowingSchema: React.PropTypes.bool.isRequired,
+        selectDatabaseFn: React.PropTypes.func.isRequired,
+        // toggleShowSchemaFn: React.PropTypes.func.isRequired,
+    },
+
+    renderDbSelector: function() {
+        if (this.props.databases.length > 1) {
+            var database = this.props.databases.filter((db) => db.id === this.props.database.id)[0];
+            var columns = [{
+                selectedItem: database,
+                items: this.props.databases,
+                itemTitleFn: (db) => db.name,
+                itemSelectFn: (db) => {
+                    this.props.selectDatabaseFn(db)
+                    this.refs.databasePopover.toggleModal();
+                    console.log("toggle")
+                }
+            }];
+            var tetherOptions = {
+                attachment: 'top left',
+                targetAttachment: 'bottom left',
+                targetOffset: '15px 0'
+            };
+            var triggerElement = (
+                <span className="text-bold cursor-pointer text-default">
+                    {this.props.database.name}
+                    <Icon className="ml1" name="chevrondown" width="8px" height="8px"/>
+                </span>
+            );
+            return (
+                <PopoverWithTrigger
+                    ref="databasePopover"
+                    className="PopoverBody PopoverBody--withArrow"
+                    tetherOptions={tetherOptions}
+                    triggerElement={triggerElement}
+                >
+                    <ColumnarSelector columns={columns}/>
+                </PopoverWithTrigger>
+            );
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="MetadataEditor-header flex align-center">
+                <div className="MetadataEditor-header-section h2">
+                    Edit Metadata for {this.renderDbSelector()}
+                </div>
+                <div className="MetadataEditor-header-section flex-align-right">
+                    Show original schema {this.props.isShowingSchema}
+                </div>
+            </div>
+        );
+    }
+});

resources/frontend_client/app/admin/metadata/components/MetadataTableEditor.react.js

+'use strict';
+
+export default React.createClass({
+    displayName: "MetadataTableEditor",
+
+    render: function() {
+        return (
+            <div className="MetadataEditor-table-editor">
+                editor
+            </div>
+        );
+    }
+});

resources/frontend_client/app/admin/metadata/components/MetadataTableList.react.js

+'use strict';
+
+export default React.createClass({
+    displayName: "MetadataTableList",
+
+    render: function() {
+        return (
+            <div className="MetadataEditor-table-list">
+                list
+            </div>
+        );
+    }
+});

resources/frontend_client/app/admin/metadata/metadata.controllers.js

+'use strict';
+/*global _*/
+
+import MetadataEditor from './components/MetadataEditor.react';
+
+angular
+.module('metabase.admin.metadata.controllers', [
+    'corvus.services',
+    'corvus.directives',
+    'metabase.forms'
+])
+.controller('MetadataEditor', ['$scope', 'databases', 'Metabase', function($scope, databases, Metabase) {
+    // inject the React component to be rendered
+    $scope.MetadataEditor = MetadataEditor;
+
+    $scope.database = databases[0];
+    $scope.databases = databases;
+    $scope.metabaseApi = Metabase;
+
+    $scope.selectDatabaseFn = function(db) {
+        $scope.database = db;
+    };
+
+}]);

resources/frontend_client/app/admin/metadata/metadata.module.js

+'use strict';
+/*global require*/
+
+angular
+.module('metabase.admin.metadata', [
+    'metabase.admin.metadata.controllers'
+])
+.config(['$routeProvider', function ($routeProvider) {
+    $routeProvider.when('/admin/metadata/', {
+        template: '<div mb-react-component="MetadataEditor"></div>',
+        controller: 'MetadataEditor',
+        resolve: {
+            databases: ['Metabase', function(Metabase) {
+                return Metabase.db_list().$promise
+            }]
+        }
+    });
+}]);

resources/frontend_client/app/app.js

@@ -27,6 +27,7 @@ var Corvus = angular.module('corvus', [
     'corvusadmin.databases',
     'corvusadmin.people',
     'corvusadmin.settings',
+    'metabase.admin.metadata',
 ]);
 Corvus.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
     $locationProvider.html5Mode({

resources/frontend_client/app/directives.js

@@ -133,6 +133,49 @@ CorvusDirectives.directive('mbActionButton', ['$timeout', '$compile', function (
     };
 }]);
 
+CorvusDirectives.directive('mbReactComponent', [function (){
+    return {
+        restrict: 'A',
+        link: function (scope, element, attr) {
+            var Component = scope[attr.mbReactComponent];
+            delete scope[attr.mbReactComponent];
+
+            function render() {
+                var props = {};
+                angular.forEach(scope, function(value, key) {
+                    if (typeof value === "function") {
+                        props[key] = function() {
+                            var that = this, args = arguments;
+                            scope.$apply(function() {
+                                return value.apply(that, args);
+                            });
+                        }
+                    } else {
+                        props[key] = value;
+                    }
+                });
+                React.render(<Component {...props}/>, element[0]);
+            }
+
+            scope.$on("$destroy", function() {
+                React.unmountComponentAtNode(element[0]);
+            });
+
+            // limit renders to once per animation frame
+            var timeout;
+            scope.$watch(function() {
+                if (!timeout) {
+                    timeout = requestAnimationFrame(function() {
+                      timeout = null;
+                      render();
+                    });
+                }
+            });
+
+            render();
+        }
+    };
+}]);
 
 var NavbarDirectives = angular.module('corvus.navbar.directives', []);
 

resources/frontend_client/index.html

@@ -85,6 +85,11 @@
                                 People
                             </a>
                         </li>
+                        <li>
+                            <a class="NavItem py1 px2 no-decoration" ng-class="{ 'is--selected' : isActive('/admin/metadata')}" href="/admin/metadata/">
+                                Metadata
+                            </a>
+                        </li>
                         <li>
                             <a class="NavItem py1 px2 no-decoration" ng-class="{ 'is--selected' : isActive('/admin/databases')}" href="/admin/databases/">
                                 Databases