Individual document sharing with permissions (#5814)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Tom Moor <tom@getoutline.com>

app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { CollectionPermission } from "@shared/types";
 import CollectionGroupMembership from "~/models/CollectionGroupMembership";
 import Group from "~/models/Group";
 import GroupListItem from "~/components/GroupListItem";
+import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import CollectionGroupMemberMenu from "~/menus/CollectionGroupMemberMenu";
-import InputMemberPermissionSelect from "./InputMemberPermissionSelect";
 
 type Props = {
   group: Group;
@@ -18,27 +19,41 @@ const CollectionGroupMemberListItem = ({
   collectionGroupMembership,
   onUpdate,
   onRemove,
-}: Props) => (
-  <GroupListItem
-    group={group}
-    showAvatar
-    renderActions={({ openMembersModal }) => (
-      <>
-        <InputMemberPermissionSelect
-          value={
-            collectionGroupMembership
-              ? collectionGroupMembership.permission
-              : undefined
-          }
-          onChange={onUpdate}
-        />
-        <CollectionGroupMemberMenu
-          onMembers={openMembersModal}
-          onRemove={onRemove}
-        />
-      </>
-    )}
-  />
-);
+}: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <GroupListItem
+      group={group}
+      showAvatar
+      renderActions={({ openMembersModal }) => (
+        <>
+          <InputMemberPermissionSelect
+            value={collectionGroupMembership?.permission}
+            onChange={onUpdate}
+            permissions={[
+              {
+                label: t("View only"),
+                value: CollectionPermission.Read,
+              },
+              {
+                label: t("Can edit"),
+                value: CollectionPermission.ReadWrite,
+              },
+              {
+                label: t("Admin"),
+                value: CollectionPermission.Admin,
+              },
+            ]}
+          />
+          <CollectionGroupMemberMenu
+            onMembers={openMembersModal}
+            onRemove={onRemove}
+          />
+        </>
+      )}
+    />
+  );
+};
 
 export default CollectionGroupMemberListItem;

app/scenes/CollectionPermissions/components/InputMemberPermissionSelect.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import { CollectionPermission } from "@shared/types";
-import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
-
-export default function InputMemberPermissionSelect(
-  props: Partial<SelectProps>
-) {
-  const { t } = useTranslation();
-
-  return (
-    <Select
-      label={t("Permissions")}
-      options={[
-        {
-          label: t("View only"),
-          value: CollectionPermission.Read,
-        },
-        {
-          label: t("View and edit"),
-          value: CollectionPermission.ReadWrite,
-        },
-        {
-          label: t("Admin"),
-          value: CollectionPermission.Admin,
-        },
-      ]}
-      ariaLabel={t("Permission")}
-      labelHidden
-      nude
-      {...props}
-    />
-  );
-}
-
-const Select = styled(InputSelect)`
-  margin: 0;
-  font-size: 14px;
-  border-color: transparent;
-  box-shadow: none;
-  color: ${s("textSecondary")};
-
-  select {
-    margin: 0;
-  }
-` as React.ComponentType<SelectProps>;

app/scenes/CollectionPermissions/components/MemberListItem.tsx

@@ -4,18 +4,19 @@ import { Trans, useTranslation } from "react-i18next";
 import { CollectionPermission } from "@shared/types";
 import Membership from "~/models/Membership";
 import User from "~/models/User";
+import UserMembership from "~/models/UserMembership";
 import Avatar from "~/components/Avatar";
 import Badge from "~/components/Badge";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import ListItem from "~/components/List/Item";
 import Time from "~/components/Time";
 import MemberMenu from "~/menus/MemberMenu";
