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