UBERF-12988: Add integration status and redesign integration state (#9643)

* UBERF-12988: Add integration status and redesign integration state

Signed-off-by: Artem Savchenko <[email protected]>

* Update plugins/setting-assets/lang/es.json

Co-authored-by: Copilot <[email protected]>
Signed-off-by: Artyom Savchenko <[email protected]>

* UBERF-12988: Get state from event

Signed-off-by: Artem Savchenko <[email protected]>

* UBERF-12988: Add isLoading for status

Signed-off-by: Artem Savchenko <[email protected]>

* UBERF-12988: Fix svelte-check

Signed-off-by: Artem Savchenko <[email protected]>

---------

Signed-off-by: Artem Savchenko <[email protected]>
Signed-off-by: Artyom Savchenko <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: ArtyomSavchenko

packages/ui/src/components/StatusBadge.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Status } from '@hcengineering/platform'
+  import { tooltip as tp } from '../tooltips'
+  import type { LabelAndProps } from '../types'
+
+  export let status: Status
+  export let overflow: boolean = true
+  export let multicolor: boolean = true
+  export let tooltip: LabelAndProps | undefined = undefined
+</script>
+
+<div class="flex-center container {status.severity}" class:overflow-label={overflow} class:multicolor use:tp={tooltip}>
+  <div class="status-circle"></div>
+</div>
+
+<style lang="scss">
+  .container {
+    user-select: none;
+    color: var(--theme-content-color);
+    &.OK {
+      color: var(--theme-won-color);
+    }
+    &.WARNING {
+      color: var(--theme-warning-color);
+    }
+    &.ERROR {
+      color: var(--theme-lost-color);
+    }
+  }
+
+  .status-circle {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+</style>

packages/ui/src/index.ts

@@ -61,6 +61,7 @@ export { default as ButtonGroup } from './components/ButtonGroup.svelte'
 export { default as FilterButton } from './components/FilterButton.svelte'
 export { default as FilterCategoryPopup } from './components/FilterCategoryPopup.svelte'
 export { default as Status } from './components/Status.svelte'
+export { default as StatusBadge } from './components/StatusBadge.svelte'
 export { default as StateTag } from './components/StateTag.svelte'
 export { default as Component } from './components/Component.svelte'
 export { default as Icon } from './components/Icon.svelte'

plugins/calendar-assets/lang/cs.json

@@ -122,7 +122,6 @@
     "Last": "Poslední",
     "Weekday": "Všední den",
     "WeekendDay": "Víkendový den",
-    "NotConnectedIntegration": "Účet {email} není integrován s pracovním prostorem",
     "SynchronizedCalendars": "Synchronizované kalendáře",
     "Account": "Účet",
     "NoCalendars": "Kalendáře pro synchronizaci nejsou vybrány"

plugins/calendar-assets/lang/de.json

@@ -122,7 +122,6 @@
     "Last": "Letzter",
     "Weekday": "Wochentag",
     "WeekendDay": "Wochenendtag",
-    "NotConnectedIntegration": "Das Konto {email} ist nicht mit dem Arbeitsbereich integriert",
     "SynchronizedCalendars": "Synchronisierte Kalender",
     "Account": "Konto",
     "NoCalendars": "Keine Kalender zur Synchronisation ausgewählt"

plugins/calendar-assets/lang/en.json

@@ -122,7 +122,6 @@
     "Last": "Last",
     "Weekday": "Weekday",
     "WeekendDay": "Weekend day",
-    "NotConnectedIntegration": "The account {email} is not integrated with the workspace",
     "SynchronizedCalendars": "Synchronized calendars",
     "Account": "Account",
     "NoCalendars": "No calendars selected for synchronization"

plugins/calendar-assets/lang/es.json

@@ -122,7 +122,6 @@
     "Last": "Último",
     "Weekday": "Día laborable",
     "WeekendDay": "Día de descanso",
-    "NotConnectedIntegration": "La cuenta {email} no está integrada con el espacio de trabajo",
     "SynchronizedCalendars": "Calendarios sincronizados",
     "Account": "Cuenta",
     "NoCalendars": "No se seleccionaron calendarios para la sincronización"

plugins/calendar-assets/lang/fr.json

@@ -122,7 +122,6 @@
     "Last": "Dernier",
     "Weekday": "Jour de la semaine",
     "WeekendDay": "Jour de congé",
-    "NotConnectedIntegration": "Le compte {email} n'est pas intégré au workspace",
     "SynchronizedCalendars": "Calendriers synchronisés",
     "Account": "Compte",
     "NoCalendars": "Aucun calendrier sélectionné pour la synchronisation"

plugins/calendar-assets/lang/it.json

@@ -122,7 +122,6 @@
     "Last": "Ultimo",
     "Weekday": "Giorno lavorativo",
     "WeekendDay": "Giorno libero",
-    "NotConnectedIntegration": "L'account {email} non è integrato con il workspace",
     "SynchronizedCalendars": "Calendari sincronizzati",
     "Account": "Account",
     "NoCalendars": "Nessun calendario selezionato per la sincronizzazione"

plugins/calendar-assets/lang/ja.json

@@ -118,7 +118,6 @@
     "Last": "最後",
     "Weekday": "平日",
     "WeekendDay": "休日",
-    "NotConnectedIntegration": "アカウント {email} はワークスペースに統合されていません",
     "SynchronizedCalendars": "同期されたカレンダー",
     "Account": "アカウント",
     "NoCalendars": "同期するカレンダーが選択されていません"

plugins/calendar-assets/lang/pt.json

@@ -122,7 +122,6 @@
     "Last": "Último",
     "Weekday": "Dia da semana",
     "WeekendDay": "Folga",
-    "NotConnectedIntegration": "A conta {email} não está integrada com o espaço de trabalho",
     "SynchronizedCalendars": "Calendários sincronizados",
     "Account": "Conta",
     "NoCalendars": "Nenhum calendário encontrado"