windmill-components 1.655.1 → 1.665.0

package/package/components/scripts/WacExportDrawer.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import { copyToClipboard } from '../../utils';
+import { Highlight } from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import { yaml } from 'svelte-highlight/languages';
+import YAML from 'yaml';
+import { Button } from '../common';
+import { Copy, Download } from 'lucide-svelte';
+import Tabs from '../common/tabs/Tabs.svelte';
+import Tab from '../common/tabs/Tab.svelte';
+import HighlightTheme from '../HighlightTheme.svelte';
+let drawer = $state();
+let scriptData = $state(undefined);
+let rawType = $state('yaml');
+export function open(script) {
+    const exportData = {};
+    // Export all meaningful fields
+    if (script.summary)
+        exportData.summary = script.summary;
+    if (script.description)
+        exportData.description = script.description;
+    exportData.content = script.content;
+    exportData.language = script.language;
+    if (script.schema)
+        exportData.schema = script.schema;
+    if (script.kind && script.kind !== 'script')
+        exportData.kind = script.kind;
+    if (script.is_template)
+        exportData.is_template = script.is_template;
+    if (script.tag)
+        exportData.tag = script.tag;
+    if (script.envs?.length)
+        exportData.envs = script.envs;
+    if (script.concurrent_limit != null)
+        exportData.concurrent_limit = script.concurrent_limit;
+    if (script.concurrency_time_window_s != null)
+        exportData.concurrency_time_window_s = script.concurrency_time_window_s;
+    if (script.cache_ttl != null)
+        exportData.cache_ttl = script.cache_ttl;
+    if (script.dedicated_worker)
+        exportData.dedicated_worker = script.dedicated_worker;
+    if (script.ws_error_handler_muted)
+        exportData.ws_error_handler_muted = script.ws_error_handler_muted;
+    if (script.priority != null)
+        exportData.priority = script.priority;
+    if (script.restart_unless_cancelled)
+        exportData.restart_unless_cancelled = script.restart_unless_cancelled;
+    if (script.timeout != null)
+        exportData.timeout = script.timeout;
+    if (script.concurrency_key)
+        exportData.concurrency_key = script.concurrency_key;
+    if (script.debounce_key)
+        exportData.debounce_key = script.debounce_key;
+    if (script.debounce_delay_s != null)
+        exportData.debounce_delay_s = script.debounce_delay_s;
+    if (script.debounce_args_to_accumulate?.length)
+        exportData.debounce_args_to_accumulate = script.debounce_args_to_accumulate;
+    if (script.visible_to_runner_only)
+        exportData.visible_to_runner_only = script.visible_to_runner_only;
+    if (script.auto_kind)
+        exportData.auto_kind = script.auto_kind;
+    if (script.has_preprocessor)
+        exportData.has_preprocessor = script.has_preprocessor;
+    if (script.modules && Object.keys(script.modules).length > 0)
+        exportData.modules = script.modules;
+    scriptData = exportData;
+    drawer?.toggleDrawer();
+}
+function getContent() {
+    if (rawType === 'yaml') {
+        return YAML.stringify(scriptData ?? {});
+    }
+    return JSON.stringify(scriptData ?? {}, null, 4);
+}
+function downloadFile() {
+    const content = getContent();
+    const ext = rawType === 'yaml' ? 'yaml' : 'json';
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `wac-script.${ext}`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+</script>
+
+<HighlightTheme />
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Export Workflow-as-Code" on:close={() => drawer?.toggleDrawer()}>
+		<div>
+			<Tabs bind:selected={rawType}>
+				<Tab value="yaml" label="YAML" />
+				<Tab value="json" label="JSON" />
+				{#snippet content()}
+					<div class="relative pt-2">
+						<div class="absolute top-2 right-2 z-20 flex gap-1">
+							<Button
+								on:click={() => copyToClipboard(getContent())}
+								variant="accent"
+								size="sm"
+								startIcon={{ icon: Copy }}
+								iconOnly
+							/>
+							<Button
+								on:click={downloadFile}
+								variant="accent"
+								size="sm"
+								startIcon={{ icon: Download }}
+								iconOnly
+							/>
+						</div>
+						{#key rawType}
+							<Highlight
+								class="overflow-auto px-1 flex-1"
+								language={rawType === 'yaml' ? yaml : json}
+								code={getContent()}
+							/>
+						{/key}
+					</div>
+				{/snippet}
+			</Tabs>
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/scripts/WacExportDrawer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NewScript } from '../../gen';
+declare const WacExportDrawer: import("svelte").Component<Record<string, never>, {
+    open: (script: NewScript & {
+        modules?: Record<string, any> | null;
+    }) => void;
+}, "">;
+type WacExportDrawer = ReturnType<typeof WacExportDrawer>;
+export default WacExportDrawer;

package/package/components/scripts/scriptStore.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { NewScript } from '../../gen';
+export declare const importScriptStore: import("svelte/store").Writable<NewScript | undefined>;

package/package/components/scripts/scriptStore.svelte.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const importScriptStore = writable(undefined);

package/package/components/select/SelectDropdown.svelte

@@ -62,7 +62,7 @@ let enableOverflowYAuto = new Debounced(() => isVisible, 15);
 			ulClass
 		)}
 	>
