Show users at the top of shared folders browser

packages/files-ui/src/Components/Elements/SharedUsers.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback, useMemo } from "react"
+import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import UserBubble from "./UserBubble"
+import { BucketUser } from "@chainsafe/files-api-client"
+import { BucketKeyPermission } from "../../Contexts/FilesContext"
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    root: {
+      display: "flex"
+    }
+  })
+})
+interface Props {
+ bucket: BucketKeyPermission
+}
+
+const SharedUsers = ({ bucket }: Props) => {
+  const classes = useStyles()
+  const { desktop } = useThemeSwitcher()
+  const { owners, readers, writers } = bucket
+
+  const getUserIds = useCallback((users?: BucketUser[]): string[] => {
+    if(!users) return []
+
+    return users.reduce((acc: string[], user): string[] => {
+      return user.uuid ? [...acc, user.uuid] :  acc
+    }, [] as string[])
+  }, [])
+
+  const userIds = useMemo(() =>
+    [
+      ...getUserIds(owners),
+      ...getUserIds(readers),
+      ...getUserIds(writers)
+    ],
+  [owners, readers, writers, getUserIds])
+
+  if (!userIds.length) {
+    return null
+  }
+
+  if (!desktop) {
+    return <div className={classes.root}>
+      <UserBubble
+        text={`+${userIds.length}`}
+        tooltip={userIds}
+      />
+    </div>
+  }
+
+  return (
+    <div className={classes.root}>
+      <UserBubble
+        tooltip={userIds[0]}
+      />
+      {userIds.length > 2 && (
+        <UserBubble
+          text={`+${userIds.length - 1}`}
+          tooltip={userIds.slice(0, -1)}
+        />
+      )}
+      {userIds.length === 2 && (
+        <UserBubble
+          tooltip={userIds[1]}
+        />
+      )}
+    </div>
+  )
+}
+
+export default SharedUsers

packages/files-ui/src/Components/Elements/UserBubble.tsx

@@ -32,10 +32,8 @@ const useStyles = makeStyles(({ zIndex, animation, constants, palette }: CSFThem
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
-      left: "50%",
-      top: "-20px",
+      bottom: constants.generalUnit * 5 + 5, //bubble height + the 5 from the triangle in &:after
       position: "absolute",
-      transform: "translate(-50%, -50%)",
       zIndex: zIndex?.layer1,
       transitionDuration: `${animation.transform}ms`,
       opacity: 0,

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx

@@ -16,9 +16,8 @@ import {
   UserShareSvg
 } from "@chainsafe/common-components"
 import { CSFTheme } from "../../../../../Themes/types"
-import { BucketUser } from "@chainsafe/files-api-client"
 import { desktopSharedGridSettings, mobileSharedGridSettings } from "../../SharedFoldersOverview"
-import SharedUsers from "../../../../Elements/SharedUser"
+import SharedUsers from "../../../../Elements/SharedUsers"
 import { t, Trans } from "@lingui/macro"
 import { Form, FormikProvider, useFormik } from "formik"
 import clsx from "clsx"
@@ -200,14 +199,6 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
     click(e)
   }
 
-  const getUserIds = (users: BucketUser[]): string[] => {
-    return users.reduce((acc: string[], user): string[] => {
-      return user.uuid ? [...acc, user.uuid] :  acc
-    }, [] as string[])
-  }
-
-  const userIds = [...getUserIds(bucket.owners), ...getUserIds(bucket.readers), ...getUserIds(bucket.writers)]
-
   const formik = useFormik({
     initialValues:{
       fileName: name
@@ -284,7 +275,7 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
         align="left"
         className={classes.sharedUser}
       >
-        <SharedUsers sharedUsers={userIds}/>
+        <SharedUsers bucket={bucket}/>
       </TableCell>
       {desktop &&
         <TableCell align="left">

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -51,6 +51,7 @@ import { DragPreviewLayer } from "./DragPreviewLayer"
 import { useFileBrowser } from "../../../../Contexts/FileBrowserContext"
 import ReportFileModal from "../ReportFileModal"
 import CopyToSharedFolderModal from "../CopyToSharedFolderModal"
+import SharedUsers from "../../../Elements/SharedUsers"
 
 const baseOperations:  FileOperation[] = ["download", "info", "preview"]
 const readerOperations: FileOperation[] = [...baseOperations, "report"]
@@ -82,7 +83,6 @@ const useStyles = makeStyles(
             borderColor: palette.primary.main
           }
         }
-        // transitionDuration: `${animation.transform}ms`,
       },
       header: {
         display: "flex",
@@ -276,6 +276,11 @@ const useStyles = makeStyles(
           width: "20px",
           height: "20px"
         }
+      },
+      users: {
+        flex: 1,
+        display: "flex",
+        justifyContent: "flex-end"
       }
     })
   }
@@ -632,6 +637,11 @@ const FilesList = ({ isShared = false }: Props) => {
         >
           {heading}
         </Typography>
+        {isShared && bucket && (
+          <div className={classes.users}>
+            <SharedUsers bucket={bucket}/>
+          </div>
+        )}
         <div className={classes.controls}>
           {controls && desktop ? (
             <>