feat: Nested document sharing (#2075)

* migration

* frontend routing, api permissioning

* feat: apiVersion=2

* feat: re-writing document links to point to share

* poc nested documents on share links

* fix: nested shareId permissions

* ui and language tweaks, comments

* breadcrumbs

* Add icons to reference list items

* refactor: Breadcrumb component

* tweaks

* Add shared parent note

app/scenes/Document/components/SharePopover.js

@@ -4,7 +4,7 @@ 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 { useTranslation, Trans } from "react-i18next";
 import styled from "styled-components";
 import Document from "models/Document";
 import Share from "models/Share";
@@ -13,23 +13,25 @@ import CopyToClipboard from "components/CopyToClipboard";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import Input from "components/Input";
+import Notice from "components/Notice";
 import Switch from "components/Switch";
 import useStores from "hooks/useStores";
 
 type Props = {|
   document: Document,
   share: Share,
+  sharedParent: ?Share,
   onSubmit: () => void,
 |};
 
-function DocumentShare({ document, share, onSubmit }: Props) {
+function SharePopover({ document, share, sharedParent, 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;
+  const isPubliclyShared = (share && share.published) || sharedParent;
 
   React.useEffect(() => {
     document.share();
@@ -41,14 +43,26 @@ function DocumentShare({ document, share, onSubmit }: Props) {
       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 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) {
+        ui.showToast(err.message, { type: "error" });
       }
     },
     [document.id, shares, ui]
@@ -68,7 +82,7 @@ function DocumentShare({ document, share, onSubmit }: Props) {
   return (
     <>
       <Heading>
-        {share && share.published ? (
+        {isPubliclyShared ? (
           <GlobeIcon size={28} color="currentColor" />
         ) : (
           <PadlockIcon size={28} color="currentColor" />
@@ -76,20 +90,30 @@ function DocumentShare({ document, share, onSubmit }: Props) {
         {t("Share this document")}
       </Heading>
 
+      {sharedParent && (
+        <Notice>
+          <Trans
+            defaults="This document is shared because the parent <em>{{ documentTitle }}</em> is publicly shared"
+            values={{ documentTitle: sharedParent.documentTitle }}
+            components={{ em: <strong /> }}
+          />
+        </Notice>
+      )}
+
       {canPublish && (
-        <PrivacySwitch>
+        <SwitchWrapper>
           <Switch
             id="published"
             label={t("Publish to internet")}
             onChange={handlePublishedChange}
             checked={share ? share.published : false}
-            disabled={!share || isSaving}
+            disabled={!share}
           />
-          <Privacy>
-            <PrivacyText>
+          <SwitchLabel>
+            <SwitchText>
               {share.published
                 ? t("Anyone with the link can view this document")
-                : t("Only team members with access can view")}
+                : t("Only team members with permission can view")}
               {share.lastAccessedAt && (
                 <>
                   .{" "}
@@ -100,9 +124,27 @@ function DocumentShare({ document, share, onSubmit }: Props) {
                   })}
                 </>
               )}
-            </PrivacyText>
-          </Privacy>
-        </PrivacySwitch>
+            </SwitchText>
+          </SwitchLabel>
+        </SwitchWrapper>
+      )}
+      {share && share.published && (
+        <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>
       )}
       <Flex>
         <InputLink
@@ -130,7 +172,7 @@ const Heading = styled.h2`
   margin-left: -4px;
 `;
 
-const PrivacySwitch = styled.div`
+const SwitchWrapper = styled.div`
   margin: 20px 0;
 `;
 
@@ -139,7 +181,7 @@ const InputLink = styled(Input)`
   margin-right: 8px;
 `;
 
-const Privacy = styled(Flex)`
+const SwitchLabel = styled(Flex)`
   flex-align: center;
 
   svg {
@@ -147,9 +189,9 @@ const Privacy = styled(Flex)`
   }
 `;
 
-const PrivacyText = styled(HelpText)`
+const SwitchText = styled(HelpText)`
   margin: 0;
   font-size: 15px;
 `;
 
-export default observer(DocumentShare);
+export default observer(SharePopover);