Convert /admin/database listing to React

frontend/src/admin/databases/components/DatabaseList.jsx

+import React, { Component, PropTypes } from "react";
+
+import LoadingSpinner from "metabase/components/LoadingSpinner.jsx";
+
+import cx from "classnames";
+
+export default class DatabaseList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    static propTypes = {
+        databases: PropTypes.array,
+        hasSampleDataset: PropTypes.bool,
+        ENGINES: PropTypes.object
+    };
+
+    render() {
+        let { databases, hasSampleDataset, ENGINES } = this.props;
+
+        return (
+            <div className="wrapper">
+                <section className="PageHeader clearfix">
+                    <a className="Button Button--primary float-right" href="/admin/databases/create">Add database</a>
+                    <h2 className="PageTitle">Databases</h2>
+                </section>
+                <section>
+                    <table className="ContentTable">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Engine</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            { databases ?
+                                databases.map(database =>
+                                    <tr>
+                                        <td>
+                                            <a className="text-bold link" href={"/admin/databases/"+database.id}>{database.name}</a>
+                                        </td>
+                                        <td>
+                                            {ENGINES[database.engine].name}
+                                        </td>
+                                        <td className="Table-actions">
+                                            <button className="Button Button--danger" onClick={() => confirm("Are you sure?") && this.props.delete(database.id)}>Delete</button>
+                                        </td>
+                                    </tr>
+                                )
+                            :
+                                <tr>
+                                    <td colspan={4}>
+                                        <LoadingSpinner />
+                                        <h3>Loading ...</h3>
+                                    </td>
+                                </tr>
+                            }
+                        </tbody>
+                    </table>
+                    { !hasSampleDataset ?
+                        <div className="pt4">
+                            <span className={cx("p2 text-italic", {"border-top": databases && databases.length > 0})}>
+                                <a className="text-grey-2 text-brand-hover no-decoration" href="" onClick={this.props.addSampleDataset}>Bring the sample dataset back</a>
+                            </span>
+                        </div>
+                    : null }
+                </section>
+            </div>
+        );
+    }
+}

frontend/src/admin/databases/databases.controllers.js

+
+import DatabaseList from "./components/DatabaseList.jsx";
+
 import _ from "underscore";
 
 var DatabasesControllers = angular.module('metabaseadmin.databases.controllers', ['metabase.metabase.services']);
 
 DatabasesControllers.controller('DatabaseList', ['$scope', 'Metabase', 'MetabaseCore', function($scope, Metabase, MetabaseCore) {
 
+    $scope.DatabaseList = DatabaseList;
     $scope.ENGINES = MetabaseCore.ENGINES;
 
     $scope.databases = [];

frontend/src/admin/databases/databases.module.js

@@ -4,7 +4,7 @@ var AdminDatabases = angular.module('metabaseadmin.databases', [
 
 AdminDatabases.config(['$routeProvider', function ($routeProvider) {
     $routeProvider.when('/admin/databases', {
-        templateUrl: '/app/admin/databases/partials/database_list.html',
+        template: '<div class="flex flex-column flex-full" mb-react-component="DatabaseList"></div>',
         controller: 'DatabaseList'
     });
     $routeProvider.when('/admin/databases/create', {