User Profile (#858)

* First pass user profile

* 💚

* More collaborator tooltip improvements

app/components/Badge.js

@@ -0,0 +1,17 @@
+// @flow
+import styled from 'styled-components';
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 2px 6px 3px;
+  background-color: ${({ admin, theme }) =>
+    admin ? theme.primary : theme.smokeDark};
+  color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  user-select: none;
+`;
+
+export default Badge;

app/components/Collaborators.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { filter } from 'lodash';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
@@ -8,6 +9,7 @@ import Flex from 'shared/components/Flex';
 import Avatar from 'components/Avatar';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';
+import UserProfile from 'scenes/UserProfile';
 import ViewsStore from 'stores/ViewsStore';
 
 const MAX_DISPLAY = 6;
@@ -19,31 +21,24 @@ type Props = {
 
 @observer
 class Collaborators extends React.Component<Props> {
+  @observable openProfileId: ?string;
+
   componentDidMount() {
     this.props.views.fetchPage({ documentId: this.props.document.id });
   }
 
+  handleOpenProfile = (userId: string) => {
+    this.openProfileId = userId;
+  };
+
+  handleCloseProfile = () => {
+    this.openProfileId = undefined;
+  };
+
   render() {
     const { document, views } = this.props;
     const documentViews = views.inDocument(document.id);
-    const {
+    const { createdAt, updatedAt, updatedBy, collaborators } = document;
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      collaborators,
-    } = document;
-    let tooltip;
-
-    if (createdAt === updatedAt) {
-      tooltip = `${createdBy.name} published ${distanceInWordsToNow(
-        new Date(createdAt)
-      )} ago`;
-    } else {
-      tooltip = `${updatedBy.name} updated ${distanceInWordsToNow(
-        new Date(updatedAt)
-      )} ago`;
-    }
 
     // filter to only show views that haven't collaborated
     const collaboratorIds = collaborators.map(user => user.id);
@@ -65,35 +60,67 @@ class Collaborators extends React.Component<Props> {
       <Avatars>
         {overflow > 0 && <More>+{overflow}</More>}
         {mostRecentViewers.map(({ lastViewedAt, user }) => (
-          <StyledTooltip
+          <AvatarPile
             key={user.id}
-            tooltip={`${user.name} viewed ${distanceInWordsToNow(
+            tooltip={
-              new Date(lastViewedAt)
+              <TooltipCentered>
-            )} ago`}
+                <strong>{user.name}</strong>
+                <br />
+                viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago
+              </TooltipCentered>
+            }
             placement="bottom"
           >
             <Viewer>
-              <Avatar src={user.avatarUrl} />
+              <Avatar
+                src={user.avatarUrl}
+                onClick={() => this.handleOpenProfile(user.id)}
+              />
+              <UserProfile
+                user={user}
+                isOpen={this.openProfileId === user.id}
+                onRequestClose={this.handleCloseProfile}
+              />
             </Viewer>
-          </StyledTooltip>
+          </AvatarPile>
         ))}
         {collaborators.map(user => (
-          <StyledTooltip
+          <AvatarPile
             key={user.id}
-            tooltip={collaborators.length > 1 ? user.name : tooltip}
+            tooltip={
+              <TooltipCentered>
+                <strong>{user.name}</strong>
+                <br />
+                {createdAt === updatedAt ? 'published' : 'updated'}{' '}
+                {updatedBy.id === user.id &&
+                  `${distanceInWordsToNow(new Date(updatedAt))} ago`}
+              </TooltipCentered>
+            }
             placement="bottom"
           >
             <Collaborator>
-              <Avatar src={user.avatarUrl} />
+              <Avatar
+                src={user.avatarUrl}
+                onClick={() => this.handleOpenProfile(user.id)}
+              />
+              <UserProfile
+                user={user}
+                isOpen={this.openProfileId === user.id}
+                onRequestClose={this.handleCloseProfile}
+              />
             </Collaborator>
-          </StyledTooltip>
+          </AvatarPile>
         ))}
       </Avatars>
     );
   }
 }
 
-const StyledTooltip = styled(Tooltip)`
+const TooltipCentered = styled.div`
+  text-align: center;
+`;
+
+const AvatarPile = styled(Tooltip)`
   margin-right: -8px;
 
   &:first-child {
@@ -128,6 +155,7 @@ const More = styled.div`
 const Avatars = styled(Flex)`
   align-items: center;
   flex-direction: row-reverse;
+  cursor: pointer;
 `;
 
 export default inject('views')(Collaborators);

app/components/DropdownMenu/DropdownMenu.js

@@ -93,7 +93,7 @@ const Menu = styled.div`
   background: ${props => props.theme.white};
   border-radius: 2px;
   padding: 0.5em 0;
-  min-width: 160px;
+  min-width: 180px;
   overflow: hidden;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
     0 2px 4px rgba(0, 0, 0, 0.08);

app/components/List/Item.js

@@ -5,7 +5,7 @@ import Flex from 'shared/components/Flex';
 
 type Props = {
   image?: React.Node,
-  title: string,
+  title: React.Node,
   subtitle?: React.Node,
   actions?: React.Node,
 };

app/models/User.js

@@ -6,7 +6,6 @@ class User extends BaseModel {
   id: string;
   name: string;
   email: string;
-  username: string;
   isAdmin: boolean;
   isSuspended: boolean;
   createdAt: string;

app/scenes/Settings/components/UserListItem.js

@@ -1,9 +1,12 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
 import UserMenu from 'menus/UserMenu';
 import Avatar from 'components/Avatar';
+import Badge from 'components/Badge';
+import UserProfile from 'scenes/UserProfile';
 import ListItem from 'components/List/Item';
 import Time from 'shared/components/Time';
 import User from 'models/User';
@@ -13,11 +16,38 @@ type Props = {
   showMenu: boolean,
 };
 
-const UserListItem = ({ user, showMenu }: Props) => {
+@observer
+class UserListItem extends React.Component<Props> {
+  @observable profileOpen: boolean = false;
+
+  handleOpenProfile = () => {
+    this.profileOpen = true;
+  };
+
+  handleCloseProfile = () => {
+    this.profileOpen = false;
+  };
+
+  render() {
+    const { user, showMenu } = this.props;
+
     return (
       <ListItem
-      title={user.name}
+        title={<Title onClick={this.handleOpenProfile}>{user.name}</Title>}
-      image={<Avatar src={user.avatarUrl} size={40} />}
+        image={
+          <React.Fragment>
+            <Avatar
+              src={user.avatarUrl}
+              size={40}
+              onClick={this.handleOpenProfile}
+            />
+            <UserProfile
+              user={user}
+              isOpen={this.profileOpen}
+              onRequestClose={this.handleCloseProfile}
+            />
+          </React.Fragment>
+        }
         subtitle={
           <React.Fragment>
             {user.email ? `${user.email} · ` : undefined}
@@ -29,19 +59,14 @@ const UserListItem = ({ user, showMenu }: Props) => {
         actions={showMenu ? <UserMenu user={user} /> : undefined}
       />
     );
-};
+  }
+}
 
-const Badge = styled.span`
+const Title = styled.span`
-  margin-left: 10px;
+  &:hover {
-  padding: 2px 6px 3px;
+    text-decoration: underline;
-  background-color: ${({ admin, theme }) =>
+    cursor: pointer;
-    admin ? theme.primary : theme.smokeDark};
+  }
-  color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
-  border-radius: 2px;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  user-select: none;
 `;
 
 export default UserListItem;

app/scenes/UserProfile.js

@@ -0,0 +1,87 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+import Flex from 'shared/components/Flex';
+import HelpText from 'components/HelpText';
+import Modal from 'components/Modal';
+import Button from 'components/Button';
+import Avatar from 'components/Avatar';
+import Badge from 'components/Badge';
+import PaginatedDocumentList from 'components/PaginatedDocumentList';
+import Subheading from 'components/Subheading';
+import User from 'models/User';
+import DocumentsStore from 'stores/DocumentsStore';
+import AuthStore from 'stores/AuthStore';
+
+type Props = {
+  user: User,
+  auth: AuthStore,
+  documents: DocumentsStore,
+  onRequestClose: () => *,
+};
+
+@observer
+class UserProfile extends React.Component<Props> {
+  render() {
+    const { user, auth, documents, ...rest } = this.props;
+    if (!user) return null;
+    const isCurrentUser = auth.user && auth.user.id === user.id;
+
+    return (
+      <Modal
+        title={
+          <Flex align="center">
+            <Avatar src={user.avatarUrl} size={38} />
+            <span>&nbsp;{user.name}</span>
+          </Flex>
+        }
+        {...rest}
+      >
+        <Flex column>
+          <Meta>
+            {isCurrentUser ? 'You joined' : 'Joined'}{' '}
+            {distanceInWordsToNow(new Date(user.createdAt))} ago.
+            {user.isAdmin && (
+              <StyledBadge admin={user.isAdmin}>Admin</StyledBadge>
+            )}
+            {user.isSuspended && <Badge>Suspended</Badge>}
+            {isCurrentUser && (
+              <Edit>
+                <Button to="/settings" as={Link} small neutral>
+                  Edit Profile
+                </Button>
+              </Edit>
+            )}
+          </Meta>
+          <Subheading>Recently updated</Subheading>
+          <PaginatedDocumentList
+            documents={documents.createdByUser(user.id)}
+            fetch={documents.fetchOwned}
+            options={{ user: user.id }}
+            showCollection
+          />
+        </Flex>
+      </Modal>
+    );
+  }
+}
+
+const Edit = styled.span`
+  position: absolute;
+  top: 46px;
+  right: 0;
+`;
+
+const StyledBadge = styled(Badge)`
+  position: relative;
+  top: -2px;
+`;
+
+const Meta = styled(HelpText)`
+  margin-top: -12px;
+`;
+
+export default inject('documents', 'auth')(UserProfile);

server/api/__snapshots__/users.test.js.snap

@@ -10,7 +10,6 @@ Object {
     "isAdmin": false,
     "isSuspended": false,
     "name": "User 1",
-    "username": "user1",
   },
   "ok": true,
   "status": 200,
@@ -45,7 +44,6 @@ Object {
     "isAdmin": false,
     "isSuspended": false,
     "name": "User 1",
-    "username": "user1",
   },
   "ok": true,
   "status": 200,
@@ -77,15 +75,17 @@ Object {
       "avatarUrl": "http://example.com/avatar.png",
       "createdAt": "2018-01-01T00:00:00.000Z",
       "id": "fa952cff-fa64-4d42-a6ea-6955c9689046",
+      "isAdmin": true,
+      "isSuspended": false,
       "name": "Admin User",
-      "username": "admin",
     },
     Object {
       "avatarUrl": "http://example.com/avatar.png",
       "createdAt": "2018-01-01T00:00:00.000Z",
       "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
+      "isAdmin": false,
+      "isSuspended": false,
       "name": "User 1",
-      "username": "user1",
     },
   ],
   "ok": true,
@@ -109,7 +109,6 @@ Object {
       "isAdmin": false,
       "isSuspended": false,
       "name": "User 1",
-      "username": "user1",
     },
     Object {
       "avatarUrl": "http://example.com/avatar.png",
@@ -119,7 +118,6 @@ Object {
       "isAdmin": true,
       "isSuspended": false,
       "name": "Admin User",
-      "username": "admin",
     },
   ],
   "ok": true,
@@ -142,7 +140,6 @@ Object {
     "isAdmin": true,
     "isSuspended": false,
     "name": "User 1",
-    "username": "user1",
   },
   "ok": true,
   "status": 200,
@@ -177,7 +174,6 @@ Object {
     "isAdmin": false,
     "isSuspended": true,
     "name": "User 1",
-    "username": "user1",
   },
   "ok": true,
   "status": 200,
@@ -212,7 +208,6 @@ Object {
     "isAdmin": false,
     "isSuspended": false,
     "name": "New name",
-    "username": "user1",
   },
   "ok": true,
   "status": 200,

server/presenters/__snapshots__/user.test.js.snap

@@ -5,8 +5,9 @@ Object {
   "avatarUrl": "http://example.com/avatar.png",
   "createdAt": undefined,
   "id": "123",
+  "isAdmin": undefined,
+  "isSuspended": undefined,
   "name": "Test User",
-  "username": "testuser",
 }
 `;
 
@@ -15,7 +16,8 @@ Object {
   "avatarUrl": null,
   "createdAt": undefined,
   "id": "123",
+  "isAdmin": undefined,
+  "isSuspended": undefined,
   "name": "Test User",
-  "username": "testuser",
 }
 `;

server/presenters/user.js

@@ -7,11 +7,11 @@ type Options = {
 
 type UserPresentation = {
   id: string,
-  username: string,
   name: string,
   avatarUrl: ?string,
   email?: string,
-  isAdmin?: boolean,
+  isAdmin: boolean,
+  isSuspended: boolean,
 };
 
 export default (
@@ -22,15 +22,14 @@ export default (
   const userData = {};
   userData.id = user.id;
   userData.createdAt = user.createdAt;
-  userData.username = user.username;
   userData.name = user.name;
+  userData.isAdmin = user.isAdmin;
+  userData.isSuspended = user.isSuspended;
   userData.avatarUrl =
     user.avatarUrl || (user.slackData ? user.slackData.image_192 : null);
 
   if (options.includeDetails) {
     userData.email = user.email;
-    userData.isAdmin = user.isAdmin;
-    userData.isSuspended = user.isSuspended;
   }
 
   return userData;