feat: Show 'Edit' button when visiting share link as signed in user with permission (#1980)

app/scenes/Document/components/Container.js

@@ -4,7 +4,6 @@ import Flex from "components/Flex";
 
 const Container = styled(Flex)`
   position: relative;
-  margin-top: ${(props) => (props.isShare ? "50px" : "0")};
 `;
 
 export default Container;

app/scenes/Document/components/Document.js

@@ -9,7 +9,6 @@ import { Prompt, Route, withRouter } from "react-router-dom";
 import type { RouterHistory, Match } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-
 import AuthStore from "stores/AuthStore";
 import UiStore from "stores/UiStore";
 import Document from "models/Document";
@@ -325,8 +324,7 @@ class DocumentScene extends React.Component<Props> {
     const headings = this.editor.current
       ? this.editor.current.getHeadings()
       : [];
-    const showContents =
-      (ui.tocVisible && readOnly) || (isShare && !!headings.length);
+    const showContents = ui.tocVisible && readOnly;
 
     return (
       <ErrorBoundary>
@@ -361,22 +359,21 @@ class DocumentScene extends React.Component<Props> {
                 />
               </>
             )}
-            {!isShare && (
-              <Header
-                document={document}
-                isRevision={!!revision}
-                isDraft={document.isDraft}
-                isEditing={!readOnly}
-                isSaving={this.isSaving}
-                isPublishing={this.isPublishing}
-                publishingIsDisabled={
-                  document.isSaving || this.isPublishing || this.isEmpty
-                }
-                savingIsDisabled={document.isSaving || this.isEmpty}
-                goBack={this.goBack}
-                onSave={this.onSave}
-              />
-            )}
+            <Header
+              document={document}
+              isShare={isShare}
+              isRevision={!!revision}
+              isDraft={document.isDraft}
+              isEditing={!readOnly}
+              isSaving={this.isSaving}
+              isPublishing={this.isPublishing}
+              publishingIsDisabled={
+                document.isSaving || this.isPublishing || this.isEmpty
+              }
+              savingIsDisabled={document.isSaving || this.isEmpty}
+              goBack={this.goBack}
+              onSave={this.onSave}
+            />
             <MaxWidth
               archived={document.isArchived}
               showContents={showContents}

app/scenes/Document/components/Header.js

@@ -31,6 +31,7 @@ import { newDocumentUrl, editDocumentUrl } from "utils/routeHelpers";
 
 type Props = {|
   document: Document,
+  isShare: boolean,
   isDraft: boolean,
   isEditing: boolean,
   isRevision: boolean,
@@ -48,6 +49,7 @@ type Props = {|
 
 function DocumentHeader({
   document,
+  isShare,
   isEditing,
   isDraft,
   isPublishing,
@@ -91,6 +93,55 @@ function DocumentHeader({
   const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
   const canEdit = can.update && !isEditing;
 
+  const toc = (
+    <Tooltip
+      tooltip={ui.tocVisible ? t("Hide contents") : t("Show contents")}
+      shortcut={`ctrl+${metaDisplay}+h`}
+      delay={250}
+      placement="bottom"
+    >
+      <Button
+        onClick={
+          ui.tocVisible ? ui.hideTableOfContents : ui.showTableOfContents
+        }
+        icon={<TableOfContentsIcon />}
+        iconColor="currentColor"
+        borderOnHover
+        neutral
+      />
+    </Tooltip>
+  );
+
+  const editAction = (
+    <Action>
+      <Tooltip
+        tooltip={t("Edit {{noun}}", { noun: document.noun })}
+        shortcut="e"
+        delay={500}
+        placement="bottom"
+      >
+        <Button
+          as={Link}
+          icon={<EditIcon />}
+          to={editDocumentUrl(document)}
+          neutral
+        >
+          {t("Edit")}
+        </Button>
+      </Tooltip>
+    </Action>
+  );
+
+  if (isShare) {
+    return (
+      <Header
+        title={document.title}
+        breadcrumb={toc}
+        actions={canEdit ? editAction : <div />}
+      />
+    );
+  }
+
   return (
     <>
       <Modal
@@ -106,26 +157,7 @@ function DocumentHeader({
             {!isEditing && (
               <>
                 <Slash />
-                <Tooltip
-                  tooltip={
-                    ui.tocVisible ? t("Hide contents") : t("Show contents")
-                  }
-                  shortcut={`ctrl+${metaDisplay}+h`}
-                  delay={250}
-                  placement="bottom"
-                >
-                  <Button
-                    onClick={
-                      ui.tocVisible
-                        ? ui.hideTableOfContents
-                        : ui.showTableOfContents
-                    }
-                    icon={<TableOfContentsIcon />}
-                    iconColor="currentColor"
-                    borderOnHover
-                    neutral
-                  />
-                </Tooltip>
+                {toc}
               </>
             )}
           </Breadcrumb>
@@ -196,25 +228,7 @@ function DocumentHeader({
                 </Action>
               </>
             )}
-            {canEdit && (
-              <Action>
-                <Tooltip
-                  tooltip={t("Edit {{noun}}", { noun: document.noun })}
-                  shortcut="e"
-                  delay={500}
-                  placement="bottom"
-                >
-                  <Button
-                    as={Link}
-                    icon={<EditIcon />}
-                    to={editDocumentUrl(document)}
-                    neutral
-                  >
-                    {t("Edit")}
-                  </Button>
-                </Tooltip>
-              </Action>
-            )}
+            {canEdit && editAction}
             {canEdit && can.createChildDocument && (
               <Action>
                 <NewChildDocumentMenu

server/api/documents.js

@@ -483,7 +483,14 @@ async function loadDocument({ id, shareId, user }) {
       throw new InvalidRequestError("Document could not be found for shareId");
     }
 
-    document = share.document;
+    if (user) {
+      document = await Document.findByPk(share.documentId, {
+        userId: user.id,
+        paranoid: false,
+      });
+    } else {
+      document = share.document;
+    }
 
     if (!share.published) {
       authorize(user, "read", document);

server/api/documents.test.js

@@ -176,6 +176,7 @@ describe("#documents.info", () => {
     expect(body.data.id).toEqual(document.id);
     expect(body.data.createdBy.id).toEqual(user.id);
     expect(body.data.updatedBy.id).toEqual(user.id);
+    expect(body.policies[0].abilities.update).toEqual(true);
   });
 
   it("should return draft document from shareId with token", async () => {

shared/i18n/locales/en_US/translation.json

@@ -243,6 +243,7 @@
   "Collections are for grouping your documents. They work best when organized around a topic or internal team — Product or Engineering for example.": "Collections are for grouping your documents. They work best when organized around a topic or internal team — Product or Engineering for example.",
   "Creating": "Creating",
   "Create": "Create",
+  "Edit {{noun}}": "Edit {{noun}}",
   "Hide contents": "Hide contents",
   "Show contents": "Show contents",
   "Archived": "Archived",
@@ -250,7 +251,6 @@
   "Share": "Share",
   "Save Draft": "Save Draft",
   "Done Editing": "Done Editing",
-  "Edit {{noun}}": "Edit {{noun}}",
   "New from template": "New from template",
   "Publish": "Publish",
   "Publishing": "Publishing",