windmill-components 1.408.1 → 1.430.2

package/package/components/SuperadminSettings.svelte

@@ -21,10 +21,12 @@ import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svel
 import ChangeInstanceUsername from './ChangeInstanceUsername.svelte';
 import { isCloudHosted } from '../cloud';
 import InstanceNameEditor from './InstanceNameEditor.svelte';
+import Toggle from './Toggle.svelte';
+import { instanceSettingsSelectedTab } from '../stores';
 let drawer;
 let filter = '';
 export function openDrawer() {
-    listUsers();
+    listUsers(activeOnly);
     drawer?.openDrawer?.();
 }
 export function closeDrawer() {
@@ -41,10 +43,14 @@ function removeHash() {
 let users = [];
 let filteredUsers = [];
 let deleteConfirmedCallback = undefined;
-async function listUsers() {
-    users = await UserService.listUsersAsSuperAdmin({ perPage: 100000 });
+let activeOnly = false;
+async function listUsers(activeOnly) {
+    users = await UserService.listUsersAsSuperAdmin({ perPage: 100000, activeOnly: activeOnly });
 }
+$: listUsers(activeOnly);
 let tab = 'users';
+$: $instanceSettingsSelectedTab, tab = $instanceSettingsSelectedTab;
+$: tab, instanceSettingsSelectedTab.set(tab);
 let nbDisplayed = 50;
 let instanceSettings;
 let automateUsernameCreation = false;
@@ -61,7 +67,7 @@ async function enableAutomateUsernameCreationSetting() {
     });
     getAutomateUsernameCreationSetting();
     sendUserToast('Automatic username creation enabled');
-    listUsers();
+    listUsers(activeOnly);
 }
 async function updateName(name, email) {
     try {
@@ -72,7 +78,7 @@ async function updateName(name, email) {
             }
         });
         sendUserToast('User updated');
-        listUsers();
+        listUsers(activeOnly);
     }
     catch (e) {
         sendUserToast('Error updating user', true);
@@ -87,7 +93,12 @@ async function updateName(name, email) {
 	f={(x) => x.email + ' ' + x.name + ' ' + x.company}
 />
 
-<Drawer bind:this={drawer} on:open={listUsers} size="1200px" on:close={removeHash}>
+<Drawer
+	bind:this={drawer}
+	on:open={() => listUsers(activeOnly)}
+	size="1200px"
+	on:close={removeHash}
+>
 	<DrawerContent overflow_y={true} title="Instance settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full w-full">
 			<div>
@@ -121,11 +132,16 @@ async function updateName(name, email) {
 							<div class="h-full">
 								{#if !automateUsernameCreation && !isCloudHosted()}
 									<div class="mb-4">
-										<h3 class="mb-2">
-											Automatic username creation
-										</h3>
+										<h3 class="mb-2"> Automatic username creation </h3>
 										<div class="mb-2">
-											<span class="text-primary text-sm">Automatically create a username for new users based on their email, shared across workspaces. <a target="_blank" href="https://www.windmill.dev/docs/advanced/instance_settings#automatic-username-creation">Learn more</a></span>
+											<span class="text-primary text-sm"
+												>Automatically create a username for new users based on their email, shared
+												across workspaces. <a
+													target="_blank"
+													href="https://www.windmill.dev/docs/advanced/instance_settings#automatic-username-creation"
+													>Learn more</a
+												></span
+											>
 										</div>
 										<Button
 											btnClasses="w-auto"
@@ -155,10 +171,20 @@ async function updateName(name, email) {
 								{/if}
 
 								<div class="py-2 mb-4">
-									<InviteGlobalUser on:new={listUsers} />
+									<InviteGlobalUser on:new={() => listUsers(activeOnly)} />
 								</div>
 
-								<h3>All instance users</h3>
+								<div class="flex flex-row justify-between">
+									<h3>All instance users</h3>
+									<Toggle
+										bind:checked={activeOnly}
+										options={{
+											left: 'Show active users only',
+											leftTooltip:
+												'An active user is a user who has performed at least one action in the last 30 days'
+										}}
+									/>
+								</div>
 								<div class="pb-1" />
 								<div>
 									<input placeholder="Search users" bind:value={filter} class="input mt-1" />
@@ -172,12 +198,15 @@ async function updateName(name, email) {
 											{#if automateUsernameCreation}
 												<th>username</th>
 											{/if}
+											{#if activeOnly}
+												<th>kind</th>
+											{/if}
 											<th />
 											<th />
 										</tr>
 										<tbody slot="body" class="overflow-y-auto w-full h-full max-h-full">
 											{#if filteredUsers && users}
-												{#each filteredUsers.slice(0, nbDisplayed) as { email, super_admin, login_type, name, username } (email)}
+												{#each filteredUsers.slice(0, nbDisplayed) as { email, super_admin, devops, login_type, name, username, operator_only } (email)}
 													<tr class="border">
 														<td>{email}</td>
 														<td>{login_type}</td>
@@ -194,48 +223,86 @@ async function updateName(name, email) {
 																			{email}
 																			isConflict
 																			on:renamed={() => {
-																				listUsers()
+																				listUsers(activeOnly)
 																			}}
 																		/>
 																	{/key}
 																{/if}
 															</td>
 														{/if}
+														{#if activeOnly}
+															<td>
+																{#if operator_only}
+																	Operator only
+																{:else}
+																	Developer
+																{/if}
+															</td>
+														{/if}
 														<td>
 															<ToggleButtonGroup
-																selected={super_admin}
+																selected={super_admin ? "super_admin" : devops ? "devops" : "user"}
 																on:selected={async (e) => {
-																	console.log('BAR')
 																	if (email == $userStore?.email) {
 																		sendUserToast('You cannot demote yourself', true)
-																		listUsers()
+																		listUsers(activeOnly)
 																		return
 																	}
-																	await UserService.globalUserUpdate({
-																		email,
-																		requestBody: {
-																			is_super_admin: !super_admin
-																		}
-																	})
+
+																	let role = e.detail;
+
+																	if (role === "super_admin") {
+																		await UserService.globalUserUpdate({
+																			email,
+																			requestBody: {
+																				is_super_admin: true,
+																				is_devops: false
+																			}
+																		})
+																	}
+																	if (role === "devops") {
+																		await UserService.globalUserUpdate({
+																			email,
+																			requestBody: {
+																				is_super_admin: false,
+																				is_devops: true
+																			}
+																		})
+
+																	}
+																	if (role === "user") {
+																		await UserService.globalUserUpdate({
+																			email,
+																			requestBody: {
+																				is_super_admin: false,
+																				is_devops: false
+																			}
+																		})
+																	}
 																	sendUserToast('User updated')
-																	listUsers()
+																	listUsers(activeOnly)
 																}}
 															>
-																<ToggleButton value={false} size="xs" label="User" />
-																<ToggleButton value={true} size="xs" label="Superadmin" />
+																<ToggleButton value={"user"} size="xs" label="User" />
+																<ToggleButton value={"devops"} size="xs" label="Devops" tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin" />
+																<ToggleButton value={"super_admin"} size="xs" label="Superadmin" />
 															</ToggleButtonGroup>
 														</td>
 														<td>
 															<div class="flex flex-row gap-x-1 justify-end">
 																<InstanceNameEditor
+																	login_type={login_type}
 																	value={name}
 																	{username}
 																	{email}
+																	on:refresh={() => {
+																		listUsers(activeOnly)
+																	}}
 																	on:save={(e) => {
 																		updateName(e.detail, email)
 																	}}
 																	on:renamed={() => {
-																		listUsers()
+																		listUsers(activeOnly)
 																	}}
 																	{automateUsernameCreation}
 																/>
@@ -249,7 +316,7 @@ async function updateName(name, email) {
 																		deleteConfirmedCallback = async () => {
 																			await UserService.globalUserDelete({ email })
 																			sendUserToast(`User ${email} removed`)
-																			listUsers()
+																			listUsers(activeOnly)
 																		}
 																	}}
 																>
@@ -273,7 +340,7 @@ async function updateName(name, email) {
 							</div>
 						</TabContent>
 						<TabContent value="" values={settingsKeys}>
-							<InstanceSettings bind:this={instanceSettings} hideTabs hideSave {tab} />
+							<InstanceSettings bind:this={instanceSettings} hideTabs hideSave {tab} {closeDrawer}/>
 						</TabContent>
 					</svelte:fragment>
 				</Tabs>

package/package/components/Toast.svelte

@@ -2,6 +2,7 @@
 import { CheckCircle2, XCircleIcon } from 'lucide-svelte';
 import { onMount } from 'svelte';
 import Button from './common/button/Button.svelte';
+import { processMessage } from './toast';
 export let message;
 export let toastId;
 export let error = false;
@@ -32,7 +33,7 @@ onMount(() => {
 				{/if}
 			</div>
 			<div class="ml-3 flex-1 w-0">
-				<p class="text-sm text-secondary break-words">{message}</p>
+				<p class="text-sm text-secondary break-words">{@html processMessage(message)}</p>
 				{#if errorMessage}
 					<p
 						class="text-sm text-secondary border bg-surface-secondary p-2 w-full overflow-auto mt-2"

package/package/components/Toggle.svelte

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import Tooltip from './Tooltip.svelte';
+import { AlertTriangle } from 'lucide-svelte';
 export let options = {};
 export let checked = false;
 export let disabled = false;
@@ -10,9 +11,11 @@ export let textStyle = '';
 export let color = 'blue';
 export let id = (Math.random() + 1).toString(36).substring(10);
 export let lightMode = false;
+export let eeOnly = false;
 export let size = 'sm';
 const dispatch = createEventDispatcher();
 const bothOptions = Boolean(options.left) && Boolean(options.right);
+export let textDisabled = false;
 </script>
 
 <label
@@ -25,8 +28,8 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		<span
 			class={twMerge(
 				'mr-2 font-medium duration-50 select-none',
-				bothOptions ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
-				size === 'xs' ? 'text-xs' : 'text-sm',
+				bothOptions || textDisabled ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
+				size === 'xs' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
 				textClass
 			)}
 			style={textStyle}
@@ -55,12 +58,16 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		/>
 		<div
 			class={classNames(
-				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all ",
+				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all items-center",
 				color == 'red'
 					? 'peer-checked:bg-red-600'
-					: 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500',
+					: color == 'blue'
+					? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
+					: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-400',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
+					: size === '2xs'
+					? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
 					: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
 			)}
 		/>
@@ -69,7 +76,7 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		<span
 			class={twMerge(
 				'ml-2 font-medium duration-50 select-none',
-				bothOptions ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
+				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
 				size === 'xs' ? 'text-xs' : 'text-sm',
 				textClass
 			)}
@@ -77,9 +84,19 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		>
 			{options?.right}
 			{#if options?.rightTooltip}
-				<Tooltip light={lightMode}>{options?.rightTooltip}</Tooltip>
+				<Tooltip documentationLink={options.rightDocumentationLink}>
+					{options.rightTooltip}
+				</Tooltip>
 			{/if}
 		</span>
 	{/if}
 	<slot name="right" />
 </label>
+{#if eeOnly && disabled}
+	<span
+		class="inline-flex text-xs text-primary items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
+	>
+		<AlertTriangle size={16} />
+		EE only <Tooltip>Enterprise Edition only feature</Tooltip>
+	</span>
+{/if}

package/package/components/Toggle.svelte.d.ts

@@ -7,15 +7,18 @@ declare const __propDef: {
             leftTooltip?: string | undefined;
             right?: string | undefined;
             rightTooltip?: string | undefined;
+            rightDocumentationLink?: string | undefined;
         } | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         textClass?: string | undefined;
         textStyle?: string | undefined;
-        color?: "blue" | "red" | undefined;
+        color?: "blue" | "red" | "nord" | undefined;
         id?: string | undefined;
         lightMode?: boolean | undefined;
-        size?: "xs" | "sm" | undefined;
+        eeOnly?: boolean | undefined;
+        size?: "xs" | "sm" | "2xs" | undefined;
+        textDisabled?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/package/components/ToggleHubWorkspaceQuick.svelte

@@ -6,7 +6,7 @@ export let selected = 'all';
 </script>
 
 <div class="max-w-min">
-	<ToggleButtonGroup bind:selected>
+	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
 		<ToggleButton value="all" label="All" light small />
 		<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small />
 		<ToggleButton value="workspace" icon={Building} label="Workspace" light small />

package/package/components/UserSettings.svelte

@@ -16,6 +16,7 @@ import Toggle from './Toggle.svelte';
 import { createEventDispatcher } from 'svelte';
 export let scopes = undefined;
 export let newTokenLabel = undefined;
+export let newTokenWorkspace = undefined;
 export let newToken = undefined;
 let newPassword;
 let passwordError;
@@ -65,7 +66,12 @@ async function createToken() {
         date.setDate(date.getDate() + newTokenExpiration);
     }
     newToken = await UserService.createToken({
-        requestBody: { label: newTokenLabel, expiration: date?.toISOString(), scopes }
+        requestBody: {
+            label: newTokenLabel,
+            expiration: date?.toISOString(),
+            scopes,
+            workspace_id: newTokenWorkspace
+        }
     });
     dispatch('tokenCreated', newToken);
     listTokens();

package/package/components/UserSettings.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         scopes?: string[] | undefined;
         newTokenLabel?: string | undefined;
+        newTokenWorkspace?: string | undefined;
         newToken?: string | undefined;
         openDrawer?: (() => void) | undefined;
         closeDrawer?: (() => void) | undefined;

package/package/components/{WorkspaceGroup.svelte → WorkerGroup.svelte}

@@ -1,5 +1,5 @@
 <script>import { Copy, Plus, RefreshCcwIcon, Settings, Trash, X } from 'lucide-svelte';
-import { Alert, Button, Drawer } from './common';
+import { Alert, Badge, Button, Drawer } from './common';
 import Multiselect from 'svelte-multiselect';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -17,6 +17,7 @@ import Label from './Label.svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
 import YAML from 'yaml';
 import Toggle from './Toggle.svelte';
+import AutoscalingConfigEditor from './AutoscalingConfigEditor.svelte';
 export let name;
 export let config;
 export let activeWorkers;
@@ -398,7 +399,7 @@ let createdTags = [];
 										</Tooltip>
 									</svelte:fragment>
 									<Multiselect
-										outerDivClass="text-secondary !bg-surface-disabled"
+										outerDivClass="text-secondary !bg-surface-disabled !border-0"
 										disabled={!$enterpriseLicense}
 										bind:selected={selectedPriorityTags}
 										on:change={(e) => {
@@ -412,6 +413,9 @@ let createdTags = [];
 													delete nconfig.priority_tags[e.detail.option]
 												}
 												dirty = true
+											} else if (e.detail.type === 'removeAll') {
+												nconfig.priority_tags = undefined
+												dirty = true
 											} else {
 												console.error(
 													`Priority tags multiselect - unknown event type: '${e.detail.type}'`
@@ -607,7 +611,7 @@ let createdTags = [];
 		<div class="mt-8" />
 
 		<Section
-			label="Environment Variables passed to Jobs"
+			label="Environment variables passed to jobs"
 			collapsable={true}
 			tooltip="Add static and dynamic environment variables that will be passed to jobs handled by this worker group. Dynamic environment variable values will be loaded from the worker host environment variables while static environment variables will be set directly from their values below."
 		>
@@ -742,8 +746,23 @@ let createdTags = [];
 		</Section>
 		<div class="mt-8" />
 
+		<Section label="Autoscaling" collapsable>
+			<div slot="header" class="ml-4 flex flex-row gap-2 items-center">
+				<Badge>Beta</Badge>
+				{#if nconfig.autoscaling?.enabled}
+					<Badge color="green">Enabled</Badge>
+				{/if}
+			</div>
+			<AutoscalingConfigEditor
+				on:dirty={() => (dirty = true)}
+				worker_tags={nconfig.worker_tags}
+				bind:config={nconfig.autoscaling}
+			/>
+		</Section>
+		<div class="mt-8" />
+
 		<Section
-			label="Init Script"
+			label="Init script"
 			tooltip="Bash scripts run at start of the workers. More lightweight than having to require the worker images at the cost of being run on every start."
 		>
 			<div class="flex gap-4 py-2 pb-6 items-baseline w-full">

package/package/components/{WorkspaceGroup.svelte.d.ts → WorkerGroup.svelte.d.ts}

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { type WorkerPing } from '../gen';
+import type { AutoscalingConfig } from './worker_group';
 declare const __propDef: {
     props: {
         name: string;
@@ -12,6 +13,7 @@ declare const __propDef: {
             additional_python_paths?: string[];
             pip_local_dependencies?: string[];
             min_alive_workers_alert_threshold?: number;
+            autoscaling?: AutoscalingConfig;
         };
         activeWorkers: number;
         customTags: string[] | undefined;
@@ -26,9 +28,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type WorkspaceGroupProps = typeof __propDef.props;
-export type WorkspaceGroupEvents = typeof __propDef.events;
-export type WorkspaceGroupSlots = typeof __propDef.slots;
-export default class WorkspaceGroup extends SvelteComponent<WorkspaceGroupProps, WorkspaceGroupEvents, WorkspaceGroupSlots> {
+export type WorkerGroupProps = typeof __propDef.props;
+export type WorkerGroupEvents = typeof __propDef.events;
+export type WorkerGroupSlots = typeof __propDef.slots;
+export default class WorkerGroup extends SvelteComponent<WorkerGroupProps, WorkerGroupEvents, WorkerGroupSlots> {
 }
 export {};

package/package/components/WorkerTagPicker.svelte

@@ -3,6 +3,7 @@ import { ExternalLink, RotateCw, Loader2 } from 'lucide-svelte';
 import { workerTags } from '../stores';
 import AssignableTags from './AssignableTags.svelte';
 import { WorkerService } from '../gen';
+import WorkerTagSelect from './WorkerTagSelect.svelte';
 export let tag;
 export let popupPlacement = 'bottom-end';
 loadWorkerGroups();
@@ -17,31 +18,10 @@ async function loadWorkerGroups() {
 	<div class="max-w-sm grow">
 		{#if $workerTags}
 			{#if $workerTags?.length ?? 0 > 0}
-				<select
-					value={tag}
-					on:change={(e) => {
-						if (e.target?.['value'] == '') {
-							tag = undefined
-						} else if (e?.target?.['value']) {
-							tag = e.target?.['value']
-						}
-					}}
-				>
-					{#if tag}
-						<option value="">reset to default</option>
-					{:else}
-						<option value="" disabled selected>Worker Group Tag</option>
-					{/if}
-					{#if tag && tag != '' && !($workerTags ?? []).includes(tag)}
-						<option value={tag} selected>{tag}</option>
-					{/if}
-					{#each $workerTags ?? [] as tag (tag)}
-						<option value={tag}>{tag}</option>
-					{/each}
-				</select>
+				<WorkerTagSelect noLabel bind:tag />
 			{:else}
 				<div class="text-sm text-secondary flex flex-row gap-2">
-					No custom worker group tag defined on this instance in "Workers {'->'} Custom Tags"
+					No custom worker group tag defined on this instance in "Workers {'->'} Custom tags"
 					<a
 						href="https://www.windmill.dev/docs/core_concepts/worker_groups"
 						target="_blank"
@@ -68,5 +48,5 @@ async function loadWorkerGroups() {
 		}}
 		startIcon={{ icon: RotateCw }}
 	/>
-	<AssignableTags placement={popupPlacement} />
+	<AssignableTags placement={popupPlacement} color="nord" />
 </div>

package/package/components/WorkerTagSelect.svelte

@@ -0,0 +1,40 @@
+<script>import { workerTags } from '../stores';
+import { WorkerService } from '../gen';
+export let tag;
+export let noLabel = false;
+export let nullTag = undefined;
+loadWorkerGroups();
+async function loadWorkerGroups() {
+    if (!$workerTags) {
+        $workerTags = await WorkerService.getCustomTags();
+    }
+}
+</script>
+
+<div class="flex gap-1 items-center">
+	{#if !noLabel}
+		<div class="text-tertiary text-2xs">tag</div>
+	{/if}
+	<select
+		class="min-w-32"
+		placeholder="Tag"
+		bind:value={tag}
+		on:change={(e) => {
+			if (tag == '') {
+				tag = undefined
+			}
+		}}
+	>
+		{#if tag}
+			<option value="">reset to default</option>
+		{:else}
+			<option value={undefined} disabled selected>{nullTag ? `default: ${nullTag}` : ''}</option>
+		{/if}
+		{#if tag && tag != '' && !($workerTags ?? []).includes(tag)}
+			<option value={tag} selected>{tag}</option>
+		{/if}
+		{#each $workerTags ?? [] as tag (tag)}
+			<option value={tag}>{tag}</option>
+		{/each}
+	</select>
+</div>

package/package/components/WorkerTagSelect.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        tag: string | undefined;
+        noLabel?: boolean | undefined;
+        nullTag?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WorkerTagSelectProps = typeof __propDef.props;
+export type WorkerTagSelectEvents = typeof __propDef.events;
+export type WorkerTagSelectSlots = typeof __propDef.slots;
+export default class WorkerTagSelect extends SvelteComponent<WorkerTagSelectProps, WorkerTagSelectEvents, WorkerTagSelectSlots> {
+}
+export {};

package/package/components/ZitadelSetting.svelte

@@ -46,6 +46,10 @@ function changeOrg(org) {
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -8,13 +8,16 @@ import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { deepEqual } from 'fast-equals';
+import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
+import { defaultIfEmptyString } from '../../../../utils';
+import { userStore } from '../../../../stores';
 export let id;
 export let componentInput;
 export let initializing = undefined;
 export let render;
 export let configuration;
 export let customCss = undefined;
-const { worldStore, connectingInput, app, selectedComponent, componentControl } = getContext('AppViewerContext');
+const { worldStore, connectingInput, app, selectedComponent, componentControl, appPath, isEditor, workspace } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const outputs = initOutput($worldStore, id, {
@@ -68,6 +71,13 @@ function onDefaultChange() {
     previousDefault = structuredClone(resolvedConfig.defaultValues);
     args = previousDefault ?? {};
 }
+function computeS3ForceViewerPolicies() {
+    if (!isEditor) {
+        return undefined;
+    }
+    const policy = computeWorkspaceS3FileInputPolicy();
+    return policy;
+}
 </script>
 
 {#each Object.keys(components['schemaformcomponent'].initialData.configuration) as key (key)}
@@ -108,6 +118,9 @@ function onDefaultChange() {
 					bind:this={schemaForm}
 					displayType={Boolean(resolvedConfig.displayType)}
 					largeGap={Boolean(resolvedConfig.largeGap)}
+					appPath={defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
+					{computeS3ForceViewerPolicies}
+					{workspace}
 					{css}
 				/>
 			</div>

package/package/components/apps/components/display/AppDownload.svelte

@@ -83,7 +83,8 @@ let css = initCss($app.css?.downloadcomponent, customCss);
 				color={resolvedConfig.color}
 				download={resolvedConfig.filename}
 				href={transformBareBase64IfNecessary(resolvedConfig.source)}
-				target="_self"
+				target="_blank"
+				ref="external"
 				nonCaptureEvent
 			>
 				<span class="truncate inline-flex gap-2 items-center">