windmill-components 1.623.1 → 1.623.2

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -2,6 +2,7 @@
 import { Building, Plus, Settings, GitFork } from 'lucide-svelte';
 import MenuButton from './MenuButton.svelte';
 import { Menu, MenuItem } from '../meltComponents';
+import WorkspaceIcon from '../workspace/WorkspaceIcon.svelte';
 import { goto } from '../../navigation';
 import { base } from '../../base';
 import { page } from '$app/stores';
@@ -12,6 +13,7 @@ import { isCloudHosted } from '../../cloud';
 import { workspaceAIClients } from '../copilot/lib';
 import { twMerge } from 'tailwind-merge';
 import { buildWorkspaceHierarchy } from '../../utils/workspaceHierarchy';
+import { getContrastTextColor } from '../../utils';
 function removePrefix(str, prefix) {
     if (str.startsWith(prefix)) {
         return str.substring(prefix.length);
@@ -44,12 +46,6 @@ async function toggleSwitchWorkspace(id) {
         await goto('/');
     }
 }
-// Helper function to check if a workspace is forked
-function isForkedWorkspace(workspaceId) {
-    if (!$userWorkspaces)
-        return false;
-    return $userWorkspaces.some((w) => w.id === workspaceId && w.parent_workspace_id != null);
-}
 function getForkedWorkspace(workspaceId) {
     if (!$userWorkspaces)
         return undefined;
@@ -61,48 +57,37 @@ function getParentWorkspace(parentId) {
     return $userWorkspaces.find((w) => w.id === parentId);
 }
 // Group workspaces into parent-child hierarchy using Svelte 5 derived and the new utility
-const groupedWorkspaces = $derived(() => {
+const groupedWorkspaces = $derived.by(() => {
     if (!$userWorkspaces)
         return [];
     return buildWorkspaceHierarchy($userWorkspaces);
 });
+const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary';
 </script>
 
-{#if isForkedWorkspace($workspaceStore ?? '') && !isCollapsed}
-	{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
-	{@const parentWorkspace = forkedWorkspace
-		? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
-		: null}
-	<Menu {createMenu} usePointerDownOutside>
-		{#snippet triggr({ trigger })}
-			<div class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs">
-				<Building size={12} class="text-primary" />
-				<span class="text-xs text-primary"> {parentWorkspace?.name ?? ''} </span>
-			</div>
-		{/snippet}
-	</Menu>
-{/if}
 <Menu {createMenu} usePointerDownOutside>
 	{#snippet triggr({ trigger })}
 		{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
 		{@const parentWorkspace = forkedWorkspace
 			? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
 			: null}
+		{@const iconColor = getContrastTextColor($workspaceColor)}
 		{#if forkedWorkspace && parentWorkspace}
-			<div class={isCollapsed ? '' : 'pl-6'}>
-				<MenuButton
-					class="!text-xs"
-					icon={GitFork}
-					label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
-					{isCollapsed}
-					color={$workspaceColor}
-					{trigger}
-				/>
-			</div>
+			<MenuButton
+				class="!text-xs"
+				icon={GitFork}
+				iconProps={iconColor ? { style: `color: ${iconColor}` } : undefined}
+				label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
+				sublabel={parentWorkspace?.name ? `Fork of ${parentWorkspace.name}` : undefined}
+				{isCollapsed}
+				color={$workspaceColor}
+				{trigger}
+			/>
 		{:else}
 			<MenuButton
 				class="!text-xs"
 				icon={Building}
+				iconProps={iconColor ? { style: `color: ${iconColor}` } : undefined}
 				label={$workspaceStore ?? ''}
 				{isCollapsed}
 				color={$workspaceColor}
@@ -114,13 +99,14 @@ const groupedWorkspaces = $derived(() => {
 	{#snippet children({ item })}
 		<div class="divide-y" role="none">
 			<div class="py-1">
-				{#each groupedWorkspaces() as { workspace, depth, isForked, parentName }}
+				{#each groupedWorkspaces as { workspace, depth, isForked, parentName }}
+					{@const isSelected = $workspaceStore === workspace.id}
 					<MenuItem
 						class={twMerge(
-							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-2 px-3',
 							workspace.disabled && 'opacity-50 cursor-not-allowed',
-							$workspaceStore === workspace.id
-								? 'cursor-default bg-surface-selected'
+							isSelected
+								? 'cursor-default bg-surface-accent-selected'
 								: workspace.disabled
 									? ''
 									: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
@@ -133,73 +119,47 @@ const groupedWorkspaces = $derived(() => {
 						{item}
 					>
 						<div class="flex items-center justify-between min-w-0 w-full">
-							<div
-								class={twMerge('flex items-center gap-2 min-w-0', 'pl-4')}
-								style:padding-left={`${4 + depth * 12}px`}
-							>
-								{#if isForked}
-									<GitFork size={12} class="text-primary flex-shrink-0" />
-								{:else}
-									<Building size={12} />
-								{/if}
+							<div class="flex items-center gap-2 min-w-0" style:padding-left={`${depth * 16}px`}>
+								<WorkspaceIcon workspaceColor={workspace.color} {isForked} {parentName} />
 								<div class="min-w-0 flex-1">
 									<div
 										class={twMerge(
-											'truncate text-left text-[1.2em]',
-											isForked ? 'text-secondary' : 'text-primary'
+											'truncate text-left text-xs font-normal',
+											isSelected ? 'text-accent' : 'text-primary'
 										)}
+										title={workspace.name}
 									>
 										{workspace.name}{workspace.disabled ? ' (user disabled)' : ''}
 									</div>
 									<div
 										class={twMerge(
-											'font-mono text-2xs whitespace-nowrap truncate text-left',
-											isForked ? 'text-primary opacity-75' : 'text-primary'
+											'font-mono text-2xs whitespace-nowrap truncate text-left font-normal',
+											isSelected ? 'text-accent/80' : 'text-hint'
 										)}
+										title={workspace.id}
 									>
 										{workspace.id}
 									</div>
-									{#if isForked && parentName}
-										<div class="text-primary text-2xs truncate text-left pl-2 min-h-[1rem]">
-											Fork of {parentName}
-										</div>
-									{/if}
 								</div>
 							</div>
-							{#if workspace.color}
-								<div
-									class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
-									style="background-color: {workspace.color}"
-								></div>
-							{/if}
 						</div>
 					</MenuItem>
 				{/each}
 			</div>
 			{#if (isCloudHosted() || $superadmin) && !strictWorkspaceSelect}
 				<div class="py-1" role="none">
-					<a
-						href="{base}/user/create_workspace"
-						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
-						role="menuitem"
-						tabindex="-1"
-					>
+					<MenuItem href="{base}/user/create_workspace" class={itemClass} {item}>
 						<Plus size={16} />
 						Workspace
-					</a>
+					</MenuItem>
 				</div>
 			{/if}
 			{#if !strictWorkspaceSelect && !isCloudHosted()}
 				<div class="py-1" role="none">
-					<a
-						href="{base}/user/fork_workspace"
-						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
-						role="menuitem"
-						tabindex="-1"
-					>
+					<MenuItem href="{base}/user/fork_workspace" class={itemClass} {item}>
 						<GitFork size={16} />
 						Fork current workspace
-					</a>
+					</MenuItem>
 				</div>
 			{/if}
 			{#if !strictWorkspaceSelect}
@@ -207,10 +167,7 @@ const groupedWorkspaces = $derived(() => {
 					<MenuItem
 						href="{base}/user/workspaces"
 						onClick={() => clearWorkspaceFromStorage()}
-						class={twMerge(
-							'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary',
-							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-						)}
+						class={itemClass}
 						{item}
 					>
 						All workspaces
@@ -219,14 +176,7 @@ const groupedWorkspaces = $derived(() => {
 			{/if}
 			{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
 				<div class="py-1" role="none">
-					<MenuItem
-						href="{base}/workspace_settings"
-						class={twMerge(
-							'text-secondary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2',
-							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-						)}
-						{item}
-					>
+					<MenuItem href="{base}/workspace_settings" class={itemClass} {item}>
 						<Settings size={16} />
 						Workspace settings
 					</MenuItem>

package/package/components/sqlTypeService.js

@@ -4,7 +4,8 @@
  * This module handles the communication between the Monaco editor and the
  * custom TypeScript worker that injects SQL type annotations.
  */
-import { languages, Uri, editor, MarkerSeverity } from 'monaco-editor';
+import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features';
+import { Uri, editor, MarkerSeverity } from 'monaco-editor';
 /**
  * Cached promise for the TypeScript worker client
  * We lazily initialize this when first needed
@@ -14,7 +15,7 @@ async function getWorkerClient() {
     try {
         // Get or create the worker client
         if (!_workerClient) {
-            _workerClient = (await languages.typescript.getTypeScriptWorker());
+            _workerClient = (await getTypeScriptWorker());
         }
         return _workerClient;
     }
@@ -97,7 +98,7 @@ export async function updateSqlQueriesInWorker(fileUri, queries) {
 async function revalidateModel(model) {
     if (!model || model.isDisposed())
         return;
-    const getWorker = await languages.typescript.getTypeScriptWorker();
+    const getWorker = await getTypeScriptWorker();
     const worker = await getWorker(model.uri);
     const diagnostics = (await Promise.all([
         worker.getSyntacticDiagnostics(model.uri.toString()),

package/package/components/table/DataTable.svelte

@@ -10,7 +10,7 @@ let footerHeight = $state(0);
 let tableHeight = $state(0);
 const dispatch = createEventDispatcher();
 let tableContainer = $state();
-let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, children, emptyMessage } = $props();
+let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, containerClass = '', children, emptyMessage, preventXOverflow = false } = $props();
 setContext('datatable', {
     size
 });
@@ -63,12 +63,17 @@ $effect(() => {
 	class={twMerge(
 		'h-full',
 		rounded ? 'rounded-md overflow-hidden' : '',
-		noBorder ? 'border-0' : 'border'
+		noBorder ? 'border-0' : 'border',
+		containerClass
 	)}
 	bind:clientHeight={tableHeight}
 >
 	<List justify="between" gap="none" hFull={true}>
-		<div class="w-full overflow-auto h-fit" bind:this={tableContainer} onscroll={handleScroll}>
+		<div
+			class={twMerge('w-full overflow-auto h-fit', preventXOverflow ? 'overflow-x-hidden' : '')}
+			bind:this={tableContainer}
+			onscroll={handleScroll}
+		>
 			<table class={tableFixed ? 'table-fixed w-full' : 'min-w-full'}>
 				{@render children?.()}
 			</table>

package/package/components/table/DataTable.svelte.d.ts

@@ -21,6 +21,8 @@ interface Props {
     neverShowLoader?: boolean;
     loading?: boolean;
     loadingMore?: boolean;
+    containerClass?: string;
+    preventXOverflow?: boolean;
     children?: import('svelte').Snippet;
     emptyMessage?: import('svelte').Snippet;
 }

package/package/components/text_input/TextInput.svelte

@@ -20,6 +20,9 @@ export const inputSizeClasses = {
 export function focus() {
     inputEl?.focus();
 }
+export function select() {
+    inputEl?.select();
+}
 let inputEl = $state();
 let { inputProps: _inputProps, value = $bindable(), class: className = '', error, size = 'md', unifiedHeight = true, underlyingInputEl: _underlyingInputEl } = $props();
 let underlyingInputEl = $derived(_underlyingInputEl ?? 'input');

package/package/components/text_input/TextInput.svelte.d.ts

@@ -24,6 +24,7 @@ declare function $$render<UnderlyingInputElT extends 'input' | 'textarea' = 'inp
     props: Props<UnderlyingInputElT>;
     exports: {
         focus: () => void;
+        select: () => void;
     };
     bindings: "value";
     slots: {};
@@ -36,6 +37,7 @@ declare class __sveltets_Render<UnderlyingInputElT extends 'input' | 'textarea'
     bindings(): "value";
     exports(): {
         focus: () => void;
+        select: () => void;
     };
 }
 interface $$IsomorphicComponent {

package/package/components/triggers/AddTriggersButton.svelte

@@ -3,11 +3,17 @@ import DropdownV2 from '../DropdownV2.svelte';
 import { SchedulePollIcon } from '../icons';
 import { isCloudHosted } from '../../cloud';
 import { CloudOff } from 'lucide-svelte';
+import { isServiceAvailable } from './native/utils';
+import { workspaceStore } from '../../stores';
 let { setDropdownWidthToButtonWidth = false, children, class: className, placement = 'bottom-start', isEditor = false, onAddDraftTrigger, onAddScheduledPoll, onClose } = $props();
 let dropdown;
 const cloudHosted = isCloudHosted();
-// Dropdown items for adding new triggers
-const addTriggerItems = [
+let nextcloudAvailable = $state(false);
+async function setNextcloudState() {
+    nextcloudAvailable = await isServiceAvailable('nextcloud', $workspaceStore);
+}
+setNextcloudState();
+const addTriggerItems = $derived([
     {
         displayName: 'Schedule',
         action: () => onAddDraftTrigger?.('schedule'),
@@ -59,7 +65,8 @@ const addTriggerItems = [
     {
         displayName: 'Email',
         action: () => onAddDraftTrigger?.('email'),
-        icon: triggerIconMap.email
+        icon: triggerIconMap.email,
+        extra: cloudHosted ? extra : undefined
     },
     {
         displayName: 'Scheduled Poll',
@@ -69,8 +76,14 @@ const addTriggerItems = [
         },
         icon: SchedulePollIcon,
         hidden: !isEditor
+    },
+    {
+        displayName: 'Nextcloud',
+        action: () => onAddDraftTrigger?.('nextcloud'),
+        icon: triggerIconMap.nextcloud,
+        hidden: !nextcloudAvailable
     }
-].filter((item) => !item.hidden);
+].filter((item) => !item.hidden));
 let triggersButtonWidth = $state(0);
 export function close() {
     dropdown?.close();

package/package/components/triggers/TriggersEditor.svelte

@@ -120,11 +120,15 @@ async function handleUpdate(trigger, path) {
     else if (triggerType === 'email') {
         await triggersState.fetchEmailTriggers(triggersCount, $workspaceStore, currentPath, isFlow, $userStore);
     }
+    else if (triggerType === 'nextcloud') {
+        await triggersState.fetchNativeTriggers('nextcloud', $workspaceStore, currentPath, isFlow, $userStore);
+    }
     triggersState.selectedTriggerIndex = triggersState.triggers.findIndex((t) => t.path === path && t.type === triggerType);
     loading = false;
     onDeployTrigger?.({ type: triggerType, id: triggerId, path: triggerPath });
 }
 function handleUpdateDraftConfig(triggerIndex, newConfig, saveDisabled) {
+    console.log('handleUpdateDraftConfig', triggerIndex, newConfig, saveDisabled);
     if (triggerIndex && triggerIndex !== -1 && newConfig) {
         triggersState.setDraftConfig(triggerIndex, { ...newConfig, canSave: !saveDisabled });
     }

package/package/components/triggers/TriggersWrapper.svelte

@@ -15,7 +15,11 @@ import { triggerIconMap } from './utils';
 import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import CliHelpBox from '../CliHelpBox.svelte';
 import TriggerLabel from './TriggerLabel.svelte';
+import NativeTriggersPanel from './native/NativeTriggersPanel.svelte';
 let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath, runnableVersion, small, args, newItem, schema, onEmailDomain, ...props } = $props();
+$effect(() => {
+    console.log('selectedTrigger', selectedTrigger);
+});
 </script>
 
 {#if selectedTrigger.type === 'http'}
@@ -131,6 +135,16 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 	/>
 {:else if selectedTrigger.type === 'poll'}
 	<ScheduledPollPanel />
+{:else if selectedTrigger.type === 'nextcloud'}
+	<NativeTriggersPanel
+		service="nextcloud"
+		{isFlow}
+		path={initialPath || fakeInitialPath}
+		{selectedTrigger}
+		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
+		{customLabel}
+		{...props}
+	/>
 {:else if selectedTrigger.type === 'cli'}
 	<div class="py-1 flex flex-col gap-6">
 		<ClipboardPanel content={selectedTrigger.extra?.cliCommand ?? ''} />