chore: show permission in members/invites list

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/ContactInviteModal.tsx

@@ -130,7 +130,7 @@ const ContactInviteModal: FunctionComponent<Props> = ({ vault, onCloseDialog })
                       wrapper: 'col-start-2',
                     }}
                     items={Object.keys(SharedVaultUserPermission.PERMISSIONS).map((key) => ({
-                      label: key === 'Write' ? 'Read/Write' : key,
+                      label: key === 'Write' ? 'Read / Write' : key,
                       value: key,
                     }))}
                     value={selectedContact.permission}

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/InviteItem.tsx

@@ -2,10 +2,11 @@ import { useApplication } from '@/Components/ApplicationProvider'
 import Button from '@/Components/Button/Button'
 import Icon from '@/Components/Icon/Icon'
 import ModalOverlay from '@/Components/Modal/ModalOverlay'
-import { InviteRecord } from '@standardnotes/snjs'
+import { InviteRecord, SharedVaultUserPermission } from '@standardnotes/snjs'
 import { useCallback, useState } from 'react'
 import EditContactModal from '../Contacts/EditContactModal'
 import { CheckmarkCircle } from '../../../../UIElements/CheckmarkCircle'
+import { capitalizeString } from '@/Utils'
 
 type Props = {
   inviteRecord: InviteRecord
@@ -35,6 +36,11 @@ const InviteItem = ({ inviteRecord }: Props) => {
 
   const trustedContact = application.contacts.findSenderContactForInvite(inviteRecord.invite)
 
+  const permission =
+    inviteRecord.invite.permission === SharedVaultUserPermission.PERMISSIONS.Write
+      ? 'Read / Write'
+      : capitalizeString(inviteRecord.invite.permission)
+
   return (
     <>
       <ModalOverlay isOpen={isAddContactModalOpen} close={closeAddContactModal}>
@@ -43,10 +49,10 @@ const InviteItem = ({ inviteRecord }: Props) => {
 
       <div className="flex gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow">
         <Icon type="archive" size="custom" className="mt-1.5 h-5.5 w-5.5 flex-shrink-0" />
-        <div className="flex flex-col gap-2.5 overflow-hidden py-1.5">
-          <div className="mr-auto overflow-hidden text-ellipsis text-sm">Vault Name: {inviteData.metadata.name}</div>
+        <div className="flex flex-col gap-2 overflow-hidden py-1.5">
+          <div className="overflow-hidden text-ellipsis text-sm">Vault Name: {inviteData.metadata.name}</div>
           {inviteData.metadata.description && (
-            <div className="mr-auto overflow-hidden text-ellipsis text-sm">
+            <div className="overflow-hidden text-ellipsis text-sm">
               Vault Description: {inviteData.metadata.description}
             </div>
           )}
@@ -56,11 +62,11 @@ const InviteItem = ({ inviteRecord }: Props) => {
               <CheckmarkCircle className="!h-4 !w-4" />
             </div>
           ) : (
-            <div className="mr-auto w-full overflow-hidden whitespace-pre-wrap break-words text-sm">
+            <div className="w-full overflow-hidden whitespace-pre-wrap break-words text-sm">
               Sender CollaborationID: <span className="font-mono text-xs">{collaborationId}</span>
             </div>
           )}
-
+          <div className="overflow-hidden text-ellipsis text-sm">Permission: {permission}</div>
           <div className="">
             {isTrusted ? (
               <Button label="Accept Invite" className="text-xs" onClick={acceptInvite} />

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react'
 import { useApplication } from '@/Components/ApplicationProvider'
-import { SharedVaultInviteServerHash } from '@standardnotes/snjs'
+import { SharedVaultInviteServerHash, SharedVaultUserPermission } from '@standardnotes/snjs'
 import Icon from '@/Components/Icon/Icon'
 import Button from '@/Components/Button/Button'
+import { capitalizeString } from '@/Utils'
 
 export const VaultModalInvites = ({
   invites,
@@ -29,10 +30,15 @@ export const VaultModalInvites = ({
       <div className="space-y-3.5">
         {invites.map((invite) => {
           const contact = application.contacts.findContactForInvite(invite)
+          const permission =
+            invite.permission === SharedVaultUserPermission.PERMISSIONS.Write
+              ? 'Read / Write'
+              : capitalizeString(invite.permission)
+
           return (
             <div
               key={invite.uuid}
-              className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-2 text-base font-medium md:text-sm"
+              className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-0.5 text-base font-medium md:text-sm"
             >
               <Icon type="user" className="col-start-1 col-end-2 place-self-center" />
               <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
@@ -49,10 +55,11 @@ export const VaultModalInvites = ({
                   </div>
                 )}
               </div>
+              <div className="col-start-2 row-start-2">{permission}</div>
               {isAdmin && (
                 <Button
                   label="Cancel Invite"
-                  className="col-start-2 row-start-2"
+                  className="col-start-2 row-start-3 mt-1"
                   onClick={() => deleteInvite(invite)}
                   small
                 />

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react'
 import { useApplication } from '@/Components/ApplicationProvider'
-import { SharedVaultUserServerHash, VaultListingInterface } from '@standardnotes/snjs'
+import { SharedVaultUserPermission, SharedVaultUserServerHash, VaultListingInterface } from '@standardnotes/snjs'
 import Icon from '@/Components/Icon/Icon'
 import Button from '@/Components/Button/Button'
+import { capitalizeString } from '@/Utils'
 
 export const VaultModalMembers = ({
   members,
@@ -34,10 +35,15 @@ export const VaultModalMembers = ({
         {members.map((member) => {
           const isMemberVaultOwner = application.vaultUsers.isVaultUserOwner(member)
           const contact = application.contacts.findContactForServerUser(member)
+          const permission =
+            member.permission === SharedVaultUserPermission.PERMISSIONS.Write
+              ? 'Read / Write'
+              : capitalizeString(member.permission)
+
           return (
             <div
               key={contact?.uuid || member.user_uuid}
-              className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-2 text-base font-medium md:text-sm"
+              className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-0.5 text-base font-medium md:text-sm"
             >
               <Icon type="user" className="col-start-1 col-end-2 place-self-center" />
               <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
@@ -54,9 +60,10 @@ export const VaultModalMembers = ({
                   </div>
                 )}
               </div>
+              <div className="col-start-2 row-start-2">{permission}</div>
               {isCurrentUserAdmin && !isMemberVaultOwner && (
                 <Button
-                  className="col-start-2 row-start-2"
+                  className="col-start-2 row-start-3 mt-1"
                   label="Remove From Vault"
                   onClick={() => removeMemberFromVault(member)}
                   small

packages/web/src/javascripts/Utils/StringUtils.ts

@@ -25,3 +25,7 @@ export const splitQueryInString = (string: string, query: string) => {
 
   return splitRangeWithinString(string, indexOfQueryInTitle, indexOfQueryInTitle + query.length)
 }
+
+export const capitalizeString = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}