cleanup the way the ActivityDescription is rendered and use a small react...

cleanup the way the ActivityDescription is rendered and use a small react component to wrap that display.

resources/frontend_client/app/home/actions.js

@@ -88,17 +88,6 @@ export const fetchActivity = createThunkAction(FETCH_ACTIVITY, function() {
             ai.hasLinkableModel = function() {
                 return (_.contains(["card", "dashboard"], this.model));
             };
-            ai.activityDescription = function() {
-                switch (this.topic) {
-                    case "card-create": return "saved a question about";
-                    case "card-update": return "saved a question about";
-                    case "card-delete": return "deleted a question";
-                    case "dashboard-create": return "created a dashboard";
-                    case "dashboard-update": return "";
-                    case "dashboard-delete": return "deleted a dashboard";
-                    default: return "did some super awesome stuff";
-                }
-            }
         }
         return normalize(activityItems, arrayOf(activity));
     };

resources/frontend_client/app/home/components/AccordianItem.react.js

@@ -7,22 +7,12 @@ import Icon from "metabase/components/Icon.react";
 
 export default class AccordianItem extends Component {
 
-    constructor(props) {
-        super(props);
-
-        this.styles = {
-            heading: {
-
-            }
-        };
-    }
-
     render() {
         let { children, onClickFn, isOpen, itemId, title } = this.props;
 
         return (
             <div key={itemId}>
-                <div styles={this.styles.heading} className="p2 text-grey-4 text-brand-hover" onClick={() => (onClickFn(itemId))}>
+                <div className="p2 text-grey-4 text-brand-hover" onClick={() => (onClickFn(itemId))}>
                     <span className="float-left">{title}</span>
                     <div className="text-right text-grey-2 text-brand-hover">
                         { isOpen ?

resources/frontend_client/app/home/components/Activity.react.js

@@ -7,6 +7,7 @@ import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.r
 import Urls from "metabase/lib/urls";
 
 import { fetchActivity } from "../actions";
+import ActivityDescription from "./ActivityDescription.react";
 
 
 export default class Activity extends Component {
@@ -30,6 +31,77 @@ export default class Activity extends Component {
         }
     }
 
+    activityDescription(item) {
+        switch (item.topic) {
+            case "card-create":
+                return {
+                    subject: "saved a question about",
+                    subjectRefLink: Urls.tableRowsQuery(item.database_id, item.table_id),
+                    subjectRefName: item.table.display_name,
+                    body: item.details.name,
+                    bodyLink: Urls.modelToUrl(item.model, item.model_id)
+                };
+            case "card-update":
+                return {
+                    subject: "saved a question about",
+                    subjectRefLink: Urls.tableRowsQuery(item.database_id, item.table_id),
+                    subjectRefName: item.table.display_name,
+                    body: item.details.name,
+                    bodyLink: Urls.modelToUrl(item.model, item.model_id)
+                };
+            case "card-delete":
+                return {
+                    subject: "deleted a question",
+                    subjectRefLink: null,
+                    subjectRefName: null,
+                    body: item.details.name,
+                    bodyLink: Urls.modelToUrl(item.model, item.model_id)
+                };
+            case "dashboard-create":
+                return {
+                    subject: "created a dashboard",
+                    subjectRefLink: null,
+                    subjectRefName: null,
+                    body: item.details.name,
+                    bodyLink: Urls.modelToUrl(item.model, item.model_id)
+                };
+            case "dashboard-delete":
+                return {
+                    subject: "deleted a dashboard",
+                    subjectRefLink: null,
+                    subjectRefName: null,
+                    body: item.details.name,
+                    bodyLink: Urls.modelToUrl(item.model, item.model_id)
+                };
+            case "dashboard-add-cards":
+                return {
+                    subject: "added a question to the dashboard -",
+                    subjectRefLink: Urls.dashboard(item.model_id),
+                    subjectRefName: item.details.name,
+                    body: item.details.dashcards[0].name,
+                    bodyLink: Urls.card(item.details.dashcards[0].card_id)
+                };
+            case "dashboard-card-delete": return "removed a question from the dashboard -";
+            case "database-sync":
+                return {
+                    subject: "received the latest data from",
+                    subjectRefLink: Urls.tableRowsQuery(item.database_id, item.table_id),
+                    subjectRefName: item.table.display_name,
+                    body: null,
+                    bodyLink: null
+                };
+            case "user-joined":
+                return {
+                    subject: "joined the party!",
+                    subjectRefLink: null,
+                    subjectRefName: null,
+                    body: null,
+                    bodyLink: null
+                };
+            default: return "did some super awesome stuff thats hard to describe";
+        };
+    }
+
     renderActivity(activity) {
 
         // colors for each user
@@ -42,29 +114,7 @@ export default class Activity extends Component {
                         <div className="mr3">
                             <Icon name={'filter'} width={36} height={36}></Icon>
                         </div>
-                        <div className="flex-full">
-                            <div className="">
-                                <div className="float-left text-grey-4">
-                                    <span className="text-dark">{item.user.common_name}</span>
-                                    &nbsp;{item.activityDescription()}&nbsp;
-                                    { item.table ?
-                                        <a className="link text-dark" href={Urls.tableRowsQuery(item.database_id, item.table_id)}>{item.table.display_name}</a>
-                                    :
-                                        null
-                                    }
-                                </div>
-                                <div className="text-right text-grey-2">
-                                    {item.timestamp.fromNow()}
-                                </div>
-                            </div>
-                            { item.hasLinkableModel() ?
-                                <div style={this.styles.modelLink} className="bordered rounded p2 mt1">
-                                    <a className="link" href={Urls.modelToUrl(item.model, item.model_id)}>{item.details.name}</a>
-                                </div>
-                            :
-                                null
-                            }
-                        </div>
+                        <ActivityDescription item={item} description={this.activityDescription(item)}></ActivityDescription>
                     </li>
                 )}
             </ul>

resources/frontend_client/app/home/components/ActivityDescription.react.js

+"use strict";
+
+import React, { Component, PropTypes } from "react";
+
+
+export default class ActivityDescription extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.styles = {
+            modelLink: {
+                borderWidth: "2px"
+            }
+        };
+    }
+
+    render() {
+        let { item, description } = this.props;
+
+        return (
+            <div className="flex-full">
+                <div className="">
+                    <div className="float-left text-grey-4">
+                        <span className="text-dark">{item.user.common_name}</span>
+                        &nbsp;{description.subject}&nbsp;
+                        { description.subjectRefLink ?
+                            <a className="link text-dark" href={description.subjectRefLink}>{description.subjectRefName}</a>
+                        :
+                            null
+                        }
+                    </div>
+                    <div className="text-right text-grey-2">
+                        {item.timestamp.fromNow()}
+                    </div>
+                </div>
+                { description.body ?
+                    <div style={this.styles.modelLink} className="bordered rounded p2 mt1">
+                        <a className="link" href={description.bodyLink}>{description.body}</a>
+                    </div>
+                :
+                    null
+                }
+            </div>
+        );
+    }
+}