windmill-components 1.558.4 → 1.596.0

package/package/components/workspaceSettings/StorageSettings.svelte

@@ -19,7 +19,7 @@ import MultiSelect from '../select/MultiSelect.svelte';
 import CloseButton from '../common/CloseButton.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 import Select from '../select/Select.svelte';
-let { s3ResourceSettings = $bindable() } = $props();
+let { s3ResourceSettings = $bindable(), onSave = undefined } = $props();
 let s3FileViewer = $state();
 async function editWindmillLFSSettings() {
     const large_file_storage = convertFrontendToBackendSetting(s3ResourceSettings);
@@ -31,6 +31,7 @@ async function editWindmillLFSSettings() {
     });
     console.log('Large file storage settings changed', large_file_storage);
     sendUserToast(`Large file storage settings changed`);
+    onSave?.();
 }
 </script>
 
@@ -40,7 +41,7 @@ async function editWindmillLFSSettings() {
 
 <div class="flex flex-col gap-4 my-8">
 	<div class="flex flex-col gap-1">
-		<div class="text-primary text-lg font-semibold"
+		<div class="text-sm font-semibold text-emphasis"
 			>Workspace Object Storage (S3/Azure Blob/GCS)</div
 		>
 		<Description
@@ -64,7 +65,7 @@ async function editWindmillLFSSettings() {
 		storage using S3Object and use the wmill sdk to read and write large files backed by an object
 		storage. Large-scale log management and distributed dependency caching is under <a
 			href="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#instance-object-storage"
-			class="text-blue-500">Instance object storage</a
+			>Instance object storage</a
 		>, set by the superadmins in the instance settings UI.
 	</Alert>
 {/if}
@@ -74,14 +75,14 @@ async function editWindmillLFSSettings() {
 			<!-- this can be removed once parent moves to runes -->
 			<!-- svelte-ignore binding_property_non_reactive -->
 			<Tabs bind:selected={s3ResourceSettings.resourceType}>
-				<Tab exact size="xs" value="s3">S3</Tab>
-				<Tab size="xs" value="azure_blob">Azure Blob</Tab>
-				<Tab exact size="xs" value="s3_aws_oidc">AWS OIDC</Tab>
-				<Tab size="xs" value="azure_workload_identity">Azure Workload Identity</Tab>
-				<Tab exact size="xs" value="gcloud_storage">Google Cloud Storage</Tab>
+				<Tab exact label="S3" value="s3" />
+				<Tab value="azure_blob" label="Azure Blob" />
+				<Tab exact value="s3_aws_oidc" label="AWS OIDC" />
+				<Tab value="azure_workload_identity" label="Azure Workload Identity" />
+				<Tab exact value="gcloud_storage" label="Google Cloud Storage" />
 			</Tabs>
 		</div>
-		<div class="w-full flex gap-1 mt-4">
+		<div class="w-full flex gap-1 mt-4 whitespace-nowrap">
 			<!-- this can be removed once parent moves to runes -->
 			<!-- svelte-ignore binding_property_non_reactive -->
 			<ResourcePicker
@@ -91,8 +92,7 @@ async function editWindmillLFSSettings() {
 			{@render permissionBtn(s3ResourceSettings)}
 			<Button
 				size="sm"
-				variant="contained"
-				color="dark"
+				variant="accent"
 				disabled={emptyString(s3ResourceSettings.resourcePath)}
 				on:click={async () => {
 					if ($workspaceStore) {
@@ -106,7 +106,7 @@ async function editWindmillLFSSettings() {
 	<div class="mt-6">
 		<div class="flex mt-2 flex-col gap-y-4 max-w-5xl">
 			{#each s3ResourceSettings.secondaryStorage ?? [] as _, idx}
-				<div class="flex gap-1 relative">
+				<div class="flex gap-1 relative whitespace-nowrap">
 					<TextInput
 						class="max-w-[200px]"
 						inputProps={{ type: 'text', placeholder: 'Storage name' }}
@@ -153,8 +153,7 @@ async function editWindmillLFSSettings() {
 					{@render permissionBtn(s3ResourceSettings.secondaryStorage![idx][1])}
 					<Button
 						size="sm"
-						variant="contained"
-						color="dark"
+						variant="accent"
 						disabled={emptyString(s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourcePath)}
 						on:click={async () => {
 							if ($workspaceStore) {
@@ -180,7 +179,7 @@ async function editWindmillLFSSettings() {
 			<div class="flex gap-1">
 				<Button
 					size="xs"
-					variant="border"
+					variant="default"
 					on:click={() => {
 						if (s3ResourceSettings.secondaryStorage === undefined) {
 							s3ResourceSettings.secondaryStorage = []
@@ -207,6 +206,8 @@ async function editWindmillLFSSettings() {
 	</div>
 	<div class="flex mt-5 mb-5 gap-1">
 		<Button
+			variant="accent"
+			size="xl"
 			on:click={() => {
 				editWindmillLFSSettings()
 				console.log('Saving S3 settings', s3ResourceSettings)
@@ -218,7 +219,7 @@ async function editWindmillLFSSettings() {
 {#snippet permissionBtn(storage: NonNullable<S3ResourceSettings['secondaryStorage']>[number][1])}
 	<Popover closeOnOtherPopoverOpen placement="left">
 		<svelte:fragment slot="trigger">
-			<Button variant="border" wrapperClasses="h-full" btnClasses="px-2.5" color="dark" size="sm">
+			<Button variant="default" wrapperClasses="h-full" btnClasses="px-2.5" size="sm">
 				<Shield size={16} /> Permissions <ChevronDown size={14} />
 			</Button>
 		</svelte:fragment>
@@ -336,7 +337,7 @@ async function editWindmillLFSSettings() {
 			<CloseButton onClick={() => rules?.splice(idx, 1)} />
 		</div>
 	{/each}
-	<Button size="xs" variant="border" on:click={() => rules?.push({ pattern: '', allow: [] })}>
+	<Button size="xs" variant="default" on:click={() => rules?.push({ pattern: '', allow: [] })}>
 		<Plus size={14} />
 		Add permission rule
 	</Button>

package/package/components/workspaceSettings/StorageSettings.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type S3ResourceSettings } from '../../workspace_settings';
 type $$ComponentProps = {
     s3ResourceSettings: S3ResourceSettings;
+    onSave?: () => void;
 };
 declare const StorageSettings: import("svelte").Component<$$ComponentProps, {}, "s3ResourceSettings">;
 type StorageSettings = ReturnType<typeof StorageSettings>;

package/package/components/workspaceSettings/WorkspaceDependenciesSettings.svelte

@@ -0,0 +1,365 @@
+<script lang="ts">import { Button, Skeleton } from '../common';
+import ListFilters from '../home/ListFilters.svelte';
+import SearchItems from '../SearchItems.svelte';
+import Cell from '../table/Cell.svelte';
+import DataTable from '../table/DataTable.svelte';
+import Head from '../table/Head.svelte';
+import Row from '../table/Row.svelte';
+import WorkspaceDependenciesEditor from '../WorkspaceDependenciesEditor.svelte';
+import DependenciesDeploymentWarning from '../DependenciesDeploymentWarning.svelte';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import HighlightCode from '../HighlightCode.svelte';
+import { workspaceStore, userStore } from '../../stores';
+import { Plus, FileText, Search, Code2, Edit, Eye } from 'lucide-svelte';
+import { WorkspaceDependenciesService, WorkspaceService } from '../../gen';
+import { untrack } from 'svelte';
+import { sendUserToast } from '../../toast';
+import TimeAgo from '../TimeAgo.svelte';
+import Description from '../Description.svelte';
+let filter = $state('');
+let workspaceDependencies = $state();
+let filteredItems = $state();
+let workspaceDependenciesEditor = $state();
+// View modal state
+let viewDrawer = $state();
+let viewContent = $state('');
+let viewLanguage = $state('python3');
+let viewPath = $state('');
+// Dependency warning state
+let showDependencyWarning = $state(false);
+let pendingAction = $state(null);
+let currentImportedPath = $state(null);
+let warningTitle = $state('');
+let warningConfirmText = $state('');
+let languages = $derived(Array.from(new Set(filteredItems?.map((x) => x.language).filter(Boolean) ?? [])).sort());
+let languageFilter = $state(undefined);
+$effect(() => {
+    if ($workspaceStore) {
+        languageFilter = undefined;
+    }
+});
+let preFilteredItems = $derived(languageFilter == undefined
+    ? workspaceDependencies
+    : workspaceDependencies?.filter((x) => x.language === languageFilter));
+// Load workspace dependencies using actual API
+async function loadWorkspaceDependencies() {
+    if (!$workspaceStore)
+        return;
+    try {
+        workspaceDependencies = await WorkspaceDependenciesService.listWorkspaceDependencies({
+            workspace: $workspaceStore
+        });
+    }
+    catch (error) {
+        console.error('Failed to load workspace dependencies:', error);
+        sendUserToast('Failed to load enforced dependencies', true);
+    }
+}
+$effect(() => {
+    if ($workspaceStore && $userStore) {
+        untrack(() => {
+            loadWorkspaceDependencies();
+        });
+    }
+});
+async function createNewWorkspaceDependencies() {
+    await workspaceDependenciesEditor?.initNew();
+}
+function editWorkspaceDependencies(deps) {
+    workspaceDependenciesEditor?.editWorkspaceDependencies(deps.id, deps.name, deps.language);
+}
+function viewWorkspaceDependencies(deps) {
+    viewPath = deps.name || `Workspace Default (${deps.language})`;
+    viewContent = deps.content;
+    viewLanguage = deps.language;
+    viewDrawer?.openDrawer();
+}
+// Archive workspace dependencies
+async function archiveWorkspaceDependencies(deps) {
+    const importedPath = workspaceDependenciesEditor?.getWorkspaceDependenciesPath(deps.name ?? null, deps.language);
+    if (!importedPath) {
+        sendUserToast('Unable to determine enforced dependencies path', true);
+        return;
+    }
+    currentImportedPath = importedPath;
+    warningTitle = `Archive Warning`;
+    warningConfirmText = 'Archive Anyway';
+    pendingAction = () => executeArchive(deps);
+    showDependencyWarning = true;
+}
+async function executeArchive(deps) {
+    try {
+        await WorkspaceDependenciesService.archiveWorkspaceDependencies({
+            workspace: $workspaceStore,
+            language: deps.language,
+            name: deps.name
+        });
+        sendUserToast(`Archived enforced dependencies: ${workspaceDependenciesEditor?.getDisplayName(deps)}`);
+        loadWorkspaceDependencies(); // Reload the list
+    }
+    catch (error) {
+        console.error('Error archiving workspace dependencies:', error);
+        sendUserToast(`Failed to archive enforced dependencies: ${error.message}`, true);
+    }
+}
+// Delete workspace dependencies
+async function deleteWorkspaceDependencies(deps) {
+    const importedPath = workspaceDependenciesEditor?.getWorkspaceDependenciesPath(deps.name ?? null, deps.language);
+    if (!importedPath) {
+        sendUserToast('Unable to determine enforced dependencies path', true);
+        return;
+    }
+    currentImportedPath = importedPath;
+    warningTitle = `Delete Warning`;
+    warningConfirmText = 'Delete Anyway';
+    pendingAction = () => executeDelete(deps);
+    showDependencyWarning = true;
+}
+async function executeDelete(deps) {
+    try {
+        await WorkspaceDependenciesService.deleteWorkspaceDependencies({
+            workspace: $workspaceStore,
+            language: deps.language,
+            name: deps.name
+        });
+        sendUserToast(`Deleted enforced dependencies: ${workspaceDependenciesEditor?.getDisplayName(deps)}`);
+        loadWorkspaceDependencies(); // Reload the list
+    }
+    catch (error) {
+        console.error('Error deleting workspace dependencies:', error);
+        sendUserToast(`Failed to delete enforced dependencies: ${error.message}`, true);
+    }
+}
+async function viewReferencedFrom(deps) {
+    try {
+        const path = workspaceDependenciesEditor?.getWorkspaceDependenciesPath(deps.name ?? null, deps.language);
+        if (!path) {
+            sendUserToast('Unable to determine enforced dependencies path', true);
+            return;
+        }
+        const dependents = await WorkspaceService.getDependents({
+            workspace: $workspaceStore,
+            importedPath: path
+        });
+        if (dependents.length === 0) {
+            sendUserToast('No dependent runnables found for these enforced dependencies');
+        }
+        else {
+            // Show dependents in a modal or navigate to a detailed view
+            console.log('Dependents:', dependents);
+            sendUserToast(`Found ${dependents.length} dependent runnable${dependents.length !== 1 ? 's' : ''}`);
+        }
+    }
+    catch (error) {
+        console.error('Error fetching dependent runnables:', error);
+        sendUserToast('Failed to fetch dependent runnables', true);
+    }
+}
+async function handleWarningConfirm() {
+    if (pendingAction) {
+        showDependencyWarning = false;
+        await pendingAction();
+        pendingAction = null;
+        currentImportedPath = null;
+    }
+}
+function handleWarningCancel() {
+    showDependencyWarning = false;
+    pendingAction = null;
+    currentImportedPath = null;
+}
+function getLanguageForHighlighting(language) {
+    // Map our requirement languages to syntax highlighting languages
+    switch (language) {
+        case 'python3':
+            return 'python3';
+        case 'bun':
+            return 'json';
+        case 'go':
+            return 'go';
+        case 'php':
+            return 'json';
+    }
+}
+</script>
+
+<WorkspaceDependenciesEditor bind:this={workspaceDependenciesEditor} on:create={loadWorkspaceDependencies} />
+
+<SearchItems
+	{filter}
+	items={preFilteredItems}
+	bind:filteredItems
+	f={(x) => (x.name || 'Default') + ' ' + (x.language || '') + ' ' + (x.content || '')}
+/>
+
+<div class="flex flex-col gap-4 my-8">
+	<div class="flex flex-col gap-1">
+		<div class="text-sm font-semibold text-emphasis">Enforced Dependencies</div>
+		<Description link="https://www.windmill.dev/docs/">
+			Enforced Dependencies define dependency specifications for scripts by language. Unnamed dependencies serve as workspace defaults, while named dependencies can be referenced by scripts using #raw_reqs annotations.
+		</Description>
+	</div>
+
+	<div class="flex flex-row justify-end">
+		<Button size="md" startIcon={{ icon: Plus }} on:click={createNewWorkspaceDependencies}>
+			New&nbsp;enforced&nbsp;dependencies
+		</Button>
+	</div>
+</div>
+
+<div class="pt-2">
+	<div class="relative text-tertiary">
+		<input
+			placeholder="Search enforced dependencies by name, language, or content..."
+			bind:value={filter}
+			class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none w-full"
+		/>
+		<button aria-label="Search" type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+			<Search class="h-4 w-4" />
+		</button>
+	</div>
+</div>
+
+<div class="min-h-[56px]">
+	<ListFilters bind:selectedFilter={languageFilter} filters={languages} />
+</div>
+
+<div class="relative overflow-x-auto pb-40 pr-4">
+	{#if !filteredItems}
+		<Skeleton layout={[0.5, [2], 1]} />
+		{#each new Array(3) as _}
+			<Skeleton layout={[[3.5], 0.5]} />
+		{/each}
+	{:else if filteredItems.length == 0}
+		<div class="flex flex-col items-center justify-center h-full py-12">
+			<FileText size={48} class="text-secondary mb-4" />
+			<div class="text-md font-medium">No enforced dependencies found</div>
+			<div class="text-sm text-secondary mb-4">
+				Try changing the filters or creating new enforced dependencies
+			</div>
+			<Button startIcon={{ icon: Plus }} on:click={createNewWorkspaceDependencies}>
+				Create your first enforced dependencies
+			</Button>
+		</div>
+	{:else}
+		<DataTable size="xs">
+			<Head>
+				<tr>
+					<Cell head first>Name</Cell>
+					<Cell head>Language</Cell>
+					<Cell head>Description</Cell>
+					<Cell head>Type</Cell>
+					<Cell head>Edited</Cell>
+					<Cell head last>Actions</Cell>
+				</tr>
+			</Head>
+			<tbody class="divide-y">
+				{#each filteredItems as deps}
+					<Row>
+						<Cell first>
+							<div class="flex items-center gap-2">
+								<FileText size={16} class="text-secondary" />
+								<div class="flex flex-col">
+									<button
+										class="break-all hover:text-primary cursor-pointer font-medium text-left"
+										onclick={() => editWorkspaceDependencies(deps)}
+									>
+										{#if deps.marked}
+											{@html deps.marked}
+										{:else}
+											{workspaceDependenciesEditor?.getDisplayName(deps) || (deps.name || `Default (${deps.language})`)}
+										{/if}
+									</button>
+									<span class="text-xs text-tertiary font-mono">
+										{workspaceDependenciesEditor?.getFullFilename(deps.language, deps.name ?? null)} • {deps.language}
+									</span>
+								</div>
+							</div>
+						</Cell>
+						<Cell>
+							<div class="flex items-center gap-1">
+								<Code2 size={14} class="text-secondary" />
+								<span class="text-xs font-mono text-secondary">
+									{deps.language || 'python3'}
+								</span>
+							</div>
+						</Cell>
+						<Cell>
+							<span class="text-xs text-tertiary" title={deps.description}>
+								{deps.description || '-'}
+							</span>
+						</Cell>
+						<Cell>
+							<span class="text-xs px-1.5 py-0.5 rounded bg-opacity-50 font-medium"
+								class:bg-blue-100="{deps.name === null}"
+								class:text-blue-700="{deps.name === null}"
+								class:bg-gray-100="{deps.name !== null}"
+								class:text-gray-600="{deps.name !== null}"
+							>
+								{deps.name === null ? 'Default' : 'Named'}
+							</span>
+						</Cell>
+						<Cell>
+							<span class="text-2xs text-secondary">
+								<TimeAgo date={deps.created_at || ''} />
+							</span>
+						</Cell>
+						<Cell last>
+							<div class="flex gap-1 flex-wrap">
+								<Button size="xs" variant="border" color="light" startIcon={{ icon: Eye }} on:click={() => viewWorkspaceDependencies(deps)}>
+									View
+								</Button>
+								<Button size="xs" variant="border" color="light" startIcon={{ icon: Edit }} on:click={() => editWorkspaceDependencies(deps)}>
+									Edit
+								</Button>
+								<!-- Placeholder buttons -->
+								<Button size="xs" variant="border" color="gray" on:click={() => archiveWorkspaceDependencies(deps)} title="Archive">
+									Archive
+								</Button>
+								<Button size="xs" variant="border" color="red" on:click={() => deleteWorkspaceDependencies(deps)} title="Delete">
+									Delete
+								</Button>
+								<Button size="xs" variant="border" color="gray" on:click={() => viewReferencedFrom(deps)} title="Referenced From">
+									Refs
+								</Button>
+						</div>
+						</Cell>
+					</Row>
+				{/each}
+			</tbody>
+		</DataTable>
+	{/if}
+</div>
+
+<Drawer bind:this={viewDrawer} size="900px">
+	<DrawerContent title="View Requirement - {viewPath}" on:close={viewDrawer?.closeDrawer}>
+		{#snippet actions()}
+			<div class="flex items-center gap-2">
+				<Code2 size={16} class="text-secondary" />
+				<span class="text-sm font-mono text-secondary">{viewLanguage}</span>
+			</div>
+		{/snippet}
+
+		<div class="space-y-4">
+			{#if viewContent}
+				<HighlightCode language={getLanguageForHighlighting(viewLanguage)} code={viewContent} />
+			{:else}
+				<div class="text-center text-secondary py-8">
+					<FileText size={48} class="mx-auto mb-4 opacity-50" />
+					<p>No content available for this requirement</p>
+				</div>
+			{/if}
+		</div>
+	</DrawerContent>
+</Drawer>
+
+{#if showDependencyWarning && currentImportedPath}
+	<DependenciesDeploymentWarning
+		importedPath={currentImportedPath}
+		title={warningTitle}
+		confirmText={warningConfirmText}
+		onConfirm={handleWarningConfirm}
+		onCancel={handleWarningCancel}
+	/>
+{/if}

package/package/components/workspaceSettings/WorkspaceDependenciesSettings.svelte.d.ts

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

package/package/components/workspaceSettings/utils.svelte.d.ts

@@ -0,0 +1 @@
+export declare let isCustomInstanceDbEnabled: import("svelte/store").Readable<boolean | "" | undefined>;

package/package/components/workspaceSettings/utils.svelte.js

@@ -0,0 +1,4 @@
+import { isCloudHosted } from '../../cloud';
+import { superadmin } from '../../stores';
+import { derived } from 'svelte/store';
+export let isCustomInstanceDbEnabled = derived([superadmin], ([superadmin_]) => superadmin_ && !isCloudHosted());

package/package/consts.d.ts

@@ -1,4 +1,4 @@
-import type { DbType } from './components/apps/components/display/dbtable/utils';
+import type { DbType } from './components/dbTypes';
 export declare const DEFAULT_WEBHOOK_TYPE: 'async' | 'sync';
 export declare const HOME_SHOW_HUB = true;
 export declare const HOME_SHOW_CREATE_FLOW = true;

package/package/cookies.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Reads the value of a cookie by name.
+ * @param {string} name - The name of the cookie to retrieve.
+ * @returns {string | undefined} The cookie value, or undefined if not found.
+ */
+export declare function getCookie(name: string): string | undefined;
+export declare function sameTopDomainOrigin(origin: string | null, desktopOrigin: string): boolean;

package/package/cookies.js

@@ -0,0 +1,25 @@
+/**
+ * Reads the value of a cookie by name.
+ * @param {string} name - The name of the cookie to retrieve.
+ * @returns {string | undefined} The cookie value, or undefined if not found.
+ */
+export function getCookie(name) {
+    const match = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()\[\]\\\/\+^])/g, '\\$1') + '=([^;]*)'));
+    return match ? decodeURIComponent(match[1]) : undefined;
+}
+// this only check the last 2 segments to work for popup on shared top-domain
+export function sameTopDomainOrigin(origin, desktopOrigin) {
+    if (origin == null) {
+        return false;
+    }
+    const getLastTwoSegments = (url) => {
+        const parts = url.split('.');
+        return parts.length >= 2 ? parts.slice(-2).join('.') : url;
+    };
+    if (origin.includes('.') && desktopOrigin.includes('.')) {
+        return getLastTwoSegments(origin) === getLastTwoSegments(desktopOrigin);
+    }
+    else {
+        return origin === desktopOrigin;
+    }
+}

package/package/gen/core/OpenAPI.js

@@ -21,7 +21,7 @@ export const OpenAPI = {
     PASSWORD: undefined,
     TOKEN: undefined,
     USERNAME: undefined,
-    VERSION: '1.558.1',
+    VERSION: '1.596.0',
     WITH_CREDENTIALS: false,
     interceptors: {
         request: new Interceptors(),