UBERF-5603 (#4754)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

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

@@ -13,17 +13,16 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
+  import activity, { ActivityMessage, ActivityMessageExtension } from '@hcengineering/activity'
   import { Action, IconMoreV, showPopup } from '@hcengineering/ui'
   import { Menu } from '@hcengineering/view-resources'
-  import activity, { ActivityMessage, ActivityMessageExtension } from '@hcengineering/activity'
+  import { createEventDispatcher } from 'svelte'
 
-  import AddReactionAction from './reactions/AddReactionAction.svelte'
-  import SaveMessageAction from './SaveMessageAction.svelte'
-  import PinMessageAction from './PinMessageAction.svelte'
-  import ActivityMessageExtensionComponent from './activity-message/ActivityMessageExtension.svelte'
   import ActivityMessageAction from './ActivityMessageAction.svelte'
-  import { isReactionMessage } from '../activityMessagesUtils'
+  import PinMessageAction from './PinMessageAction.svelte'
+  import SaveMessageAction from './SaveMessageAction.svelte'
+  import ActivityMessageExtensionComponent from './activity-message/ActivityMessageExtension.svelte'
+  import AddReactionAction from './reactions/AddReactionAction.svelte'
 
   export let message: ActivityMessage | undefined
   export let extensions: ActivityMessageExtension[] = []

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

@@ -23,7 +23,7 @@
   import core, { getDisplayTime } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
   import { Action, Label } from '@hcengineering/ui'
-  import { getActions } from '@hcengineering/view-resources'
+  import { getActions, restrictionStore } from '@hcengineering/view-resources'
 
   import ReactionsPresenter from '../reactions/ReactionsPresenter.svelte'
   import ActivityMessageExtensionComponent from './ActivityMessageExtension.svelte'
@@ -104,6 +104,9 @@
   $: isHidden = !!viewlet?.onlyWithParent && parentMessage === undefined
   $: withActionMenu =
     withActions && !embedded && (actions.length > 0 || allActionIds.some((id) => !excludedActions.includes(id)))
+
+  let readonly: boolean = false
+  $: readonly = $restrictionStore.disableComments
 </script>
 
 {#if !isHidden}
@@ -170,14 +173,14 @@
             props={{ object: message, embedded, onReply }}
           />
         {/if}
-        <ReactionsPresenter object={message} />
+        <ReactionsPresenter object={message} {readonly} />
         {#if parentMessage && showEmbedded}
           <div class="mt-2" />
           <ActivityMessagePresenter value={parentMessage} embedded hideFooter withActions={false} />
         {/if}
       </div>
 
-      {#if withActions}
+      {#if withActions && !readonly}
         <div class="actions" class:opened={isActionsOpened}>
           <ActivityMessageActions
             message={isReactionMessage(message) ? parentMessage : message}

plugins/activity-resources/src/components/reactions/Reactions.svelte

@@ -24,6 +24,7 @@
 
   export let reactions: Reaction[] = []
   export let object: Doc | undefined = undefined
+  export let readonly: boolean = false
 
   const dispatch = createEventDispatcher()
   const client = getClient()
@@ -39,6 +40,7 @@
     reactionsAccounts = reactionsAccounts
   }
   function getClickHandler (emoji: string) {
+    if (readonly) return
     return (e: CustomEvent) => {
       e.stopPropagation()
       e.preventDefault()
@@ -47,6 +49,7 @@
   }
 
   function openEmojiPalette (ev: Event) {
+    if (readonly) return
     ev.preventDefault()
     ev.stopPropagation()
     showPopup(EmojiPopup, {}, ev.target as HTMLElement, (emoji: string) => {
@@ -61,6 +64,7 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="item border-radius-1"
+      class:cursor-pointer={!readonly}
       use:tooltip={{ component: ReactionsTooltip, props: { reactionAccounts: accounts } }}
       on:click={getClickHandler(emoji)}
     >
@@ -70,7 +74,7 @@
       </div>
     </div>
   {/each}
-  {#if object && reactionsAccounts.size > 0}
+  {#if object && reactionsAccounts.size > 0 && !readonly}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="item flex-row-center border-radius-1" class:withoutBackground={true} on:click={openEmojiPalette}>
@@ -102,7 +106,6 @@
     height: 1.5rem;
     background: var(--secondary-button-disabled);
     border: none;
-    cursor: pointer;
 
     &:hover {
       border: 1px solid var(--theme-darker-color);

plugins/activity-resources/src/components/reactions/ReactionsPresenter.svelte

@@ -13,13 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createQuery, getClient } from '@hcengineering/presentation'
   import activity, { ActivityMessage, Reaction } from '@hcengineering/activity'
+  import { createQuery, getClient } from '@hcengineering/presentation'
 
-  import Reactions from './Reactions.svelte'
   import { updateDocReactions } from '../../utils'
+  import Reactions from './Reactions.svelte'
 
   export let object: ActivityMessage | undefined
+  export let readonly = false
 
   const client = getClient()
   const reactionsQuery = createQuery()
@@ -35,12 +36,13 @@
   }
 
   const handleClick = (ev: CustomEvent) => {
+    if (readonly) return
     updateDocReactions(client, reactions, object, ev.detail)
   }
 </script>
 
 {#if object && hasReactions}
   <div class="footer flex-col p-inline contrast mt-2 min-h-6">
-    <Reactions {reactions} {object} on:click={handleClick} />
+    <Reactions {reactions} {object} {readonly} on:click={handleClick} />
   </div>
 {/if}