diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index 228a0044c3..db390becae 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -9,28 +9,79 @@ import { Query } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; import { page } from '$app/state'; - import { createEventDispatcher, hasContext, tick } from 'svelte'; - - export let value = ''; - export let installationId: string; - export let repositoryId: string; - export let label = 'Production branch'; - export let placeholder = 'Select branch'; - - const dispatch = createEventDispatcher(); + import { createEventDispatcher, hasContext, tick, untrack } from 'svelte'; + import { getVcsInstallationErrorKind } from '$lib/helpers/vcsError'; + import { installation, installations } from '$lib/stores/vcs'; + import InstallationError from './installationError.svelte'; + + type Props = { + value?: string; + installationId: string; + repositoryId: string; + label?: string; + placeholder?: string; + /** + * Set to `false` when the surrounding surface already renders its own + * installation alert for the same installation, so the user is not shown + * the same "Reconnect" warning twice. The in-list error state stays + * either way: the branch list must never read as "no branches". + */ + showInstallationError?: boolean; + }; + + let { + value = $bindable(''), + installationId, + repositoryId, + label = 'Production branch', + placeholder = 'Select branch', + showInstallationError = true + }: Props = $props(); + + // Deprecated in Svelte 5 but kept deliberately: every call site listens with + // `on:select`, and none of them are in scope here. + const dispatch = createEventDispatcher<{ select: string }>(); const inDialogGroup = hasContext('dialog-group'); - let open = false; - let searchQuery = ''; - let branches: string[] = []; - let searchResults: string[] = []; - let loading = false; - let loaded = false; - let searching = false; + let open = $state(false); + let searchQuery = $state(''); + let branches = $state([]); + let searchResults = $state([]); + let loading = $state(false); + let searching = $state(false); + /** + * The last failure from the branch endpoints. Without it a dead installation + * token renders as a successful empty list ("No branches available"), which + * is the opposite of what happened. + */ + let error = $state(null); + /** Repository the cached `branches` belong to, or `null` when nothing loaded. */ + let loadedFor = $state(null); let searchTimer: ReturnType; - let searchInput: HTMLInputElement; - let containerEl: HTMLDivElement; - let dropdownRect = { top: 0, left: 0, width: 0 }; + let searchInput = $state(); + let containerEl = $state(); + let dropdownRect = $state({ top: 0, left: 0, width: 0 }); + + const repositoryKey = $derived(`${installationId}:${repositoryId}`); + const errorKind = $derived(getVcsInstallationErrorKind(error)); + const displayBranches = $derived(searchQuery ? searchResults : branches); + + /** + * Provider and owner for the reconnect alert. Every route that renders a + * branch selector loads `page.data.installations`; the writable store covers + * the surfaces that pick an installation client side. + */ + const installationDetails = $derived( + $installations?.installations?.find((entry) => entry.$id === installationId) ?? + ($installation?.$id === installationId ? $installation : undefined) + ); + + /** + * When the list could not be loaded the typed query is the only way left to + * name a branch, so it is offered as a selectable value. Only in the error + * state: with a working list, committing an unverified name would be wrong. + */ + const typedBranch = $derived(error ? searchQuery.trim() : ''); function portal(node: HTMLElement) { const target = inDialogGroup ? document.querySelector('dialog[open]') : document.body; @@ -48,16 +99,26 @@ dropdownRect = { top: rect.bottom + 4, left: rect.left, width: rect.width }; } - $: (installationId, - repositoryId, - (() => { + $effect(() => { + // Cached branches and any recorded failure belong to the repository they + // were loaded for, so a change to either id throws them away. Only the + // key is tracked: reading `loadedFor` reactively would re-run this on + // every load and wipe the failure it had just recorded. + const key = repositoryKey; + untrack(() => { + if (loadedFor === key) return; branches = []; - loaded = false; - })()); - - async function loadBranches() { - if (loading || loaded || !installationId || !repositoryId) return; + searchResults = []; + error = null; + loadedFor = null; + }); + }); + + async function loadBranches(force = false) { + const key = repositoryKey; + if (loading || (!force && loadedFor === key) || !installationId || !repositoryId) return; loading = true; + error = null; try { const { branches: result } = await sdk .forProject(page.params.region, page.params.project) @@ -67,7 +128,11 @@ queries: [Query.limit(100)] }); branches = result.map((b) => b.name); - loaded = true; + loadedFor = key; + } catch (e) { + error = e; + branches = []; + loadedFor = null; } finally { loading = false; } @@ -77,6 +142,14 @@ if (!query) { searchResults = []; searching = false; + // A failed search must not outlive the query that caused it. When + // the base list never loaded there is nothing underneath to fall + // back to, so fetch it rather than showing a bare empty list. + if (loadedFor === repositoryKey) { + error = null; + } else { + loadBranches(); + } return; } searching = true; @@ -90,6 +163,12 @@ queries: [Query.limit(100)] }); searchResults = results.map((b) => b.name); + // Cleared on success only, so a failed load keeps explaining itself + // (and keeps the typed value selectable) while the search is running. + error = null; + } catch (e) { + error = e; + searchResults = []; } finally { searching = false; } @@ -100,11 +179,40 @@ searchTimer = setTimeout(() => searchBranches(searchQuery), 300); } + function onSearchKeydown(event: KeyboardEvent) { + if (event.key !== 'Enter' || !typedBranch) return; + event.preventDefault(); + select(typedBranch); + } + + function clearSearch() { + clearTimeout(searchTimer); + searchQuery = ''; + searchResults = []; + searching = false; + // Same reasoning as searchBranches, but only while the dropdown is + // open: the close paths call this too, and reloading then is wasted. + if (loadedFor === repositoryKey) { + error = null; + } else if (open) { + loadBranches(); + } + } + + function retry() { + error = null; + if (searchQuery) { + clearTimeout(searchTimer); + searchBranches(searchQuery); + return; + } + loadBranches(true); + } + function select(branch: string) { value = branch; open = false; - searchQuery = ''; - searchResults = []; + clearSearch(); dispatch('select', branch); } @@ -116,44 +224,47 @@ await tick(); searchInput?.focus(); } else { - searchQuery = ''; - searchResults = []; + clearSearch(); } } function handleKeydown(e: KeyboardEvent) { if (e.key === 'Escape') { open = false; - searchQuery = ''; - searchResults = []; + clearSearch(); } } function handleOutsideClick(e: MouseEvent) { - if (open && !containerEl.contains(e.target as Node)) { + if (open && !containerEl?.contains(e.target as Node)) { const dropdown = document.querySelector('.branch-selector-portal'); if (dropdown && dropdown.contains(e.target as Node)) return; open = false; - searchQuery = ''; - searchResults = []; + clearSearch(); } } - - $: displayBranches = searchQuery ? searchResults : branches; - +
{#if label} - + {/if} - + {#if errorKind && showInstallationError} + + {/if} + {#if open}
{#if searchQuery} - {/if} @@ -185,18 +291,32 @@
  • Loading...
    • {:else if searching}
  • Searching...
    • + {:else if error} + +
  • Branches could not be loaded
    • + {#if typedBranch} + +
  • select(typedBranch)}> + Use "{typedBranch}" +
    • + {:else} +
  • Type a branch name to use it anyway
    • + {/if} {:else if displayBranches.length === 0 && searchQuery}
  • No branches found
    • {:else if displayBranches.length === 0}
  • No branches available
    • {:else} {#each displayBranches as branch} - +
  • select(branch)}> + onclick={() => select(branch)}> {branch}
    • {/each} diff --git a/src/lib/components/git/connectRepoModal.svelte b/src/lib/components/git/connectRepoModal.svelte index faca63d917..352a6b1d93 100644 --- a/src/lib/components/git/connectRepoModal.svelte +++ b/src/lib/components/git/connectRepoModal.svelte @@ -14,6 +14,8 @@ import RepositoryBehaviour from '$lib/components/git/repositoryBehaviour.svelte'; import { page } from '$app/state'; import { connectGitHub } from '$lib/stores/git'; + import type { VcsInstallationErrorKind } from '$lib/helpers/vcsError'; + import InstallationError from './installationError.svelte'; let { show = $bindable(false), @@ -38,6 +40,10 @@ let selectedRepository = $state(''); let installations = $state({ installations: [], total: 0 }); let error = $state(''); + // Set by when the list failed because the installation is + // broken. The permissions hint in the footer is wrong in that case: no + // amount of scope fiddling fixes a token Appwrite can no longer refresh. + let installationErrorKind = $state(null); onMount(async () => { installations = await sdk @@ -100,6 +106,14 @@ {/if} {#if repositoryBehaviour === 'new'} + {#if installationErrorKind} + + + {/if} {/if} - {#if repositoryBehaviour === 'existing'} + {#if repositoryBehaviour === 'existing' && !installationErrorKind} @@ -152,7 +167,12 @@ {:else if repositoryBehaviour === 'new'} - {/if} diff --git a/src/lib/components/git/index.ts b/src/lib/components/git/index.ts index ddec8646be..da37c7d7ff 100644 --- a/src/lib/components/git/index.ts +++ b/src/lib/components/git/index.ts @@ -10,3 +10,4 @@ export { default as ProductionBranchFieldset } from './productionBranchFieldset. export { default as BranchSelector } from './branchSelector.svelte'; export { default as RepositoryCard } from './repositoryCard.svelte'; export { default as ConnectRepoModal } from './connectRepoModal.svelte'; +export { default as InstallationError } from './installationError.svelte'; diff --git a/src/lib/components/git/installationError.svelte b/src/lib/components/git/installationError.svelte new file mode 100644 index 0000000000..10048602f4 --- /dev/null +++ b/src/lib/components/git/installationError.svelte @@ -0,0 +1,134 @@ + + + + + {copy.description} + {#if identity} + + {identity} + + {/if} + + + + + {#if copy.reconnectIsPrimary && reconnectUrl} + + {/if} + + {#if onRetry} + + {/if} + + {#if !copy.reconnectIsPrimary && reconnectUrl} + + {/if} + + diff --git a/src/lib/components/git/productionBranchFieldset.svelte b/src/lib/components/git/productionBranchFieldset.svelte index fbd98f81e4..ad8bfbbf66 100644 --- a/src/lib/components/git/productionBranchFieldset.svelte +++ b/src/lib/components/git/productionBranchFieldset.svelte @@ -1,43 +1,114 @@
    - {#await loadDefaultBranch()} + {#if loading} - {:then} + {:else} + {#if errorKind} + + {:else if error} + + Appwrite could not read this repository, so the branch below is a fallback + rather than the repository's own default. Check it before you deploy. + + + + + {/if} + (branch = e.detail)} /> + showInstallationError={!errorKind} /> - {/await} + {/if}
    {#if show} diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte index df2c800501..46ab2567a6 100644 --- a/src/lib/components/git/repositories.svelte +++ b/src/lib/components/git/repositories.svelte @@ -16,6 +16,11 @@ } from '@appwrite.io/pink-svelte'; import { IconLockClosed, IconPlus } from '@appwrite.io/pink-icons-svelte'; import ConnectGit from './connectGit.svelte'; + import InstallationError from './installationError.svelte'; + import { + getVcsInstallationErrorKind, + type VcsInstallationErrorKind + } from '$lib/helpers/vcsError'; import SvgIcon from '../svgIcon.svelte'; import { Query, VCSDetectionType, type Models } from '@appwrite.io/console'; import { getFrameworkIcon } from '$lib/stores/sites'; @@ -34,6 +39,7 @@ hasInstallations = $bindable($installations?.total > 0), product = 'functions', callbackState = null, + installationErrorKind = $bindable(null), connect = () => {} }: { action?: 'button' | 'select'; @@ -42,6 +48,14 @@ hasInstallations?: boolean; product?: 'functions' | 'sites'; callbackState?: Record | null; + /** + * Read only output: set when the repository list failed because of the + * installation itself rather than because it is empty. Bind to it to + * hide surrounding copy that would be wrong while it is set, such as a + * "missing a repository? check your permissions" hint, which sends the + * user to fix scopes when the real problem is a dead token. + */ + installationErrorKind?: VcsInstallationErrorKind | null; connect?: (repository: Models.ProviderRepository) => void; } = $props(); @@ -54,6 +68,12 @@ let loadRepositoriesRequestId = 0; const limit = 5; + // The installation the list is currently showing, so a failure can name the + // provider and owner the user has to go and reconnect. + const activeInstallation = $derived( + installationsMap?.find((entry) => entry.$id === selectedInstallation) + ); + onMount(() => { isLoadingRepositories = true; loadInstallations(); @@ -104,7 +124,10 @@ ); } installationsMap = installationList.installations; - } else { + return; + } + + try { const { installations } = await sdk .forProject(page.params.region, page.params.project) .vcs.listInstallations(); @@ -115,37 +138,76 @@ installation.set(installations.find((entry) => entry.$id === selectedInstallation)); } installationsMap = installations; + } catch (error) { + // Without this the disabled "Loading..." placeholder below never + // resolves, which reads as a hung UI rather than a failed request. + installationsMap = []; + isLoadingRepositories = false; + addNotification({ + type: 'error', + message: error?.message ?? 'Failed to load Git installations' + }); } } async function loadRepositories(installationId: string, search: string) { const requestId = ++loadRepositoriesRequestId; + installationErrorKind = null; - const result = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositories({ - installationId, - type: - product === 'functions' ? VCSDetectionType.Runtime : VCSDetectionType.Framework, - search: search || undefined, - queries: [Query.limit(limit), Query.offset(offset)] - }); + try { + const result = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositories({ + installationId, + type: + product === 'functions' + ? VCSDetectionType.Runtime + : VCSDetectionType.Framework, + search: search || undefined, + queries: [Query.limit(limit), Query.offset(offset)] + }); - // Stale request - if (requestId !== loadRepositoriesRequestId) { - return; - } + // Stale request + if (requestId !== loadRepositoriesRequestId) { + return; + } + + $repositories.repositories = + product === 'functions' + ? (result as unknown as Models.ProviderRepositoryRuntimeList) + .runtimeProviderRepositories + : (result as unknown as Models.ProviderRepositoryFrameworkList) + .frameworkProviderRepositories; //TODO: remove forced cast after backend fixes + $repositories.total = result.total; + $repositories.search = search; + $repositories.installationId = installationId; + return $repositories.repositories; + } catch (error) { + // Stale request + if (requestId !== loadRepositoriesRequestId) { + return; + } + + const kind = getVcsInstallationErrorKind(error); + if (kind) { + // Drop the previous page only when something replaces it. + // Rendered in the list position, so the empty state never gets + // a chance to claim the installation simply has no repositories. + $repositories.repositories = []; + $repositories.total = 0; + $repositories.search = search; + $repositories.installationId = installationId; + installationErrorKind = kind; + return; + } - $repositories.repositories = - product === 'functions' - ? (result as unknown as Models.ProviderRepositoryRuntimeList) - .runtimeProviderRepositories - : (result as unknown as Models.ProviderRepositoryFrameworkList) - .frameworkProviderRepositories; //TODO: remove forced cast after backend fixes - $repositories.total = result.total; - $repositories.search = search; - $repositories.installationId = installationId; - return $repositories.repositories; + // Any other failure only gets a toast, so keep the previous page + // rather than swapping it for a bare "no repositories found". + addNotification({ + type: 'error', + message: error?.message ?? 'Failed to load repositories' + }); + } } selectedRepository; @@ -190,6 +252,10 @@ window.location.href = connectGitHub(callbackState).toString(); } search = ''; + // A different installation has its own health, so + // clear immediately instead of leaving the previous + // one's error up for the debounce window. + installationErrorKind = null; installation.set( installationsMap.find((entry) => entry.$id === selectedInstallation) ); @@ -205,6 +271,12 @@ {#if isLoadingRepositories} + {:else if installationErrorKind} + {:else if $repositories.total > 0} {#each $repositories.repositories as repo} diff --git a/src/lib/components/git/selectRootModal.svelte b/src/lib/components/git/selectRootModal.svelte index d30665015f..8b86383c43 100644 --- a/src/lib/components/git/selectRootModal.svelte +++ b/src/lib/components/git/selectRootModal.svelte @@ -7,6 +7,11 @@ import { installation, repository } from '$lib/stores/vcs'; import { VCSDetectionType, type Models } from '@appwrite.io/console'; import DirectoryPicker from '$lib/components/git/DirectoryPicker.svelte'; + import InstallationError from './installationError.svelte'; + import { + getVcsInstallationErrorKind, + type VcsInstallationErrorKind + } from '$lib/helpers/vcsError'; import { writable } from 'svelte/store'; type Directory = { @@ -32,6 +37,15 @@ } = $props(); let isLoading = $state(true); + /** + * Reading the tree goes through the installation token, so a dead token + * surfaces here as a failed contents call. Left unhandled the picker either + * sits on its spinner forever or renders an empty tree, both of which read + * as "this repository has no directories". + */ + let installationErrorKind = $state(null); + /** Whether the root listing ever succeeded, so the tree has something real in it. */ + let loadedRoot = $state(false); let directories = $state([ { title: 'Repository (root)', @@ -218,12 +232,22 @@ } for (const pathToLoad of pathsToLoad) { - const { fileCount, directories } = await fetchContents(pathToLoad); - const targetDir = getDirByPath(pathToLoad); - if (targetDir) { - targetDir.fileCount = fileCount; + try { + const { fileCount, directories } = await fetchContents(pathToLoad); + const targetDir = getDirByPath(pathToLoad); + if (targetDir) { + targetDir.fileCount = fileCount; + } + ensureChildren(pathToLoad, directories); + } catch (error) { + const kind = getVcsInstallationErrorKind(error); + if (!kind) throw error; + // Every remaining segment goes through the same installation, + // so stop rather than firing a request per level that is + // already known to fail. + installationErrorKind = kind; + return; } - ensureChildren(pathToLoad, directories); } } @@ -250,12 +274,17 @@ directories[0].thumbnailUrl = detectedIcon; } + installationErrorKind = null; + loadedRoot = true; isLoading = false; expandedPaths = [...new Set([...expandedPaths, '/'])]; prefetchPath(rootDir || '/'); detectIconsForChildren('/'); } catch (error) { - console.error('Failed to load root directory:', error); + installationErrorKind = getVcsInstallationErrorKind(error); + if (!installationErrorKind) { + console.error('Failed to load root directory:', error); + } isLoading = false; } })(); @@ -308,7 +337,12 @@ expandedPaths = [...new Set([...expandedPaths, path])]; } catch (error) { - console.error('Failed to load directory:', error); + const kind = getVcsInstallationErrorKind(error); + if (kind) { + installationErrorKind = kind; + } else { + console.error('Failed to load directory:', error); + } } finally { targetDir.loading = false; inFlightPaths.delete(path); @@ -360,7 +394,9 @@ } $effect(() => { - if (show && !initialized && !isLoading) { + // `loadedRoot` gates this: without a real tree, expanding walks paths + // that are not there and fires one doomed request per segment. + if (show && !initialized && !isLoading && loadedRoot) { initialized = true; const normalized = normalizePath(rootDir || '/'); initialPath = normalized; @@ -380,6 +416,18 @@ loadPath(detail.fullPath); } + function retryLoad() { + installationErrorKind = null; + if (loadedRoot) { + // Only a deeper directory failed, so the tree is still usable. + loadPath(currentPath); + return; + } + // Re-runs the root effect, the only thing that can populate the tree. + initialized = false; + isLoading = true; + } + function handleSubmit() { rootDir = currentPath; show = false; @@ -390,16 +438,25 @@ Select the directory where your site code is located using the menu below. - + {#if installationErrorKind} + + {/if} + {#if loadedRoot || !installationErrorKind} + + {/if} - + diff --git a/src/lib/helpers/vcsError.test.ts b/src/lib/helpers/vcsError.test.ts new file mode 100644 index 0000000000..82bf03fbbc --- /dev/null +++ b/src/lib/helpers/vcsError.test.ts @@ -0,0 +1,73 @@ +import { getVcsInstallationErrorKind } from '$lib/helpers/vcsError'; +import { describe, expect, it } from 'vitest'; + +describe('getVcsInstallationErrorKind', () => { + it('returns null for values that are not error-like objects', () => { + expect(getVcsInstallationErrorKind(null)).toBe(null); + expect(getVcsInstallationErrorKind(undefined)).toBe(null); + expect(getVcsInstallationErrorKind('general_provider_failure')).toBe(null); + expect(getVcsInstallationErrorKind(400)).toBe(null); + }); + + it('returns null for unrelated error types', () => { + expect(getVcsInstallationErrorKind({ type: 'general_unknown', message: 'reconnect' })).toBe( + null + ); + expect(getVcsInstallationErrorKind({ message: 'Please reconnect the installation.' })).toBe( + null + ); + }); + + it('classifies a held refresh lock as locked', () => { + expect(getVcsInstallationErrorKind({ type: 'general_resource_locked' })).toBe('locked'); + expect( + getVcsInstallationErrorKind({ + type: 'general_resource_locked', + message: 'The resource is currently locked.', + status: 409 + }) + ).toBe('locked'); + }); + + it('classifies a dead installation token as reconnect', () => { + expect( + getVcsInstallationErrorKind({ + type: 'general_provider_failure', + message: 'This installation has no refresh token on file. Please reconnect it.', + status: 400 + }) + ).toBe('reconnect'); + + expect( + getVcsInstallationErrorKind({ + type: 'general_provider_failure', + message: 'Failed to refresh OAuth2 access token. Please reconnect the installation.' + }) + ).toBe('reconnect'); + }); + + it('matches the reconnect hint regardless of case', () => { + expect( + getVcsInstallationErrorKind({ + type: 'general_provider_failure', + message: 'Please RECONNECT the installation.' + }) + ).toBe('reconnect'); + }); + + it('classifies any other provider failure as provider', () => { + expect( + getVcsInstallationErrorKind({ + type: 'general_provider_failure', + message: 'GitHub API rate limit exceeded.' + }) + ).toBe('provider'); + }); + + it('falls back to provider when the failure carries no usable message', () => { + expect(getVcsInstallationErrorKind({ type: 'general_provider_failure' })).toBe('provider'); + expect( + getVcsInstallationErrorKind({ type: 'general_provider_failure', message: undefined }) + ).toBe('provider'); + }); +}); diff --git a/src/lib/helpers/vcsError.ts b/src/lib/helpers/vcsError.ts new file mode 100644 index 0000000000..b32fabfa50 --- /dev/null +++ b/src/lib/helpers/vcsError.ts @@ -0,0 +1,37 @@ +/** + * Classifies failures coming from the VCS installation itself rather than from + * a repository, branch or directory being genuinely empty. Every VCS read + * endpoint refreshes the installation's OAuth token first, so a dead token + * surfaces as a failure on an ordinary list call. + * + * - `reconnect` - the stored token is dead, only re-authorizing fixes it. + * - `locked` - a concurrent refresh holds the lock, retrying works. + * - `provider` - the provider failed (outage, rate limit), retry first. + */ +export type VcsInstallationErrorKind = 'reconnect' | 'locked' | 'provider'; + +/** + * Returns `null` for anything that is not an installation-level failure, so + * callers fall through to their normal error handling. + * + * The API reports a dead token and a provider outage identically as + * `general_provider_failure`, so the message is the only discriminator: the + * token failures are the ones asking the user to reconnect. That copy lives in + * `Appwrite\Vcs\InstallationTokens` (appwrite/appwrite); reword it there and + * this degrades to `provider`, which still shows a real error. + * + * Structural cast rather than `instanceof AppwriteException`, because + * `hooks.client.ts` unwraps SDK errors into plain objects before they reach + * `page.error`. + */ +export function getVcsInstallationErrorKind(error: unknown): VcsInstallationErrorKind | null { + if (!error || typeof error !== 'object') return null; + + const { type, message } = error as { type?: string; message?: string }; + + if (type === 'general_resource_locked') return 'locked'; + if (type !== 'general_provider_failure') return null; + + const text = typeof message === 'string' ? message.toLowerCase() : ''; + return text.includes('reconnect') ? 'reconnect' : 'provider'; +} diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte index b83d890df0..e625e44fa9 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte @@ -23,32 +23,40 @@ import { Button } from '$lib/elements/forms'; import { getIconFromRuntime } from '$lib/stores/runtimes'; import { regionalConsoleVariables } from '../../store'; + import type { VcsInstallationErrorKind } from '$lib/helpers/vcsError'; - export let data; + let { data } = $props(); const isVcsEnabled = $regionalConsoleVariables?._APP_VCS_ENABLED === true; const wizardBase = resolveRoute('/(console)/project-[region]-[project]/functions', page.params); - let selectedRepository: string; + let selectedRepository: string = $state(null); + // Set by when the list failed because the installation is + // broken. The permissions link below is the wrong advice then: the + // repositories are not hidden by scopes, Appwrite cannot read any of them. + let installationErrorKind = $state(null); - const featuredTemplates = data.templates - .filter((template) => template.id !== 'starter') - .slice(0, 4); + const featuredTemplates = $derived( + data.templates.filter((template) => template.id !== 'starter').slice(0, 4) + ); - const starterTemplate = data.templates.find((template) => template.id === 'starter'); + const starterTemplate = $derived(data.templates.find((template) => template.id === 'starter')); - const latestRuntimesByKey = new Map(); - for (const runtime of data.runtimesList.runtimes) { - latestRuntimesByKey.set(runtime.key, runtime); - } + const starterTemplateRuntimes = $derived.by(() => { + const starterRuntimeIds = new Set( + starterTemplate?.runtimes.map((runtime) => runtime.name) ?? [] + ); - const starterTemplateRuntimeIds = new Set( - starterTemplate?.runtimes.map((runtime) => runtime.name) ?? [] - ); + // Keyed by `key` so only the newest version of each runtime survives. + const latestRuntimesByKey = new Map(); + for (const runtime of data.runtimesList.runtimes) { + latestRuntimesByKey.set(runtime.key, runtime); + } - const starterTemplateRuntimes = [...latestRuntimesByKey.values()].filter((runtime) => - starterTemplateRuntimeIds.has(runtime.$id) - ); + return [...latestRuntimesByKey.values()].filter((runtime) => + starterRuntimeIds.has(runtime.$id) + ); + }); function connect(e: Models.ProviderRepository) { trackEvent(Click.ConnectRepositoryClick, { from: 'cover' }); @@ -103,6 +111,7 @@     - {#if $installation} + {#if $installation && !installationErrorKind} import { invalidate } from '$app/navigation'; import { Modal, Card } from '$lib/components'; - import { Repositories, BranchSelector } from '$lib/components/git'; + import { Repositories, BranchSelector, InstallationError } from '$lib/components/git'; import { Dependencies } from '$lib/constants'; import { Link } from '$lib/elements'; import { Button, InputCheckbox } from '$lib/elements/forms'; import { timeFromNow } from '$lib/helpers/date'; + import { + getVcsInstallationErrorKind, + type VcsInstallationErrorKind + } from '$lib/helpers/vcsError'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { installation, repository } from '$lib/stores/vcs'; @@ -20,22 +24,40 @@ import { func } from '../store'; import { page } from '$app/state'; - export let show = false; + let { + show = $bindable(false), + installations + }: { + show?: boolean; + installations: Models.InstallationList; + } = $props(); + + let hasRepository = $state(!!$func?.providerRepositoryId); + let selectedRepository: string = $state($func.providerRepositoryId); + let branch: string = $state(null); + let commit: string = $state(null); + let activate = $state(true); + let error = $state(''); + let isLoadingRepository = $state(true); + /** + * Looking the repository up refreshes the installation token first, so a + * dead token fails here rather than on anything to do with the repository. + * Without this the modal renders a repository card with nothing in it and a + * branch picker that can never fill, while "Create" stays live for a + * deployment that cannot be created. + */ + let installationErrorKind = $state(null); - export let installations: Models.InstallationList; - let hasRepository = !!$func?.providerRepositoryId; - let selectedRepository: string = $func.providerRepositoryId; - let branch: string = null; - let commit: string = null; - let activate = true; - let error = ''; + // Deliberately not `$state`: a guard so opening the modal loads once, not + // something the template reads. + let loadStarted = false; - async function loadInstallations() { + function loadInstallations() { if (!$func?.installationId && installations?.total > 0) { installation.set(installations.installations[0]); } $installation = installations.installations.find( - (installation) => installation.$id === $func.installationId + (entry) => entry.$id === $func.installationId ); if (!$installation?.$id) { $installation = installations.installations[0]; @@ -43,8 +65,10 @@ } async function load() { + isLoadingRepository = true; + installationErrorKind = null; try { - await loadInstallations(); + loadInstallations(); if (!$repository?.id && hasRepository) { $repository = await sdk .forProject(page.params.region, page.params.project) @@ -56,8 +80,13 @@ selectedRepository = $repository?.id; branch = $func.providerBranch || 'main'; - } catch { - return; + } catch (e) { + installationErrorKind = getVcsInstallationErrorKind(e); + if (!installationErrorKind) { + error = e.message; + } + } finally { + isLoadingRepository = false; } } @@ -118,13 +147,22 @@ } } - $: if (!show) { + $effect(() => { + if (!show || !hasRepository || loadStarted) return; + loadStarted = true; + load(); + }); + + $effect(() => { + if (show) return; error = ''; branch = null; commit = null; activate = true; hasRepository = !!$func?.providerRepositoryId; - } + installationErrorKind = null; + loadStarted = false; + }); @@ -134,7 +172,7 @@ external>Learn more {#if hasRepository} - {#await load()} + {#if isLoadingRepository} - {:then} + {:else if installationErrorKind} + + {:else} {/if} - {/await} + {/if} {:else} -     diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte index 2a9778ffab..cdbb6d87c6 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte @@ -7,17 +7,19 @@ import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { Query, Runtime, type Models, type ProjectKeyScopes } from '@appwrite.io/console'; - import { onMount } from 'svelte'; + import { onMount, untrack } from 'svelte'; import DisconnectRepo from './disconnectRepo.svelte'; import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs'; import { + Alert, Empty, Fieldset, Icon, Layout, Skeleton, Card as PinkCard, - Selector + Selector, + Typography } from '@appwrite.io/pink-svelte'; import Card from '$lib/components/card.svelte'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; @@ -25,53 +27,127 @@ ConnectGit, ConnectRepoModal, RepositoryCard, - BranchSelector + BranchSelector, + InstallationError } from '$lib/components/git'; + import { + getVcsInstallationErrorKind, + type VcsInstallationErrorKind + } from '$lib/helpers/vcsError'; import { isValueOfStringEnum } from '$lib/helpers/types'; import { page } from '$app/state'; import SelectRootModal from '$lib/components/git/selectRootModal.svelte'; - export let func: Models.Function; - export let installations: Models.InstallationList; + type Props = { + func: Models.Function; + installations: Models.InstallationList; + }; + + let { func, installations }: Props = $props(); + + /** + * Four states, deliberately not three. + * + * `disconnected` means the function has no repository. `error` means it has + * one we could not read. This used to be a single `null` repository, so a + * repository that could not be fetched rendered as "No repository is + * connected to this function yet" and invited the user to connect a + * repository that is already connected. The failure is almost always the + * Git installation's OAuth token, which is what the user actually has to + * fix. + */ + type RepositoryStatus = 'loading' | 'connected' | 'disconnected' | 'error'; + + let status = $state('loading'); + let repository = $state(null); + /** Populated only while `status === 'error'`; never conflated with "no repository". */ + let repositoryError = $state<{ + kind: VcsInstallationErrorKind | null; + message: string; + } | null>(null); + + // Seeded from the function once: these are the user's in-progress edits, so + // they must not silently track the prop while the form is being filled in. + let selectedBranch = $state(untrack(() => func?.providerBranch)); + let silentMode = $state(untrack(() => func?.providerSilentMode ?? false)); + let selectedDir = $state(untrack(() => func?.providerRootDirectory)); + let showDisconnect = $state(false); + let showConnectRepo = $state(false); + let showSelectRoot = $state(false); + + /** + * The installation the failed lookup actually used, so the alert can name + * the account that needs reconnecting rather than whichever installation + * happens to be selected. + */ + const errorInstallation = $derived( + installations?.installations?.find((item) => item.$id === func?.installationId) ?? + $installation + ); + + /** + * The function document stores the provider's repository id but never its + * name, so this is as much identity as we can show without a successful + * lookup. Showing it keeps the card honest about still being connected. + */ + const connectedRepositoryLabel = $derived( + func?.providerRepositoryId + ? `Repository ID: ${func.providerRepositoryId}` + : 'Connected repository' + ); - let selectedBranch = func?.providerBranch; - let silentMode = func?.providerSilentMode ?? false; - let selectedDir = func?.providerRootDirectory; - let showDisconnect = false; - let showConnectRepo = false; - let showSelectRoot = false; - let repository: Models.ProviderRepository | null | false = false; + const connectedRepositoryDetails = $derived( + [ + func?.providerBranch ? `Branch: ${func.providerBranch}` : null, + func?.providerRootDirectory ? `Root directory: ${func.providerRootDirectory}` : null + ] + .filter(Boolean) + .join(' • ') + ); onMount(() => { selectedBranch = func?.providerBranch; silentMode = func?.providerSilentMode ?? false; selectedDir = func?.providerRootDirectory; - const inst = installations?.installations.find( - (installation) => installation.$id === func?.installationId - ); + const inst = installations?.installations.find((item) => item.$id === func?.installationId); installation.set(inst ?? installations?.installations[0]); loadRepository(); }); async function loadRepository() { + if (!func?.installationId || !func?.providerRepositoryId) { + repository = null; + repositoryError = null; + status = 'disconnected'; + return; + } + + status = 'loading'; + repositoryError = null; + try { - if (func.installationId && func.providerRepositoryId) { - repository = await sdk - .forProject(page.params.region, page.params.project) - .vcs.getRepository({ - installationId: func.installationId, - providerRepositoryId: func.providerRepositoryId - }); - repositoryStore.set(repository); - } - } catch (err) { - console.warn(err); - } finally { - if (repository === false) { - repository = null; - } + const loaded = await sdk + .forProject(page.params.region, page.params.project) + .vcs.getRepository({ + installationId: func.installationId, + providerRepositoryId: func.providerRepositoryId + }); + repository = loaded; + repositoryStore.set(loaded); + status = 'connected'; + } catch (error) { + // The function still points at a repository, so this is not a + // disconnection. Report the lookup failure and keep the connection + // visible instead of blanking the card. + repository = null; + repositoryError = { + kind: getVcsInstallationErrorKind(error), + message: error?.message ?? '' + }; + status = 'error'; } } + async function updateConfiguration() { try { if (!isValueOfStringEnum(Runtime, func.runtime)) { @@ -112,14 +188,18 @@ trackError(error, Submit.FunctionUpdateConfiguration); } } - $: if (func?.installationId && func?.providerRepositoryId) { - selectedBranch = func?.providerBranch ?? 'main'; - } - $: isUpdateButtonEnabled = + $effect(() => { + if (func?.installationId && func?.providerRepositoryId) { + selectedBranch = func?.providerBranch ?? 'main'; + } + }); + + const isUpdateButtonEnabled = $derived( selectedBranch !== func?.providerBranch || - silentMode !== func?.providerSilentMode || - selectedDir !== func?.providerRootDirectory; + silentMode !== func?.providerSilentMode || + selectedDir !== func?.providerRootDirectory + ); async function connect(selectedInstallationId: string, selectedRepository: string) { let nextBranch = func?.providerBranch ?? 'main'; @@ -178,11 +258,11 @@
    - + Git repository Automatically deploy changes for every commit pushed to your Git repository. - {#if repository === false} + {#if status === 'loading'} - {:else if repository} + {:else if status === 'connected'} (showDisconnect = true)} />
    @@ -247,6 +327,44 @@
    + {:else if status === 'error'} + + + + + + + {connectedRepositoryLabel} + + {#if connectedRepositoryDetails} + + {connectedRepositoryDetails} + + {/if} + + + + + {#if repositoryError?.kind} + + {:else} + + {repositoryError?.message || + 'This function is still connected to a Git repository, but its details could not be loaded.'} + + + + + {/if} + {:else if func.installationId || installations?.total} when the list failed because the installation is + // broken. The "Missing a repository?" aside then points at the wrong fix: + // the repositories are not missing, Appwrite cannot read any of them. + let installationErrorKind = $state(null); function onConnect(e: Models.ProviderRepository) { trackEvent(Click.ConnectRepositoryClick, { @@ -40,55 +45,67 @@
    {:else} - + {/if} - - - {#if !data?.installations?.total} - - - Don't have a repository set up yet? Explore our templates, available in - all your favorite frameworks, and deploy in seconds. - - - - {:else} - - - Missing a repository? - - - Make sure Appwrite has access to your GitHub repositories. If you chose - specific repos, you may need to update your permissions to include the - missing one. - - - + + {#if !installationErrorKind} + + + {#if !data?.installations?.total} + + + Don't have a repository set up yet? Explore our templates, available + in all your favorite frameworks, and deploy in seconds. + + - {#if $installation} + href={resolveRoute( + '/(console)/project-[region]-[project]/sites/create-site/templates', + page.params + )} + secondary>View templates + {:else} + + + Missing a repository? + + + Make sure Appwrite has access to your GitHub repositories. If you + chose specific repos, you may need to update your permissions to + include the missing one. + + + - {/if} - - {/if} - - + secondary>Docs + {#if $installation} + + {/if} + + {/if} + + + {/if} diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte index 6e98419d04..c8c745c461 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte @@ -2,11 +2,15 @@ import { invalidate } from '$app/navigation'; import { page } from '$app/state'; import { Modal, Card } from '$lib/components'; - import { Repositories, BranchSelector } from '$lib/components/git'; + import { Repositories, BranchSelector, InstallationError } from '$lib/components/git'; import { Dependencies } from '$lib/constants'; import { Link } from '$lib/elements'; import { Button, InputCheckbox } from '$lib/elements/forms'; import { timeFromNow } from '$lib/helpers/date'; + import { + getVcsInstallationErrorKind, + type VcsInstallationErrorKind + } from '$lib/helpers/vcsError'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { installation, repository } from '$lib/stores/vcs'; @@ -19,24 +23,46 @@ } from '@appwrite.io/console'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte'; + import { untrack } from 'svelte'; + + let { + show = $bindable(false), + site, + installations + }: { + show?: boolean; + site: Models.Site; + installations: Models.InstallationList; + } = $props(); - export let show = false; - export let site: Models.Site; + // Seeded from the site once, then owned locally: connecting a repository in + // the modal flips `hasRepository` before the site itself has been updated. + let hasRepository = $state(untrack(() => !!site?.providerRepositoryId)); + let selectedRepository: string = $state(untrack(() => site.providerRepositoryId)); + let branch: string = $state(null); + let commit: string = $state(null); + let activate = $state(true); + let error = $state(''); + let isLoadingRepository = $state(true); + /** + * Looking the repository up refreshes the installation token first, so a + * dead token fails here rather than on anything to do with the repository. + * Without this the modal renders a repository card with nothing in it and a + * branch picker that can never fill, while "Create" stays live for a + * deployment that cannot be created. + */ + let installationErrorKind = $state(null); - export let installations: Models.InstallationList; - let hasRepository = !!site?.providerRepositoryId; - let selectedRepository: string = site.providerRepositoryId; - let branch: string = null; - let commit: string = null; - let activate = true; - let error = ''; + // Deliberately not `$state`: a guard so opening the modal loads once, not + // something the template reads. + let loadStarted = false; - async function loadInstallations() { + function loadInstallations() { if (!site?.installationId && installations?.total > 0) { installation.set(installations.installations[0]); } $installation = installations.installations.find( - (installation) => installation.$id === site.installationId + (entry) => entry.$id === site.installationId ); if (!$installation?.$id) { $installation = installations.installations[0]; @@ -44,8 +70,10 @@ } async function load() { + isLoadingRepository = true; + installationErrorKind = null; try { - await loadInstallations(); + loadInstallations(); if (!$repository?.id && hasRepository) { $repository = await sdk .forProject(page.params.region, page.params.project) @@ -57,8 +85,13 @@ selectedRepository = $repository?.id; branch = site.providerBranch || 'main'; - } catch { - return; + } catch (e) { + installationErrorKind = getVcsInstallationErrorKind(e); + if (!installationErrorKind) { + error = e.message; + } + } finally { + isLoadingRepository = false; } } @@ -119,13 +152,22 @@ } } - $: if (!show) { + $effect(() => { + if (!show || !hasRepository || loadStarted) return; + loadStarted = true; + load(); + }); + + $effect(() => { + if (show) return; error = ''; branch = null; commit = null; activate = true; hasRepository = !!site?.providerRepositoryId; - } + installationErrorKind = null; + loadStarted = false; + }); @@ -135,7 +177,7 @@ external>Learn more {#if hasRepository} - {#await load()} + {#if isLoadingRepository} - {:then} + {:else if installationErrorKind} + + {:else} {/if} - {/await} + {/if} {:else} -     diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte index 6326ce76da..10c23740ff 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte @@ -7,17 +7,19 @@ import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { Adapter, BuildRuntime, Framework, Query, type Models } from '@appwrite.io/console'; - import { onMount } from 'svelte'; + import { onMount, untrack } from 'svelte'; import DisconnectRepo from './disconnectRepo.svelte'; import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs'; import { + Alert, Empty, Fieldset, Icon, Layout, Skeleton, Card as PinkCard, - Selector + Selector, + Typography } from '@appwrite.io/pink-svelte'; import Card from '$lib/components/card.svelte'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; @@ -25,47 +27,119 @@ ConnectGit, ConnectRepoModal, RepositoryCard, - BranchSelector + BranchSelector, + InstallationError } from '$lib/components/git'; + import { + getVcsInstallationErrorKind, + type VcsInstallationErrorKind + } from '$lib/helpers/vcsError'; import { showConnectRepo } from './store'; import { page } from '$app/state'; import SelectRootModal from '$lib/components/git/selectRootModal.svelte'; - export let site: Models.Site; - export let installations: Models.InstallationList; + type Props = { + site: Models.Site; + installations: Models.InstallationList; + }; + + let { site, installations }: Props = $props(); + + /** + * Four states, deliberately not three. + * + * `disconnected` means the site has no repository. `error` means it has one + * we could not read. This used to be a single `null` repository, so a + * repository that could not be fetched rendered as "No repository is + * connected to this site yet" and invited the user to connect a repository + * that is already connected. The failure is almost always the Git + * installation's OAuth token, which is what the user actually has to fix. + */ + type RepositoryStatus = 'loading' | 'connected' | 'disconnected' | 'error'; + + let status = $state('loading'); + let repository = $state(null); + /** Populated only while `status === 'error'`; never conflated with "no repository". */ + let repositoryError = $state<{ + kind: VcsInstallationErrorKind | null; + message: string; + } | null>(null); + + // Seeded from the site once: these are the user's in-progress edits, so they + // must not silently track the prop while the form is being filled in. + let selectedBranch = $state(untrack(() => site?.providerBranch)); + let silentMode = $state(untrack(() => site?.providerSilentMode ?? false)); + let selectedDir = $state(untrack(() => site?.providerRootDirectory)); + let showDisconnect = $state(false); + let showSelectRoot = $state(false); + + /** + * The installation the failed lookup actually used, so the alert can name + * the account that needs reconnecting rather than whichever installation + * happens to be selected. + */ + const errorInstallation = $derived( + installations?.installations?.find((item) => item.$id === site?.installationId) ?? + $installation + ); + + /** + * The site document stores the provider's repository id but never its name, + * so this is as much identity as we can show without a successful lookup. + * Showing it keeps the card honest about still being connected. + */ + const connectedRepositoryLabel = $derived( + site?.providerRepositoryId + ? `Repository ID: ${site.providerRepositoryId}` + : 'Connected repository' + ); - let selectedBranch = site?.providerBranch; - let silentMode = site?.providerSilentMode ?? false; - let selectedDir = site?.providerRootDirectory; - let showDisconnect = false; - let showSelectRoot = false; - let repository: Models.ProviderRepository | null | false = false; + const connectedRepositoryDetails = $derived( + [ + site?.providerBranch ? `Branch: ${site.providerBranch}` : null, + site?.providerRootDirectory ? `Root directory: ${site.providerRootDirectory}` : null + ] + .filter(Boolean) + .join(' • ') + ); onMount(() => { - const inst = installations?.installations.find( - (installation) => installation.$id === site?.installationId - ); + const inst = installations?.installations.find((item) => item.$id === site?.installationId); installation.set(inst ?? installations?.installations[0]); loadRepository(); }); async function loadRepository() { + if (!site?.installationId || !site?.providerRepositoryId) { + repository = null; + repositoryError = null; + status = 'disconnected'; + return; + } + + status = 'loading'; + repositoryError = null; + try { - if (site.installationId && site.providerRepositoryId) { - repository = await sdk - .forProject(page.params.region, page.params.project) - .vcs.getRepository({ - installationId: site.installationId, - providerRepositoryId: site.providerRepositoryId - }); - repositoryStore.set(repository); - } - } catch (err) { - console.warn(err); - } finally { - if (repository === false) { - repository = null; - } + const loaded = await sdk + .forProject(page.params.region, page.params.project) + .vcs.getRepository({ + installationId: site.installationId, + providerRepositoryId: site.providerRepositoryId + }); + repository = loaded; + repositoryStore.set(loaded); + status = 'connected'; + } catch (error) { + // The site still points at a repository, so this is not a + // disconnection. Report the lookup failure and keep the connection + // visible instead of blanking the card. + repository = null; + repositoryError = { + kind: getVcsInstallationErrorKind(error), + message: error?.message ?? '' + }; + status = 'error'; } } @@ -162,22 +236,25 @@ invalidate(Dependencies.SITE); } - $: if (site?.installationId && site?.providerRepositoryId) { - selectedBranch = site?.providerBranch ?? 'main'; - } + $effect(() => { + if (site?.installationId && site?.providerRepositoryId) { + selectedBranch = site?.providerBranch ?? 'main'; + } + }); - $: isUpdateButtonEnabled = + const isUpdateButtonEnabled = $derived( selectedBranch !== site?.providerBranch || - silentMode !== site?.providerSilentMode || - selectedDir !== site?.providerRootDirectory; + silentMode !== site?.providerSilentMode || + selectedDir !== site?.providerRootDirectory + ); - + Git repository Automatically deploy changes for every commit pushed to your Git repository. - {#if repository === false} + {#if status === 'loading'} - {:else if repository} + {:else if status === 'connected'} (showDisconnect = true)} /> @@ -243,6 +320,44 @@ + {:else if status === 'error'} + + + + + + + {connectedRepositoryLabel} + + {#if connectedRepositoryDetails} + + {connectedRepositoryDetails} + + {/if} + + + + + {#if repositoryError?.kind} + + {:else} + + {repositoryError?.message || + 'This site is still connected to a Git repository, but its details could not be loaded.'} + + + + + {/if} + {:else if site.installationId || installations?.total}