windmill-components 1.542.5 → 1.550.0

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Save, Trash, XCircle, CheckCircle2, RotateCw, RotateCcw, Download, Upload } from 'lucide-svelte';
+<script lang="ts">import { Save, Trash, XCircle, CheckCircle2, RotateCw, RotateCcw, Download, Upload, Plus } from 'lucide-svelte';
 import { Button, Alert } from '../common';
 import { getGitSyncContext } from './GitSyncContext.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
@@ -8,18 +8,51 @@ import { sendUserToast } from '../../toast';
 import { fade } from 'svelte/transition';
 import { workspaceStore } from '../../stores';
 import hubPaths from '../../hubPaths.json';
-let { idx } = $props();
+import GitSyncModeDisplay from './GitSyncModeDisplay.svelte';
+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(gitSyncContext.getRepository(idx));
-const validation = $derived(gitSyncContext.getValidation(idx));
-const gitSyncTestJob = $derived(gitSyncContext.gitSyncTestJobs?.[idx]);
+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
+// Update target branch when repository changes
+$effect(() => {
+    const abortController = new AbortController();
+    if (repo?.git_repo_resource_path) {
+        gitSyncContext.getTargetBranch(repo).then(branch => {
+            if (!abortController.signal.aborted) {
+                targetBranch = branch;
+            }
+        }).catch(error => {
+            if (!abortController.signal.aborted) {
+                console.warn('Failed to get target branch:', error);
+            }
+        });
+    }
+    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)
     .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}`);
+// 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 shouldShowEmptyState = $derived(showEmptyState || (!repo && (variant === 'primary-sync' || variant === 'primary-promotion')));
 async function handleSave() {
-    if (!repo)
+    if (!repo || idx === null)
         return;
     try {
         await gitSyncContext.saveRepository(idx);
@@ -31,7 +64,7 @@ async function handleSave() {
     }
 }
 function handleRevert() {
-    if (!repo)
+    if (!repo || idx === null)
         return;
     try {
         gitSyncContext.revertRepository?.(idx);
@@ -46,6 +79,8 @@ function initiateDelete() {
     confirmingDelete = true;
 }
 async function confirmDelete() {
+    if (idx === null)
+        return;
     try {
         await gitSyncContext.removeRepository(idx);
         sendUserToast('Repository connection removed successfully');
@@ -62,7 +97,7 @@ function cancelDelete() {
     confirmingDelete = false;
 }
 function runGitSyncTestJob() {
-    if (gitSyncContext.runTestJob) {
+    if (idx !== null && gitSyncContext.runTestJob) {
         gitSyncContext.runTestJob(idx);
     }
 }
@@ -70,269 +105,346 @@ function emptyString(str) {
     return !str || str.trim() === '';
 }
 function handlePullSettings() {
-    gitSyncContext.showPullModal(idx, true); // true for settingsOnly
+    if (idx !== null) {
+        gitSyncContext.showPullModal(idx, true);
+    }
 }
 </script>
 
-{#if repo}
-	<div class="rounded-lg shadow-sm border p-0 w-full mb-4">
-		<!-- Card Header -->
-		<div class="flex items-center justify-between min-h-10 px-4 py-1 border-b">
-			<div class="flex items-center gap-2">
-				<span class="font-semibold">Repository #{idx + 1}</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">
-						Legacy Configuration
-					</span>
-				{/if}
-				<span class="text-xs text-tertiary pt-1 pl-8">
-					{repo.git_repo_resource_path}
-				</span>
+<!-- Shared snippets for reusable content -->
+
+{#snippet headerActions()}
+	{#if !isLegacy}
+		{#if validation?.hasChanges && validation?.isValid && !repo.isUnsavedConnection}
+			<Button
+				size="xs"
+				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 }}
+				>
+					Revert
+				</Button>
+			{/if}
+		{/if}
+	{/if}
+	{#if isCollapsible}
+		<button
+			class="text-secondary hover:text-primary focus:outline-none"
+			onclick={() => (repo.collapsed = !repo.collapsed)}
+			aria-label="Toggle collapse"
+		>
+			{#if repo.collapsed}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 9l-7 7-7-7"
+					/>
+				</svg>
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M5 15l7-7 7 7"
+					/>
+				</svg>
+			{/if}
+		</button>
+	{/if}
+	{#if !confirmingDelete}
+		<div transition:fade|local={{ duration: 100 }}>
+			<Button
+				size="xs"
+				color="light"
+				variant="border"
+				onclick={initiateDelete}
+				startIcon={{ icon: Trash }}
+			>
+				Delete
+			</Button>
+		</div>
+	{:else}
+		<div class="flex gap-1">
+			<button
+				transition:fade|local={{ duration: 100 }}
+				class="px-3 py-1 text-xs bg-red-500 text-white rounded duration-200 hover:bg-red-600"
+				onclick={confirmDelete}
+			>
+				Confirm delete
+			</button>
+			<button
+				transition:fade|local={{ duration: 100 }}
+				class="px-2 py-1 text-xs bg-surface-secondary rounded duration-200 hover:bg-surface-hover"
+				onclick={cancelDelete}
+			>
+				<XCircle size={12} />
+			</button>
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet repositoryContent()}
+	<div class="space-y-4">
+		<!-- Resource Picker -->
+		<div class="flex gap-2 items-center">
+			<div class="font-medium">Resource:</div>
+			<div class="flex-1">
+				<ResourcePicker
+					bind:value={repo.git_repo_resource_path}
+					resourceType={'git_repository'}
+					disabled={!repo.isUnsavedConnection}
+					excludedValues={usedRepositoryPaths}
+				/>
 			</div>
-			<div class="flex items-center gap-2">
-				{#if validation.hasChanges && validation.isValid && !repo.isUnsavedConnection}
-					<Button
-						size="xs"
-						onclick={handleSave}
-						startIcon={{ icon: Save }}
+			{#if !emptyString(repo.git_repo_resource_path)}
+				<Button
+					disabled={emptyString(repo.script_path)}
+					color="dark"
+					onclick={runGitSyncTestJob}
+					size="xs"
+				>
+					Test connection
+				</Button>
+			{/if}
+		</div>
+
+		{#if !emptyString(repo.git_repo_resource_path)}
+			<!-- Validation and Test Status -->
+			{#if validation?.isDuplicate}
+				<div class="text-red-600 text-sm">
+					This resource is already used by another repository.
+				</div>
+			{/if}
+			{#if gitSyncTestJob && gitSyncTestJob.status !== undefined}
+				<div class="flex text-sm gap-1 items-center">
+					{#if gitSyncTestJob.status === 'running'}
+						<RotateCw size={14} class="animate-spin" />
+					{:else if gitSyncTestJob.status === 'success'}
+						<CheckCircle2 size={14} class="text-green-600" />
+					{:else}
+						<XCircle size={14} class="text-red-700" />
+					{/if}
+					Git sync resource checked via Windmill job
+					<a
+						target="_blank"
+						href={`/run/${gitSyncTestJob.jobId}?workspace=${$workspaceStore}`}
+						class="text-blue-500 hover:underline"
 					>
-						{repo.legacyImported ? 'Migrate and save' : 'Save changes'}
-					</Button>
-					{#if gitSyncContext.initialRepositories[idx] && !repo.legacyImported}
+						{gitSyncTestJob.jobId}
+					</a>
+					<span class="text-secondary">WARNING: Only read permissions are verified.</span>
+				</div>
+			{/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.
+				</Alert>
+			{/if}
+
+			{#if repo.script_path != hubPaths.gitSync}
+				<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:
+					<a
+						target="_blank"
+						href="https://hub.windmill.dev/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
+					>{hubPaths.gitSync}</a>
+					<div class="flex mt-2">
 						<Button
-							color="light"
 							size="xs"
-							onclick={handleRevert}
-							startIcon={{ icon: RotateCcw }}
+							color="dark"
+							onclick={() => {
+								if (repo) {
+									repo.script_path = hubPaths.gitSync
+								}
+							}}
 						>
-							Revert
+							Update git sync script (require save git settings to be applied)
 						</Button>
-					{/if}
-				{/if}
-				<button
-					class="text-secondary hover:text-primary focus:outline-none"
-					onclick={() => (repo.collapsed = !repo.collapsed)}
-					aria-label="Toggle collapse"
+					</div>
+				</Alert>
+			{/if}
+
+			<!-- Configuration -->
+			{#if repo.isUnsavedConnection && !emptyString(repo.git_repo_resource_path) && idx !== null}
+				<DetectionFlow {idx} mode={variant === 'primary-promotion' || variant === 'legacy' ? 'promotion' : 'sync'} />
+			{:else}
+				<GitSyncFilterSettings
+					bind:git_repo_resource_path={repo.git_repo_resource_path}
+					bind:include_path={repo.settings.include_path}
+					bind:include_type={repo.settings.include_type}
+					bind:exclude_types_override={repo.exclude_types_override}
+					isLegacyRepo={repo.legacyImported}
+					bind:excludes={repo.settings.exclude_path}
+					bind:extraIncludes={repo.settings.extra_include_path}
+					isInitialSetup={false}
+					requiresMigration={repo.legacyImported}
+					useIndividualBranch={repo.use_individual_branch}
 				>
-					{#if repo.collapsed}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-5 w-5"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M19 9l-7 7-7-7"
-							/>
-						</svg>
-					{:else}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-5 w-5"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M5 15l7-7 7 7"
-							/>
-						</svg>
-					{/if}
-				</button>
-				{#if !confirmingDelete}
-					<button
-						transition:fade|local={{ duration: 100 }}
-						class="rounded-full p-2 bg-surface-secondary duration-200 hover:bg-surface-hover"
-						aria-label="Remove repository"
-						onclick={initiateDelete}
-					>
-						<Trash size={14} />
-					</button>
-				{:else}
-					<div class="flex gap-1">
-						<button
-							transition:fade|local={{ duration: 100 }}
-							class="px-3 py-1 text-xs bg-red-500 text-white rounded duration-200 hover:bg-red-600"
-							onclick={confirmDelete}
-						>
-							Confirm delete
-						</button>
-						<button
-							transition:fade|local={{ duration: 100 }}
-							class="px-2 py-1 text-xs bg-surface-secondary rounded duration-200 hover:bg-surface-hover"
-							onclick={cancelDelete}
+					{#snippet actions()}
+						<Button
+							size="md"
+							onclick={handlePullSettings}
+							startIcon={{ icon: Download }}
 						>
-							<XCircle size={12} />
-						</button>
-					</div>
-				{/if}
-			</div>
-		</div>
-		{#if !repo.collapsed}
-			<div class="px-4 py-2">
-				<div class="flex mt-5 mb-1 gap-1">
-					{#key repo}
-						<div class="pt-1 font-semibold">Resource: </div>
-						<ResourcePicker
-							bind:value={repo.git_repo_resource_path}
-							resourceType={'git_repository'}
-							disabled={!repo.isUnsavedConnection}
-							excludedValues={usedRepositoryPaths}
-						/>
-						{#if !emptyString(repo.git_repo_resource_path)}
-							<Button
-								disabled={emptyString(repo.script_path)}
-								color="dark"
-								onclick={runGitSyncTestJob}
-								size="xs">Test connection</Button
-							>
-						{/if}
-					{/key}
-				</div>
+							Pull settings
+						</Button>
+					{/snippet}
+				</GitSyncFilterSettings>
 
-				{#if !emptyString(repo.git_repo_resource_path)}
-					<div class="flex text-normal text-2xs gap-1">
-						{#if validation.isDuplicate}
-							<span class="text-red-600">This resource is already used by another repository.</span>
-						{/if}
-						{#if gitSyncTestJob && gitSyncTestJob.status !== undefined}
-							{#if gitSyncTestJob.status === 'running'}
-								<RotateCw size={14} class="animate-spin" />
-							{:else if gitSyncTestJob.status === 'success'}
-								<CheckCircle2 size={14} class="text-green-600" />
-							{:else}
-								<XCircle size={14} class="text-red-700" />
-							{/if}
-							Git sync resource checked via Windmill job
-							<a
-								target="_blank"
-								href={`/run/${gitSyncTestJob.jobId}?workspace=${$workspaceStore}`}
-							>
-								{gitSyncTestJob.jobId}
-							</a>WARNING: Only read permissions are verified.
-						{/if}
+				{#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>
 
-					{#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.
-						</Alert>
-					{/if}
-					<div class="flex flex-col mb-1 gap-4">
-						{#if repo}
-							{#if repo.script_path != hubPaths.gitSync}
-								<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:
-									<a
-										target="_blank"
-										href="https://hub.windmill.dev/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
-										>{hubPaths.gitSync}</a
+						<!-- Manual sync section for existing repos -->
+						{#if !emptyString(repo.git_repo_resource_path) && !repo.legacyImported}
+							<div class="flex flex-col">
+								<div class="text-sm text-secondary mb-2">Manual workspace content sync</div>
+								<div class="flex gap-2">
+									<Button
+										size="xs"
+										color="dark"
+										variant="border"
+										onclick={() => idx !== null && gitSyncContext.showPullModal(idx)}
+										startIcon={{ icon: Download }}
 									>
-									<div class="flex mt-2">
-										<Button
-											size="xs"
-											color="dark"
-											onclick={() => {
-												if (repo) {
-													repo.script_path = hubPaths.gitSync
-												}
-											}}
-											>Update git sync script (require save git settings to be applied)</Button
-										>
-									</div>
-								</Alert>
-							{/if}
-							{#if repo.isUnsavedConnection && !emptyString(repo.git_repo_resource_path)}
-								<!-- Use DetectionFlow component -->
-								<div class="mt-4">
-									<DetectionFlow {idx} />
-								</div>
-							{:else}
-								<!-- Existing saved connection flow -->
-								<GitSyncFilterSettings
-									bind:git_repo_resource_path={repo.git_repo_resource_path}
-									bind:include_path={repo.settings.include_path}
-									bind:include_type={repo.settings.include_type}
-									bind:exclude_types_override={repo.exclude_types_override}
-									isLegacyRepo={repo.legacyImported}
-									bind:excludes={repo.settings.exclude_path}
-									bind:extraIncludes={repo.settings.extra_include_path}
-									isInitialSetup={false}
-									requiresMigration={repo.legacyImported}
-									useIndividualBranch={repo.use_individual_branch}
-								>
-									{#snippet actions()}
-										<Button
-											size="md"
-											onclick={handlePullSettings}
-											startIcon={{ icon: Download }}
-										>
-											Pull settings
-										</Button>
-									{/snippet}
-								</GitSyncFilterSettings>
-							{/if}
-							{#if !repo.isUnsavedConnection}
-								<div class="flex justify-between items-start">
-									<!-- Display mode settings as prominent text -->
-									<div class="text-base flex-1 mr-4">
-										{#if repo.use_individual_branch}
-											<div><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div>
-											{#if repo.group_by_folder}
-												<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
-											{/if}
-										{:else}
-											<div>Sync: <span class="font-bold">Syncing back to branch main</span></div>
-										{/if}
-									</div>
-
-									<!-- Manual sync section for existing repos -->
-									{#if !emptyString(repo.git_repo_resource_path) && !repo.legacyImported}
-										<div class="flex flex-col">
-											<div class="text-sm text-secondary mb-2">Manual workspace content sync</div>
-											<div class="flex gap-2">
-												<Button
-													size="xs"
-													color="dark"
-													variant="border"
-													onclick={() => gitSyncContext.showPullModal(idx)}
-													startIcon={{ icon: Download }}
-												>
-													Pull from repo
-												</Button>
-												<Button
-													size="xs"
-													color="dark"
-													variant="border"
-													onclick={() => gitSyncContext.showPushModal(idx)}
-													startIcon={{ icon: Upload }}
-												>
-													Push to repo
-												</Button>
-											</div>
-										</div>
-									{/if}
+										Pull from repo
+									</Button>
+									<Button
+										size="xs"
+										color="dark"
+										variant="border"
+										onclick={() => idx !== null && gitSyncContext.showPushModal(idx)}
+										startIcon={{ icon: Upload }}
+									>
+										Push to repo
+									</Button>
 								</div>
-
-							{/if}
-
+							</div>
 						{/if}
 					</div>
-				{:else}
-					<div class="text-xs text-tertiary pt-1 pl-8">Please select a Git repository resource.</div>
 				{/if}
-			</div>
+			{/if}
+		{:else}
+			<div class="text-xs text-tertiary">Please select a Git repository resource.</div>
 		{/if}
 	</div>
-{/if}
+{/snippet}
+
+<!-- Main component rendering -->
+
+{#if shouldShowEmptyState}
+	<!-- Empty State for Primary Variants -->
+	<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>
+				{#if displayDescription}
+					<p class="text-sm 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="text-center mb-4">
+				<p class="text-secondary mb-2">
+					{#if mode === 'sync'}
+						No sync repository configured. Add one to enable direct synchronization.
+					{:else if mode === 'promotion'}
+						No promotion repository configured. Add one to enable branch-based workflows.
+					{:else}
+						No repository configured.
+					{/if}
+				</p>
+			</div>
+			{#if onAdd}
+				<Button
+					size="md"
+					color="dark"
+					variant="border"
+					startIcon={{ icon: Plus }}
+					onclick={onAdd}
+				>
+					Add {mode || 'repository'} repository
+				</Button>
+			{/if}
+		</div>
+	</div>
+{:else if repo}
+	{#if variant === 'primary-sync' || variant === 'primary-promotion'}
+		<!-- Primary Repository Layout -->
+		<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>
+					{#if displayDescription}
+						<p class="text-sm text-secondary">{displayDescription}</p>
+					{/if}
+				</div>
+				<div class="flex items-center gap-2">
+					{@render headerActions()}
+				</div>
+			</div>
+			{@render repositoryContent()}
+		</div>
+	{:else}
+		<!-- Standard Repository Card Layout -->
+		<div class="rounded-lg shadow-sm border p-0 w-full mb-4">
+			<div class="flex items-center justify-between min-h-10 px-4 py-1 border-b">
+				<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">
+							Legacy Configuration
+						</span>
+					{/if}
+					<span class="text-xs text-tertiary pt-1 pl-8">
+						{repo.git_repo_resource_path}
+					</span>
+				</div>
+				<div class="flex items-center gap-2">
+					{@render headerActions()}
+				</div>
+			</div>
+			{#if !repo.collapsed}
+				<div class="px-4 py-2">
+					{@render repositoryContent()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+{/if}