diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index 29949ef7c3..7367de5ef6 100644 --- 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 index d01c8f90d5..3764d7f086 100644 --- 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/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx index b87d09ba08..9f68bf5bcf 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx +++ b/packages/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} > - + {desktop && diff --git a/packages/files-ui/src/Contexts/FilesContext.tsx b/packages/files-ui/src/Contexts/FilesContext.tsx index e157c2ddad..faf7153a2a 100644 --- 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 & { 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 index ab7e7b4467..2c0e66d5f8 100644 --- 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 index c8ac4ec39c..3716259ee0 100644 --- 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"