windmill-components 1.83.4 → 1.85.0

package/components/FlowBuilder.svelte

@@ -46,76 +46,82 @@ async function createSchedule(path) {
 let loadingSave = false;
 async function saveFlow(leave) {
     loadingSave = true;
-    const flow = cleanInputs($flowStore);
-    const { cron, args, enabled } = $scheduleStore;
-    $dirtyStore = false;
-    if (initialPath === '') {
-        localStorage.removeItem('flow');
-        await FlowService.createFlow({
-            workspace: $workspaceStore,
-            requestBody: {
-                path: flow.path,
-                summary: flow.summary,
-                description: flow.description ?? '',
-                value: flow.value,
-                schema: flow.schema
+    try {
+        const flow = cleanInputs($flowStore);
+        const { cron, args, enabled } = $scheduleStore;
+        $dirtyStore = false;
+        if (initialPath === '') {
+            localStorage.removeItem('flow');
+            await FlowService.createFlow({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema
+                }
+            });
+            if (enabled) {
+                await createSchedule(flow.path);
             }
-        });
-        if (enabled) {
-            await createSchedule(flow.path);
         }
-    }
-    else {
-        localStorage.removeItem(`flow-${initialPath}`);
-        await FlowService.updateFlow({
-            workspace: $workspaceStore,
-            path: initialPath,
-            requestBody: {
-                path: flow.path,
-                summary: flow.summary,
-                description: flow.description ?? '',
-                value: flow.value,
-                schema: flow.schema
-            }
-        });
-        const scheduleExists = await ScheduleService.existsSchedule({
-            workspace: $workspaceStore ?? '',
-            path: flow.path
-        });
-        if (scheduleExists) {
-            const schedule = await ScheduleService.getSchedule({
+        else {
+            localStorage.removeItem(`flow-${initialPath}`);
+            await FlowService.updateFlow({
+                workspace: $workspaceStore,
+                path: initialPath,
+                requestBody: {
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema
+                }
+            });
+            const scheduleExists = await ScheduleService.existsSchedule({
                 workspace: $workspaceStore ?? '',
                 path: flow.path
             });
-            if (JSON.stringify(schedule.args) != JSON.stringify(args) || schedule.schedule != cron) {
-                await ScheduleService.updateSchedule({
+            if (scheduleExists) {
+                const schedule = await ScheduleService.getSchedule({
                     workspace: $workspaceStore ?? '',
-                    path: flow.path,
-                    requestBody: {
-                        schedule: formatCron(cron),
-                        args
-                    }
+                    path: flow.path
                 });
+                if (JSON.stringify(schedule.args) != JSON.stringify(args) || schedule.schedule != cron) {
+                    await ScheduleService.updateSchedule({
+                        workspace: $workspaceStore ?? '',
+                        path: flow.path,
+                        requestBody: {
+                            schedule: formatCron(cron),
+                            args
+                        }
+                    });
+                }
+                if (enabled != schedule.enabled) {
+                    await ScheduleService.setScheduleEnabled({
+                        workspace: $workspaceStore ?? '',
+                        path: flow.path,
+                        requestBody: { enabled }
+                    });
+                }
             }
-            if (enabled != schedule.enabled) {
-                await ScheduleService.setScheduleEnabled({
-                    workspace: $workspaceStore ?? '',
-                    path: flow.path,
-                    requestBody: { enabled }
-                });
+            else if (enabled) {
+                await createSchedule(flow.path);
             }
         }
-        else if (enabled) {
-            await createSchedule(flow.path);
+        loadingSave = false;
+        if (leave) {
+            goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+        }
+        else if (initialPath !== $flowStore.path) {
+            initialPath = $flowStore.path;
+            goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
         }
     }
-    loadingSave = false;
-    if (leave) {
-        goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
-    }
-    else if (initialPath !== $flowStore.path) {
-        initialPath = $flowStore.path;
-        goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    catch (err) {
+        sendUserToast(`The flow could not be saved: ${err.body}`, true);
+        loadingSave = false;
     }
 }
 let timeout = undefined;
@@ -238,7 +244,7 @@ function generateIds() {
 	<div class="flex flex-col flex-1 h-screen">
 		<!-- Nav between steps-->
 		<div
-			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
+			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6 space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
 		>
 			<div class="flex flex-row gap-4 items-center">
 				<FlowImportExportMenu />

package/components/FlowGraphViewer.svelte

@@ -15,7 +15,6 @@ export let overflowAuto = false;
 export let noSide = false;
 let stepDetail = undefined;
 let codeViewer;
-let topHeight = 0;
 </script>
 
 <Drawer bind:this={codeViewer} size="900px">
@@ -40,7 +39,7 @@ let topHeight = 0;
 					<div class="mt-6">
 						<h3>Code</h3>
 						<iframe
-							class="w-full h-full  text-sm"
+							class="w-full h-full text-sm"
 							title="embedded script from hub"
 							frameborder="0"
 							src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
@@ -133,7 +132,7 @@ let topHeight = 0;
 								>
 							</h3>
 							<iframe
-								class="w-full h-full  text-sm"
+								class="w-full h-full text-sm"
 								title="embedded script from hub"
 								frameborder="0"
 								src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
@@ -146,11 +145,7 @@ let topHeight = 0;
 								json={stepDetail.value.iterator.value}
 							/>{:else}
 							<span class="text-xs">
-								<Highlight
-									offsetTop={0}
-									language={typescript}
-									code={cleanExpr(stepDetail.value.iterator.expr)}
-								/>
+								<Highlight language={typescript} code={cleanExpr(stepDetail.value.iterator.expr)} />
 							</span>
 						{/if}</p
 					>

package/components/FlowPreviewContent.svelte

@@ -86,12 +86,14 @@ $: if (job?.type === 'CompletedJob') {
 
 <div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
-		<button
-			on:click={() => dispatch('close')}
-			class="hover:bg-gray-200 bg-gray-100 rounded-full w-16 h-8 flex items-center justify-center transition-all"
-		>
-			<Icon data={faClose} class="text-gray-500" />
-		</button>
+		<div class="w-8">
+			<button
+				on:click={() => dispatch('close')}
+				class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+			>
+				<Icon data={faClose} class="text-gray-500" />
+			</button>
+		</div>
 
 		{#if isRunning}
 			<Button
@@ -127,17 +129,17 @@ $: if (job?.type === 'CompletedJob') {
 			</Button>
 		{/if}
 		<Button
-			btnClasses="h-full"
+			btnClasses="h-full truncate"
 			size="sm"
 			variant="border"
 			on:click={() => {
 				capturePayload.openDrawer()
-			}}>Fill test args from a request</Button
+			}}>Fill args from a request</Button
 		>
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
-	<div class="overflow-y-auto grow  divide-y divide-gray-600 pr-4">
+	<div class="overflow-y-auto grow divide-y divide-gray-600 pr-4">
 		<div class="max-h-1/2 overflow-auto border-b border-gray-700">
 			<SchemaForm
 				noVariablePicker

package/components/FlowStatusViewer.svelte

@@ -137,6 +137,34 @@ function isSuccess(arg) {
         return arg == true;
     }
 }
+function onJobsLoaded(mod, job) {
+    if (mod.id && (mod.flow_jobs ?? []).length == 0) {
+        if (flowState && flowState[mod.id]) {
+            flowState[mod.id].previewResult = job['result'];
+            flowState[mod.id].previewArgs = job.args;
+        }
+        if (job.type == 'QueuedJob') {
+            localFlowModuleStates[mod.id] = {
+                type: FlowStatusModule.type.IN_PROGRESS,
+                logs: job.logs,
+                args: job.args,
+                parent_module: mod['parent_module']
+            };
+        }
+        else {
+            localFlowModuleStates[mod.id] = {
+                args: job.args,
+                type: job['success'] ? FlowStatusModule.type.SUCCESS : FlowStatusModule.type.FAILURE,
+                logs: job.logs,
+                result: job['result'],
+                job_id: job.id,
+                parent_module: mod['parent_module'],
+                iteration_total: mod.iterator?.itered?.length
+                // retries: flowState?.raw_flow
+            };
+        }
+    }
+}
 </script>
 
 {#if job}
@@ -343,49 +371,31 @@ function isSuccess(arg) {
 						<div class="line w-8 h-10" />
 						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
-								<svelte:self
-									{workspaceId}
-									bind:suspend_status
-									bind:retry_status
-									bind:flowState
-									bind:flowModuleStates={localFlowModuleStates}
-									jobId={mod.job}
-									flowJobIds={mod.flow_jobs
-										? {
-												moduleId: mod.id,
-												flowJobs: mod.flow_jobs
-										  }
-										: undefined}
-									on:jobsLoaded={(e) => {
-										if (mod.id && (mod.flow_jobs ?? []).length == 0) {
-											if (flowState && flowState[mod.id]) {
-												flowState[mod.id].previewResult = e.detail.result
-												flowState[mod.id].previewArgs = e.detail.args
-											}
-											if (e.detail.type == 'QueuedJob') {
-												localFlowModuleStates[mod.id] = {
-													type: FlowStatusModule.type.IN_PROGRESS,
-													logs: e.detail.logs,
-													args: e.detail.args,
-													parent_module: mod['parent_module']
-												}
-											} else {
-												localFlowModuleStates[mod.id] = {
-													args: e.detail.args,
-													type: e.detail.success
-														? FlowStatusModule.type.SUCCESS
-														: FlowStatusModule.type.FAILURE,
-													logs: e.detail.logs,
-													result: e.detail.result,
-													job_id: e.detail.id,
-													parent_module: mod['parent_module'],
-													iteration_total: mod.iterator?.itered?.length
-													// retries: flowState?.raw_flow
-												}
-											}
-										}
-									}}
-								/>
+								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
+									<svelte:self
+										{workspaceId}
+										jobId={mod.job}
+										bind:suspend_status
+										bind:retry_status
+										on:jobsLoaded={(e) => onJobsLoaded(mod, e.detail)}
+									/>
+								{:else}
+									<svelte:self
+										{workspaceId}
+										bind:suspend_status
+										bind:retry_status
+										bind:flowState
+										bind:flowModuleStates={localFlowModuleStates}
+										jobId={mod.job}
+										flowJobIds={mod.flow_jobs
+											? {
+													moduleId: mod.id,
+													flowJobs: mod.flow_jobs
+											  }
+											: undefined}
+										on:jobsLoaded={(e) => onJobsLoaded(mod, e.detail)}
+									/>
+								{/if}
 							{:else}
 								<ModuleStatus
 									type={mod.type}
@@ -456,7 +466,7 @@ function isSuccess(arg) {
 								<p class="p-2">No arguments</p>
 							{/if}
 						{:else if node}
-							<div class="px-2 flex gap-2 min-w-0 ">
+							<div class="px-2 flex gap-2 min-w-0">
 								<ModuleStatus type={node.type} scheduled_for={node['scheduled_for']} />
 								{#if node.job_id}
 									<div class="truncate"

package/components/FolderEditor.svelte

@@ -9,11 +9,9 @@ export let name;
 let can_write = false;
 let folder;
 let perms = undefined;
-let managing_folders = [];
 let usernames = [];
 let groups = [];
 let ownerItem = '';
-let folders = [];
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
 }
@@ -28,12 +26,8 @@ $: {
 async function load() {
     loadUsernames();
     loadGroups();
-    loadFolders();
     await loadFolder();
 }
-async function loadFolders() {
-    folders = (await FolderService.listFolders({ workspace: $workspaceStore })).map((x) => x.name);
-}
 async function addToFolder() {
     await GranularAclService.addGranularAcls({
         workspace: $workspaceStore ?? '',
@@ -50,7 +44,8 @@ async function loadFolder() {
     can_write =
         $userStore != undefined &&
             (folder?.owners.includes('u/' + $userStore.username) ||
-                ($userStore.is_admin ?? false) || ($userStore.is_super_admin ?? false) ||
+                ($userStore.is_admin ?? false) ||
+                ($userStore.is_super_admin ?? false) ||
                 $userStore.pgroups.findIndex((x) => folder?.owners.includes(x)) != -1);
     perms = Array.from(new Set(Object.entries(folder?.extra_perms ?? {})
         .map((x) => x[0])
@@ -60,9 +55,6 @@ async function loadFolder() {
             role: getRole(x)
         };
     });
-    managing_folders = Object.entries(folder?.extra_perms ?? {})
-        .filter(([k, v]) => k.startsWith('g/') && v)
-        .map(([k, v]) => k);
 }
 function getRole(x) {
     const viewer = x in (folder?.extra_perms ?? {});

package/components/FolderUsageInfo.svelte

@@ -1,4 +1,4 @@
-<script>import { FolderService, GroupService } from '../gen';
+<script>import { FolderService } from '../gen';
 import { workspaceStore } from '../stores';
 export let name;
 export let tabular = false;

package/components/GroupEditor.svelte

@@ -1,21 +1,19 @@
-<script>import { userStore, workspaceStore } from '../stores';
-import { GroupService, UserService, GranularAclService } from '../gen';
-import AutoComplete from 'simple-svelte-autocomplete';
-import TableCustom from './TableCustom.svelte';
+<script>import { GranularAclService, GroupService, UserService } from '../gen';
+import { userStore, workspaceStore } from '../stores';
 import { canWrite, sendUserToast } from '../utils';
+import AutoComplete from 'simple-svelte-autocomplete';
+import { createEventDispatcher } from 'svelte';
+import autosize from 'svelte-autosize';
 import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
+import TableCustom from './TableCustom.svelte';
 import Tooltip from './Tooltip.svelte';
-import autosize from 'svelte-autosize';
-import { createEventDispatcher } from 'svelte';
 export let name;
 let can_write = false;
 let group;
 let members = undefined;
-let managing_groups = [];
 let usernames = [];
 let username = '';
-let groups = [];
 const dispatch = createEventDispatcher();
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
@@ -26,13 +24,9 @@ $: {
     }
 }
 async function load() {
-    loadGroups();
     await loadGroup();
     loadUsernames();
 }
-async function loadGroups() {
-    groups = (await GroupService.listGroups({ workspace: $workspaceStore })).map((x) => x.name);
-}
 async function addToGroup() {
     await GroupService.addUserToGroup({
         workspace: $workspaceStore ?? '',
@@ -53,9 +47,6 @@ async function loadGroup() {
             role: getRole(x)
         };
     });
-    managing_groups = Object.entries(group?.extra_perms ?? {})
-        .filter(([k, v]) => k.startsWith('g/') && v)
-        .map(([k, v]) => k);
 }
 function getRole(x) {
     const writer = 'u/' + x in (group?.extra_perms ?? {}) && (group?.extra_perms ?? {})['u/' + x];

package/components/HighlightCode.svelte

@@ -23,7 +23,7 @@ $: lang = getLang(language);
 </script>
 
 {#if code?.length < 5000}
-	<Highlight className="nowrap {$$props.class}" language={lang} {code} />
+	<Highlight class="nowrap {$$props.class}" language={lang} {code} />
 {:else}
 	<pre class="overflow-auto max-h-screen {$$props.class}"
 		><code class="language-{language}">{code}</code></pre

package/components/InlineCodeCopy.svelte

@@ -4,7 +4,8 @@ import { Icon } from 'svelte-awesome';
 export let content;
 </script>
 
-<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
 	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
 		><Icon data={faClipboard} /></span
 	></pre

package/components/InputTransformForm.svelte

@@ -137,9 +137,9 @@ $: schema.properties[argName].default && setDefaultCode();
 							}
 							if (arg) {
 								arg.value = undefined
+								arg.type = 'javascript'
 							}
 							propertyType = 'javascript'
-							arg.type = 'javascript'
 						} else {
 							if (staticTemplate) {
 								if (arg) {
@@ -198,7 +198,6 @@ $: schema.properties[argName].default && setDefaultCode();
 	</div>
 
 	<div class="max-w-xs" />
-
 	<div
 		class="relative mb-6 {$propPickerConfig?.propName == argName
 			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'

package/components/InputTransformSchemaForm.svelte

@@ -44,7 +44,7 @@ $: {
 
 <div class="w-full {clazz}">
 	{#if keys.length > 0}
-		{#each keys as argName, i (argName)}
+		{#each keys as argName (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
 				<div class="z-10">
 					<InputTransformForm

package/components/InputTransformsViewer.svelte

@@ -12,7 +12,7 @@ export let inputTransforms;
 					json={val.value}
 				/>{:else}
 				<span class="text-xs">
-					<Highlight offsetTop={0} language={typescript} code={cleanExpr(val.expr)} />
+					<Highlight language={typescript} code={cleanExpr(val.expr)} />
 				</span>
 			{/if}
 		</li>

package/components/LightweightArgInput.svelte

@@ -298,5 +298,14 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{/if}
 			<slot name="actions" />
 		</div>
+		{#if error && error != ''}
+			<div class="text-right text-xs text-red-600">
+				{#if error === ''}
+					&nbsp;
+				{:else}
+					{error}
+				{/if}
+			</div>
+		{/if}
 	</div>
 </div>

package/components/LightweightSchemaForm.svelte

@@ -7,7 +7,7 @@ $: if (args === undefined) {
 </script>
 
 <div class="w-full">
-	{#each Object.keys(schema.properties ?? {}) as argName, i (argName)}
+	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
 		<div>
 			{#if typeof args == 'object' && schema?.properties[argName] && args}
 				<LightweightArgInput

package/components/Modal.svelte

@@ -58,11 +58,11 @@ function handleKeyUp(event) {
 					<p class="font-semibold text-gray-800"><slot name="title" /></p>
 					<div />
 				</div>
-				<div class="flex flex-col  bg-gray-50 pt-3 px-6 grow overflow-y-auto">
+				<div class="flex flex-col bg-gray-50 pt-3 px-6 grow overflow-y-auto">
 					<slot name="content" />
 				</div>
 				<div class="flex flex-col bg-white border-gray-200 p-2">
-					<div class="flex flex-row justify-between p-2 ">
+					<div class="flex flex-row justify-between p-2">
 						<button
 							on:click={() => {
 								closeDrawer()

package/components/ModulePreview.svelte

@@ -1,14 +1,14 @@
 <script>import { ScriptService } from '../gen';
-import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
-import RunForm from './RunForm.svelte';
-import TestJobLoader from './TestJobLoader.svelte';
-import LogViewer from './LogViewer.svelte';
-import DisplayResult from './DisplayResult.svelte';
-import Button from './common/button/Button.svelte';
 import { workspaceStore } from '../stores';
+import { getScriptByPath } from '../utils';
 import { Loader2 } from 'lucide-svelte';
 import { getContext } from 'svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import Button from './common/button/Button.svelte';
+import DisplayResult from './DisplayResult.svelte';
+import LogViewer from './LogViewer.svelte';
+import RunForm from './RunForm.svelte';
+import TestJobLoader from './TestJobLoader.svelte';
 export let mod;
 export let schema;
 const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
@@ -31,15 +31,15 @@ export function runTestWithStepArgs() {
 }
 export async function runTest(args) {
     const val = mod.value;
-    let jobId = undefined;
+    // let jobId: string | undefined = undefined
     if (val.type == 'rawscript') {
-        jobId = await testJobLoader?.runPreview(val.path, val.content, val.language, args);
+        await testJobLoader?.runPreview(val.path, val.content, val.language, args);
     }
     else if (val.type == 'script') {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        jobId = await testJobLoader?.runPreview(val.path, script.content, script.language, args);
+        await testJobLoader?.runPreview(val.path, script.content, script.language, args);
     }
     else {
         throw Error('not testable module type');

package/components/ModuleStatus.svelte

@@ -1,5 +1,4 @@
 <script>import { FlowStatusModule } from '../gen';
-import { displayDate } from '../utils';
 import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 import { Icon } from 'svelte-awesome';
 import { Badge } from './common';

package/components/Multiselect.svelte

@@ -110,6 +110,7 @@
 </script>
 
 <div class="multiselect" class:readonly>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="tokens" class:showOptions on:click={handleTokenClick}>
 		{#each Object.values(selected) as s}
 			<div class="token" data-id={s.value}>

package/components/ObjectResourceInput.svelte

@@ -1,28 +1,10 @@
-<script>import { ResourceService } from '../gen';
-import { workspaceStore } from '../stores';
-import ResourcePicker from './ResourcePicker.svelte';
+<script>import ResourcePicker from './ResourcePicker.svelte';
 export let format;
 export let value;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
 let path = '';
-let args = {};
-let schema = undefined;
-let resourceTypeName = '';
-$: format.startsWith('resource-') && loadSchema(format);
-async function loadSchema(format) {
-    resourceTypeName = format.substring('resource-'.length);
-    try {
-        schema = (await ResourceService.getResourceType({
-            workspace: $workspaceStore,
-            path: resourceTypeName
-        })).schema;
-    }
-    catch (e) {
-        schema = undefined;
-    }
-}
 function resourceToValue() {
     if (path) {
         value = `$res:${path}`;
@@ -35,9 +17,6 @@ function isResource() {
     return isString(value) && value.length >= '$res:'.length;
 }
 function valueToPath() {
-    if (!isString(value) && value) {
-        args = value;
-    }
     if (isResource()) {
         path = value.substr('$res:'.length);
     }
@@ -47,7 +26,6 @@ $: value && valueToPath();
 
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	<ResourcePicker
-		on:refresh={() => loadSchema(format)}
 		on:change={(e) => {
 			path = e.detail
 			resourceToValue()