Refactor AddToDashSelectDashModal to use SortableItemList, add AddToDashSelectQuestionModal

resources/frontend_client/app/components/AddToDashSelectDashModal.react.js

 'use strict';
 
 import Modal from 'metabase/components/Modal.react';
-import RadioSelect from 'metabase/components/RadioSelect.react';
+import SortableItemList from 'metabase/components/SortableItemList.react';
 
 import moment from 'moment';
 
 export default React.createClass({
-    displayName: "AddToDashSelectDash",
+    displayName: "AddToDashSelectDashModal",
     propTypes: {
         card: React.PropTypes.object.isRequired,
         dashboardApi: React.PropTypes.func.isRequired,
@@ -17,8 +17,7 @@ export default React.createClass({
     getInitialState: function() {
         this.loadDashboardList();
         return {
-            dashboards: [],
-            sort: "Last Modified"
+            dashboards: []
         };
     },
 
@@ -41,46 +40,15 @@ export default React.createClass({
     },
 
     render: function() {
-        if (this.state.sort === "Last Modified") {
-            this.state.dashboards.sort((a, b) => a.updated_at < b.updated_at);
-        } else if (this.state.sort === "Alphabetical Order") {
-            this.state.dashboards.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
-        }
-
-        var dashboards = this.state.dashboards.map((dashboard) => {
-            return (
-                <li key={dashboard.id} className="border-row-divider">
-                    <a className="no-decoration flex p2" href="#" onClick={this.addToDashboard.bind(null, dashboard)}>
-                        <div className="text-brand-hover">
-                            <h3 className="mb1">{dashboard.name}</h3>
-                            <h4 className="text-grey-3">{dashboard.description || "No description yet"}</h4>
-                        </div>
-                        <div className="flex-align-right text-right text-grey-3">
-                            <div className="mb1">Saved by {dashboard.creator.common_name}</div>
-                            <div>Modified {dashboard.updated_at.fromNow()}</div>
-                        </div>
-                    </a>
-                </li>
-            );
-        });
-
         return (
             <Modal
                 title="Add Question to Dashboard"
                 closeFn={this.props.closeFn}
             >
-                <div className="flex align-center px2 pb3 border-bottom">
-                    <h5 className="text-bold text-uppercase text-grey-3 ml2 mr2">Sort by</h5>
-                    <RadioSelect
-                        value={this.state.sort}
-                        options={["Last Modified", /*"Most Popular",*/  "Alphabetical Order"]}
-                        onChange={(sort) => this.setState({ sort })}
-                    />
-                </div>
-
-                <ul className="px2 mb2">
-                    {dashboards}
-                </ul>
+                <SortableItemList
+                    items={this.state.dashboards}
+                    onClickItemFn={this.addToDashboard}
+                />
             </Modal>
         );
     }

resources/frontend_client/app/components/AddToDashSelectQuestionModal.react.js

+'use strict';
+
+import Modal from 'metabase/components/Modal.react';
+import SortableItemList from 'metabase/components/SortableItemList.react';
+
+import moment from 'moment';
+
+export default React.createClass({
+    displayName: "AddToDashSelectQuestionModal",
+    propTypes: {
+        dashboard: React.PropTypes.object.isRequired,
+        cardApi: React.PropTypes.func.isRequired,
+        dashboardApi: React.PropTypes.func.isRequired,
+        closeFn: React.PropTypes.func.isRequired,
+        notifyCardAddedToDashFn: React.PropTypes.func.isRequired
+    },
+
+    getInitialState: function() {
+        this.loadCardList();
+        return {
+            cards: []
+        };
+    },
+
+    loadCardList: async function() {
+        var cards = await this.props.cardApi.list({
+            'filterMode': 'mine'
+        }).$promise;
+        for (var card of cards) {
+            card.updated_at = moment(card.updated_at);
+            card.icon = card.display ? 'illustration_visualization_' + card.display : null;
+        }
+        this.setState({ cards });
+    },
+
+    addToDashboard: async function(card) {
+        var dashCard = await this.props.dashboardApi.addcard({
+            'dashId': this.props.dashboard.id,
+            'cardId': card.id
+        }).$promise;
+        this.props.notifyCardAddedToDashFn(dashCard);
+    },
+
+    render: function() {
+        return (
+            <Modal
+                title="Add Question to Dashboard"
+                closeFn={this.props.closeFn}
+            >
+                <SortableItemList
+                    items={this.state.cards}
+                    onClickItemFn={this.addToDashboard}
+                    showIcons={true}
+                />
+            </Modal>
+        );
+    }
+});

resources/frontend_client/app/components/SortableItemList.react.js

+'use strict';
+
+import RadioSelect from 'metabase/components/RadioSelect.react';
+import moment from 'moment';
+
+export default class SortableItemList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            sort: props.initialSort || "Last Modified"
+        };
+    }
+
+    onClickItem(item) {
+        if (this.props.onClickItemFn) {
+            this.props.onClickItemFn(item);
+        }
+    }
+
+    render() {
+        if (this.state.sort === "Last Modified") {
+            this.props.items.sort((a, b) => a.updated_at < b.updated_at);
+        } else if (this.state.sort === "Alphabetical Order") {
+            this.props.items.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+        }
+
+        var items = this.props.items.map((item) => {
+            var icon = this.props.showIcons ? <div><img className="mr2" style={{height: "48px"}}  src={"/app/components/icons/assets/" + item.icon + ".png"} /></div> : null;
+            return (
+                <li key={item.id} className="border-row-divider">
+                    <a className="no-decoration flex p2" href="#" onClick={() => this.onClickItem(item)}>
+                        <div className="flex align-center flex-full mr2">
+                            {icon}
+                            <div className="text-brand-hover">
+                                <h3 className="mb1">{item.name}</h3>
+                                <h4 className="text-grey-3">{item.description || "No description yet"}</h4>
+                            </div>
+                        </div>
+                        <div className="flex-align-right text-right text-grey-3">
+                            <div className="mb1">Saved by {item.creator.common_name}</div>
+                            <div>Modified {item.updated_at.fromNow()}</div>
+                        </div>
+                    </a>
+                </li>
+            );
+        });
+
+        return (
+            <div className="SortableItemList">
+                <div className="flex align-center px2 pb3 border-bottom">
+                    <h5 className="text-bold text-uppercase text-grey-3 ml2 mr2">Sort by</h5>
+                    <RadioSelect
+                        value={this.state.sort}
+                        options={["Last Modified", /*"Most Popular",*/  "Alphabetical Order"]}
+                        onChange={(sort) => this.setState({ sort })}
+                    />
+                </div>
+
+                <ul className="SortableItemList-list px2 pb2">
+                    {items}
+                </ul>
+            </div>
+        );
+    }
+}
+
+SortableItemList.propTypes = {
+    items: React.PropTypes.array.isRequired,
+    clickItemFn: React.PropTypes.func,
+    showIcons: React.PropTypes.bool
+};

resources/frontend_client/app/components/sortable_item_list/sortable_item_list.css

+.SortableItemList-list {
+    max-height: 330px;
+    overflow-y: scroll;
+}