Open channel links (#2561)

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

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

@@ -151,7 +151,13 @@
       class="select-text cover-channel"
       class:show
       class:copied={label === plugin.string.Copied}
-      data-tooltip={lTraslate}>{value}</span
+      class:cursor-pointer={openable}
+      data-tooltip={lTraslate}
+      on:click={() => {
+        if (openable) {
+          dispatch('update', 'open')
+        }
+      }}>{value}</span
     >
     <Button
       focusIndex={3}

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

@@ -33,6 +33,7 @@
     showPopup
   } from '@hcengineering/ui'
   import { ViewAction } from '@hcengineering/view'
+  import { invokeAction } from '@hcengineering/view-resources'
   import { createEventDispatcher, tick } from 'svelte'
   import { getChannelProviders } from '../utils'
   import ChannelEditor from './ChannelEditor.svelte'
@@ -58,6 +59,7 @@
     presenter?: AnyComponent
     action?: ViewAction
     placeholder: IntlString
+    channel: AttachedData<Channel> | Channel
     provider: Ref<ChannelProvider>
     integration: boolean
     notification: boolean
@@ -67,7 +69,7 @@
     item: AttachedData<Channel>,
     map: Map<Ref<ChannelProvider>, ChannelProvider>,
     lastViews: Map<Ref<Doc>, Timestamp>
-  ): any | undefined {
+  ): Item | undefined {
     const provider = map.get(item.provider)
     if (provider) {
       const notification = (item as Channel)._id !== undefined ? isNew(item as Channel, lastViews) : false
@@ -79,6 +81,7 @@
         action: provider.action,
         placeholder: provider.placeholder,
         provider: provider._id,
+        channel: item,
         notification,
         integration: provider.integrationType !== undefined ? integrations.has(provider.integrationType) : false
       }
@@ -98,7 +101,7 @@
       displayItems = []
       return
     }
-    const result = []
+    const result: Item[] = []
     const map = await getChannelProviders()
     if (Array.isArray(value)) {
       for (const item of value) {
@@ -186,7 +189,7 @@
           value: item.value,
           placeholder: item.placeholder,
           editable,
-          openable: item.presenter ?? false
+          openable: item.presenter ?? item.action ?? false
         },
         el,
         (result) => {
@@ -201,7 +204,14 @@
           }
           if (result === undefined && item.value === '') displayItems = dropItem(n)
           opened = undefined
-          if (result === 'open') dispatch('open', item)
+          if (result === 'open') {
+            if (item.action) {
+              const doc = item.channel as Channel
+              invokeAction(doc, result, item.action)
+            } else {
+              dispatch('open', item)
+            }
+          }
         },
         (result) => {
           if (result != null) {
@@ -216,6 +226,21 @@
       )
     }
   }
+
+  const updateTooltip = (result: CustomEvent, item: Item, i: number): void => {
+    if (result.detail === 'open') {
+      closeTooltip()
+      if (item.action) {
+        const doc = item.channel as Channel
+        invokeAction(doc, result, item.action)
+      } else {
+        dispatch('open', item)
+      }
+    } else if (result.detail === 'edit') {
+      closeTooltip()
+      editChannel(btns[i], i, item)
+    }
+  }
 </script>
 
 <div
@@ -249,40 +274,21 @@
           value: item.value,
           placeholder: item.placeholder,
           editable: editable !== undefined ? false : undefined,
