windmill-components 1.558.4 → 1.596.0

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -9,22 +9,29 @@ import { fade } from 'svelte/transition';
 import { workspaceStore } from '../../stores';
 import hubPaths from '../../hubPaths.json';
 import GitSyncModeDisplay from './GitSyncModeDisplay.svelte';
+import { DEFAULT_HUB_BASE_URL } from '../../hub';
+import { ResourceService, VariableService } from '../../gen';
 let { idx = null, isSecondary = false, isLegacy = false, variant = 'standard', mode = null, repository = null, onAdd = null, isCollapsible = true, showEmptyState = false } = $props();
 const gitSyncContext = getGitSyncContext();
 const repo = $derived(repository || (idx !== null ? gitSyncContext.getRepository(idx) : null));
 const validation = $derived(idx !== null ? gitSyncContext.getValidation(idx) : null);
 const gitSyncTestJob = $derived(idx !== null ? gitSyncContext.gitSyncTestJobs?.[idx] : null);
 let confirmingDelete = $state(false);
-let targetBranch = $state('main'); // Default to main, will be updated when resource is available
+let targetBranch = $state(undefined); // Default to main, will be updated when resource is available
+let resourceInfo = $state(null);
+let loadingResourceInfo = $state(false);
 // Update target branch when repository changes
 $effect(() => {
     const abortController = new AbortController();
     if (repo?.git_repo_resource_path) {
-        gitSyncContext.getTargetBranch(repo).then(branch => {
+        gitSyncContext
+            .getTargetBranch(repo)
+            .then((branch) => {
             if (!abortController.signal.aborted) {
                 targetBranch = branch;
             }
-        }).catch(error => {
+        })
+            .catch((error) => {
             if (!abortController.signal.aborted) {
                 console.warn('Failed to get target branch:', error);
             }
@@ -34,22 +41,120 @@ $effect(() => {
         abortController.abort();
     };
 });
+// Load resource info when resource path is set and connection is saved (disabled)
+$effect(() => {
+    const abortController = new AbortController();
+    async function loadResourceInfo() {
+        if (repo?.git_repo_resource_path && !repo.isUnsavedConnection && $workspaceStore) {
+            loadingResourceInfo = true;
+            resourceInfo = null;
+            try {
+                const resource = await ResourceService.getResource({
+                    workspace: $workspaceStore,
+                    path: repo.git_repo_resource_path
+                });
+                if (!abortController.signal.aborted && resource?.value) {
+                    // Extract git URL from resource value
+                    const value = resource.value;
+                    let gitUrl = value?.url || value?.git_url;
+                    if (gitUrl && typeof gitUrl === 'string') {
+                        // Check if the URL is a variable reference ($var:path)
+                        const varMatch = gitUrl.match(/^\$var:(.+)$/);
+                        if (varMatch) {
+                            const varPath = varMatch[1];
+                            try {
+                                // Attempt to fetch the variable value
+                                const variable = await VariableService.getVariable({
+                                    workspace: $workspaceStore,
+                                    path: varPath,
+                                    decryptSecret: true
+                                });
+                                if (!abortController.signal.aborted && variable?.value) {
+                                    gitUrl = variable.value;
+                                }
+                                else {
+                                    // Variable doesn't have a value or couldn't be fetched
+                                    // Don't display anything
+                                    resourceInfo = null;
+                                    return;
+                                }
+                            }
+                            catch (error) {
+                                // Failed to fetch variable (permissions, not found, etc.)
+                                // Don't display anything
+                                if (!abortController.signal.aborted) {
+                                    console.debug('Failed to fetch variable for git URL:', error);
+                                    resourceInfo = null;
+                                }
+                                return;
+                            }
+                        }
+                        // Mask password in URL (supports https://user:password@host and https://token@host patterns)
+                        const maskedUrl = gitUrl.replace(/(https?:\/\/)([^:@]+)(:([^@]+))?@/, (match, protocol, user, colonPassword, password) => {
+                            if (password) {
+                                return `${protocol}${user}:${'*'.repeat(8)}@`;
+                            }
+                            return `${protocol}${'*'.repeat(8)}@`;
+                        });
+                        resourceInfo = { url: maskedUrl };
+                    }
+                    else {
+                        resourceInfo = { error: 'Git URL not found in resource' };
+                    }
+                }
+            }
+            catch (error) {
+                if (!abortController.signal.aborted) {
+                    console.error('Failed to load resource info:', error);
+                    resourceInfo = { error: 'Failed to load resource info' };
+                }
+            }
+            finally {
+                if (!abortController.signal.aborted) {
+                    loadingResourceInfo = false;
+                }
+            }
+        }
+        else {
+            resourceInfo = null;
+        }
+    }
+    loadResourceInfo();
+    return () => {
+        abortController.abort();
+    };
+});
 // Compute already-used repository paths to exclude from picker
 const usedRepositoryPaths = $derived(gitSyncContext.repositories
-    .map((r, i) => i !== idx ? r.git_repo_resource_path : null)
+    .map((r, i) => (i !== idx ? r.git_repo_resource_path : null))
     .filter((path) => Boolean(path?.trim())));
 // Determine display title based on variant and legacy status
-const displayTitle = $derived(variant === 'primary-sync' ? (mode === 'sync' ? 'Sync mode' : 'Promotion mode') :
-    variant === 'primary-promotion' ? 'Promotion mode' :
-        isLegacy ? 'Legacy promotion repository' :
-            isSecondary ? 'Secondary sync repository' :
-                `Repository #${(idx ?? 0) + 1}`);
+const displayTitle = $derived(variant === 'primary-sync'
+    ? mode === 'sync'
+        ? 'Sync mode'
+        : 'Promotion mode'
+    : variant === 'primary-promotion'
+        ? 'Promotion mode'
+        : isLegacy
+            ? 'Legacy promotion repository'
+            : isSecondary
+                ? repo?.use_individual_branch
+                    ? 'Secondary promotion repository'
+                    : 'Secondary sync repository'
+                : `Repository #${(idx ?? 0) + 1}`);
+// Determine the actual mode based on repository configuration
+const repoMode = $derived(variant === 'primary-promotion' || variant === 'legacy' || repo?.use_individual_branch
+    ? 'promotion'
+    : 'sync');
 // Determine display description based on variant and mode
-const displayDescription = $derived((variant === 'primary-sync' || variant === 'primary-promotion') ?
-    (mode === 'sync' ? `Changes will be committed directly to the ${targetBranch} branch` :
-        mode === 'promotion' ? `Changes will be made to new branches whose promotion target is ${targetBranch}` :
-            null) :
-    null);
+const targetOrDefaultBranch = $derived(targetBranch ? `'${targetBranch}'` : "repo's default");
+const displayDescription = $derived(variant === 'primary-sync' || variant === 'primary-promotion'
+    ? mode === 'sync'
+        ? `Changes will be committed directly to the ${targetOrDefaultBranch} branch`
+        : mode === 'promotion'
+            ? `Changes will be made to new branches whose promotion target is the ${targetOrDefaultBranch} branch`
+            : null
+    : null);
 const shouldShowEmptyState = $derived(showEmptyState || (!repo && (variant === 'primary-sync' || variant === 'primary-promotion')));
 async function handleSave() {
     if (!repo || idx === null)
@@ -116,20 +221,11 @@ function handlePullSettings() {
 {#snippet headerActions()}
 	{#if !isLegacy}
 		{#if validation?.hasChanges && validation?.isValid && !repo.isUnsavedConnection}
-			<Button
-				size="xs"
-				onclick={handleSave}
-				startIcon={{ icon: Save }}
-			>
+			<Button size="xs" variant="accent" onclick={handleSave} startIcon={{ icon: Save }}>
 				{repo.legacyImported ? 'Migrate and save' : 'Save changes'}
 			</Button>
 			{#if idx !== null && gitSyncContext.initialRepositories[idx] && !repo.legacyImported}
-				<Button
-					color="light"
-					size="xs"
-					onclick={handleRevert}
-					startIcon={{ icon: RotateCcw }}
-				>
+				<Button color="light" size="xs" onclick={handleRevert} startIcon={{ icon: RotateCcw }}>
 					Revert
 				</Button>
 			{/if}
@@ -164,12 +260,7 @@ function handlePullSettings() {
 					viewBox="0 0 24 24"
 					stroke="currentColor"
 				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M5 15l7-7 7 7"
-					/>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
 				</svg>
 			{/if}
 		</button>
@@ -178,10 +269,10 @@ function handlePullSettings() {
 		<div transition:fade|local={{ duration: 100 }}>
 			<Button
 				size="xs"
-				color="light"
-				variant="border"
+				variant="default"
 				onclick={initiateDelete}
 				startIcon={{ icon: Trash }}
+				destructive
 			>
 				Delete
 			</Button>
@@ -210,7 +301,7 @@ function handlePullSettings() {
 	<div class="space-y-4">
 		<!-- Resource Picker -->
 		<div class="flex gap-2 items-center">
-			<div class="font-medium">Resource:</div>
+			<div class="font-semibold">Resource:</div>
 			<div class="flex-1">
 				<ResourcePicker
 					bind:value={repo.git_repo_resource_path}
@@ -222,7 +313,7 @@ function handlePullSettings() {
 			{#if !emptyString(repo.git_repo_resource_path)}
 				<Button
 					disabled={emptyString(repo.script_path)}
-					color="dark"
+					variant="accent"
 					onclick={runGitSyncTestJob}
 					size="xs"
 				>
@@ -231,6 +322,25 @@ function handlePullSettings() {
 			{/if}
 		</div>
 
+		<!-- Display resource info when disabled (saved connection) -->
+		{#if !repo.isUnsavedConnection && repo.git_repo_resource_path}
+			<div class="ml-2 text-xs">
+				{#if loadingResourceInfo}
+					<div class="flex items-center gap-1 text-secondary">
+						<RotateCw size={12} class="animate-spin" />
+						<span>Loading resource info...</span>
+					</div>
+				{:else if resourceInfo?.url}
+					<div class="flex items-center gap-2 text-secondary">
+						<span class="font-medium">Git URL:</span>
+						<code class="bg-surface-secondary px-2 py-1 rounded text-primary">{resourceInfo.url}</code>
+					</div>
+				{:else if resourceInfo?.error}
+					<div class="text-red-600">{resourceInfo.error}</div>
+				{/if}
+			</div>
+		{/if}
+
 		{#if !emptyString(repo.git_repo_resource_path)}
 			<!-- Validation and Test Status -->
 			{#if validation?.isDuplicate}
@@ -257,12 +367,18 @@ function handlePullSettings() {
 					</a>
 					<span class="text-secondary">WARNING: Only read permissions are verified.</span>
 				</div>
+				{#if gitSyncTestJob.status === 'failure' && gitSyncTestJob.error}
+					<div class="text-red-600 text-xs mt-1">
+						Error: {gitSyncTestJob.error}
+					</div>
+				{/if}
 			{/if}
 
 			<!-- Warnings -->
 			{#if repo.legacyImported}
 				<Alert type="warning" title="Legacy git sync settings imported">
-					This repository was initialized from workspace-level legacy Git-Sync settings. Review the filters and press <b>Save</b> to migrate.
+					This repository was initialized from workspace-level legacy Git-Sync settings. Review the
+					filters and press <b>Save</b> to migrate.
 				</Alert>
 			{/if}
 
@@ -270,16 +386,18 @@ function handlePullSettings() {
 				<Alert type="warning" title="Script version mismatch">
 					The git sync version for this repository is not latest. Current: <a
 						target="_blank"
-						href="https://hub.windmill.dev/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
-					>{repo.script_path}</a>, latest:
+						href="{DEFAULT_HUB_BASE_URL}/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
+						>{repo.script_path}</a
+					>, latest:
 					<a
 						target="_blank"
-						href="https://hub.windmill.dev/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
-					>{hubPaths.gitSync}</a>
+						href="{DEFAULT_HUB_BASE_URL}/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
+						>{hubPaths.gitSync}</a
+					>
 					<div class="flex mt-2">
 						<Button
 							size="xs"
-							color="dark"
+							variant="accent"
 							onclick={() => {
 								if (repo) {
 									repo.script_path = hubPaths.gitSync
@@ -294,7 +412,7 @@ function handlePullSettings() {
 
 			<!-- Configuration -->
 			{#if repo.isUnsavedConnection && !emptyString(repo.git_repo_resource_path) && idx !== null}
-				<DetectionFlow {idx} mode={variant === 'primary-promotion' || variant === 'legacy' ? 'promotion' : 'sync'} />
+				<DetectionFlow {idx} mode={repoMode} />
 			{:else}
 				<GitSyncFilterSettings
 					bind:git_repo_resource_path={repo.git_repo_resource_path}
@@ -309,11 +427,7 @@ function handlePullSettings() {
 					useIndividualBranch={repo.use_individual_branch}
 				>
 					{#snippet actions()}
-						<Button
-							size="md"
-							onclick={handlePullSettings}
-							startIcon={{ icon: Download }}
-						>
+						<Button size="md" onclick={handlePullSettings} startIcon={{ icon: Download }}>
 							Pull settings
 						</Button>
 					{/snippet}
@@ -321,14 +435,10 @@ function handlePullSettings() {
 
 				{#if !repo.isUnsavedConnection}
 					<div class="flex justify-between items-start">
-					<!-- Display mode settings as prominent text -->
-					<div class="flex-1 mr-4">
-						<GitSyncModeDisplay
-							mode={variant === 'primary-promotion' || variant === 'legacy' ? 'promotion' : 'sync'}
-							{targetBranch}
-							repository={repo}
-						/>
-					</div>
+						<!-- Display mode settings as prominent text -->
+						<div class="flex-1 mr-4">
+							<GitSyncModeDisplay mode={repoMode} {targetBranch} repository={repo} />
+						</div>
 
 						<!-- Manual sync section for existing repos -->
 						{#if !emptyString(repo.git_repo_resource_path) && !repo.legacyImported}
@@ -337,8 +447,7 @@ function handlePullSettings() {
 								<div class="flex gap-2">
 									<Button
 										size="xs"
-										color="dark"
-										variant="border"
+										variant="default"
 										onclick={() => idx !== null && gitSyncContext.showPullModal(idx)}
 										startIcon={{ icon: Download }}
 									>
@@ -346,8 +455,7 @@ function handlePullSettings() {
 									</Button>
 									<Button
 										size="xs"
-										color="dark"
-										variant="border"
+										variant="default"
 										onclick={() => idx !== null && gitSyncContext.showPushModal(idx)}
 										startIcon={{ icon: Upload }}
 									>
@@ -360,7 +468,7 @@ function handlePullSettings() {
 				{/if}
 			{/if}
 		{:else}
-			<div class="text-xs text-tertiary">Please select a Git repository resource.</div>
+			<div class="text-xs text-primary">Please select a Git repository resource.</div>
 		{/if}
 	</div>
 {/snippet}
@@ -372,16 +480,18 @@ function handlePullSettings() {
 	<div class="rounded-lg border bg-surface p-4 mb-4">
 		<div class="flex items-center justify-between mb-4">
 			<div class="flex flex-col">
-				<h3 class="text-xl font-semibold">{displayTitle}</h3>
+				<h3 class="text-xs font-semibold text-emphasis">{displayTitle}</h3>
 				{#if displayDescription}
-					<p class="text-sm text-secondary">{displayDescription}</p>
+					<p class="text-2xs text-secondary">{displayDescription}</p>
 				{/if}
 			</div>
 		</div>
 
-		<div class="flex flex-col items-center justify-center py-8 px-4 border-2 border-dashed rounded-md">
+		<div
+			class="flex flex-col items-center justify-center py-8 px-4 border-2 border-dashed rounded-md border-border-normal"
+		>
 			<div class="text-center mb-4">
-				<p class="text-secondary mb-2">
+				<p class="text-primary text-xs font-normal mb-2">
 					{#if mode === 'sync'}
 						No sync repository configured. Add one to enable direct synchronization.
 					{:else if mode === 'promotion'}
@@ -392,13 +502,7 @@ function handlePullSettings() {
 				</p>
 			</div>
 			{#if onAdd}
-				<Button
-					size="md"
-					color="dark"
-					variant="border"
-					startIcon={{ icon: Plus }}
-					onclick={onAdd}
-				>
+				<Button unifiedSize="md" variant="default" startIcon={{ icon: Plus }} onclick={onAdd}>
 					Add {mode || 'repository'} repository
 				</Button>
 			{/if}
@@ -428,11 +532,13 @@ function handlePullSettings() {
 				<div class="flex items-center gap-2">
 					<span class="text-lg font-semibold">{displayTitle}</span>
 					{#if repo.legacyImported}
-						<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200">
+						<span
+							class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 border border-orange-200"
+						>
 							Legacy Configuration
 						</span>
 					{/if}
-					<span class="text-xs text-tertiary pt-1 pl-8">
+					<span class="text-xs text-primary pt-1 pl-8">
 						{repo.git_repo_resource_path}
 					</span>
 				</div>
@@ -447,4 +553,4 @@ function handlePullSettings() {
 			{/if}
 		</div>
 	{/if}
-{/if}
+{/if}

package/package/components/git_sync/GitSyncSection.svelte

@@ -27,12 +27,13 @@ $effect(() => {
 const primarySync = $derived(gitSyncContext?.getPrimarySyncRepository() || null);
 const primaryPromotion = $derived(gitSyncContext?.getPrimaryPromotionRepository() || null);
 const secondarySync = $derived(gitSyncContext?.getSecondarySyncRepositories() || []);
-const legacyPromotion = $derived(gitSyncContext?.getLegacyPromotionRepositories() || []);
+const secondaryPromotion = $derived(gitSyncContext?.getSecondaryPromotionRepositories() || []);
 // State for collapsible sections
 let secondarySyncExpanded = $state(false);
-let legacyPromotionExpanded = $state(false);
+let secondaryPromotionExpanded = $state(false);
 // Check if any secondary repositories are unsaved
-const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedConnection));
+const hasUnsavedSecondary = $derived(secondarySync.some((s) => s.repo.isUnsavedConnection));
+const hasUnsavedSecondaryPromotion = $derived(secondaryPromotion.some((s) => s.repo.isUnsavedConnection));
 </script>
 
 {#if !gitSyncContext}
@@ -46,10 +47,10 @@ const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedCon
 {:else}
 	<div class="flex flex-col gap-4 my-8">
 		<div class="flex flex-col gap-1">
-			<div class="text-primary text-lg font-semibold">Git Sync</div>
+			<div class="text-emphasis text-sm font-semibold">Git Sync</div>
 			<Description link="https://www.windmill.dev/docs/advanced/git_sync">
-				Connect the Windmill workspace to a Git repository to automatically commit and push
-				scripts, flows, and apps to the repository on each deploy.
+				Connect the Windmill workspace to a Git repository to automatically commit and push scripts,
+				flows, and apps to the repository on each deploy.
 			</Description>
 		</div>
 		<Alert type="info" title="Only new updates trigger git sync">
@@ -68,7 +69,7 @@ const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedCon
 	{#if $enterpriseLicense && gitSyncContext.repositories != undefined}
 		<div class="flex mt-5 mb-5 gap-8">
 			<Button
-				color="dark"
+				variant="accent"
 				target="_blank"
 				endIcon={{ icon: ExternalLink }}
 				href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
@@ -115,11 +116,7 @@ const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedCon
 								{:else}
 									{#each secondarySync as { repo, idx } (repo.git_repo_resource_path)}
 										<div class="pl-4">
-											<GitSyncRepositoryCard
-												variant="secondary"
-												{idx}
-												isSecondary={true}
-											/>
+											<GitSyncRepositoryCard variant="secondary" {idx} isSecondary={true} />
 										</div>
 									{/each}
 								{/if}
@@ -128,8 +125,7 @@ const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedCon
 									<div class="pl-4">
 										<Button
 											size="xs"
-											color="light"
-											variant="border"
+											variant="default"
 											startIcon={{ icon: Plus }}
 											onclick={() => gitSyncContext.addSyncRepository()}
 										>
@@ -145,7 +141,7 @@ const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedCon
 					{#if !hasUnsavedSecondary}
 						<div class="mt-2">
 							<button
-								class="text-xs text-tertiary hover:text-secondary transition-colors"
+								class="text-xs text-primary hover:text-secondary transition-colors"
 								onclick={() => {
 									secondarySyncExpanded = true
 									gitSyncContext.addSyncRepository()
@@ -169,38 +165,70 @@ const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedCon
 					isCollapsible={false}
 					showEmptyState={primaryPromotion?.repo === null}
 				/>
-			</div>
 
-			<!-- Legacy promotion repositories (backwards compatibility) -->
-			{#if legacyPromotion.length > 0}
-				<Alert type="warning" title="Multiple promotion repositories detected">
-					Multiple promotion repositories are no longer supported. Please reduce to a single promotion repository.
-					Only deletion is allowed for the additional repositories below.
-				</Alert>
-				<div class="mt-4">
-					<button
-						class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-						onclick={() => (legacyPromotionExpanded = !legacyPromotionExpanded)}
-					>
-						{#if legacyPromotionExpanded}
-							<ChevronDown size={16} />
-						{:else}
-							<ChevronRight size={16} />
-						{/if}
-						Legacy promotion repositories ({legacyPromotion.length})
-					</button>
+				<!-- Secondary Promotion Repositories -->
+				{#if primaryPromotion && !primaryPromotion.repo?.isUnsavedConnection}
+					{#if secondaryPromotion.length > 0 || secondaryPromotionExpanded}
+						<div class="mt-4">
+							<button
+								class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
+								onclick={() => (secondaryPromotionExpanded = !secondaryPromotionExpanded)}
+							>
+								{#if secondaryPromotionExpanded}
+									<ChevronDown size={16} />
+								{:else}
+									<ChevronRight size={16} />
+								{/if}
+								Secondary promotion repositories ({secondaryPromotion.length})
+							</button>
+
+							{#if secondaryPromotionExpanded}
+								<div class="mt-3 space-y-3">
+									{#if secondaryPromotion.length === 0}
+										<div class="text-sm text-secondary italic">
+											No secondary promotion repositories configured
+										</div>
+									{:else}
+										{#each secondaryPromotion as { repo, idx } (repo.git_repo_resource_path)}
+											<div class="pl-4">
+												<GitSyncRepositoryCard variant="secondary" {idx} isSecondary={true} />
+											</div>
+										{/each}
+									{/if}
 
-					{#if legacyPromotionExpanded}
-						<div class="space-y-3 mt-3">
-							{#each legacyPromotion as { repo, idx } (repo.git_repo_resource_path)}
-								<div class="pl-4">
-									<GitSyncRepositoryCard {idx} variant="legacy" isLegacy={true} />
+									{#if !hasUnsavedSecondaryPromotion}
+										<div class="pl-4">
+											<Button
+												size="xs"
+												variant="default"
+												startIcon={{ icon: Plus }}
+												onclick={() => gitSyncContext.addPromotionRepository()}
+											>
+												Add secondary promotion
+											</Button>
+										</div>
+									{/if}
 								</div>
-							{/each}
+							{/if}
 						</div>
+					{:else}
+						<!-- Collapsed state when no secondary promotion repos exist -->
+						{#if !hasUnsavedSecondaryPromotion}
+							<div class="mt-2">
+								<button
+									class="text-xs text-primary hover:text-secondary transition-colors"
+									onclick={() => {
+										secondaryPromotionExpanded = true
+										gitSyncContext.addPromotionRepository()
+									}}
+								>
+									+ Add secondary promotion repository
+								</button>
+							</div>
+						{/if}
 					{/if}
-				</div>
-			{/if}
+				{/if}
+			</div>
 		</div>
 
 		<!-- Modals -->