Summary

{ if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) { path?.setName( script.summary .toLowerCase() .replace(/[^a-z0-9_]/g, '_') .replace(/-+/g, '_') .replace(/^-|-$/g, '') ) } }} />

Path

Description

<div class="border-b pb-1 mb-4 mt-8 font-semibold">Language</div>

{#if lockedLanguage}
								<div class="text-sm text-tertiary italic mb-2">
									As a forked script, the language '{script.language}' cannot be modified.
								</div>
							{/if}
							<div class=" grid grid-cols-3 gap-2">
								{#each langs as [label, lang]}
									{@const isPicked = script.language == lang && template == 'script'}
									<Popover disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}>
										<Button
											size="sm"
											variant="border"
											color={isPicked ? 'blue' : 'light'}
											btnClasses={isPicked
												? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
												: 'm-[1px]'}
											on:click={() => {
												template = 'script'
												initContent(lang, script.kind, template)
												script.language = lang
											}}
											disabled={lockedLanguage ||
												(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
										>
											<LanguageIcon {lang} />
											<span class="ml-2 py-2 truncate">{label}</span>
										</Button>
										<svelte:fragment slot="text"
											>{label} is only available with an enterprise license</svelte:fragment
										>
									</Popover>
								{/each}
								<Button
									size="sm"
									variant="border"
									color={template == 'docker' ? 'blue' : 'light'}
									btnClasses={template == 'docker'
										? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
										: 'm-[1px]'}
									disabled={lockedLanguage}
									on:click={() => {
										if (isCloudHosted()) {
											sendUserToast(
												'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
												true,
												[
													{
														label: 'Learn more',
														callback: () => {
															window.open('https://www.windmill.dev/docs/advanced/docker', '_blank')
														}
													}
												]
											)
											return
										}
										template = 'docker'
										initContent(Script.language.BASH, script.kind, template)
										script.language = Script.language.BASH
									}}
								>
									<LanguageIcon lang="docker" /><span class="ml-2 py-2">Docker</span>
								</Button>

</div>

<div class="border-b pb-1 mb-4 mt-6 font-semibold">
								Script kind
								<Tooltip>
									Tag this script's purpose within flows such that it is available as the
									corresponding action.
								</Tooltip>
							</div>
							<div class="flex flex-wrap gap-2 mb-8">
								{#each scriptKindOptions as { value, title, desc, documentationLink }}
									{@const isPicked = script.kind === value}
									<Button
										size="sm"
										variant="border"
										color={isPicked ? 'blue' : 'light'}
										btnClasses="font-medium {isPicked
											? '!bg-blue-50/75 dark:!bg-frost-900/75'
											: ''}"
										on:click={() => {
											template = 'script'
											script.kind = value
											initContent(script.language, value, template)
										}}
									>
										{title}
										{#if desc}
											<Tooltip {documentationLink}>
												{desc}
											</Tooltip>
										{/if}
									</Button>
								{/each}
							</div>
						</TabContent>
						<TabContent value="runtime">
							<h2 class="border-b pb-1 mt-4 mb-4">Concurrency limits</h2>
							<div class="flex gap-x-4 shrink">
								<label class="block shrink min-w-0">
									<span class="text-secondary text-sm">Maximum number of runs</span>
									<input class="!w-55" type="number" bind:value={script.concurrent_limit} />
								</label>
								<label class="block shrink min-w-0">
									<span class="text-secondary text-sm">Per time window (seconds)</span>
									<input
										class="!w-18"
										type="number"
										bind:value={script.concurrency_time_window_s}
									/>
								</label>
							</div>

<h2 class="border-b pb-1 mt-10 mb-4"
								>Worker group tag <Tooltip
									documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
									>The script will be executed on a worker configured to accept its worker group
									tag. For instance, you could setup an "highmem", or "gpu" worker group.</Tooltip
								></h2
							>
							{#if $workerTags}
								{#if $workerTags?.length > 0}
									<div class="max-w-sm">
										<select
											bind:value={script.tag}
											on:change={(e) => {
												if (script.tag == '') {
													script.tag = undefined
												}
											}}
										>
											{#if script.tag}
												<option value="">reset to default</option>
											{:else}
												<option value="" disabled selected>Worker Group</option>
											{/if}
											{#each $workerTags ?? [] as tag (tag)}
												<option value={tag}>{tag}</option>
											{/each}
										</select>
									</div>
								{:else}
									<div class="text-sm text-secondary italic mb-2">
										No custom worker group defined on this instance. See <a
											href="https://www.windmill.dev/docs/core_concepts/worker_groups"
											target="_blank">documentation</a
										>
									</div>
								{/if}
							{:else}
								<Loader2 class="animate-spin" />
							{/if}

<h2 class="border-b pb-1 mt-10 mb-4 flex items-center gap-4"
								>Cache <Toggle
									size="xs"
									checked={Boolean(script.cache_ttl)}
									on:change={() => {
										if (script.cache_ttl && script.cache_ttl != undefined) {
											script.cache_ttl = undefined
										} else {
											script.cache_ttl = 300
										}
									}}
									options={{
										right: 'Cache the results for each possible inputs'
									}}
								/></h2
							>

<div class="flex gap-x-4 shrink flex-col">
								<div class="text-xs">How long to the keep cache valid</div>

{#if script.cache_ttl}
									<SecondsInput bind:seconds={script.cache_ttl} />
								{:else}
									<SecondsInput disabled />
								{/if}
							</div>

<h2 class="border-b pb-1 mt-10 mb-4 items-center flex gap-1"
								>Dedicated Workers<Tooltip
									>In this mode, the script is meant to be run on dedicated workers that run the
									script at native speed. Can reach >1500rps per dedicated worker. Only available on
									enterprise edition and for the Bun language.</Tooltip
								>
								<Toggle
									disabled={!$enterpriseLicense ||
										isCloudHosted() ||
										script.language != Script.language.BUN}
									size="xs"
									checked={Boolean(script.dedicated_worker)}
									on:change={() => {
										if (script.dedicated_worker) {
											script.dedicated_worker = undefined
										} else {
											script.dedicated_worker = true
										}
									}}
									options={{
										right: 'Script is run on dedicated workers'
									}}
								/></h2
							>

{#if !isCloudHosted()}
								<h2 class="border-b pb-1 mt-10 mb-4">
									Custom env variables
									<Tooltip
										documentationLink="https://www.windmill.dev/docs/reference#custom-environment-variables"
									>
										Additional static custom env variables to pass to the script.
									</Tooltip>
								</h2>
								<div class="w-full">
									<span class="text-tertiary text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span>
									{#if Array.isArray(script.envs ?? [])}
										{#each script.envs ?? [] as v, i}
											<div class="flex max-w-md mt-1 w-full items-center">
												<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
												<button
													transition:fade|local={{ duration: 50 }}
													class="rounded-full p-1 bg-surface/60 duration-200 hover:bg-gray-200"
													aria-label="Clear"
													on:click={() => {
														script.envs && script.envs.splice(i, 1)
														script.envs = script.envs
													}}
												>
													<X size={14} />
												</button>
											</div>
										{/each}
										{#if script.envs && script.envs.length > 0}
											<div class="pt-2" />
											<Alert type="warning" title="Not passed in previews"
												>Static envs variables are not passed in preview but solely on deployed
												scripts.</Alert
											>
										{/if}
									{/if}
								</div>
								<div class="flex mt-2">
									<Button
										variant="border"
										color="dark"
										size="xs"
										btnClasses="mt-1"
										on:click={() => {
											if (script.envs == undefined || !Array.isArray(script.envs)) {
												script.envs = []
											}
											script.envs = script.envs.concat('')
										}}
									>
										<Icon data={faPlus} class="mr-2" />
										Add item
									</Button>
								</div>
							{/if}
						</TabContent>
						<TabContent value="ui">
							<div class="mt-4" />
							<ScriptSchema bind:schema={script.schema} />
						</TabContent>
					</div>
				</svelte:fragment>
			</Tabs>
		</DrawerContent>
	</Drawer>

<div class="flex flex-col h-screen">
		<div class="flex h-full max-h-12 items-center pl-2.5 pr-6 border-b shadow-sm">
			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center">
				<div class="min-w-64 w-full max-w-md">
					<input
						type="text"
						placeholder="Script summary"
						class="text-sm w-full font-semibold"
						bind:value={script.summary}
					/>
				</div>
				<div class="gap-4 flex">
					<div class="flex justify-start w-full">
						<div>
							<button
								on:click={async () => {
									metadataOpen = true
								}}
							>
								<Badge
									color="gray"
									class="center-center !bg-surface-selected !text-tertiary !h-[28px]  !w-[70px] rounded-r-none"
								>
									<Pen size={12} class="mr-2" /> Path
								</Badge>
							</button>
						</div>
						<input
							type="text"
							readonly
							value={script.path}
							size={script.path?.length || 50}
							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
							on:focus={({ currentTarget }) => {
								currentTarget.select()
							}}
						/>
					</div>
				</div>
				<div class="center-center">
					<button
						on:click={async () => {
							metadataOpen = true
						}}
					>
						<LanguageIcon lang={script.language} />
					</button>
				</div>
				{#if $enterpriseLicense && initialPath != ''}
					<Awareness />
				{/if}

<div class="flex flex-row gap-x-1 lg:gap-x-2">
					<Button
						color="light"
						variant="border"
						size="xs"
						on:click={() => {
							metadataOpen = true
						}}
					>
						Settings
					</Button>
					<Button
						loading={loadingDraft}
						size="xs"
						startIcon={{ icon: faSave }}
						on:click={() => saveDraft()}
					>
						<span class="hidden sm:flex">
							Save draft <Kbd small>{getModifierKey()}</Kbd>
						</span>
						<Kbd small>S</Kbd>
					</Button>
					<Button
						loading={loadingSave}
						size="xs"
						startIcon={{ icon: faSave }}
						on:click={() => editScript()}
						dropdownItems={initialPath != '' ? computeDropdownItems : undefined}
					>
						Deploy
					</Button>
				</div>
			</div>
		</div>

<ScriptEditor
			collabMode
			edit={initialPath != ''}
			on:format={() => {
				saveDraft()
			}}
			bind:editor
			bind:this={scriptEditor}
			bind:schema={script.schema}
			path={script.path}
			bind:code={script.content}
			lang={script.language}
			{initialArgs}
			kind={script.kind}
			{template}
			tag={script.tag}
		/>
	</div>
{:else}
	Script Builder not available to operators
{/if}