windmill-components 1.511.1 → 1.531.0

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">import { Save, Trash, XCircle, CheckCircle2, RotateCw, RotateCcw, Download, Upload } from 'lucide-svelte';
+import { Button, Alert } from '../common';
+import { getGitSyncContext } from './GitSyncContext.svelte';
+import ResourcePicker from '../ResourcePicker.svelte';
+import GitSyncFilterSettings from '../workspaceSettings/GitSyncFilterSettings.svelte';
+import DetectionFlow from './DetectionFlow.svelte';
+import { sendUserToast } from '../../toast';
+import { fade } from 'svelte/transition';
+import { workspaceStore } from '../../stores';
+import hubPaths from '../../hubPaths.json';
+let { idx } = $props();
+const gitSyncContext = getGitSyncContext();
+const repo = $derived(gitSyncContext.getRepository(idx));
+const validation = $derived(gitSyncContext.getValidation(idx));
+const gitSyncTestJob = $derived(gitSyncContext.gitSyncTestJobs?.[idx]);
+let confirmingDelete = $state(false);
+// 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())));
+async function handleSave() {
+    if (!repo)
+        return;
+    try {
+        await gitSyncContext.saveRepository(idx);
+        sendUserToast('Repository settings updated');
+    }
+    catch (error) {
+        console.error('Failed to save repository:', error);
+        sendUserToast('Failed to save repository: ' + error.message, true);
+    }
+}
+function handleRevert() {
+    if (!repo)
+        return;
+    try {
+        gitSyncContext.revertRepository?.(idx);
+        sendUserToast('Reverted repository settings');
+    }
+    catch (error) {
+        console.error('Failed to revert repository:', error);
+        sendUserToast('Failed to revert repository: ' + error.message, true);
+    }
+}
+function initiateDelete() {
+    confirmingDelete = true;
+}
+async function confirmDelete() {
+    try {
+        await gitSyncContext.removeRepository(idx);
+        sendUserToast('Repository connection removed successfully');
+    }
+    catch (error) {
+        console.error('Failed to remove repository:', error);
+        sendUserToast('Failed to remove repository: ' + error.message, true);
+    }
+    finally {
+        confirmingDelete = false;
+    }
+}
+function cancelDelete() {
+    confirmingDelete = false;
+}
+function runGitSyncTestJob() {
+    if (gitSyncContext.runTestJob) {
+        gitSyncContext.runTestJob(idx);
+    }
+}
+function emptyString(str) {
+    return !str || str.trim() === '';
+}
+function handlePullSettings() {
+    gitSyncContext.showPullModal(idx, true); // true for settingsOnly
+}
+</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>
+			</div>
+			<div class="flex items-center gap-2">
+				{#if validation.hasChanges && validation.isValid && !repo.isUnsavedConnection}
+					<Button
+						size="xs"
+						onclick={handleSave}
+						startIcon={{ icon: Save }}
+					>
+						{repo.legacyImported ? 'Migrate and save' : 'Save changes'}
+					</Button>
+					{#if gitSyncContext.initialRepositories[idx] && !repo.legacyImported}
+						<Button
+							color="light"
+							size="xs"
+							onclick={handleRevert}
+							startIcon={{ icon: RotateCcw }}
+						>
+							Revert
+						</Button>
+					{/if}
+				{/if}
+				<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 !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}
+						>
+							<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>
+
+				{#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}
+					</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
+									>
+									<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}
+								</div>
+
+							{/if}
+
+						{/if}
+					</div>
+				{:else}
+					<div class="text-xs text-tertiary pt-1 pl-8">Please select a Git repository resource.</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}

package/package/components/git_sync/GitSyncRepositoryCard.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    idx: number;
+};
+declare const GitSyncRepositoryCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type GitSyncRepositoryCard = ReturnType<typeof GitSyncRepositoryCard>;
+export default GitSyncRepositoryCard;

