Ability to revoke, ShareMenu

app/components/List/Item.js

@@ -50,7 +50,7 @@ const Subtitle = styled.p`
 `;
 
 const Actions = styled.div`
-  align-self: flex-end;
+  align-self: center;
 `;
 
 export default ListItem;

app/menus/ShareMenu.js

@@ -0,0 +1,54 @@
+// @flow
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { inject } from 'mobx-react';
+import { MoreIcon } from 'outline-icons';
+
+import { Share } from 'types';
+import CopyToClipboard from 'components/CopyToClipboard';
+import SharesStore from 'stores/SharesStore';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+type Props = {
+  label?: React.Node,
+  onOpen?: () => *,
+  onClose?: () => *,
+  history: Object,
+  shares: SharesStore,
+  share: Share,
+};
+
+class ShareMenu extends React.Component<Props> {
+  onGoToDocument = (ev: SyntheticEvent<*>) => {
+    ev.preventDefault();
+    this.props.history.push(this.props.share.documentUrl);
+  };
+
+  onRevoke = (ev: SyntheticEvent<*>) => {
+    ev.preventDefault();
+    this.props.shares.revoke(this.props.share);
+  };
+
+  render() {
+    const { share, label, onOpen, onClose } = this.props;
+
+    return (
+      <DropdownMenu
+        label={label || <MoreIcon />}
+        onOpen={onOpen}
+        onClose={onClose}
+      >
+        <CopyToClipboard text={share.url} onCopy={onClose}>
+          <DropdownMenuItem>Copy link</DropdownMenuItem>
+        </CopyToClipboard>
+        <DropdownMenuItem onClick={this.onGoToDocument}>
+          Go to document
+        </DropdownMenuItem>
+        <hr />
+        <DropdownMenuItem onClick={this.onRevoke}>Revoke link</DropdownMenuItem>
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(inject('shares')(ShareMenu));

app/menus/UserMenu.js

@@ -61,29 +61,27 @@ class UserMenu extends React.Component<Props> {
     const { user } = this.props;
 
     return (
-      <span>
-        <DropdownMenu label={<MoreIcon />}>
-          {!user.isSuspended &&
-            (user.isAdmin ? (
-              <DropdownMenuItem onClick={this.handleDemote}>
-                Make {user.name} a member…
-              </DropdownMenuItem>
-            ) : (
-              <DropdownMenuItem onClick={this.handlePromote}>
-                Make {user.name} an admin…
-              </DropdownMenuItem>
-            ))}
-          {user.isSuspended ? (
-            <DropdownMenuItem onClick={this.handleActivate}>
-              Activate account
+      <DropdownMenu label={<MoreIcon />}>
+        {!user.isSuspended &&
+          (user.isAdmin ? (
+            <DropdownMenuItem onClick={this.handleDemote}>
+              Make {user.name} a member…
             </DropdownMenuItem>
           ) : (
-            <DropdownMenuItem onClick={this.handleSuspend}>
-              Suspend account…
+            <DropdownMenuItem onClick={this.handlePromote}>
+              Make {user.name} an admin…
             </DropdownMenuItem>
-          )}
-        </DropdownMenu>
-      </span>
+          ))}
+        {user.isSuspended ? (
+          <DropdownMenuItem onClick={this.handleActivate}>
+            Activate account
+          </DropdownMenuItem>
+        ) : (
+          <DropdownMenuItem onClick={this.handleSuspend}>
+            Suspend account…
+          </DropdownMenuItem>
+        )}
+      </DropdownMenu>
     );
   }
 }

app/scenes/Settings/Shares.js

@@ -2,12 +2,9 @@
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
 import SharesStore from 'stores/SharesStore';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 
-import CopyToClipboard from 'components/CopyToClipboard';
-import Button from 'components/Button';
+import ShareListItem from './components/ShareListItem';
 import List from 'components/List';
-import ListItem from 'components/List/Item';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
@@ -29,30 +26,8 @@ class Shares extends React.Component<Props> {
         <PageTitle title="Share Links" />
         <h1>Share Links</h1>
         <List>
-          {shares.data.map(share => (
-            <ListItem
-              key={share.id}
-              title={share.documentTitle}
-              subtitle={
-                <React.Fragment>
-                  Created{' '}
-                  <time dateTime={share.createdAt}>
-                    {distanceInWordsToNow(new Date(share.createdAt))}
-                  </time>{' '}
-                  ago by {share.createdBy.name}
-                </React.Fragment>
-              }
-              actions={
-                <React.Fragment>
-                  <CopyToClipboard text={share.url}>
-                    <Button type="submit" light>
-                      Copy Link
-                    </Button>
-                  </CopyToClipboard>{' '}
-                  <Button light>Revoke</Button>
-                </React.Fragment>
-              }
-            />
+          {shares.orderedData.map(share => (
+            <ShareListItem key={share.id} share={share} />
           ))}
         </List>
       </CenteredContent>

app/scenes/Settings/Users.js

@@ -7,17 +7,15 @@ import Flex from 'shared/components/Flex';
 import Avatar from 'components/Avatar';
 import { color } from 'shared/styles/constants';
 
+import UserMenu from 'menus/UserMenu';
 import AuthStore from 'stores/AuthStore';
-import ErrorsStore from 'stores/ErrorsStore';
 import UsersStore from 'stores/UsersStore';
 import CenteredContent from 'components/CenteredContent';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import PageTitle from 'components/PageTitle';
-import UserMenu from './components/UserMenu';
 
 type Props = {
   auth: AuthStore,
-  errors: ErrorsStore,
   users: UsersStore,
 };
 
@@ -105,4 +103,4 @@ const Badge = styled.span`
   font-weight: normal;
 `;
 
-export default inject('auth', 'errors', 'users')(Users);
+export default inject('auth', 'users')(Users);

app/scenes/Settings/components/ShareListItem.js

@@ -0,0 +1,31 @@
+// @flow
+import * as React from 'react';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import ShareMenu from 'menus/ShareMenu';
+import ListItem from 'components/List/Item';
+import type { Share } from '../../../types';
+
+type Props = {
+  share: Share,
+};
+
+const ShareListItem = ({ share }: Props) => {
+  return (
+    <ListItem
+      key={share.id}
+      title={share.documentTitle}
+      subtitle={
+        <React.Fragment>
+          Shared{' '}
+          <time dateTime={share.createdAt}>
+            {distanceInWordsToNow(new Date(share.createdAt))}
+          </time>{' '}
+          ago by {share.createdBy.name}
+        </React.Fragment>
+      }
+      actions={<ShareMenu share={share} />}
+    />
+  );
+};
+
+export default ShareListItem;

app/stores/SharesStore.js

@@ -1,14 +1,20 @@
 // @flow
-import { observable, action, runInAction } from 'mobx';
+import _ from 'lodash';
+import { observable, action, runInAction, ObservableMap, computed } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
 import type { Share, PaginationParams } from 'types';
 
 class SharesStore {
-  @observable data: Share[] = [];
+  @observable data: Map<string, Share> = new ObservableMap([]);
   @observable isFetching: boolean = false;
   @observable isSaving: boolean = false;
 
+  @computed
+  get orderedData(): Share[] {
+    return _.sortBy(this.data.values(), 'createdAt').reverse();
+  }
+
   @action
   fetchPage = async (options: ?PaginationParams): Promise<*> => {
     this.isFetching = true;
@@ -19,7 +25,9 @@ class SharesStore {
       const { data } = res;
 
       runInAction('fetchShares', () => {
-        this.data = data;
+        data.forEach(share => {
+          this.data.set(share.id, share);
+        });
       });
     } catch (e) {
       console.error('Something went wrong');
@@ -28,11 +36,11 @@ class SharesStore {
   };
 
   @action
-  deleteShare = async (id: string) => {
+  revoke = async (share: Share) => {
     try {
-      await client.post('/shares.delete', { id });
-      runInAction('deleteShare', () => {
-        this.fetchPage();
+      await client.post('/shares.delete', { id: share.id });
+      runInAction('revoke', () => {
+        this.data.delete(share.id);
       });
     } catch (e) {
       console.error('Something went wrong');

app/types/index.js

@@ -13,6 +13,7 @@ export type Share = {
   id: string,
   url: string,
   documentTitle: string,
+  documentUrl: string,
   createdBy: User,
   createdAt: string,
   updatedAt: string,

server/api/shares.js

@@ -65,8 +65,9 @@ router.post('shares.delete', auth(), async ctx => {
   const { id } = ctx.body;
   ctx.assertPresent(id, 'id is required');
 
+  const user = ctx.state.user;
   const share = await Share.findById(id);
-  authorize(ctx.state.user, 'delete', share);
+  authorize(user, 'delete', share);
 
   await share.destroy();
 

server/policies/share.js

@@ -9,7 +9,7 @@ allow(User, ['read'], Share, (user, share) => user.teamId === share.teamId);
 allow(User, ['update'], Share, (user, share) => false);
 allow(User, ['delete'], Share, (user, share) => {
   if (!share || user.teamId !== share.teamId) return false;
-  if (user.id === share.userId) return false;
+  if (user.id === share.userId) return true;
   if (user.isAdmin) return true;
   throw new AdminRequiredError();
 });

server/presenters/share.js

@@ -6,6 +6,7 @@ function present(ctx: Object, share: Share) {
   return {
     id: share.id,
     documentTitle: share.document.title,
+    documentUrl: share.document.getUrl(),
     url: `${process.env.URL}/share/${share.id}`,
     createdBy: presentUser(ctx, share.user),
     createdAt: share.createdAt,