Adding buckets user logic (#1394)

* Init * Sharing user names * Update packages/files-ui/src/Contexts/FilesContext.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Updated for feedback * Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Aug 3, 2021 · fccae7d · fccae7d
1 parent 3d7da83
commit fccae7d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 20 deletions.
diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.17.7",
+    "@chainsafe/files-api-client": "1.17.9",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx
@@ -21,6 +21,7 @@ import { useEffect } from "react"
 import { SharedFolderModalMode } from "./types"
 import { useCreateOrEditSharedFolder } from "./hooks/useCreateOrEditSharedFolder"
 import { useLookupSharedFolderUser } from "./hooks/useLookupUser"
+import { centerEllipsis } from "../../../Utils/Helpers"
 
 const useStyles = makeStyles(
   ({ breakpoints, constants, typography, zIndex, palette }: CSFTheme) => {
@@ -136,14 +137,14 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
     if (!bucketToEdit) return
 
     const newWriters = bucketToEdit.writers.map((writer) => ({
-      label: writer.uuid || "",
+      label: writer.username || centerEllipsis(writer.public_address.toLowerCase(), 6) || writer.uuid,
       value: writer.uuid || "",
       data: writer
     })
     ) || []
 
     const newReaders = bucketToEdit.readers.map((reader) => ({
-      label: reader.uuid || "",
+      label: reader.username || centerEllipsis(reader.public_address.toLowerCase(), 6) || reader.uuid,
       value: reader.uuid || "",
       data: reader
     })

diff --git a/...ges/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx b/...ges/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx
@@ -16,7 +16,7 @@ import {
   UserShareSvg
 } from "@chainsafe/common-components"
 import { CSFTheme } from "../../../../../Themes/types"
-import { BucketUser } from "@chainsafe/files-api-client"
+import { LookupUser } from "@chainsafe/files-api-client"
 import { desktopSharedGridSettings, mobileSharedGridSettings } from "../../SharedFoldersOverview"
 import SharedUsers from "../../../../Elements/SharedUser"
 import { t, Trans } from "@lingui/macro"
@@ -25,6 +25,7 @@ import clsx from "clsx"
 import { BucketKeyPermission } from "../../../../../Contexts/FilesContext"
 import UserBubble from "../../../../Elements/UserBubble"
 import { renameSchema } from "../../../../../Utils/validationSchema"
+import { centerEllipsis } from "../../../../../Utils/Helpers"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
 
@@ -200,13 +201,21 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
     click(e)
   }
 
-  const getUserIds = (users: BucketUser[]): string[] => {
+  const getUserLabels = (users: LookupUser[]): string[] => {
     return users.reduce((acc: string[], user): string[] => {
+      if (user.username !== "") {
+        return user.username ? [...acc, user.username] :  acc
+      }
+
+      if (user.public_address !== "") {
+        return user.public_address ? [...acc, centerEllipsis(user.public_address.toLowerCase(), 6)] :  acc
+      }
+
       return user.uuid ? [...acc, user.uuid] :  acc
     }, [] as string[])
   }
 
-  const userIds = [...getUserIds(bucket.owners), ...getUserIds(bucket.readers), ...getUserIds(bucket.writers)]
+  const userLabels = [...getUserLabels(bucket.owners), ...getUserLabels(bucket.readers), ...getUserLabels(bucket.writers)]
 
   const formik = useFormik({
     initialValues:{
@@ -284,7 +293,7 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
         align="left"
         className={classes.sharedUser}
       >
-        <SharedUsers sharedUsers={userIds}/>
+        <SharedUsers sharedUsers={userLabels}/>
       </TableCell>
       {desktop &&
         <TableCell align="left">

diff --git a/packages/files-ui/src/Contexts/FilesContext.tsx b/packages/files-ui/src/Contexts/FilesContext.tsx
@@ -5,7 +5,8 @@ import {
   Bucket as FilesBucket,
   SearchEntry,
   BucketFileFullInfoResponse,
-  BucketSummaryResponse
+  BucketSummaryResponse,
+  LookupUser
 } from "@chainsafe/files-api-client"
 import React, { useCallback, useEffect, useReducer } from "react"
 import { useState } from "react"
@@ -67,9 +68,12 @@ interface GetFileContentParams {
 
 export type BucketPermission = "writer" | "owner" | "reader"
 
-export type BucketKeyPermission = FilesBucket & {
+export type BucketKeyPermission = Omit<FilesBucket, "owners" | "writers" | "readers"> & {
   encryptionKey: string
   permission?: BucketPermission
+  owners: LookupUser[]
+  writers: LookupUser[]
+  readers: LookupUser[]
 }
 
 type FilesContext = {
@@ -187,10 +191,14 @@ const FilesProvider = ({ children }: FilesContextProps) => {
 
     const bucketsWithKeys: BucketKeyPermission[] = await Promise.all(
       result.map(async (b) => {
+        const userData = await filesApiClient.getBucketUsers(b.id)
         return {
           ...b,
           encryptionKey: await getKeyForBucket(b) || "",
-          permission: getPermissionForBucket(b)
+          permission: getPermissionForBucket(b),
+          owners: userData.owners || [],
+          writers: userData.writers || [],
+          readers: userData.readers || []
         }
       })
     )

diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.17.8",
+    "@chainsafe/files-api-client": "1.17.9",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

diff --git a/yarn.lock b/yarn.lock
@@ -1662,15 +1662,10 @@
   resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.17.5.tgz#35dd9c4baf0833ee9b654495979ed1a66fb02f8d"
   integrity sha512-5L7bAJr3siPgadDkGwhfo31MCkda01v/rTkLxUta13g6QG+pu0oKDoug+dtm8f9EPoH/rI89L2JHFM7XFrYveQ==
 
-"@chainsafe/files-api-client@1.17.7":
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.17.7.tgz#aa8618eab659f9fc5baeef1134bdfcddba6dfc28"
-  integrity sha512-xqqSNlFqhx1UkgxSKzwB9KKvWztI0+WlRgLw4vikwEjQojSbX4ygrq5QfkDovi+lGAPGpeNTKaHlDMZZPyjx2A==
-
-"@chainsafe/files-api-client@1.17.8":
-  version "1.17.8"
-  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.17.8.tgz#0c52924cce276fc0e54b75c677e1d68e21d9cb5d"
-  integrity sha512-EJLGuDAPBsWfOe5CJ7SRpR2iywUEY0/iVO4tYvnWoT0j5ik100RNPQzVClD4B7yO8qPBneMtMBVldD0gNkqBWQ==
+"@chainsafe/files-api-client@1.17.9":
+  version "1.17.9"
+  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.17.9.tgz#8c608db1a07dc8bbdb10a1cd21fad00d091deed3"
+  integrity sha512-5XUs/KlNfAIVbqKCxtVEbUyWneTn0/kp70blbyCqVwaX1X3e7D2aXX0gy7zR5kMM7yjGsZE7vwA/0oVCaemfig==
 
 "@chainsafe/web3-context@1.1.4":
   version "1.1.4"