UBERF-6464: update activity mentions display (#5339)

models/activity/src/index.ts

@@ -315,10 +315,6 @@ export function createModel (builder: Builder): void {
     presenter: activity.component.ActivityReferencePreview
   })
 
-  builder.mixin(activity.class.DocUpdateMessage, core.class.Class, view.mixin.LinkProvider, {
-    encode: activity.function.GetFragment
-  })
-
   builder.createDoc(
     activity.class.ActivityMessagesFilter,
     core.space.Model,

models/activity/src/plugin.ts

@@ -16,7 +16,6 @@ import { activityId, type ActivityMessage, type DocUpdateMessageViewlet } from '
 import activity from '@hcengineering/activity-resources/src/plugin'
 import { type IntlString, mergeIds, type Resource } from '@hcengineering/platform'
 import { type Doc, type Ref } from '@hcengineering/core'
-import type { Location } from '@hcengineering/ui'
 import { type ActionCategory } from '@hcengineering/view'
 import { type NotificationGroup, type NotificationType } from '@hcengineering/notification'
 
@@ -38,9 +37,6 @@ export default mergeIds(activityId, activity, {
     ActivityNotificationGroup: '' as Ref<NotificationGroup>,
     AddReactionNotification: '' as Ref<NotificationType>
   },
-  function: {
-    GetFragment: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<Location>>
-  },
   category: {
     Activity: '' as Ref<ActionCategory>
   }

models/chunter/src/index.ts

@@ -398,6 +398,10 @@ export function createModel (builder: Builder, options = { addApplication: true
     )
   }
 
+  builder.mixin(activity.class.ActivityMessage, core.class.Class, view.mixin.LinkProvider, {
+    encode: chunter.function.GetMessageLink
+  })
+
   builder.mixin(chunter.class.ThreadMessage, core.class.Class, view.mixin.LinkProvider, {
     encode: chunter.function.GetThreadLink
   })

models/chunter/src/plugin.ts

@@ -100,6 +100,7 @@ export default mergeIds(chunterId, chunter, {
     CanCopyMessageLink: '' as Resource<(doc?: Doc | Doc[]) => Promise<boolean>>,
     GetChunterSpaceLinkFragment: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<Location>>,
     GetThreadLink: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<Location>>,
+    GetMessageLink: '' as Resource<(doc: Doc, props: Record<string, any>) => Promise<Location>>,
     ReplyToThread: '' as Resource<(doc: ActivityMessage) => Promise<void>>
   },
   filter: {

models/document/src/index.ts

@@ -257,6 +257,10 @@ function defineDocument (builder: Builder): void {
     encode: document.function.GetObjectLinkFragment
   })
 
+  builder.mixin(document.class.Document, core.class.Class, view.mixin.ObjectIcon, {
+    component: document.component.DocumentIcon
+  })
+
   // Actions
 
   createAction(builder, {

models/document/src/plugin.ts

@@ -30,7 +30,8 @@ export default mergeIds(documentId, document, {
     NotificationDocumentPresenter: '' as AnyComponent,
     TeamspaceSpacePresenter: '' as AnyComponent,
     Move: '' as AnyComponent,
-    DocumentToDoPresenter: '' as AnyComponent
+    DocumentToDoPresenter: '' as AnyComponent,
+    DocumentIcon: '' as AnyComponent
   },
   completion: {
     DocumentQuery: '' as Resource<ObjectSearchFactory>,

packages/theme/styles/components.scss

@@ -658,16 +658,6 @@
       height: var(--global-extra-small-Size);
     }
   }
-  .hulyToDoLine-reference {
-    padding: 0 var(--spacing-1) 0 var(--spacing-0_75);
-    box-shadow: inset 0 0 0 1px var(--global-subtle-ui-BorderColor);
-    border-radius: var(--extra-small-BorderRadius);
-    background-color: var(--tag-nuance-SkyBackground);
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px var(--global-ui-BorderColor);
-    }
-  }
 
   &.hovered,
   &:hover {

plugins/activity-resources/src/activityMessagesUtils.ts

@@ -562,19 +562,6 @@ export async function getLinkData (
   }
 }
 
-export async function getMessageFragment (doc: Doc): Promise<string> {
-  const client = getClient()
-  const hierarchy = client.getHierarchy()
-  let clazz = hierarchy.getClass(doc._class)
-  let label = clazz.shortLabel
-  while (label === undefined && clazz.extends !== undefined) {
-    clazz = hierarchy.getClass(clazz.extends)
-    label = clazz.shortLabel
-  }
-  label = label ?? doc._class
-  return `${label}-${doc._id}`
-}
-
 function isDocUpdateMessage (message?: ActivityMessage): message is DocUpdateMessage {
   if (message === undefined) {
     return false
@@ -583,6 +570,14 @@ function isDocUpdateMessage (message?: ActivityMessage): message is DocUpdateMes
   return message._class === activity.class.DocUpdateMessage
 }
 
+export function isActivityMessage (message?: Doc): message is ActivityMessage {
+  if (message === undefined) {
+    return false
+  }
+
+  return getClient().getHierarchy().isDerived(message._class, activity.class.ActivityMessage)
+}
+
 export function isReactionMessage (message?: ActivityMessage): boolean {
   if (message === undefined) {
     return false

plugins/activity-resources/src/components/activity-reference/ActivityReferencePresenter.svelte

@@ -110,6 +110,7 @@
   {skipLabel}
   {hoverable}
   {hoverStyles}
+  showDatePreposition
   {onClick}
   {onReply}
 >
@@ -131,13 +132,8 @@
       {/if}
       {#if srcDoc}
         <span class="text-sm lower"><Label label={activity.string.In} /></span>
-        <DocNavLink object={srcDoc} component={srcDocPanel?.component ?? view.component.EditDoc} shrink={0}>
-          <span class="text-sm">
-            <ReferenceSrcPresenter
-              {value}
-              inline={hierarchy.isDerived(srcDoc._class, activity.class.ActivityMessage)}
-            />
-          </span>
+        <DocNavLink object={srcDoc} component={srcDocPanel?.component ?? view.component.EditDoc} shrink={0} noUnderline>
+          <ReferenceSrcPresenter value={srcDoc} />
         </DocNavLink>
       {/if}
     </span>
@@ -151,6 +147,8 @@
 
 <style lang="scss">
   .header {
-    gap: var(--global-spacing-1);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-0_5);
   }
 </style>

plugins/activity-resources/src/components/activity-reference/ReferenceSrcPresenter.svelte

@@ -14,33 +14,36 @@
 -->
 <script lang="ts">
   import type { Doc } from '@hcengineering/core'
-  import { createQuery, getClient } from '@hcengineering/presentation'
-  import { AttributeModel } from '@hcengineering/view'
-  import { getObjectPresenter } from '@hcengineering/view-resources'
-  import { ActivityReference } from '@hcengineering/activity'
+  import { getClient } from '@hcengineering/presentation'
+  import { DocReferencePresenter } from '@hcengineering/view-resources'
+  import activity from '../../plugin'
 
-  export let value: ActivityReference
-  export let inline = true
+  import { isActivityMessage } from '../../activityMessagesUtils'
+  import view from '@hcengineering/view'
+  import { Icon, Label } from '@hcengineering/ui'
+
+  export let value: Doc | undefined
 
   const client = getClient()
-  const srcDocQuery = createQuery()
 
-  let srcDoc: Doc | undefined
-  let presenter: AttributeModel | undefined
+  let parentObject: Doc | undefined
 
-  $: srcDocQuery.query(value.srcDocClass, { _id: value.srcDocId }, (r) => {
-    srcDoc = r.shift()
-  })
+  $: showParent = isActivityMessage(value)
 
-  $: if (srcDoc !== undefined) {
-    void getObjectPresenter(client, srcDoc._class, { key: '' }).then((result) => {
-      presenter = result
+  $: isActivityMessage(value) &&
+    client.findOne(value.attachedToClass, { _id: value.attachedTo }).then((res) => {
+      parentObject = res
     })
-  }
 </script>
 
-{#if presenter}
-  <span class="labels-row">
-    <svelte:component this={presenter.presenter} value={srcDoc} {inline} embedded shouldShowAvatar={false} />
-  </span>
-{/if}
+<DocReferencePresenter value={showParent ? parentObject : value} compact={showParent}>
+  <svelte:fragment slot="prefix">
+    {#if showParent}
+      <span class="nowrap flex-presenter flex-gap-1 lower ml-2">
+        <Icon icon={view.icon.Bubble} size="x-small" />
+        <Label label={activity.string.Thread} />
+        <Label label={activity.string.In} />
+      </span>
+    {/if}
+  </svelte:fragment>
+</DocReferencePresenter>

plugins/activity-resources/src/index.ts

@@ -26,13 +26,7 @@ import DocUpdateMessagePreview from './components/doc-update-message/DocUpdateMe
 import ActivityReferencePreview from './components/activity-reference/ActivityReferencePreview.svelte'
 import ActivityInfoMessagePreview from './components/activity-info-message/ActivityInfoMessagePreview.svelte'
 
-import {
-  getMessageFragment,
-  attributesFilter,
-  pinnedFilter,
-  allFilter,
-  referencesFilter
-} from './activityMessagesUtils'
+import { attributesFilter, pinnedFilter, allFilter, referencesFilter } from './activityMessagesUtils'
 import { updateReferences } from './references'
 
 export * from './activity'
@@ -76,9 +70,6 @@ export default async (): Promise<Resources> => ({
     AllFilter: allFilter,
     ReferencesFilter: referencesFilter
   },
-  function: {
-    GetFragment: getMessageFragment
-  },
   backreference: {
     Update: updateReferences
   }

plugins/chunter-resources/src/components/ChannelPresenter.svelte

@@ -15,19 +15,22 @@
 <script lang="ts">
   import { Channel, chunterId } from '@hcengineering/chunter'
   import { getClient } from '@hcengineering/presentation'
-  import { Icon } from '@hcengineering/ui'
+  import { Icon, tooltip } from '@hcengineering/ui'
   import { NavLink } from '@hcengineering/view-resources'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { ObjectPresenterType } from '@hcengineering/view'
 
   export let value: Channel
   export let inline: boolean = false
   export let shouldShowAvatar = true
+  export let type: ObjectPresenterType = 'link'
 
   const client = getClient()
 
   $: icon = client.getHierarchy().getClass(value._class).icon
 </script>
 
-{#if value}
+{#if value && type === 'link'}
   <NavLink app={chunterId} space={value._id}>
     <div class="flex-presenter">
       {#if !inline && shouldShowAvatar}
@@ -41,3 +44,7 @@
     </div>
   </NavLink>
 {/if}
+
+{#if value && type === 'text'}
+  <span class="overflow-label" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>{value.name}</span>
+{/if}

plugins/chunter-resources/src/index.ts

@@ -64,7 +64,13 @@ import {
   leaveChannelAction,
   removeChannelAction
 } from './utils'
-import { chunterSpaceLinkFragmentProvider, getThreadLink, getMessageLink, replyToThread } from './navigation'
+import {
+  chunterSpaceLinkFragmentProvider,
+  getThreadLink,
+  getMessageLink,
+  replyToThread,
+  getMessageLocation
+} from './navigation'
 
 export { default as ChatMessagesPresenter } from './components/chat-message/ChatMessagesPresenter.svelte'
 export { default as ChatMessagePopup } from './components/chat-message/ChatMessagePopup.svelte'
@@ -191,6 +197,7 @@ export default async (): Promise<Resources> => ({
     GetChunterSpaceLinkFragment: chunterSpaceLinkFragmentProvider,
     GetUnreadThreadsCount: getUnreadThreadsCount,
     GetThreadLink: getThreadLink,
+    GetMessageLink: getMessageLocation,
     ReplyToThread: replyToThread
   },
   actionImpl: {

plugins/chunter-resources/src/navigation.ts

@@ -137,3 +137,9 @@ export async function replyToThread (message: ActivityMessage): Promise<void> {
 
   navigate(buildThreadLink(loc, message.attachedTo, message.attachedToClass, message._id))
 }
+
+export async function getMessageLocation (doc: ActivityMessage): Promise<Location> {
+  const loc = getCurrentResolvedLocation()
+
+  return buildThreadLink(loc, doc.attachedTo, doc.attachedToClass, doc._id)
+}

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

@@ -18,6 +18,7 @@
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import { tooltip } from '@hcengineering/ui'
   import { DocNavLink, ObjectMention } from '@hcengineering/view-resources'
+  import { ObjectPresenterType } from '@hcengineering/view'
 
   import contact from '../plugin'
   import Company from './icons/Company.svelte'
@@ -28,6 +29,7 @@
   export let accent: boolean = false
   export let noUnderline: boolean = false
   export let maxWidth = ''
+  export let type: ObjectPresenterType = 'link'
 </script>
 
 {#if value}
@@ -39,7 +41,7 @@
       {noUnderline}
       component={contact.component.EditOrganizationPanel}
     />
-  {:else}
+  {:else if type === 'link'}
     <DocNavLink {disabled} object={value} {accent} {noUnderline} component={contact.component.EditOrganizationPanel}>
       <div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
         <div class="icon circle">
@@ -50,5 +52,7 @@
         >
       </div>
     </DocNavLink>
+  {:else if type === 'text'}
+    <span class="overflow-label" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>{value.name}</span>
   {/if}
 {/if}