windmill-components 1.309.7 → 1.339.2

package/package/components/SavedInputs.svelte

@@ -1,7 +1,7 @@
 <script>import { Button } from './common';
 import { InputService } from '../gen/index.js';
 import { userStore, workspaceStore } from '../stores.js';
-import { classNames, displayDate, sendUserToast } from '../utils.js';
+import { classNames, displayDate, displayDateOnly, sendUserToast } from '../utils.js';
 import { createEventDispatcher } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
@@ -10,6 +10,7 @@ import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import TimeAgo from './TimeAgo.svelte';
 import JobLoader from './runs/JobLoader.svelte';
+import Skeleton from './common/skeleton/Skeleton.svelte';
 export let scriptHash = null;
 export let scriptPath = null;
 export let flowPath = null;
@@ -17,8 +18,8 @@ export let canSaveInputs = true;
 // Are the current Inputs valid and able to be saved?
 export let isValid;
 export let args;
-let previousInputs = [];
-let savedInputs = [];
+let previousInputs = undefined;
+let savedInputs = undefined;
 let selectedInput;
 let jobs = [];
 let loading = false;
@@ -69,7 +70,7 @@ async function saveInput(args) {
             is_public: false,
             ...requestBody
         };
-        savedInputs = [input, ...savedInputs];
+        savedInputs = [input, ...(savedInputs ?? [])];
     }
     catch (err) {
         console.error(err);
@@ -101,7 +102,7 @@ async function deleteInput(input) {
             workspace: $workspaceStore,
             input: input.id
         });
-        savedInputs = savedInputs.filter((i) => i.id !== input.id);
+        savedInputs = (savedInputs ?? []).filter((i) => i.id !== input.id);
         if (selectedInput === input) {
             selectedInput = null;
         }
@@ -121,6 +122,19 @@ $: {
 function selectArgs(selected_args) {
     dispatch('selected_args', selected_args);
 }
+async function loadLargeArgs(id) {
+    if (!id)
+        return;
+    largeArgs = await InputService.getArgsFromHistoryOrSavedInput({
+        jobOrInputId: id,
+        workspace: $workspaceStore
+    });
+}
+let hasLargeArgs = false;
+$: hasLargeArgs =
+    typeof selectedInput?.args === 'string' && selectedInput?.args === 'WINDMILL_TOO_BIG';
+let largeArgs = undefined;
+$: hasLargeArgs && loadLargeArgs(selectedInput?.id);
 </script>
 
 <JobLoader
@@ -130,7 +144,9 @@ function selectArgs(selected_args) {
 	jobKindsCat="jobs"
 	jobKinds="all"
 	user={null}
+	label={null}
 	folder={null}
+	concurrencyKey={null}
 	success="running"
 	argFilter={undefined}
 	bind:loading
@@ -164,7 +180,9 @@ function selectArgs(selected_args) {
 				</div>
 
 				<div class="w-full flex flex-col gap-2 h-full overflow-y-auto p">
-					{#if savedInputs.length > 0}
+					{#if savedInputs === undefined}
+						<Skeleton layout={[[8]]} />
+					{:else if savedInputs.length > 0}
 						{#each savedInputs as i}
 							<button
 								class={classNames(
@@ -262,7 +280,9 @@ function selectArgs(selected_args) {
 				<span class="text-sm font-semibold">Previous runs</span>
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if jobs.length > 0}
+					{#if loading}
+						<Skeleton layout={[[2]]} />
+					{:else if jobs.length > 0}
 						{#each jobs as i (i.id)}
 							<button
 								class={classNames(
@@ -303,7 +323,9 @@ function selectArgs(selected_args) {
 				</div>
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if previousInputs.length > 0}
+					{#if previousInputs === undefined}
+						<Skeleton layout={[[8]]} />
+					{:else if previousInputs.length > 0}
 						{#each previousInputs as i (i.id)}
 							<button
 								class={classNames(
@@ -328,11 +350,16 @@ function selectArgs(selected_args) {
 										{i.created_by}
 									</div>
 									<div
-										class="whitespace-nowrap col-span-3 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+									>
+										{displayDateOnly(new Date(i.created_at))}
+									</div>
+									<div
+										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
 										<TimeAgo date={i.created_at ?? ''} />
 									</div>
-									<div class="col-span-2">
+									<div class="col-span-1">
 										<a
 											target="_blank"
 											href="/run/{i.id}?workspace={$workspaceStore}"
@@ -362,15 +389,24 @@ function selectArgs(selected_args) {
 							btnClasses="w-full"
 							size="sm"
 							spacingSize="xl"
-							on:click={() => selectArgs(selectedInput?.args)}
-							disabled={Object.keys(selectedInput?.args || {}).length === 0}
+							on:click={() => selectArgs(hasLargeArgs ? largeArgs : selectedInput?.args)}
+							disabled={Object.keys(selectedInput?.args || {}).length === 0 ||
+								(hasLargeArgs && Object.keys(largeArgs || {}).length === 0)}
 						>
 							<ArrowLeftIcon class="w-4 h-4 mr-2" />
 							Use Input
 						</Button>
 					</div>
 					<div class="w-full min-h-0 grow overflow-auto">
-						{#if Object.keys(selectedInput?.args || {}).length > 0}
+						{#if hasLargeArgs}
+							{#if largeArgs}
+								<div class=" overflow-auto h-full p-2">
+									<ObjectViewer json={largeArgs} />
+								</div>
+							{:else}
+								<Skeleton layout={[[8]]} />
+							{/if}
+						{:else if Object.keys(selectedInput?.args || {}).length > 0}
 							<div class=" overflow-auto h-full p-2">
 								<ObjectViewer json={selectedInput?.args} />
 							</div>