Fix inbox preview (#5389)

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

packages/text/src/markup/utils.ts

@@ -114,6 +114,11 @@ export function pmNodeToText (node: ProseMirrorNode): string {
   return jsonToText(node.toJSON())
 }
 
+export function markupToText (markup: Markup, schema?: Schema, extensions?: Extensions): string {
+  const pmNode = markupToPmNode(markup, schema, extensions)
+  return pmNode.textBetween(0, pmNode.content.size, '\n', '')
+}
+
 // HTML
 
 /** @public */

plugins/activity-assets/lang/en.json

@@ -5,7 +5,7 @@
     "All": "All",
     "AllActivity": "All activity",
     "Attributes": "Attributes",
-    "Changed": "changed",
+    "Changed": "Changed",
     "CollectionUpdated": "Update {collection}",
     "Created": "Created",
     "DocAdded": "added {_class}",

plugins/activity-resources/package.json

@@ -45,6 +45,7 @@
     "@hcengineering/platform": "^0.6.9",
     "@hcengineering/preference": "^0.6.9",
     "@hcengineering/presentation": "^0.6.2",
+    "@hcengineering/text": "^0.6.1",
     "@hcengineering/ui": "^0.6.11",
     "@hcengineering/view": "^0.6.9",
     "@hcengineering/view-resources": "^0.6.0",

plugins/activity-resources/src/components/BasePreview.svelte

@@ -28,6 +28,7 @@
   import { Asset, getEmbeddedLabel, IntlString } from '@hcengineering/platform'
   import activity, { ActivityMessage, ActivityMessagePreviewType } from '@hcengineering/activity'
   import { classIcon, DocNavLink, showMenu } from '@hcengineering/view-resources'
+  import { markupToText } from '@hcengineering/text'
 
   export let message: ActivityMessage | undefined = undefined
   export let text: string | undefined = undefined
@@ -126,7 +127,7 @@
               <Label label={header ?? client.getHierarchy().getClass(headerObject._class).label} />
             </DocNavLink>
           {:else if person}
-            <EmployeePresenter value={person} shouldShowAvatar={false} compact />
+            <EmployeePresenter value={person} shouldShowAvatar={false} compact showStatus={false} />
           {:else}
             <Label label={core.string.System} />
           {/if}
@@ -136,7 +137,11 @@
     {/if}
 
     {#if text || intlLabel}
-      <span class="textContent overflow-label font-normal" class:contentOnly={type === 'content-only'}>
+      <span
+        class="textContent overflow-label font-normal"
+        class:contentOnly={type === 'content-only'}
+        use:tooltip={{ label: text ? getEmbeddedLabel(markupToText(text)) : intlLabel }}
+      >
         {#if intlLabel}
           <Label label={intlLabel} />
         {/if}

plugins/activity-resources/src/components/activity-message/ActivityMessageNotificationLabel.svelte

@@ -13,18 +13,20 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Icon, Label } from '@hcengineering/ui'
+  import { Label } from '@hcengineering/ui'
   import { DocNotifyContext } from '@hcengineering/notification'
   import activity, { ActivityMessage } from '@hcengineering/activity'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Doc, Ref } from '@hcengineering/core'
-  import { classIcon, getDocLinkTitle } from '@hcengineering/view-resources'
+  import { getDocLinkTitle, ObjectIcon } from '@hcengineering/view-resources'
+  import contact from '@hcengineering/contact'
 
   import ActivityMessagePreview from './ActivityMessagePreview.svelte'
 
   export let context: DocNotifyContext
 
   const client = getClient()
+  const hierarchy = client.getHierarchy()
   const parentQuery = createQuery()
 
   let parentMessage: ActivityMessage | undefined = undefined
@@ -54,11 +56,11 @@
         <Label label={activity.string.In} />
       </span>
       {#if object}
-        {@const icon = classIcon(client, object._class)}
         <span class="flex-presenter flex-gap-0-5">
-          {#if icon}
-            <Icon {icon} size="x-small" iconProps={{ value: object }} />
-          {/if}
+          <ObjectIcon
+            value={object}
+            size={hierarchy.isDerived(object._class, contact.class.Person) ? 'tiny' : 'small'}
+          />
           {title}
         </span>
       {/if}

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

@@ -43,7 +43,7 @@
     return await getDocLinkTitle(client, object._id, object._class, object)
   }
 
-  async function loadObject (_id: Ref<Doc>, _class: Ref<Class<Doc>>) {
+  async function loadObject (_id: Ref<Doc>, _class: Ref<Class<Doc>>): Promise<void> {
     const isRemoved = await checkIsObjectRemoved(client, _id, _class)
 
     if (isRemoved) {
@@ -55,7 +55,7 @@
     }
   }
 
-  $: loadObject(message.objectId, message.objectClass)
+  $: void loadObject(message.objectId, message.objectClass)
 </script>
 
 {#if object}

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

@@ -47,20 +47,30 @@
 </script>
 
 {#if isUnset}
-  <div class="unset overflow-label">
+  <div class="row overflow-label">
     <span class="mr-1"><Icon icon={attributeIcon} size="small" /></span>
     <Label label={activity.string.Unset} />
     <span class="lower"><Label label={attributeModel.label} /></span>
   </div>
 {:else if isTextType}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="showMore" on:click={toggleShowMore}>
-    <div class="triangle" class:left={!isDiffShown} class:down={isDiffShown} />
-    <Label label={isDiffShown ? ui.string.ShowLess : ui.string.ShowMore} />
-  </div>
-  {#if isDiffShown}
-    <svelte:component this={attributeModel.presenter} value={values[0]} {prevValue} showOnlyDiff />
+  {#if preview}
+    <div class="row overflow-label">
+      <span class="mr-1"><Icon icon={attributeIcon} size="small" /></span>
+      <Label label={activity.string.Changed} />
+      <span class="lower fs-bold overflow-label">
+        <Label label={attributeModel.label} />
+      </span>
+    </div>
+  {:else}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="showMore" on:click={toggleShowMore}>
+      <div class="triangle" class:left={!isDiffShown} class:down={isDiffShown} />
+      <Label label={isDiffShown ? ui.string.ShowLess : ui.string.ShowMore} />
+    </div>
+    {#if isDiffShown}
+      <svelte:component this={attributeModel.presenter} value={values[0]} {prevValue} showOnlyDiff />
+    {/if}
   {/if}
 {:else}
   <ChangeAttributesTemplate {viewlet} {attributeModel} {values} {preview}>
@@ -73,7 +83,7 @@
 {/if}
 
 <style lang="scss">
-  .unset {
+  .row {
     display: flex;
     align-items: center;
     gap: 0.25rem;

plugins/chunter-resources/src/components/notification/ChatMessageNotificationLabel.svelte

@@ -13,17 +13,17 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Icon, Label } from '@hcengineering/ui'
+  import { Label } from '@hcengineering/ui'
   import { DocNotifyContext } from '@hcengineering/notification'
   import { getClient } from '@hcengineering/presentation'
   import { Class, Doc, Ref } from '@hcengineering/core'
-  import { getDocLinkTitle } from '@hcengineering/view-resources'
+  import { getDocLinkTitle, ObjectIcon } from '@hcengineering/view-resources'
   import { ChatMessage, ThreadMessage } from '@hcengineering/chunter'
+  import contact from '@hcengineering/contact'
 
   import chunter from '../../plugin'
   import ChatMessagePreview from '../chat-message/ChatMessagePreview.svelte'
   import ThreadMessagePreview from '../threads/ThreadMessagePreview.svelte'
-  import { getObjectIcon } from '../../utils'
 
   export let context: DocNotifyContext
 
@@ -65,8 +65,6 @@
   function toThread (message: ChatMessage): ThreadMessage {
     return message as ThreadMessage
   }
-
-  $: icon = object ? getObjectIcon(object._class) : undefined
 </script>
 
 {#if parentMessage}
@@ -81,8 +79,11 @@
         <Label label={chunter.string.In} />
       </span>
       <span class="flex-presenter flex-gap-0-5">
-        {#if icon}
-          <Icon {icon} size="x-small" iconProps={{ value: object }} />
+        {#if object}
+          <ObjectIcon
+            value={object}
+            size={hierarchy.isDerived(object._class, contact.class.Person) ? 'tiny' : 'small'}
+          />
         {/if}
         <div class="overflow-label">
           {title}

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

@@ -22,6 +22,7 @@
   // export let element: HTMLElement | undefined = undefined
   export let noUnderline: boolean = false
   export let compact = false
+  export let showStatus = true
 
   $: employeeValue = typeof value === 'string' ? $personByIdStore.get(value) : value
 
@@ -44,6 +45,6 @@
   {defaultName}
   {noUnderline}
   {compact}
-  statusLabel={!active && shouldShowName ? contact.string.Inactive : undefined}
+  statusLabel={!active && shouldShowName && showStatus ? contact.string.Inactive : undefined}
   on:accent-color
 />

plugins/view-resources/src/components/DocReferencePresenter.svelte

@@ -15,11 +15,12 @@
 <script lang="ts">
   import type { Doc } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import view, { AttributeModel } from '@hcengineering/view'
-  import { Component, Icon, IconSize } from '@hcengineering/ui'
+  import { AttributeModel } from '@hcengineering/view'
+  import { IconSize } from '@hcengineering/ui'
   import contact from '@hcengineering/contact'
 
-  import { classIcon, getObjectPresenter } from '../utils'
+  import { getObjectPresenter } from '../utils'
+  import ObjectIcon from './ObjectIcon.svelte'
 
   export let value: Doc | undefined
   export let compact = false
@@ -36,8 +37,6 @@
     })
   }
 
-  $: iconMixin = value && hierarchy.classHierarchyMixin(value._class, view.mixin.ObjectIcon)
-
   $: if (value && hierarchy.isDerived(value._class, contact.class.Person)) {
     size = 'tiny'
   } else {
@@ -49,13 +48,11 @@
   <span class="label overflow-label font-medium-12 text-left secondary-textColor">
     <slot name="prefix" />
   </span>
-  <div class="icon">
-    {#if iconMixin && value}
-      <Component is={iconMixin.component} props={{ value, size }} />
-    {:else if !iconMixin && value}
-      <Icon icon={classIcon(client, value._class) ?? view.icon.Views} {size} />
-    {/if}
-  </div>
+  {#if value}
+    <div class="icon">
+      <ObjectIcon {value} {size} />
+    </div>
+  {/if}
   <span class="label overflow-label font-medium-12 text-left max-w-20 secondary-textColor">
     {#if presenter && value}
       <svelte:component

plugins/view-resources/src/components/ObjectIcon.svelte

@@ -0,0 +1,39 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import view from '@hcengineering/view'
+  import { Component, Icon, IconSize } from '@hcengineering/ui'
+  import type { Doc } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
+
+  import { classIcon } from '../utils'
+
+  export let value: Doc
+  export let size: IconSize = 'small'
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  $: iconMixin = hierarchy.classHierarchyMixin(value._class, view.mixin.ObjectIcon)
+</script>
+
+{#if iconMixin}
+  <Component is={iconMixin.component} props={{ value, size }} />
+{:else}
+  {@const icon = classIcon(client, value._class)}
+  {#if icon}
+    <Icon {icon} {size} />
+  {/if}
+{/if}

plugins/view-resources/src/index.ts

@@ -92,6 +92,7 @@ import ValueSelector from './components/ValueSelector.svelte'
 import ViewletContentView from './components/ViewletContentView.svelte'
 import ViewletSettingButton from './components/ViewletSettingButton.svelte'
 import DocReferencePresenter from './components/DocReferencePresenter.svelte'
+import ObjectIcon from './components/ObjectIcon.svelte'
 
 import {
   afterResult,
@@ -203,7 +204,8 @@ export {
   UpDownNavigator,
   ViewletContentView,
   ViewletSettingButton,
-  DocReferencePresenter
+  DocReferencePresenter,
+  ObjectIcon
 }
 
 function PositionElementAlignment (e?: Event): PopupAlignment | undefined {