Merge branch 'main' into feat/mass-import
This commit is contained in:
Tom Moor
GitHub
@ -3,11 +3,15 @@ import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import { bounceIn } from "shared/styles/animations";
|
||||
|
||||
type Props = {
|
||||
type Props = {|
|
||||
count: number,
|
||||
};
|
||||
|};
|
||||
|
||||
const Bubble = ({ count }: Props) => {
|
||||
if (!count) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <Count>{count}</Count>;
|
||||
};
|
||||
|
||||
@ -76,7 +76,6 @@ class Layout extends React.Component<Props> {
|
||||
|
||||
@keydown("shift+/")
|
||||
handleOpenKeyboardShortcuts() {
|
||||
if (this.props.ui.editMode) return;
|
||||
this.keyboardShortcutsOpen = true;
|
||||
}
|
||||
|
||||
@ -86,7 +85,6 @@ class Layout extends React.Component<Props> {
|
||||
|
||||
@keydown(["t", "/", `${meta}+k`])
|
||||
goToSearch(ev: SyntheticEvent<>) {
|
||||
if (this.props.ui.editMode) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this.redirectTo = searchUrl();
|
||||
@ -94,7 +92,6 @@ class Layout extends React.Component<Props> {
|
||||
|
||||
@keydown("d")
|
||||
goToDashboard() {
|
||||
if (this.props.ui.editMode) return;
|
||||
this.redirectTo = homeUrl();
|
||||
}
|
||||
|
||||
@ -102,7 +99,7 @@ class Layout extends React.Component<Props> {
|
||||
const { auth, t, ui } = this.props;
|
||||
const { user, team } = auth;
|
||||
const showSidebar = auth.authenticated && user && team;
|
||||
const sidebarCollapsed = ui.editMode || ui.sidebarCollapsed;
|
||||
const sidebarCollapsed = ui.isEditing || ui.sidebarCollapsed;
|
||||
|
||||
if (auth.isSuspended) return <ErrorSuspended />;
|
||||
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
|
||||
|
||||
@ -16,11 +16,11 @@ import { useTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import CollectionNew from "scenes/CollectionNew";
|
||||
import Invite from "scenes/Invite";
|
||||
import Bubble from "components/Bubble";
|
||||
import Flex from "components/Flex";
|
||||
import Modal from "components/Modal";
|
||||
import Scrollable from "components/Scrollable";
|
||||
import Sidebar from "./Sidebar";
|
||||
import Bubble from "./components/Bubble";
|
||||
import Collections from "./components/Collections";
|
||||
import HeaderBlock from "./components/HeaderBlock";
|
||||
import Section from "./components/Section";
|
||||
@ -118,9 +118,7 @@ function MainSidebar() {
|
||||
label={
|
||||
<Drafts align="center">
|
||||
{t("Drafts")}
|
||||
{documents.totalDrafts > 0 && (
|
||||
<Bubble count={documents.totalDrafts} />
|
||||
)}
|
||||
</Drafts>
|
||||
}
|
||||
active={
|
||||
|
||||
@ -3,29 +3,37 @@ import { observer } from "mobx-react";
|
||||
import * as React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Portal } from "react-portal";
|
||||
import { withRouter } from "react-router-dom";
|
||||
import type { Location } from "react-router-dom";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import styled, { useTheme } from "styled-components";
|
||||
import breakpoint from "styled-components-breakpoint";
|
||||
import Fade from "components/Fade";
|
||||
import Flex from "components/Flex";
|
||||
import CollapseToggle, {
|
||||
Button as CollapseButton,
|
||||
} from "./components/CollapseToggle";
|
||||
import ResizeBorder from "./components/ResizeBorder";
|
||||
import ResizeHandle from "./components/ResizeHandle";
|
||||
import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
|
||||
import usePrevious from "hooks/usePrevious";
|
||||
import useStores from "hooks/useStores";
|
||||
|
||||
let firstRender = true;
|
||||
let BOUNCE_ANIMATION_MS = 250;
|
||||
let ANIMATION_MS = 250;
|
||||
|
||||
type Props = {
|
||||
children: React.Node,
|
||||
location: Location,
|
||||
};
|
||||
|
||||
const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
|
||||
function Sidebar({ children }: Props) {
|
||||
const [isCollapsing, setCollapsing] = React.useState(false);
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { ui } = useStores();
|
||||
const location = useLocation();
|
||||
const previousLocation = usePrevious(location);
|
||||
|
||||
const width = ui.sidebarWidth;
|
||||
const collapsed = ui.isEditing || ui.sidebarCollapsed;
|
||||
const maxWidth = theme.sidebarMaxWidth;
|
||||
const minWidth = theme.sidebarMinWidth + 16; // padding
|
||||
const setWidth = ui.setSidebarWidth;
|
||||
|
||||
const [offset, setOffset] = React.useState(0);
|
||||
const [isAnimating, setAnimating] = React.useState(false);
|
||||
const [isResizing, setResizing] = React.useState(false);
|
||||
@ -38,24 +46,45 @@ const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
|
||||
|
||||
// this is simple because the sidebar is always against the left edge
|
||||
const width = Math.min(event.pageX - offset, maxWidth);
|
||||
setWidth(width);
|
||||
},
|
||||
[offset, maxWidth, setWidth]
|
||||
);
|
||||
const isSmallerThanCollapsePoint = width < minWidth / 2;
|
||||
|
||||
const handleStopDrag = React.useCallback(() => {
|
||||
setResizing(false);
|
||||
|
||||
if (isSmallerThanMinimum) {
|
||||
setWidth(minWidth);
|
||||
setAnimating(true);
|
||||
if (isSmallerThanCollapsePoint) {
|
||||
setWidth(theme.sidebarCollapsedWidth);
|
||||
} else {
|
||||
setWidth(width);
|
||||
}
|
||||
}, [isSmallerThanMinimum, minWidth, width, setWidth]);
|
||||
},
|
||||
[theme, offset, minWidth, maxWidth, setWidth]
|
||||
);
|
||||
|
||||
const handleStartDrag = React.useCallback(
|
||||
(event) => {
|
||||
const handleStopDrag = React.useCallback(
|
||||
(event: MouseEvent) => {
|
||||
setResizing(false);
|
||||
|
||||
if (document.activeElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
|
||||
if (isSmallerThanMinimum) {
|
||||
const isSmallerThanCollapsePoint = width < minWidth / 2;
|
||||
|
||||
if (isSmallerThanCollapsePoint) {
|
||||
setAnimating(false);
|
||||
setCollapsing(true);
|
||||
ui.collapseSidebar();
|
||||
} else {
|
||||
setWidth(minWidth);
|
||||
setAnimating(true);
|
||||
}
|
||||
} else {
|
||||
setWidth(width);
|
||||
}
|
||||
},
|
||||
[ui, isSmallerThanMinimum, minWidth, width, setWidth]
|
||||
);
|
||||
|
||||
const handleMouseDown = React.useCallback(
|
||||
(event: MouseEvent) => {
|
||||
setOffset(event.pageX - width);
|
||||
setResizing(true);
|
||||
setAnimating(false);
|
||||
@ -65,10 +94,19 @@ const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isAnimating) {
|
||||
setTimeout(() => setAnimating(false), BOUNCE_ANIMATION_MS);
|
||||
setTimeout(() => setAnimating(false), ANIMATION_MS);
|
||||
}
|
||||
}, [isAnimating]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isCollapsing) {
|
||||
setTimeout(() => {
|
||||
setWidth(minWidth);
|
||||
setCollapsing(false);
|
||||
}, ANIMATION_MS);
|
||||
}
|
||||
}, [setWidth, minWidth, isCollapsing]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isResizing) {
|
||||
document.addEventListener("mousemove", handleDrag);
|
||||
@ -81,32 +119,6 @@ const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
|
||||
};
|
||||
}, [isResizing, handleDrag, handleStopDrag]);
|
||||
|
||||
return { isAnimating, isSmallerThanMinimum, isResizing, handleStartDrag };
|
||||
};
|
||||
|
||||
function Sidebar({ location, children }: Props) {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { ui } = useStores();
|
||||
const previousLocation = usePrevious(location);
|
||||
|
||||
const width = ui.sidebarWidth;
|
||||
const maxWidth = theme.sidebarMaxWidth;
|
||||
const minWidth = theme.sidebarMinWidth + 16; // padding
|
||||
const collapsed = ui.editMode || ui.sidebarCollapsed;
|
||||
|
||||
const {
|
||||
isAnimating,
|
||||
isSmallerThanMinimum,
|
||||
isResizing,
|
||||
handleStartDrag,
|
||||
} = useResize({
|
||||
width,
|
||||
minWidth,
|
||||
maxWidth,
|
||||
setWidth: ui.setSidebarWidth,
|
||||
});
|
||||
|
||||
const handleReset = React.useCallback(() => {
|
||||
ui.setSidebarWidth(theme.sidebarWidth);
|
||||
}, [ui, theme.sidebarWidth]);
|
||||
@ -124,30 +136,30 @@ function Sidebar({ location, children }: Props) {
|
||||
const style = React.useMemo(
|
||||
() => ({
|
||||
width: `${width}px`,
|
||||
left:
|
||||
collapsed && !ui.mobileSidebarVisible
|
||||
? `${-width + theme.sidebarCollapsedWidth}px`
|
||||
: 0,
|
||||
}),
|
||||
[width, collapsed, theme.sidebarCollapsedWidth, ui.mobileSidebarVisible]
|
||||
[width]
|
||||
);
|
||||
|
||||
const toggleStyle = React.useMemo(
|
||||
() => ({
|
||||
right: "auto",
|
||||
marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
|
||||
}),
|
||||
[width, theme.sidebarCollapsedWidth, collapsed]
|
||||
);
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<Container
|
||||
style={style}
|
||||
$sidebarWidth={ui.sidebarWidth}
|
||||
$isCollapsing={isCollapsing}
|
||||
$isAnimating={isAnimating}
|
||||
$isSmallerThanMinimum={isSmallerThanMinimum}
|
||||
$mobileSidebarVisible={ui.mobileSidebarVisible}
|
||||
$collapsed={collapsed}
|
||||
column
|
||||
>
|
||||
{!isResizing && (
|
||||
<CollapseToggle
|
||||
collapsed={ui.sidebarCollapsed}
|
||||
onClick={ui.toggleCollapsedSidebar}
|
||||
/>
|
||||
)}
|
||||
{ui.mobileSidebarVisible && (
|
||||
<Portal>
|
||||
<Fade>
|
||||
@ -155,18 +167,29 @@ function Sidebar({ location, children }: Props) {
|
||||
</Fade>
|
||||
</Portal>
|
||||
)}
|
||||
|
||||
{children}
|
||||
{!ui.sidebarCollapsed && (
|
||||
<ResizeBorder
|
||||
onMouseDown={handleStartDrag}
|
||||
onDoubleClick={handleReset}
|
||||
onMouseDown={handleMouseDown}
|
||||
onDoubleClick={ui.sidebarCollapsed ? undefined : handleReset}
|
||||
$isResizing={isResizing}
|
||||
>
|
||||
<ResizeHandle aria-label={t("Resize sidebar")} />
|
||||
</ResizeBorder>
|
||||
/>
|
||||
{ui.sidebarCollapsed && !ui.isEditing && (
|
||||
<Toggle
|
||||
onClick={ui.toggleCollapsedSidebar}
|
||||
direction={"right"}
|
||||
aria-label={t("Expand")}
|
||||
/>
|
||||
)}
|
||||
</Container>
|
||||
{!ui.isEditing && (
|
||||
<Toggle
|
||||
style={toggleStyle}
|
||||
onClick={ui.toggleCollapsedSidebar}
|
||||
direction={ui.sidebarCollapsed ? "right" : "left"}
|
||||
aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
// Fade in the sidebar on first render after page load
|
||||
@ -195,29 +218,36 @@ const Container = styled(Flex)`
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: ${(props) => props.theme.sidebarBackground};
|
||||
transition: box-shadow, 100ms, ease-in-out, margin-left 100ms ease-out,
|
||||
left 100ms ease-out,
|
||||
transition: box-shadow 100ms ease-in-out, transform 100ms ease-out,
|
||||
${(props) => props.theme.backgroundTransition}
|
||||
${(props) =>
|
||||
props.$isAnimating ? `,width ${BOUNCE_ANIMATION_MS}ms ease-out` : ""};
|
||||
margin-left: ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")};
|
||||
props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
|
||||
transform: translateX(
|
||||
${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
|
||||
);
|
||||
z-index: ${(props) => props.theme.depths.sidebar};
|
||||
max-width: 70%;
|
||||
min-width: 280px;
|
||||
|
||||
${Positioner} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
${breakpoint("tablet")`
|
||||
margin: 0;
|
||||
z-index: 3;
|
||||
min-width: 0;
|
||||
transform: translateX(${(props) =>
|
||||
props.$collapsed ? "calc(-100% + 16px)" : 0});
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
left: 0 !important;
|
||||
transform: none;
|
||||
box-shadow: ${(props) =>
|
||||
props.$collapsed
|
||||
? "rgba(0, 0, 0, 0.2) 1px 0 4px"
|
||||
@ -225,11 +255,11 @@ const Container = styled(Flex)`
|
||||
? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
|
||||
: "none"};
|
||||
|
||||
& ${CollapseButton} {
|
||||
opacity: .75;
|
||||
${Positioner} {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& ${CollapseButton}:hover {
|
||||
${ToggleButton} {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -241,4 +271,4 @@ const Container = styled(Flex)`
|
||||
`};
|
||||
`;
|
||||
|
||||
export default withRouter(observer(Sidebar));
|
||||
export default observer(Sidebar);
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
// @flow
|
||||
import { NextIcon, BackIcon } from "outline-icons";
|
||||
import * as React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import Tooltip from "components/Tooltip";
|
||||
import { meta } from "utils/keyboard";
|
||||
|
||||
type Props = {|
|
||||
collapsed: boolean,
|
||||
onClick?: (event: SyntheticEvent<>) => void,
|
||||
|};
|
||||
|
||||
function CollapseToggle({ collapsed, ...rest }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
tooltip={collapsed ? t("Expand") : t("Collapse")}
|
||||
shortcut={`${meta}+.`}
|
||||
delay={500}
|
||||
placement="bottom"
|
||||
>
|
||||
<Button {...rest} tabIndex="-1" aria-hidden>
|
||||
{collapsed ? (
|
||||
<NextIcon color="currentColor" />
|
||||
) : (
|
||||
<BackIcon color="currentColor" />
|
||||
)}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export const Button = styled.button`
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 8px;
|
||||
border: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
z-index: 1;
|
||||
font-weight: 600;
|
||||
color: ${(props) => props.theme.sidebarText};
|
||||
background: transparent;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: ${(props) => props.theme.white};
|
||||
background: ${(props) => props.theme.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export default CollapseToggle;
|
||||
@ -42,8 +42,6 @@ class Collections extends React.Component<Props> {
|
||||
|
||||
@keydown("n")
|
||||
goToNewDocument() {
|
||||
if (this.props.ui.editMode) return;
|
||||
|
||||
const { activeCollectionId } = this.props.ui;
|
||||
if (!activeCollectionId) return;
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// @flow
|
||||
import styled from "styled-components";
|
||||
import ResizeHandle from "./ResizeHandle";
|
||||
|
||||
const ResizeBorder = styled.div`
|
||||
position: absolute;
|
||||
@ -9,20 +8,6 @@ const ResizeBorder = styled.div`
|
||||
right: -6px;
|
||||
width: 12px;
|
||||
cursor: ew-resize;
|
||||
|
||||
${(props) =>
|
||||
props.$isResizing &&
|
||||
`
|
||||
${ResizeHandle} {
|
||||
opacity: 1;
|
||||
}
|
||||
`}
|
||||
|
||||
&:hover {
|
||||
${ResizeHandle} {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default ResizeBorder;
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
// @flow
|
||||
import styled from "styled-components";
|
||||
import breakpoint from "styled-components-breakpoint";
|
||||
|
||||
const ResizeHandle = styled.button`
|
||||
opacity: 0;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 40px;
|
||||
right: -10px;
|
||||
width: 8px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: ${(props) => props.theme.sidebarBackground};
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
bottom: -24px;
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: ${(props) => props.theme.sidebarText};
|
||||
}
|
||||
|
||||
${breakpoint("tablet")`
|
||||
pointer-events: all;
|
||||
cursor: ew-resize;
|
||||
`}
|
||||
`;
|
||||
|
||||
export default ResizeHandle;
|
||||
75
app/components/Sidebar/components/Toggle.js
Normal file
75
app/components/Sidebar/components/Toggle.js
Normal file
@ -0,0 +1,75 @@
|
||||
// @flow
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import breakpoint from "styled-components-breakpoint";
|
||||
|
||||
type Props = {
|
||||
direction: "left" | "right",
|
||||
style?: Object,
|
||||
onClick?: () => any,
|
||||
};
|
||||
|
||||
const Toggle = React.forwardRef<Props, HTMLButtonElement>(
|
||||
({ direction = "left", onClick, style }: Props, ref) => {
|
||||
return (
|
||||
<Positioner style={style}>
|
||||
<ToggleButton ref={ref} $direction={direction} onClick={onClick}>
|
||||
<svg
|
||||
width="13"
|
||||
height="30"
|
||||
viewBox="0 0 13 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
|
||||
/>
|
||||
</svg>
|
||||
</ToggleButton>
|
||||
</Positioner>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export const ToggleButton = styled.button`
|
||||
opacity: 0;
|
||||
background: none;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
transform: translateY(-50%)
|
||||
scaleX(${(props) => (props.$direction === "left" ? 1 : -1)});
|
||||
position: absolute;
|
||||
top: 50vh;
|
||||
padding: 8px;
|
||||
border: 0;
|
||||
pointer-events: none;
|
||||
color: ${(props) => props.theme.divider};
|
||||
|
||||
&:active {
|
||||
color: ${(props) => props.theme.sidebarText};
|
||||
}
|
||||
|
||||
${breakpoint("tablet")`
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Positioner = styled.div`
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -30px;
|
||||
width: 30px;
|
||||
|
||||
&:hover ${ToggleButton}, &:focus-within ${ToggleButton} {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export default Toggle;
|
||||
@ -13,17 +13,23 @@ type Props = {|
|
||||
id?: string,
|
||||
|};
|
||||
|
||||
function Switch({ width = 38, height = 20, label, ...props }: Props) {
|
||||
function Switch({ width = 38, height = 20, label, disabled, ...props }: Props) {
|
||||
const component = (
|
||||
<Wrapper width={width} height={height}>
|
||||
<HiddenInput type="checkbox" width={width} height={height} {...props} />
|
||||
<HiddenInput
|
||||
type="checkbox"
|
||||
width={width}
|
||||
height={height}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
<Slider width={width} height={height} />
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
if (label) {
|
||||
return (
|
||||
<Label htmlFor={props.id}>
|
||||
<Label disabled={disabled} htmlFor={props.id}>
|
||||
{component}
|
||||
<LabelText>{label}</LabelText>
|
||||
</Label>
|
||||
@ -36,6 +42,8 @@ function Switch({ width = 38, height = 20, label, ...props }: Props) {
|
||||
const Label = styled.label`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
${(props) => (props.disabled ? `opacity: 0.75;` : "")}
|
||||
`;
|
||||
|
||||
const Wrapper = styled.label`
|
||||
@ -79,6 +87,11 @@ const HiddenInput = styled.input`
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&:disabled + ${Slider} {
|
||||
opacity: 0.75;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:checked + ${Slider} {
|
||||
background-color: ${(props) => props.theme.primary};
|
||||
}
|
||||
|
||||
@ -10,8 +10,8 @@ type Props = {
|
||||
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: ${(props) => props.theme.textTertiary};
|
||||
|
||||
@ -8,6 +8,7 @@ const Tabs = styled.nav`
|
||||
margin-bottom: 12px;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap;
|
||||
transition: opacity 250ms ease-out;
|
||||
`;
|
||||
|
||||
export const Separator = styled.span`
|
||||
|
||||
@ -64,6 +64,10 @@ function CollectionMenu({
|
||||
[history, collection.id]
|
||||
);
|
||||
|
||||
const stopPropagation = React.useCallback((ev: SyntheticEvent<>) => {
|
||||
ev.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleImportDocument = React.useCallback(
|
||||
(ev: SyntheticEvent<>) => {
|
||||
ev.preventDefault();
|
||||
@ -83,20 +87,19 @@ function CollectionMenu({
|
||||
|
||||
try {
|
||||
const file = files[0];
|
||||
const document = await documents.import(
|
||||
file,
|
||||
null,
|
||||
this.props.collection.id,
|
||||
{ publish: true }
|
||||
);
|
||||
const document = await documents.import(file, null, collection.id, {
|
||||
publish: true,
|
||||
});
|
||||
history.push(document.url);
|
||||
} catch (err) {
|
||||
ui.showToast(err.message, {
|
||||
type: "error",
|
||||
});
|
||||
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
[history, ui, documents]
|
||||
[history, ui, collection.id, documents]
|
||||
);
|
||||
|
||||
const can = policies.abilities(collection.id);
|
||||
@ -108,7 +111,7 @@ function CollectionMenu({
|
||||
type="file"
|
||||
ref={file}
|
||||
onChange={handleFilePicked}
|
||||
onClick={(ev) => ev.stopPropagation()}
|
||||
onClick={stopPropagation}
|
||||
accept={documents.importFileTypes.join(", ")}
|
||||
tabIndex="-1"
|
||||
/>
|
||||
@ -146,7 +149,7 @@ function CollectionMenu({
|
||||
onClick: () => setShowCollectionEdit(true),
|
||||
},
|
||||
{
|
||||
title: `${t("Permissions")}…`,
|
||||
title: `${t("Members")}…`,
|
||||
visible: can.update,
|
||||
onClick: () => setShowCollectionMembers(true),
|
||||
},
|
||||
@ -172,7 +175,7 @@ function CollectionMenu({
|
||||
{renderModals && (
|
||||
<>
|
||||
<Modal
|
||||
title={t("Collection permissions")}
|
||||
title={t("Collection members")}
|
||||
onRequestClose={() => setShowCollectionMembers(false)}
|
||||
isOpen={showCollectionMembers}
|
||||
>
|
||||
|
||||
@ -15,6 +15,7 @@ import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
|
||||
import Template from "components/ContextMenu/Template";
|
||||
import Flex from "components/Flex";
|
||||
import Modal from "components/Modal";
|
||||
import useCurrentTeam from "hooks/useCurrentTeam";
|
||||
import useStores from "hooks/useStores";
|
||||
import {
|
||||
documentHistoryUrl,
|
||||
@ -49,7 +50,8 @@ function DocumentMenu({
|
||||
onOpen,
|
||||
onClose,
|
||||
}: Props) {
|
||||
const { policies, collections, auth, ui } = useStores();
|
||||
const team = useCurrentTeam();
|
||||
const { policies, collections, ui } = useStores();
|
||||
const menu = useMenuState({ modal });
|
||||
const history = useHistory();
|
||||
const { t } = useTranslation();
|
||||
@ -130,10 +132,10 @@ function DocumentMenu({
|
||||
[document]
|
||||
);
|
||||
|
||||
const can = policies.abilities(document.id);
|
||||
const canShareDocuments = !!(can.share && auth.team && auth.team.sharing);
|
||||
const canViewHistory = can.read && !can.restore;
|
||||
const collection = collections.get(document.collectionId);
|
||||
const can = policies.abilities(document.id);
|
||||
const canShareDocuments = !!(can.share && team.sharing);
|
||||
const canViewHistory = can.read && !can.restore;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -16,6 +16,7 @@ export default class Collection extends BaseModel {
|
||||
icon: string;
|
||||
color: string;
|
||||
private: boolean;
|
||||
sharing: boolean;
|
||||
documents: NavigationNode[];
|
||||
createdAt: ?string;
|
||||
updatedAt: ?string;
|
||||
@ -112,6 +113,7 @@ export default class Collection extends BaseModel {
|
||||
"name",
|
||||
"color",
|
||||
"description",
|
||||
"sharing",
|
||||
"icon",
|
||||
"private",
|
||||
"sort",
|
||||
|
||||
@ -230,7 +230,7 @@ class CollectionScene extends React.Component<Props> {
|
||||
)}
|
||||
</Wrapper>
|
||||
<Modal
|
||||
title={t("Collection permissions")}
|
||||
title={t("Collection members")}
|
||||
onRequestClose={this.handlePermissionsModalClose}
|
||||
isOpen={this.permissionsModalOpen}
|
||||
>
|
||||
|
||||
@ -3,6 +3,7 @@ import { observable } from "mobx";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import * as React from "react";
|
||||
import { withTranslation, Trans, type TFunction } from "react-i18next";
|
||||
import AuthStore from "stores/AuthStore";
|
||||
import UiStore from "stores/UiStore";
|
||||
import Collection from "models/Collection";
|
||||
import Button from "components/Button";
|
||||
@ -17,6 +18,7 @@ import Switch from "components/Switch";
|
||||
type Props = {
|
||||
collection: Collection,
|
||||
ui: UiStore,
|
||||
auth: AuthStore,
|
||||
onSubmit: () => void,
|
||||
t: TFunction,
|
||||
};
|
||||
@ -24,6 +26,7 @@ type Props = {
|
||||
@observer
|
||||
class CollectionEdit extends React.Component<Props> {
|
||||
@observable name: string = this.props.collection.name;
|
||||
@observable sharing: boolean = this.props.collection.sharing;
|
||||
@observable description: string = this.props.collection.description;
|
||||
@observable icon: string = this.props.collection.icon;
|
||||
@observable color: string = this.props.collection.color || "#4E5C6E";
|
||||
@ -44,6 +47,7 @@ class CollectionEdit extends React.Component<Props> {
|
||||
icon: this.icon,
|
||||
color: this.color,
|
||||
private: this.private,
|
||||
sharing: this.sharing,
|
||||
sort: this.sort,
|
||||
});
|
||||
this.props.onSubmit();
|
||||
@ -82,8 +86,13 @@ class CollectionEdit extends React.Component<Props> {
|
||||
this.private = ev.target.checked;
|
||||
};
|
||||
|
||||
handleSharingChange = (ev: SyntheticInputEvent<*>) => {
|
||||
this.sharing = ev.target.checked;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { auth, t } = this.props;
|
||||
const teamSharingEnabled = !!auth.team && auth.team.sharing;
|
||||
|
||||
return (
|
||||
<Flex column>
|
||||
@ -140,6 +149,25 @@ class CollectionEdit extends React.Component<Props> {
|
||||
A private collection will only be visible to invited team members.
|
||||
</Trans>
|
||||
</HelpText>
|
||||
<Switch
|
||||
id="sharing"
|
||||
label={t("Public document sharing")}
|
||||
onChange={this.handleSharingChange}
|
||||
checked={this.sharing && teamSharingEnabled}
|
||||
disabled={!teamSharingEnabled}
|
||||
/>
|
||||
<HelpText>
|
||||
{teamSharingEnabled ? (
|
||||
<Trans>
|
||||
When enabled, documents can be shared publicly on the internet.
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans>
|
||||
Public sharing is currently disabled in the team security
|
||||
settings.
|
||||
</Trans>
|
||||
)}
|
||||
</HelpText>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={this.isSaving || !this.props.collection.name}
|
||||
@ -152,4 +180,6 @@ class CollectionEdit extends React.Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
export default withTranslation()<CollectionEdit>(inject("ui")(CollectionEdit));
|
||||
export default withTranslation()<CollectionEdit>(
|
||||
inject("ui", "auth")(CollectionEdit)
|
||||
);
|
||||
|
||||
@ -3,8 +3,9 @@ import { intersection } from "lodash";
|
||||
import { observable } from "mobx";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import * as React from "react";
|
||||
import { withTranslation, type TFunction } from "react-i18next";
|
||||
import { withTranslation, type TFunction, Trans } from "react-i18next";
|
||||
import { withRouter, type RouterHistory } from "react-router-dom";
|
||||
import AuthStore from "stores/AuthStore";
|
||||
import CollectionsStore from "stores/CollectionsStore";
|
||||
import UiStore from "stores/UiStore";
|
||||
import Collection from "models/Collection";
|
||||
@ -18,6 +19,7 @@ import Switch from "components/Switch";
|
||||
|
||||
type Props = {
|
||||
history: RouterHistory,
|
||||
auth: AuthStore,
|
||||
ui: UiStore,
|
||||
collections: CollectionsStore,
|
||||
onSubmit: () => void,
|
||||
@ -30,6 +32,7 @@ class CollectionNew extends React.Component<Props> {
|
||||
@observable description: string = "";
|
||||
@observable icon: string = "";
|
||||
@observable color: string = "#4E5C6E";
|
||||
@observable sharing: boolean = true;
|
||||
@observable private: boolean = false;
|
||||
@observable isSaving: boolean;
|
||||
hasOpenedIconPicker: boolean = false;
|
||||
@ -41,6 +44,7 @@ class CollectionNew extends React.Component<Props> {
|
||||
{
|
||||
name: this.name,
|
||||
description: this.description,
|
||||
sharing: this.sharing,
|
||||
icon: this.icon,
|
||||
color: this.color,
|
||||
private: this.private,
|
||||
@ -59,7 +63,7 @@ class CollectionNew extends React.Component<Props> {
|
||||
}
|
||||
};
|
||||
|
||||
handleNameChange = (ev: SyntheticInputEvent<*>) => {
|
||||
handleNameChange = (ev: SyntheticInputEvent<HTMLInputElement>) => {
|
||||
this.name = ev.target.value;
|
||||
|
||||
// If the user hasn't picked an icon yet, go ahead and suggest one based on
|
||||
@ -90,24 +94,31 @@ class CollectionNew extends React.Component<Props> {
|
||||
this.description = getValue();
|
||||
};
|
||||
|
||||
handlePrivateChange = (ev: SyntheticInputEvent<*>) => {
|
||||
handlePrivateChange = (ev: SyntheticInputEvent<HTMLInputElement>) => {
|
||||
this.private = ev.target.checked;
|
||||
};
|
||||
|
||||
handleSharingChange = (ev: SyntheticInputEvent<HTMLInputElement>) => {
|
||||
this.sharing = ev.target.checked;
|
||||
};
|
||||
|
||||
handleChange = (color: string, icon: string) => {
|
||||
this.color = color;
|
||||
this.icon = icon;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { t, auth } = this.props;
|
||||
const teamSharingEnabled = !!auth.team && auth.team.sharing;
|
||||
|
||||
return (
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<HelpText>
|
||||
{t(
|
||||
"Collections are for grouping your knowledge base. They work best when organized around a topic or internal team — Product or Engineering for example."
|
||||
)}
|
||||
<Trans>
|
||||
Collections are for grouping your knowledge base. They work best
|
||||
when organized around a topic or internal team — Product or
|
||||
Engineering for example.
|
||||
</Trans>
|
||||
</HelpText>
|
||||
<Flex>
|
||||
<Input
|
||||
@ -142,10 +153,25 @@ class CollectionNew extends React.Component<Props> {
|
||||
checked={this.private}
|
||||
/>
|
||||
<HelpText>
|
||||
{t(
|
||||
"A private collection will only be visible to invited team members."
|
||||
)}
|
||||
<Trans>
|
||||
A private collection will only be visible to invited team members.
|
||||
</Trans>
|
||||
</HelpText>
|
||||
{teamSharingEnabled && (
|
||||
<>
|
||||
<Switch
|
||||
id="sharing"
|
||||
label={t("Public document sharing")}
|
||||
onChange={this.handleSharingChange}
|
||||
checked={this.sharing}
|
||||
/>
|
||||
<HelpText>
|
||||
<Trans>
|
||||
When enabled, documents can be shared publicly on the internet.
|
||||
</Trans>
|
||||
</HelpText>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={this.isSaving || !this.name}>
|
||||
{this.isSaving ? `${t("Creating")}…` : t("Create")}
|
||||
@ -156,5 +182,5 @@ class CollectionNew extends React.Component<Props> {
|
||||
}
|
||||
|
||||
export default withTranslation()<CollectionNew>(
|
||||
inject("collections", "ui")(withRouter(CollectionNew))
|
||||
inject("collections", "ui", "auth")(withRouter(CollectionNew))
|
||||
);
|
||||
|
||||
@ -126,7 +126,7 @@ class Header extends React.Component<Props> {
|
||||
const isNew = document.isNew;
|
||||
const isTemplate = document.isTemplate;
|
||||
const can = policies.abilities(document.id);
|
||||
const canShareDocuments = auth.team && auth.team.sharing && can.share;
|
||||
const canShareDocument = auth.team && auth.team.sharing && can.share;
|
||||
const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
|
||||
const canEdit = can.update && !isEditing;
|
||||
|
||||
@ -200,7 +200,7 @@ class Header extends React.Component<Props> {
|
||||
<TemplatesMenu document={document} />
|
||||
</Action>
|
||||
)}
|
||||
{!isEditing && canShareDocuments && (
|
||||
{!isEditing && canShareDocument && (
|
||||
<Action>
|
||||
<Tooltip
|
||||
tooltip={
|
||||
|
||||
@ -4,12 +4,13 @@ import { observable } from "mobx";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { PlusIcon } from "outline-icons";
|
||||
import * as React from "react";
|
||||
import { withTranslation, type TFunction, Trans } from "react-i18next";
|
||||
import { type Match } from "react-router-dom";
|
||||
|
||||
import AuthStore from "stores/AuthStore";
|
||||
import PoliciesStore from "stores/PoliciesStore";
|
||||
import UsersStore from "stores/UsersStore";
|
||||
import Invite from "scenes/Invite";
|
||||
import Bubble from "components/Bubble";
|
||||
import Button from "components/Button";
|
||||
import CenteredContent from "components/CenteredContent";
|
||||
import Empty from "components/Empty";
|
||||
@ -27,12 +28,20 @@ type Props = {
|
||||
users: UsersStore,
|
||||
policies: PoliciesStore,
|
||||
match: Match,
|
||||
t: TFunction,
|
||||
};
|
||||
|
||||
@observer
|
||||
class People extends React.Component<Props> {
|
||||
@observable inviteModalOpen: boolean = false;
|
||||
|
||||
componentDidMount() {
|
||||
const { team } = this.props.auth;
|
||||
if (team) {
|
||||
this.props.users.fetchCounts(team.id);
|
||||
}
|
||||
}
|
||||
|
||||
handleInviteModalOpen = () => {
|
||||
this.inviteModalOpen = true;
|
||||
};
|
||||
@ -46,7 +55,7 @@ class People extends React.Component<Props> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { auth, policies, match } = this.props;
|
||||
const { auth, policies, match, t } = this.props;
|
||||
const { filter } = match.params;
|
||||
const currentUser = auth.user;
|
||||
const team = auth.team;
|
||||
@ -65,15 +74,18 @@ class People extends React.Component<Props> {
|
||||
}
|
||||
|
||||
const can = policies.abilities(team.id);
|
||||
const { counts } = this.props.users;
|
||||
|
||||
return (
|
||||
<CenteredContent>
|
||||
<PageTitle title="People" />
|
||||
<h1>People</h1>
|
||||
<PageTitle title={t("People")} />
|
||||
<h1>{t("People")}</h1>
|
||||
<HelpText>
|
||||
Everyone that has signed into Outline appears here. It’s possible that
|
||||
there are other users who have access through {team.signinMethods} but
|
||||
haven’t signed in yet.
|
||||
<Trans>
|
||||
Everyone that has signed into Outline appears here. It’s possible
|
||||
that there are other users who have access through{" "}
|
||||
{team.signinMethods} but haven’t signed in yet.
|
||||
</Trans>
|
||||
</HelpText>
|
||||
<Button
|
||||
type="button"
|
||||
@ -84,37 +96,36 @@ class People extends React.Component<Props> {
|
||||
icon={<PlusIcon />}
|
||||
neutral
|
||||
>
|
||||
Invite people…
|
||||
{t("Invite people")}…
|
||||
</Button>
|
||||
|
||||
<Tabs>
|
||||
<Tab to="/settings/people" exact>
|
||||
Active
|
||||
{t("Active")} <Bubble count={counts.active} />
|
||||
</Tab>
|
||||
<Tab to="/settings/people/admins" exact>
|
||||
Admins
|
||||
{t("Admins")} <Bubble count={counts.admins} />
|
||||
</Tab>
|
||||
{can.update && (
|
||||
<Tab to="/settings/people/suspended" exact>
|
||||
Suspended
|
||||
{t("Suspended")} <Bubble count={counts.suspended} />
|
||||
</Tab>
|
||||
)}
|
||||
<Tab to="/settings/people/all" exact>
|
||||
Everyone
|
||||
{t("Everyone")} <Bubble count={counts.all - counts.invited} />
|
||||
</Tab>
|
||||
|
||||
{can.invite && (
|
||||
<>
|
||||
<Separator />
|
||||
<Tab to="/settings/people/invited" exact>
|
||||
Invited
|
||||
{t("Invited")} <Bubble count={counts.invited} />
|
||||
</Tab>
|
||||
</>
|
||||
)}
|
||||
</Tabs>
|
||||
<PaginatedList
|
||||
items={users}
|
||||
empty={<Empty>No people to see here.</Empty>}
|
||||
empty={<Empty>{t("No people to see here.")}</Empty>}
|
||||
fetch={this.fetchPage}
|
||||
renderItem={(item) => (
|
||||
<UserListItem
|
||||
@ -126,7 +137,7 @@ class People extends React.Component<Props> {
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="Invite people"
|
||||
title={t("Invite people")}
|
||||
onRequestClose={this.handleInviteModalClose}
|
||||
isOpen={this.inviteModalOpen}
|
||||
>
|
||||
@ -137,4 +148,8 @@ class People extends React.Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
export default inject("auth", "users", "policies")(People);
|
||||
export default inject(
|
||||
"auth",
|
||||
"users",
|
||||
"policies"
|
||||
)(withTranslation()<People>(People));
|
||||
|
||||
@ -7,7 +7,7 @@ import BaseModel from "../models/BaseModel";
|
||||
import type { PaginationParams } from "types";
|
||||
import { client } from "utils/ApiClient";
|
||||
|
||||
type Action = "list" | "info" | "create" | "update" | "delete";
|
||||
type Action = "list" | "info" | "create" | "update" | "delete" | "count";
|
||||
|
||||
function modelNameFromClassName(string) {
|
||||
return string.charAt(0).toLowerCase() + string.slice(1);
|
||||
@ -24,7 +24,7 @@ export default class BaseStore<T: BaseModel> {
|
||||
model: Class<T>;
|
||||
modelName: string;
|
||||
rootStore: RootStore;
|
||||
actions: Action[] = ["list", "info", "create", "update", "delete"];
|
||||
actions: Action[] = ["list", "info", "create", "update", "delete", "count"];
|
||||
|
||||
constructor(rootStore: RootStore, model: Class<T>) {
|
||||
this.rootStore = rootStore;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
// @flow
|
||||
import invariant from "invariant";
|
||||
import { concat, filter, last } from "lodash";
|
||||
import { action, computed } from "mobx";
|
||||
|
||||
import { computed, action } from "mobx";
|
||||
import naturalSort from "shared/utils/naturalSort";
|
||||
import Collection from "models/Collection";
|
||||
import BaseStore from "./BaseStore";
|
||||
@ -104,6 +103,24 @@ export default class CollectionsStore extends BaseStore<Collection> {
|
||||
return res.data;
|
||||
};
|
||||
|
||||
async update(params: Object): Promise<Collection> {
|
||||
const result = await super.update(params);
|
||||
|
||||
// If we're changing sharing permissions on the collection then we need to
|
||||
// remove all locally cached policies for documents in the collection as they
|
||||
// are now invalid
|
||||
if (params.sharing !== undefined) {
|
||||
const collection = this.get(params.id);
|
||||
if (collection) {
|
||||
collection.documentIds.forEach((id) => {
|
||||
this.rootStore.policies.remove(id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
getPathForDocument(documentId: string): ?DocumentPath {
|
||||
return this.pathsToDocuments.find((path) => path.id === documentId);
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@ export default class DocumentsStore extends BaseStore<Document> {
|
||||
@observable movingDocumentId: ?string;
|
||||
|
||||
importFileTypes: string[] = [
|
||||
".md",
|
||||
"text/markdown",
|
||||
"text/plain",
|
||||
"text/html",
|
||||
|
||||
@ -21,7 +21,7 @@ class UiStore {
|
||||
@observable activeDocumentId: ?string;
|
||||
@observable activeCollectionId: ?string;
|
||||
@observable progressBarVisible: boolean = false;
|
||||
@observable editMode: boolean = false;
|
||||
@observable isEditing: boolean = false;
|
||||
@observable tocVisible: boolean = false;
|
||||
@observable mobileSidebarVisible: boolean = false;
|
||||
@observable sidebarWidth: number;
|
||||
@ -151,12 +151,12 @@ class UiStore {
|
||||
|
||||
@action
|
||||
enableEditMode = () => {
|
||||
this.editMode = true;
|
||||
this.isEditing = true;
|
||||
};
|
||||
|
||||
@action
|
||||
disableEditMode = () => {
|
||||
this.editMode = false;
|
||||
this.isEditing = false;
|
||||
};
|
||||
|
||||
@action
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
// @flow
|
||||
import invariant from "invariant";
|
||||
import { filter, orderBy } from "lodash";
|
||||
import { computed, action, runInAction } from "mobx";
|
||||
import { observable, computed, action, runInAction } from "mobx";
|
||||
import User from "models/User";
|
||||
import BaseStore from "./BaseStore";
|
||||
import RootStore from "./RootStore";
|
||||
import { client } from "utils/ApiClient";
|
||||
|
||||
export default class UsersStore extends BaseStore<User> {
|
||||
@observable counts: {
|
||||
active: number,
|
||||
admins: number,
|
||||
all: number,
|
||||
invited: number,
|
||||
suspended: number,
|
||||
} = {};
|
||||
|
||||
constructor(rootStore: RootStore) {
|
||||
super(rootStore, User);
|
||||
}
|
||||
@ -52,21 +60,25 @@ export default class UsersStore extends BaseStore<User> {
|
||||
|
||||
@action
|
||||
promote = (user: User) => {
|
||||
this.counts.admins += 1;
|
||||
return this.actionOnUser("promote", user);
|
||||
};
|
||||
|
||||
@action
|
||||
demote = (user: User) => {
|
||||
this.counts.admins -= 1;
|
||||
return this.actionOnUser("demote", user);
|
||||
};
|
||||
|
||||
@action
|
||||
suspend = (user: User) => {
|
||||
this.counts.suspended += 1;
|
||||
return this.actionOnUser("suspend", user);
|
||||
};
|
||||
|
||||
@action
|
||||
activate = (user: User) => {
|
||||
this.counts.suspended -= 1;
|
||||
return this.actionOnUser("activate", user);
|
||||
};
|
||||
|
||||
@ -76,10 +88,39 @@ export default class UsersStore extends BaseStore<User> {
|
||||
invariant(res && res.data, "Data should be available");
|
||||
runInAction(`invite`, () => {
|
||||
res.data.users.forEach(this.add);
|
||||
this.counts.invited += res.data.sent.length;
|
||||
this.counts.all += res.data.sent.length;
|
||||
});
|
||||
return res.data;
|
||||
};
|
||||
|
||||
@action
|
||||
fetchCounts = async (teamId: string): Promise<*> => {
|
||||
const res = await client.post(`/users.count`, { teamId });
|
||||
invariant(res && res.data, "Data should be available");
|
||||
|
||||
this.counts = res.data.counts;
|
||||
return res.data;
|
||||
};
|
||||
|
||||
@action
|
||||
async delete(user: User, options: Object = {}) {
|
||||
super.delete(user, options);
|
||||
if (!user.isSuspended && user.lastActiveAt) {
|
||||
this.counts.active -= 1;
|
||||
}
|
||||
if (user.isInvited) {
|
||||
this.counts.invited -= 1;
|
||||
}
|
||||
if (user.isAdmin) {
|
||||
this.counts.admins -= 1;
|
||||
}
|
||||
if (user.isSuspended) {
|
||||
this.counts.suspended -= 1;
|
||||
}
|
||||
this.counts.all -= 1;
|
||||
}
|
||||
|
||||
notInCollection = (collectionId: string, query: string = "") => {
|
||||
const memberships = filter(
|
||||
this.rootStore.memberships.orderedData,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// @flow
|
||||
import invariant from "invariant";
|
||||
import { map, trim } from "lodash";
|
||||
import { getCookie } from "tiny-cookie";
|
||||
import stores from "stores";
|
||||
import download from "./download";
|
||||
import {
|
||||
@ -18,6 +19,11 @@ type Options = {
|
||||
baseUrl?: string,
|
||||
};
|
||||
|
||||
// authorization cookie set by a Cloudflare Access proxy
|
||||
const CF_AUTHORIZATION = getCookie("CF_Authorization");
|
||||
// if the cookie is set, we must pass it with all ApiClient requests
|
||||
const CREDENTIALS = CF_AUTHORIZATION ? "same-origin" : "omit";
|
||||
|
||||
class ApiClient {
|
||||
baseUrl: string;
|
||||
userAgent: string;
|
||||
@ -91,7 +97,7 @@ class ApiClient {
|
||||
body,
|
||||
headers,
|
||||
redirect: "follow",
|
||||
credentials: "omit",
|
||||
credentials: CREDENTIALS,
|
||||
cache: "no-cache",
|
||||
});
|
||||
} catch (err) {
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
"react-waypoint": "^9.0.2",
|
||||
"react-window": "^1.8.6",
|
||||
"reakit": "^1.3.4",
|
||||
"rich-markdown-editor": "^11.1.6",
|
||||
"rich-markdown-editor": "^11.2.0-0",
|
||||
"semver": "^7.3.2",
|
||||
"sequelize": "^6.3.4",
|
||||
"sequelize-cli": "^6.2.0",
|
||||
|
||||
@ -35,6 +35,7 @@ router.post("collections.create", auth(), async (ctx) => {
|
||||
name,
|
||||
color,
|
||||
description,
|
||||
sharing,
|
||||
icon,
|
||||
sort = Collection.DEFAULT_SORT,
|
||||
} = ctx.body;
|
||||
@ -56,6 +57,7 @@ router.post("collections.create", auth(), async (ctx) => {
|
||||
teamId: user.teamId,
|
||||
createdById: user.id,
|
||||
private: isPrivate,
|
||||
sharing,
|
||||
sort,
|
||||
});
|
||||
|
||||
@ -491,7 +493,7 @@ router.post("collections.export_all", auth(), async (ctx) => {
|
||||
});
|
||||
|
||||
router.post("collections.update", auth(), async (ctx) => {
|
||||
let { id, name, description, icon, color, sort } = ctx.body;
|
||||
let { id, name, description, icon, color, sort, sharing } = ctx.body;
|
||||
const isPrivate = ctx.body.private;
|
||||
|
||||
if (color) {
|
||||
@ -537,6 +539,9 @@ router.post("collections.update", auth(), async (ctx) => {
|
||||
if (isPrivate !== undefined) {
|
||||
collection.private = isPrivate;
|
||||
}
|
||||
if (sharing !== undefined) {
|
||||
collection.sharing = sharing;
|
||||
}
|
||||
if (sort !== undefined) {
|
||||
collection.sort = sort;
|
||||
}
|
||||
|
||||
@ -897,6 +897,18 @@ describe("#collections.create", () => {
|
||||
expect(body.policies[0].abilities.export).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should allow setting sharing to false", async () => {
|
||||
const { user } = await seed();
|
||||
const res = await server.post("/api/collections.create", {
|
||||
body: { token: user.getJwtToken(), name: "Test", sharing: false },
|
||||
});
|
||||
const body = await res.json();
|
||||
|
||||
expect(res.status).toEqual(200);
|
||||
expect(body.data.id).toBeTruthy();
|
||||
expect(body.data.sharing).toBe(false);
|
||||
});
|
||||
|
||||
it("should return correct policies with private collection", async () => {
|
||||
const { user } = await seed();
|
||||
const res = await server.post("/api/collections.create", {
|
||||
|
||||
@ -489,6 +489,11 @@ async function loadDocument({ id, shareId, user }) {
|
||||
authorize(user, "read", document);
|
||||
}
|
||||
|
||||
const collection = await Collection.findByPk(document.collectionId);
|
||||
if (!collection.sharing) {
|
||||
throw new AuthorizationError();
|
||||
}
|
||||
|
||||
const team = await Team.findByPk(document.teamId);
|
||||
if (!team.sharing) {
|
||||
throw new AuthorizationError();
|
||||
|
||||
@ -112,6 +112,23 @@ describe("#documents.info", () => {
|
||||
expect(res.status).toEqual(403);
|
||||
});
|
||||
|
||||
it("should not return document from shareId if sharing is disabled for collection", async () => {
|
||||
const { document, collection, user } = await seed();
|
||||
const share = await buildShare({
|
||||
documentId: document.id,
|
||||
teamId: document.teamId,
|
||||
userId: user.id,
|
||||
});
|
||||
|
||||
collection.sharing = false;
|
||||
await collection.save();
|
||||
|
||||
const res = await server.post("/api/documents.info", {
|
||||
body: { shareId: share.id },
|
||||
});
|
||||
expect(res.status).toEqual(403);
|
||||
});
|
||||
|
||||
it("should not return document from revoked shareId", async () => {
|
||||
const { document, user } = await seed();
|
||||
const share = await buildShare({
|
||||
|
||||
@ -202,7 +202,7 @@ describe("#shares.create", () => {
|
||||
expect(body.data.id).toBe(share.id);
|
||||
});
|
||||
|
||||
it("should not allow creating a share record if disabled", async () => {
|
||||
it("should not allow creating a share record if team sharing disabled", async () => {
|
||||
const { user, document, team } = await seed();
|
||||
await team.update({ sharing: false });
|
||||
const res = await server.post("/api/shares.create", {
|
||||
@ -211,6 +211,15 @@ describe("#shares.create", () => {
|
||||
expect(res.status).toEqual(403);
|
||||
});
|
||||
|
||||
it("should not allow creating a share record if collection sharing disabled", async () => {
|
||||
const { user, collection, document } = await seed();
|
||||
await collection.update({ sharing: false });
|
||||
const res = await server.post("/api/shares.create", {
|
||||
body: { token: user.getJwtToken(), documentId: document.id },
|
||||
});
|
||||
expect(res.status).toEqual(403);
|
||||
});
|
||||
|
||||
it("should require authentication", async () => {
|
||||
const { document } = await seed();
|
||||
const res = await server.post("/api/shares.create", {
|
||||
|
||||
@ -55,6 +55,17 @@ router.post("users.list", auth(), pagination(), async (ctx) => {
|
||||
};
|
||||
});
|
||||
|
||||
router.post("users.count", auth(), async (ctx) => {
|
||||
const { user } = ctx.state;
|
||||
const counts = await User.getCounts(user.teamId);
|
||||
|
||||
ctx.body = {
|
||||
data: {
|
||||
counts,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
router.post("users.info", auth(), async (ctx) => {
|
||||
ctx.body = {
|
||||
data: presentUser(ctx.state.user),
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
import TestServer from "fetch-test-server";
|
||||
import app from "../app";
|
||||
|
||||
import { buildUser } from "../test/factories";
|
||||
import { buildTeam, buildUser } from "../test/factories";
|
||||
|
||||
import { flushdb, seed } from "../test/support";
|
||||
|
||||
const server = new TestServer(app.callback());
|
||||
@ -353,3 +354,75 @@ describe("#users.activate", () => {
|
||||
expect(body).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe("#users.count", () => {
|
||||
it("should count active users", async () => {
|
||||
const team = await buildTeam();
|
||||
const user = await buildUser({ teamId: team.id });
|
||||
const res = await server.post("/api/users.count", {
|
||||
body: { token: user.getJwtToken() },
|
||||
});
|
||||
const body = await res.json();
|
||||
|
||||
expect(res.status).toEqual(200);
|
||||
expect(body.data.counts.all).toEqual(1);
|
||||
expect(body.data.counts.admins).toEqual(0);
|
||||
expect(body.data.counts.invited).toEqual(0);
|
||||
expect(body.data.counts.suspended).toEqual(0);
|
||||
expect(body.data.counts.active).toEqual(1);
|
||||
});
|
||||
|
||||
it("should count admin users", async () => {
|
||||
const team = await buildTeam();
|
||||
const user = await buildUser({ teamId: team.id, isAdmin: true });
|
||||
const res = await server.post("/api/users.count", {
|
||||
body: { token: user.getJwtToken() },
|
||||
});
|
||||
const body = await res.json();
|
||||
|
||||
expect(res.status).toEqual(200);
|
||||
expect(body.data.counts.all).toEqual(1);
|
||||
expect(body.data.counts.admins).toEqual(1);
|
||||
expect(body.data.counts.invited).toEqual(0);
|
||||
expect(body.data.counts.suspended).toEqual(0);
|
||||
expect(body.data.counts.active).toEqual(1);
|
||||
});
|
||||
|
||||
it("should count suspended users", async () => {
|
||||
const team = await buildTeam();
|
||||
const user = await buildUser({ teamId: team.id });
|
||||
await buildUser({ teamId: team.id, suspendedAt: new Date() });
|
||||
const res = await server.post("/api/users.count", {
|
||||
body: { token: user.getJwtToken() },
|
||||
});
|
||||
const body = await res.json();
|
||||
|
||||
expect(res.status).toEqual(200);
|
||||
expect(body.data.counts.all).toEqual(2);
|
||||
expect(body.data.counts.admins).toEqual(0);
|
||||
expect(body.data.counts.invited).toEqual(0);
|
||||
expect(body.data.counts.suspended).toEqual(1);
|
||||
expect(body.data.counts.active).toEqual(1);
|
||||
});
|
||||
|
||||
it("should count invited users", async () => {
|
||||
const team = await buildTeam();
|
||||
const user = await buildUser({ teamId: team.id, lastActiveAt: null });
|
||||
const res = await server.post("/api/users.count", {
|
||||
body: { token: user.getJwtToken() },
|
||||
});
|
||||
const body = await res.json();
|
||||
|
||||
expect(res.status).toEqual(200);
|
||||
expect(body.data.counts.all).toEqual(1);
|
||||
expect(body.data.counts.admins).toEqual(0);
|
||||
expect(body.data.counts.invited).toEqual(1);
|
||||
expect(body.data.counts.suspended).toEqual(0);
|
||||
expect(body.data.counts.active).toEqual(0);
|
||||
});
|
||||
|
||||
it("should require authentication", async () => {
|
||||
const res = await server.post("/api/users.count");
|
||||
expect(res.status).toEqual(401);
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
module.exports = {
|
||||
up: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.addColumn('collections', 'sharing', {
|
||||
type: Sequelize.BOOLEAN,
|
||||
allowNull: false,
|
||||
defaultValue: true
|
||||
});
|
||||
},
|
||||
down: async (queryInterface, Sequelize) => {
|
||||
await queryInterface.removeColumn('collections', 'sharing');
|
||||
}
|
||||
}
|
||||
@ -24,6 +24,11 @@ const Collection = sequelize.define(
|
||||
private: DataTypes.BOOLEAN,
|
||||
maintainerApprovalRequired: DataTypes.BOOLEAN,
|
||||
documentStructure: DataTypes.JSONB,
|
||||
sharing: {
|
||||
type: DataTypes.BOOLEAN,
|
||||
allowNull: false,
|
||||
defaultValue: true,
|
||||
},
|
||||
sort: {
|
||||
type: DataTypes.JSONB,
|
||||
validate: {
|
||||
|
||||
@ -51,6 +51,9 @@ const User = sequelize.define(
|
||||
isSuspended() {
|
||||
return !!this.suspendedAt;
|
||||
},
|
||||
isInvited() {
|
||||
return !this.lastActiveAt;
|
||||
},
|
||||
avatarUrl() {
|
||||
const original = this.getDataValue("avatarUrl");
|
||||
if (original) {
|
||||
@ -267,4 +270,33 @@ User.afterCreate(async (user, options) => {
|
||||
]);
|
||||
});
|
||||
|
||||
User.getCounts = async function (teamId: string) {
|
||||
const countSql = `
|
||||
SELECT
|
||||
COUNT(CASE WHEN "suspendedAt" IS NOT NULL THEN 1 END) as "suspendedCount",
|
||||
COUNT(CASE WHEN "isAdmin" = true THEN 1 END) as "adminCount",
|
||||
COUNT(CASE WHEN "lastActiveAt" IS NULL THEN 1 END) as "invitedCount",
|
||||
COUNT(CASE WHEN "suspendedAt" IS NULL AND "lastActiveAt" IS NOT NULL THEN 1 END) as "activeCount",
|
||||
COUNT(*) as count
|
||||
FROM users
|
||||
WHERE "deletedAt" IS NULL
|
||||
AND "teamId" = :teamId
|
||||
`;
|
||||
const results = await sequelize.query(countSql, {
|
||||
type: sequelize.QueryTypes.SELECT,
|
||||
replacements: {
|
||||
teamId,
|
||||
},
|
||||
});
|
||||
const counts = results[0];
|
||||
|
||||
return {
|
||||
active: parseInt(counts.activeCount),
|
||||
admins: parseInt(counts.adminCount),
|
||||
all: parseInt(counts.count),
|
||||
invited: parseInt(counts.invitedCount),
|
||||
suspended: parseInt(counts.suspendedCount),
|
||||
};
|
||||
};
|
||||
|
||||
export default User;
|
||||
|
||||
@ -36,6 +36,29 @@ allow(User, ["read", "export"], Collection, (user, collection) => {
|
||||
return true;
|
||||
});
|
||||
|
||||
allow(User, "share", Collection, (user, collection) => {
|
||||
if (!collection || user.teamId !== collection.teamId) return false;
|
||||
if (!collection.sharing) return false;
|
||||
|
||||
if (collection.private) {
|
||||
invariant(
|
||||
collection.memberships,
|
||||
"membership should be preloaded, did you forget withMembership scope?"
|
||||
);
|
||||
|
||||
const allMemberships = concat(
|
||||
collection.memberships,
|
||||
collection.collectionGroupMemberships
|
||||
);
|
||||
|
||||
return some(allMemberships, (m) =>
|
||||
["read_write", "maintainer"].includes(m.permission)
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
allow(User, ["publish", "update"], Collection, (user, collection) => {
|
||||
if (!collection || user.teamId !== collection.teamId) return false;
|
||||
|
||||
|
||||
@ -31,12 +31,22 @@ allow(User, ["star", "unstar"], Document, (user, document) => {
|
||||
return user.teamId === document.teamId;
|
||||
});
|
||||
|
||||
allow(User, ["update", "share"], Document, (user, document) => {
|
||||
allow(User, "share", Document, (user, document) => {
|
||||
if (document.archivedAt) return false;
|
||||
if (document.deletedAt) return false;
|
||||
|
||||
// existence of collection option is not required here to account for share tokens
|
||||
if (document.collection && cannot(user, "update", document.collection)) {
|
||||
if (cannot(user, "share", document.collection)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return user.teamId === document.teamId;
|
||||
});
|
||||
|
||||
allow(User, "update", Document, (user, document) => {
|
||||
if (document.archivedAt) return false;
|
||||
if (document.deletedAt) return false;
|
||||
|
||||
if (cannot(user, "update", document.collection)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ export default function present(collection: Collection) {
|
||||
icon: collection.icon,
|
||||
color: collection.color || "#4E5C6E",
|
||||
private: collection.private,
|
||||
sharing: collection.sharing,
|
||||
createdAt: collection.createdAt,
|
||||
updatedAt: collection.updatedAt,
|
||||
deletedAt: collection.deletedAt,
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
href="/favicon-32.png"
|
||||
sizes="32x32"
|
||||
/>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
|
||||
<link
|
||||
rel="search"
|
||||
type="application/opensearchdescription+xml"
|
||||
|
||||
@ -86,8 +86,6 @@
|
||||
"Change Language": "Change Language",
|
||||
"Dismiss": "Dismiss",
|
||||
"Keyboard shortcuts": "Keyboard shortcuts",
|
||||
"Expand": "Expand",
|
||||
"Collapse": "Collapse",
|
||||
"New collection": "New collection",
|
||||
"Collections": "Collections",
|
||||
"Untitled": "Untitled",
|
||||
@ -110,7 +108,8 @@
|
||||
"Import / Export": "Import / Export",
|
||||
"Integrations": "Integrations",
|
||||
"Installation": "Installation",
|
||||
"Resize sidebar": "Resize sidebar",
|
||||
"Expand": "Expand",
|
||||
"Collapse": "Collapse",
|
||||
"Unstar": "Unstar",
|
||||
"Star": "Star",
|
||||
"Appearance": "Appearance",
|
||||
@ -131,10 +130,9 @@
|
||||
"New document": "New document",
|
||||
"Import document": "Import document",
|
||||
"Edit": "Edit",
|
||||
"Permissions": "Permissions",
|
||||
"Export": "Export",
|
||||
"Delete": "Delete",
|
||||
"Collection permissions": "Collection permissions",
|
||||
"Collection members": "Collection members",
|
||||
"Edit collection": "Edit collection",
|
||||
"Delete collection": "Delete collection",
|
||||
"Export collection": "Export collection",
|
||||
@ -211,6 +209,9 @@
|
||||
"Alphabetical": "Alphabetical",
|
||||
"Private collection": "Private collection",
|
||||
"A private collection will only be visible to invited team members.": "A private collection will only be visible to invited team members.",
|
||||
"Public document sharing": "Public document sharing",
|
||||
"When enabled, documents can be shared publicly on the internet.": "When enabled, documents can be shared publicly on the internet.",
|
||||
"Public sharing is currently disabled in the team security settings.": "Public sharing is currently disabled in the team security settings.",
|
||||
"Saving": "Saving",
|
||||
"Save": "Save",
|
||||
"{{ groupName }} was added to the collection": "{{ groupName }} was added to the collection",
|
||||
@ -231,6 +232,7 @@
|
||||
"No people left to add": "No people left to add",
|
||||
"Read only": "Read only",
|
||||
"Read & Edit": "Read & Edit",
|
||||
"Permissions": "Permissions",
|
||||
"Active <1></1> ago": "Active <1></1> ago",
|
||||
"Never signed in": "Never signed in",
|
||||
"Invited": "Invited",
|
||||
@ -319,6 +321,12 @@
|
||||
"Export Requested": "Export Requested",
|
||||
"Requesting Export": "Requesting Export",
|
||||
"Export Data": "Export Data",
|
||||
"Everyone that has signed into Outline appears here. It’s possible that there are other users who have access through {team.signinMethods} but haven’t signed in yet.": "Everyone that has signed into Outline appears here. It’s possible that there are other users who have access through {team.signinMethods} but haven’t signed in yet.",
|
||||
"Active": "Active",
|
||||
"Admins": "Admins",
|
||||
"Suspended": "Suspended",
|
||||
"Everyone": "Everyone",
|
||||
"No people to see here.": "No people to see here.",
|
||||
"Profile saved": "Profile saved",
|
||||
"Profile picture updated": "Profile picture updated",
|
||||
"Unable to upload new profile picture": "Unable to upload new profile picture",
|
||||
@ -336,7 +344,6 @@
|
||||
"You joined": "You joined",
|
||||
"Joined": "Joined",
|
||||
"{{ time }} ago.": "{{ time }} ago.",
|
||||
"Suspended": "Suspended",
|
||||
"Edit Profile": "Edit Profile",
|
||||
"{{ userName }} hasn’t updated any documents yet.": "{{ userName }} hasn’t updated any documents yet."
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user