yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Memberships (#1032)

Browse Source 
* 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
This commit is contained in:
Tom Moor
2019-10-05 18:42:03 -07:00
committed by GitHub
parent 4164fc178c
commit b42e9737b6
72 changed files with 2360 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/scenes/Collection.js
View File

@@ -17,10 +17,12 @@ import RichMarkdownEditor from 'rich-markdown-editor';
import { newDocumentUrl, collectionUrl } from 'utils/routeHelpers';
import CollectionsStore from 'stores/CollectionsStore';
import DocumentsStore from 'stores/DocumentsStore';
import PoliciesStore from 'stores/PoliciesStore';
import UiStore from 'stores/UiStore';
import Collection from 'models/Collection';
import Search from 'scenes/Search';
import CollectionEdit from 'scenes/CollectionEdit';
import CollectionMenu from 'menus/CollectionMenu';
import Actions, { Action, Separator } from 'components/Actions';
import Heading from 'components/Heading';
@@ -35,7 +37,7 @@ import Subheading from 'components/Subheading';
import PageTitle from 'components/PageTitle';
import Flex from 'shared/components/Flex';
import Modal from 'components/Modal';
import CollectionPermissions from 'scenes/CollectionPermissions';
import CollectionMembers from 'scenes/CollectionMembers';
import Tabs from 'components/Tabs';
import Tab from 'components/Tab';
import PaginatedDocumentList from 'components/PaginatedDocumentList';
@@ -44,6 +46,7 @@ type Props = {
ui: UiStore,
documents: DocumentsStore,
collections: CollectionsStore,
policies: PoliciesStore,
match: Object,
theme: Object,
};
@@ -53,6 +56,7 @@ class CollectionScene extends React.Component<Props> {
@observable collection: ?Collection;
@observable isFetching: boolean = true;
@observable permissionsModalOpen: boolean = false;
@observable editModalOpen: boolean = false;
@observable redirectTo: ?string;
componentDidMount() {
@@ -77,7 +81,7 @@ class CollectionScene extends React.Component<Props> {
this.collection = collection;
await this.props.documents.fetchPinned({
collection: id,
collectionId: id,
});
}
@@ -101,22 +105,36 @@ class CollectionScene extends React.Component<Props> {
this.permissionsModalOpen = false;
};
handleEditModalOpen = () => {
this.editModalOpen = true;
};
handleEditModalClose = () => {
this.editModalOpen = false;
};
renderActions() {
const can = this.props.policies.abilities(this.props.match.params.id);
return (
<Actions align="center" justify="flex-end">
<Action>
<Tooltip
tooltip="New document"
shortcut="n"
delay={500}
placement="bottom"
>
<Button onClick={this.onNewDocument} icon={<PlusIcon />}>
New doc
</Button>
</Tooltip>
</Action>
<Separator />
{can.update && (
<React.Fragment>
<Action>
<Tooltip
tooltip="New document"
shortcut="n"
delay={500}
placement="bottom"
>
<Button onClick={this.onNewDocument} icon={<PlusIcon />}>
New doc
</Button>
</Tooltip>
</Action>
<Separator />
</React.Fragment>
)}
<Action>
<CollectionMenu collection={this.collection} />
</Action>
@@ -155,18 +173,29 @@ class CollectionScene extends React.Component<Props> {
</Link>&nbsp;&nbsp;
{collection.private && (
<Button onClick={this.onPermissions} neutral>
Invite people
Manage members…
</Button>
)}
</Wrapper>
<Modal
title="Collection permissions"
title="Collection members"
onRequestClose={this.handlePermissionsModalClose}
isOpen={this.permissionsModalOpen}
>
<CollectionPermissions
<CollectionMembers
collection={this.collection}
onSubmit={this.handlePermissionsModalClose}
onEdit={this.handleEditModalOpen}
/>
</Modal>
<Modal
title="Edit collection"
onRequestClose={this.handleEditModalClose}
isOpen={this.editModalOpen}
>
<CollectionEdit
collection={this.collection}
onSubmit={this.handleEditModalClose}
/>
</Modal>
</Centered>
@@ -304,6 +333,6 @@ const Wrapper = styled(Flex)`
margin: 10px 0;
`;
export default inject('collections', 'documents', 'ui')(
export default inject('collections', 'policies', 'documents', 'ui')(
withTheme(CollectionScene)
);

22
app/scenes/CollectionEdit.js
View File

@@ -1,11 +1,11 @@
// @flow
import * as React from 'react';
import { withRouter } from 'react-router-dom';
import { observable } from 'mobx';
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';
@@ -13,7 +13,6 @@ import Collection from 'models/Collection';
import UiStore from 'stores/UiStore';
type Props = {
history: Object,
collection: Collection,
ui: UiStore,
onSubmit: () => void,
@@ -25,11 +24,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,8 +42,10 @@ class CollectionEdit extends React.Component<Props> {
name: this.name,
description: this.description,
color: this.color,
private: this.private,
});
this.props.onSubmit();
this.props.ui.showToast('The collection was updated');
} catch (err) {
this.props.ui.showToast(err.message);
} finally {
@@ -62,6 +65,10 @@ class CollectionEdit extends React.Component<Props> {
this.color = color;
};
handlePrivateChange = (ev: SyntheticInputEvent<*>) => {
this.private = ev.target.checked;
};
render() {
return (
<Flex column>
@@ -91,6 +98,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}
@@ -103,4 +119,4 @@ class CollectionEdit extends React.Component<Props> {
}
}
export default inject('ui')(withRouter(CollectionEdit));
export default inject('ui')(CollectionEdit);

122
app/scenes/CollectionMembers/AddPeopleToCollection.js Normal file
View File

@@ -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
);

143
app/scenes/CollectionMembers/CollectionMembers.js Normal file
View File

@@ -0,0 +1,143 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { inject, observer } from 'mobx-react';
import { PlusIcon } from 'outline-icons';
import Flex from 'shared/components/Flex';
import HelpText from 'components/HelpText';
import Subheading from 'components/Subheading';
import Button from 'components/Button';
import PaginatedList from 'components/PaginatedList';
import Modal from 'components/Modal';
import Collection from 'models/Collection';
import UiStore from 'stores/UiStore';
import AuthStore from 'stores/AuthStore';
import MembershipsStore from 'stores/MembershipsStore';
import UsersStore from 'stores/UsersStore';
import MemberListItem from './components/MemberListItem';
import AddPeopleToCollection from './AddPeopleToCollection';
type Props = {
ui: UiStore,
auth: AuthStore,
collection: Collection,
users: UsersStore,
memberships: MembershipsStore,
onEdit: () => void,
};
@observer
class CollectionMembers extends React.Component<Props> {
@observable addModalOpen: boolean = false;
handleAddModalOpen = () => {
this.addModalOpen = true;
};
handleAddModalClose = () => {
this.addModalOpen = false;
};
handleRemoveUser = user => {
try {
this.props.memberships.delete({
collectionId: this.props.collection.id,
userId: user.id,
});
this.props.ui.showToast(`${user.name} was removed from the collection`);
} catch (err) {
this.props.ui.showToast('Could not remove user');
}
};
handleUpdateUser = (user, permission) => {
try {
this.props.memberships.create({
collectionId: this.props.collection.id,
userId: user.id,
permission,
});
this.props.ui.showToast(`${user.name} permissions were updated`);
} catch (err) {
this.props.ui.showToast('Could not update user');
}
};
render() {
const { collection, users, memberships, auth } = this.props;
const { user } = auth;
if (!user) return null;
const key = memberships.orderedData.map(m => m.permission).join('-');
return (
<Flex column>
{collection.private ? (
<React.Fragment>
<HelpText>
Choose which team members have access to view and edit documents
in the private <strong>{collection.name}</strong> collection. You
can make this collection visible to the entire team by{' '}
<a role="button" onClick={this.props.onEdit}>
changing its visibility
</a>.
</HelpText>
<span>
<Button
type="button"
onClick={this.handleAddModalOpen}
icon={<PlusIcon />}
neutral
>
Add people
</Button>
</span>
</React.Fragment>
) : (
<HelpText>
The <strong>{collection.name}</strong> collection is accessible by
everyone on the team. If you want to limit who can view the
collection,{' '}
<a role="button" onClick={this.props.onEdit}>
make it private
</a>.
</HelpText>
)}
<Subheading>Members</Subheading>
<PaginatedList
key={key}
items={
collection.private
? users.inCollection(collection.id)
: users.orderedData
}
fetch={collection.private ? memberships.fetchPage : users.fetchPage}
options={collection.private ? { id: collection.id } : undefined}
renderItem={item => (
<MemberListItem
key={item.id}
user={item}
membership={memberships.get(`${item.id}-${collection.id}`)}
canEdit={collection.private && item.id !== user.id}
onRemove={() => this.handleRemoveUser(item)}
onUpdate={permission => this.handleUpdateUser(item, permission)}
/>
)}
/>
<Modal
title={`Add people to ${collection.name}`}
onRequestClose={this.handleAddModalClose}
isOpen={this.addModalOpen}
>
<AddPeopleToCollection
collection={collection}
onSubmit={this.handleAddModalClose}
/>
</Modal>
</Flex>
);
}
}
export default inject('auth', 'users', 'memberships', 'ui')(CollectionMembers);

82
app/scenes/CollectionMembers/components/MemberListItem.js Normal file
View File

@@ -0,0 +1,82 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import Avatar from 'components/Avatar';
import Flex from 'shared/components/Flex';
import Time from 'shared/components/Time';
import Badge from 'components/Badge';
import Button from 'components/Button';
import InputSelect from 'components/InputSelect';
import ListItem from 'components/List/Item';
import User from 'models/User';
import Membership from 'models/Membership';
import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
const PERMISSIONS = [
{ label: 'Read only', value: 'read' },
{ label: 'Read & Edit', value: 'read_write' },
];
type Props = {
user: User,
membership?: ?Membership,
canEdit: boolean,
onAdd?: () => void,
onRemove?: () => void,
onUpdate?: (permission: string) => void,
};
const MemberListItem = ({
user,
membership,
onRemove,
onUpdate,
onAdd,
canEdit,
}: Props) => {
return (
<ListItem
title={user.name}
subtitle={
<React.Fragment>
Joined <Time dateTime={user.createdAt} /> ago
{user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
</React.Fragment>
}
image={<Avatar src={user.avatarUrl} size={32} />}
actions={
<Flex align="center">
{canEdit &&
onUpdate && (
<Select
label="Permissions"
options={PERMISSIONS}
value={membership ? membership.permission : undefined}
onChange={ev => onUpdate(ev.target.value)}
labelHidden
/>
)}
&nbsp;&nbsp;
{canEdit &&
onRemove && (
<DropdownMenu>
<DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
</DropdownMenu>
)}
{canEdit &&
onAdd && (
<Button onClick={onAdd} neutral>
Add
</Button>
)}
</Flex>
}
/>
);
};
const Select = styled(InputSelect)`
margin: 0;
font-size: 14px;
`;
export default MemberListItem;

11
app/scenes/CollectionPermissions/components/UserListItem.js → app/scenes/CollectionMembers/components/UserListItem.js
View File

@@ -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';
@@ -7,19 +8,19 @@ import User from 'models/User';
type Props = {
user: User,
showAdd: boolean,
canEdit: boolean,
onAdd: () => void,
};
const UserListItem = ({ user, onAdd, showAdd }: Props) => {
const UserListItem = ({ user, onAdd, canEdit }: Props) => {
return (
<ListItem
title={user.name}
image={<Avatar src={user.avatarUrl} size={32} />}
actions={
showAdd ? (
<Button type="button" onClick={onAdd} neutral>
Invite
canEdit ? (
<Button type="button" onClick={onAdd} icon={<PlusIcon />} neutral>
Add
</Button>
) : (
undefined

3
app/scenes/CollectionMembers/index.js Normal file
View File

@@ -0,0 +1,3 @@
// @flow
import CollectionMembers from './CollectionMembers';
export default CollectionMembers;

163
app/scenes/CollectionPermissions/CollectionPermissions.js
View File

@@ -1,163 +0,0 @@
// @flow
import * as React from 'react';
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';
import UsersStore from 'stores/UsersStore';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
type Props = {
users: UsersStore,
ui: UiStore,
auth: AuthStore,
collection: Collection,
};
@observer
class CollectionPermissions extends React.Component<Props> {
@observable isEdited: boolean = false;
@observable isSaving: boolean = false;
@observable filter: string;
componentDidMount() {
this.props.users.fetchPage();
this.props.collection.fetchUsers();
}
componentWillUnmount() {
if (this.isEdited) {
this.props.ui.showToast('Permissions updated');
}
}
handlePrivateChange = async (ev: SyntheticInputEvent<*>) => {
const { collection } = this.props;
try {
this.isEdited = true;
collection.private = ev.target.checked;
await collection.save();
if (collection.private) {
await collection.fetchUsers();
}
} catch (err) {
collection.private = !ev.target.checked;
this.props.ui.showToast('Collection privacy could not be changed');
}
};
handleAddUser = user => {
try {
this.isEdited = true;
this.props.collection.addUser(user);
} catch (err) {
this.props.ui.showToast('Could not add user');
}
};
handleRemoveUser = user => {
try {
this.isEdited = true;
this.props.collection.removeUser(user);
} catch (err) {
this.props.ui.showToast('Could not remove user');
}
};
handleFilter = (ev: SyntheticInputEvent<*>) => {
this.filter = ev.target.value.toLowerCase();
};
render() {
const { collection, users, auth } = this.props;
const { user } = auth;
if (!user) return null;
const otherUsers = reject(users.active, user =>
collection.userIds.includes(user.id)
);
const hasOtherUsers = !!otherUsers.length;
const isFirstLoadingUsers =
collection.isLoadingUsers && !collection.users.length;
const filteredUsers = reject(
otherUsers,
user => this.filter && !user.name.toLowerCase().includes(this.filter)
);
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.
</HelpText>
<Switch
id="private"
label="Private collection"
onChange={this.handlePrivateChange}
checked={collection.private}
/>
{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>
);
}
}
export default inject('auth', 'ui', 'users')(CollectionPermissions);

49
app/scenes/CollectionPermissions/components/MemberListItem.js
View File

@@ -1,49 +0,0 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { MoreIcon } from 'outline-icons';
import Avatar from 'components/Avatar';
import HelpText from 'components/HelpText';
import Flex from 'shared/components/Flex';
import ListItem from 'components/List/Item';
import User from 'models/User';
import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
import NudeButton from 'components/NudeButton';
type Props = {
user: User,
showRemove: boolean,
onRemove: () => void,
};
const MemberListItem = ({ user, onRemove, showRemove }: Props) => {
return (
<ListItem
title={user.name}
image={<Avatar src={user.avatarUrl} size={32} />}
actions={
<Flex align="center">
<Permission as="span">Can edit&nbsp;</Permission>
{showRemove && (
<DropdownMenu
label={
<NudeButton>
<MoreIcon />
</NudeButton>
}
>
<DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
</DropdownMenu>
)}
</Flex>
}
/>
);
};
const Permission = styled(HelpText)`
text-transform: uppercase;
font-size: 11px;
`;
export default MemberListItem;

3
app/scenes/CollectionPermissions/index.js
View File

@@ -1,3 +0,0 @@
// @flow
import CollectionPermissions from './CollectionPermissions';
export default CollectionPermissions;

33
app/scenes/Document/Document.js
View File

@@ -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)
);

52
app/scenes/Document/components/Header.js
View File

@@ -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);

2
app/scenes/Drafts.js
View File

@@ -37,7 +37,7 @@ class Drafts extends React.Component<Props> {
) : (
<React.Fragment>
<Subheading>Documents</Subheading>
<DocumentList documents={drafts} showCollection />
<DocumentList documents={drafts} showDraft={false} showCollection />
{showLoading && <ListPlaceholder />}
</React.Fragment>
)}

1
app/scenes/Invite.js
View File

@@ -73,6 +73,7 @@ class Invite extends React.Component<Props> {
handleCopy = () => {
this.linkCopied = true;
this.props.ui.showToast('A link was copied to your clipboard');
};
render() {