UBERF-8164 Display activity in wiki document sidebar (#6620)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

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

@@ -29,6 +29,7 @@
   export let messages: ActivityMessage[]
   export let object: Doc
   export let isNewestFirst = false
+  export let showFilter = true
 
   const allId = activity.ids.AllFilter
   const client = getClient()
@@ -117,30 +118,32 @@
   )
 </script>
 
-<div class="w-4 min-w-4 max-w-4" />
-{#if selectedFiltersRefs === 'All'}
-  <div class="antiSection-header__tag highlight">
-    <Label label={activity.string.All} />
-  </div>
-{:else}
-  {#each selectedFilters as filter}
-    <div class="antiSection-header__tag overflow-label">
-      <Label label={filter.label} />
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div
-        class="tag-icon"
-        on:click={() => {
-          if (selectedFiltersRefs !== allId && Array.isArray(selectedFiltersRefs)) {
-            const ids = selectedFiltersRefs.filter((it) => it !== filter._id)
-            selectedFiltersRefs = ids.length > 0 ? ids : allId
-          }
-        }}
-      >
-        <Icon icon={IconClose} size={'small'} />
-      </div>
+{#if showFilter}
+  <div class="w-4 min-w-4 max-w-4" />
+  {#if selectedFiltersRefs === allId}
+    <div class="antiSection-header__tag highlight">
+      <Label label={activity.string.All} />
     </div>
-  {/each}
+  {:else}
+    {#each selectedFilters as filter}
+      <div class="antiSection-header__tag overflow-label">
+        <Label label={filter.label} />
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div
+          class="tag-icon"
+          on:click={() => {
+            if (selectedFiltersRefs !== allId && Array.isArray(selectedFiltersRefs)) {
+              const ids = selectedFiltersRefs.filter((it) => it !== filter._id)
+              selectedFiltersRefs = ids.length > 0 ? ids : allId
+            }
+          }}
+        >
+          <Icon icon={IconClose} size={'small'} />
+        </div>
+      </div>
+    {/each}
+  {/if}
 {/if}
 <div class="w-4 min-w-4 max-w-4" />
 <ActionIcon icon={IconFilter} size={'medium'} action={handleOptions} />

plugins/activity-resources/src/index.ts

@@ -52,6 +52,7 @@ export { default as ActivityMessagePresenter } from './components/activity-messa
 export { default as ActivityExtension } from './components/ActivityExtension.svelte'
 export { default as ActivityDocLink } from './components/ActivityDocLink.svelte'
 export { default as ReactionPresenter } from './components/reactions/ReactionPresenter.svelte'
+export { default as ActivityFilter } from './components/ActivityFilter.svelte'
 export { default as ActivityMessageNotificationLabel } from './components/activity-message/ActivityMessageNotificationLabel.svelte'
 export { default as ActivityMessageHeader } from './components/activity-message/ActivityMessageHeader.svelte'
 export { default as ActivityMessageAction } from './components/ActivityMessageAction.svelte'

plugins/document-resources/src/components/EditDoc.svelte

@@ -15,6 +15,7 @@
 //
 -->
 <script lang="ts">
+  import activity from '@hcengineering/activity'
   import attachment, { Attachment } from '@hcengineering/attachment'
   import core, { Doc, Ref, WithLookup, generateId, type Blob } from '@hcengineering/core'
   import { Document, DocumentEvents } from '@hcengineering/document'
@@ -58,8 +59,9 @@
   import DocumentEditor from './DocumentEditor.svelte'
   import DocumentPresenter from './DocumentPresenter.svelte'
   import DocumentTitle from './DocumentTitle.svelte'
-  import References from './sidebar/References.svelte'
+  import Activity from './sidebar/Activity.svelte'
   import History from './sidebar/History.svelte'
+  import References from './sidebar/References.svelte'
 
   export let _id: Ref<Document>
   export let readonly: boolean = false
@@ -185,11 +187,11 @@
     {
       id: 'references',
       icon: document.icon.References
+    },
+    {
+      id: 'activity',
+      icon: activity.icon.Activity
     }
-    // {
-    //   id: 'history',
-    //   icon: document.icon.History
-    // }
   ]
   let selectedAside: string | boolean = false
 
@@ -372,6 +374,8 @@
     <svelte:fragment slot="aside">
       {#if selectedAside === 'references'}
         <References doc={doc._id} />
+      {:else if selectedAside === 'activity'}
+        <Activity value={doc} />
       {:else if selectedAside === 'history'}
         <History value={doc} {readonly} />
       {/if}

plugins/document-resources/src/components/sidebar/Activity.svelte

@@ -0,0 +1,97 @@
+<!--
+//
+// 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 activity, { ActivityMessage } from '@hcengineering/activity'
+  import { ActivityFilter, ActivityMessagePresenter, canGroupMessages } from '@hcengineering/activity-resources'
+  import { SortingOrder } from '@hcengineering/core'
+  import { Document } from '@hcengineering/document'
+  import { createQuery } from '@hcengineering/presentation'
+  import { Label, Lazy, Scroller } from '@hcengineering/ui'
+
+  export let value: Document
+
+  const query = createQuery()
+
+  let messages: ActivityMessage[] = []
+  let filteredMessages: ActivityMessage[] = []
+
+  $: query.query(
+    activity.class.ActivityMessage,
+    { attachedTo: value._id, space: value.space },
+    (res) => {
+      messages = res
+    },
+    {
+      sort: {
+        createdOn: SortingOrder.Ascending
+      }
+    }
+  )
+</script>
+
+{#key value._id}
+  <div class="h-full flex-col clear-mins">
+    <div class="header">
+      <div class="title"><Label label={activity.string.Activity} /></div>
+      <ActivityFilter
+        {messages}
+        object={value}
+        showFilter={false}
+        on:update={(e) => {
+          filteredMessages = e.detail
+        }}
+      />
+    </div>
+
+    <div class="divider" />
+
+    {#if filteredMessages.length > 0}
+      <Scroller padding="0.75rem 0.25rem">
+        {#each filteredMessages as message, index}
+          {@const canGroup = canGroupMessages(message, filteredMessages[index - 1])}
+          <Lazy>
+            <ActivityMessagePresenter
+              value={message}
+              doc={value}
+              hideLink={true}
+              type={canGroup ? 'short' : 'default'}
+            />
+          </Lazy>
+        {/each}
+      </Scroller>
+    {/if}
+  </div>
+{/key}
+
+<style lang="scss">
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1.25rem;
+    height: 3rem;
+    min-height: 3rem;
+    border-bottom: 1px solid var(--theme-divider-color);
+
+    .title {
+      flex-grow: 1;
+      font-weight: 500;
+      color: var(--caption-color);
+      user-select: none;
+    }
+  }
+</style>