windmill-components 1.501.23 → 1.502.2

package/package/components/Dev.svelte

@@ -441,22 +441,21 @@ let token = $derived($page.url.searchParams.get('wm_token') ?? undefined);
 let workspace = $derived($page.url.searchParams.get('workspace') ?? undefined);
 let themeDarkRaw = $derived($page.url.searchParams.get('activeColorTheme'));
 let themeDark = $derived(themeDarkRaw == '2' || themeDarkRaw == '4');
-$effect(() => {
+$effect.pre(() => {
     if (token) {
         OpenAPI.WITH_CREDENTIALS = true;
         OpenAPI.TOKEN = token;
-        untrack(() => loadUser());
     }
 });
-$effect(() => {
+$effect.pre(() => {
     if (workspace) {
         $workspaceStore = workspace;
-        untrack(() => setupCopilotInfo());
     }
 });
-$effect(() => {
+$effect.pre(() => {
     if (workspace && token) {
         untrack(() => loadUser());
+        untrack(() => setupCopilotInfo());
     }
 });
 $effect(() => {

package/package/components/apps/components/display/AppCarouselList.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
@@ -13,15 +13,16 @@ import { Button } from '../../../common';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, customCss = undefined, render, initializing = $bindable(), componentContainerHeight } = $props();
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } = getContext('AppViewerContext');
 let everRender = $state(render);
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
-const outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false,
-    inputs: {}
+    inputs: {},
+    currentIndex: 0
 });
 const resolvedConfig = $state(initConfig(components['carousellistcomponent'].initialData.configuration, configuration));
 function onFocus() {
@@ -43,6 +44,40 @@ $effect.pre(() => {
         });
 });
 let currentPageIndex = $state(0);
+// Single update function - ONLY place that calls .set()
+function handleIndexChange() {
+    if (outputs?.currentIndex) {
+        if (!Array.isArray(result) || result.length === 0) {
+            // No data or empty data - reset to 0
+            currentPageIndex = 0;
+            outputs.currentIndex.set(0);
+        }
+        else if (currentPageIndex >= result.length) {
+            // Current index is out of bounds - reset to 0
+            currentPageIndex = 0;
+            outputs.currentIndex.set(0);
+        }
+        else {
+            // Valid data and valid current index
+            outputs.currentIndex.set(currentPageIndex);
+            // Navigate carousel to match the current index
+            if (carousel) {
+                carousel.goTo(currentPageIndex);
+            }
+        }
+    }
+}
+// Watch for changes and call update function (like working components)
+$effect.pre(() => {
+    currentPageIndex != undefined && untrack(() => handleIndexChange());
+});
+$componentControl[id] = {
+    setSelectedIndex: (index) => {
+        if (Array.isArray(result) && index >= 0 && index < result.length) {
+            currentPageIndex = index;
+        }
+    }
+};
 </script>
 
 {#each Object.keys(components['carousellistcomponent'].initialData.configuration) as key (key)}

package/package/components/apps/editor/appUtils.js

@@ -923,6 +923,7 @@ export function isContainer(type) {
         type === 'horizontalsplitpanescomponent' ||
         type === 'steppercomponent' ||
         type === 'listcomponent' ||
+        type === 'carousellistcomponent' ||
         type === 'decisiontreecomponent');
 }
 export function subGridIndexKey(type, id, world) {
@@ -938,6 +939,9 @@ export function subGridIndexKey(type, id, world) {
         case 'steppercomponent': {
             return world?.outputsById?.[id]?.currentStepIndex?.peak() ?? 0;
         }
+        case 'carousellistcomponent': {
+            return world?.outputsById?.[id]?.currentIndex?.peak() ?? 0;
+        }
         case 'decisiontreecomponent': {
             return world?.outputsById?.[id]?.currentNodeIndex?.peak() ?? 0;
         }

package/package/components/apps/editor/componentsPanel/componentControlUtils.js

@@ -25,7 +25,7 @@ const setValue = {
 };
 const setSelectedIndex = {
     title: 'setSelectedIndex',
-    description: 'Use the setSelectedIndex function to select a row in a table or an AG Grid table.',
+    description: 'Use the setSelectedIndex function to select a row in a table, an AG Grid table, or navigate to a slide in a Carousel component.',
     example: 'setSelectedIndex(id: string, index: number)',
     documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#setselectedindex'
 };
@@ -70,6 +70,8 @@ export function getComponentControl(type) {
             return [setTab, setValue, setSelectedIndex];
         case 'selecttabcomponent':
             return [setTab, setValue, setSelectedIndex];
+        case 'carousellistcomponent':
+            return [setSelectedIndex];
         case 'conditionalwrapper':
         case 'steppercomponent':
             return [setTab];

package/package/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte

@@ -8,7 +8,6 @@ import ConfirmationModal from '../../../common/confirmationModal/ConfirmationMod
 import { createChartjsComponentDataset, createPlotlyComponentDataset } from '../appUtils';
 let { component = $bindable(), children } = $props();
 let convertToUIEditorCallback = $state(undefined);
-console.log('FOOBAR', component.type);
 let selected = $state((component.type === 'plotlycomponentv2' || component.type === 'chartjscomponentv2') &&
     component.datasets !== undefined
     ? 'ui-editor'

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -45,6 +45,7 @@ $effect.pre(() => {
     }
 });
 async function loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope) {
+    console.log("loading logs");
     loading = true;
     if (username == 'all') {
         username = undefined;
@@ -73,6 +74,7 @@ async function loadLogs(username, page, perPage, before, after, operation, resou
     });
     hasMore = logs.length > 0 && logs.length === perPage;
     loading = false;
+    console.log("loadede logs");
 }
 async function loadUsers() {
     usernames =
@@ -283,24 +285,32 @@ $effect(() => {
 		<span class="text-xs absolute -top-4">After</span>
 		<input type="text" value={after ?? 'After'} disabled />
 		<CalendarPicker
+			clearable
 			date={after}
 			placement="bottom-end"
 			label="After"
-			on:change={async ({ detail }) => {
+			on:change={({ detail }) => {
 				after = new Date(detail).toISOString()
 			}}
+			on:clear={() => {
+				after = undefined
+			}}
 		/>
 	</div>
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute -top-4">Before</span>
 		<input type="text" value={before ?? 'Before'} disabled />
 		<CalendarPicker
+			clearable
 			bind:date={before}
 			label="Before"
 			placement="bottom-end"
-			on:change={async ({ detail }) => {
+			on:change={({ detail }) => {
 				before = new Date(detail).toISOString()
 			}}
+			on:clear={() => {
+				before = undefined
+			}}
 		/>
 	</div>
 

package/package/components/auditLogs/AuditLogsTable.svelte

@@ -1,21 +1,11 @@
 <script lang="ts">import Badge from '../common/badge/Badge.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 { displayDate } from '../../utils';
-import { createEventDispatcher } from 'svelte';
+import { onMount, tick } from 'svelte';
 import Button from '../common/button/Button.svelte';
-import { ListFilter } from 'lucide-svelte';
-export let logs = [];
-export let pageIndex = 1;
-export let perPage = 100;
-export let hasMore = true;
-export let actionKind = undefined;
-export let operation = undefined;
-export let selectedId = undefined;
-export let usernameFilter = undefined;
-export let resourceFilter = undefined;
+import { ListFilter, ChevronLeft, ChevronRight } from 'lucide-svelte';
+import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
+import { twMerge } from 'tailwind-merge';
+let { logs = [], pageIndex = $bindable(1), perPage = $bindable(100), hasMore = $bindable(true), actionKind = $bindable(), operation = $bindable(), selectedId = undefined, usernameFilter = $bindable(), resourceFilter = $bindable(), onselect } = $props();
 function groupLogsByDay(logs) {
     const groupedLogs = {};
     if (!logs)
@@ -34,8 +24,39 @@ function groupLogsByDay(logs) {
     }
     return groupedLogs;
 }
-const dispatch = createEventDispatcher();
-$: groupedLogs = groupLogsByDay(logs);
+function flattenLogs(groupedLogs) {
+    const flatLogs = [];
+    for (const [date, logsByDay] of Object.entries(groupedLogs)) {
+        flatLogs.push({ type: 'date', date });
+        for (const log of logsByDay) {
+            flatLogs.push({ type: 'log', log });
+        }
+    }
+    return flatLogs;
+}
+let tableHeight = $state(0);
+let headerHeight = $state(0);
+let footerHeight = $state(48);
+function computeHeight() {
+    tableHeight =
+        document.querySelector('#audit-logs-table-wrapper').parentElement?.clientHeight ?? 0;
+}
+onMount(() => {
+    tick().then(computeHeight);
+});
+let groupedLogs = $derived(groupLogsByDay(logs));
+let flatLogs = $derived(groupedLogs ? flattenLogs(groupedLogs) : undefined);
+let stickyIndices = $derived.by(() => {
+    const nstickyIndices = [];
+    let index = 0;
+    for (const entry of flatLogs ?? []) {
+        if (entry.type === 'date') {
+            nstickyIndices.push(index);
+        }
+        index++;
+    }
+    return nstickyIndices;
+});
 function kindToBadgeColor(kind) {
     if (kind == 'Execute') {
         return 'blue';
@@ -53,118 +74,178 @@ function kindToBadgeColor(kind) {
 }
 </script>
 
-<DataTable
-	on:next={() => {
-		pageIndex = (pageIndex ?? 1) + 1
-	}}
-	on:previous={() => {
-		pageIndex = (pageIndex ?? 1) - 1
-	}}
-	currentPage={pageIndex}
-	paginated
-	rounded={false}
-	size="sm"
-	{hasMore}
-	bind:perPage
+<svelte:window onresize={() => computeHeight()} />
+
+<div
+	class="divide-y min-w-[640px] h-full"
+	id="audit-logs-table-wrapper"
 >
-	<Head>
-		<Cell first head>ID</Cell>
-		<Cell head>Timestamp</Cell>
-		<Cell head>Username</Cell>
-		<Cell head>Operation</Cell>
-		<Cell head last>Resource</Cell>
-	</Head>
-	{#if logs?.length > 0}
-		<tbody class="divide-y">
-			{#each Object.entries(groupedLogs) as [date, logsByDay]}
-				<tr class="border-t">
-					<Cell
-						first
-						colspan="6"
-						scope="colgroup"
-						class="bg-surface-secondary/30 py-2 border-b font-semibold"
-					>
-						{date}
-					</Cell>
-				</tr>
-				{#each logsByDay as { id, timestamp, username, operation: op, action_kind, resource, parameters }}
-					<Row
-						hoverable
-						selected={id === selectedId}
-						on:click={() => {
-							dispatch('select', id)
-						}}
-					>
-						<Cell first>
-							{id}
-						</Cell>
-						<Cell>
-							{displayDate(timestamp)}
-						</Cell>
-						<Cell>
-							<div class="flex flex-row gap-2 items-center">
-								<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-52">
-									{username}
-									{#if parameters && 'end_user' in parameters}
-										<span> ({parameters.end_user})</span>
-									{/if}
+
+	<div bind:clientHeight={headerHeight}>
+		<div
+			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-xs font-semibold"
+		>
+			<div class="w-1/12">ID</div>
+			<div class="w-3/12">Timestamp</div>
+			<div class="w-3/12">Username</div>
+			<div class="w-3/12">Operation</div>
+			<div class="w-2/12">Resource</div>
+		</div>
+	</div>
+	{#if logs?.length == 0}
+		<div class="text-xs text-secondary p-8"> No logs found for the selected filters. </div>
+	{:else}
+		<VirtualList
+			width="100%"
+			height={tableHeight - headerHeight - footerHeight}
+			itemCount={flatLogs?.length ?? 0}
+			itemSize={42}
+			overscanCount={20}
+			{stickyIndices}
+			scrollToAlignment="center"
+		>
+			{#snippet header()}{/snippet}
+			{#snippet children({ index, style })}
+				<div {style} class="w-full">
+					{#if flatLogs}
+						{@const logOrDate = flatLogs[index]}
+
+						{#if logOrDate}
+							{#if logOrDate?.type === 'date'}
+								<div class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-5">
+									{logOrDate.date}
 								</div>
-								<Button
-									color="light"
-									size="xs2"
-									iconOnly
-									startIcon={{ icon: ListFilter }}
-									on:click={() => {
-										usernameFilter = username
+							{:else}
+								<!-- svelte-ignore a11y_click_events_have_key_events -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<div
+									class={twMerge(
+										'flex flex-row items-center h-full w-full px-2 py-1 hover:bg-surface-hover cursor-pointer',
+										logOrDate.log.id === selectedId ? 'bg-blue-50 dark:bg-blue-900/50' : ''
+									)}
+									role="button"
+									tabindex="0"
+									onclick={() => {
+										onselect?.(logOrDate.log.id)
 									}}
-								/>
-							</div>
-						</Cell>
-						<Cell>
-							<div class="flex flex-row gap-1">
-								<Badge
-									on:click={() => {
-										actionKind = action_kind.toLocaleLowerCase()
-									}}
-									color={kindToBadgeColor(action_kind)}>{action_kind}</Badge
 								>
-								<Badge
-									on:click={() => {
-										operation = op
-									}}
-								>
-									{op}
-								</Badge>
-							</div>
-						</Cell>
-						<Cell last>
-							<div class="flex flex-row gap-2 items-center">
-								<div class="whitespace-nowrap overflow-x-auto no-scrollbar w-48">
-									{resource}
+									<div class="w-1/12 text-xs truncate">
+										{logOrDate.log.id}
+									</div>
+									<div class="w-3/12 text-xs">
+										{displayDate(logOrDate.log.timestamp)}
+									</div>
+									<div class="w-3/12 text-xs">
+										<div class="flex flex-row gap-2 items-center">
+											<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-60">
+												{logOrDate.log.username}
+												{#if logOrDate.log.parameters && 'end_user' in logOrDate.log.parameters}
+													<span> ({logOrDate.log.parameters.end_user})</span>
+												{/if}
+											</div>
+											<Button
+												color="light"
+												size="xs2"
+												iconOnly
+												startIcon={{ icon: ListFilter }}
+												on:click={() => {
+													usernameFilter = logOrDate.log.username
+												}}
+											/>
+										</div>
+									</div>
+									<div class="w-3/12 text-xs">
+										<div class="flex flex-row gap-1">
+											<Badge
+												on:click={() => {
+													actionKind = logOrDate.log.action_kind.toLocaleLowerCase()
+												}}
+												color={kindToBadgeColor(logOrDate.log.action_kind)}
+											>
+												{logOrDate.log.action_kind}
+											</Badge>
+											<Badge
+												on:click={() => {
+													operation = logOrDate.log.operation
+												}}
+											>
+												{logOrDate.log.operation}
+											</Badge>
+										</div>
+									</div>
+									<div class="w-2/12 text-xs">
+										<div class="flex flex-row gap-2 items-center">
+											<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-60">
+												{logOrDate.log.resource}
+											</div>
+											<Button
+												color="light"
+												size="xs2"
+												iconOnly
+												startIcon={{ icon: ListFilter }}
+												on:click={() => {
+													resourceFilter = logOrDate.log.resource
+												}}
+											/>
+										</div>
+									</div>
 								</div>
-								<Button
-									color="light"
-									size="xs2"
-									iconOnly
-									startIcon={{ icon: ListFilter }}
-									on:click={() => {
-										resourceFilter = resource
-									}}
-								/>
+							{/if}
+						{:else}
+							<div class="flex flex-row items-center h-full w-full px-2">
+								<div class="text-xs text-secondary">Loading...</div>
 							</div>
-						</Cell>
-					</Row>
-				{/each}
-			{/each}
-		</tbody>
-	{:else}
-		<tr>
-			<td colspan="4" class="text-center py-8">
-				<div class="text-xs text-secondary"> No logs found for the selected filters. </div>
-			</td>
-		</tr>
+						{/if}
+					{:else}
+						<div class="flex flex-row items-center h-full w-full px-2">
+							<div class="text-xs text-secondary">Loading...</div>
+						</div>
+					{/if}
+				</div>
+			{/snippet}
+			{#snippet footer()}{/snippet}
+		</VirtualList>
 	{/if}
-</DataTable>
+	<!-- Pagination footer - always visible -->
+	<div class="flex flex-row justify-between items-center p-2 bg-surface-primary border-t">
+		<div class="flex flex-row gap-2 items-center">
+			<Button
+				color="light"
+				size="xs2"
+				startIcon={{ icon: ChevronLeft }}
+				on:click={() => {
+					pageIndex = (pageIndex ?? 1) - 1
+				}}
+				disabled={pageIndex <= 1}
+			>
+				Previous
+			</Button>
+			<span class="text-xs text-secondary px-2">Page {pageIndex}</span>
+			<Button
+				color="light"
+				size="xs2"
+				endIcon={{ icon: ChevronRight }}
+				on:click={() => {
+					pageIndex = (pageIndex ?? 1) + 1
+				}}
+				disabled={!hasMore}
+			>
+				Next
+			</Button>
+		</div>
+		<div class="flex flex-row gap-2 items-center">
+			<span class="text-xs text-secondary">Per page:</span>
+			<select
+				bind:value={perPage}
+				class="text-xs bg-transparent border border-gray-300 dark:border-gray-600 rounded px-2 py-1"
+			>
+				<option value={25}>25</option>
+				<option value={100}>100</option>
+				<option value={1000}>1000</option>
+			</select>
+		</div>
+	</div>
+</div>
 
 <style>
 	/* Hide scrollbar for Chrome, Safari and Opera */
@@ -176,4 +257,10 @@ function kindToBadgeColor(kind) {
 	.no-scrollbar {
 		-ms-overflow-style: none; /* IE and Edge */
 		scrollbar-width: none; /* Firefox */
+	}
+
+	/* VirtualList scrollbar styling */
+	:global(.virtual-list-wrapper:hover::-webkit-scrollbar) {
+		width: 8px !important;
+		height: 8px !important;
 	}</style>

package/package/components/auditLogs/AuditLogsTable.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { AuditLog } from '../../gen';
-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;
-}
-declare const AuditLogsTable: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     logs?: AuditLog[];
     pageIndex?: number | undefined;
     perPage?: number | undefined;
@@ -22,10 +9,8 @@ declare const AuditLogsTable: $$__sveltets_2_IsomorphicComponent<{
     selectedId?: number | undefined;
     usernameFilter?: string | undefined;
     resourceFilter?: string | undefined;
-}, {
-    select: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AuditLogsTable = InstanceType<typeof AuditLogsTable>;
+    onselect?: (id: number) => void;
+}
+declare const AuditLogsTable: import("svelte").Component<Props, {}, "operation" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "usernameFilter" | "resourceFilter">;
+type AuditLogsTable = ReturnType<typeof AuditLogsTable>;
 export default AuditLogsTable;