-          openable: item.presenter ?? false
+          openable: item.presenter ?? item.action ?? false
         },
         onUpdate: (result) => {
-          if (result.detail === 'open') {
+          updateTooltip(result, item, i)
-            closeTooltip()
-            dispatch('open', item)
-          } else if (result.detail === 'edit') {
-            closeTooltip()
-            editChannel(btns[i], i, item)
-          }
         }
       }}
     />
   {/each}
   {#if actions.length > 0 && editable}
-    {#if displayItems.length === 0}
-      <Button
-        focusIndex={focusIndex === -1 ? focusIndex : focusIndex + 2 + displayItems.length}
-        id={presentation.string.AddSocialLinks}
-        bind:input={addBtn}
-        icon={contact.icon.SocialEdit}
-        label={presentation.string.AddSocialLinks}
-        notSelected
-        {kind}
-        {size}
-        {shape}
-        on:click={showMenu}
-      />
-    {:else}
     <Button
       focusIndex={focusIndex === -1 ? focusIndex : focusIndex + 2 + displayItems.length}
       id={presentation.string.AddSocialLinks}
       bind:input={addBtn}
       icon={contact.icon.SocialEdit}
+      label={displayItems.length === 0 ? presentation.string.AddSocialLinks : undefined}
       {kind}
       {size}
       {shape}
@@ -290,5 +296,4 @@
       on:click={showMenu}
     />
   {/if}
-  {/if}
 </div>

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

@@ -107,11 +107,10 @@
   }
 
   function _open (ev: any) {
-    if (ev.detail.presenter !== undefined && Array.isArray(channels)) {
+    if (ev.detail.presenter !== undefined) {
-      const channel = channels[0]
+      if (allowOpen) {
-      if (channel !== undefined && allowOpen) {
         closeTooltip()
-        showPopup(ev.detail.presenter, { _id: channel.attachedTo, _class: channel.attachedToClass }, 'float')
+        showPopup(ev.detail.presenter, { _id: attachedTo, _class: attachedClass }, 'float')
       }
     }
   }

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

@@ -29,12 +29,6 @@
 
   const copyLink = (): void => {
     copyTextToClipboard(value.value)
-    // .then(() => {
-    //   console.log('Copied!', value.value)
-    // })
-    // .catch((err) => {
-    //   console.log('Something went wrong', err)
-    // })
     closeTooltip()
   }
 </script>

plugins/gmail-resources/src/components/Main.svelte

@@ -14,23 +14,22 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref, Doc, Class } from '@hcengineering/core'
   import contact, { Channel, formatName } from '@hcengineering/contact'
+  import { Class, Doc, Ref } from '@hcengineering/core'
   import { SharedMessage } from '@hcengineering/gmail'
-  import NewMessage from './NewMessage.svelte'
-  import FullMessage from './FullMessage.svelte'
-  import Chats from './Chats.svelte'
-  import { createQuery, getClient } from '@hcengineering/presentation'
   import { NotificationClientImpl } from '@hcengineering/notification-resources'
-  import { Panel, Icon, Label, Button, eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { createQuery } from '@hcengineering/presentation'
+  import { Button, eventToHTMLElement, Icon, Label, Panel, showPopup } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import gmail from '../plugin'
+  import Chats from './Chats.svelte'
   import Connect from './Connect.svelte'
+  import FullMessage from './FullMessage.svelte'
+  import NewMessage from './NewMessage.svelte'
 
   export let _id: Ref<Doc>
   export let _class: Ref<Class<Doc>>
 
-  // export let object: Contact
   let object: any
   let newMessage: boolean = false
   let currentMessage: SharedMessage | undefined = undefined
@@ -38,17 +37,19 @@
   const notificationClient = NotificationClientImpl.getClient()
   let enabled: boolean
 
-  const client = getClient()
+  const channelQuery = createQuery()
   const dispatch = createEventDispatcher()
 
-  client
+  $: channelQuery.query(
-    .findOne(contact.class.Channel, {
+    contact.class.Channel,
+    {
       attachedTo: _id,
       provider: contact.channelProvider.Email
-    })
+    },
-    .then((res) => {
+    (res) => {
-      channel = res
+      channel = res[0]
-    })
+    }
+  )
 
   const query = createQuery()
   $: _id &&

plugins/telegram-resources/src/components/Chat.svelte

@@ -41,15 +41,18 @@
 
   const client = getClient()
   const notificationClient = NotificationClientImpl.getClient()
+  const channelQuery = createQuery()
 
-  client
+  $: channelQuery.query(
-    .findOne(contact.class.Channel, {
+    contact.class.Channel,
+    {
       attachedTo: _id,
       provider: contact.channelProvider.Telegram
-    })
+    },
-    .then((res) => {
+    (res) => {
-      channel = res
+      channel = res[0]
-    })
+    }
+  )
 
   const query = createQuery()
   $: _id &&