UBERF-5482 (#4619)

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

packages/ui/src/components/Button.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
-  import { onMount, ComponentType } from 'svelte'
+  import { onMount, ComponentType, createEventDispatcher } from 'svelte'
   import { registerFocus } from '../focus'
   import { tooltip } from '../tooltips'
   import type {
@@ -64,6 +64,7 @@
   export let noFocus: boolean = false
   export let adaptiveShrink: WidthType | null = null
   export let gap: 'medium' | 'large' = 'medium'
+  export let stopPropagation: boolean = true
 
   $: iconSize = iconProps?.size !== undefined ? iconProps.size : size && size === 'inline' ? 'inline' : 'small'
   $: iconRightSize = iconRightProps?.size !== undefined ? iconRightProps.size : 'x-small'
@@ -110,6 +111,13 @@
   $: if (input != null) {
     input.addEventListener('focus', updateFocus, { once: true })
   }
+
+  function preventHandler (e: MouseEvent) {
+    if (stopPropagation) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
 </script>
 
 <!-- {focusIndex} -->
@@ -135,7 +143,8 @@
   style:padding
   {title}
   type={kind === 'primary' ? 'submit' : 'button'}
-  on:click|stopPropagation|preventDefault
+  on:click={preventHandler}
+  on:click
   on:focus
   on:blur
   on:mousemove

plugins/support/src/index.ts

@@ -21,6 +21,8 @@ import { SupportClientFactory, SupportConversation, SupportSystem } from './type
 export * from './types'
 export { deleteSupportConversation, updateSupportConversation } from './utils'
 
+export const supportLink = 'https://join.slack.com/t/hulycommunity/shared_invite/zt-2cyrevz8g-AGqEDZNsujbn4wHOWd7myg'
+
 /**
  * @public
  */

plugins/workbench-resources/src/components/HelpAndSupport.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
   import setting, { settingId } from '@hcengineering/setting'
-  import support from '@hcengineering/support'
+  import support, { supportLink } from '@hcengineering/support'
   import { getSupportClient } from '@hcengineering/support-resources'
   import {
     Button,
@@ -100,10 +100,6 @@
       }
     }
   ]
-
-  async function contactUs () {
-    await getSupportClient()?.showWidget()
-  }
 </script>
 
 <div class="helpAndSupportPopup">
@@ -192,13 +188,15 @@
     </Scroller>
   {/if}
   <div class="footer">
-    <Button
+    <a href={supportLink}>
-      id="contact-us"
+      <Button
-      icon={support.icon.Support}
+        id="contact-us"
-      kind={'ghost'}
+        icon={support.icon.Support}
-      on:click={contactUs}
+        kind={'ghost'}
-      label={support.string.ContactUs}
+        label={support.string.ContactUs}
-    />
+        stopPropagation={false}
+      />
+    </a>
   </div>
 </div>
 

plugins/workbench-resources/src/components/Workbench.svelte

@@ -21,7 +21,7 @@
   import { IntlString, broadcastEvent, getMetadata, getResource } from '@hcengineering/platform'
   import { ActionContext, createQuery, getClient } from '@hcengineering/presentation'
   import setting from '@hcengineering/setting'
-  import support, { SupportStatus } from '@hcengineering/support'
+  import support, { SupportStatus, supportLink } from '@hcengineering/support'
   import {
     AnyComponent,
     Button,
@@ -712,6 +712,16 @@
           size={appsMini ? 'small' : 'large'}
           on:click={() => showPopup(AppSwitcher, { apps: getApps(apps) }, popupPosition)}
         />
+        <a href={supportLink}>
+          <AppItem
+            icon={support.icon.Support}
+            label={support.string.ContactUs}
+            size={appsMini ? 'small' : 'large'}
+            notify={supportStatus?.hasUnreadMessages}
+            selected={supportStatus?.visible}
+            loading={supportWidgetLoading}
+          />
+        </a>
         <!-- {#await supportClient then client}
           {#if client}
             <AppItem
@@ -953,9 +963,6 @@
       &-mobile {
         margin-bottom: 1rem;
       }
-      &:not(.mini) > *:not(:last-child) {
-        margin-bottom: 0.75rem;
-      }
       &.mini > *:not(:last-child) {
         margin-bottom: 0.25rem;
       }