WIP

app/components/List/Item.js

@@ -30,6 +30,10 @@ const Wrapper = styled.li`
   padding: ${props => (props.compact ? '8px' : '12px')} 0;
   margin: 0;
   border-bottom: 1px solid ${props => props.theme.divider};
+
+  &:last-child {
+    border-bottom: 0;
+  }
 `;
 
 const Image = styled(Flex)`

app/menus/CollectionMenu.js

@@ -14,12 +14,14 @@ import importFile from 'utils/importFile';
 import Collection from 'models/Collection';
 import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
+import PoliciesStore from 'stores/PoliciesStore';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
 type Props = {
   label?: React.Node,
   position?: 'left' | 'right' | 'center',
   ui: UiStore,
+  policies: PoliciesStore,
   documents: DocumentsStore,
   collection: Collection,
   history: RouterHistory,
@@ -89,7 +91,15 @@ class CollectionMenu extends React.Component<Props> {
   };
 
   render() {
-    const { collection, label, position, onOpen, onClose } = this.props;
+    const {
+      policies,
+      collection,
+      label,
+      position,
+      onOpen,
+      onClose,
+    } = this.props;
+    const can = policies.abilties(collection.id);
 
     return (
       <React.Fragment>
@@ -100,7 +110,7 @@ class CollectionMenu extends React.Component<Props> {
           accept="text/markdown, text/plain"
         />
         <Modal
-          title="Collection permissions"
+          title="Collection members"
           onRequestClose={this.handlePermissionsModalClose}
           isOpen={this.permissionsModalOpen}
         >
@@ -124,16 +134,24 @@ class CollectionMenu extends React.Component<Props> {
                 Import document
               </DropdownMenuItem>
               <hr />
+              {can.update && (
                 <DropdownMenuItem onClick={this.onEdit}>Edit…</DropdownMenuItem>
+              )}
+              {can.update && (
                 <DropdownMenuItem onClick={this.onPermissions}>
-                Permissions…
+                  Members…
                 </DropdownMenuItem>
+              )}
+              {can.export && (
                 <DropdownMenuItem onClick={this.onExport}>
                   Export…
                 </DropdownMenuItem>
+              )}
             </React.Fragment>
           )}
+          {can.delete && (
             <DropdownMenuItem onClick={this.onDelete}>Delete…</DropdownMenuItem>
+          )}
         </DropdownMenu>
       </React.Fragment>
     );
@@ -147,4 +165,6 @@ const HiddenInput = styled.input`
   visibility: hidden;
 `;
 
-export default inject('ui', 'documents')(withRouter(CollectionMenu));
+export default inject('ui', 'documents', 'policies')(
+  withRouter(CollectionMenu)
+);

app/scenes/Collection.js

@@ -152,7 +152,7 @@ class CollectionScene extends React.Component<Props> {
                   )}
                 </Wrapper>
                 <Modal
-                  title="Collection permissions"
+                  title="Collection members"
                   onRequestClose={this.handlePermissionsModalClose}
                   isOpen={this.permissionsModalOpen}
                 >

app/scenes/CollectionEdit.js

@@ -6,6 +6,7 @@ import { inject, observer } from 'mobx-react';
 import Input from 'components/Input';
 import InputRich from 'components/InputRich';
 import Button from 'components/Button';
+import Switch from 'components/Switch';
 import Flex from 'shared/components/Flex';
 import HelpText from 'components/HelpText';
 import ColorPicker from 'components/ColorPicker';
@@ -25,11 +26,13 @@ class CollectionEdit extends React.Component<Props> {
   @observable description: string = '';
   @observable color: string = '#4E5C6E';
   @observable isSaving: boolean;
+  @observable private: boolean = false;
 
   componentWillMount() {
     this.name = this.props.collection.name;
     this.description = this.props.collection.description;
     this.color = this.props.collection.color;
+    this.private = this.props.collection.private;
   }
 
   handleSubmit = async (ev: SyntheticEvent<*>) => {
@@ -41,6 +44,7 @@ class CollectionEdit extends React.Component<Props> {
         name: this.name,
         description: this.description,
         color: this.color,
+        private: this.private,
       });
       this.props.onSubmit();
     } catch (err) {
@@ -62,6 +66,10 @@ class CollectionEdit extends React.Component<Props> {
     this.color = color;
   };
 
+  handlePrivateChange = (ev: SyntheticInputEvent<*>) => {
+    this.private = ev.target.checked;
+  };
+
   render() {
     return (
       <Flex column>
@@ -91,6 +99,15 @@ class CollectionEdit extends React.Component<Props> {
             minHeight={68}
             maxHeight={200}
           />
+          <Switch
+            id="private"
+            label="Private collection"
+            onChange={this.handlePrivateChange}
+            checked={this.private}
+          />
+          <HelpText>
+            A private collection will only be visible to invited team members.
+          </HelpText>
           <Button
             type="submit"
             disabled={this.isSaving || !this.props.collection.name}

app/scenes/CollectionPermissions/CollectionPermissions.js

@@ -4,13 +4,11 @@ import { reject } from 'lodash';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
-import Fade from 'components/Fade';
 import Input from 'components/Input';
 import HelpText from 'components/HelpText';
 import Subheading from 'components/Subheading';
 import List from 'components/List';
 import Placeholder from 'components/List/Placeholder';
-import Switch from 'components/Switch';
 import UserListItem from './components/UserListItem';
 import MemberListItem from './components/MemberListItem';
 import Collection from 'models/Collection';
@@ -42,7 +40,11 @@ class CollectionPermissions extends React.Component<Props> {
     }
   }
 
-  handlePrivateChange = async (ev: SyntheticInputEvent<*>) => {
+  handlePrivateChange = async (ev: SyntheticInputEvent<HTMLInputElement>) => {
+    console.log('handlePrivateChange');
+    ev.preventDefault();
+    ev.stopPropagation();
+
     const { collection } = this.props;
 
     try {
@@ -100,22 +102,11 @@ class CollectionPermissions extends React.Component<Props> {
     return (
       <Flex column>
         <HelpText>
-          Choose which people on the team have access to read and edit documents
-          in the <strong>{collection.name}</strong> collection. By default
-          collections are visible to all team members.
+          Choose which team members have access to read and edit documents in
+          the <strong>{collection.name}</strong> collection.
         </HelpText>
 
-        <Switch
-          id="private"
-          label="Private collection"
-          onChange={this.handlePrivateChange}
-          checked={collection.private}
-        />
-
-        {collection.private && (
-          <Fade>
-            <Flex column>
-              <Subheading>Invited ({collection.users.length})</Subheading>
+        <Subheading>Members</Subheading>
         <List>
           {isFirstLoadingUsers ? (
             <Placeholder />
@@ -133,10 +124,10 @@ class CollectionPermissions extends React.Component<Props> {
 
         {hasOtherUsers && (
           <React.Fragment>
-                  <Subheading>Team Members</Subheading>
+            <Subheading>Others</Subheading>
             <Input
               onChange={this.handleFilter}
-                    placeholder="Filter…"
+              placeholder="Find a team member…"
               value={this.filter}
               type="search"
             />
@@ -153,9 +144,6 @@ class CollectionPermissions extends React.Component<Props> {
           </React.Fragment>
         )}
       </Flex>
-          </Fade>
-        )}
-      </Flex>
     );
   }
 }

app/scenes/CollectionPermissions/components/UserListItem.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { PlusIcon } from 'outline-icons';
 import Avatar from 'components/Avatar';
 import Button from 'components/Button';
 import ListItem from 'components/List/Item';
@@ -18,8 +19,8 @@ const UserListItem = ({ user, onAdd, showAdd }: Props) => {
       image={<Avatar src={user.avatarUrl} size={32} />}
       actions={
         showAdd ? (
-          <Button type="button" onClick={onAdd} neutral>
-            Invite
+          <Button type="button" onClick={onAdd} icon={<PlusIcon />} neutral>
+            Add
           </Button>
         ) : (
           undefined