Merge pull request #301 from zalando-stups/300-approval-avatars

300 approval avatars
zalando-stups · Sep 22, 2015 · 355f2c6 · 355f2c6
2 parents f5bf7de + 4efeac1
commit 355f2c6
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 33 deletions.
diff --git a/client/lib/application/src/approval-form/approval-card.jsx b/client/lib/application/src/approval-form/approval-card.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Gravatar from 'react-gravatar';
 import Icon from 'react-fa';
 import Timestamp from 'react-time';
 import {DATE_FORMAT} from 'common/src/config';
@@ -20,34 +21,46 @@ class ApprovalCard extends React.Component {
     }
 
     render() {
-        let {approval} = this.props,
+        let {approval, userinfo} = this.props,
             {open} = this.state;
         return <div
                     onClick={this.toggle.bind(this)}
-                    className='approvalCard'>
+                    className={'approvalCard' + (approval.notes ? ' has-notes' : '')}>
                     <header>
+
                         <div className='grid'>
-                            <span className='approvalCard-approvalType grid-col'>
-                                <Icon name='check' /> {approval.approval_type}
-                            </span>
-                            <span className='grid-col'>from <strong>{approval.user_id}</strong></span>
-                            {approval.notes ?
-                                <span>
-                                    <Icon name='comment' />
-                                </span>
-                                :
-                                null}
+                            <div className='grid-col col-1-3 approvalCard-approver'>
+                                <Gravatar
+                                    size={75}
+                                    email={userinfo.email} />
+                                <div title={approval.user_id}>
+                                    {userinfo ? userinfo.name.split(' ')[0] : approval.user_id}
+                                </div>
+                            </div>
+                            <div className='grid-col col-2-3 approvalCard-meta'>
+                                <small className='approvalCard-time'>
+                                    <Icon
+                                        fixedWidth
+                                        name='calendar-o'/> <Timestamp
+                                            format={DATE_FORMAT}
+                                            value={approval.timestamp} />
+                                </small>
+                                {approval.notes ?
+                                    <div className='approvalCard-notes-icon'>
+                                        <Icon fixedWidth name='comment' /> Click to see approval notes
+                                    </div> :
+                                    null}
+                                <div className='approvalCard-approvalType'>
+                                    <Icon fixedWidth name='check' /> {approval.approval_type}
+                                </div>
+                            </div>
                         </div>
                     </header>
                     {open ?
                         <div className='approvalCard-details'>
-                            <div className='approvalCard-time'>
-                                on <Timestamp
-                                        format={DATE_FORMAT}
-                                        value={approval.timestamp} />
-                            </div>
                             {approval.notes ?
                                 <div className='approvalCard-notes'>
+                                    <h4>Notes</h4>
                                     <Markdown src={approval.notes} />
                                 </div>
                                 :
@@ -61,6 +74,7 @@ class ApprovalCard extends React.Component {
 }
 ApprovalCard.displayName = 'ApprovalCard';
 ApprovalCard.propTypes = {
-    approval: React.PropTypes.object.isRequired
+    approval: React.PropTypes.object.isRequired,
+    userinfo: React.PropTypes.object.isRequired
 };
 export default ApprovalCard;
diff --git a/client/lib/application/src/approval-form/approval-form.jsx b/client/lib/application/src/approval-form/approval-form.jsx
@@ -177,6 +177,7 @@ class ApprovalForm extends React.Component {
                                 {approvals.map(
                                     (a, i) => <ApprovalCard
                                                 key={i}
+                                                userinfo={this.stores.user.getUserInfo(a.user_id)}
                                                 approval={a} />)}
                             </div>
                         </div>

diff --git a/client/lib/application/src/router.react.jsx b/client/lib/application/src/router.react.jsx
@@ -17,6 +17,7 @@ import ApprovalForm from './approval-form/approval-form.jsx';
 
 const MINT_ACTIONS = FLUX.getActions('mint'),
       PIERONE_ACTIONS = FLUX.getActions('pierone'),
+      USER_ACTIONS = FLUX.getActions('user'),
       KIO_ACTIONS = FLUX.getActions('kio'),
       KIO_STORE = FLUX.getStore('kio');
 
@@ -281,7 +282,7 @@ class ApprovalFormHandler extends React.Component {
     render() {
         return <FluxComponent
                     flux={FLUX}
-                    connectToStores={['kio', 'pierone']}>
+                    connectToStores={['kio', 'pierone', 'user']}>
 
                     <ApprovalForm
                         applicationId={this.props.params.applicationId}
@@ -301,7 +302,11 @@ ApprovalFormHandler.fetchData = function(state) {
     if (!KIO_STORE.getApplicationVersion(applicationId, versionId)) {
         KIO_ACTIONS.fetchApplicationVersion(applicationId, versionId);
     }
-    KIO_ACTIONS.fetchApprovals(applicationId, versionId);
+    KIO_ACTIONS
+        .fetchApprovals(applicationId, versionId)
+        .then((args) => args[2]
+                        .map(a => a.user_id)
+                                .forEach(u => USER_ACTIONS.fetchUserInfo(u)));
     return KIO_ACTIONS.fetchApprovalTypes(applicationId);
 };
 

diff --git a/client/lib/common/asset/less/application/approval-card.less b/client/lib/common/asset/less/application/approval-card.less
@@ -7,37 +7,64 @@
     background: @white;
     padding: @padding-tiny;
 
-    &:hover {
-        border-color: @gray;
+    &.has-notes {
+        border-left: 1px solid @gray-darker;
+        header {
+            cursor: pointer;
+            .approvalCard-time {
+                margin-bottom: 0;
+            }
+        }
+        &:hover {
+            border-color: @gray;
+        }
     }
 
     strong {
         color: @gray-dark;
     }
 
     header {
-        cursor: pointer;
-        .approvalCard-approvalType {
-            flex: 0 0 auto;
-            margin-right: @padding-tiny;
+        .grid-col {
+            display: flex;            
+            flex-direction: column;
+            align-self: center;
+        }
+    }
+
+
+    .approvalCard-approver {
+        @media(min-width: @mobile-breakpoint) {
+            > * {
+                margin: 0 auto;
+                text-align: center;
+            }
+        }
+        .react-gravatar {
+            border-radius: 100%;
+            display: block;
         }
     }
 
+    .approvalCard-notes-icon {
+        color: @gray;
+        font-size: @small-font-size;
+        line-height: @small-line-height;
+        margin-bottom: @padding-tiny;
+    }
+
     .approvalCard-approvalType {
-        display: inline-block;
         background-color: @green;
-        border: 1px solid white;
         color: @white;
         border-radius: 5px;
         word-wrap: break-word;
-        padding: 0 @padding-tiny;
+        padding: @padding-tiny;
     }
 
     .approvalCard-time {
-        margin-top: @small-margin-top;
         margin-bottom: @small-margin-bottom;
-        line-height: @base-line-height;
         color: @gray;
+        display: block;
     }
 
     + .approvalCard {

diff --git a/client/lib/common/asset/less/base.less b/client/lib/common/asset/less/base.less
@@ -162,6 +162,10 @@ ul {
     text-align: center;
 }
 
+.u-text-right {
+    text-align: right;
+}
+
 .u-placeholder {
     .u-placeholder-text {
         font-family: @font-placeholder;

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "react": "0.13.3",
     "react-day-picker": "1.0.1",
     "react-fa": "3.3.1",
-    "react-gravatar": "1.2.0",
+    "react-gravatar": "2.0.1",
     "react-infinite-scroll": "0.1.5",
     "react-router": "0.13.3",
     "react-time": "2.5.0",

diff --git a/server/mocks/5000-kio.js b/server/mocks/5000-kio.js
@@ -89,7 +89,8 @@ var approvals = {
             "version_id": "1",
             "approval_type": "TESTED",
             "user_id": "tobi",
-            "approved_at": "2015-04-25T16:40:00"
+            "approved_at": "2015-04-25T16:40:00",
+            "notes": "hello"
         }]
     }
 };

diff --git a/server/mocks/5009-user.js b/server/mocks/5009-user.js
@@ -5,6 +5,10 @@ var users = {
     npiccolotto: {
         email: '[email protected]',
         name: 'Nikolaus Piccolotto'
+    },
+    tobi: {
+        email: '[email protected]',
+        name: 'Tobias Sarnowski'
     }
 };