windmill-components 1.558.4 → 1.596.0

package/package/components/RepositorySelector.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Repository {
+    name: string;
+    url: string;
+}
+interface Props {
+    disabled?: boolean;
+    selectedRepository?: string | undefined;
+    accountId: string;
+    initialRepositories: Repository[];
+    totalCount: number;
+    perPage: number;
+    containerClass?: string;
+    minWidth?: string;
+    onError?: (error: Error) => void;
+}
+declare const RepositorySelector: import("svelte").Component<Props, {}, "selectedRepository">;
+type RepositorySelector = ReturnType<typeof RepositorySelector>;
+export default RepositorySelector;

package/package/components/Required.svelte

@@ -5,7 +5,7 @@ export let detail = '';
 {#if required}
 	<span class="text-red-500 dark:text-red-400 text-sm font-normal {$$props.class}">*</span>
 {:else if detail || detail != ''}
-	<span class="text-sm text-tertiary ml-2 font-normal {$$props.class}"
+	<span class="text-sm text-primary ml-2 font-normal {$$props.class}"
 		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}

package/package/components/ResourceEditor.svelte

@@ -166,7 +166,7 @@ run(() => {
 </script>
 
 <div>
-	<div class="flex flex-col gap-3 py-3">
+	<div class="flex flex-col gap-6 py-2">
 		{#if !hidePath}
 			<div>
 				{#if !can_write}
@@ -187,113 +187,122 @@ run(() => {
 		{/if}
 
 		{#if !emptyString(resourceTypeInfo?.description)}
-			<h4 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h4>
-			<div class="text-sm">
-				<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+			<div class="flex flex-col gap-1">
+				<h4 class="text-xs text-emphasis font-semibold">{resourceTypeInfo?.name} description</h4>
+				<div class="text-xs text-primary font-normal">
+					<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+				</div>
 			</div>
 		{/if}
-		<h4 class="mt-4 inline-flex items-center gap-4"
-			>Resource description <Required required={false} />
-			{#if can_write}
-				<Button
-					size="xs2"
-					variant="contained"
-					color="light"
-					btnClasses={editDescription ? 'bg-surface-hover' : ''}
-					startIcon={{ icon: Pen }}
-					on:click={() => (editDescription = !editDescription)}
-				/>
-			{/if}</h4
-		>
-		{#if can_write && editDescription}
-			<div>
-				<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
-				<textarea
-					disabled={!can_write}
-					use:autosize
-					bind:value={description}
-					placeholder={DESCRIPTION_PLACEHOLDER}
-				></textarea>
-			</div>
-		{:else if description == undefined || description == ''}
-			<div class="text-sm text-tertiary">No description provided</div>
-		{:else}
-			<div class="mt-2"></div>
 
-			<GfmMarkdown md={description} />
-		{/if}
-		<div class="w-full flex gap-4 flex-row-reverse items-center mt-4">
-			<Toggle
-				on:change={(e) => switchTab(e.detail)}
-				options={{
-					right: 'As JSON'
-				}}
-			/>
-			{#if resourceToEdit?.resource_type === 'nats' || resourceToEdit?.resource_type === 'kafka'}
-				<TestTriggerConnection kind={resourceToEdit?.resource_type} args={{ connection: args }} />
+		<div class="flex flex-col gap-1">
+			<h4 class="inline-flex items-center gap-2 text-xs text-emphasis font-semibold"
+				>Resource description <Required required={false} />
+				{#if can_write}
+					<Button
+						variant="subtle"
+						unifiedSize="sm"
+						btnClasses={editDescription ? 'bg-surface-hover' : ''}
+						startIcon={{ icon: Pen }}
+						on:click={() => (editDescription = !editDescription)}
+					/>
+				{/if}
+			</h4>
+			{#if can_write && editDescription}
+				<div>
+					<div class="flex flex-row-reverse text-2xs text-primary -mt-1">GH Markdown</div>
+					<textarea
+						class="text-xs text-primary font-normal"
+						disabled={!can_write}
+						use:autosize
+						bind:value={description}
+						placeholder={DESCRIPTION_PLACEHOLDER}
+					></textarea>
+				</div>
+			{:else if description == undefined || description == ''}
+				<div class="text-xs text-secondary font-normal">No description provided</div>
 			{:else}
-				<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
+				<div class="text-xs text-primary font-normal">
+					<GfmMarkdown md={description} />
+				</div>
 			{/if}
-			{#if resource_type === 'git_repository' && $workspaceStore && ($userStore?.is_admin || $userStore?.is_super_admin)}
-				<GitHubAppIntegration
-					resourceType={resource_type}
-					{args}
-					{description}
-					onArgsUpdate={(newArgs) => {
-						args = newArgs
-						// Update rawCode if in JSON view mode
-						if (viewJsonSchema) {
-							rawCode = JSON.stringify(args, null, 2)
-						}
+		</div>
+
+		<div class="flex flex-col gap-1">
+			<div class="w-full flex gap-4 flex-row-reverse items-center">
+				<Toggle
+					on:change={(e) => switchTab(e.detail)}
+					options={{
+						right: 'As JSON'
 					}}
-					onDescriptionUpdate={(newDescription) => (description = newDescription)}
 				/>
-			{/if}
-		</div>
-		<div>
-			{#if loadingSchema}
-				<Skeleton layout={[[4]]} />
-			{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
-				{#if resourceTypeInfo?.format_extension}
-					<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
-						File content ({resourceTypeInfo.format_extension})
-					</h5>
-					<div class="">
-						<SimpleEditor
-							autoHeight
-							lang={resourceTypeInfo.format_extension}
-							bind:code={textFileContent}
-							fixedOverflowWidgets={false}
-						/>
-					</div>
+				{#if resourceToEdit?.resource_type === 'nats' || resourceToEdit?.resource_type === 'kafka'}
+					<TestTriggerConnection kind={resourceToEdit?.resource_type} args={{ connection: args }} />
 				{:else}
-					<SchemaForm
-						onlyMaskPassword
-						noDelete
-						disabled={!can_write}
-						compact
-						schema={resourceSchema}
-						bind:args
-						bind:isValid
-					/>
+					<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
 				{/if}
-			{:else if !can_write}
-				<input type="text" disabled value={rawCode} />
-			{:else}
-				{#if !viewJsonSchema}
-					<p class="italic text-secondary text-xs mb-4">
-						No corresponding resource type found in your workspace for {resource_type}. Define the
-						value in JSON directly
-					</p>
+				{#if resource_type === 'git_repository' && $workspaceStore && ($userStore?.is_admin || $userStore?.is_super_admin)}
+					<GitHubAppIntegration
+						resourceType={resource_type}
+						{args}
+						{description}
+						onArgsUpdate={(newArgs) => {
+							args = newArgs
+							// Update rawCode if in JSON view mode
+							if (viewJsonSchema) {
+								rawCode = JSON.stringify(args, null, 2)
+							}
+						}}
+						onDescriptionUpdate={(newDescription) => (description = newDescription)}
+					/>
 				{/if}
+			</div>
 
-				{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
-						>{jsonError}</span
-					>{:else}<div class="py-2"></div>{/if}
-				<div class="bg-surface-secondary rounded-md border py-2.5">
-					<SimpleEditor autoHeight lang="json" bind:code={rawCode} />
-				</div>
-			{/if}
+			<div>
+				{#if loadingSchema}
+					<Skeleton layout={[[4]]} />
+				{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
+					{#if resourceTypeInfo?.format_extension}
+						<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
+							File content ({resourceTypeInfo.format_extension})
+						</h5>
+						<div class="">
+							<SimpleEditor
+								autoHeight
+								lang={resourceTypeInfo.format_extension}
+								bind:code={textFileContent}
+								fixedOverflowWidgets={false}
+							/>
+						</div>
+					{:else}
+						<SchemaForm
+							onlyMaskPassword
+							noDelete
+							disabled={!can_write}
+							compact
+							schema={resourceSchema}
+							bind:args
+							bind:isValid
+						/>
+					{/if}
+				{:else if !can_write}
+					<input type="text" disabled value={rawCode} />
+				{:else}
+					{#if !viewJsonSchema}
+						<p class="italic text-secondary text-xs mb-4">
+							No corresponding resource type found in your workspace for {resource_type}. Define the
+							value in JSON directly
+						</p>
+					{/if}
+
+					{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
+							>{jsonError}</span
+						>{:else}<div class="py-2"></div>{/if}
+					<div class="bg-surface-tertiary rounded-md border py-2.5">
+						<SimpleEditor autoHeight lang="json" bind:code={rawCode} />
+					</div>
+				{/if}
+			</div>
 		</div>
 	</div>
 </div>

package/package/components/ResourceEditorDrawer.svelte

@@ -27,7 +27,7 @@ $: path ? (mode = 'edit') : (mode = 'new');
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
-		title={mode == 'edit' ? 'Edit ' + path : 'Add a resourcee'}
+		title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
 		on:close={drawer.closeDrawer}
 	>
 		{#await import('./ResourceEditor.svelte')}
@@ -45,6 +45,8 @@ $: path ? (mode = 'edit') : (mode = 'new');
 		{/await}
 		{#snippet actions()}
 			<Button
+				variant="accent"
+				unifiedSize="md"
 				startIcon={{ icon: Save }}
 				on:click={() => {
 					if (mode == 'edit') {

package/package/components/ResourcePicker.svelte

@@ -9,7 +9,6 @@ import { sendUserToast } from '../toast';
 import Select from './select/Select.svelte';
 import DbManagerDrawer from './DBManagerDrawer.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
-import { twMerge } from 'tailwind-merge';
 import DropdownV2 from './DropdownV2.svelte';
 let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined } = $props();
 if (initialValue && value == undefined) {
@@ -102,6 +101,7 @@ $effect(() => {
 let appConnect = $state();
 let resourceEditor = $state();
 let dbManagerDrawer = $state();
+let hovering = $state(false);
 </script>
 
 <AppConnect
@@ -125,8 +125,13 @@ let dbManagerDrawer = $state();
 	}}
 />
 <!-- {JSON.stringify({ value, collection })} -->
-<div class="flex flex-col w-full items-start min-h-10 {className}">
-	<div class="flex flex-row w-full items-center">
+<div class="flex flex-col w-full items-start {className}">
+	<div
+		class="flex flex-row w-full items-center relative"
+		role="group"
+		onmouseenter={() => (hovering = true)}
+		onmouseleave={() => (hovering = false)}
+	>
 		<Select
 			{disabled}
 			{disablePortal}
@@ -146,19 +151,17 @@ let dbManagerDrawer = $state();
 			items={collection}
 			clearable
 			class="text-clip grow min-w-0"
-			inputClass={twMerge('min-h-10', selectInputClass)}
+			inputClass={selectInputClass}
 			placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
 			itemLabelWrapperClasses="flex-1"
-			itemButtonWrapperClasses="flex"
 		>
 			{#snippet endSnippet({ item, close })}
 				<Button
 					{disabled}
-					color="light"
-					variant="contained"
-					size="xs3"
-					btnClasses="w-8 px-0.5 py-1.5 bg-transparent hover:bg-surface-secondary"
-					wrapperClasses="-mr-2 pl-1"
+					variant="subtle"
+					size="xs2"
+					wrapperClasses="-mr-2 pl-1 -my-2"
+					btnClasses="hover:bg-surface-tertiary"
 					on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
 					startIcon={{ icon: Pen }}
 					iconOnly
@@ -217,6 +220,19 @@ let dbManagerDrawer = $state();
 				</div>
 			{/snippet}
 		</Select>
+		{#if value && hovering}
+			<div class="absolute {disabled ? 'right-2' : 'right-10'} z-20">
+				<Button
+					variant="subtle"
+					size="xs2"
+					wrapperClasses="pl-1"
+					btnClasses="hover:bg-surface-tertiary"
+					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					startIcon={{ icon: Pen }}
+					iconOnly
+				/>
+			</div>
+		{/if}
 	</div>
 	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'resource', path: value }, { resource_type: resourceType })}
 		<ExploreAssetButton

package/package/components/ResourceTypePicker.svelte

@@ -33,7 +33,7 @@ let filteredResources = $derived(resources.filter((r) => r.toLowerCase().include
 		<Tooltip light small>Select a resource type to narrow down the object type.</Tooltip>
 
 		<div class="flex flex-row items-center w-full justify-between">
-			<Badge color={!value ? 'gray' : 'blue'}>
+			<Badge selected={!!value}>
 				{value ?? 'None'}
 			</Badge>
 		</div>
@@ -50,9 +50,8 @@ let filteredResources = $derived(resources.filter((r) => r.toLowerCase().include
 					{@const isPicked = value === undefined}
 					<Button
 						size="sm"
-						variant="border"
-						color={isPicked ? 'blue' : 'light'}
-						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						variant="default"
+						selected={isPicked}
 						disabled={notPickable}
 						on:click={() => {
 							onClick(undefined)
@@ -66,9 +65,8 @@ let filteredResources = $derived(resources.filter((r) => r.toLowerCase().include
 					{@const isPicked = value === r}
 					<Button
 						size="sm"
-						variant="border"
-						color={isPicked ? 'blue' : 'light'}
-						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						variant="default"
+						selected={isPicked}
 						disabled={notPickable}
 						on:click={() => {
 							onClick(r)
@@ -80,7 +78,7 @@ let filteredResources = $derived(resources.filter((r) => r.toLowerCase().include
 				{/each}
 
 				{#if filteredResources.length === 0 && search !== ''}
-					<div class="text-tertiary text-sm">No resources found</div>
+					<div class="text-primary text-sm">No resources found</div>
 				{/if}
 			</div>
 		</div>

package/package/components/RunButton.svelte

@@ -10,7 +10,7 @@ export let onCancel;
 	<Button
 		loading={isLoading}
 		size="sm"
-		color="dark"
+		variant="accent"
 		btnClasses="!px-2 !py-1"
 		on:click={() => onRun()}
 		shortCut={{ Icon: CornerDownLeft, hide: hideShortcut }}
@@ -20,8 +20,8 @@ export let onCancel;
 {:else}
 	<Button
 		size="sm"
-		color="red"
-		variant="border"
+		variant="accent"
+		destructive
 		btnClasses="!px-2 !py-1"
 		on:click={() => onCancel()}
 	>

package/package/components/RunChart.svelte

@@ -6,7 +6,7 @@ import { getDbClockNow } from '../forLater';
 import Button from './common/button/Button.svelte';
 import { Scatter } from './chartjs-wrappers/chartJs';
 import DarkModeObserver from './DarkModeObserver.svelte';
-let { jobs = [], maxIsNow = false, minTimeSet = undefined, maxTimeSet = undefined, selectedIds = $bindable([]), canSelect = true, lastFetchWentToEnd = false, onPointClicked, onLoadExtra, onZoom } = $props();
+let { jobs = [], maxIsNow = false, minTimeSet = undefined, maxTimeSet = undefined, selectedIds = $bindable([]), canSelect = true, lastFetchWentToEnd = false, totalRowsFetched, onPointClicked, onLoadExtra, onZoom } = $props();
 const SUCCESS_COLOR = '#4ade80';
 // const SUCCESS_COLOR_TRANSPARENT = '#c9b638'
 const SUCCESS_COLOR_TRANSPARENT = $derived(mergeColors(SUCCESS_COLOR, getBackgroundColor(), 0.8));
@@ -73,10 +73,10 @@ function getPath(x) {
     return x.path;
 }
 function minJobTime(jobs) {
-    let min = new Date(jobs[0].started_at);
+    let min = new Date(jobs[0].completed_at);
     for (const job of jobs) {
-        if (job.started_at != undefined) {
-            const date = new Date(job.started_at);
+        if (job.completed_at != undefined) {
+            const date = new Date(job.completed_at);
             if (date < min) {
                 min = date;
             }
@@ -85,10 +85,10 @@ function minJobTime(jobs) {
     return min;
 }
 function maxJobTime(jobs) {
-    let max = new Date(jobs[0].started_at);
+    let max = new Date(jobs[0].completed_at);
     for (const job of jobs) {
-        if (new Date(job.started_at) > max) {
-            max = new Date(job.started_at);
+        if (new Date(job.completed_at) > max) {
+            max = new Date(job.completed_at);
         }
     }
     return max;
@@ -217,13 +217,14 @@ let scatterOptions = $derived({
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-28px] left-[180px]"
-			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
-				>Load more <Tooltip2
-					>There are more jobs to load but only the first 1000 were fetched</Tooltip2
-				></Button
-			></div
-		>
+		<div class="absolute top-[-28px] left-[220px]">
+			<Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}>
+				Load more
+				<Tooltip2>
+					There are more jobs to load but only the first {totalRowsFetched} were fetched
+				</Tooltip2>
+			</Button>
+		</div>
 	{/if}
 	<Scatter {data} options={scatterOptions} />
 </div>

package/package/components/RunChart.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     selectedIds?: string[];
     canSelect?: boolean;
     lastFetchWentToEnd?: boolean;
+    totalRowsFetched: number;
     onPointClicked: (ids: string[]) => void;
     onLoadExtra: () => void;
     onZoom: (zoom: {

package/package/components/RunForm.svelte

@@ -121,7 +121,7 @@ $effect(() => {
 						{/if}
 
 						<div class="flex items-center gap-2">
-							<span class="text-sm text-tertiary">
+							<span class="text-sm text-primary">
 								{#if runnable}
 									Edited <TimeAgo agoOnlyIfRecent date={runnable.created_at || ''} /> by {runnable.created_by ||
 										'unknown'}
@@ -205,7 +205,7 @@ $effect(() => {
 			{/key}
 		{/if}
 	{:else}
-		<div class="text-xs text-tertiary">No arguments</div>
+		<div class="text-xs text-primary">No arguments</div>
 	{/if}
 	{#if schedulable}
 		<div class="mt-10"></div>
@@ -213,7 +213,7 @@ $effect(() => {
 			<div class="flex-row-reverse flex-wrap flex w-full gap-4">
 				<Button
 					{loading}
-					color="dark"
+					variant="accent"
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
 					disabled={!isValid && !jsonView}
 					on:click={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}

package/package/components/RunFormAdvancedPopup.svelte

@@ -36,8 +36,7 @@ async function loadWorkerGroups() {
 						/>
 					</div>
 					<Button
-						variant="border"
-						color="light"
+						variant="default"
 						size="xs"
 						btnClasses="mx-2 "
 						on:click={() => {

package/package/components/RunPageTutorials.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import { skipAllTodos } from '../tutorialUtils';
+import TroubleshootFlowTutorial from './tutorials/TroubleshootFlowTutorial.svelte';
+import { getTutorialIndex } from '../tutorials/config';
+let troubleshootFlowTutorial = $state(undefined);
+export function runTutorialById(id) {
+    if (id === 'troubleshoot-flow') {
+        troubleshootFlowTutorial?.runTutorial();
+    }
+}
+function skipAll() {
+    skipAllTodos();
+}
+</script>
+
+<TroubleshootFlowTutorial
+	bind:this={troubleshootFlowTutorial}
+	index={getTutorialIndex('troubleshoot-flow')}
+	on:error
+	on:skipAll={skipAll}
+	on:reload
+/>

package/package/components/RunPageTutorials.svelte.d.ts

@@ -0,0 +1,23 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RunPageTutorials: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    error: CustomEvent<any>;
+    reload: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    runTutorialById: (id: string) => void;
+}, "">;
+type RunPageTutorials = InstanceType<typeof RunPageTutorials>;
+export default RunPageTutorials;