windmill-components 1.309.7 → 1.352.0

package/package/components/ScheduleEditorInner.svelte

@@ -15,9 +15,10 @@ import { enterpriseLicense, userStore, workspaceStore } from '../stores';
 import { canWrite, emptyString, formatCron, sendUserToast } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import Section from './Section.svelte';
-import { List, Save } from 'lucide-svelte';
+import { List, Loader2, Save } from 'lucide-svelte';
 import FlowRetries from './flows/content/FlowRetries.svelte';
 import WorkerTagPicker from './WorkerTagPicker.svelte';
+import Label from './Label.svelte';
 let optionTabSelected = 'error_handler';
 let is_flow = false;
 let initialPath = '';
@@ -44,6 +45,7 @@ let script_path = '';
 let initialScriptPath = '';
 let runnable;
 let args = {};
+let loading = false;
 export function openEdit(ePath, isFlow) {
     is_flow = isFlow;
     initialPath = ePath;
@@ -61,6 +63,7 @@ export async function openNew(nis_flow, initial_script_path) {
     args = {};
     runnable = undefined;
     is_flow = nis_flow;
+    schedule = '0 0 12 * *';
     let defaultErrorHandlerMaybe = undefined;
     let defaultRecoveryHandlerMaybe = undefined;
     if ($workspaceStore) {
@@ -97,7 +100,9 @@ export async function openNew(nis_flow, initial_script_path) {
         errorHandleritemKind = 'script';
         errorHandlerExtraArgs = {};
         errorHandlerCustomInitialPath = undefined;
-        errorHandlerSelected = $enterpriseLicense ? 'slack' : 'custom';
+        errorHandlerSelected = 'slack';
+        failedTimes = 1;
+        failedExact = false;
     }
     if (defaultRecoveryHandlerMaybe !== undefined && defaultRecoveryHandlerMaybe !== null) {
         let splitted = defaultRecoveryHandlerMaybe['recoveryHandlerPath'].split('/');
@@ -113,7 +118,8 @@ export async function openNew(nis_flow, initial_script_path) {
         recoveryHandlerItemKind = 'script';
         recoveryHandlerExtraArgs = {};
         recoveryHandlerCustomInitialPath = undefined;
-        recoveryHandlerSelected = $enterpriseLicense ? 'slack' : 'custom';
+        recoveryHandlerSelected = 'slack';
+        recoveredTimes = 1;
     }
     timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     drawer?.openDrawer();
@@ -209,6 +215,7 @@ async function saveAsDefaultRecoveryHandler(overrideExisting) {
 }
 let can_write = true;
 async function loadSchedule() {
+    loading = true;
     try {
         const s = await ScheduleService.getSchedule({
             workspace: $workspaceStore,
@@ -237,6 +244,11 @@ async function loadSchedule() {
         else {
             errorHandlerPath = undefined;
             errorHandleritemKind = 'script';
+            errorHandlerCustomInitialPath = undefined;
+            errorHandlerExtraArgs = {};
+            failedExact = false;
+            failedTimes = 1;
+            errorHandlerSelected = 'slack';
         }
         if (s.on_recovery) {
             let splitted = s.on_recovery.split('/');
@@ -252,6 +264,10 @@ async function loadSchedule() {
         else {
             recoveryHandlerPath = undefined;
             recoveryHandlerItemKind = 'script';
+            recoveryHandlerCustomInitialPath = undefined;
+            recoveredTimes = 1;
+            recoveryHandlerSelected = 'slack';
+            recoveryHandlerExtraArgs = {};
         }
         args = s.args ?? {};
         can_write = canWrite(s.path, s.extra_perms, $userStore);
@@ -260,6 +276,7 @@ async function loadSchedule() {
     catch (err) {
         sendUserToast(`Could not load schedule: ${err}`, true);
     }
+    loading = false;
 }
 async function scheduleScript() {
     if (errorHandlerPath !== undefined && isSlackHandler('error', errorHandlerPath)) {
@@ -396,16 +413,16 @@ let dirtyPath = false;
 		</svelte:fragment>
 
 		<div class="flex flex-col gap-12">
-			<div>
+			<div class="flex flex-col gap-4">
 				<div>
-					<h2 class="text-base font-semibold">Metadata</h2>
-					<div class="w-full py-2">
+					<h2 class="text-base font-semibold mb-2">Metadata</h2>
+					<Label label="Summary">
 						<!-- svelte-ignore a11y-autofocus -->
 						<input
 							autofocus
 							type="text"
-							placeholder="Schedule summary"
-							class="text-sm w-full font-semibold"
+							placeholder="Short summary to be displayed when listed"
+							class="text-sm w-full"
 							bind:value={summary}
 							on:keyup={() => {
 								if (!edit && summary?.length > 0 && !dirtyPath) {
@@ -419,40 +436,42 @@ let dirtyPath = false;
 								}
 							}}
 						/>
-					</div>
+					</Label>
 				</div>
-				{#if !edit}
-					<Path
-						bind:dirty={dirtyPath}
-						bind:this={pathC}
-						checkInitialPathExistence
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						namePlaceholder="schedule"
-						kind="schedule"
-					/>
-				{:else}
-					<div class="flex justify-start w-full">
-						<Badge
-							color="gray"
-							class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
-						>
-							Schedule path (not editable)
-						</Badge>
-						<input
-							type="text"
-							readonly
-							value={path}
-							size={path?.length || 50}
-							class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-							on:focus={({ currentTarget }) => {
-								currentTarget.select()
-							}}
+				<Label label="Path">
+					{#if !edit}
+						<Path
+							bind:dirty={dirtyPath}
+							bind:this={pathC}
+							checkInitialPathExistence
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							namePlaceholder="schedule"
+							kind="schedule"
 						/>
-						<!-- <span class="font-mono text-sm break-all">{path}</span> -->
-					</div>
-				{/if}
+					{:else}
+						<div class="flex justify-start w-full">
+							<Badge
+								color="gray"
+								class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
+							>
+								Schedule path (not editable)
+							</Badge>
+							<input
+								type="text"
+								readonly
+								value={path}
+								size={path?.length || 50}
+								class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+								on:focus={({ currentTarget }) => {
+									currentTarget.select()
+								}}
+							/>
+							<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+						</div>
+					{/if}
+				</Label>
 			</div>
 
 			<Section label="Schedule">
@@ -478,7 +497,7 @@ let dirtyPath = false;
 						}}
 					/>
 				{:else}
-					<Alert type="info" title="Runnable path cannot be edited">
+					<Alert type="info" title="Runnable path cannot be edited" collapsible>
 						Once a schedule is created, the runnable path cannot be changed. However, when renaming
 						a script or a flow, the runnable path will automatically update itself.
 					</Alert>
@@ -507,247 +526,258 @@ let dirtyPath = false;
 					</div>
 				{/if}
 				<div class="mt-6">
-					{#if runnable}
-						{#if runnable?.schema && runnable.schema.properties && Object.keys(runnable.schema.properties).length > 0}
-							<SchemaForm
-								showReset
-								disabled={!can_write}
-								schema={runnable.schema}
-								bind:isValid
-								bind:args
-							/>
+					{#if !loading}
+						{#if runnable}
+							{#if runnable?.schema && runnable.schema.properties && Object.keys(runnable.schema.properties).length > 0}
+								<SchemaForm
+									showReset
+									disabled={!can_write}
+									schema={runnable.schema}
+									bind:isValid
+									bind:args
+								/>
+							{:else}
+								<div class="text-xs texg-gray-700">
+									This {is_flow ? 'flow' : 'script'} takes no argument
+								</div>
+							{/if}
 						{:else}
-							<div class="text-xs texg-gray-700">
-								This {is_flow ? 'flow' : 'script'} takes no argument
+							<div class="text-xs texg-gray-700 my-2">
+								Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
 							</div>
 						{/if}
 					{:else}
-						<div class="text-xs texg-gray-700 my-2">
-							Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
-						</div>
+						<Loader2 class="animate-spin" />
 					{/if}
 				</div>
 			</Section>
 
 			<div class="flex flex-col gap-2">
-				<Tabs bind:selected={optionTabSelected}>
-					<Tab value="error_handler">Error Handler</Tab>
-					<Tab value="recovery_handler">Recovery Handler</Tab>
-					{#if itemKind === 'script'}
-						<Tab value="retries">Retries</Tab>
-						<Tab value="tag">Custom tag</Tab>
-					{/if}
-				</Tabs>
-				<div class="pt-0.5" />
-				{#if optionTabSelected === 'error_handler'}
-					<Section label="Error handler">
-						<svelte:fragment slot="header">
-							<div class="flex flex-row gap-2">
-								{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-							</div>
-						</svelte:fragment>
-						<svelte:fragment slot="action">
-							<div class="flex flex-row items-center gap-2">
-								<Dropdown
-									items={[
-										{
-											displayName: `Future schedules only`,
-											action: () => saveAsDefaultErrorHandler(false)
-										},
-										{
-											displayName: 'Override all existing',
-											type: 'delete',
-											action: () => saveAsDefaultErrorHandler(true)
-										}
-									]}
-								>
-									<svelte:fragment>
-										<Save size={12} class="mr-1" />
-										Set as default
-									</svelte:fragment>
-								</Dropdown>
-							</div>
-						</svelte:fragment>
-						<div class="flex flex-row">
-							<Toggle
-								disabled={!can_write || !$enterpriseLicense}
-								bind:checked={wsErrorHandlerMuted}
-								options={{ right: 'Mute workspace error handler for this schedule' }}
-							/>
-						</div>
-						<ErrorOrRecoveryHandler
-							isEditable={can_write}
-							errorOrRecovery="error"
-							showScriptHelpText={true}
-							bind:handlerSelected={errorHandlerSelected}
-							bind:handlerPath={errorHandlerPath}
-							customInitialScriptPath={errorHandlerCustomInitialPath}
-							slackToggleText="Alert channel on error"
-							customScriptTemplate="/scripts/add?hub=hub%2F2420%2Fwindmill%2Fschedule_error_handler_template"
-							bind:customHandlerKind={errorHandleritemKind}
-							bind:handlerExtraArgs={errorHandlerExtraArgs}
-						>
-							<svelte:fragment slot="custom-tab-tooltip">
-								<Tooltip>
-									<div class="flex gap-20 items-start mt-3">
-										<div class="text-sm"
-											>The following args will be passed to the error handler:
-											<ul class="mt-1 ml-2">
-												<li><b>path</b>: The path of the script or flow that failed.</li>
-												<li><b>is_flow</b>: Whether the runnable is a flow.</li>
-												<li><b>schedule_path</b>: The path of the schedule.</li>
-												<li><b>error</b>: The error details.</li>
-												<li
-													><b>failed_times</b>: Minimum number of times the schedule failed before
-													calling the error handler.</li
-												>
-												<li><b>started_at</b>: The start datetime of the latest job that failed.</li
-												>
-											</ul>
-										</div>
-									</div>
-								</Tooltip>
+				{#if !loading}
+					<Tabs bind:selected={optionTabSelected}>
+						<Tab value="error_handler">Error Handler</Tab>
+						<Tab value="recovery_handler">Recovery Handler</Tab>
+						{#if itemKind === 'script'}
+							<Tab value="retries">Retries</Tab>
+							<Tab value="tag">Custom tag</Tab>
+						{/if}
+					</Tabs>
+					<div class="pt-0.5" />
+					{#if optionTabSelected === 'error_handler'}
+						<Section label="Error handler">
+							<svelte:fragment slot="header">
+								<div class="flex flex-row gap-2">
+									{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+								</div>
 							</svelte:fragment>
-						</ErrorOrRecoveryHandler>
-
-						<div class="flex flex-row items-center justify-between">
-							<div class="flex flex-row items-center mt-4 font-semibold text-sm gap-2">
-								<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}>
-									Triggered when schedule failed</p
-								>
-								<select
-									class="!w-14"
-									bind:value={failedExact}
-									disabled={!$enterpriseLicense || emptyString(errorHandlerPath)}
-								>
-									<option value={false}>&gt;=</option>
-									<option value={true}>==</option>
-								</select>
-								<input
-									type="number"
-									class="!w-14 text-center {emptyString(errorHandlerPath) ? 'text-tertiary' : ''}"
-									bind:value={failedTimes}
-									disabled={!$enterpriseLicense}
-									min="1"
+							<svelte:fragment slot="action">
+								<div class="flex flex-row items-center gap-1 text-2xs text-tertiary">
+									defaults
+									<Dropdown
+										items={[
+											{
+												displayName: `Override future schedules only`,
+												action: () => saveAsDefaultErrorHandler(false)
+											},
+											{
+												displayName: 'Override all existing',
+												type: 'delete',
+												action: () => saveAsDefaultErrorHandler(true)
+											}
+										]}
+									>
+										<svelte:fragment>
+											<Save size={12} class="mr-1" />
+											Set as default
+										</svelte:fragment>
+									</Dropdown>
+								</div>
+							</svelte:fragment>
+							<div class="flex flex-row py-2">
+								<Toggle
+									size="xs"
+									disabled={!can_write || !$enterpriseLicense}
+									bind:checked={wsErrorHandlerMuted}
+									options={{ right: 'Mute workspace error handler for this schedule' }}
 								/>
-								<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}
-									>time{failedTimes > 1 ? 's in a row' : ''}</p
-								>
 							</div>
-						</div>
-					</Section>
-				{:else if optionTabSelected === 'recovery_handler'}
-					<Section label="Recovery handler">
-						<svelte:fragment slot="header">
-							<div class="flex flex-row gap-2">
-								{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+
+							<ErrorOrRecoveryHandler
+								isEditable={can_write}
+								errorOrRecovery="error"
+								showScriptHelpText={true}
+								bind:handlerSelected={errorHandlerSelected}
+								bind:handlerPath={errorHandlerPath}
+								customInitialScriptPath={errorHandlerCustomInitialPath}
+								slackToggleText="Alert channel on error"
+								customScriptTemplate="/scripts/add?hub=hub%2F2420%2Fwindmill%2Fschedule_error_handler_template"
+								bind:customHandlerKind={errorHandleritemKind}
+								bind:handlerExtraArgs={errorHandlerExtraArgs}
+							>
+								<svelte:fragment slot="custom-tab-tooltip">
+									<Tooltip>
+										<div class="flex gap-20 items-start mt-3">
+											<div class="text-sm"
+												>The following args will be passed to the error handler:
+												<ul class="mt-1 ml-2">
+													<li><b>path</b>: The path of the script or flow that failed.</li>
+													<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+													<li><b>schedule_path</b>: The path of the schedule.</li>
+													<li><b>error</b>: The error details.</li>
+													<li
+														><b>failed_times</b>: Minimum number of times the schedule failed before
+														calling the error handler.</li
+													>
+													<li
+														><b>started_at</b>: The start datetime of the latest job that failed.</li
+													>
+												</ul>
+											</div>
+										</div>
+									</Tooltip>
+								</svelte:fragment>
+							</ErrorOrRecoveryHandler>
+							<div class="flex flex-row items-center justify-between">
+								<div class="flex flex-row items-center mt-4 font-semibold text-sm gap-2">
+									<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}>
+										Triggered when schedule failed</p
+									>
+									<select
+										class="!w-14"
+										bind:value={failedExact}
+										disabled={!$enterpriseLicense || emptyString(errorHandlerPath)}
+									>
+										<option value={false}>&gt;=</option>
+										<option value={true}>==</option>
+									</select>
+									<input
+										type="number"
+										class="!w-14 text-center {emptyString(errorHandlerPath) ? 'text-tertiary' : ''}"
+										bind:value={failedTimes}
+										disabled={!$enterpriseLicense}
+										min="1"
+									/>
+									<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}
+										>time{failedTimes > 1 ? 's in a row' : ''}</p
+									>
+								</div>
 							</div>
-						</svelte:fragment>
-						<svelte:fragment slot="action">
-							<div class="flex flex-row items-center gap-2">
-								<Dropdown
-									items={[
-										{
-											displayName: `Future schedules only`,
-											action: () => saveAsDefaultRecoveryHandler(false)
-										},
-										{
-											displayName: 'Override all existing',
-											type: 'delete',
-											action: () => saveAsDefaultRecoveryHandler(true)
-										}
-									]}
+						</Section>
+					{:else if optionTabSelected === 'recovery_handler'}
+						<Section label="Recovery handler">
+							<svelte:fragment slot="header">
+								<div class="flex flex-row gap-2">
+									{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+								</div>
+							</svelte:fragment>
+							<svelte:fragment slot="action">
+								<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
+									defaults
+									<Dropdown
+										items={[
+											{
+												displayName: `Override future schedules only`,
+												action: () => saveAsDefaultRecoveryHandler(false)
+											},
+											{
+												displayName: 'Override all existing',
+												type: 'delete',
+												action: () => saveAsDefaultRecoveryHandler(true)
+											}
+										]}
+									>
+										<svelte:fragment>
+											<Save size={12} class="mr-1" />
+											Set as default
+										</svelte:fragment>
+									</Dropdown>
+								</div>
+							</svelte:fragment>
+							<ErrorOrRecoveryHandler
+								isEditable={can_write && !emptyString($enterpriseLicense)}
+								errorOrRecovery="recovery"
+								bind:handlerSelected={recoveryHandlerSelected}
+								bind:handlerPath={recoveryHandlerPath}
+								customInitialScriptPath={recoveryHandlerCustomInitialPath}
+								slackToggleText="Alert channel when error recovered"
+								customScriptTemplate="/scripts/add?hub=hub%2F2421%2Fwindmill%2Fschedule_recovery_handler_template"
+								bind:customHandlerKind={recoveryHandlerItemKind}
+								bind:handlerExtraArgs={recoveryHandlerExtraArgs}
+							>
+								<svelte:fragment slot="custom-tab-tooltip">
+									<Tooltip>
+										<div class="flex gap-20 items-start mt-3">
+											<div class=" text-sm"
+												>The following args will be passed to the recovery handler:
+												<ul class="mt-1 ml-2">
+													<li><b>path</b>: The path of the script or flow that recovered.</li>
+													<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+													<li><b>schedule_path</b>: The path of the schedule.</li>
+													<li><b>error</b>: The error of the last job that errored</li>
+													<li
+														><b>error_started_at</b>: The start datetime of the last job that
+														errored</li
+													>
+													<li
+														><b>success_times</b>: The number of times the schedule succeeded before
+														calling the recovery handler.</li
+													>
+													<li><b>success_result</b>: The result of the latest successful job</li>
+													<li
+														><b>success_started_at</b>: The start datetime of the latest successful
+														job</li
+													>
+												</ul>
+											</div>
+										</div>
+									</Tooltip>
+								</svelte:fragment>
+							</ErrorOrRecoveryHandler>
+							<div class="flex flex-row items-center justify-between">
+								<div
+									class="flex flex-row items-center mt-5 font-semibold text-sm {emptyString(
+										recoveryHandlerPath
+									)
+										? 'text-tertiary'
+										: ''}"
 								>
-									<svelte:fragment>
-										<Save size={12} class="mr-1" />
-										Set as default
-									</svelte:fragment>
-								</Dropdown>
+									<p>Triggered when schedule recovered</p>
+									<input
+										type="number"
+										class="!w-14 mx-2 text-center"
+										bind:value={recoveredTimes}
+										min="1"
+									/>
+									<p>time{recoveredTimes > 1 ? 's in a row' : ''}</p>
+								</div>
 							</div>
-						</svelte:fragment>
-
-						<ErrorOrRecoveryHandler
-							isEditable={can_write && !emptyString($enterpriseLicense)}
-							errorOrRecovery="recovery"
-							bind:handlerSelected={recoveryHandlerSelected}
-							bind:handlerPath={recoveryHandlerPath}
-							customInitialScriptPath={recoveryHandlerCustomInitialPath}
-							slackToggleText="Alert channel when error recovered"
-							customScriptTemplate="/scripts/add?hub=hub%2F2421%2Fwindmill%2Fschedule_recovery_handler_template"
-							bind:customHandlerKind={recoveryHandlerItemKind}
-							bind:handlerExtraArgs={recoveryHandlerExtraArgs}
-						>
-							<svelte:fragment slot="custom-tab-tooltip">
+						</Section>
+					{:else if optionTabSelected === 'retries'}
+						<Section label="Retries">
+							<svelte:fragment slot="header">
+								<div class="flex flex-row gap-2">
+									{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+								</div>
 								<Tooltip>
-									<div class="flex gap-20 items-start mt-3">
-										<div class=" text-sm"
-											>The following args will be passed to the recovery handler:
-											<ul class="mt-1 ml-2">
-												<li><b>path</b>: The path of the script or flow that recovered.</li>
-												<li><b>is_flow</b>: Whether the runnable is a flow.</li>
-												<li><b>schedule_path</b>: The path of the schedule.</li>
-												<li><b>error</b>: The error of the last job that errored</li>
-												<li
-													><b>error_started_at</b>: The start datetime of the last job that errored</li
-												>
-												<li
-													><b>success_times</b>: The number of times the schedule succeeded before
-													calling the recovery handler.</li
-												>
-												<li><b>success_result</b>: The result of the latest successful job</li>
-												<li
-													><b>success_started_at</b>: The start datetime of the latest successful
-													job</li
-												>
-											</ul>
-										</div>
-									</div>
+									If defined, upon error this schedule will be retried with a delay and a maximum
+									number of attempts as defined below.
+									<br />
+									This is only available for individual script. For flows, retries can be set on each
+									flow step in the flow editor.
 								</Tooltip>
 							</svelte:fragment>
-						</ErrorOrRecoveryHandler>
-
-						<div class="flex flex-row items-center justify-between">
-							<div
-								class="flex flex-row items-center mt-5 font-semibold text-sm {emptyString(
-									recoveryHandlerPath
-								)
-									? 'text-tertiary'
-									: ''}"
-							>
-								<p>Triggered when schedule recovered</p>
-								<input
-									type="number"
-									class="!w-14 mx-2 text-center"
-									bind:value={recoveredTimes}
-									min="1"
-								/>
-								<p>time{recoveredTimes > 1 ? 's in a row' : ''}</p>
-							</div>
-						</div>
-					</Section>
-				{:else if optionTabSelected === 'retries'}
-					<Section label="Retries">
-						<svelte:fragment slot="header">
-							<div class="flex flex-row gap-2">
-								{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
-							</div>
-							<Tooltip>
-								If defined, upon error this schedule will be retried with a delay and a maximum
-								number of attempts as defined below.
-								<br />
-								This is only available for individual script. For flows, retries can be set on each flow
-								step in the flow editor.
-							</Tooltip>
-						</svelte:fragment>
-						<FlowRetries bind:flowModuleRetry={retry} disabled={itemKind !== 'script'} />
-					</Section>
-				{:else if optionTabSelected === 'tag'}
-					<Section
-						label="Custom script tag"
-						tooltip="When set, the script tag will be overridden by this tag"
-					>
-						<WorkerTagPicker bind:tag popupPlacement="top-end" />
-					</Section>
+							<FlowRetries bind:flowModuleRetry={retry} disabled={itemKind !== 'script'} />
+						</Section>
+					{:else if optionTabSelected === 'tag'}
+						<Section
+							label="Custom script tag"
+							tooltip="When set, the script tag will be overridden by this tag"
+						>
+							<WorkerTagPicker bind:tag popupPlacement="top-end" />
+						</Section>
+					{/if}
+				{:else}
+					<Loader2 class="animate-spin" />
 				{/if}
 			</div>
 		</div>