windmill-components 1.550.0 → 1.555.0

package/package/components/GroupEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { GranularAclService, GroupService, UserService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { Button } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
@@ -12,23 +12,18 @@ import Section from './Section.svelte';
 import Label from './Label.svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
-export let name;
-let can_write = false;
+let { name } = $props();
+let can_write = $state(false);
 let group;
-let instance_group;
-let members = undefined;
-let usernames = [];
-let username = '';
-let summary = '';
+let instance_group = $state();
+let members = $state(undefined);
+let usernames = $state([]);
+let username = $state('');
+let summary = $state('');
 const dispatch = createEventDispatcher();
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
 }
-$: {
-    if ($workspaceStore && $userStore) {
-        load();
-    }
-}
 async function load() {
     return Promise.all([loadGroup(), loadInstanceGroup(), loadUsernames()]);
 }
@@ -85,6 +80,13 @@ function getRole(x) {
         return 'member';
     }
 }
+$effect.pre(() => {
+    if ($workspaceStore && $userStore) {
+        untrack(() => {
+            load();
+        });
+    }
+});
 </script>
 
 <Section label="Metadata" class="mb-4">
@@ -119,150 +121,155 @@ function getRole(x) {
 	{/if}
 	{#if members}
 		<TableCustom>
+			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 			<tr slot="header-row">
 				<th>user</th>
 				<th></th>
 				<th></th>
 			</tr>
-			<tbody slot="body">
-				{#each members as { member_name, role }}<tr>
-						<td>{member_name}</td>
-						<td>
-							{#if can_write}
-								<div>
-									<ToggleButtonGroup
-										selected={role}
-										on:selected={async (e) => {
-											const role = e.detail
-											// const wasInGroup = (group?.members ?? []).includes(group)
-											// const inAcl = (
-											// 	group?.extra_perms ? Object.keys(group?.extra_perms) : []
-											// ).includes(group)
-											if (role == 'member') {
-												await GroupService.addUserToGroup({
-													workspace: $workspaceStore ?? '',
-													name,
-													requestBody: {
-														username: member_name
-													}
-												})
-												await GranularAclService.removeGranularAcls({
-													workspace: $workspaceStore ?? '',
-													path: name,
-													kind: 'group_',
-													requestBody: {
-														owner: 'u/' + member_name
-													}
-												})
-											} else if (role == 'manager') {
-												await GroupService.removeUserToGroup({
-													workspace: $workspaceStore ?? '',
-													name,
-													requestBody: {
-														username: member_name
-													}
-												})
-												await GranularAclService.addGranularAcls({
-													workspace: $workspaceStore ?? '',
-													path: name,
-													kind: 'group_',
-													requestBody: {
-														owner: 'u/' + member_name,
-														write: true
-													}
-												})
-											} else if (role == 'admin') {
-												await GroupService.addUserToGroup({
-													workspace: $workspaceStore ?? '',
-													name,
-													requestBody: {
-														username: member_name
-													}
-												})
-												await GranularAclService.addGranularAcls({
-													workspace: $workspaceStore ?? '',
-													path: name,
-													kind: 'group_',
-													requestBody: {
-														owner: 'u/' + member_name,
-														write: true
-													}
-												})
-											}
-											loadGroup()
-										}}
-									>
-										{#snippet children({ item })}
-											<ToggleButton
-												value="member"
-												size="xs"
-												label="Member"
-												tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
-												{item}
-											/>
-											<ToggleButton
-												position="right"
-												value="admin"
-												size="xs"
-												label="Admin"
-												tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
-												{item}
-											/>
-											{#if role === 'manager'}
+			{#snippet body()}
+				<tbody>
+					{#each members ?? [] as { member_name, role }}<tr>
+							<td>{member_name}</td>
+							<td>
+								{#if can_write}
+									<div>
+										<ToggleButtonGroup
+											selected={role}
+											on:selected={async (e) => {
+												const role = e.detail
+												// const wasInGroup = (group?.members ?? []).includes(group)
+												// const inAcl = (
+												// 	group?.extra_perms ? Object.keys(group?.extra_perms) : []
+												// ).includes(group)
+												if (role == 'member') {
+													await GroupService.addUserToGroup({
+														workspace: $workspaceStore ?? '',
+														name,
+														requestBody: {
+															username: member_name
+														}
+													})
+													await GranularAclService.removeGranularAcls({
+														workspace: $workspaceStore ?? '',
+														path: name,
+														kind: 'group_',
+														requestBody: {
+															owner: 'u/' + member_name
+														}
+													})
+												} else if (role == 'manager') {
+													await GroupService.removeUserToGroup({
+														workspace: $workspaceStore ?? '',
+														name,
+														requestBody: {
+															username: member_name
+														}
+													})
+													await GranularAclService.addGranularAcls({
+														workspace: $workspaceStore ?? '',
+														path: name,
+														kind: 'group_',
+														requestBody: {
+															owner: 'u/' + member_name,
+															write: true
+														}
+													})
+												} else if (role == 'admin') {
+													await GroupService.addUserToGroup({
+														workspace: $workspaceStore ?? '',
+														name,
+														requestBody: {
+															username: member_name
+														}
+													})
+													await GranularAclService.addGranularAcls({
+														workspace: $workspaceStore ?? '',
+														path: name,
+														kind: 'group_',
+														requestBody: {
+															owner: 'u/' + member_name,
+															write: true
+														}
+													})
+												}
+												loadGroup()
+											}}
+										>
+											{#snippet children({ item })}
 												<ToggleButton
-													value="manager"
-													size="xs"
-													label="Manager"
-													tooltip="A manager of a group can manage the group, adding and removing users and
-												change their roles. Being a manager does not make you a member"
+													value="member"
+													small
+													label="Member"
+													tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
 													{item}
 												/>
-											{/if}
-										{/snippet}
-									</ToggleButtonGroup>
-								</div>
-							{:else}
-								{role}
-							{/if}</td
-						>
-						<td>
-							{#if can_write}
-								<button
-									class="ml-2 text-red-500"
-									on:click={async () => {
-										await GroupService.removeUserToGroup({
-											workspace: $workspaceStore ?? '',
-											name,
-											requestBody: { username: member_name }
-										})
-										await GranularAclService.removeGranularAcls({
-											workspace: $workspaceStore ?? '',
-											path: name,
-											kind: 'group_',
-											requestBody: {
-												owner: 'u/' + member_name
-											}
-										})
-										loadGroup()
-									}}>remove</button
-								>
-							{/if}</td
-						>
-					</tr>{/each}
-			</tbody>
+												<ToggleButton
+													value="admin"
+													small
+													label="Admin"
+													tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
+													{item}
+												/>
+												{#if role === 'manager'}
+													<ToggleButton
+														value="manager"
+														small
+														label="Manager"
+														tooltip="A manager of a group can manage the group, adding and removing users and
+													change their roles. Being a manager does not make you a member"
+														{item}
+													/>
+												{/if}
+											{/snippet}
+										</ToggleButtonGroup>
+									</div>
+								{:else}
+									{role}
+								{/if}</td
+							>
+							<td>
+								{#if can_write}
+									<button
+										class="ml-2 text-red-500"
+										onclick={async () => {
+											await GroupService.removeUserToGroup({
+												workspace: $workspaceStore ?? '',
+												name,
+												requestBody: { username: member_name }
+											})
+											await GranularAclService.removeGranularAcls({
+												workspace: $workspaceStore ?? '',
+												path: name,
+												kind: 'group_',
+												requestBody: {
+													owner: 'u/' + member_name
+												}
+											})
+											loadGroup()
+										}}>remove</button
+									>
+								{/if}</td
+							>
+						</tr>{/each}
+				</tbody>
+			{/snippet}
 		</TableCustom>
 
 		{#if instance_group?.emails}
 			<h2 class="mt-10">Members from the instance group</h2>
 			<TableCustom>
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 				<tr slot="header-row">
 					<th>user</th>
 				</tr>
-				<tbody slot="body">
-					{#each instance_group?.emails ?? [] as email}<tr>
-							<td>{email}</td>
-						</tr>{/each}
-				</tbody>
+				{#snippet body()}
+					<tbody>
+						{#each instance_group?.emails ?? [] as email}<tr>
+								<td>{email}</td>
+							</tr>{/each}
+					</tbody>
+				{/snippet}
 			</TableCustom>
 		{/if}
 	{:else}

package/package/components/GroupEditor.svelte.d.ts

@@ -1,3 +1,6 @@
+interface Props {
+    name: string;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,12 +14,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const GroupEditor: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-}, {
+declare const GroupEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type GroupEditor = InstanceType<typeof GroupEditor>;
 export default GroupEditor;

package/package/components/InputTransformForm.svelte

@@ -18,7 +18,6 @@ import { Button } from './common';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import { tick } from 'svelte';
-import { fade } from 'svelte/transition';
 import { buildPrefixRegex } from './flows/previousResults';
 import TemplateEditor from './TemplateEditor.svelte';
 import { setInputCat as computeInputCat, isCodeInjection } from '../utils';
@@ -29,6 +28,7 @@ import { twMerge } from 'tailwind-merge';
 import FlowPlugConnect from './FlowPlugConnect.svelte';
 import { deepEqual } from 'fast-equals';
 import S3ArrayHelperButton from './S3ArrayHelperButton.svelte';
+import { inputBorderClass } from './text_input/TextInput.svelte';
 let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined), otherArgs = {}, helperScript = undefined } = $props();
 let monaco = $state(undefined);
 let monacoTemplate = $state(undefined);
@@ -347,18 +347,10 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
     ['s3object', 's3_object'].includes(schema?.properties?.[argName]?.items?.resourceType));
 </script>
 
-{#if arg != undefined && !hidden}
-	<div
-		class={twMerge(
-			'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
-			$propPickerConfig?.propName == argName
-				? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-50 '
-				: 'hover:rounded-md',
-			className
-		)}
-	>
-		<div class="flex flex-row justify-between gap-1 pb-1 px-2">
-			<div class="flex flex-wrap grow">
+{#if arg != undefined}
+	<div class={twMerge('pt-2 pb-2 relative group', className)}>
+		<div class="flex flex-row justify-between gap-1 pb-1">
+			<div class="flex flex-wrap grow min-h-7 items-end">
 				<FieldHeader
 					label={argName}
 					simpleTooltip={headerTooltip}
@@ -373,7 +365,7 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 				{#if isStaticTemplate(inputCat)}
 					<div>
 						<span
-							class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 !py-0.5 rounded ml-2 {propertyType ==
+							class="border text-gray-400 dark:text-gray-500 text-2xs font-medium mr-2 px-1 !py-[1px] rounded ml-2.5 {propertyType ==
 								'static' && arg.type === 'javascript'
 								? 'visible'
 								: 'invisible'}"
@@ -384,7 +376,9 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 				{/if}
 			</div>
 			{#if !noDynamicToggle}
-				<div class="flex flex-row gap-x-2 gap-y-1 flex-wrap z-10 items-center">
+				<div
+					class="flex flex-row gap-x-2 z-10 absolute right-0 group-hover:bg-surface transition-colors"
+				>
 					{#if enableAi}
 						<StepInputGen
 							bind:this={stepInputGen}
@@ -413,8 +407,40 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 							}}
 							{pickableProperties}
 							{argName}
+							btnClass={twMerge(
+								'h-6 min-w-8 px-2',
+								'group-hover:opacity-100 transition-opacity',
+								!connecting ? 'opacity-0' : ''
+							)}
 						/>
 					{/if}
+
+					{#if propPickerWrapperContext}
+						<FlowPlugConnect
+							wrapperClasses={twMerge(
+								connecting ? 'h-5 w-7' : 'h-6 w-8',
+								'group-hover:opacity-100 transition-opacity p-0',
+								!connecting ? 'opacity-0' : ''
+							)}
+							id="flow-editor-plug"
+							{connecting}
+							on:click={() => {
+								if (
+									$propPickerConfig?.propName == argName &&
+									$propPickerConfig?.insertionMode == 'connect'
+								) {
+									clearFocus()
+								} else {
+									focusProp?.(argName, 'connect', (path) => {
+										connectProperty(path)
+										dispatch('change', { argName })
+										return true
+									})
+								}
+							}}
+						/>
+					{/if}
+
 					<div>
 						<ToggleButtonGroup
 							selected={propertyType}
@@ -470,19 +496,20 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 									propertyType = 'static'
 								}
 							}}
+							class="h-6"
 						>
 							{#snippet children({ item })}
 								{#if isStaticTemplate(inputCat)}
 									<ToggleButton
-										tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 										light
+										small
+										tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 										value="static"
-										size="xs2"
 										label={'${}'}
 										{item}
 									/>
 								{:else}
-									<ToggleButton small label="Static" value="static" {item} />
+									<ToggleButton light small label="static" value="static" {item} />
 								{/if}
 
 								{#if codeInjectionDetected && propertyType == 'static'}
@@ -511,27 +538,6 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 							{/snippet}
 						</ToggleButtonGroup>
 					</div>
-
-					{#if propPickerWrapperContext && inputCat !== 'dynamic'}
-						<FlowPlugConnect
-							id="flow-editor-plug"
-							{connecting}
-							on:click={() => {
-								if (
-									$propPickerConfig?.propName == argName &&
-									$propPickerConfig?.insertionMode == 'connect'
-								) {
-									clearFocus()
-								} else {
-									focusProp?.(argName, 'connect', (path) => {
-										connectProperty(path)
-										dispatch('change', { argName })
-										return true
-									})
-								}
-							}}
-						/>
-					{/if}
 				</div>
 			{/if}
 		</div>
@@ -551,12 +557,7 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 			<div class="relative flex flex-row items-top gap-2 justify-between">
 				<div class="min-w-0 grow">
 					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
-						{#if argName && schema?.properties?.[argName]?.description}
-							<div class="text-xs italic pb-1 text-secondary">
-								<pre class="font-main">{schema.properties[argName].description}</pre>
-							</div>
-						{/if}
-						<div class="mt-2 min-h-[28px]">
+						<div>
 							{#if arg}
 								<TemplateEditor
 									bind:this={monacoTemplate}
@@ -571,8 +572,16 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 										dispatch('change', { argName, arg })
 									}}
 									loadAsync
+									class="bg-surface-secondary"
 								/>
 							{/if}
+							{#if argName && schema?.properties?.[argName]?.description}
+								<div class="text-xs italic py-1 text-hint">
+									<pre class="font-main whitespace-normal"
+										>{schema.properties[argName].description}</pre
+									>
+								</div>
+							{/if}
 						</div>
 					{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
 						<ArgInput
@@ -620,23 +629,31 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 									transform?.type === 'static' ? transform.value : transform?.expr
 								])
 							)}
-						/>
-
-						{#if shouldShowS3ArrayHelper}
-							<S3ArrayHelperButton
-								{connecting}
-								onClick={() =>
-									switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
-							/>
-						{/if}
+						>
+							{#snippet innerBottomSnippet()}
+								{#if shouldShowS3ArrayHelper}
+									<S3ArrayHelperButton
+										{connecting}
+										onClick={() =>
+											switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
+									/>
+								{/if}
+							{/snippet}
+						</ArgInput>
 					{:else if arg.expr != undefined}
-						<div class="border mt-2">
+						<div
+							class={`bg-surface-secondary rounded-md flex flex-col pl-4 ${inputBorderClass({ forceFocus: focused })}`}
+						>
 							<SimpleEditor
 								bind:this={monaco}
 								bind:code={arg.expr}
+								yPadding={8}
 								{extraLib}
 								lang="javascript"
 								shouldBindKey={false}
+								renderLineHighlight="none"
+								hideLineNumbers
+								fakeMonacoPlaceholderClass="mt-2"
 								on:focus={() => {
 									focused = true
 									focusProp?.(argName, 'insert', (path) => {
@@ -655,12 +672,10 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 							/>
 							<!-- <input type="text" bind:value={arg.expr} /> -->
 						</div>
-						{#if !hideHelpButton}
-							<DynamicInputHelpBox />
-						{/if}
 
 						{#if shouldShowS3ArrayHelper}
 							<S3ArrayHelperButton
+								class="mt-2"
 								{connecting}
 								onClick={() =>
 									focusProp?.(argName, 'connect', (path) => {
@@ -670,9 +685,23 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 							/>
 						{/if}
 
+						{#if argName && schema?.properties?.[argName]?.description}
+							<div class="text-xs italic py-1 text-hint">
+								<pre class="font-main whitespace-normal"
+									>{schema.properties[argName].description}</pre
+								>
+							</div>
+						{/if}
+
+						{#if !hideHelpButton}
+							<DynamicInputHelpBox />
+						{/if}
+
 						<div class="mb-2"></div>
 					{:else}
-						Not recognized input type {argName} ({arg.expr}, {propertyType})
+						<span class="text-xs text-red-500">
+							Not recognized input type {argName} ({arg.expr}, {propertyType})
+						</span>
 						<div class="flex mt-2">
 							<Button
 								variant="border"
@@ -684,29 +713,6 @@ let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
 						>
 					{/if}
 				</div>
-
-				{#if $propPickerConfig?.propName == argName}
-					<div
-						class="text-blue-500 absolute top-2 lg:-right-2.5 -right-1"
-						in:fade={{ duration: 200 }}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="currentColor"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<polyline points="24 24 12 12 24 0" />
-						</svg>
-					</div>
-				{:else}
-					<div class="w-0"></div>
-				{/if}
 			</div>
 		</div>
 	</div>