-import InputMemberPermissionSelect from "./InputMemberPermissionSelect";
 
 type Props = {
   user: User;
-  membership?: Membership | undefined;
+  membership?: Membership | UserMembership | undefined;
   canEdit: boolean;
   onAdd?: () => void;
   onRemove?: () => void;
@@ -53,7 +54,21 @@ const MemberListItem = ({
         <Flex align="center" gap={8}>
           {onUpdate && (
             <InputMemberPermissionSelect
-              value={membership ? membership.permission : undefined}
+              permissions={[
+                {
+                  label: t("View only"),
+                  value: CollectionPermission.Read,
+                },
+                {
+                  label: t("Can edit"),
+                  value: CollectionPermission.ReadWrite,
+                },
+                {
+                  label: t("Admin"),
+                  value: CollectionPermission.Admin,
+                },
+              ]}
+              value={membership?.permission}
               onChange={onUpdate}
               disabled={!canEdit}
             />

app/scenes/Document/Shared.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
-import { RouteComponentProps, useLocation, Redirect } from "react-router-dom";
+import { RouteComponentProps, useLocation } from "react-router-dom";
 import styled, { ThemeProvider } from "styled-components";
 import { setCookie } from "tiny-cookie";
 import { s } from "@shared/styles";
@@ -19,7 +19,6 @@ import Text from "~/components/Text";
 import env from "~/env";
 import useBuildTheme from "~/hooks/useBuildTheme";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { AuthorizationError, OfflineError } from "~/utils/errors";
 import isCloudHosted from "~/utils/isCloudHosted";
@@ -102,7 +101,6 @@ function SharedDocumentScene(props: Props) {
   )
     ? (searchParams.get("theme") as Theme)
     : undefined;
-  const can = usePolicy(response?.document);
   const theme = useBuildTheme(response?.team?.customTheme, themeOverride);
 
   React.useEffect(() => {
@@ -167,10 +165,6 @@ function SharedDocumentScene(props: Props) {
     return <Loading location={props.location} />;
   }
 
-  if (response && searchParams.get("edit") === "true" && can.update) {
-    return <Redirect to={response.document.url} />;
-  }
-
   return (
     <>
       <Helmet>

app/scenes/Document/components/DocumentTitle.tsx

@@ -337,6 +337,7 @@ const Title = styled(ContentEditable)<TitleProps>`
   &::placeholder {
     color: ${s("placeholder")};
     -webkit-text-fill-color: ${s("placeholder")};
+    opacity: 1;
   }
 
   &:focus-within,

app/scenes/Document/components/Header.tsx

@@ -257,16 +257,11 @@ function DocumentHeader({
                 />
               </Action>
             )}
-            {!isEditing &&
-              !isDeleted &&
-              !isRevision &&
-              !isTemplate &&
-              !isMobile &&
-              document.collectionId && (
-                <Action>
-                  <ShareButton document={document} />
-                </Action>
-              )}
+            {!isEditing && !isRevision && !isMobile && can.update && (
+              <Action>
+                <ShareButton document={document} />
+              </Action>
+            )}
             {(isEditing || isTemplate) && (
               <Action>
                 <Tooltip
@@ -333,17 +328,19 @@ function DocumentHeader({
                 </Tooltip>
               </Action>
             )}
-            <Action>
-              <Button
-                action={publishDocument}
-                context={context}
-                disabled={publishingIsDisabled}
-                hideOnActionDisabled
-                hideIcon
-              >
-                {document.collectionId ? t("Publish") : `${t("Publish")}…`}
-              </Button>
-            </Action>
+            {can.publish && (
+              <Action>
+                <Button
+                  action={publishDocument}
+                  context={context}
+                  disabled={publishingIsDisabled}
+                  hideOnActionDisabled
+                  hideIcon
+                >
+                  {document.collectionId ? t("Publish") : `${t("Publish")}…`}
+                </Button>
+              </Action>
+            )}
             {!isDeleted && <Separator />}
             <Action>
               <DocumentMenu

app/scenes/Document/components/ShareButton.tsx

@@ -1,15 +1,14 @@
 import { observer } from "mobx-react";
 import { GlobeIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
 import Button from "~/components/Button";
 import Popover from "~/components/Popover";
-import Tooltip from "~/components/Tooltip";
+import SharePopover from "~/components/Sharing";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
-import SharePopover from "./SharePopover";
 
 type Props = {
   document: Document;
@@ -23,7 +22,8 @@ function ShareButton({ document }: Props) {
   const sharedParent = shares.getByDocumentParents(document.id);
   const domain = share?.domain || sharedParent?.domain;
   const isPubliclyShared =
-    team.sharing &&
+    team.sharing !== false &&
+    document.collection?.sharing !== false &&
     (share?.published || (sharedParent?.published && !document.isDraft));
 
   const popover = usePopoverState({
@@ -36,32 +36,17 @@ function ShareButton({ document }: Props) {
     <>
       <PopoverDisclosure {...popover}>
         {(props) => (
-          <Tooltip
-            tooltip={
-              isPubliclyShared ? (
-                <Trans>
-                  Anyone with the link <br />
-                  can view this document
-                </Trans>
-              ) : (
-                ""
-              )
-            }
-            delay={500}
-            placement="bottom"
+          <Button
+            icon={isPubliclyShared ? <GlobeIcon /> : undefined}
+            neutral
+            {...props}
           >
-            <Button
-              icon={isPubliclyShared ? <GlobeIcon /> : undefined}
-              neutral
-              {...props}
-            >
-              {t("Share")} {domain && <>&middot; {domain}</>}
-            </Button>
-          </Tooltip>
+            {t("Share")} {domain && <>&middot; {domain}</>}
+          </Button>
         )}
       </PopoverDisclosure>
 
-      <Popover {...popover} aria-label={t("Share")}>
+      <Popover {...popover} aria-label={t("Share")} width={400}>
         <SharePopover
           document={document}
           share={share}

app/scenes/Document/components/SharePopover.tsx

@@ -1,405 +0,0 @@
-import invariant from "invariant";
-import debounce from "lodash/debounce";
-import isEmpty from "lodash/isEmpty";
-import { observer } from "mobx-react";
-import { ExpandedIcon, GlobeIcon, PadlockIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { Link } from "react-router-dom";
-import { toast } from "sonner";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import { dateLocale, dateToRelative } from "@shared/utils/date";
-import { SHARE_URL_SLUG_REGEX } from "@shared/utils/urlHelpers";
-import Document from "~/models/Document";
-import Share from "~/models/Share";
-import Button from "~/components/Button";
-import CopyToClipboard from "~/components/CopyToClipboard";
-import Flex from "~/components/Flex";
-import Input, { StyledText } from "~/components/Input";
-import Notice from "~/components/Notice";
-import Switch from "~/components/Switch";
-import Text from "~/components/Text";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useKeyDown from "~/hooks/useKeyDown";
-import usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
-import useUserLocale from "~/hooks/useUserLocale";
-
-type Props = {
-  /** The document to share. */
-  document: Document;
-  /** The existing share model, if any. */
-  share: Share | null | undefined;
-  /** The existing share parent model, if any. */
-  sharedParent: Share | null | undefined;
-  /** Whether to hide the title. */
-  hideTitle?: boolean;
-  /** Callback fired when the popover requests to be closed. */
-  onRequestClose: () => void;
-  /** Whether the popover is visible. */
-  visible: boolean;
-};
-
-function SharePopover({
-  document,
-  share,
-  sharedParent,
-  hideTitle,
-  onRequestClose,
-  visible,
-}: Props) {
-  const team = useCurrentTeam();
-  const { t } = useTranslation();
-  const { shares, collections } = useStores();
-  const [expandedOptions, setExpandedOptions] = React.useState(false);
-  const [isEditMode, setIsEditMode] = React.useState(false);
-  const [slugValidationError, setSlugValidationError] = React.useState("");
-  const [urlSlug, setUrlSlug] = React.useState("");
-  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const can = usePolicy(share);
-  const documentAbilities = usePolicy(document);
-  const collection = document.collectionId
-    ? collections.get(document.collectionId)
-    : undefined;
-  const canPublish =
-    can.update &&
-    !document.isTemplate &&
-    team.sharing &&
-    collection?.sharing &&
-    documentAbilities.share;
-  const isPubliclyShared =
-    team.sharing &&
-    ((share && share.published) ||
-      (sharedParent && sharedParent.published && !document.isDraft));
-
-  React.useEffect(() => {
-    if (!visible && expandedOptions) {
-      setExpandedOptions(false);
-    }
-  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
-  useKeyDown("Escape", onRequestClose);
-
-  React.useEffect(() => {
-    if (visible) {
-      void document.share();
-      buttonRef.current?.focus();
-    }
-
-    return () => (timeout.current ? clearTimeout(timeout.current) : undefined);
-  }, [document, visible]);
-
-  React.useEffect(() => {
-    if (!visible) {
-      setUrlSlug(share?.urlId || "");
-      setSlugValidationError("");
-    }
-  }, [share, visible]);
-
-  const handlePublishedChange = React.useCallback(
-    async (event) => {
-      const share = shares.getByDocumentId(document.id);
-      invariant(share, "Share must exist");
-
-      try {
-        await share.save({
-          published: event.currentTarget.checked,
-        });
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [document.id, shares]
-  );
-
-  const handleChildDocumentsChange = React.useCallback(
-    async (event) => {
-      const share = shares.getByDocumentId(document.id);
-      invariant(share, "Share must exist");
-
-      try {
-        await share.save({
-          includeChildDocuments: event.currentTarget.checked,
-        });
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [document.id, shares]
-  );
-
-  const handleCopied = React.useCallback(() => {
-    timeout.current = setTimeout(() => {
-      onRequestClose();
-      toast.message(t("Share link copied"));
-    }, 250);
-  }, [t, onRequestClose]);
-
-  const handleUrlSlugChange = React.useMemo(
-    () =>
-      debounce(async (ev) => {
-        const share = shares.getByDocumentId(document.id);
-        invariant(share, "Share must exist");
-
-        const val = ev.target.value;
-        setUrlSlug(val);
-        if (val && !SHARE_URL_SLUG_REGEX.test(val)) {
-          setSlugValidationError(
-            t("Only lowercase letters, digits and dashes allowed")
-          );
-        } else {
-          setSlugValidationError("");
-          if (share.urlId !== val) {
-            try {
-              await share.save({
-                urlId: isEmpty(val) ? null : val,
-              });
-            } catch (err) {
-              if (err.message.includes("must be unique")) {
-                setSlugValidationError(
-                  t("Sorry, this link has already been used")
-                );
-              }
-            }
-          }
-        }
-      }, 500),
-    [t, document.id, shares]
-  );
-
-  const PublishToInternet = ({ canPublish }: { canPublish: boolean }) => {
-    if (!canPublish) {
-      return (
-        <Text type="secondary">
-          {t("Only members with permission can view")}
-        </Text>
-      );
-    }
-    return (
-      <SwitchWrapper>
-        <Switch
-          id="published"
-          label={t("Publish to internet")}
-          onChange={handlePublishedChange}
-          checked={share ? share.published : false}
-          disabled={!share}
-        />
-        <SwitchLabel>
-          <SwitchText>
-            {share?.published
-              ? t("Anyone with the link can view this document")
-              : t("Only members with permission can view")}
-            {share?.lastAccessedAt && (
-              <>
-                .{" "}
-                {t("The shared link was last accessed {{ timeAgo }}.", {
-                  timeAgo: dateToRelative(Date.parse(share?.lastAccessedAt), {
-                    addSuffix: true,
-                    locale,
-                  }),
-                })}
-              </>
-            )}
-          </SwitchText>
-        </SwitchLabel>
-      </SwitchWrapper>
-    );
-  };
-
-  const userLocale = useUserLocale();
-  const locale = userLocale ? dateLocale(userLocale) : undefined;
-  let shareUrl = sharedParent?.url
-    ? `${sharedParent.url}${document.url}`
-    : share?.url ?? "";
-  if (isEditMode) {
-    shareUrl += "?edit=true";
-  }
-
-  const url = shareUrl.replace(/https?:\/\//, "");
-  const documentTitle = sharedParent?.documentTitle;
-
-  return (
-    <>
-      {!hideTitle && (
-        <Heading>
-          {isPubliclyShared ? (
-            <GlobeIcon size={28} />
-          ) : (
-            <PadlockIcon size={28} />
-          )}
-          <span>{t("Share this document")}</span>
-        </Heading>
-      )}
-
-      {sharedParent && !document.isDraft && (
-        <NoticeWrapper>
-          <Notice>
-            <Trans>
-              This document is shared because the parent{" "}
-              <StyledLink to={`/doc/${sharedParent.documentId}`}>
-                {documentTitle}
-              </StyledLink>{" "}
-              is publicly shared.
-            </Trans>
-          </Notice>
-        </NoticeWrapper>
-      )}
-
-      {canPublish && !sharedParent?.published && (
-        <PublishToInternet canPublish />
-      )}
-
-      {canPublish && share?.published && !document.isDraft && (
-        <SwitchWrapper>
-          <Switch
-            id="includeChildDocuments"
-            label={t("Share nested documents")}
-            onChange={handleChildDocumentsChange}
-            checked={share ? share.includeChildDocuments : false}
-            disabled={!share}
-          />
-          <SwitchLabel>
-            <SwitchText>
-              {share.includeChildDocuments
-                ? t("Nested documents are publicly available")
-                : t("Nested documents are not shared")}
-              .
-            </SwitchText>
-          </SwitchLabel>
-        </SwitchWrapper>
-      )}
-
-      {expandedOptions && (
-        <>
-          {canPublish && sharedParent?.published && (
-            <>
-              <Separator />
-              <PublishToInternet canPublish />
-            </>
-          )}
-          <Separator />
-          <SwitchWrapper>
-            <Switch
-              id="enableEditMode"
-              label={t("Automatically redirect to the editor")}
-              onChange={({ currentTarget: { checked } }) =>
-                setIsEditMode(checked)
-              }
-              checked={isEditMode}
-              disabled={!share}
-            />
-            <SwitchLabel>
-              <SwitchText>
-                {isEditMode
-                  ? t(
-                      "Users with edit permission will be redirected to the main app"
-                    )
-                  : t("All users see the same publicly shared view")}
-                .
-              </SwitchText>
-            </SwitchLabel>
-          </SwitchWrapper>
-          <Separator />
-          <SwitchWrapper>
-            <Input
-              type="text"
-              label={t("Custom link")}
-              placeholder="a-unique-link"
-              onChange={handleUrlSlugChange}
-              error={slugValidationError}
-              defaultValue={urlSlug}
-            />
-            {!slugValidationError && urlSlug && (
-              <DocumentLinkPreview type="secondary">
-                <Trans>
-                  The document will be accessible at{" "}
-                  <a href={shareUrl} target="_blank" rel="noopener noreferrer">
-                    {{ url }}
-                  </a>
-                </Trans>
-              </DocumentLinkPreview>
-            )}
-          </SwitchWrapper>
-        </>
-      )}
-
-      <Flex justify="space-between" style={{ marginBottom: 8 }}>
-        {expandedOptions || !canPublish ? (
-          <span />
-        ) : (
-          <MoreOptionsButton
-            icon={<ExpandedIcon />}
-            onClick={() => setExpandedOptions(true)}
-            neutral
-            borderOnHover
-          >
-            {t("More options")}
-          </MoreOptionsButton>
-        )}
-        <CopyToClipboard text={shareUrl} onCopy={handleCopied}>
-          <Button
-            type="submit"
-            disabled={!share || slugValidationError}
-            ref={buttonRef}
-          >
-            {t("Copy link")}
-          </Button>
-        </CopyToClipboard>
-      </Flex>
-    </>
-  );
-}
-
-const StyledLink = styled(Link)`
-  color: ${s("textSecondary")};
-  text-decoration: underline;
-`;
-
-const Heading = styled.h2`
-  display: flex;
-  align-items: center;
-  margin-top: 12px;
-  gap: 8px;
-
-  /* accounts for icon padding */
-  margin-left: -4px;
-`;
-
-const SwitchWrapper = styled.div`
-  margin: 20px 0;
-`;
-
-const NoticeWrapper = styled.div`
-  margin: 20px 0;
-`;
-
-const MoreOptionsButton = styled(Button)`
-  background: none;
-  font-size: 14px;
-  color: ${s("textTertiary")};
-  margin-left: -8px;
-`;
-
-const Separator = styled.div`
-  height: 1px;
-  width: 100%;
-  background-color: ${s("divider")};
-`;
-
-const SwitchLabel = styled(Flex)`
-  svg {
-    flex-shrink: 0;
-  }
-`;
-
-const SwitchText = styled(Text)`
-  margin: 0;
-  font-size: 15px;
-`;
-
-const DocumentLinkPreview = styled(StyledText)`
-  margin-top: -12px;
-`;
-
-export default observer(SharePopover);