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

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

Signed-off-by: Artem Savchenko <armisav@gmail.com>

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

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Artyom Savchenko <armisav@gmail.com>

* UBERF-12988: Get state from event

Signed-off-by: Artem Savchenko <armisav@gmail.com>

* UBERF-12988: Add isLoading for status

Signed-off-by: Artem Savchenko <armisav@gmail.com>

* UBERF-12988: Fix svelte-check

Signed-off-by: Artem Savchenko <armisav@gmail.com>

---------

Signed-off-by: Artem Savchenko <armisav@gmail.com>
Signed-off-by: Artyom Savchenko <armisav@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Artyom Savchenko
2025-08-06 13:09:15 +07:00
committed by GitHub
co-authored by Copilot
parent 568d0911b0
commit 2021e27379
60 changed files with 378 additions and 385 deletions
@@ -13,17 +13,21 @@
// limitations under the License.
-->
<script lang="ts">
import { fade } from 'svelte/transition'
import { AttachedDoc, WithLookup } from '@hcengineering/core'
import { GithubIntegration, GithubIntegrationRepository } from '@hcengineering/github'
import { getClient } from '@hcengineering/presentation'
import type { Integration } from '@hcengineering/account-client'
import { BaseIntegrationState } from '@hcengineering/setting-resources'
import { OK, ERROR, Status } from '@hcengineering/platform'
import github from '../plugin'
import RepositoryPresenterRef from './RepositoryPresenterRef.svelte'
export let integration: Integration
let githubIntegration: WithLookup<GithubIntegration> | undefined
let status: Status | undefined
let isLoading = true
const asRepos = (docs: AttachedDoc[]) => docs as GithubIntegrationRepository[]
@@ -31,62 +35,48 @@
$: loadIntegration(integration)
async function loadIntegration (integration: Integration): Promise<void> {
const installationId = integration?.data?.installationId ?? []
const installations = Array.isArray(installationId) ? installationId : [installationId]
githubIntegration = await client.findOne(
github.class.GithubIntegration,
{
installationId: { $in: installations }
},
{
lookup: {
_id: {
repositories: github.class.GithubIntegrationRepository
try {
const installationId = integration?.data?.installationId ?? []
const installations = Array.isArray(installationId) ? installationId : [installationId]
githubIntegration = await client.findOne(
github.class.GithubIntegration,
{
installationId: { $in: installations }
},
{
lookup: {
_id: {
repositories: github.class.GithubIntegrationRepository
}
}
}
}
)
)
status = OK
} catch (err: any) {
console.error('Error loading github state:', err)
status = ERROR
} finally {
isLoading = false
}
}
</script>
<div class="integration-state">
<div class="state-content">
<BaseIntegrationState {integration} {status} {isLoading} value={githubIntegration?.name}>
<svelte:fragment slot="content">
{#if githubIntegration !== undefined}
<div class="stats-list" transition:fade={{ duration: 300 }}>
<div class="stat-row">
<span class="text-normal content-color font-medium">{githubIntegration.name}</span>
</div>
<div class="space-divider bottom" />
{#if githubIntegration.$lookup?.repositories != null}
{#each asRepos(githubIntegration.$lookup?.repositories) as repository}
<div class="stat-row">
<RepositoryPresenterRef value={repository._id} />
</div>
{/each}
{/if}
</div>
<div class="space-divider bottom" />
{#if githubIntegration.$lookup?.repositories != null}
{#each asRepos(githubIntegration.$lookup?.repositories) as repository}
<div class="stat-row">
<RepositoryPresenterRef value={repository._id} />
</div>
{/each}
{/if}
{/if}
</div>
</div>
</svelte:fragment>
</BaseIntegrationState>
<style lang="scss">
.integration-state {
display: flex;
flex-direction: column;
gap: 1rem;
}
.state-content {
display: flex;
flex-direction: column;
}
.stats-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.stat-row {
display: flex;
flex-direction: row;