package/package/components/git_sync/GitSyncRepositoryList.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">import { getGitSyncContext } from './GitSyncContext.svelte';
+import GitSyncRepositoryCard from './GitSyncRepositoryCard.svelte';
+import { Alert } from '../common';
+const gitSyncContext = getGitSyncContext();
+</script>
+
+<div class="flex flex-col gap-4">
+	{#if gitSyncContext.repositories.length === 0}
+		<Alert type="info" title="No repositories configured">
+			Add your first Git repository to start syncing your workspace.
+		</Alert>
+	{:else}
+		{#each gitSyncContext.repositories as repository, idx (repository.git_repo_resource_path || idx)}
+			<GitSyncRepositoryCard {idx} />
+		{/each}
+	{/if}
+</div>

package/package/components/git_sync/GitSyncRepositoryList.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GitSyncRepositoryList: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GitSyncRepositoryList = InstanceType<typeof GitSyncRepositoryList>;
+export default GitSyncRepositoryList;

package/package/components/git_sync/GitSyncSection.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">import { Plus, ExternalLink } from 'lucide-svelte';
+import { Button, Alert } from '../common';
+import Description from '../Description.svelte';
+import { setGitSyncContext } from './GitSyncContext.svelte';
+import GitSyncRepositoryList from './GitSyncRepositoryList.svelte';
+import GitSyncModalManager from './GitSyncModalManager.svelte';
+import { enterpriseLicense, workspaceStore } from '../../stores';
+import { sendUserToast } from '../../toast';
+import { untrack } from 'svelte';
+// Create context reactively based on workspaceStore
+const gitSyncContext = $derived($workspaceStore ? setGitSyncContext($workspaceStore) : null);
+// Load settings when workspace context changes
+$effect(() => {
+    if (gitSyncContext) {
+        untrack(async () => {
+            try {
+                await gitSyncContext.loadSettings();
+            }
+            catch (error) {
+                console.error('Failed to load git sync settings:', error);
+                sendUserToast('Failed to load git sync settings', true);
+            }
+        });
+    }
+});
+</script>
+
+{#if !gitSyncContext}
+	<div class="flex items-center justify-center p-8">
+		<div class="text-sm text-secondary">Loading workspace...</div>
+	</div>
+{:else if gitSyncContext.loading}
+	<div class="flex items-center justify-center p-8">
+		<div class="text-sm text-secondary">Loading git sync settings...</div>
+	</div>
+{: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>
+			<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.
+			</Description>
+		</div>
+		<Alert type="info" title="Only new updates trigger git sync">
+			Only new changes matching the filters will trigger a git sync. You still need to initialize
+			the repo to the desired state first.
+		</Alert>
+	</div>
+	{#if !$enterpriseLicense}
+		<div class="mb-2"></div>
+
+		<Alert type="warning" title="Syncing workspace to Git is an EE feature">
+			Automatically saving scripts to a Git repository on each deploy is a Windmill EE feature.
+		</Alert>
+		<div class="mb-2"></div>
+	{/if}
+	{#if $enterpriseLicense && gitSyncContext.repositories != undefined}
+		<div class="flex mt-5 mb-5 gap-8">
+			<Button
+				color="dark"
+				target="_blank"
+				endIcon={{ icon: ExternalLink }}
+				href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
+			>
+				See sync jobs
+			</Button>
+		</div>
+		<div class="pt-2"></div>
+
+		<!-- Repository list -->
+		<GitSyncRepositoryList />
+
+		<!-- Add repository button -->
+		<div class="flex mt-5 mb-5">
+			<Button
+				startIcon={{ icon: Plus }}
+				color="dark"
+				variant="border"
+				onclick={() => gitSyncContext.addRepository()}
+			>
+				Add connection
+			</Button>
+		</div>
+
+		<!-- Modals -->
+		<GitSyncModalManager />
+	{/if}
+{/if}

package/package/components/git_sync/GitSyncSection.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const GitSyncSection: import("svelte").Component<Record<string, never>, {}, "">;
+type GitSyncSection = ReturnType<typeof GitSyncSection>;
+export default GitSyncSection;

package/package/components/git_sync/GitSyncSuccessModal.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import Modal from '../common/modal/Modal.svelte';
+import { CheckCircle2, ExternalLink, ArrowRight } from 'lucide-svelte';
+let { open = $bindable(false), savedWithoutInit = false } = $props();
+</script>
+
+<Modal bind:open title="Git Sync Connection Saved" class="sm:max-w-4xl" cancelText="Close">
+	<div class="flex flex-col gap-6 p-6">
+		<!-- Success header -->
+		<div class="flex items-center gap-3">
+			<div class="flex-shrink-0">
+				<CheckCircle2 class="h-8 w-8 text-green-600" />
+			</div>
+			<div>
+				<h3 class="text-lg font-semibold text-primary">Git sync connection saved successfully!</h3>
+				<p class="text-sm text-secondary mt-1">Your repository is now configured to receive changes from Windmill.</p>
+			</div>
+		</div>
+
+		<!-- Info box for saved without init -->
+		{#if savedWithoutInit}
+			<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+				<h4 class="font-medium text-blue-900 mb-2">Repository saved without initialization</h4>
+				<p class="text-sm text-blue-800">
+					Only new changes will be pushed to this repository. Existing content in Windmill has not been initialized to the repository.
+				</p>
+			</div>
+		{/if}
+
+		<!-- Optional setup section -->
+		<div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
+			<h4 class="font-medium text-amber-900 mb-2 flex items-center gap-2">
+				<ArrowRight class="h-4 w-4" />
+				Optional: Enable automatic deployment from Git to Windmill
+			</h4>
+			<p class="text-sm text-amber-800 mb-3">
+				To automatically deploy changes from your Git repository back to Windmill (when PRs are merged), you can set up GitHub Actions or similar CI/CD workflows.
+			</p>
+			<div class="flex flex-col gap-2">
+				<p class="text-sm text-amber-700">This setup enables:</p>
+				<ul class="text-sm text-amber-700 ml-4 list-disc space-y-1">
+					<li>Automatic deployment to Windmill when PRs are merged</li>
+					<li>Full bidirectional sync between Git and Windmill</li>
+				</ul>
+				<div class="mt-3">
+					<a
+						href="https://www.windmill.dev/docs/advanced/deploy_gh_gl#github-actions-setup"
+						target="_blank"
+						class="text-sm text-amber-700 hover:text-amber-900 underline flex items-center gap-1"
+					>
+						<ExternalLink class="h-3 w-3" />
+						Learn more
+					</a>
+				</div>
+			</div>
+		</div>
+
+	</div>
+</Modal>

package/package/components/git_sync/GitSyncSuccessModal.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    open: boolean;
+    savedWithoutInit?: boolean;
+}
+declare const GitSyncSuccessModal: import("svelte").Component<Props, {}, "open">;
+type GitSyncSuccessModal = ReturnType<typeof GitSyncSuccessModal>;
+export default GitSyncSuccessModal;