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
2019-10-05 18:42:03 -07:00
parent 4164fc178c
commit b42e9737b6
72 changed files with 2360 additions and 765 deletions
--- a/app/scenes/CollectionMembers/AddPeopleToCollection.js
+++ b/app/scenes/CollectionMembers/AddPeopleToCollection.js
@@ -0,0 +1,122 @@
+// @flow
+import * as React from 'react';
+import { inject, observer } from 'mobx-react';
+import { observable } from 'mobx';
+import { debounce } from 'lodash';
+import Flex from 'shared/components/Flex';
+import HelpText from 'components/HelpText';
+import Input from 'components/Input';
+import Modal from 'components/Modal';
+import Empty from 'components/Empty';
+import PaginatedList from 'components/PaginatedList';
+import Invite from 'scenes/Invite';
+import Collection from 'models/Collection';
+import UiStore from 'stores/UiStore';
+import AuthStore from 'stores/AuthStore';
+import UsersStore from 'stores/UsersStore';
+import MembershipsStore from 'stores/MembershipsStore';
+import MemberListItem from './components/MemberListItem';
+
+type Props = {
+  ui: UiStore,
+  auth: AuthStore,
+  collection: Collection,
+  memberships: MembershipsStore,
+  users: UsersStore,
+  onSubmit: () => void,
+};
+
+@observer
+class AddPeopleToCollection extends React.Component<Props> {
+  @observable inviteModalOpen: boolean = false;
+  @observable query: string = '';
+
+  handleInviteModalOpen = () => {
+    this.inviteModalOpen = true;
+  };
+
+  handleInviteModalClose = () => {
+    this.inviteModalOpen = false;
+  };
+
+  handleFilter = (ev: SyntheticInputEvent<HTMLInputElement>) => {
+    this.query = ev.target.value;
+    this.debouncedFetch();
+  };
+
+  debouncedFetch = debounce(() => {
+    this.props.users.fetchPage({
+      query: this.query,
+    });
+  }, 250);
+
+  handleAddUser = user => {
+    try {
+      this.props.memberships.create({
+        collectionId: this.props.collection.id,
+        userId: user.id,
+        permission: 'read_write',
+      });
+      this.props.ui.showToast(`${user.name} was added to the collection`);
+    } catch (err) {
+      this.props.ui.showToast('Could not add user');
+    }
+  };
+
+  render() {
+    const { users, collection, auth } = this.props;
+    const { user, team } = auth;
+    if (!user || !team) return null;
+
+    return (
+      <Flex column>
+        <HelpText>
+          Need to add someone who’s not yet on the team yet?{' '}
+          <a role="button" onClick={this.handleInviteModalOpen}>
+            Invite people to {team.name}
+          </a>.
+        </HelpText>
+
+        <Input
+          type="search"
+          placeholder="Search by name…"
+          value={this.query}
+          onChange={this.handleFilter}
+          label="Search people"
+          labelHidden
+          flex
+        />
+        <PaginatedList
+          empty={
+            this.query ? (
+              <Empty>No people matching your search</Empty>
+            ) : (
+              <Empty>No people left to add</Empty>
+            )
+          }
+          items={users.notInCollection(collection.id, this.query)}
+          fetch={this.query ? undefined : users.fetchPage}
+          renderItem={item => (
+            <MemberListItem
+              key={item.id}
+              user={item}
+              onAdd={() => this.handleAddUser(item)}
+              canEdit
+            />
+          )}
+        />
+        <Modal
+          title="Invite people"
+          onRequestClose={this.handleInviteModalClose}
+          isOpen={this.inviteModalOpen}
+        >
+          <Invite onSubmit={this.handleInviteModalClose} />
+        </Modal>
+      </Flex>
+    );
+  }
+}
+
+export default inject('auth', 'users', 'memberships', 'ui')(
+  AddPeopleToCollection
+);