feat: Optional branding on shared documents (#4450)

* feat: Optional branding on shared documents

* Refactor
Remove unneccessarily exposed team id
Remove top-level collapsible document on publicly shared urls

* fix: Branding disappears when revising document
fix: Clicking title should go back to main app when logged in

app/components/Avatar/Avatar.tsx

@@ -54,6 +54,7 @@ Avatar.defaultProps = {
 
 const Relative = styled.div`
   position: relative;
+  flex-shrink: 0;
 `;
 
 const IconWrapper = styled.div`
@@ -77,6 +78,7 @@ const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
     ${(props) =>
       props.$showBorder === false ? "transparent" : props.theme.background};
   flex-shrink: 0;
+  overflow: hidden;
 `;
 
 export default Avatar;

app/components/Sidebar/App.tsx

@@ -24,9 +24,9 @@ import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
 import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
+import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
 import Section from "./components/Section";
 import SidebarAction from "./components/SidebarAction";
-import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Starred from "./components/Starred";
 import TrashLink from "./components/TrashLink";
@@ -59,8 +59,8 @@ function AppSidebar() {
       {dndArea && (
         <DndProvider backend={HTML5Backend} options={html5Options}>
           <OrganizationMenu>
-            {(props: SidebarButtonProps) => (
+            {(props: HeaderButtonProps) => (
-              <SidebarButton
+              <HeaderButton
                 {...props}
                 title={team.name}
                 image={<TeamLogo model={team} size={32} alt={t("Logo")} />}

app/components/Sidebar/Settings.tsx

@@ -11,8 +11,8 @@ import useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
 import isCloudHosted from "~/utils/isCloudHosted";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
+import HeaderButton from "./components/HeaderButton";
 import Section from "./components/Section";
-import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Version from "./components/Version";
 
@@ -28,7 +28,7 @@ function SettingsSidebar() {
 
   return (
     <Sidebar>
-      <SidebarButton
+      <HeaderButton
         title={t("Return to App")}
         image={<StyledBackIcon color="currentColor" />}
         onClick={returnToApp}

app/components/Sidebar/Shared.tsx

@@ -1,33 +1,52 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import Team from "~/models/Team";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
+import history from "~/utils/history";
+import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
+import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
+import HeaderButton from "./components/HeaderButton";
 import Section from "./components/Section";
 import DocumentLink from "./components/SharedDocumentLink";
 
 type Props = {
+  team?: Team;
   rootNode: NavigationNode;
   shareId: string;
 };
 
-function SharedSidebar({ rootNode, shareId }: Props) {
+function SharedSidebar({ rootNode, team, shareId }: Props) {
-  const { ui, documents } = useStores();
+  const { ui, documents, auth } = useStores();
+  const { t } = useTranslation();
 
   return (
     <Sidebar>
-      <ScrollContainer flex>
+      {team && (
+        <HeaderButton
+          title={team.name}
+          image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
+          onClick={() =>
+            history.push(
+              auth.user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
+            )
+          }
+        />
+      )}
+      <ScrollContainer topShadow flex>
         <TopSection>
           <SearchPopover shareId={shareId} />
         </TopSection>
         <Section>
           <DocumentLink
             index={0}
+            depth={0}
             shareId={shareId}
-            depth={1}
             node={rootNode}
             activeDocumentId={ui.activeDocumentId}
             activeDocument={documents.active}
@@ -44,8 +63,11 @@ const ScrollContainer = styled(Scrollable)`
 
 const TopSection = styled(Section)`
   // this weird looking && increases the specificity of the style rule
-  && {
+  &&:first-child {
     margin-top: 16px;
+  }
+
+  && {
     margin-bottom: 16px;
   }
 `;

app/components/Sidebar/Sidebar.tsx

@@ -13,8 +13,8 @@ import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
 import { fadeIn } from "~/styles/animations";
 import Avatar from "../Avatar";
+import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
 import ResizeBorder from "./components/ResizeBorder";
-import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
 const ANIMATION_MS = 250;
@@ -170,8 +170,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
 
           {user && (
             <AccountMenu>
-              {(props: SidebarButtonProps) => (
+              {(props: HeaderButtonProps) => (
-                <SidebarButton
+                <HeaderButton
                   {...props}
                   showMoreMenu
                   title={user.name}

app/components/Sidebar/components/HeaderButton.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 
-export type SidebarButtonProps = {
+export type HeaderButtonProps = {
   title: React.ReactNode;
   image: React.ReactNode;
   minHeight?: number;
@@ -13,7 +13,7 @@ export type SidebarButtonProps = {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
+const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
   (
     {
       showDisclosure,
@@ -22,7 +22,7 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
       title,
       minHeight = 0,
       ...rest
-    }: SidebarButtonProps,
+    }: HeaderButtonProps,
     ref
   ) => (
     <Wrapper
@@ -33,7 +33,7 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
       {...rest}
       ref={ref}
     >
-      <Title gap={4} align="center">
+      <Title gap={6} align="center">
         {image}
         {title}
       </Title>
@@ -79,4 +79,4 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
   }
 `;
 
-export default SidebarButton;
+export default HeaderButton;

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -100,7 +100,7 @@ function DocumentLink(
         }}
         label={
           <>
-            {hasChildDocuments && (
+            {hasChildDocuments && depth !== 0 && (
               <Disclosure expanded={expanded} onClick={handleDisclosureClick} />
             )}
             {title}

app/components/TeamLogo.ts

@@ -4,8 +4,6 @@ import Avatar from "./Avatar";
 const TeamLogo = styled(Avatar)`
   border-radius: 4px;
   border: 1px solid ${(props) => props.theme.divider};
-  overflow: hidden;
-  flex-shrink: 0;
 `;
 
 export default TeamLogo;

app/scenes/Document/Shared.tsx

@@ -7,6 +7,7 @@ import { RouteComponentProps, useLocation, Redirect } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import { setCookie } from "tiny-cookie";
 import DocumentModel from "~/models/Document";
+import Team from "~/models/Team";
 import Error404 from "~/scenes/Error404";
 import ErrorOffline from "~/scenes/ErrorOffline";
 import Layout from "~/components/Layout";
@@ -26,6 +27,7 @@ const EMPTY_OBJECT = {};
 
 type Response = {
   document: DocumentModel;
+  team?: Team;
   sharedTree?: NavigationNode | undefined;
 };
 
@@ -157,8 +159,12 @@ function SharedDocumentScene(props: Props) {
     return <Redirect to={response.document.url} />;
   }
 
-  const sidebar = response.sharedTree ? (
+  const sidebar = response.sharedTree?.children.length ? (
-    <Sidebar rootNode={response.sharedTree} shareId={shareId} />
+    <Sidebar
+      rootNode={response.sharedTree}
+      team={response.team}
+      shareId={shareId}
+    />
   ) : undefined;
 
   return (

app/scenes/Settings/Features.tsx

@@ -43,15 +43,15 @@ function Features() {
       </Text>
       {team.collaborativeEditing && (
         <SettingRow
-          name="seamlessEdit"
+          name={TeamPreference.SeamlessEdit}
           label={t("Seamless editing")}
           description={t(
             `When enabled documents are always editable for team members that have permission. When disabled there is a separate editing view.`
           )}
         >
           <Switch
-            id="seamlessEdit"
+            id={TeamPreference.SeamlessEdit}
-            name="seamlessEdit"
+            name={TeamPreference.SeamlessEdit}
             checked={team.getPreference(TeamPreference.SeamlessEdit, true)}
             onChange={handlePreferenceChange}
           />
@@ -59,16 +59,16 @@ function Features() {
       )}
       {team.avatarUrl && (
         <SettingRow
-          name="publicBranding"
+          name={TeamPreference.PublicBranding}
           label={t("Public branding")}
           description={t(
             "Show your team’s logo on public pages like login and shared documents."
           )}
         >
           <Switch
-            id="publicBranding"
+            id={TeamPreference.PublicBranding}
-            name="publicBranding"
+            name={TeamPreference.PublicBranding}
-            checked={!!team.preferences?.publicBranding}
+            checked={team.getPreference(TeamPreference.PublicBranding, false)}
             onChange={handlePreferenceChange}
           />
         </SettingRow>

app/stores/DocumentsStore.ts

@@ -10,6 +10,7 @@ import { DocumentValidation } from "@shared/validations";
 import BaseStore from "~/stores/BaseStore";
 import RootStore from "~/stores/RootStore";
 import Document from "~/models/Document";
+import Team from "~/models/Team";
 import env from "~/env";
 import {
   FetchOptions,
@@ -40,7 +41,10 @@ type ImportOptions = {
 };
 
 export default class DocumentsStore extends BaseStore<Document> {
-  sharedTreeCache: Map<string, NavigationNode | undefined> = new Map();
+  sharedCache: Map<
+    string,
+    { sharedTree: NavigationNode; team: Team } | undefined
+  > = new Map();
 
   @observable
   searchCache: Map<string, SearchResult[] | undefined> = new Map();
@@ -265,7 +269,7 @@ export default class DocumentsStore extends BaseStore<Document> {
   }
 
   getSharedTree(documentId: string): NavigationNode | undefined {
-    return this.sharedTreeCache.get(documentId);
+    return this.sharedCache.get(documentId)?.sharedTree;
   }
 
   @action
@@ -466,6 +470,7 @@ export default class DocumentsStore extends BaseStore<Document> {
     options: FetchOptions = {}
   ): Promise<{
     document: Document;
+    team?: Team;
     sharedTree?: NavigationNode;
   }> => {
     if (!options.prefetch) {
@@ -482,10 +487,10 @@ export default class DocumentsStore extends BaseStore<Document> {
           return {
             document: doc,
           };
-        } else if (this.sharedTreeCache.has(options.shareId)) {
+        } else if (this.sharedCache.has(options.shareId)) {
           return {
             document: doc,
-            sharedTree: this.sharedTreeCache.get(options.shareId),
+            ...this.sharedCache.get(options.shareId),
           };
         }
       }
@@ -504,10 +509,14 @@ export default class DocumentsStore extends BaseStore<Document> {
       invariant(document, "Document not available");
 
       if (options.shareId) {
-        this.sharedTreeCache.set(options.shareId, res.data.sharedTree);
+        this.sharedCache.set(options.shareId, {
+          sharedTree: res.data.sharedTree,
+          team: res.data.team,
+        });
         return {
           document,
           sharedTree: res.data.sharedTree,
+          team: res.data.team,
         };
       }
 

server/routes/api/auth.ts

@@ -1,5 +1,6 @@
 import Router from "koa-router";
 import { find, uniqBy } from "lodash";
+import { TeamPreference } from "@shared/types";
 import { parseDomain } from "@shared/utils/domains";
 import env from "@server/env";
 import auth from "@server/middlewares/authentication";
@@ -57,7 +58,9 @@ router.post("auth.config", async (ctx) => {
       ctx.body = {
         data: {
           name: team.name,
-          logo: team.preferences?.publicBranding ? team.avatarUrl : undefined,
+          logo: team.getPreference(TeamPreference.PublicBranding)
+            ? team.avatarUrl
+            : undefined,
           providers: filterProviders(team),
         },
       };
@@ -78,7 +81,9 @@ router.post("auth.config", async (ctx) => {
       ctx.body = {
         data: {
           name: team.name,
-          logo: team.preferences?.publicBranding ? team.avatarUrl : undefined,
+          logo: team.getPreference(TeamPreference.PublicBranding)
+            ? team.avatarUrl
+            : undefined,
           hostname: ctx.request.hostname,
           providers: filterProviders(team),
         },
@@ -100,7 +105,9 @@ router.post("auth.config", async (ctx) => {
       ctx.body = {
         data: {
           name: team.name,
-          logo: team.preferences?.publicBranding ? team.avatarUrl : undefined,
+          logo: team.getPreference(TeamPreference.PublicBranding)
+            ? team.avatarUrl
+            : undefined,
           hostname: ctx.request.hostname,
           providers: filterProviders(team),
         },

server/routes/api/documents.ts

@@ -1,8 +1,10 @@
 import fs from "fs-extra";
 import invariant from "invariant";
 import Router from "koa-router";
+import { pick } from "lodash";
 import mime from "mime-types";
 import { Op, ScopeOptions, WhereOptions } from "sequelize";
+import { TeamPreference } from "@shared/types";
 import { subtractDate } from "@shared/utils/date";
 import { bytesToHumanReadable } from "@shared/utils/files";
 import documentCreator from "@server/commands/documentCreator";
@@ -422,13 +424,18 @@ router.post(
     const serializedDocument = await presentDocument(document, {
       isPublic,
     });
-    // Passing apiVersion=2 has a single effect, to change the response payload to
-    // include document and sharedTree keys.
 
+    const team = await document.$get("team");
+
+    // Passing apiVersion=2 has a single effect, to change the response payload to
+    // include top level keys for document, sharedTree, and team.
     const data =
       apiVersion === 2
         ? {
             document: serializedDocument,
+            team: team?.getPreference(TeamPreference.PublicBranding)
+              ? pick(team, ["avatarUrl", "name"])
+              : undefined,
             sharedTree:
               share && share.includeChildDocuments
                 ? collection?.getDocumentTree(share.documentId)