windmill-components 1.623.1 → 1.642.0

package/package/components/CompareWorkspaces.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { AlertTriangle, ArrowDown, ArrowDownRight, ArrowRight, ArrowUp, ArrowUpRight, Building, DiffIcon, GitFork, Loader2 } from 'lucide-svelte';
 import { Alert, Badge } from './common';
-import { AppService, FlowService, FolderService, RawAppService, ResourceService, ScheduleService, ScriptService, VariableService, WorkspaceService } from '../gen';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, VariableService, WorkspaceService } from '../gen';
 import Button from './common/button/Button.svelte';
 import DiffDrawer from './DiffDrawer.svelte';
+import ParentWorkspaceProtectionAlert from './ParentWorkspaceProtectionAlert.svelte';
 import { getAllModules } from './flows/flowExplorer';
 import { userWorkspaces, workspaceStore } from '../stores';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -17,6 +18,7 @@ let parentWorkspaceInfo = $derived($userWorkspaces.find((w) => w.id == parentWor
 let mergeIntoParent = $state(true);
 let deploying = $state(false);
 let hasAutoSelected = $state(false);
+let canDeployToParent = $state(true);
 let selectableDiffs = $derived(comparison?.diffs.filter((diff) => {
     if (mergeIntoParent) {
         return diff.ahead > 0;
@@ -55,6 +57,10 @@ async function fetchSummary(kind, path, workspace) {
             const app = await AppService.getAppByPath({ workspace, path });
             return app.summary;
         }
+        else if (kind === 'folder') {
+            const folder = await FolderService.getFolder({ workspace, name: path.slice(2) });
+            return folder.summary;
+        }
     }
     catch (error) {
         console.error(`Failed to fetch summary for ${kind}:${path}`, error);
@@ -63,7 +69,7 @@ async function fetchSummary(kind, path, workspace) {
 }
 async function fetchSummaries(diffs) {
     // Only fetch summaries for scripts, flows, and apps
-    const itemsToFetch = diffs.filter((diff) => ['script', 'flow', 'app'].includes(diff.kind));
+    const itemsToFetch = diffs.filter((diff) => ['script', 'flow', 'app', 'folder'].includes(diff.kind));
     for (const diff of itemsToFetch) {
         const key = getItemKey(diff);
         // Skip if already cached or loading
@@ -139,22 +145,6 @@ async function getValue(kind, path, workspace) {
             });
             return resource.schema;
         }
-        else if (kind == 'raw_app') {
-            throw new Error('Raw app deploy not implemented yet');
-            // const app = await RawAppService.getRawAppData({
-            // 	workspace: workspace,
-            // 	path: path
-            // })
-            // if (alreadyExists) {
-            // }
-            // await RawAppService.updateRawApp({
-            // 	workspace: workspace,
-            // 	path: path,
-            // 	requestBody: {
-            // 		path: path
-            // 	}
-            // })
-        }
         else if (kind == 'folder') {
             const folder = await FolderService.getFolder({
                 workspace: workspace,
@@ -233,12 +223,6 @@ async function checkAlreadyExists(kind, path, workspace) {
             path: path
         });
     }
-    else if (kind == 'raw_app') {
-        exists = await RawAppService.existsRawApp({
-            workspace: workspace,
-            path: path
-        });
-    }
     else if (kind == 'variable') {
         exists = await VariableService.existsVariable({
             workspace: workspace,
@@ -367,21 +351,70 @@ async function deploy(kind, path, workspaceToDeployTo, workspaceFrom) {
                 path: path
             });
             if (alreadyExists) {
-                await AppService.updateApp({
-                    workspace: workspaceToDeployTo,
-                    path: path,
-                    requestBody: {
-                        ...app
-                    }
-                });
+                if (app.raw_app) {
+                    const secret = await AppService.getPublicSecretOfLatestVersionOfApp({
+                        workspace: workspaceFrom,
+                        path: app.path
+                    });
+                    const js = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.js`,
+                        workspace: workspaceFrom
+                    });
+                    const css = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.css`,
+                        workspace: workspaceFrom
+                    });
+                    await AppService.updateAppRaw({
+                        workspace: workspaceToDeployTo,
+                        path: path,
+                        formData: {
+                            app,
+                            css,
+                            js
+                        }
+                    });
+                }
+                else {
+                    await AppService.updateApp({
+                        workspace: workspaceToDeployTo,
+                        path: path,
+                        requestBody: {
+                            ...app
+                        }
+                    });
+                }
             }
             else {
-                await AppService.createApp({
-                    workspace: workspaceToDeployTo,
-                    requestBody: {
-                        ...app
-                    }
-                });
+                if (app.raw_app) {
+                    const secret = await AppService.getPublicSecretOfLatestVersionOfApp({
+                        workspace: workspaceFrom,
+                        path: app.path
+                    });
+                    const js = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.js`,
+                        workspace: workspaceFrom
+                    });
+                    const css = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.css`,
+                        workspace: workspaceFrom
+                    });
+                    await AppService.createAppRaw({
+                        workspace: workspaceToDeployTo,
+                        formData: {
+                            app,
+                            css,
+                            js
+                        }
+                    });
+                }
+                else {
+                    await AppService.createApp({
+                        workspace: workspaceToDeployTo,
+                        requestBody: {
+                            ...app
+                        }
+                    });
+                }
             }
         }
         else if (kind == 'variable') {
@@ -469,22 +502,6 @@ async function deploy(kind, path, workspaceToDeployTo, workspaceFrom) {
                 });
             }
         }
-        else if (kind == 'raw_app') {
-            throw new Error('Raw app deploy not implemented yet');
-            // const app = await RawAppService.getRawAppData({
-            // 	workspace: workspaceFrom,
-            // 	path: path
-            // })
-            // if (alreadyExists) {
-            // }
-            // await RawAppService.updateRawApp({
-            // 	workspace: workspaceFrom,
-            // 	path: path,
-            // 	requestBody: {
-            // 		path: path
-            // 	}
-            // })
-        }
         else if (kind == 'folder') {
             await FolderService.createFolder({
                 workspace: workspaceToDeployTo,
@@ -705,6 +722,14 @@ $effect(() => {
 			</div>
 		</div>
 
+		{#if mergeIntoParent}
+			<ParentWorkspaceProtectionAlert
+				{parentWorkspaceId}
+				onUpdateCanDeploy={(canDeploy) => {
+					canDeployToParent = canDeploy
+				}}
+			/>
+		{/if}
 		{#if conflictingDiffs.length > 0}
 			<Alert title="Conflicting changes detected" type="warning" class="mt-2">
 				<!-- <AlertTriangle class="w-4 h-4" /> -->
@@ -715,7 +740,7 @@ $effect(() => {
 				</span>
 			</Alert>
 		{/if}
-		{#if hasBehindChanges && hasAheadChanges}
+		{#if hasBehindChanges && hasAheadChanges && !(mergeIntoParent && !canDeployToParent)}
 			<Alert
 				title="This fork is behind {parentWorkspaceId} and needs to be up to date before deploying"
 				type="warning"
@@ -746,7 +771,8 @@ $effect(() => {
 					This fork is ahead of its parent
 				{/if}
 				and some of the changes are not visible by you. Only a user with access to the whole context
-				may deploy or update this fork. You can share the link to this page to someone with proper permissions to get it deployed.
+				may deploy or update this fork. You can share the link to this page to someone with proper permissions
+				to get it deployed.
 			</Alert>
 		{/if}
 
@@ -792,12 +818,15 @@ $effect(() => {
 							disabled={!isSelectable}
 							selected={isSelected && !(deploymentStatus[key]?.status == 'deployed')}
 							onSelect={() => toggleItem(diff)}
-							path={diff.kind != 'resource' && diff.kind != 'variable' ? diff.path : ''}
+							path={diff.kind != 'resource' &&
+							diff.kind != 'variable' &&
+							diff.kind != 'resource_type'
+								? diff.path
+								: ''}
 							marked={undefined}
 							kind={diff.kind}
 							canFavorite={false}
 							workspaceId=""
-							starred={false}
 						>
 							{#snippet customSummary()}
 								{#if oldSummary != newSummary && isSelectable && existsInBothWorkspaces}
@@ -904,20 +933,23 @@ $effect(() => {
 
 				<div class="flex flex-col items-end gap-2">
 					{#if comparison.all_behind_items_visible && comparison.all_ahead_items_visible}
-						<Button
-							color="blue"
-							disabled={selectedItems.length === 0 ||
-								deploying ||
-								(hasBehindChanges && !allowBehindChangesOverride)}
-							loading={deploying}
-							on:click={deployChanges}
-						>
-							{mergeIntoParent ? 'Deploy' : 'Update'}
-							{selectedItems.length} Item{selectedItems.length !== 1 ? 's' : ''}
-							{#if selectedConflicts != 0}
-								({selectedConflicts} conflicts)
-							{/if}
-						</Button>
+						{#if !(mergeIntoParent && !canDeployToParent)}
+							<Button
+								color="blue"
+								disabled={selectedItems.length === 0 ||
+									deploying ||
+									(hasBehindChanges && !allowBehindChangesOverride) ||
+									(mergeIntoParent && !canDeployToParent)}
+								loading={deploying}
+								on:click={deployChanges}
+							>
+								{mergeIntoParent ? 'Deploy' : 'Update'}
+								{selectedItems.length} Item{selectedItems.length !== 1 ? 's' : ''}
+								{#if selectedConflicts != 0}
+									({selectedConflicts} conflicts)
+								{/if}
+							</Button>
+						{/if}
 					{/if}
 
 					{#if deploymentErrorMessage != ''}
@@ -940,6 +972,4 @@ $effect(() => {
 			<div class="text-gray-500">No comparison data available</div>
 		</div>
 	{/if}
-
-	<!-- <DeployWorkspaceItems kind="script" initialPath="u/admin/economical_script" workspaceToDeployTo={parentWorkspaceId} /> -->
 </div>

package/package/components/ConcurrentJobsChart.svelte

@@ -3,7 +3,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 import { Chart as ChartJS, CategoryScale, Legend, LineElement, LinearScale, PointElement, TimeScale, Title, Tooltip } from 'chart.js';
 import { getDbClockNow } from '../forLater';
 import { Line } from './chartjs-wrappers/chartJs';
-let { extendedJobs = undefined, maxIsNow = false, minTimeSet = undefined, maxTimeSet = undefined, onZoom } = $props();
+let { extendedJobs = undefined, maxIsNow = false, minTimeSet = null, maxTimeSet = null, onZoom } = $props();
 function calculateTimeSeries(extendedJobs) {
     const timeline = new Map();
     extendedJobs.jobs.forEach((j) => {
@@ -171,7 +171,8 @@ let options = $derived({
                 display: false
             },
             min: minMaxTimes.min,
-            max: minMaxTimes.max
+            max: minMaxTimes.max,
+            ticks: { maxRotation: 0, minRotation: 0 }
         },
         y: {
             grid: {
@@ -195,6 +196,6 @@ let options = $derived({
 });
 </script>
 
-<div class="relative max-h-40">
+<div class="relative h-44">
 	<Line {data} {options} />
 </div>

package/package/components/ConcurrentJobsChart.svelte.d.ts

@@ -3,8 +3,8 @@ import type { ExtendedJobs } from '../gen';
 interface Props {
     extendedJobs?: ExtendedJobs | undefined;
     maxIsNow?: boolean;
-    minTimeSet?: string | undefined;
-    maxTimeSet?: string | undefined;
+    minTimeSet?: string | null;
+    maxTimeSet?: string | null;
     onZoom: (zoom: {
         min: Date;
         max: Date;

package/package/components/ConnectionSection.svelte

@@ -8,6 +8,7 @@ import { WorkspaceService } from '../gen';
 import { sendUserToast } from '../utils';
 import TeamSelector from './TeamSelector.svelte';
 import CollapseLink from './CollapseLink.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { platform, teamName, display_name, scriptPath = $bindable(), initialPath = $bindable(), itemKind = $bindable('script'), onDisconnect, onSelect, connectHref, createScriptHref, createFlowHref, documentationLink, onLoadSettings, workspaceConfig, hideConnectButton = false, isOAuthEnabled = false, workspaceSpecificConnection = false } = $props();
 let selectedTeam = $state(undefined);
 async function connectTeams() {
@@ -43,85 +44,80 @@ async function connectTeams() {
 const capitalizedPlatform = $derived(platform.charAt(0).toUpperCase() + platform.slice(1));
 </script>
 
-<div class="flex flex-col gap-1">
-	<div class="text-xs font-semibold text-emphasis">{capitalizedPlatform} connection</div>
-	<div class="rounded-md border p-4 flex flex-col gap-6">
-		{#if workspaceConfig}
-			{@render workspaceConfig()}
-		{/if}
-		{#if teamName || workspaceSpecificConnection}
-			<div class="flex flex-col gap-2 max-w-sm">
-				<div class="flex flex-row gap-2 items-center">
-					{#if display_name}
-						<Badge color="green">
-							<Plug size={14} />
-							Workspace connected to {capitalizedPlatform} team '{display_name}'</Badge
-						>
+<SettingCard label={capitalizedPlatform + ' connection'}>
+	{#if workspaceConfig}
+		{@render workspaceConfig()}
+	{/if}
+	{#if teamName || workspaceSpecificConnection}
+		<div class="flex flex-col gap-2 max-w-sm">
+			<div class="flex flex-row gap-2 items-center">
+				{#if display_name}
+					<Badge color="green">
+						<Plug size={14} />
+						Workspace connected to {capitalizedPlatform} team '{display_name}'</Badge
+					>
+				{/if}
+				<Button
+					unifiedSize="md"
+					startIcon={{ icon: Unplug }}
+					disabled={!$enterpriseLicense && platform === 'teams'}
+					onclick={onDisconnect}
+					destructive
+					variant="subtle"
+				>
+					Disconnect {capitalizedPlatform}
+					{!$enterpriseLicense && platform === 'teams' ? '(EE only)' : ''}
+				</Button>
+			</div>
+		</div>
+	{:else if !hideConnectButton}
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-row gap-2 items-center">
+				{#if platform === 'teams'}
+					{#if $enterpriseLicense && isOAuthEnabled}
+						<TeamSelector
+							bind:selectedTeam
+							minWidth="180px"
+							disabled={!$enterpriseLicense}
+							onError={(e) => {
+								const errorMsg =
+									typeof (e as any)?.body === 'string'
+										? (e as any).body
+										: e?.message || 'Unknown error'
+								sendUserToast('Failed to load teams: ' + errorMsg, true)
+							}}
+						/>
 					{/if}
 					<Button
 						unifiedSize="md"
-						startIcon={{ icon: Unplug }}
-						disabled={!$enterpriseLicense && platform === 'teams'}
-						onclick={onDisconnect}
-						destructive
-						variant="subtle"
+						variant="accent"
+						onclick={connectTeams}
+						endIcon={{ icon: MsTeamsIcon }}
+						disabled={!selectedTeam || !$enterpriseLicense}
 					>
-						Disconnect {capitalizedPlatform}
-						{!$enterpriseLicense && platform === 'teams' ? '(EE only)' : ''}
+						Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
+						{$enterpriseLicense ? '' : '(EE only)'}
 					</Button>
-				</div>
-			</div>
-		{:else if !hideConnectButton}
-			<div class="flex flex-col gap-2">
-				<div class="flex flex-row gap-2 items-center">
-					{#if platform === 'teams'}
-						{#if $enterpriseLicense && isOAuthEnabled}
-							<TeamSelector
-								bind:selectedTeam
-								minWidth="180px"
-								disabled={!$enterpriseLicense}
-								onError={(e) => {
-									const errorMsg =
-										typeof (e as any)?.body === 'string'
-											? (e as any).body
-											: e?.message || 'Unknown error'
-									sendUserToast('Failed to load teams: ' + errorMsg, true)
-								}}
-							/>
-						{/if}
-						<Button
-							unifiedSize="md"
-							variant="accent"
-							onclick={connectTeams}
-							endIcon={{ icon: MsTeamsIcon }}
-							disabled={!selectedTeam || !$enterpriseLicense}
-						>
-							Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
-							{$enterpriseLicense ? '' : '(EE only)'}
-						</Button>
-					{:else}
-						<Button
-							size="xs"
-							variant="accent"
-							href={connectHref}
-							startIcon={{ icon: Slack }}
-							disabled={!isOAuthEnabled}
-						>
-							Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
-						</Button>
-					{/if}
-				</div>
+				{:else}
+					<Button
+						size="xs"
+						variant="accent"
+						href={connectHref}
+						startIcon={{ icon: Slack }}
+						disabled={!isOAuthEnabled}
+					>
+						Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
+					</Button>
+				{/if}
 			</div>
-		{/if}
-	</div>
-</div>
-
-<div class="flex flex-col gap-1">
-	<div class="text-primary text-xs font-semibold"> Script or flow to run on /windmill command </div>
-	<span class="text-xs text-secondary mb-2"
-		>Pick a script or flow meant to be triggered when the `/windmill` command is invoked.</span
-	>
+		</div>
+	{/if}
+</SettingCard>
 
+<SettingCard
+	label="Script or flow to run on /windmill command"
+	description="Pick a script or flow meant to be triggered when the `/windmill` command is invoked."
+>
 	<div class="flex flex-row gap-2">
 		<ScriptPicker
 			kinds={['script']}
@@ -183,4 +179,4 @@ const capitalizedPlatform = $derived(platform.charAt(0).toUpperCase() + platform
 			<a href={documentationLink}>documentation</a>.
 		</div>
 	</CollapseLink>
-</div>
+</SettingCard>

package/package/components/CustomPopover.svelte

@@ -1,13 +1,8 @@
-<script lang="ts">import { createPopperActions } from 'svelte-popperjs';
+<script lang="ts">import { run, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { createPopperActions } from 'svelte-popperjs';
 import Portal from './Portal.svelte';
-export let placement = 'bottom-end';
-export let notClickable = false;
-export let disablePopup = false;
-export let disappearTimeout = 100;
-export let appearTimeout = 300;
-export let style = undefined;
-export let noPadding = false;
-export let focusEl = undefined;
+let { placement = 'bottom-end', notClickable = false, disablePopup = false, disappearTimeout = 100, appearTimeout = 300, style = undefined, noPadding = false, focusEl = undefined, class: clazz = '', children, overlay } = $props();
 const [popperRef, popperContent] = createPopperActions({ placement });
 const popperOptions = {
     placement,
@@ -22,7 +17,7 @@ const popperOptions = {
         }
     ]
 };
-let showTooltip = false;
+let showTooltip = $state(false);
 let timeout = undefined;
 let inTimeout = undefined;
 function open() {
@@ -39,36 +34,38 @@ function close() {
     inTimeout = undefined;
     timeout = setTimeout(() => (showTooltip = false), disappearTimeout);
 }
-$: focusEl && focusEl?.focus();
+run(() => {
+    focusEl && focusEl?.focus();
+});
 </script>
 
 {#if notClickable}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<span {style} use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
-		<slot />
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<span {style} use:popperRef onmouseenter={open} onmouseleave={close} class={clazz}>
+		{@render children?.()}
 	</span>
 {:else}
 	<button
 		{style}
 		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		on:click
-		class={$$props.class}
+		onmouseenter={open}
+		onmouseleave={close}
+		onclick={bubble('click')}
+		class={clazz}
 	>
-		<slot />
+		{@render children?.()}
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
 	<Portal name="custom-popover">
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			use:popperContent={popperOptions}
-			on:mouseenter={open}
-			on:mouseleave={close}
+			onmouseenter={open}
+			onmouseleave={close}
 			class="z-[5001] border rounded-lg shadow-lg {noPadding ? '' : 'p-4'} bg-surface"
 		>
-			<slot name="overlay" />
+			{@render overlay?.()}
 		</div>
 	</Portal>
 {/if}

package/package/components/CustomPopover.svelte.d.ts

@@ -1,42 +1,17 @@
 import type { PopoverPlacement } from './Popover.model';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CustomPopover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    placement?: PopoverPlacement | undefined;
-    notClickable?: boolean | undefined;
-    disablePopup?: boolean | undefined;
-    disappearTimeout?: number | undefined;
-    appearTimeout?: number | undefined;
-    style?: string | undefined | undefined;
-    noPadding?: boolean | undefined;
+interface Props {
+    placement?: PopoverPlacement;
+    notClickable?: boolean;
+    disablePopup?: boolean;
+    disappearTimeout?: number;
+    appearTimeout?: number;
+    style?: string | undefined;
+    noPadding?: boolean;
     focusEl?: HTMLElement | undefined;
-}, {
-    default: {};
-    overlay: {};
-}>, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    overlay: {};
-}, {}, string>;
-type CustomPopover = InstanceType<typeof CustomPopover>;
+    class?: string;
+    children?: import('svelte').Snippet;
+    overlay?: import('svelte').Snippet;
+}
+declare const CustomPopover: import("svelte").Component<Props, {}, "">;
+type CustomPopover = ReturnType<typeof CustomPopover>;
 export default CustomPopover;