windmill-components 1.558.3 → 1.596.0

package/package/components/git_sync/PullWorkspaceModal.svelte

@@ -231,23 +231,29 @@ async function applySettingsOnly() {
 }
 </script>
 
-
-<Modal bind:open title={settingsOnly ? "Pull Settings from Git Repository" : "Pull Workspace from Git Repository"} class="sm:max-w-4xl" cancelText={settingsOnly && !getSettingsChanges(previewResult).hasChanges ? "Close" : "Cancel"}>
+<Modal
+	bind:open
+	title={settingsOnly ? 'Pull Settings from Git Repository' : 'Pull Workspace from Git Repository'}
+	class="sm:max-w-4xl"
+	cancelText={settingsOnly && !getSettingsChanges(previewResult).hasChanges ? 'Close' : 'Cancel'}
+>
 	<div class="flex flex-col gap-4">
 		<!-- Description -->
 		<p class="text-sm text-secondary">
 			{#if settingsOnly}
-				Pull and apply settings changes from the Git repository to your workspace. This will update your sync filter settings only.
+				Pull and apply settings changes from the Git repository to your workspace. This will update
+				your sync filter settings only.
 			{:else}
-				Pull and apply changes from the Git repository to your workspace. If settings changes are detected, you can choose to pull just the settings or everything.
+				Pull and apply changes from the Git repository to your workspace. If settings changes are
+				detected, you can choose to pull just the settings or everything.
 			{/if}
 		</p>
 
 		<!-- Warning about overwrites - only show for full pulls, not settings-only -->
 		{#if !settingsOnly}
 			<Alert type="warning" title="This will overwrite local changes">
-				Pulling from the repository will overwrite any local changes to files that exist in the repository.
-				Make sure to preview the changes before applying.
+				Pulling from the repository will overwrite any local changes to files that exist in the
+				repository. Make sure to preview the changes before applying.
 			</Alert>
 		{/if}
 
@@ -256,7 +262,7 @@ async function applySettingsOnly() {
 			<div class="flex justify-start pt-4">
 				<Button
 					size="md"
-					color="dark"
+					variant="accent"
 					onclick={() => {
 						previewAttempted = false // Allow manual retry
 						executeJob(true, settingsOnly)
@@ -274,7 +280,7 @@ async function applySettingsOnly() {
 
 		<!-- Job status for preview -->
 		{#if previewJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if previewJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if previewJobStatus === 'success'}
@@ -316,23 +322,31 @@ async function applySettingsOnly() {
 						<div class="bg-surface-secondary rounded-lg p-4 space-y-1">
 							{#if settingsChanges.diff?.diff}
 								{#each Object.entries(settingsChanges.diff.diff) as [field, change]}
-									{@const fieldName = field.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
-									{@const typedChange = change as {from: any, to: any}}
+									{@const fieldName = field
+										.replace(/([A-Z])/g, ' $1')
+										.replace(/^./, (str) => str.toUpperCase())}
+									{@const typedChange = change as { from: any; to: any }}
 									<div class="flex items-center gap-2 text-xs">
-										<span class="text-tertiary min-w-0 flex-shrink-0">{fieldName}:</span>
+										<span class="text-primary min-w-0 flex-shrink-0">{fieldName}:</span>
 										{#if Array.isArray(typedChange.from) && Array.isArray(typedChange.to)}
-											<span class="text-red-600">{typedChange.from.length === 0 ? 'None' : typedChange.from.join(', ')}</span>
-											<span class="text-tertiary">→</span>
-											<span class="text-green-600">{typedChange.to.length === 0 ? 'None' : typedChange.to.join(', ')}</span>
+											<span class="text-red-600"
+												>{typedChange.from.length === 0
+													? 'None'
+													: typedChange.from.join(', ')}</span
+											>
+											<span class="text-primary">→</span>
+											<span class="text-green-600"
+												>{typedChange.to.length === 0 ? 'None' : typedChange.to.join(', ')}</span
+											>
 										{:else}
 											<span class="text-red-600">{typedChange.from}</span>
-											<span class="text-tertiary">→</span>
+											<span class="text-primary">→</span>
 											<span class="text-green-600">{typedChange.to}</span>
 										{/if}
 									</div>
 								{/each}
 							{:else}
-								<div class="text-xs text-tertiary">
+								<div class="text-xs text-primary">
 									Settings changes detected but no detailed diff available.
 								</div>
 							{/if}
@@ -343,15 +357,15 @@ async function applySettingsOnly() {
 				<!-- No settings changes detected (settings-only mode) -->
 				{#if settingsOnly && !settingsChanges.hasChanges}
 					<div class="bg-surface-secondary rounded-lg p-3">
-						<div class="text-sm text-tertiary">
-							No settings changes detected. Your local sync filter settings are already up to date with the repository.
-							See the CLI instructions below on how to edit wmill.yaml
+						<div class="text-sm text-primary">
+							No settings changes detected. Your local sync filter settings are already up to date
+							with the repository. See the CLI instructions below on how to edit wmill.yaml
 						</div>
 					</div>
 					<div class="flex justify-start">
 						<Button
 							size="sm"
-							color="dark"
+							variant="accent"
 							onclick={() => {
 								previewAttempted = false
 								previewResult = null
@@ -377,7 +391,7 @@ async function applySettingsOnly() {
 							<GitDiffPreview previewResult={previewResult as SyncResponse} />
 						{:else}
 							<div class="bg-surface-secondary rounded-lg p-3">
-								<div class="text-sm text-tertiary">No changes to pull from the repository.</div>
+								<div class="text-sm text-primary">No changes to pull from the repository.</div>
 							</div>
 						{/if}
 					</div>
@@ -395,8 +409,12 @@ async function applySettingsOnly() {
 					{#if settingsChanges.hasChanges && workspaceChanges.hasChanges && !settingsApplied}
 						<!-- Step 1: Settings changes first when both are present -->
 						<div class="flex flex-col gap-3">
-							<div class="text-sm font-medium text-primary">Step 1 of 2: Apply settings changes</div>
-							<div class="text-xs text-tertiary">Settings changes detected. Apply these first to ensure workspace content is pulled with the correct configuration.</div>
+							<div class="text-sm font-medium text-primary">Step 1 of 2: Apply settings changes</div
+							>
+							<div class="text-xs text-primary"
+								>Settings changes detected. Apply these first to ensure workspace content is pulled
+								with the correct configuration.</div
+							>
 							<div class="flex gap-2">
 								<Button
 									size="md"
@@ -430,8 +448,12 @@ async function applySettingsOnly() {
 						<!-- Step 2: Workspace changes (either no settings changes, or settings already applied) -->
 						<div class="flex flex-col gap-3">
 							{#if settingsApplied}
-								<div class="text-sm font-medium text-primary">Step 2 of 2: Pull Workspace Changes</div>
-								<div class="text-xs text-green-600">✓ Settings applied successfully. Now you can pull the workspace changes.</div>
+								<div class="text-sm font-medium text-primary"
+									>Step 2 of 2: Pull Workspace Changes</div
+								>
+								<div class="text-xs text-green-600"
+									>✓ Settings applied successfully. Now you can pull the workspace changes.</div
+								>
 							{/if}
 							<div class="flex gap-2">
 								<Button
@@ -450,10 +472,10 @@ async function applySettingsOnly() {
 					{:else}
 						<!-- No changes to pull -->
 						<div class="bg-surface-secondary rounded-lg p-3">
-							<div class="text-sm text-tertiary mb-3">No changes to pull from the repository.</div>
+							<div class="text-sm text-primary mb-3">No changes to pull from the repository.</div>
 							<Button
 								size="sm"
-								color="dark"
+								variant="accent"
 								onclick={() => {
 									previewAttempted = false
 									previewResult = null
@@ -475,7 +497,7 @@ async function applySettingsOnly() {
 
 		<!-- Job status for apply -->
 		{#if applyJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if applyJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if applyJobStatus === 'success'}
@@ -505,15 +527,15 @@ async function applySettingsOnly() {
 		<div class="border-t pt-4 mt-4">
 			<button
 				class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-				onclick={() => showCliInstructions = !showCliInstructions}
+				onclick={() => (showCliInstructions = !showCliInstructions)}
 			>
 				<Terminal size={16} />
 				{#if settingsOnly}
-				<span>Update settings with CLI</span>
+					<span>Update settings with CLI</span>
 				{:else}
-				<span>Update workspace with CLI</span>
+					<span>Update workspace with CLI</span>
 				{/if}
-				<Edit3 size={14} class="text-tertiary" />
+				<Edit3 size={14} class="text-primary" />
 				{#if showCliInstructions}
 					<ChevronUp size={16} />
 				{:else}
@@ -523,11 +545,19 @@ async function applySettingsOnly() {
 
 			{#if showCliInstructions}
 				<div class="mt-3 bg-surface-secondary rounded-lg p-3">
-				    {#if settingsOnly}
-					<div class="text-xs text-tertiary mb-2">
-						Filter settings are sourced from the <code class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code> file in your git repository.
-						To modify them, edit the file in your repository, commit the changes, and sync using the commands below. Learn more about <a href="https://www.windmill.dev/docs/advanced/cli/sync#wmillyaml" target="_blank" rel="noopener noreferrer">the wmill.yaml format</a>.
-					</div>
+					{#if settingsOnly}
+						<div class="text-xs text-primary mb-2">
+							Filter settings are sourced from the <code class="bg-surface px-1 py-0.5 rounded"
+								>wmill.yaml</code
+							>
+							file in your git repository. To modify them, edit the file in your repository, commit the
+							changes, and sync using the commands below. Learn more about
+							<a
+								href="https://www.windmill.dev/docs/advanced/cli/sync#wmillyaml"
+								target="_blank"
+								rel="noopener noreferrer">the wmill.yaml format</a
+							>.
+						</div>
 					{/if}
 					<pre class="text-xs bg-surface p-3 rounded overflow-x-auto whitespace-pre-wrap break-all">
 # Make sure your repo is up to date
@@ -535,25 +565,30 @@ git pull
 
 {#if !settingsOnly}# Push from git repository to workspace
 wmill sync push --workspace {$workspaceStore} --repository {gitRepoResourcePath}
-
-{:else}
-# Edit wmill.yaml file
+{:else}# Edit wmill.yaml file
 vim wmill.yaml
 git add wmill.yaml
+
 {/if}# Commit changes
 git commit
 git push
 {#if settingsOnly}
 # Push settings only from git repository or click the pull settings button above{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch}
 wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath} --promotion main{:else}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath}{/if}{/if}</pre>
+wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath}{/if}{/if}</pre
+					>
 					{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch && settingsOnly}
-						<div class="text-xs text-tertiary mt-3">
+						<div class="text-xs text-primary mt-3">
 							<div class="font-medium mb-1">Promotion Mode Configuration:</div>
 							<div class="flex items-center gap-2">
-								<span>You can add promotion-specific overrides in your <code class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code> file:</span>
+								<span
+									>You can add promotion-specific overrides in your <code
+										class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code
+									> file:</span
+								>
 							</div>
-							<pre class="text-xs bg-surface p-2 rounded mt-2 overflow-x-auto">git_branches:
+							<pre class="text-xs bg-surface p-2 rounded mt-2 overflow-x-auto"
+								>gitBranches:
   main:
     promotionOverrides:
       # Add your promotion-specific settings here

package/package/components/git_sync/PushWorkspaceModal.svelte

@@ -133,17 +133,24 @@ async function executeJob(isDryRun) {
 }
 </script>
 
-
 <Modal bind:open title="Push Workspace to Git Repository" class="sm:max-w-4xl">
 	<div class="flex flex-col gap-4">
 		<!-- Description -->
-		<p class="text-sm text-secondary">Push your current workspace content to the connected Git repository based on the configured filters.</p>
-		<p class="text-sm text-tertiary">Note: This will not update git sync settings in wmill.yaml. Settings can only be pulled from the repository as it is the source of truth.</p>
+		<p class="text-sm text-secondary"
+			>Push your current workspace content to the connected Git repository based on the configured
+			filters.</p
+		>
+		<p class="text-sm text-primary"
+			>Note: This will not update git sync settings in wmill.yaml. Settings can only be pulled from
+			the repository as it is the source of truth.</p
+		>
 
 		<!-- Settings display for new connections -->
 		{#if isNewConnection}
 			<div class="bg-surface-secondary border border-border rounded-lg p-3">
-				<h4 class="text-sm font-medium text-primary mb-2">Settings that will be pushed to repository</h4>
+				<h4 class="text-sm font-medium text-primary mb-2"
+					>Settings that will be pushed to repository</h4
+				>
 				<div class="text-xs text-secondary space-y-1">
 					<div><strong>Include paths:</strong> {uiState.include_path?.join(', ') || 'None'}</div>
 					<div><strong>Exclude paths:</strong> {uiState.exclude_path?.join(', ') || 'None'}</div>
@@ -152,7 +159,9 @@ async function executeJob(isDryRun) {
 					{/if}
 					<div><strong>Include types:</strong> {uiState.include_type?.join(', ') || 'None'}</div>
 				</div>
-				<p class="text-xs text-tertiary mt-2">To modify these settings, cancel and configure them in the workspace settings.</p>
+				<p class="text-xs text-primary mt-2"
+					>To modify these settings, cancel and configure them in the workspace settings.</p
+				>
 			</div>
 		{/if}
 
@@ -161,7 +170,7 @@ async function executeJob(isDryRun) {
 			<div class="flex justify-start pt-4">
 				<Button
 					size="md"
-					color="dark"
+					variant="accent"
 					onclick={() => executeJob(true)}
 					disabled={isPreviewLoading}
 					startIcon={{
@@ -176,7 +185,7 @@ async function executeJob(isDryRun) {
 
 		<!-- Job status for preview -->
 		{#if previewJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if previewJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if previewJobStatus === 'success'}
@@ -208,10 +217,10 @@ async function executeJob(isDryRun) {
 				<h4 class="text-sm font-semibold text-primary">Changes to Push</h4>
 
 				{#if previewResult.changes?.length > 0}
-					<GitDiffPreview previewResult={previewResult} />
+					<GitDiffPreview {previewResult} />
 				{:else}
 					<div class="bg-surface-secondary rounded-lg p-3">
-						<div class="text-sm text-tertiary">No changes to push to the repository.</div>
+						<div class="text-sm text-primary">No changes to push to the repository.</div>
 					</div>
 				{/if}
 			</div>
@@ -221,40 +230,38 @@ async function executeJob(isDryRun) {
 		{#if previewResult && !previewError}
 			{@const hasChanges = previewResult.changes?.length > 0}
 			{#if hasChanges}
-			<div class="border-t pt-4 mt-4">
-				<div class="flex justify-start gap-2">
-					<Button
-						size="xs"
-						onclick={() => executeJob(false)}
-						disabled={isApplying}
-						startIcon={{
-							icon: isApplying ? Loader2 : undefined,
-							classes: isApplying ? 'animate-spin' : ''
-						}}
-					>
-						{isApplying ?
-							(isNewConnection ? 'Initializing...' : 'Pushing...') :
-							(isNewConnection ? 'Initialize repo and save connection' : 'Push to repository')
-						}
-					</Button>
-					{#if isNewConnection && onSaveWithoutInit}
+				<div class="border-t pt-4 mt-4">
+					<div class="flex justify-start gap-2">
 						<Button
 							size="xs"
-							color="light"
-							onclick={onSaveWithoutInit}
+							onclick={() => executeJob(false)}
 							disabled={isApplying}
+							startIcon={{
+								icon: isApplying ? Loader2 : undefined,
+								classes: isApplying ? 'animate-spin' : ''
+							}}
 						>
-							Save without initializing repo
+							{isApplying
+								? isNewConnection
+									? 'Initializing...'
+									: 'Pushing...'
+								: isNewConnection
+									? 'Initialize repo and save connection'
+									: 'Push to repository'}
 						</Button>
-					{/if}
+						{#if isNewConnection && onSaveWithoutInit}
+							<Button size="xs" color="light" onclick={onSaveWithoutInit} disabled={isApplying}>
+								Save without initializing repo
+							</Button>
+						{/if}
+					</div>
 				</div>
-			</div>
 			{/if}
 		{/if}
 
 		<!-- Job status for apply -->
 		{#if applyJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if applyJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if applyJobStatus === 'success'}
@@ -284,7 +291,7 @@ async function executeJob(isDryRun) {
 		<div class="border-t pt-4 mt-4">
 			<button
 				class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-				onclick={() => showCliInstructions = !showCliInstructions}
+				onclick={() => (showCliInstructions = !showCliInstructions)}
 			>
 				<Terminal size={16} />
 				<span>CLI Instructions</span>
@@ -304,7 +311,8 @@ wmill workspace add {$workspaceStore} {$workspaceStore} {window.location.origin}
 wmill init --workspace {$workspaceStore} --repository {gitRepoResourcePath}
 
 # Pull workspace content to git repository
-wmill sync pull --workspace {$workspaceStore} --repository {gitRepoResourcePath}</pre>
+wmill sync pull --workspace {$workspaceStore} --repository {gitRepoResourcePath}</pre
+					>
 				</div>
 			{/if}
 		</div>