Merge branch 'main' of github.com:outline/outline

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
-                  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>
+                <ShareButton document={document} />
               </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);