Fix email notifications, fix collaborators aligment (#5062)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/activity-resources/src/components/doc-update-message/DocUpdateMessagePreview.svelte

@@ -19,17 +19,18 @@
     DisplayDocUpdateMessage,
     DocUpdateMessageViewlet
   } from '@hcengineering/activity'
-  import { Action, Component } from '@hcengineering/ui'
-  import { getClient } from '@hcengineering/presentation'
+  import { Action, Component, Icon } from '@hcengineering/ui'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import { IntlString } from '@hcengineering/platform'
-  import { AttachedDoc, Collection, Doc } from '@hcengineering/core'
+  import { AttachedDoc, Class, Collection, Doc, Ref } from '@hcengineering/core'
   import { AttributeModel } from '@hcengineering/view'
+  import { createEventDispatcher } from 'svelte'
+  import { buildRemovedDoc, checkIsObjectRemoved } from '@hcengineering/view-resources'
 
   import { getAttributeModel, getCollectionAttribute } from '../../activityMessagesUtils'
   import BaseMessagePreview from '../activity-message/BaseMessagePreview.svelte'
   import DocUpdateMessageContent from './DocUpdateMessageContent.svelte'
   import DocUpdateMessageAttributes from './DocUpdateMessageAttributes.svelte'
-  import { createEventDispatcher } from 'svelte'
 
   export let value: DisplayDocUpdateMessage
   export let readonly = false
@@ -40,6 +41,8 @@
   const hierarchy = client.getHierarchy()
   const dispatch = createEventDispatcher()
 
+  const objectQuery = createQuery()
+
   let viewlet: DocUpdateMessageViewlet | undefined
   let objectName: IntlString | undefined = undefined
   let collectionName: IntlString | undefined = undefined
@@ -61,6 +64,19 @@
     attributeModel = model
   })
 
+  $: viewlet?.component && loadObject(value.objectId, value.objectClass)
+
+  async function loadObject (_id: Ref<Doc>, _class: Ref<Class<Doc>>): Promise<void> {
+    const isObjectRemoved = await checkIsObjectRemoved(client, _id, _class)
+
+    if (isObjectRemoved) {
+      object = await buildRemovedDoc(client, _id, _class)
+    } else {
+      objectQuery.query(_class, { _id }, (res) => {
+        object = res[0]
+      })
+    }
+  }
   function onClick (event: MouseEvent): void {
     event.stopPropagation()
     event.preventDefault()
@@ -69,9 +85,11 @@
 </script>
 
 <BaseMessagePreview message={value} {type} {readonly} {actions} on:click>
-  <span class="textContent overflow-label" class:contentOnly={type === 'content-only'}>
+  <span class="textContent overflow-label flex-presenter" class:contentOnly={type === 'content-only'}>
     {#if viewlet?.component && object}
-      <div class="customContent">
+      <span class="customContent flex-presenter">
+        <Icon size="small" icon={viewlet.icon ?? activity.icon.Activity} />
+        <span class="ml-2" />
         {#each value?.previousMessages ?? [] as msg}
           <Component
             is={viewlet.component}
@@ -89,7 +107,7 @@
             onClick
           }}
         />
-      </div>
+      </span>
     {:else if value.action === 'create' || value.action === 'remove'}
       <DocUpdateMessageContent
         message={value}

plugins/contact-resources/src/components/PersonAccountPresenter.svelte

@@ -28,6 +28,7 @@
   export let disabled: boolean = false
   export let inline: boolean = false
   export let accent: boolean = false
+  export let compact = false
 
   $: employee = $employeeByIdStore.get((value as PersonAccount)?.person as Ref<Employee>)
 
@@ -38,9 +39,9 @@
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   {#if employee}
-    <EmployeePresenter value={employee} {disabled} {inline} {accent} {avatarSize} on:accent-color />
+    <EmployeePresenter value={employee} {disabled} {inline} {accent} {avatarSize} {compact} on:accent-color />
   {:else if person}
-    <PersonPresenter value={person} {disabled} {inline} {accent} {avatarSize} on:accent-color />
+    <PersonPresenter value={person} {disabled} {inline} {accent} {avatarSize} {compact} on:accent-color />
   {:else}
     <div class="flex-row-center">
       <Avatar size={avatarSize} />

plugins/contact-resources/src/components/PersonAccountRefPresenter.svelte

@@ -25,10 +25,11 @@
   export let disabled: boolean = false
   export let inline: boolean = false
   export let accent: boolean = false
+  export let compact = false
 
   $: account = $personAccountByIdStore.get(value)
 </script>
 
 {#if account}
-  <PersonAccountPresenter value={account} {disabled} {inline} {avatarSize} {accent} on:accent-color />
+  <PersonAccountPresenter value={account} {disabled} {inline} {avatarSize} {accent} {compact} on:accent-color />
 {/if}

plugins/notification-resources/src/components/activity/CollaboratorsChanged.svelte

@@ -48,9 +48,9 @@
   $: hasDifferentChanges = added.length > 0 && removed.length > 0
 </script>
 
-<div class="root">
+<span class="root">
   <Icon icon={activity.icon.Activity} size="small" />
-  <div class="label">
+  <span class="label">
     {#if hasDifferentChanges}
       <Label label={notification.string.ChangedCollaborators} />:
     {:else if added.length > 0}
@@ -58,30 +58,30 @@
     {:else if removed.length > 0}
       <Label label={notification.string.RemovedCollaborators} />:
     {/if}
-  </div>
+  </span>
 
   {#if added.length > 0}
-    <div class="row">
+    <span class="row">
       {#if hasDifferentChanges}
         <IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} />
       {/if}
       {#each added as add}
-        <PersonAccountRefPresenter value={add} avatarSize="card" />
+        <PersonAccountRefPresenter value={add} avatarSize="card" compact />
       {/each}
-    </div>
+    </span>
   {/if}
-  <div class="antiHSpacer"></div>
+  <span class="antiHSpacer"></span>
   {#if removed.length > 0}
-    <div class="row">
+    <span class="row">
       {#if hasDifferentChanges}
         <IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
       {/if}
       {#each removed as remove}
-        <PersonAccountRefPresenter value={remove} avatarSize="card" />
+        <PersonAccountRefPresenter value={remove} avatarSize="card" compact />
       {/each}
-    </div>
+    </span>
   {/if}
-</div>
+</span>
 
 <style lang="scss">
   .root {