From abd444192c1722eab39a14326b6caea1fc06a6fa Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Tue, 4 Aug 2026 18:07:04 +0530 Subject: [PATCH 1/2] fix(vcs): surface invalid installation tokens instead of empty results A VCS installation whose OAuth token can no longer be refreshed made every repository, branch and contents call fail with general_provider_failure. None of the Git surfaces read that error, so the console presented the failure as a successful empty result: repositories.svelte rendered its empty state, the branch selectors reported "No branches available", selectRootModal spun forever, and both updateRepository cards fell back to their "no repository connected" state for a repository that is in fact still connected. Classify the failure and render what actually happened, with the action that fixes it. Three kinds, because the remediation differs: - reconnect: the token is dead, only re-authorizing helps - locked: a concurrent refresh holds the lock, retrying works - provider: the provider itself failed, retry first general_provider_failure covers both a dead token and a provider outage, so the message is the only discriminator the API gives us. If that copy is ever reworded this degrades to the provider branch, which still shows a real error and still offers a reconnect. The repository cards gain an explicit fourth state rather than overloading the existing null sentinel, which already means "no repository connected" and is precisely the state being confused today. createGitDeploymentModal and createGit are migrated to runes, per AGENTS.md, since they had to be touched. --- src/lib/components/git/branchSelector.svelte | 224 ++++++++++++++---- .../components/git/connectRepoModal.svelte | 24 +- src/lib/components/git/index.ts | 1 + .../components/git/installationError.svelte | 141 +++++++++++ .../git/productionBranchFieldset.svelte | 109 +++++++-- src/lib/components/git/repositories.svelte | 120 ++++++++-- src/lib/components/git/selectRootModal.svelte | 89 +++++-- src/lib/helpers/vcsError.test.ts | 73 ++++++ src/lib/helpers/vcsError.ts | 57 +++++ .../functions/create-function/+page.svelte | 43 ++-- .../(modals)/createGit.svelte | 93 ++++++-- .../settings/updateRepository.svelte | 196 ++++++++++++--- .../create-site/repositories/+page.svelte | 95 +++++--- .../createGitDeploymentModal.svelte | 99 ++++++-- .../settings/updateRepository.svelte | 191 ++++++++++++--- 15 files changed, 1268 insertions(+), 287 deletions(-) create mode 100644 src/lib/components/git/installationError.svelte create mode 100644 src/lib/helpers/vcsError.test.ts create mode 100644 src/lib/helpers/vcsError.ts 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..920e298ebf 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 '$lib/components/git/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..60a4196111 --- /dev/null +++ b/src/lib/components/git/installationError.svelte @@ -0,0 +1,141 @@ + + + + + {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..9bf6efc2e6 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 '$lib/components/git/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..4d5a3b786f --- /dev/null +++ b/src/lib/helpers/vcsError.ts @@ -0,0 +1,57 @@ +/** + * Classifying failures that come from the VCS installation itself rather than + * from the repository, branch or directory being genuinely empty. + * + * Every VCS read endpoint (list repositories, list branches, list namespaces, + * get repository contents) refreshes the installation's OAuth token first, so + * a dead token surfaces as a failure on an otherwise ordinary list call. Left + * unclassified these all render as a successful empty result ("No repositories + * found", "No branches available", a spinner that never resolves), which is the + * opposite of what happened. + */ + +/** + * How a failed VCS call should be explained to the user. + * + * - `reconnect` - the installation's stored OAuth token is dead and cannot be + * refreshed. Only the user can fix it, by re-authorizing the installation. + * - `locked` - a concurrent token refresh holds the lock. Transient; retrying + * works. The installation is fine, so never lead with a reconnect here. + * - `provider` - the provider itself failed (outage, rate limit). Also + * transient, but a dead token can land here too (see below), so a reconnect + * stays available as a secondary action. + */ +export type VcsInstallationErrorKind = 'reconnect' | 'locked' | 'provider'; + +/** + * Classify an error thrown by a VCS endpoint that refreshes the installation + * token. Returns `null` for anything that is not an installation-level failure, + * so callers can fall through to their normal error handling. + * + * The API reports both a dead installation token and a genuine provider outage + * as `general_provider_failure`, so the message substring is the only + * discriminator we get: the token failures are the ones whose copy asks the + * user to reconnect ("Please reconnect it.", "Please reconnect the + * installation."). That copy is authored in the backend's + * `Appwrite\Vcs\InstallationTokens` (`refresh()` and `exchange()`, see + * `src/Appwrite/Vcs/InstallationTokens.php` in appwrite/appwrite); if it is + * ever reworded this falls back to `provider`, which still shows a real error + * and still offers a reconnect, just with outage-first wording. + * + * Deliberately a structural cast and not an `instanceof AppwriteException` + * check: `hooks.client.ts` unwraps thrown SDK errors into plain + * `{ message, status, type }` objects before they reach `page.error`, so an + * `instanceof` check would miss exactly the load-function failures this exists + * to catch. + */ +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} Date: Tue, 4 Aug 2026 18:53:22 +0530 Subject: [PATCH 2/2] refactor(vcs): trim comments to this repo's density and unify imports vcsError.ts carried 43 lines of comment over 14 lines of code, saying the same thing in three overlapping blocks; the git components it sits beside average close to none. Kept only what is not inferable from the code: why the message substring is the discriminator, where that backend copy lives, and why the cast is structural rather than instanceof. installationError.svelte's header repeated the same context again. Same-directory imports of installationError were written two ways across the files this touched. Now all relative, matching connectGit.svelte. --- .../components/git/connectRepoModal.svelte | 2 +- .../components/git/installationError.svelte | 17 ++---- src/lib/components/git/selectRootModal.svelte | 2 +- src/lib/helpers/vcsError.ts | 54 ++++++------------- 4 files changed, 24 insertions(+), 51 deletions(-) diff --git a/src/lib/components/git/connectRepoModal.svelte b/src/lib/components/git/connectRepoModal.svelte index 920e298ebf..352a6b1d93 100644 --- a/src/lib/components/git/connectRepoModal.svelte +++ b/src/lib/components/git/connectRepoModal.svelte @@ -15,7 +15,7 @@ import { page } from '$app/state'; import { connectGitHub } from '$lib/stores/git'; import type { VcsInstallationErrorKind } from '$lib/helpers/vcsError'; - import InstallationError from '$lib/components/git/installationError.svelte'; + import InstallationError from './installationError.svelte'; let { show = $bindable(false), diff --git a/src/lib/components/git/installationError.svelte b/src/lib/components/git/installationError.svelte index 60a4196111..10048602f4 100644 --- a/src/lib/components/git/installationError.svelte +++ b/src/lib/components/git/installationError.svelte @@ -1,18 +1,11 @@