Collab editing design fixes#26528
Conversation
…onent to match title baseline
…ponent by deleting the "Avatars" span
There was a problem hiding this comment.
Thank you @alvarosabu ❤️ great work!
There are a few things we should fix. Some aren’t directly related to your changes, but they’re worth addressing.
-
Let’s also apply the new alignment (right) to these routes:
- app/src/modules/files/routes/item.vue
- app/src/modules/users/routes/item.vue
- app/src/views/private/components/overlay-item.vue
-
None of the styles for
.header-collabin these files are necessary due to the new alignment (right). Let’s make sure to remove them carefully.- app/src/modules/content/routes/item.vue
- app/src/modules/files/routes/item.vue
- app/src/modules/users/routes/item.vue
- app/src/views/private/components/overlay-item.vue
-
Let’s ensure to use a spacer instead of absolute positioning for
.header-collabin: app/src/components/v-form/components/form-field-label.vue This will ensure the avatars don’t cover long text in labels.
…sting HeaderCollab margin for improved layout
…ay-item components
…le and non-clickable states
|
Little update: I’ve fixed the focusIntoView scroll behavior and a few other minor things. |
🙏 |
… in form-field-label
…ltiple files for consistent collaboration user display
* Test save action broadcast * Fix formatting * fix frontend connecting multiple times * improve room inactivity logic * fix client clearing * fix update before focus * ignore changes to fields focused by other users * fix rejoining a room * fix singleton not rendering HeaderCollab * make collab work with ai * don't give out duplicate colors if not necessary. * fix giving out invalid colors * update disconnection logic to be instance based instead of client based * update timings * Remove unused imports * Update test to pass client.uid instead * Fix security of nested payload sanitization * Use prettier to format * Fix messenger race condition * Fix empty keys array invalidation * Fix mocks * Add collab and store tests * reuse verify permissions for sanitize payload * remove unused code * fix ai chat working with collab * fix cleaning clients that are in room but not in messenger * Fix wildcard access * Fix nested create without PK * Cleanup removed fn * Remove room * Add missing await * Patch unit tests * Merge async deepMapWithSchema and refactor sanitization * Fix usages and tests * Fix relational null updates treated as objects * Prevent unauthorized field unsets and relationship updates * Propagate item deletion * Simplify room lifecycle and add recovery * Update tests * Implement distributed cleanup and standardize env configuration * Cleanup and refactor to RoomManager * Address CodeQL warning * Add blackbox tests * Handle integer PK and handle invalid schema * add error messages to client * fix error types * Add basic deep relational tests * Patch tests and improve websocket transport * remove unused import * add frontend delete * improve error handling and fix item delete * clearn up room logic * update tests * Update blackbox tests * Use waitForMatchingMessage * Specify timeout for seeding * Improve tests * fix room tests * fix sanitize-payload and verify-permissions * update discard banner in app * Implicitly switch focus when updating * Try accounting for misordered messages * clean console * Fix build * fmt * fmt * fmt * Verify permissions before relational processing * Improve update clearing * Fix double join events * Fix disconnected icon when disabled * Handle error from getService * Pass collab context to overlay * Broadcast to all users to fix relational item not receiving update * Skip disabling interfaces with relational specials * Add shared discard and drawer refinements * sync item update notification * fix double save message in frontend * Add collab for users and files * fix join error showing on non existent items * Reset changes when last person leaves * don't focus on focused fields * fix headerCollab not showing with coll-template * Check if values has changed on update * fix page header hiding collab * Remove unused imports * Fix versioned propagation * Improve copy * Fix delete handler * Update collab tests * fmt * Update comments * fix making color tab persistent * only enable collab if needed * fix wrong collision on no changes * Validate changes on join and update * Update packages/utils/shared/generate-joi.ts Co-authored-by: judda <[email protected]> * Simplify permission tagging and add integration test * Test color propagation * Fix rerun constraint * Optional colors * cleanup code * Add namespace config and fix redlock * update room functions to use global memory * code cleanup * Add fields to discard * Fix messenger mock * fix m2m and m2a and initialChanges in frontend * Mock global rooms * update error types and improve verify permissions * add version permission check * Match message instead * Add missing await for version check * Ensure consistent error types and patch tests * Fix lint * Fix version perms check * Update mock and errors * Use fake timers * Improve collab disabling * Add leader based room closure * Optimize distributed messaging and implement non-blocking termination * Optimize with validateItemAccess Co-authored-by: judda <[email protected]> * Streamline field permissions check * Fix focus erroring * Try improve blackbox stability with waitForMatchingMessage * Improve numeric keys stability * Fallback to collection perms when sanitizing missing items * Add tests * Sanitize encrypt field special Co-authored-by: judda <[email protected]> * Fix double o2m edits not cleared in app * Reuse util * Clear relational detailed update syntax * Unify event sync to distributed bus * Catch unhandled promise rejections during test cleanup * Fix M2O null propagation by ensuring correct item context * Update api/src/websocket/handlers/collab/sanitize-payload.ts Co-authored-by: judda <[email protected]> * Consolidate watchers to resolve double join and race conditions * Allow metadata propagation in detailed relational updates * simplify discard message * early return on empty updateAll message * improve discard further * fix tests * Consolidate and optimize payload validation and sanitization * fix permission check on discard * fix collab connecting when it shouldn't * maybe fix room closure bug * Polish Co-authored-by: judda <[email protected]> * Check singleton create * Reconcile M2O objects * fix orphan clients cleanup * cleanup and fix code further * move deep-map-with-schema to shared * improve logs * fix leave message * cleanup singleton check * remove duplicate perm check * improve message handler singleton check * fix self refernced relation disconnects * fix frontend user name containing null * fix * in discard * fix leave counter * fix race condition on edits being updated before fieldUpdate gets called * separate ws sdk * move collab sdk inside use-collab * remove unused imports * move collab folder 1 level up * fix test * fix headerCollab when formFieldLabel is hidden * Cleanup discard message in app * Discard should check read and update perms * Rename to collaborative editing * Add to telemetry * Move getSchema in * Fix renaming * use newer sdk functions * Remove moved files * fix rejoining rooms * Optimize discard * Collab editing design fixes (#26528) * Update avatar border styling and adjust x-small size in v-avatar component to match title baseline * Refactor HeaderCollab component to use UserPopover for user avatars * Remove unused template for HeaderCollab and clean up overlay-item component by deleting the "Avatars" span * Remove unnecessary blank line in HeaderCollab component styling * Move HeaderCollab to action slot and self align center * Add v-avatar border color and width variables * Add font-size comment for v-avatar in HeaderCollab component * Update v-avatar border width to use theme variable instead of local variable * Apply minor styles fixes * Refactor HeaderCollab component template by repositioning icons and margin rules * Refactor HeaderCollab slot position in other files * Enhance form field label styles by adding flex-grow property and adjusting HeaderCollab margin for improved layout * Remove unnecessary margin styles from header-collab in item and overlay-item components * format * Remove unnecessary hide-current and x-small prop from HeaderCollab component * improve focus handling * refactor v-avatar component to use a single component tag for clickable and non-clickable states * fix: adjust sizes in HeaderCollab * feat: add type prop to HeaderCollab for flexible usage in header and field contexts * fix: adjust HeaderCollab styling for field context and improve layout in form-field-label * fix: update HeaderCollab instances to use 'avatars' class for improved styling * refactor: replace HeaderCollab with CollabAvatars component across multiple files for consistent collaboration user display * fix eslint --------- Co-authored-by: ian <[email protected]> Co-authored-by: formfcw <[email protected]> * Rename blackbox for consistency * Handle empty buffers to prevent errors during race conditions or disconnects * Optimizations * Use debug instead of info * Cleanup on shutdown signal * Cleanup optimization * Add test and cleanup * Ensure sequential bus processing * Use isRelational util Co-authored-by: Florian C. Wachmann <[email protected]> * Fix import and accept DeepPartial * Wait for connection * fix too strict pk check * Improve bb flakiness * Unset should not acquire focus * Test sticky focus behavior * Update telemetry to include env accuracy * Use getter for reactivity * Ensure focus state initialization * Add composable tests * Await lock releasing * Update memory tests * Update translations * Add websockets_enabled to telemetry * Update changesets * Reduce LRU cache capacity to 2000 * Add missing await * Fix room cleanup * Fix non-existent items (null) skipping cache * Move zod to dependencies in @directus/types * Update lockfile * Fmt * Skip cache metadata calculation if invalidated Co-authored-by: judda <[email protected]> * Add reconnect param Co-authored-by: judda <[email protected]> * make relational disabled on focus again * only show 1st letter in CollabAvatars * fix: use collab typescript (#26549) * Refactor message handling in useCollab composable for type safety * Enhance type safety in useCollab composable by updating field definitions to use object syntax for nested fields * Add CollabUserInfo type for user data structure in useCollab composable * Update TODO links in useCollab to GH issue instead * Refactor field definitions in useCollab to use dot notation for nested avatar properties and keep types * Update field definitions in useCollab to utilize DirectusUser * Revert to object notation * fix sending leave message on item delete * Optimize client room lookup to check local node only (#26569) * Optimize client room lookup to check local node only * Update test * Update comment * Update wording Co-authored-by: Nitwel <[email protected]> --------- Co-authored-by: Nitwel <[email protected]> * update unknown user to use icon instead * code cleanup * Fix blackbox create policy naming * undo ai suggestion * improve jsdoc * fix jsdoc * fix again jsdoc * more fixidixi * make collab opt in by default * Update default enabled state to false * Enable collab for blackbox * Remove only sequential * Fix MSSQL default value Co-authored-by: judda <[email protected]> --------- Co-authored-by: ian <[email protected]> Co-authored-by: judda <[email protected]> Co-authored-by: Alvaro Saburido <[email protected]> Co-authored-by: formfcw <[email protected]> Co-authored-by: Alex Gaillard <[email protected]>
* Remove room * Add missing await * Patch unit tests * Merge async deepMapWithSchema and refactor sanitization * Fix usages and tests * Fix relational null updates treated as objects * Prevent unauthorized field unsets and relationship updates * Propagate item deletion * Simplify room lifecycle and add recovery * Update tests * Implement distributed cleanup and standardize env configuration * Cleanup and refactor to RoomManager * Address CodeQL warning * Add blackbox tests * Handle integer PK and handle invalid schema * add error messages to client * fix error types * Add basic deep relational tests * Patch tests and improve websocket transport * remove unused import * add frontend delete * improve error handling and fix item delete * clearn up room logic * update tests * Update blackbox tests * Use waitForMatchingMessage * Specify timeout for seeding * Improve tests * fix room tests * fix sanitize-payload and verify-permissions * update discard banner in app * Implicitly switch focus when updating * Try accounting for misordered messages * clean console * Fix build * fmt * fmt * fmt * Verify permissions before relational processing * Improve update clearing * Fix double join events * Fix disconnected icon when disabled * Handle error from getService * Pass collab context to overlay * Broadcast to all users to fix relational item not receiving update * Skip disabling interfaces with relational specials * Add shared discard and drawer refinements * sync item update notification * fix double save message in frontend * Add collab for users and files * fix join error showing on non existent items * Reset changes when last person leaves * don't focus on focused fields * fix headerCollab not showing with coll-template * Check if values has changed on update * fix page header hiding collab * Remove unused imports * Fix versioned propagation * Improve copy * Fix delete handler * Update collab tests * fmt * Update comments * fix making color tab persistent * only enable collab if needed * fix wrong collision on no changes * Validate changes on join and update * Update packages/utils/shared/generate-joi.ts Co-authored-by: judda <[email protected]> * Simplify permission tagging and add integration test * Test color propagation * Fix rerun constraint * Optional colors * cleanup code * Add namespace config and fix redlock * update room functions to use global memory * code cleanup * Add fields to discard * Fix messenger mock * fix m2m and m2a and initialChanges in frontend * Mock global rooms * update error types and improve verify permissions * add version permission check * Match message instead * Add missing await for version check * Ensure consistent error types and patch tests * Fix lint * Fix version perms check * Update mock and errors * Use fake timers * Improve collab disabling * Add leader based room closure * Optimize distributed messaging and implement non-blocking termination * Optimize with validateItemAccess Co-authored-by: judda <[email protected]> * Streamline field permissions check * Fix focus erroring * Try improve blackbox stability with waitForMatchingMessage * Improve numeric keys stability * Fallback to collection perms when sanitizing missing items * Add tests * Sanitize encrypt field special Co-authored-by: judda <[email protected]> * Fix double o2m edits not cleared in app * Reuse util * Clear relational detailed update syntax * Unify event sync to distributed bus * Catch unhandled promise rejections during test cleanup * Fix M2O null propagation by ensuring correct item context * Update api/src/websocket/handlers/collab/sanitize-payload.ts Co-authored-by: judda <[email protected]> * Consolidate watchers to resolve double join and race conditions * Allow metadata propagation in detailed relational updates * simplify discard message * early return on empty updateAll message * improve discard further * fix tests * Consolidate and optimize payload validation and sanitization * fix permission check on discard * fix collab connecting when it shouldn't * maybe fix room closure bug * Polish Co-authored-by: judda <[email protected]> * Check singleton create * Reconcile M2O objects * fix orphan clients cleanup * cleanup and fix code further * move deep-map-with-schema to shared * improve logs * fix leave message * cleanup singleton check * remove duplicate perm check * improve message handler singleton check * fix self refernced relation disconnects * fix frontend user name containing null * fix * in discard * fix leave counter * fix race condition on edits being updated before fieldUpdate gets called * separate ws sdk * move collab sdk inside use-collab * remove unused imports * move collab folder 1 level up * fix test * fix headerCollab when formFieldLabel is hidden * Cleanup discard message in app * Discard should check read and update perms * Rename to collaborative editing * Add to telemetry * Move getSchema in * Fix renaming * use newer sdk functions * Remove moved files * fix rejoining rooms * Optimize discard * Collab editing design fixes (#26528) * Update avatar border styling and adjust x-small size in v-avatar component to match title baseline * Refactor HeaderCollab component to use UserPopover for user avatars * Remove unused template for HeaderCollab and clean up overlay-item component by deleting the "Avatars" span * Remove unnecessary blank line in HeaderCollab component styling * Move HeaderCollab to action slot and self align center * Add v-avatar border color and width variables * Add font-size comment for v-avatar in HeaderCollab component * Update v-avatar border width to use theme variable instead of local variable * Apply minor styles fixes * Refactor HeaderCollab component template by repositioning icons and margin rules * Refactor HeaderCollab slot position in other files * Enhance form field label styles by adding flex-grow property and adjusting HeaderCollab margin for improved layout * Remove unnecessary margin styles from header-collab in item and overlay-item components * format * Remove unnecessary hide-current and x-small prop from HeaderCollab component * improve focus handling * refactor v-avatar component to use a single component tag for clickable and non-clickable states * fix: adjust sizes in HeaderCollab * feat: add type prop to HeaderCollab for flexible usage in header and field contexts * fix: adjust HeaderCollab styling for field context and improve layout in form-field-label * fix: update HeaderCollab instances to use 'avatars' class for improved styling * refactor: replace HeaderCollab with CollabAvatars component across multiple files for consistent collaboration user display * fix eslint --------- Co-authored-by: ian <[email protected]> Co-authored-by: formfcw <[email protected]> * Rename blackbox for consistency * Handle empty buffers to prevent errors during race conditions or disconnects * Optimizations * Use debug instead of info * Cleanup on shutdown signal * Cleanup optimization * Add test and cleanup * Ensure sequential bus processing * Use isRelational util Co-authored-by: Florian C. Wachmann <[email protected]> * Fix import and accept DeepPartial * Wait for connection * fix too strict pk check * Improve bb flakiness * Unset should not acquire focus * Test sticky focus behavior * Update telemetry to include env accuracy * Use getter for reactivity * Ensure focus state initialization * Add composable tests * Await lock releasing * Update memory tests * Update translations * Add websockets_enabled to telemetry * Update changesets * Reduce LRU cache capacity to 2000 * Add missing await * Fix room cleanup * Fix non-existent items (null) skipping cache * Move zod to dependencies in @directus/types * Update lockfile * Fmt * Skip cache metadata calculation if invalidated Co-authored-by: judda <[email protected]> * Add reconnect param Co-authored-by: judda <[email protected]> * make relational disabled on focus again * only show 1st letter in CollabAvatars * fix: use collab typescript (#26549) * Refactor message handling in useCollab composable for type safety * Enhance type safety in useCollab composable by updating field definitions to use object syntax for nested fields * Add CollabUserInfo type for user data structure in useCollab composable * Update TODO links in useCollab to GH issue instead * Refactor field definitions in useCollab to use dot notation for nested avatar properties and keep types * Update field definitions in useCollab to utilize DirectusUser * Revert to object notation * fix sending leave message on item delete * Optimize client room lookup to check local node only (#26569) * Optimize client room lookup to check local node only * Update test * Update comment * Update wording Co-authored-by: Nitwel <[email protected]> --------- Co-authored-by: Nitwel <[email protected]> * Replace tooltip with VList and current state * update unknown user to use icon instead * code cleanup * Refactor collaboration components: replace CollabAvatars with CollabField and CollabHeader in various files for improved user display and functionality. * Remove unnecessary mouseleave event from VAvatar in CollabHeader for cleaner user interaction. * Fix blackbox create policy naming * Format and linting * Adding new translation keys for editing and viewing states * Remove unnecessary flex properties from .v-list-item in CollabHeader for improved layout consistency. * Remove unused more-button CSS rules from CollabField.vue * Remove unused classes on collab field * Remove unused .user-status class from CollabHeader.vue for cleaner CSS * Update user count display in CollabHeader.vue to reflect DISPLAY_LIMIT instead of a hardcoded value for better maintainability. * Add focused and connectionId props to CollabHeader in item.vue and overlay-item.vue for enhanced collaboration features * Refactor CollabHandler to streamline client accountability checks in onJoin method. Removed redundant checks for unauthenticated clients and improved handling of share accounts. * Refactor CollabHeader and related components for improved readability by formatting template code and enhancing the structure of conditional rendering. * Update CollabHeader.vue to replace min-width with min-inline-size for better CSS compatibility. * Update CollabHeader.vue to handle unknown user names and adjust gap spacing for improved layout consistency. * Update English translations in en-US.yaml to use curly quotes for the collab_editing_field string. * Add cursor style to CollabField component for better user experience * Add popover for current user * Add invert prop to VMenu component for color customization and update CollabHeader to utilize the new feature. * Refactor collaboration components to reuse logic * remove unrelated changesets * Rename CollabField and CollabHeader imports to CollabIndicatorField and CollabIndicatorHeader across multiple components * remove unintended change * Refactor CSS class names for collab styles components for consistency * improve typography * Refactor CollabIndicatorHeader to use VList and VListItem for user display and ensure only avatars currently editing are clickable * Refactor CSS for CollabIndicatorHeader to remove redundant styles for avatar margins * Refactor Collab components to utilize getFocusId utility for generating user focus IDs and add unit tests for getFocusId functionality. * Update CollabIndicatorField and CollabIndicatorHeader to handle unknown user names gracefully by using translation fallback. * Update CollabIndicatorHeader to conditionally enable clickable avatars based on user focus state * Add translation for current user in collaborative editing context * Add collaboration state indicators and minor design updates for user editing/viewing status * Fix import formatting in utils.test.ts for consistency * Update CollabIndicatorHeader to correctly identify the current user based on connection * Refactor translation key for current user in collaborative editing context to improve clarity and consistency in CollabIndicatorHeader component. * Improve formatting of user name display in CollabIndicatorHeader component for better readability. --------- Co-authored-by: ian <[email protected]> Co-authored-by: Nitwel <[email protected]> Co-authored-by: judda <[email protected]> Co-authored-by: formfcw <[email protected]>
* Remove room * Add missing await * Patch unit tests * Merge async deepMapWithSchema and refactor sanitization * Fix usages and tests * Fix relational null updates treated as objects * Prevent unauthorized field unsets and relationship updates * Propagate item deletion * Simplify room lifecycle and add recovery * Update tests * Implement distributed cleanup and standardize env configuration * Cleanup and refactor to RoomManager * Address CodeQL warning * Add blackbox tests * Handle integer PK and handle invalid schema * add error messages to client * fix error types * Add basic deep relational tests * Patch tests and improve websocket transport * remove unused import * add frontend delete * improve error handling and fix item delete * clearn up room logic * update tests * Update blackbox tests * Use waitForMatchingMessage * Specify timeout for seeding * Improve tests * fix room tests * fix sanitize-payload and verify-permissions * update discard banner in app * Implicitly switch focus when updating * Try accounting for misordered messages * clean console * Fix build * fmt * fmt * fmt * Verify permissions before relational processing * Improve update clearing * Fix double join events * Fix disconnected icon when disabled * Handle error from getService * Pass collab context to overlay * Broadcast to all users to fix relational item not receiving update * Skip disabling interfaces with relational specials * Add shared discard and drawer refinements * sync item update notification * fix double save message in frontend * Add collab for users and files * fix join error showing on non existent items * Reset changes when last person leaves * don't focus on focused fields * fix headerCollab not showing with coll-template * Check if values has changed on update * fix page header hiding collab * Remove unused imports * Fix versioned propagation * Improve copy * Fix delete handler * Update collab tests * fmt * Update comments * fix making color tab persistent * only enable collab if needed * fix wrong collision on no changes * Validate changes on join and update * Update packages/utils/shared/generate-joi.ts Co-authored-by: judda <[email protected]> * Simplify permission tagging and add integration test * Test color propagation * Fix rerun constraint * Optional colors * cleanup code * Add namespace config and fix redlock * update room functions to use global memory * code cleanup * Add fields to discard * Fix messenger mock * fix m2m and m2a and initialChanges in frontend * Mock global rooms * update error types and improve verify permissions * add version permission check * Match message instead * Add missing await for version check * Ensure consistent error types and patch tests * Fix lint * Fix version perms check * Update mock and errors * Use fake timers * Improve collab disabling * Add leader based room closure * Optimize distributed messaging and implement non-blocking termination * Optimize with validateItemAccess Co-authored-by: judda <[email protected]> * Streamline field permissions check * Fix focus erroring * Try improve blackbox stability with waitForMatchingMessage * Improve numeric keys stability * Fallback to collection perms when sanitizing missing items * Add tests * Sanitize encrypt field special Co-authored-by: judda <[email protected]> * Fix double o2m edits not cleared in app * Reuse util * Clear relational detailed update syntax * Unify event sync to distributed bus * Catch unhandled promise rejections during test cleanup * Fix M2O null propagation by ensuring correct item context * Update api/src/websocket/handlers/collab/sanitize-payload.ts Co-authored-by: judda <[email protected]> * Consolidate watchers to resolve double join and race conditions * Allow metadata propagation in detailed relational updates * simplify discard message * early return on empty updateAll message * improve discard further * fix tests * Consolidate and optimize payload validation and sanitization * fix permission check on discard * fix collab connecting when it shouldn't * maybe fix room closure bug * Polish Co-authored-by: judda <[email protected]> * Check singleton create * Reconcile M2O objects * fix orphan clients cleanup * cleanup and fix code further * move deep-map-with-schema to shared * improve logs * fix leave message * cleanup singleton check * remove duplicate perm check * improve message handler singleton check * fix self refernced relation disconnects * fix frontend user name containing null * fix * in discard * fix leave counter * fix race condition on edits being updated before fieldUpdate gets called * separate ws sdk * move collab sdk inside use-collab * remove unused imports * move collab folder 1 level up * fix test * fix headerCollab when formFieldLabel is hidden * Cleanup discard message in app * Discard should check read and update perms * Rename to collaborative editing * Add to telemetry * Move getSchema in * Fix renaming * use newer sdk functions * Remove moved files * fix rejoining rooms * Optimize discard * Collab editing design fixes (directus#26528) * Update avatar border styling and adjust x-small size in v-avatar component to match title baseline * Refactor HeaderCollab component to use UserPopover for user avatars * Remove unused template for HeaderCollab and clean up overlay-item component by deleting the "Avatars" span * Remove unnecessary blank line in HeaderCollab component styling * Move HeaderCollab to action slot and self align center * Add v-avatar border color and width variables * Add font-size comment for v-avatar in HeaderCollab component * Update v-avatar border width to use theme variable instead of local variable * Apply minor styles fixes * Refactor HeaderCollab component template by repositioning icons and margin rules * Refactor HeaderCollab slot position in other files * Enhance form field label styles by adding flex-grow property and adjusting HeaderCollab margin for improved layout * Remove unnecessary margin styles from header-collab in item and overlay-item components * format * Remove unnecessary hide-current and x-small prop from HeaderCollab component * improve focus handling * refactor v-avatar component to use a single component tag for clickable and non-clickable states * fix: adjust sizes in HeaderCollab * feat: add type prop to HeaderCollab for flexible usage in header and field contexts * fix: adjust HeaderCollab styling for field context and improve layout in form-field-label * fix: update HeaderCollab instances to use 'avatars' class for improved styling * refactor: replace HeaderCollab with CollabAvatars component across multiple files for consistent collaboration user display * fix eslint --------- Co-authored-by: ian <[email protected]> Co-authored-by: formfcw <[email protected]> * Rename blackbox for consistency * Handle empty buffers to prevent errors during race conditions or disconnects * Optimizations * Use debug instead of info * Cleanup on shutdown signal * Cleanup optimization * Add test and cleanup * Ensure sequential bus processing * Use isRelational util Co-authored-by: Florian C. Wachmann <[email protected]> * Fix import and accept DeepPartial * Wait for connection * fix too strict pk check * Improve bb flakiness * Unset should not acquire focus * Test sticky focus behavior * Update telemetry to include env accuracy * Use getter for reactivity * Ensure focus state initialization * Add composable tests * Await lock releasing * Update memory tests * Update translations * Add websockets_enabled to telemetry * Update changesets * Reduce LRU cache capacity to 2000 * Add missing await * Fix room cleanup * Fix non-existent items (null) skipping cache * Move zod to dependencies in @directus/types * Update lockfile * Fmt * Skip cache metadata calculation if invalidated Co-authored-by: judda <[email protected]> * Add reconnect param Co-authored-by: judda <[email protected]> * make relational disabled on focus again * only show 1st letter in CollabAvatars * fix: use collab typescript (directus#26549) * Refactor message handling in useCollab composable for type safety * Enhance type safety in useCollab composable by updating field definitions to use object syntax for nested fields * Add CollabUserInfo type for user data structure in useCollab composable * Update TODO links in useCollab to GH issue instead * Refactor field definitions in useCollab to use dot notation for nested avatar properties and keep types * Update field definitions in useCollab to utilize DirectusUser * Revert to object notation * fix sending leave message on item delete * Optimize client room lookup to check local node only (directus#26569) * Optimize client room lookup to check local node only * Update test * Update comment * Update wording Co-authored-by: Nitwel <[email protected]> --------- Co-authored-by: Nitwel <[email protected]> * Replace tooltip with VList and current state * update unknown user to use icon instead * code cleanup * Refactor collaboration components: replace CollabAvatars with CollabField and CollabHeader in various files for improved user display and functionality. * Remove unnecessary mouseleave event from VAvatar in CollabHeader for cleaner user interaction. * Fix blackbox create policy naming * Format and linting * Adding new translation keys for editing and viewing states * Remove unnecessary flex properties from .v-list-item in CollabHeader for improved layout consistency. * Remove unused more-button CSS rules from CollabField.vue * Remove unused classes on collab field * Remove unused .user-status class from CollabHeader.vue for cleaner CSS * Update user count display in CollabHeader.vue to reflect DISPLAY_LIMIT instead of a hardcoded value for better maintainability. * Add focused and connectionId props to CollabHeader in item.vue and overlay-item.vue for enhanced collaboration features * Refactor CollabHandler to streamline client accountability checks in onJoin method. Removed redundant checks for unauthenticated clients and improved handling of share accounts. * Refactor CollabHeader and related components for improved readability by formatting template code and enhancing the structure of conditional rendering. * Update CollabHeader.vue to replace min-width with min-inline-size for better CSS compatibility. * Update CollabHeader.vue to handle unknown user names and adjust gap spacing for improved layout consistency. * Update English translations in en-US.yaml to use curly quotes for the collab_editing_field string. * Add cursor style to CollabField component for better user experience * Add popover for current user * Add invert prop to VMenu component for color customization and update CollabHeader to utilize the new feature. * Refactor collaboration components to reuse logic * remove unrelated changesets * Rename CollabField and CollabHeader imports to CollabIndicatorField and CollabIndicatorHeader across multiple components * remove unintended change * Refactor CSS class names for collab styles components for consistency * improve typography * Refactor CollabIndicatorHeader to use VList and VListItem for user display and ensure only avatars currently editing are clickable * Refactor CSS for CollabIndicatorHeader to remove redundant styles for avatar margins * Refactor Collab components to utilize getFocusId utility for generating user focus IDs and add unit tests for getFocusId functionality. * Update CollabIndicatorField and CollabIndicatorHeader to handle unknown user names gracefully by using translation fallback. * Update CollabIndicatorHeader to conditionally enable clickable avatars based on user focus state * Add translation for current user in collaborative editing context * Add collaboration state indicators and minor design updates for user editing/viewing status * Fix import formatting in utils.test.ts for consistency * Update CollabIndicatorHeader to correctly identify the current user based on connection * Refactor translation key for current user in collaborative editing context to improve clarity and consistency in CollabIndicatorHeader component. * Improve formatting of user name display in CollabIndicatorHeader component for better readability. --------- Co-authored-by: ian <[email protected]> Co-authored-by: Nitwel <[email protected]> Co-authored-by: judda <[email protected]> Co-authored-by: formfcw <[email protected]>
* Test save action broadcast * Fix formatting * fix frontend connecting multiple times * improve room inactivity logic * fix client clearing * fix update before focus * ignore changes to fields focused by other users * fix rejoining a room * fix singleton not rendering HeaderCollab * make collab work with ai * don't give out duplicate colors if not necessary. * fix giving out invalid colors * update disconnection logic to be instance based instead of client based * update timings * Remove unused imports * Update test to pass client.uid instead * Fix security of nested payload sanitization * Use prettier to format * Fix messenger race condition * Fix empty keys array invalidation * Fix mocks * Add collab and store tests * reuse verify permissions for sanitize payload * remove unused code * fix ai chat working with collab * fix cleaning clients that are in room but not in messenger * Fix wildcard access * Fix nested create without PK * Cleanup removed fn * Remove room * Add missing await * Patch unit tests * Merge async deepMapWithSchema and refactor sanitization * Fix usages and tests * Fix relational null updates treated as objects * Prevent unauthorized field unsets and relationship updates * Propagate item deletion * Simplify room lifecycle and add recovery * Update tests * Implement distributed cleanup and standardize env configuration * Cleanup and refactor to RoomManager * Address CodeQL warning * Add blackbox tests * Handle integer PK and handle invalid schema * add error messages to client * fix error types * Add basic deep relational tests * Patch tests and improve websocket transport * remove unused import * add frontend delete * improve error handling and fix item delete * clearn up room logic * update tests * Update blackbox tests * Use waitForMatchingMessage * Specify timeout for seeding * Improve tests * fix room tests * fix sanitize-payload and verify-permissions * update discard banner in app * Implicitly switch focus when updating * Try accounting for misordered messages * clean console * Fix build * fmt * fmt * fmt * Verify permissions before relational processing * Improve update clearing * Fix double join events * Fix disconnected icon when disabled * Handle error from getService * Pass collab context to overlay * Broadcast to all users to fix relational item not receiving update * Skip disabling interfaces with relational specials * Add shared discard and drawer refinements * sync item update notification * fix double save message in frontend * Add collab for users and files * fix join error showing on non existent items * Reset changes when last person leaves * don't focus on focused fields * fix headerCollab not showing with coll-template * Check if values has changed on update * fix page header hiding collab * Remove unused imports * Fix versioned propagation * Improve copy * Fix delete handler * Update collab tests * fmt * Update comments * fix making color tab persistent * only enable collab if needed * fix wrong collision on no changes * Validate changes on join and update * Update packages/utils/shared/generate-joi.ts Co-authored-by: judda <[email protected]> * Simplify permission tagging and add integration test * Test color propagation * Fix rerun constraint * Optional colors * cleanup code * Add namespace config and fix redlock * update room functions to use global memory * code cleanup * Add fields to discard * Fix messenger mock * fix m2m and m2a and initialChanges in frontend * Mock global rooms * update error types and improve verify permissions * add version permission check * Match message instead * Add missing await for version check * Ensure consistent error types and patch tests * Fix lint * Fix version perms check * Update mock and errors * Use fake timers * Improve collab disabling * Add leader based room closure * Optimize distributed messaging and implement non-blocking termination * Optimize with validateItemAccess Co-authored-by: judda <[email protected]> * Streamline field permissions check * Fix focus erroring * Try improve blackbox stability with waitForMatchingMessage * Improve numeric keys stability * Fallback to collection perms when sanitizing missing items * Add tests * Sanitize encrypt field special Co-authored-by: judda <[email protected]> * Fix double o2m edits not cleared in app * Reuse util * Clear relational detailed update syntax * Unify event sync to distributed bus * Catch unhandled promise rejections during test cleanup * Fix M2O null propagation by ensuring correct item context * Update api/src/websocket/handlers/collab/sanitize-payload.ts Co-authored-by: judda <[email protected]> * Consolidate watchers to resolve double join and race conditions * Allow metadata propagation in detailed relational updates * simplify discard message * early return on empty updateAll message * improve discard further * fix tests * Consolidate and optimize payload validation and sanitization * fix permission check on discard * fix collab connecting when it shouldn't * maybe fix room closure bug * Polish Co-authored-by: judda <[email protected]> * Check singleton create * Reconcile M2O objects * fix orphan clients cleanup * cleanup and fix code further * move deep-map-with-schema to shared * improve logs * fix leave message * cleanup singleton check * remove duplicate perm check * improve message handler singleton check * fix self refernced relation disconnects * fix frontend user name containing null * fix * in discard * fix leave counter * fix race condition on edits being updated before fieldUpdate gets called * separate ws sdk * move collab sdk inside use-collab * remove unused imports * move collab folder 1 level up * fix test * fix headerCollab when formFieldLabel is hidden * Cleanup discard message in app * Discard should check read and update perms * Rename to collaborative editing * Add to telemetry * Move getSchema in * Fix renaming * use newer sdk functions * Remove moved files * fix rejoining rooms * Optimize discard * Collab editing design fixes (#26528) * Update avatar border styling and adjust x-small size in v-avatar component to match title baseline * Refactor HeaderCollab component to use UserPopover for user avatars * Remove unused template for HeaderCollab and clean up overlay-item component by deleting the "Avatars" span * Remove unnecessary blank line in HeaderCollab component styling * Move HeaderCollab to action slot and self align center * Add v-avatar border color and width variables * Add font-size comment for v-avatar in HeaderCollab component * Update v-avatar border width to use theme variable instead of local variable * Apply minor styles fixes * Refactor HeaderCollab component template by repositioning icons and margin rules * Refactor HeaderCollab slot position in other files * Enhance form field label styles by adding flex-grow property and adjusting HeaderCollab margin for improved layout * Remove unnecessary margin styles from header-collab in item and overlay-item components * format * Remove unnecessary hide-current and x-small prop from HeaderCollab component * improve focus handling * refactor v-avatar component to use a single component tag for clickable and non-clickable states * fix: adjust sizes in HeaderCollab * feat: add type prop to HeaderCollab for flexible usage in header and field contexts * fix: adjust HeaderCollab styling for field context and improve layout in form-field-label * fix: update HeaderCollab instances to use 'avatars' class for improved styling * refactor: replace HeaderCollab with CollabAvatars component across multiple files for consistent collaboration user display * fix eslint --------- Co-authored-by: ian <[email protected]> Co-authored-by: formfcw <[email protected]> * Rename blackbox for consistency * Handle empty buffers to prevent errors during race conditions or disconnects * Optimizations * Use debug instead of info * Cleanup on shutdown signal * Cleanup optimization * Add test and cleanup * Ensure sequential bus processing * Use isRelational util Co-authored-by: Florian C. Wachmann <[email protected]> * Fix import and accept DeepPartial * Wait for connection * fix too strict pk check * Improve bb flakiness * Unset should not acquire focus * Test sticky focus behavior * Update telemetry to include env accuracy * Use getter for reactivity * Ensure focus state initialization * Add composable tests * Await lock releasing * Update memory tests * Update translations * Add websockets_enabled to telemetry * Update changesets * Reduce LRU cache capacity to 2000 * Add missing await * Fix room cleanup * Fix non-existent items (null) skipping cache * Move zod to dependencies in @directus/types * Update lockfile * Fmt * Skip cache metadata calculation if invalidated Co-authored-by: judda <[email protected]> * Add reconnect param Co-authored-by: judda <[email protected]> * make relational disabled on focus again * only show 1st letter in CollabAvatars * fix: use collab typescript (#26549) * Refactor message handling in useCollab composable for type safety * Enhance type safety in useCollab composable by updating field definitions to use object syntax for nested fields * Add CollabUserInfo type for user data structure in useCollab composable * Update TODO links in useCollab to GH issue instead * Refactor field definitions in useCollab to use dot notation for nested avatar properties and keep types * Update field definitions in useCollab to utilize DirectusUser * Revert to object notation * fix sending leave message on item delete * Optimize client room lookup to check local node only (#26569) * Optimize client room lookup to check local node only * Update test * Update comment * Update wording Co-authored-by: Nitwel <[email protected]> --------- Co-authored-by: Nitwel <[email protected]> * update unknown user to use icon instead * code cleanup * Fix blackbox create policy naming * undo ai suggestion * improve jsdoc * fix jsdoc * fix again jsdoc * more fixidixi * make collab opt in by default * Update default enabled state to false * Enable collab for blackbox * Remove only sequential * Fix MSSQL default value Co-authored-by: judda <[email protected]> --------- Co-authored-by: ian <[email protected]> Co-authored-by: judda <[email protected]> Co-authored-by: Alvaro Saburido <[email protected]> Co-authored-by: formfcw <[email protected]> Co-authored-by: Alex Gaillard <[email protected]>
* Remove room * Add missing await * Patch unit tests * Merge async deepMapWithSchema and refactor sanitization * Fix usages and tests * Fix relational null updates treated as objects * Prevent unauthorized field unsets and relationship updates * Propagate item deletion * Simplify room lifecycle and add recovery * Update tests * Implement distributed cleanup and standardize env configuration * Cleanup and refactor to RoomManager * Address CodeQL warning * Add blackbox tests * Handle integer PK and handle invalid schema * add error messages to client * fix error types * Add basic deep relational tests * Patch tests and improve websocket transport * remove unused import * add frontend delete * improve error handling and fix item delete * clearn up room logic * update tests * Update blackbox tests * Use waitForMatchingMessage * Specify timeout for seeding * Improve tests * fix room tests * fix sanitize-payload and verify-permissions * update discard banner in app * Implicitly switch focus when updating * Try accounting for misordered messages * clean console * Fix build * fmt * fmt * fmt * Verify permissions before relational processing * Improve update clearing * Fix double join events * Fix disconnected icon when disabled * Handle error from getService * Pass collab context to overlay * Broadcast to all users to fix relational item not receiving update * Skip disabling interfaces with relational specials * Add shared discard and drawer refinements * sync item update notification * fix double save message in frontend * Add collab for users and files * fix join error showing on non existent items * Reset changes when last person leaves * don't focus on focused fields * fix headerCollab not showing with coll-template * Check if values has changed on update * fix page header hiding collab * Remove unused imports * Fix versioned propagation * Improve copy * Fix delete handler * Update collab tests * fmt * Update comments * fix making color tab persistent * only enable collab if needed * fix wrong collision on no changes * Validate changes on join and update * Update packages/utils/shared/generate-joi.ts Co-authored-by: judda <[email protected]> * Simplify permission tagging and add integration test * Test color propagation * Fix rerun constraint * Optional colors * cleanup code * Add namespace config and fix redlock * update room functions to use global memory * code cleanup * Add fields to discard * Fix messenger mock * fix m2m and m2a and initialChanges in frontend * Mock global rooms * update error types and improve verify permissions * add version permission check * Match message instead * Add missing await for version check * Ensure consistent error types and patch tests * Fix lint * Fix version perms check * Update mock and errors * Use fake timers * Improve collab disabling * Add leader based room closure * Optimize distributed messaging and implement non-blocking termination * Optimize with validateItemAccess Co-authored-by: judda <[email protected]> * Streamline field permissions check * Fix focus erroring * Try improve blackbox stability with waitForMatchingMessage * Improve numeric keys stability * Fallback to collection perms when sanitizing missing items * Add tests * Sanitize encrypt field special Co-authored-by: judda <[email protected]> * Fix double o2m edits not cleared in app * Reuse util * Clear relational detailed update syntax * Unify event sync to distributed bus * Catch unhandled promise rejections during test cleanup * Fix M2O null propagation by ensuring correct item context * Update api/src/websocket/handlers/collab/sanitize-payload.ts Co-authored-by: judda <[email protected]> * Consolidate watchers to resolve double join and race conditions * Allow metadata propagation in detailed relational updates * simplify discard message * early return on empty updateAll message * improve discard further * fix tests * Consolidate and optimize payload validation and sanitization * fix permission check on discard * fix collab connecting when it shouldn't * maybe fix room closure bug * Polish Co-authored-by: judda <[email protected]> * Check singleton create * Reconcile M2O objects * fix orphan clients cleanup * cleanup and fix code further * move deep-map-with-schema to shared * improve logs * fix leave message * cleanup singleton check * remove duplicate perm check * improve message handler singleton check * fix self refernced relation disconnects * fix frontend user name containing null * fix * in discard * fix leave counter * fix race condition on edits being updated before fieldUpdate gets called * separate ws sdk * move collab sdk inside use-collab * remove unused imports * move collab folder 1 level up * fix test * fix headerCollab when formFieldLabel is hidden * Cleanup discard message in app * Discard should check read and update perms * Rename to collaborative editing * Add to telemetry * Move getSchema in * Fix renaming * use newer sdk functions * Remove moved files * fix rejoining rooms * Optimize discard * Collab editing design fixes (#26528) * Update avatar border styling and adjust x-small size in v-avatar component to match title baseline * Refactor HeaderCollab component to use UserPopover for user avatars * Remove unused template for HeaderCollab and clean up overlay-item component by deleting the "Avatars" span * Remove unnecessary blank line in HeaderCollab component styling * Move HeaderCollab to action slot and self align center * Add v-avatar border color and width variables * Add font-size comment for v-avatar in HeaderCollab component * Update v-avatar border width to use theme variable instead of local variable * Apply minor styles fixes * Refactor HeaderCollab component template by repositioning icons and margin rules * Refactor HeaderCollab slot position in other files * Enhance form field label styles by adding flex-grow property and adjusting HeaderCollab margin for improved layout * Remove unnecessary margin styles from header-collab in item and overlay-item components * format * Remove unnecessary hide-current and x-small prop from HeaderCollab component * improve focus handling * refactor v-avatar component to use a single component tag for clickable and non-clickable states * fix: adjust sizes in HeaderCollab * feat: add type prop to HeaderCollab for flexible usage in header and field contexts * fix: adjust HeaderCollab styling for field context and improve layout in form-field-label * fix: update HeaderCollab instances to use 'avatars' class for improved styling * refactor: replace HeaderCollab with CollabAvatars component across multiple files for consistent collaboration user display * fix eslint --------- Co-authored-by: ian <[email protected]> Co-authored-by: formfcw <[email protected]> * Rename blackbox for consistency * Handle empty buffers to prevent errors during race conditions or disconnects * Optimizations * Use debug instead of info * Cleanup on shutdown signal * Cleanup optimization * Add test and cleanup * Ensure sequential bus processing * Use isRelational util Co-authored-by: Florian C. Wachmann <[email protected]> * Fix import and accept DeepPartial * Wait for connection * fix too strict pk check * Improve bb flakiness * Unset should not acquire focus * Test sticky focus behavior * Update telemetry to include env accuracy * Use getter for reactivity * Ensure focus state initialization * Add composable tests * Await lock releasing * Update memory tests * Update translations * Add websockets_enabled to telemetry * Update changesets * Reduce LRU cache capacity to 2000 * Add missing await * Fix room cleanup * Fix non-existent items (null) skipping cache * Move zod to dependencies in @directus/types * Update lockfile * Fmt * Skip cache metadata calculation if invalidated Co-authored-by: judda <[email protected]> * Add reconnect param Co-authored-by: judda <[email protected]> * make relational disabled on focus again * only show 1st letter in CollabAvatars * fix: use collab typescript (#26549) * Refactor message handling in useCollab composable for type safety * Enhance type safety in useCollab composable by updating field definitions to use object syntax for nested fields * Add CollabUserInfo type for user data structure in useCollab composable * Update TODO links in useCollab to GH issue instead * Refactor field definitions in useCollab to use dot notation for nested avatar properties and keep types * Update field definitions in useCollab to utilize DirectusUser * Revert to object notation * fix sending leave message on item delete * Optimize client room lookup to check local node only (#26569) * Optimize client room lookup to check local node only * Update test * Update comment * Update wording Co-authored-by: Nitwel <[email protected]> --------- Co-authored-by: Nitwel <[email protected]> * Replace tooltip with VList and current state * update unknown user to use icon instead * code cleanup * Refactor collaboration components: replace CollabAvatars with CollabField and CollabHeader in various files for improved user display and functionality. * Remove unnecessary mouseleave event from VAvatar in CollabHeader for cleaner user interaction. * Fix blackbox create policy naming * Format and linting * Adding new translation keys for editing and viewing states * Remove unnecessary flex properties from .v-list-item in CollabHeader for improved layout consistency. * Remove unused more-button CSS rules from CollabField.vue * Remove unused classes on collab field * Remove unused .user-status class from CollabHeader.vue for cleaner CSS * Update user count display in CollabHeader.vue to reflect DISPLAY_LIMIT instead of a hardcoded value for better maintainability. * Add focused and connectionId props to CollabHeader in item.vue and overlay-item.vue for enhanced collaboration features * Refactor CollabHandler to streamline client accountability checks in onJoin method. Removed redundant checks for unauthenticated clients and improved handling of share accounts. * Refactor CollabHeader and related components for improved readability by formatting template code and enhancing the structure of conditional rendering. * Update CollabHeader.vue to replace min-width with min-inline-size for better CSS compatibility. * Update CollabHeader.vue to handle unknown user names and adjust gap spacing for improved layout consistency. * Update English translations in en-US.yaml to use curly quotes for the collab_editing_field string. * Add cursor style to CollabField component for better user experience * Add popover for current user * Add invert prop to VMenu component for color customization and update CollabHeader to utilize the new feature. * Refactor collaboration components to reuse logic * remove unrelated changesets * Rename CollabField and CollabHeader imports to CollabIndicatorField and CollabIndicatorHeader across multiple components * remove unintended change * Refactor CSS class names for collab styles components for consistency * improve typography * Refactor CollabIndicatorHeader to use VList and VListItem for user display and ensure only avatars currently editing are clickable * Refactor CSS for CollabIndicatorHeader to remove redundant styles for avatar margins * Refactor Collab components to utilize getFocusId utility for generating user focus IDs and add unit tests for getFocusId functionality. * Update CollabIndicatorField and CollabIndicatorHeader to handle unknown user names gracefully by using translation fallback. * Update CollabIndicatorHeader to conditionally enable clickable avatars based on user focus state * Add translation for current user in collaborative editing context * Add collaboration state indicators and minor design updates for user editing/viewing status * Fix import formatting in utils.test.ts for consistency * Update CollabIndicatorHeader to correctly identify the current user based on connection * Refactor translation key for current user in collaborative editing context to improve clarity and consistency in CollabIndicatorHeader component. * Improve formatting of user name display in CollabIndicatorHeader component for better readability. --------- Co-authored-by: ian <[email protected]> Co-authored-by: Nitwel <[email protected]> Co-authored-by: judda <[email protected]> Co-authored-by: formfcw <[email protected]>
Scope
What's changed:
HeaderCollabto#actions(right)--theme--border-widthto avatar stylesVMenuarrow was addedPotential Risks / Drawbacks
—
Tested Scenarios
Review Notes / Questions