New homepage implementation with Activity Feed + Recently Viewed

project.clj

@@ -8,6 +8,7 @@
   :aliases {"test" ["with-profile" "+expectations" "expectations"]
             "generate-sample-dataset" ["with-profile" "+generate-sample-dataset" "run"]}
   :dependencies [[org.clojure/clojure "1.7.0"]
+                 [org.clojure/core.async "0.1.346.0-17112a-alpha"]
                  [org.clojure/core.logic "0.8.10"]
                  [org.clojure/core.match "0.3.0-alpha4"]              ; optimized pattern matching library for Clojure
                  [org.clojure/core.memoize "0.5.7"]                   ; needed by core.match; has useful FIFO, LRU, etc. caching mechanisms

resources/frontend_client/app/activity/activity.services.js

@@ -0,0 +1,19 @@
+'use strict';
+
+
+var ActivityServices = angular.module('metabase.activity.services', ['ngResource', 'ngCookies']);
+
+ActivityServices.factory('Activity', ['$resource', '$cookies', function($resource, $cookies) {
+    return $resource('/api/activity', {}, {
+        list: {
+            method: 'GET',
+            isArray: true
+        },
+
+        recent_views: {
+            url: '/api/activity/recent_views',
+            method: 'GET',
+            isArray: true
+        }
+    });
+}]);

resources/frontend_client/app/app.js

@@ -5,6 +5,7 @@ var Metabase = angular.module('metabase', [
     'ngRoute',
     'ngCookies',
     'ui.bootstrap', // bootstrap LIKE widgets via angular directives
+    'metabase.activity.services',
     'metabase.auth',
     'metabase.filters',
     'metabase.directives',

resources/frontend_client/app/card/card.services.js

@@ -8,7 +8,7 @@ var CardServices = angular.module('metabase.card.services', ['ngResource', 'ngCo
 CardServices.factory('Card', ['$resource', '$cookies', function($resource, $cookies) {
     return $resource('/api/card/:cardId', {}, {
         list: {
-            url: '/api/card/?org=:orgId&f=:filterMode',
+            url: '/api/card/?f=:filterMode',
             method: 'GET',
             isArray: true
         },

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

@@ -0,0 +1,56 @@
+'use strict';
+
+import React, { Component } from 'react';
+import cx from "classnames";
+
+export default class IconBorder extends Component {
+    constructor() {
+        super();
+        this.state = {};
+    }
+    componentDidMount() {
+        this.setState({
+            childWidth: React.findDOMNode(this.refs.child).offsetWidth
+        });
+    }
+    computeSize () {
+        let width = parseInt(this.state.childWidth, 10);
+        return width * 2;
+    }
+
+    render() {
+        const classes = cx({
+            'flex': true,
+            'layout-centered': true
+        });
+
+        const styles = {
+            width: this.computeSize(),
+            height: this.computeSize(),
+            borderWidth: this.props.borderWidth,
+            borderStyle: this.props.borderStyle,
+            borderColor: this.props.borderColor,
+            lineHeight: '1px', /* HACK this is dumb but it centers the icon in the border */
+        }
+
+        if (this.props.borderRadius) {
+            styles.borderRadius = this.props.borderRadius;
+        } else if (this.props.rounded) {
+            styles.borderRadius = "99px";
+        }
+
+        return (
+            <span className={classes + ' ' + this.props.className} style={Object.assign(styles, this.props.style)}>
+                <span ref="child">{this.props.children}</span>
+            </span>
+        );
+    }
+}
+
+IconBorder.defaultProps = {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'currentcolor',
+    rounded: true,
+    style: {},
+}

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

@@ -4,6 +4,7 @@ import React, { Component, PropTypes } from 'react';
 import OnClickOut from 'react-onclickout';
 import cx from 'classnames';
 
+import UserAvatar from './UserAvatar.react';
 import Icon from './Icon.react';
 
 export default class ProfileLink extends Component {
@@ -22,39 +23,23 @@ export default class ProfileLink extends Component {
         this.setState({ dropdownOpen: false });
     }
 
-    displayInitials() {
-        let initials = '??';
-        const { user } = this.props;
-
-        if (user.first_name !== 'undefined') {
-            initials = user.first_name.substring(0, 1);
-        }
-
-        if (user.last_name !== 'undefined') {
-            initials = initials + user.last_name.substring(0, 1);
-        }
-        return initials;
-    }
-
     render() {
         const { user, context } = this.props;
-
         let dropDownClasses = cx({
             'NavDropdown': true,
             'inline-block': true,
             'cursor-pointer': true,
             'open': this.state.dropdownOpen,
         })
 
+
         return (
             <OnClickOut onClickOut={this.closeDropdown}>
                 <div className={dropDownClasses}>
                     <a className="NavDropdown-button NavItem flex align-center p2" onClick={this.toggleDropdown}>
                         <div className="NavDropdown-button-layer">
                             <div className="flex align-center">
-                                <span className="UserNick">
-                                    <span className="UserInitials NavItem-text">{this.displayInitials()}</span>
-                                </span>
+                                <UserAvatar user={user} style={{backgroundColor: 'transparent'}}/>
                                 <Icon name="chevrondown" className="Dropdown-chevron ml1" width="8px" height="8px" />
                             </div>
                         </div>

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

@@ -0,0 +1,55 @@
+'use strict';
+
+import React, { Component } from 'react';
+import cx from 'classnames';
+
+export default class UserAvatar extends Component {
+    constructor(props) {
+        super(props);
+        this.styles = {
+            fontSize: '0.85rem',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderRadius: '99px',
+            width: '2rem',
+            height: '2rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }
+    }
+    userInitials() {
+        const { first_name, last_name } = this.props.user;
+
+        let initials = '??';
+
+        if (first_name !== 'undefined') {
+            initials = first_name.substring(0, 1);
+        }
+
+        if (last_name !== 'undefined') {
+            initials = initials + last_name.substring(0, 1);
+        }
+
+        return initials;
+    }
+
+    render() {
+        const { background } = this.props;
+        const classes = {
+            'flex': true,
+            'align-center': true,
+        }
+        classes[background] = true;
+
+        return (
+            <div className={cx(classes)} style={Object.assign(this.styles, this.props.style)}>
+                {this.userInitials()}
+            </div>
+        )
+    }
+}
+
+UserAvatar.defaultProps = {
+    background: 'bg-brand',
+}

resources/frontend_client/app/controllers.js

@@ -39,22 +39,6 @@ MetabaseControllers.controller('Metabase', ['$scope', '$location', 'MetabaseCore
 }]);
 
 
-MetabaseControllers.controller('Homepage', ['$scope', '$location', 'ipCookie', 'AppState',
-    function($scope, $location, ipCookie, AppState) {
-
-        // At this point in time we don't actually have any kind of content to show for a homepage, so we just use this
-        // as a simple routing controller which sends users somewhere relevant
-        if (AppState.model.currentUser) {
-            $location.path('/dash/');
-        } else {
-            // User is not logged-in, so always send them to login page
-            $location.path('/auth/login');
-        }
-
-    }
-]);
-
-
 MetabaseControllers.controller('Unauthorized', ['$scope', '$location', function($scope, $location) {
 
 }]);

resources/frontend_client/app/css/admin.css

@@ -50,35 +50,10 @@
     transition: background .2s linear;
 }
 
-.UserNick {
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 99px;
-    width: 2rem;
-    height: 2rem; /* set an explicit height since we want it to be square */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.AdminNav .UserNick {
-    color: #fff;
-    border-color: #fff;
-    background-color: #fff;
-    background-color: rgba(255, 255, 255, 0.3);
-}
-
 .AdminNav .Dropdown-chevron {
     color: #fff;
 }
 
-.UserInitials,
-.UserInitials:hover {
-    font-size: 0.85rem;
-    color: currentColor;
-    cursor: pointer;
-}
-
 .Actions {
     background-color: rgba(243,243,243,0.46);
     border: 1px solid #E0E0E0;

resources/frontend_client/app/css/core/colors.css

@@ -96,6 +96,8 @@
 }
 
 .bg-gold { background-color: var(--gold-color); }
+.bg-purple { background-color: var(--purple-color); }
+.bg-green { background-color: var(--green-color); }
 
 /* alt */
 .bg-alt { background-color: var(--alt-color); }

resources/frontend_client/app/css/core/hide.css

@@ -1,5 +1,5 @@
 .hide { display: none !important; }
-.show { display: block; }
+.show { display: inheirt; }
 
 .sm-show,
 .md-show,
@@ -12,7 +12,7 @@
   .sm-hide { display: none !important; }
 }
 @media screen and (--breakpoint-min-sm) {
-  .sm-show { display: block !important; }
+  .sm-show { display: inherit !important; }
 }
 
 /* medium */
@@ -21,21 +21,21 @@
   .md-hide { display: none !important; }
 }
 @media screen and (--breakpoint-min-md) {
-  .md-show { display: block !important; }
+  .md-show { display: inherit !important; }
 }
 /* large */
 
 @media screen and (--breakpoint-min-lg) {
   .lg-hide { display: none !important; }
 }
 @media screen and (--breakpoint-min-lg) {
-  .lg-show { display: block !important; }
+  .lg-show { display: inherit !important; }
 }
 
 /* xl */
 @media screen and (--breakpoint-min-xl) h{
   .xl-hide { display: none !important; }
 }
 @media screen and (--breakpoint-min-xl) {
-  .xl-show { display: block !important; }
+  .xl-show { display: inherit !important; }
 }

resources/frontend_client/app/css/core/layout.css

@@ -7,8 +7,6 @@
 .wrapper {
   width: 100%;
   margin: 0 auto;
-  padding-left: 1.5em;
-  padding-right: 1.5em;
 }
 
 @media screen and (--breakpoint-min-sm) {