feat: Share flyover (#2065)

* feat: Implement share as flyover instead of modal

* refactor

* i18n

app/menus/DocumentMenu.js

@@ -9,7 +9,6 @@ import styled from "styled-components";
 import Document from "models/Document";
 import DocumentDelete from "scenes/DocumentDelete";
 import DocumentMove from "scenes/DocumentMove";
-import DocumentShare from "scenes/DocumentShare";
 import DocumentTemplatize from "scenes/DocumentTemplatize";
 import CollectionIcon from "components/CollectionIcon";
 import ContextMenu from "components/ContextMenu";
@@ -17,7 +16,6 @@ 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 getDataTransferFiles from "utils/getDataTransferFiles";
 import {
@@ -52,7 +50,6 @@ function DocumentMenu({
   onOpen,
   onClose,
 }: Props) {
-  const team = useCurrentTeam();
   const { policies, collections, ui, documents } = useStores();
   const menu = useMenuState({
     modal,
@@ -66,7 +63,6 @@ function DocumentMenu({
   const [showDeleteModal, setShowDeleteModal] = React.useState(false);
   const [showMoveModal, setShowMoveModal] = React.useState(false);
   const [showTemplateModal, setShowTemplateModal] = React.useState(false);
-  const [showShareModal, setShowShareModal] = React.useState(false);
   const file = React.useRef<?HTMLInputElement>();
 
   const handleOpen = React.useCallback(() => {
@@ -133,17 +129,8 @@ function DocumentMenu({
     [document]
   );
 
-  const handleShareLink = React.useCallback(
-    async (ev: SyntheticEvent<>) => {
-      await document.share();
-      setShowShareModal(true);
-    },
-    [document]
-  );
-
   const collection = collections.get(document.collectionId);
   const can = policies.abilities(document.id);
-  const canShareDocuments = !!(can.share && team.sharing);
   const canViewHistory = can.read && !can.restore;
 
   const stopPropagation = React.useCallback((ev: SyntheticEvent<>) => {
@@ -290,11 +277,6 @@ function DocumentMenu({
               onClick: handleStar,
               visible: !document.isStarred && !!can.star,
             },
-            {
-              title: `${t("Share link")}…`,
-              onClick: handleShareLink,
-              visible: canShareDocuments,
-            },
             {
               title: t("Enable embeds"),
               onClick: document.enableEmbeds,
@@ -414,16 +396,6 @@ function DocumentMenu({
               onSubmit={() => setShowTemplateModal(false)}
             />
           </Modal>
-          <Modal
-            title={t("Share document")}
-            onRequestClose={() => setShowShareModal(false)}
-            isOpen={showShareModal}
-          >
-            <DocumentShare
-              document={document}
-              onSubmit={() => setShowShareModal(false)}
-            />
-          </Modal>
         </>
       )}
     </>

app/scenes/Document/components/Header.js

@@ -3,16 +3,14 @@ import { observer } from "mobx-react";
 import {
   TableOfContentsIcon,
   EditIcon,
-  GlobeIcon,
   PlusIcon,
   MoreIcon,
 } from "outline-icons";
 import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Document from "models/Document";
-import DocumentShare from "scenes/DocumentShare";
 import { Action, Separator } from "components/Actions";
 import Badge from "components/Badge";
 import Breadcrumb, { Slash } from "components/Breadcrumb";
@@ -20,8 +18,8 @@ import Button from "components/Button";
 import Collaborators from "components/Collaborators";
 import Fade from "components/Fade";
 import Header from "components/Header";
-import Modal from "components/Modal";
 import Tooltip from "components/Tooltip";
+import ShareButton from "./ShareButton";
 import useMobile from "hooks/useMobile";
 import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
@@ -61,9 +59,8 @@ function DocumentHeader({
   onSave,
 }: Props) {
   const { t } = useTranslation();
-  const { auth, ui, shares, policies } = useStores();
+  const { auth, ui, policies } = useStores();
   const isMobile = useMobile();
-  const [showShareModal, setShowShareModal] = React.useState(false);
 
   const handleSave = React.useCallback(() => {
     onSave({ done: true });
@@ -73,21 +70,6 @@ function DocumentHeader({
     onSave({ done: true, publish: true });
   }, [onSave]);
 
-  const handleShareLink = React.useCallback(
-    async (ev: SyntheticEvent<>) => {
-      await document.share();
-
-      setShowShareModal(true);
-    },
-    [document]
-  );
-
-  const handleCloseShareModal = React.useCallback(() => {
-    setShowShareModal(false);
-  }, []);
-
-  const share = shares.getByDocumentId(document.id);
-  const isPubliclyShared = share && share.published;
   const isNew = document.isNew;
   const isTemplate = document.isTemplate;
   const can = policies.abilities(document.id);
@@ -146,13 +128,6 @@ function DocumentHeader({
 
   return (
     <>
-      <Modal
-        isOpen={showShareModal}
-        onRequestClose={handleCloseShareModal}
-        title={t("Share document")}
-      >
-        <DocumentShare document={document} onSubmit={handleCloseShareModal} />
-      </Modal>
       <Header
         breadcrumb={
           <Breadcrumb document={document}>
@@ -186,28 +161,7 @@ function DocumentHeader({
             )}
             {!isEditing && canShareDocument && (!isMobile || !isTemplate) && (
               <Action>
-                <Tooltip
+                <ShareButton document={document} />
-                  tooltip={
-                    isPubliclyShared ? (
-                      <Trans>
-                        Anyone with the link <br />
-                        can view this document
-                      </Trans>
-                    ) : (
-                      ""
-                    )
-                  }
-                  delay={500}
-                  placement="bottom"
-                >
-                  <Button
-                    icon={isPubliclyShared ? <GlobeIcon /> : undefined}
-                    onClick={handleShareLink}
-                    neutral
-                  >
-                    {t("Share")}
-                  </Button>
-                </Tooltip>
               </Action>
             )}
             {isEditing && (

app/scenes/Document/components/ShareButton.js

@@ -0,0 +1,82 @@
+// @flow
+import { observer } from "mobx-react";
+import { GlobeIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { usePopoverState, Popover, PopoverDisclosure } from "reakit/Popover";
+import styled from "styled-components";
+import { fadeAndScaleIn } from "shared/styles/animations";
+import Document from "models/Document";
+import Button from "components/Button";
+import Tooltip from "components/Tooltip";
+import SharePopover from "./SharePopover";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  document: Document,
+|};
+
+function ShareButton({ document }: Props) {
+  const { t } = useTranslation();
+  const { shares } = useStores();
+  const share = shares.getByDocumentId(document.id);
+  const isPubliclyShared = share && share.published;
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom-end",
+  });
+
+  return (
+    <>
+      <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}
+            >
+              {t("Share")}
+            </Button>
+          </Tooltip>
+        )}
+      </PopoverDisclosure>
+      <Popover {...popover} aria-label={t("Share")}>
+        <Contents>
+          <SharePopover
+            document={document}
+            share={share}
+            onSubmit={popover.hide}
+          />
+        </Contents>
+      </Popover>
+    </>
+  );
+}
+
+const Contents = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
+  transform-origin: 75% 0;
+  background: ${(props) => props.theme.menuBackground};
+  border-radius: 6px;
+  padding: 24px 24px 12px;
+  width: 380px;
+  box-shadow: ${(props) => props.theme.menuShadow};
+  border: ${(props) =>
+    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
+`;
+
+export default observer(ShareButton);

app/scenes/Document/components/SharePopover.js

@@ -0,0 +1,155 @@
+// @flow
+import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import invariant from "invariant";
+import { observer } from "mobx-react";
+import { GlobeIcon, PadlockIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+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 HelpText from "components/HelpText";
+import Input from "components/Input";
+import Switch from "components/Switch";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  document: Document,
+  share: Share,
+  onSubmit: () => void,
+|};
+
+function DocumentShare({ document, share, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { policies, shares, ui } = useStores();
+  const [isCopied, setIsCopied] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+  const timeout = React.useRef<?TimeoutID>();
+  const can = policies.abilities(share ? share.id : "");
+  const canPublish = can.update && !document.isTemplate;
+
+  React.useEffect(() => {
+    document.share();
+    return () => clearTimeout(timeout.current);
+  }, [document]);
+
+  const handlePublishedChange = React.useCallback(
+    async (event) => {
+      const share = shares.getByDocumentId(document.id);
+      invariant(share, "Share must exist");
+
+      setIsSaving(true);
+
+      try {
+        await share.save({ published: event.currentTarget.checked });
+      } catch (err) {
+        ui.showToast(err.message, { type: "error" });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [document.id, shares, ui]
+  );
+
+  const handleCopied = React.useCallback(() => {
+    setIsCopied(true);
+
+    timeout.current = setTimeout(() => {
+      setIsCopied(false);
+      onSubmit();
+
+      ui.showToast(t("Share link copied"), { type: "info" });
+    }, 250);
+  }, [t, onSubmit, ui]);
+
+  return (
+    <>
+      <Heading>
+        {share && share.published ? (
+          <GlobeIcon size={28} color="currentColor" />
+        ) : (
+          <PadlockIcon size={28} color="currentColor" />
+        )}{" "}
+        {t("Share this document")}
+      </Heading>
+
+      {canPublish && (
+        <PrivacySwitch>
+          <Switch
+            id="published"
+            label={t("Publish to internet")}
+            onChange={handlePublishedChange}
+            checked={share ? share.published : false}
+            disabled={!share || isSaving}
+          />
+          <Privacy>
+            <PrivacyText>
+              {share.published
+                ? t("Anyone with the link can view this document")
+                : t("Only team members with access can view")}
+              {share.lastAccessedAt && (
+                <>
+                  .{" "}
+                  {t("The shared link was last accessed {{ timeAgo }}.", {
+                    timeAgo: distanceInWordsToNow(share.lastAccessedAt, {
+                      addSuffix: true,
+                    }),
+                  })}
+                </>
+              )}
+            </PrivacyText>
+          </Privacy>
+        </PrivacySwitch>
+      )}
+      <Flex>
+        <InputLink
+          type="text"
+          label={t("Link")}
+          placeholder={`${t("Loading")}…`}
+          value={share ? share.url : undefined}
+          labelHidden
+          readOnly
+        />
+        <CopyToClipboard text={share ? share.url : ""} onCopy={handleCopied}>
+          <Button type="submit" disabled={isCopied || !share} primary>
+            {t("Copy link")}
+          </Button>
+        </CopyToClipboard>
+      </Flex>
+    </>
+  );
+}
+
+const Heading = styled.h2`
+  display: flex;
+  align-items: center;
+  margin-top: 0;
+  margin-left: -4px;
+`;
+
+const PrivacySwitch = styled.div`
+  margin: 20px 0;
+`;
+
+const InputLink = styled(Input)`
+  flex-grow: 1;
+  margin-right: 8px;
+`;
+
+const Privacy = styled(Flex)`
+  flex-align: center;
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const PrivacyText = styled(HelpText)`
+  margin: 0;
+  font-size: 15px;
+`;
+
+export default observer(DocumentShare);

app/scenes/DocumentShare.js

@@ -1,137 +0,0 @@
-// @flow
-import invariant from "invariant";
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
-import { GlobeIcon, PadlockIcon } from "outline-icons";
-import * as React from "react";
-import { Link } from "react-router-dom";
-import styled from "styled-components";
-import PoliciesStore from "stores/PoliciesStore";
-import SharesStore from "stores/SharesStore";
-import UiStore from "stores/UiStore";
-import Document from "models/Document";
-import Button from "components/Button";
-import CopyToClipboard from "components/CopyToClipboard";
-import Flex from "components/Flex";
-import HelpText from "components/HelpText";
-import Input from "components/Input";
-import Switch from "components/Switch";
-
-type Props = {
-  document: Document,
-  shares: SharesStore,
-  ui: UiStore,
-  policies: PoliciesStore,
-  onSubmit: () => void,
-};
-
-@observer
-class DocumentShare extends React.Component<Props> {
-  @observable isCopied: boolean;
-  @observable isSaving: boolean = false;
-  timeout: TimeoutID;
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
-
-  handlePublishedChange = async (event) => {
-    const { document, shares } = this.props;
-    const share = shares.getByDocumentId(document.id);
-    invariant(share, "Share must exist");
-
-    this.isSaving = true;
-
-    try {
-      await share.save({ published: event.currentTarget.checked });
-    } catch (err) {
-      this.props.ui.showToast(err.message, { type: "error" });
-    } finally {
-      this.isSaving = false;
-    }
-  };
-
-  handleCopied = () => {
-    this.isCopied = true;
-
-    this.timeout = setTimeout(() => {
-      this.isCopied = false;
-      this.props.onSubmit();
-    }, 1500);
-  };
-
-  render() {
-    const { document, policies, shares, onSubmit } = this.props;
-    const share = shares.getByDocumentId(document.id);
-    const can = policies.abilities(share ? share.id : "");
-    const canPublish = can.update && !document.isTemplate;
-
-    return (
-      <div>
-        <HelpText>
-          The link below provides a read-only version of the document{" "}
-          <strong>{document.titleWithDefault}</strong>.{" "}
-          {canPublish
-            ? "You can optionally make it accessible to anyone with the link."
-            : "It is only viewable by those that already have access to the collection."}{" "}
-          <Link to="/settings/shares" onClick={onSubmit}>
-            Manage all share links
-          </Link>
-          .
-        </HelpText>
-        {canPublish && (
-          <>
-            <Switch
-              id="published"
-              label="Publish to internet"
-              onChange={this.handlePublishedChange}
-              checked={share ? share.published : false}
-              disabled={!share || this.isSaving}
-            />
-            <Privacy>
-              {share.published ? <GlobeIcon /> : <PadlockIcon />}
-              <PrivacyText>
-                {share.published
-                  ? "Anyone with the link can view this document"
-                  : "Only team members with access can view this document"}
-              </PrivacyText>
-            </Privacy>
-          </>
-        )}
-        <br />
-        <Input
-          type="text"
-          label="Get link"
-          value={share ? share.url : "Loading…"}
-          labelHidden
-          readOnly
-        />
-        <CopyToClipboard
-          text={share ? share.url : ""}
-          onCopy={this.handleCopied}
-        >
-          <Button type="submit" disabled={this.isCopied || !share} primary>
-            {this.isCopied ? "Copied!" : "Copy Link"}
-          </Button>
-        </CopyToClipboard>
-        &nbsp;&nbsp;&nbsp;
-        <a href={share.url} target="_blank" rel="noreferrer">
-          Preview
-        </a>
-      </div>
-    );
-  }
-}
-
-const Privacy = styled(Flex)`
-  flex-align: center;
-  margin-left: -4px;
-`;
-
-const PrivacyText = styled(HelpText)`
-  margin: 0;
-  margin-left: 2px;
-  font-size: 15px;
-`;
-
-export default inject("shares", "ui", "policies")(DocumentShare);

shared/i18n/locales/en_US/translation.json

@@ -159,7 +159,6 @@
   "Choose a collection": "Choose a collection",
   "Unpin": "Unpin",
   "Pin to collection": "Pin to collection",
-  "Share link": "Share link",
   "Enable embeds": "Enable embeds",
   "Disable embeds": "Disable embeds",
   "New nested document": "New nested document",
@@ -172,7 +171,6 @@
   "Print": "Print",
   "Move {{ documentName }}": "Move {{ documentName }}",
   "Delete {{ documentName }}": "Delete {{ documentName }}",
-  "Share document": "Share document",
   "Edit group": "Edit group",
   "Delete group": "Delete group",
   "Group options": "Group options",
@@ -272,13 +270,18 @@
   "Show contents": "Show contents",
   "Edit {{noun}}": "Edit {{noun}}",
   "Archived": "Archived",
-  "Anyone with the link <1></1>can view this document": "Anyone with the link <1></1>can view this document",
-  "Share": "Share",
   "Save Draft": "Save Draft",
   "Done Editing": "Done Editing",
   "New from template": "New from template",
   "Publish": "Publish",
   "Publishing": "Publishing",
+  "Anyone with the link <1></1>can view this document": "Anyone with the link <1></1>can view this document",
+  "Share": "Share",
+  "Share this document": "Share this document",
+  "Publish to internet": "Publish to internet",
+  "Anyone with the link can view this document": "Anyone with the link can view this document",
+  "Only team members with access can view": "Only team members with access can view",
+  "The shared link was last accessed {{ timeAgo }}.": "The shared link was last accessed {{ timeAgo }}.",
   "Are you sure you want to delete the <em>{{ documentTitle }}</em> template?": "Are you sure you want to delete the <em>{{ documentTitle }}</em> template?",
   "Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and any nested documents.": "Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and any nested documents.",
   "If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.": "If you’d like the option of referencing or restoring the {{noun}} in the future, consider archiving it instead.",

shared/styles/theme.js

@@ -141,7 +141,7 @@ export const light = {
 
   menuBackground: colors.white,
   menuShadow:
-    "0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08)",
+    "0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08), 0 30px 40px rgb(0 0 0 / 8%)",
   divider: colors.slateLight,
   titleBarDivider: colors.slateLight,
   inputBorder: colors.slateLight,