-		{#each processedItems ?? [] as item, itemIndex (item.value)}
+		{#each processedItems ?? [] as item, itemIndex}
 			{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
 				<li
 					class={twMerge(

package/package/components/settings/AIPromptsModal.svelte

@@ -4,7 +4,7 @@ import Label from '../Label.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 import { AIMode } from '../copilot/chat/AIChatManager.svelte';
 const MAX_CUSTOM_PROMPT_LENGTH = 5000;
-let { open = $bindable(false), customPrompts = $bindable(), onSave, onReset, hasChanges, isWorkspaceSettings = false } = $props();
+let { open = $bindable(false), customPrompts = $bindable(), onSave, onReset, hasChanges, scope = 'user' } = $props();
 const placeholders = {
     [AIMode.SCRIPT]: 'Enter custom instructions for script generation and editing',
     [AIMode.FLOW]: 'Enter custom instructions for workflow creation and automation',
@@ -40,9 +40,12 @@ function handleReset() {
 	<div class="flex flex-col gap-6 h-full px-1 w-full">
 		<div class="grow min-h-0 overflow-y-auto" style="scrollbar-gutter: stable;">
 			<div class="text-xs text-secondary mb-6">
-				{#if isWorkspaceSettings}
+				{#if scope === 'workspace'}
 					Customize the system prompts for each AI mode. These prompts apply to all workspace
 					members.
+				{:else if scope === 'instance'}
+					Customize the system prompts for each AI mode. These prompts apply to workspaces using
+					instance AI defaults.
 				{:else}
 					Customize the system prompts for each AI mode. These prompts are stored locally in your
 					browser and apply in addition to workspace-level prompts.

package/package/components/settings/AIPromptsModal.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     onSave?: () => void;
     onReset: () => void;
     hasChanges: boolean;
-    isWorkspaceSettings?: boolean;
+    scope?: 'user' | 'workspace' | 'instance';
 }
 declare const AIPromptsModal: import("svelte").Component<Props, {}, "open" | "customPrompts">;
 type AIPromptsModal = ReturnType<typeof AIPromptsModal>;

package/package/components/settings/CloudQuotas.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">import { workspaceStore } from '../../stores';
+import Button from '../common/button/Button.svelte';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import { sendUserToast } from '../../toast';
+import { WorkspaceService } from '../../gen';
+import { untrack } from 'svelte';
+import { Trash2 } from 'lucide-svelte';
+let quotas = $state(undefined);
+let loading = $state(false);
+let pruning = $state(false);
+let drawer = $state();
+let pruneTarget = $state(undefined);
+$effect(() => {
+    if ($workspaceStore) {
+        untrack(() => loadQuotas());
+    }
+});
+async function loadQuotas() {
+    loading = true;
+    try {
+        quotas = await WorkspaceService.getCloudQuotas({ workspace: $workspaceStore });
+    }
+    catch (e) {
+        sendUserToast(`Failed to load cloud quotas: ${e}`, true);
+    }
+    finally {
+        loading = false;
+    }
+}
+function openPruneDrawer(type) {
+    pruneTarget = type;
+    drawer?.openDrawer();
+}
+async function confirmPrune() {
+    if (!pruneTarget)
+        return;
+    pruning = true;
+    try {
+        const result = await WorkspaceService.pruneVersions({
+            workspace: $workspaceStore,
+            requestBody: { resource_type: pruneTarget }
+        });
+        sendUserToast(`Pruned ${result.pruned} old ${pruneTarget} versions`);
+        drawer?.closeDrawer();
+        await loadQuotas();
+    }
+    catch (e) {
+        sendUserToast(`Failed to prune: ${e}`, true);
+    }
+    finally {
+        pruning = false;
+    }
+}
+function getPrunableCount(type) {
+    if (!quotas)
+        return 0;
+    return quotas[type].prunable;
+}
+function getPruneDescription(type) {
+    switch (type) {
+        case 'scripts':
+            return 'This will permanently delete all non-HEAD script versions (old edits). The latest deployed version of each script will be preserved. This directly frees up quota space since each script edit creates a new row counted against the limit.';
+        case 'flows':
+            return 'This will permanently delete all non-HEAD flow versions. Only the latest version of each flow will be kept. This frees up storage but does not reduce the flow count (quota counts unique flows, not versions).';
+        case 'apps':
+            return 'This will permanently delete all non-HEAD app versions. Only the latest version of each app will be kept. This frees up storage but does not reduce the app count (quota counts unique apps, not versions).';
+    }
+}
+const rows = [
+    { label: 'Scripts', key: 'scripts', prunable: true },
+    { label: 'Flows', key: 'flows', prunable: true },
+    { label: 'Apps', key: 'apps', prunable: true },
+    { label: 'Variables', key: 'variables', prunable: false },
+    { label: 'Resources', key: 'resources', prunable: false }
+];
+</script>
+
+<div class="flex flex-col gap-2">
+	<p class="font-semibold text-xs text-emphasis">Cloud Quotas</p>
+	<p class="text-xs text-secondary font-normal">
+		Current usage and limits for this workspace. Prune old versions to free up space.
+	</p>
+
+	{#if loading && !quotas}
+		<p class="text-xs text-tertiary">Loading...</p>
+	{:else if quotas}
+		<div class="border rounded-md overflow-hidden">
+			<table class="w-full text-xs">
+				<thead>
+					<tr class="bg-surface-secondary border-b">
+						<th class="text-left px-3 py-2 text-secondary font-medium">Resource</th>
+						<th class="text-left px-3 py-2 text-secondary font-medium">Usage</th>
+						<th class="text-right px-3 py-2 text-secondary font-medium">Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each rows as row (row.key)}
+						{@const info = quotas[row.key]}
+						<tr class="border-b last:border-b-0">
+							<td class="px-3 py-2 text-primary font-medium">{row.label}</td>
+							<td class="px-3 py-2">
+								<span
+									class={info.used >= info.limit ? 'text-red-500 font-semibold' : 'text-primary'}
+								>
+									{info.used}
+								</span>
+								<span class="text-tertiary">/ {info.limit}</span>
+							</td>
+							<td class="px-3 py-2 text-right">
+								{#if row.prunable && info.prunable > 0}
+									<Button
+										unifiedSize="sm"
+										variant="default"
+										startIcon={{ icon: Trash2 }}
+										on:click={() => openPruneDrawer(row.key as ResourceType)}
+									>
+										Prune {info.prunable} old versions
+									</Button>
+								{:else if row.prunable}
+									<span class="text-tertiary">No old versions</span>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
+
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Prune old versions" on:close={drawer?.closeDrawer}>
+		{#if pruneTarget}
+			<div class="flex flex-col gap-4">
+				<p class="text-sm text-primary">
+					You are about to prune <span class="font-semibold">{getPrunableCount(pruneTarget)}</span>
+					old {pruneTarget} versions.
+				</p>
+				<p class="text-xs text-secondary">
+					{getPruneDescription(pruneTarget)}
+				</p>
+				<p class="text-xs text-red-500 font-medium">This action cannot be undone.</p>
+			</div>
+		{/if}
+		{#snippet actions()}
+			<Button variant="accent" on:click={confirmPrune} disabled={pruning}>
+				{pruning ? 'Pruning...' : 'Confirm Prune'}
+			</Button>
+		{/snippet}
+	</DrawerContent>
+</Drawer>

package/package/components/settings/CloudQuotas.svelte.d.ts

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