feat: Memberships (#1032)

* WIP

* feat: Add collection.memberships endpoint

* feat: Add ability to filter collection.memberships with query

* WIP

* Merge stashed work

* feat: Add ability to filter memberships by permission

* continued refactoring

* paginated list component

* Collection member management

* fix: Incorrect policy data sent down after collection.update

* Reduce duplication, add empty state

* cleanup

* fix: Modal close should be a real button

* fix: Allow opening edit from modal

* fix: remove unused methods

* test: fix

* Passing test suite

* Refactor

* fix: Flow UI errors

* test: Add collections.update tests

* lint

* test: moar tests

* fix: Missing scopes, more missing tests

* fix: Handle collection privacy change over socket

* fix: More membership scopes

* fix: view endpoint permissions

* fix: respond to privacy change on socket event

* policy driven menus

* fix: share endpoint policies

* chore: Use policies to drive documents UI

* alignment

* fix: Header height

* fix: Correct behavior when collection becomes private

* fix: Header height for read-only collection

* send id's over socket instead of serialized objects

* fix: Remote policy change

* fix: reduce collection fetching

* More websocket efficiencies

* fix: Document collection pinning

* fix: Restored ability to edit drafts
fix: Removed ability to star drafts

* fix: Require write permissions to pin doc to collection

* fix: Header title overlaying document actions at small screen sizes

* fix: Jank on load caused by previous commit

* fix: Double collection fetch post-publish

* fix: Hide publish button if draft is in no longer accessible collection

* fix: Always allow deleting drafts
fix: Improved handling of deleted documents

* feat: Show collections in drafts view
feat: Show more obvious 'draft' badge on documents

* fix: incorrect policies after publish to private collection

* fix: Duplicating a draft publishes it

app/scenes/Document/Document.js

@@ -37,6 +37,7 @@ import ErrorOffline from 'scenes/ErrorOffline';
 import UiStore from 'stores/UiStore';
 import AuthStore from 'stores/AuthStore';
 import DocumentsStore from 'stores/DocumentsStore';
+import PoliciesStore from 'stores/PoliciesStore';
 import RevisionsStore from 'stores/RevisionsStore';
 import Document from 'models/Document';
 import Revision from 'models/Revision';
@@ -60,6 +61,7 @@ type Props = {
   match: Object,
   history: RouterHistory,
   location: Location,
+  policies: PoliciesStore,
   documents: DocumentsStore,
   revisions: RevisionsStore,
   auth: AuthStore,
@@ -89,6 +91,16 @@ class DocumentScene extends React.Component<Props> {
     this.loadEditor();
   }
 
+  componentDidUpdate() {
+    if (this.document) {
+      const policy = this.props.policies.get(this.document.id);
+
+      if (!policy) {
+        this.loadDocument(this.props);
+      }
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this.viewTimeout);
   }
@@ -100,18 +112,26 @@ class DocumentScene extends React.Component<Props> {
   @keydown('m')
   goToMove(ev) {
     ev.preventDefault();
+    const document = this.document;
+    if (!document) return;
 
-    if (this.document && !this.document.isArchived && !this.document.isDraft) {
-      this.props.history.push(documentMoveUrl(this.document));
+    const can = this.props.policies.abilities(document.id);
+
+    if (can.update) {
+      this.props.history.push(documentMoveUrl(document));
     }
   }
 
   @keydown('e')
   goToEdit(ev) {
     ev.preventDefault();
+    const document = this.document;
+    if (!document) return;
 
-    if (this.document && !this.document.isArchived) {
-      this.props.history.push(documentEditUrl(this.document));
+    const can = this.props.policies.abilities(document.id);
+
+    if (can.update) {
+      this.props.history.push(documentEditUrl(document));
     }
   }
 
@@ -316,6 +336,9 @@ class DocumentScene extends React.Component<Props> {
 
     const embedsDisabled = team && !team.documentEmbeds;
 
+    // this line is only here to make MobX understand that policies are a dependency of this component
+    this.props.policies.abilities(document.id);
+
     return (
       <ErrorBoundary>
         <Container
@@ -428,5 +451,5 @@ const Container = styled(Flex)`
 `;
 
 export default withRouter(
-  inject('ui', 'auth', 'documents', 'revisions')(DocumentScene)
+  inject('ui', 'auth', 'documents', 'policies', 'revisions')(DocumentScene)
 );

app/scenes/Document/components/Header.js

@@ -21,11 +21,14 @@ import DocumentShare from 'scenes/DocumentShare';
 import Button from 'components/Button';
 import Tooltip from 'components/Tooltip';
 import Modal from 'components/Modal';
+import Fade from 'components/Fade';
 import Badge from 'components/Badge';
 import Collaborators from 'components/Collaborators';
 import { Action, Separator } from 'components/Actions';
+import PoliciesStore from 'stores/PoliciesStore';
 
 type Props = {
+  policies: PoliciesStore,
   document: Document,
   isDraft: boolean,
   isEditing: boolean,
@@ -96,6 +99,7 @@ class Header extends React.Component<Props> {
 
     const {
       document,
+      policies,
       isEditing,
       isDraft,
       isPublishing,
@@ -104,10 +108,11 @@ class Header extends React.Component<Props> {
       publishingIsDisabled,
       auth,
     } = this.props;
-    const canShareDocuments =
-      auth.team && auth.team.sharing && !document.isArchived;
+
+    const can = policies.abilities(document.id);
+    const canShareDocuments = auth.team && auth.team.sharing && can.share;
     const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
-    const canEdit = !document.isArchived && !isEditing;
+    const canEdit = can.update && !isEditing;
 
     return (
       <Actions
@@ -128,9 +133,13 @@ class Header extends React.Component<Props> {
           />
         </Modal>
         <Breadcrumb document={document} />
-        <Title isHidden={!this.isScrolled} onClick={this.handleClickTitle}>
-          {document.title} {document.isArchived && <Badge>Archived</Badge>}
-        </Title>
+        {this.isScrolled && (
+          <Title onClick={this.handleClickTitle}>
+            <Fade>
+              {document.title} {document.isArchived && <Badge>Archived</Badge>}
+            </Fade>
+          </Title>
+        )}
         <Wrapper align="center" justify="flex-end">
           {!isDraft && !isEditing && <Collaborators document={document} />}
           {isSaving &&
@@ -175,18 +184,19 @@ class Header extends React.Component<Props> {
               </Action>
             </React.Fragment>
           )}
-          {isDraft && (
-            <Action>
-              <Button
-                onClick={this.handlePublish}
-                title="Publish document"
-                disabled={publishingIsDisabled}
-                small
-              >
-                {isPublishing ? 'Publishing…' : 'Publish'}
-              </Button>
-            </Action>
-          )}
+          {canEdit &&
+            isDraft && (
+              <Action>
+                <Button
+                  onClick={this.handlePublish}
+                  title="Publish document"
+                  disabled={publishingIsDisabled}
+                  small
+                >
+                  {isPublishing ? 'Publishing…' : 'Publish'}
+                </Button>
+              </Action>
+            )}
           {canEdit && (
             <Action>
               <Tooltip
@@ -252,6 +262,7 @@ const Status = styled.div`
 const Wrapper = styled(Flex)`
   width: 100%;
   align-self: flex-end;
+  height: 32px;
 
   ${breakpoint('tablet')`	
     width: 33.3%;
@@ -293,9 +304,6 @@ const Title = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  transition: opacity 100ms ease-in-out;
-  opacity: ${props => (props.isHidden ? '0' : '1')};
-  cursor: ${props => (props.isHidden ? 'default' : 'pointer')};
   display: none;
   width: 0;
 
@@ -305,4 +313,4 @@ const Title = styled.div`
   `};
 `;
 
-export default inject('auth')(Header);
+export default inject('auth', 'policies')(Header);