Revert "WIP"

This reverts commit ccfad1d800.

app/components/List/Item.js

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

app/scenes/Collection.js

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

app/scenes/CollectionEdit.js

@@ -6,7 +6,6 @@ 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';
@@ -26,13 +25,11 @@ 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<*>) => {
@@ -44,7 +41,6 @@ class CollectionEdit extends React.Component<Props> {
         name: this.name,
         description: this.description,
         color: this.color,
-        private: this.private,
       });
       this.props.onSubmit();
     } catch (err) {
@@ -66,10 +62,6 @@ class CollectionEdit extends React.Component<Props> {
     this.color = color;
   };
 
-  handlePrivateChange = (ev: SyntheticInputEvent<*>) => {
-    this.private = ev.target.checked;
-  };
-
   render() {
     return (
       <Flex column>
@@ -99,15 +91,6 @@ 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,11 +4,13 @@ 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';
@@ -40,11 +42,7 @@ class CollectionPermissions extends React.Component<Props> {
     }
   }
 
-  handlePrivateChange = async (ev: SyntheticInputEvent<HTMLInputElement>) => {
-    console.log('handlePrivateChange');
-    ev.preventDefault();
-    ev.stopPropagation();
-
+  handlePrivateChange = async (ev: SyntheticInputEvent<*>) => {
     const { collection } = this.props;
 
     try {
@@ -102,46 +100,60 @@ class CollectionPermissions extends React.Component<Props> {
     return (
       <Flex column>
         <HelpText>
-          Choose which team members have access to read and edit documents in
-          the <strong>{collection.name}</strong> collection.
+          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.
         </HelpText>
 
-        <Subheading>Members</Subheading>
-        <List>
-          {isFirstLoadingUsers ? (
-            <Placeholder />
-          ) : (
-            collection.users.map(member => (
-              <MemberListItem
-                key={member.id}
-                user={member}
-                showRemove={user.id !== member.id}
-                onRemove={() => this.handleRemoveUser(member)}
-              />
-            ))
-          )}
-        </List>
+        <Switch
+          id="private"
+          label="Private collection"
+          onChange={this.handlePrivateChange}
+          checked={collection.private}
+        />
 
-        {hasOtherUsers && (
-          <React.Fragment>
-            <Subheading>Others</Subheading>
-            <Input
-              onChange={this.handleFilter}
-              placeholder="Find a team member…"
-              value={this.filter}
-              type="search"
-            />
-            <List>
-              {filteredUsers.map(member => (
-                <UserListItem
-                  key={member.id}
-                  user={member}
-                  onAdd={() => this.handleAddUser(member)}
-                  showAdd
-                />
-              ))}
-            </List>
-          </React.Fragment>
+        {collection.private && (
+          <Fade>
+            <Flex column>
+              <Subheading>Invited ({collection.users.length})</Subheading>
+              <List>
+                {isFirstLoadingUsers ? (
+                  <Placeholder />
+                ) : (
+                  collection.users.map(member => (
+                    <MemberListItem
+                      key={member.id}
+                      user={member}
+                      showRemove={user.id !== member.id}
+                      onRemove={() => this.handleRemoveUser(member)}
+                    />
+                  ))
+                )}
+              </List>
+
+              {hasOtherUsers && (
+                <React.Fragment>
+                  <Subheading>Team Members</Subheading>
+                  <Input
+                    onChange={this.handleFilter}
+                    placeholder="Filter…"
+                    value={this.filter}
+                    type="search"
+                  />
+                  <List>
+                    {filteredUsers.map(member => (
+                      <UserListItem
+                        key={member.id}
+                        user={member}
+                        onAdd={() => this.handleAddUser(member)}
+                        showAdd
+                      />
+                    ))}
+                  </List>
+                </React.Fragment>
+              )}
+            </Flex>
+          </Fade>
         )}
       </Flex>
     );

app/scenes/CollectionPermissions/components/UserListItem.js

@@ -1,6 +1,5 @@
 // @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';
@@ -19,8 +18,8 @@ const UserListItem = ({ user, onAdd, showAdd }: Props) => {
       image={<Avatar src={user.avatarUrl} size={32} />}
       actions={
         showAdd ? (
-          <Button type="button" onClick={onAdd} icon={<PlusIcon />} neutral>
-            Add
+          <Button type="button" onClick={onAdd} neutral>
+            Invite
           </Button>
         ) : (
           undefined