chore: only invalidate vault user cache when required (#2519)

packages/services/src/Domain/VaultInvite/VaultInviteService.ts

@@ -179,7 +179,8 @@ export class VaultInviteService
 
     this.removePendingInvite(pendingInvite.invite.uuid)
 
-    void this.sync.sync()
+    this.sync.sync().catch(console.error)
+    this.vaultUsers.invalidateVaultUsersCache(pendingInvite.invite.shared_vault_uuid).catch(console.error)
 
     await this._decryptErroredPayloads.execute()
 

packages/services/src/Domain/VaultUser/VaultUserService.ts

@@ -12,16 +12,10 @@ import { AbstractService } from './../Service/AbstractService'
 import { VaultUserServiceEvent } from './VaultUserServiceEvent'
 import { Result } from '@standardnotes/domain-core'
 import { IsVaultOwner } from './UseCase/IsVaultOwner'
-import { InternalEventInterface } from '../Internal/InternalEventInterface'
-import { InternalEventHandlerInterface } from '../Internal/InternalEventHandlerInterface'
-import { ApplicationEvent } from '../Event/ApplicationEvent'
 import { IsReadonlyVaultMember } from './UseCase/IsReadonlyVaultMember'
 import { IsVaultAdmin } from './UseCase/IsVaultAdmin'
 
-export class VaultUserService
+export class VaultUserService extends AbstractService<VaultUserServiceEvent> implements VaultUserServiceInterface {
-  extends AbstractService<VaultUserServiceEvent>
-  implements VaultUserServiceInterface, InternalEventHandlerInterface
-{
   constructor(
     private vaults: VaultServiceInterface,
     private vaultLocks: VaultLockServiceInterface,
@@ -47,20 +41,28 @@ export class VaultUserService
     ;(this._leaveVault as unknown) = undefined
   }
 
-  async handleEvent(event: InternalEventInterface): Promise<void> {
+  async invalidateVaultUsersCache(sharedVaultUuid?: string) {
-    if (event.type === ApplicationEvent.CompletedFullSync) {
+    if (sharedVaultUuid) {
-      this.vaults.getVaults().forEach((vault) => {
+      await this._getVaultUsers.execute({
+        sharedVaultUuid: sharedVaultUuid,
+        readFromCache: false,
+      })
+      void this.notifyEvent(VaultUserServiceEvent.InvalidatedUserCacheForVault, sharedVaultUuid)
+      return
+    }
+    await Promise.all(
+      this.vaults.getVaults().map(async (vault) => {
         if (!vault.isSharedVaultListing()) {
           return
         }
-        this._getVaultUsers
+        await this._getVaultUsers.execute({
-          .execute({
+          sharedVaultUuid: vault.sharing.sharedVaultUuid,
-            sharedVaultUuid: vault.sharing.sharedVaultUuid,
+          readFromCache: false,
-            readFromCache: false,
+        })
-          })
+        void this.notifyEvent(VaultUserServiceEvent.InvalidatedUserCacheForVault, vault.sharing.sharedVaultUuid)
-          .catch(console.error)
+      }),
-      })
+    )
-    }
+    void this.notifyEvent(VaultUserServiceEvent.InvalidatedAllUserCache)
   }
 
   public async getSharedVaultUsersFromServer(

packages/services/src/Domain/VaultUser/VaultUserServiceEvent.ts

@@ -1,3 +1,5 @@
 export enum VaultUserServiceEvent {
   UsersChanged = 'VaultUserServiceEvent.UsersChanged',
+  InvalidatedAllUserCache = 'VaultUserServiceEvent.InvalidatedUserCache',
+  InvalidatedUserCacheForVault = 'VaultUserServiceEvent.InvalidatedUserCacheForVault',
 }

packages/services/src/Domain/VaultUser/VaultUserServiceInterface.ts

@@ -15,4 +15,5 @@ export interface VaultUserServiceInterface extends ApplicationServiceInterface<V
   leaveSharedVault(sharedVault: SharedVaultListingInterface): Promise<ClientDisplayableError | void>
   isVaultUserOwner(user: SharedVaultUserServerHash): boolean
   getFormattedMemberPermission(permission: string): string
+  invalidateVaultUsersCache(sharedVaultUuid?: string): Promise<void>
 }

packages/snjs/lib/Application/Application.ts

@@ -469,6 +469,7 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
           source: SyncSource.External,
           sourceDescription: 'Application Launch',
         })
+        this.vaultUsers.invalidateVaultUsersCache().catch(console.error)
       })
       .catch((error) => {
         void this.notifyEvent(ApplicationEvent.LocalDatabaseReadError, error)

packages/snjs/lib/Application/Dependencies/DependencyEvents.ts

@@ -43,7 +43,6 @@ export function RegisterApplicationServicesEvents(container: Dependencies, event
   events.addEventHandler(container.get(TYPES.VaultInviteService), ApplicationEvent.Launched)
   events.addEventHandler(container.get(TYPES.VaultInviteService), SyncEvent.ReceivedSharedVaultInvites)
   events.addEventHandler(container.get(TYPES.VaultInviteService), WebSocketsServiceEvent.UserInvitedToSharedVault)
-  events.addEventHandler(container.get(TYPES.VaultUserService), ApplicationEvent.CompletedFullSync)
 
   if (container.get(TYPES.FilesBackupService)) {
     events.addEventHandler(container.get(TYPES.FilesBackupService), ApplicationEvent.ApplicationStageChanged)

packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx

@@ -11,11 +11,35 @@ import Popover from '../Popover/Popover'
 import FilePreviewInfoPanel from '../FilePreview/FilePreviewInfoPanel'
 import { useFileDragNDrop } from '../FileDragNDropProvider'
 import RoundIconButton from '../Button/RoundIconButton'
+import { useItemVaultInfo } from '@/Hooks/useItemVaultInfo'
+import Icon from '../Icon/Icon'
+import { VaultUserServiceEvent } from '@standardnotes/snjs'
 
 const SyncTimeoutNoDebounceMs = 100
 const SyncTimeoutDebounceMs = 350
 
 const FileViewWithoutProtection = ({ application, file }: FileViewProps) => {
+  const { vault } = useItemVaultInfo(file)
+
+  const [isReadonly, setIsReadonly] = useState(false)
+  useEffect(() => {
+    if (!vault) {
+      return
+    }
+
+    setIsReadonly(application.vaultUsers.isCurrentUserReadonlyVaultMember(vault))
+  }, [application.vaultUsers, vault])
+  useEffect(() => {
+    return application.vaultUsers.addEventObserver((event, data) => {
+      if (event === VaultUserServiceEvent.InvalidatedUserCacheForVault) {
+        if ((data as string) !== vault?.sharing?.sharedVaultUuid) {
+          return
+        }
+        setIsReadonly(vault ? application.vaultUsers.isCurrentUserReadonlyVaultMember(vault) : false)
+      }
+    })
+  }, [application.vaultUsers, vault])
+
   const syncTimeoutRef = useRef<number>()
   const fileInfoButtonRef = useRef<HTMLButtonElement>(null)
 
@@ -67,6 +91,12 @@ const FileViewWithoutProtection = ({ application, file }: FileViewProps) => {
   return (
     <div className="sn-component section editor" aria-label="File" ref={fileDragTargetRef}>
       <div className="flex flex-col">
+        {isReadonly && (
+          <div className="bg-warning-faded relative flex items-center px-3.5 py-2 text-sm text-accessory-tint-3">
+            <Icon type="pencil-off" className="mr-3" />
+            This file is readonly
+          </div>
+        )}
         <div
           className="content-title-bar section-title-bar section-title-bar z-editor-title-bar w-full"
           id="file-title-bar"
@@ -85,11 +115,12 @@ const FileViewWithoutProtection = ({ application, file }: FileViewProps) => {
                   spellCheck={false}
                   defaultValue={file.name}
                   autoComplete="off"
+                  disabled={isReadonly}
                 />
               </div>
             </div>
             <div className="flex items-center gap-3">
-              <LinkedItemsButton linkingController={application.linkingController} />
+              {!isReadonly && <LinkedItemsButton linkingController={application.linkingController} />}
               <RoundIconButton
                 label="File information panel"
                 onClick={toggleFileInfoPanel}
@@ -110,7 +141,11 @@ const FileViewWithoutProtection = ({ application, file }: FileViewProps) => {
             </div>
           </div>
           <div className="hidden md:flex">
-            <LinkedItemBubblesContainer item={file} linkingController={application.linkingController} />
+            <LinkedItemBubblesContainer
+              item={file}
+              linkingController={application.linkingController}
+              readonly={isReadonly}
+            />
           </div>
         </div>
       </div>

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -26,6 +26,7 @@ import {
   PrefKey,
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
   SNNote,
+  VaultUserServiceEvent,
 } from '@standardnotes/snjs'
 import { confirmDialog, DELETE_NOTE_KEYBOARD_COMMAND, KeyboardKey } from '@standardnotes/ui-services'
 import { ChangeEventHandler, createRef, CSSProperties, KeyboardEventHandler, RefObject } from 'react'
@@ -97,6 +98,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
   private removeNoteStreamObserver?: () => void
   private removeComponentManagerObserver?: () => void
   private removeInnerNoteObserver?: () => void
+  private removeVaultUsersEventHandler?: () => void
 
   private protectionTimeoutId: ReturnType<typeof setTimeout> | null = null
   private noteViewElementRef: RefObject<HTMLDivElement>
@@ -158,6 +160,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
     this.removeTrashKeyObserver?.()
     this.removeTrashKeyObserver = undefined
 
+    this.removeVaultUsersEventHandler?.()
+    this.removeVaultUsersEventHandler = undefined
+
     this.clearNoteProtectionInactivityTimer()
     ;(this.ensureNoteIsInsertedBeforeUIAction as unknown) = undefined
 
@@ -211,6 +216,18 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
   override componentDidMount(): void {
     super.componentDidMount()
 
+    this.removeVaultUsersEventHandler = this.application.vaultUsers.addEventObserver((event, data) => {
+      if (event === VaultUserServiceEvent.InvalidatedUserCacheForVault) {
+        const vault = this.application.vaults.getItemVault(this.note)
+        if ((data as string) !== vault?.sharing?.sharedVaultUuid) {
+          return
+        }
+        this.setState({
+          readonly: vault ? this.application.vaultUsers.isCurrentUserReadonlyVaultMember(vault) : false,
+        })
+      }
+    })
+
     this.registerKeyboardShortcuts()
 
     this.removeInnerNoteObserver = this.controller.addNoteInnerValueChangeObserver((note, source) => {