UBER-979 (#3788)

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

plugins/setting-resources/src/components/PluginCard.svelte

@@ -17,15 +17,7 @@
   import { getResource } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
   import type { Integration, IntegrationType } from '@hcengineering/setting'
-  import {
-    AnyComponent,
-    Button,
-    Component,
-    eventToHTMLElement,
-    Label,
-    PopupPosAlignment,
-    showPopup
-  } from '@hcengineering/ui'
+  import { AnyComponent, Button, Component, Label, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import setting from '../plugin'
 
   export let integrationType: IntegrationType
@@ -62,7 +54,7 @@
       await disconnect(integration.value)
     }
   }
-  const handleConfigure = async (e: any, component?: AnyComponent, pos?: PopupPosAlignment): Promise<void> => {
+  const handleConfigure = async (component?: AnyComponent): Promise<void> => {
     if (component === undefined) {
       return
     }
@@ -74,7 +66,7 @@
       })
       integration = await client.findOne(setting.class.Integration, { _id: id })
     }
-    showPopup(component, { integration }, pos ?? eventToHTMLElement(e), close)
+    showPopup(component, { integration }, 'top', close)
   }
   const handleReconnect = (e: any) => {
     if (integrationType.reconnectComponent) {
@@ -91,11 +83,16 @@
     </div>
   </div>
   <div class="content">
-    {#if integration}
+    {#if integration && integration.value !== ''}
       {integration.value}
     {:else}
       <Label label={integrationType.description} />
     {/if}
+    {#if integration?.disabled === true || integration?.error != null}
+      <div class="error">
+        <Label label={integration.error ?? setting.string.IntegrationDisabledSetting} />
+      </div>
+    {/if}
   </div>
   <div class="footer">
     {#if (integration?.value ?? '') === ''}
@@ -103,7 +100,7 @@
         <Button
           label={setting.string.Add}
           kind={'accented'}
-          on:click={(ev) => handleConfigure(ev, integrationType.createComponent)}
+          on:click={(ev) => handleConfigure(integrationType.createComponent)}
         />
       {/if}
     {:else if (integration?.disabled ?? false) && integrationType.reconnectComponent}
@@ -116,7 +113,7 @@
         <Button
           label={setting.string.Configure}
           kind={'accented'}
-          on:click={(ev) => handleConfigure(ev, integrationType.configureComponent, 'top')}
+          on:click={(ev) => handleConfigure(integrationType.configureComponent)}
         />
       {/if}
     {/if}
@@ -144,6 +141,10 @@
     flex-grow: 1;
     margin: 0 1.5rem 0.25rem;
     color: var(--theme-caption-color);
+
+    .error {
+      color: var(--theme-error-color);
+    }
   }
   .footer {
     flex-shrink: 0;