fix: Various fixes for collaborative editing beta (#2561)

* fix: Remove Saving… message when collab enabled

* chore: Add tracing extension to collaboration server

* fix: Incorrect debounce behavior due to missing timestamps on events, fixes abundence of notifications when editing in realtime collab mode

* fix: Reload document prompt when collab editing

app/components/Collaborators.js

@@ -12,17 +12,19 @@ import DocumentViews from "components/DocumentViews";
 import Facepile from "components/Facepile";
 import NudeButton from "components/NudeButton";
 import Popover from "components/Popover";
+import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 
 type Props = {|
   document: Document,
-  currentUserId: string,
 |};
 
 function Collaborators(props: Props) {
   const { t } = useTranslation();
+  const user = useCurrentUser();
+  const currentUserId = user?.id;
   const { users, presence } = useStores();
-  const { document, currentUserId } = props;
+  const { document } = props;
 
   let documentPresence = presence.get(document.id);
   documentPresence = documentPresence

app/scenes/Document/components/Document.js

@@ -90,7 +90,7 @@ class DocumentScene extends React.Component<Props> {
       this.updateIsDirty();
     }
 
-    if (this.props.readOnly) {
+    if (this.props.readOnly || auth.team?.collaborativeEditing) {
       this.lastRevision = document.revision;
 
       if (document.title !== this.title) {

app/scenes/Document/components/Header.js

@@ -20,6 +20,7 @@ import Header from "components/Header";
 import Tooltip from "components/Tooltip";
 import PublicBreadcrumb from "./PublicBreadcrumb";
 import ShareButton from "./ShareButton";
+import useCurrentTeam from "hooks/useCurrentTeam";
 import useMobile from "hooks/useMobile";
 import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
@@ -67,7 +68,8 @@ function DocumentHeader({
   headings,
 }: Props) {
   const { t } = useTranslation();
-  const { auth, ui, policies } = useStores();
+  const team = useCurrentTeam();
+  const { ui, policies } = useStores();
   const isMobile = useMobile();
 
   const handleSave = React.useCallback(() => {
@@ -81,7 +83,7 @@ function DocumentHeader({
   const isNew = document.isNewDocument;
   const isTemplate = document.isTemplate;
   const can = policies.abilities(document.id);
-  const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
+  const canToggleEmbeds = team?.documentEmbeds;
   const canEdit = can.update && !isEditing;
 
   const toc = (
@@ -162,11 +164,10 @@ function DocumentHeader({
                 <TableOfContentsMenu headings={headings} />
               </TocWrapper>
             )}
-            {!isPublishing && isSaving && <Status>{t("Saving")}…</Status>}
-            <Collaborators
-              document={document}
-              currentUserId={auth.user ? auth.user.id : undefined}
-            />
+            {!isPublishing && isSaving && !team.collaborativeEditing && (
+              <Status>{t("Saving")}…</Status>
+            )}
+            <Collaborators document={document} />
             {isEditing && !isTemplate && isNew && (
               <Action>
                 <TemplatesMenu