windmill-components 1.352.9 → 1.362.0

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -9,22 +9,31 @@ declare const __propDef: {
         flowJobIds?: {
             moduleId: string;
             flowJobs: string[];
+            flowJobsSuccess: (boolean | undefined)[];
             length: number;
         } | undefined;
-        job?: Job | undefined;
         innerModule?: FlowModuleValue | undefined;
         render?: boolean | undefined;
         isOwner?: boolean | undefined;
         selectedNode?: string | undefined;
         globalModuleStates: Writable<Record<string, GraphModuleState>>[];
         globalDurationStatuses: Writable<Record<string, DurationStatus>>[];
+        globalRefreshes?: Record<string, (loopJob: {
+            index: number;
+            job: string;
+        }) => Promise<void>> | undefined;
         childFlow?: boolean | undefined;
         reducedPolling?: boolean | undefined;
         wideResults?: boolean | undefined;
+        job?: Job | undefined;
+        refresh?: ((root: boolean, loopJob: {
+            index: number;
+            job: string;
+        } | undefined) => Promise<void>) | undefined;
     };
     events: {
-        start: CustomEvent<any>;
         jobsLoaded: CustomEvent<any>;
+        start: CustomEvent<any>;
         done: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -35,5 +44,9 @@ export type FlowStatusViewerInnerProps = typeof __propDef.props;
 export type FlowStatusViewerInnerEvents = typeof __propDef.events;
 export type FlowStatusViewerInnerSlots = typeof __propDef.slots;
 export default class FlowStatusViewerInner extends SvelteComponent<FlowStatusViewerInnerProps, FlowStatusViewerInnerEvents, FlowStatusViewerInnerSlots> {
+    get refresh(): (root: boolean, loopJob: {
+        index: number;
+        job: string;
+    } | undefined) => Promise<void>;
 }
 export {};

package/package/components/HighlightTheme.svelte

@@ -12,233 +12,231 @@
 	:global(code.hljs) {
 		padding: 3px 5px;
 	}
-
 	:global(.dark) :global(.hljs) {
-		background: #2e3440;
+		background: #2e3440 !important;
 	}
 	:global(.dark) :global(.hljs),
 	:global(.dark) :global(.hljs-subst) {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	:global(.dark) :global(.hljs-selector-tag) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.hljs-selector-id) {
-		color: #8fbcbb;
-		font-weight: bold;
+		color: #8fbcbb !important;
+		font-weight: bold !important;
 	}
 	:global(.dark) :global(.hljs-selector-class) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-selector-attr) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-property) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.hljs-selector-pseudo) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.hljs-addition) {
-		background-color: rgba(163, 190, 140, 0.5);
+		background-color: rgba(163, 190, 140, 0.5) !important;
 	}
 	:global(.dark) :global(.hljs-deletion) {
-		background-color: rgba(191, 97, 106, 0.5);
+		background-color: rgba(191, 97, 106, 0.5) !important;
 	}
 	:global(.dark) :global(.hljs-built_in),
 	:global(.dark) :global(.hljs-type) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-class) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-function) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.hljs-title.hljs-function),
 	:global(.dark) :global(.hljs-function) > :global(.hljs-title) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.hljs-keyword),
 	:global(.dark) :global(.hljs-literal),
 	:global(.dark) :global(.hljs-symbol) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.hljs-number) {
-		color: #b48ead;
+		color: #b48ead !important;
 	}
 	:global(.dark) :global(.hljs-regexp) {
-		color: #ebcb8b;
+		color: #ebcb8b !important;
 	}
 	:global(.dark) :global(.hljs-string) {
-		color: #a3be8c;
+		color: #a3be8c !important;
 	}
 	:global(.dark) :global(.hljs-title) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-params) {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	:global(.dark) :global(.hljs-bullet) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.hljs-code) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-emphasis) {
-		font-style: italic;
+		font-style: italic !important;
 	}
 	:global(.dark) :global(.hljs-formula) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-strong) {
-		font-weight: bold;
+		font-weight: bold !important;
 	}
 	:global(.dark) :global(.hljs-link:hover) {
-		-webkit-text-decoration: underline;
-		text-decoration: underline;
+		-webkit-text-decoration: underline !important;
+		text-decoration: underline !important;
 	}
 	:global(.dark) :global(.hljs-quote) {
-		color: #4c566a;
+		color: #4c566a !important;
 	}
 	:global(.dark) :global(.hljs-comment) {
-		color: #4c566a;
+		color: #4c566a !important;
 	}
 	:global(.dark) :global(.hljs-doctag) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-meta),
 	:global(.dark) :global(.hljs-meta) :global(.hljs-keyword) {
-		color: #5e81ac;
+		color: #5e81ac !important;
 	}
 	:global(.dark) :global(.hljs-meta) :global(.hljs-string) {
-		color: #a3be8c;
+		color: #a3be8c !important;
 	}
 	:global(.dark) :global(.hljs-attr) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.hljs-attribute) {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	:global(.dark) :global(.hljs-name) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.hljs-section) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.hljs-tag) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.hljs-variable) {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	:global(.dark) :global(.hljs-template-variable) {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	:global(.dark) :global(.hljs-template-tag) {
-		color: #5e81ac;
+		color: #5e81ac !important;
 	}
 	:global(.dark) :global(.language-abnf) :global(.hljs-attribute) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-abnf) :global(.hljs-symbol) {
-		color: #ebcb8b;
+		color: #ebcb8b !important;
 	}
 	:global(.dark) :global(.language-apache) :global(.hljs-attribute) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-apache) :global(.hljs-section) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.language-arduino) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-aspectj) :global(.hljs-meta) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	:global(.dark) :global(.language-aspectj) > :global(.hljs-title) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-bnf) :global(.hljs-attribute) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.language-clojure) :global(.hljs-name) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-clojure) :global(.hljs-symbol) {
-		color: #ebcb8b;
+		color: #ebcb8b !important;
 	}
 	:global(.dark) :global(.language-coq) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-cpp) :global(.hljs-meta) :global(.hljs-string) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.language-css) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-css) :global(.hljs-keyword) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	:global(.dark) :global(.language-diff) :global(.hljs-meta) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.language-ebnf) :global(.hljs-attribute) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.language-glsl) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-groovy) :global(.hljs-meta:not(:first-child)) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	:global(.dark) :global(.language-haxe) :global(.hljs-meta) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	:global(.dark) :global(.language-java) :global(.hljs-meta) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	:global(.dark) :global(.language-ldif) :global(.hljs-attribute) {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	:global(.dark) :global(.language-lisp) :global(.hljs-name) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-lua) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-moonscript) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-nginx) :global(.hljs-attribute) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-nginx) :global(.hljs-section) {
-		color: #5e81ac;
+		color: #5e81ac !important;
 	}
 	:global(.dark) :global(.language-pf) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-processing) :global(.hljs-built_in) {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	:global(.dark) :global(.language-scss) :global(.hljs-keyword) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.language-stylus) :global(.hljs-keyword) {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	:global(.dark) :global(.language-swift) :global(.hljs-meta) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	:global(.dark) :global(.language-vim) :global(.hljs-built_in) {
-		color: #88c0d0;
-		font-style: italic;
+		color: #88c0d0 !important;
+		font-style: italic !important;
 	}
 	:global(.dark) :global(.language-yaml) :global(.hljs-meta) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
-
 	:global(.hljs) {
 		color: #24292e;
 		background: #ffffff;

package/package/components/InputTransformForm.svelte

@@ -239,6 +239,7 @@ loadResourceTypes();
 												arg.value = undefined
 											}
 											arg.expr = undefined
+											arg.type = 'static'
 										}
 									} else {
 										if (arg) {
@@ -281,6 +282,7 @@ loadResourceTypes();
 						on:click={() => {
 							focusProp(argName, 'connect', (path) => {
 								connectProperty(path)
+								dispatch('change', { argName })
 								return true
 							})
 						}}

package/package/components/JobArgs.svelte

@@ -9,8 +9,11 @@ import Cell from './table/Cell.svelte';
 import Head from './table/Head.svelte';
 import Row from './table/Row.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
+import { deepEqual } from 'fast-equals';
+export let id = undefined;
 export let args;
 export let argLabel = undefined;
+export let workspace = undefined;
 let jsonViewer;
 let runLocally;
 let jsonStr = '';
@@ -43,48 +46,55 @@ ${Object.entries(args)
 }
 </script>
 
-<div class="relative">
-	<DataTable size="sm">
-		<Head>
-			<tr>
-				<Cell head first>{argLabel ?? 'Arg'}</Cell>
-				<Cell head last>Value</Cell>
-			</tr>
-			<svelte:fragment slot="headerAction">
-				<button
-					on:click={() => {
-						jsonStr = JSON.stringify(args, null, 4)
-						jsonViewer.openDrawer()
-					}}
-				>
-					<Expand size={18} />
-				</button>
-			</svelte:fragment>
-		</Head>
+{#if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
+	The args are too big in size to be able to fetch alongside job. Please <a
+		href="/api/w/{workspace}/jobs_u/get_args/{id}"
+		target="_blank">download the JSON file to view them</a
+	>.
+{:else}
+	<div class="relative">
+		<DataTable size="sm">
+			<Head>
+				<tr>
+					<Cell head first>{argLabel ?? 'Arg'}</Cell>
+					<Cell head last>Value</Cell>
+				</tr>
+				<svelte:fragment slot="headerAction">
+					<button
+						on:click={() => {
+							jsonStr = JSON.stringify(args, null, 4)
+							jsonViewer.openDrawer()
+						}}
+					>
+						<Expand size={18} />
+					</button>
+				</svelte:fragment>
+			</Head>
 
-		<tbody class="divide-y">
-			{#if args && Object.keys(args).length > 0}
-				{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
+			<tbody class="divide-y">
+				{#if args && Object.keys(args).length > 0}
+					{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
+						<Row>
+							<Cell first>{arg}</Cell>
+							<Cell last><ArgInfo {value} /></Cell>
+						</Row>
+					{/each}
+				{:else if args}
+					<Row><Cell>No arguments</Cell></Row>
+				{:else}
 					<Row>
-						<Cell first>{arg}</Cell>
-						<Cell last><ArgInfo {value} /></Cell>
+						<Cell first>
+							<Skeleton layout={[[1], 0.5, [1]]} />
+						</Cell>
+						<Cell last>
+							<Skeleton layout={[[1], 0.5, [1]]} />
+						</Cell>
 					</Row>
-				{/each}
-			{:else if args}
-				<Row><Cell>No arguments</Cell></Row>
-			{:else}
-				<Row>
-					<Cell first>
-						<Skeleton layout={[[1], 0.5, [1]]} />
-					</Cell>
-					<Cell last>
-						<Skeleton layout={[[1], 0.5, [1]]} />
-					</Cell>
-				</Row>
-			{/if}
-		</tbody>
-	</DataTable>
-</div>
+				{/if}
+			</tbody>
+		</DataTable>
+	</div>
+{/if}
 
 <HighlightTheme />
 
@@ -93,7 +103,9 @@ ${Object.entries(args)
 		<svelte:fragment slot="actions">
 			<Button
 				download="windmill-args.json"
-				href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
+				href={id && workspace
+					? `/api/w/${workspace}/jobs_u/get_args/${id}`
+					: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
 				startIcon={{ icon: Download }}
 				size="xs"
 				color="light"
@@ -117,14 +129,17 @@ ${Object.entries(args)
 				Copy to clipboard
 			</Button>
 		</svelte:fragment>
-		{#if jsonStr.length > 100000}
+		{#if jsonStr.length > 100000 || (id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG')}
 			<div class="text-sm mb-2 text-tertiary">
 				<a
 					download="windmill-args.json"
-					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+					href={id && workspace
+						? `/api/w/${workspace}/jobs_u/get_args/${id}`
+						: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
 				>
-				JSON is too large to be displayed in full.
-			</div>
+					JSON is too large to be displayed in full.
+				</a></div
+			>
 		{:else}
 			<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
 		{/if}

package/package/components/JobArgs.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string | undefined;
         args: any;
         argLabel?: string | undefined;
+        workspace?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/LightweightArgInput.svelte

@@ -18,6 +18,7 @@ import Multiselect from 'svelte-multiselect';
 import Password from './Password.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import FileUpload from './common/fileUpload/FileUpload.svelte';
 export let css = undefined;
 export let label = '';
 export let value;
@@ -347,6 +348,27 @@ function onRenderFalse() {
 							</span>
 						{/if}
 					</div>
+				{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
+						.replace('resource-', '')
+						.replace('_', '')
+						.toLowerCase() == 's3object'}
+					<div class="flex flex-col w-full gap-1">
+						<FileUpload
+							allowMultiple={false}
+							randomFileKey={true}
+							on:addition={(evt) => {
+								value = {
+									s3: evt.detail?.path ?? ''
+								}
+							}}
+							on:deletion={(evt) => {
+								value = {
+									s3: ''
+								}
+							}}
+							defaultValue={defaultValue?.s3}
+						/>
+					</div>
 				{:else if inputCat == 'resource-object'}
 					<LightweightObjectResourceInput {format} bind:value />
 				{:else if inputCat == 'object' && oneOf && oneOf.length >= 2}
@@ -433,7 +455,10 @@ function onRenderFalse() {
 							multiple={false}
 						/>
 						{#if value?.length}
-							<div class="text-2xs text-tertiary mt-1">File length: {value.length} base64 chars</div
+							<div class="text-2xs text-tertiary mt-1"
+								>File length: {value.length} base64 chars ({(value.length / 1024 / 1024).toFixed(
+									2
+								)}MB)</div
 							>
 						{/if}
 					</div>
@@ -472,7 +497,7 @@ function onRenderFalse() {
 								<Password bind:password={value} />
 							{:else}
 								<textarea
-									rows={extra?.['rows'] || 1}
+									rows={extra?.['minRows'] || 1}
 									bind:this={el}
 									on:focus={(e) => {
 										dispatch('focus')

package/package/components/Path.svelte

@@ -5,7 +5,7 @@ const lastMetaUsed = writable(undefined);
 <script>import { pathToMeta } from '../common';
 import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
 import { superadmin, userStore, workspaceStore } from '../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { Alert, Button, Drawer, DrawerContent } from './common';
 import Badge from './common/badge/Badge.svelte';
@@ -16,7 +16,6 @@ import { random_adj } from './random_positive_adjetive';
 import Required from './Required.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Eye, Folder, Plus, SearchCode, User } from 'lucide-svelte';
-import ContentSearch from './ContentSearch.svelte';
 let meta = undefined;
 export let fullNamePlaceholder = undefined;
 export let namePlaceholder = '';
@@ -233,13 +232,9 @@ async function addFolder() {
 function setDirty() {
     !dirty && (dirty = true);
 }
-let contentSearch;
+const openSearchWithPrefilledText = getContext("openSearchWithPrefilledText");
 </script>
 
-{#if kind != 'app' && kind != 'schedule' && initialPath != '' && initialPath != undefined}
-	<ContentSearch bind:this={contentSearch} />
-{/if}
-
 <Drawer bind:this={newFolder}>
 	<DrawerContent
 		title="New Folder"
@@ -432,7 +427,7 @@ let contentSearch;
 					variant="border"
 					color="dark"
 					on:click={() => {
-						contentSearch?.open(initialPath)
+						openSearchWithPrefilledText("#")
 					}}
 					startIcon={{ icon: SearchCode }}
 				>

package/package/components/Popover.svelte

@@ -68,7 +68,7 @@ function close() {
 			on:mouseleave={close}
 			class="z-[5001] py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left {popupClass}"
 		>
-			<div class="max-w-sm">
+			<div class="max-w-sm break-words">
 				<slot name="text" />
 				{#if documentationLink}
 					<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">

package/package/components/ResourceEditor.svelte

@@ -186,14 +186,15 @@ function switchTab(asJson) {
 
 			<GfmMarkdown md={description} />
 		{/if}
-		<div class="flex w-full justify-between max-w-lg items-center mt-4">
+		<div class="flex w-full justify-between items-center mt-4">
+			<div />
+			<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
 			<Toggle
 				on:change={(e) => switchTab(e.detail)}
 				options={{
 					right: 'As JSON'
 				}}
 			/>
-			<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
 		</div>
 		<div class="text-sm">
 			{#if loadingSchema}

package/package/components/ResourceEditorDrawer.svelte

@@ -7,12 +7,15 @@ let canSave = true;
 let resource_type = undefined;
 let resourceEditor = undefined;
 let path = undefined;
+let newResource = false;
 export async function initEdit(p) {
     resource_type = undefined;
+    newResource = false;
     path = p;
     drawer.openDrawer?.();
 }
 export async function initNew(resourceType) {
+    newResource = true;
     path = undefined;
     resource_type = resourceType;
     drawer.openDrawer?.();
@@ -22,7 +25,7 @@ export async function initNew(resourceType) {
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
 		<ResourceEditor
-			newResource
+			{newResource}
 			{path}
 			{resource_type}
 			on:refresh

package/package/components/ResourcePicker.svelte

@@ -111,6 +111,7 @@ let darkMode = false;
 
 		{#if value && value != ''}
 			<Button
+				color="light"
 				variant="border"
 				size="xs"
 				on:click={() => resourceEditor?.initEdit?.(value ?? '')}