fix: Restore behavior of displaying document collaborators in facepile

app/components/Avatar/AvatarWithPresence.js

@@ -1,5 +1,4 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { EditIcon } from "outline-icons";
@@ -16,7 +15,6 @@ type Props = {
   isPresent: boolean,
   isEditing: boolean,
   isCurrentUser: boolean,
-  lastViewedAt: string,
   profileOnClick: boolean,
   t: TFunction,
 };
@@ -34,22 +32,13 @@ class AvatarWithPresence extends React.Component<Props> {
   };
 
   render() {
-    const {
-      user,
-      lastViewedAt,
-      isPresent,
-      isEditing,
-      isCurrentUser,
-      t,
-    } = this.props;
+    const { user, isPresent, isEditing, isCurrentUser, t } = this.props;
 
     const action = isPresent
       ? isEditing
         ? t("currently editing")
         : t("currently viewing")
-      : t("viewed {{ timeAgo }} ago", {
-          timeAgo: distanceInWordsToNow(new Date(lastViewedAt)),
-        });
+      : t("previously edited");
 
     return (
       <>
@@ -57,8 +46,12 @@ class AvatarWithPresence extends React.Component<Props> {
           tooltip={
             <Centered>
               <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-              <br />
-              {action}
+              {action && (
+                <>
+                  <br />
+                  {action}
+                </>
+              )}
             </Centered>
           }
           placement="bottom"

app/components/Collaborators.js

@@ -1,5 +1,5 @@
 // @flow
-import { filter } from "lodash";
+import { sortBy, filter, uniq } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -35,8 +35,18 @@ function Collaborators(props: Props) {
     .map((p) => p.userId);
 
   // ensure currently present via websocket are always ordered first
-  const presentUsers = filter(users.orderedData, (user) =>
-    presentIds.includes(user.id)
+  const collaborators = React.useMemo(
+    () =>
+      sortBy(
+        filter(
+          users.orderedData,
+          (user) =>
+            presentIds.includes(user.id) ||
+            document.collaboratorIds.includes(user.id)
+        ),
+        (user) => presentIds.includes(user.id)
+      ),
+    [document.collaboratorIds, users.orderedData, presentIds]
   );
 
   // load any users we don't know about
@@ -45,12 +55,12 @@ function Collaborators(props: Props) {
       return;
     }
 
-    presentIds.forEach((userId) => {
+    uniq([...document.collaboratorIds, ...presentIds]).forEach((userId) => {
       if (!users.get(userId)) {
         return users.fetch(userId);
       }
     });
-  }, [document, users, presentIds]);
+  }, [document, users, presentIds, document.collaboratorIds]);
 
   const popover = usePopoverState({
     gutter: 0,
@@ -61,9 +71,9 @@ function Collaborators(props: Props) {
     <>
       <PopoverDisclosure {...popover}>
         {(props) => (
-          <NudeButton width={presentUsers.length * 32} height={32} {...props}>
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
             <FacepileHiddenOnMobile
-              users={presentUsers}
+              users={collaborators}
               renderAvatar={(user) => {
                 const isPresent = presentIds.includes(user.id);
                 const isEditing = editingIds.includes(user.id);

shared/i18n/locales/en_US/translation.json

@@ -1,7 +1,7 @@
 {
   "currently editing": "currently editing",
   "currently viewing": "currently viewing",
-  "viewed {{ timeAgo }} ago": "viewed {{ timeAgo }} ago",
+  "previously edited": "previously edited",
   "You": "You",
   "Trash": "Trash",
   "Archive": "Archive",