windmill-components 1.623.2 → 1.642.0

package/package/components/ChangeInstanceUsernameInner.svelte

@@ -29,7 +29,7 @@ const dispatch = createEventDispatcher();
 async function renameUser() {
     loading = true;
     try {
-        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? true;
         if (!automateUsernameCreation) {
             sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
             return;

package/package/components/CompareWorkspaces.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { AlertTriangle, ArrowDown, ArrowDownRight, ArrowRight, ArrowUp, ArrowUpRight, Building, DiffIcon, GitFork, Loader2 } from 'lucide-svelte';
 import { Alert, Badge } from './common';
-import { AppService, FlowService, FolderService, RawAppService, ResourceService, ScheduleService, ScriptService, VariableService, WorkspaceService } from '../gen';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, VariableService, WorkspaceService } from '../gen';
 import Button from './common/button/Button.svelte';
 import DiffDrawer from './DiffDrawer.svelte';
+import ParentWorkspaceProtectionAlert from './ParentWorkspaceProtectionAlert.svelte';
 import { getAllModules } from './flows/flowExplorer';
 import { userWorkspaces, workspaceStore } from '../stores';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -17,6 +18,7 @@ let parentWorkspaceInfo = $derived($userWorkspaces.find((w) => w.id == parentWor
 let mergeIntoParent = $state(true);
 let deploying = $state(false);
 let hasAutoSelected = $state(false);
+let canDeployToParent = $state(true);
 let selectableDiffs = $derived(comparison?.diffs.filter((diff) => {
     if (mergeIntoParent) {
         return diff.ahead > 0;
@@ -143,22 +145,6 @@ async function getValue(kind, path, workspace) {
             });
             return resource.schema;
         }
-        else if (kind == 'raw_app') {
-            throw new Error('Raw app deploy not implemented yet');
-            // const app = await RawAppService.getRawAppData({
-            // 	workspace: workspace,
-            // 	path: path
-            // })
-            // if (alreadyExists) {
-            // }
-            // await RawAppService.updateRawApp({
-            // 	workspace: workspace,
-            // 	path: path,
-            // 	requestBody: {
-            // 		path: path
-            // 	}
-            // })
-        }
         else if (kind == 'folder') {
             const folder = await FolderService.getFolder({
                 workspace: workspace,
@@ -237,12 +223,6 @@ async function checkAlreadyExists(kind, path, workspace) {
             path: path
         });
     }
-    else if (kind == 'raw_app') {
-        exists = await RawAppService.existsRawApp({
-            workspace: workspace,
-            path: path
-        });
-    }
     else if (kind == 'variable') {
         exists = await VariableService.existsVariable({
             workspace: workspace,
@@ -522,22 +502,6 @@ async function deploy(kind, path, workspaceToDeployTo, workspaceFrom) {
                 });
             }
         }
-        else if (kind == 'raw_app') {
-            throw new Error('Raw app deploy not implemented yet');
-            // const app = await RawAppService.getRawAppData({
-            // 	workspace: workspaceFrom,
-            // 	path: path
-            // })
-            // if (alreadyExists) {
-            // }
-            // await RawAppService.updateRawApp({
-            // 	workspace: workspaceFrom,
-            // 	path: path,
-            // 	requestBody: {
-            // 		path: path
-            // 	}
-            // })
-        }
         else if (kind == 'folder') {
             await FolderService.createFolder({
                 workspace: workspaceToDeployTo,
@@ -758,6 +722,14 @@ $effect(() => {
 			</div>
 		</div>
 
+		{#if mergeIntoParent}
+			<ParentWorkspaceProtectionAlert
+				{parentWorkspaceId}
+				onUpdateCanDeploy={(canDeploy) => {
+					canDeployToParent = canDeploy
+				}}
+			/>
+		{/if}
 		{#if conflictingDiffs.length > 0}
 			<Alert title="Conflicting changes detected" type="warning" class="mt-2">
 				<!-- <AlertTriangle class="w-4 h-4" /> -->
@@ -768,7 +740,7 @@ $effect(() => {
 				</span>
 			</Alert>
 		{/if}
-		{#if hasBehindChanges && hasAheadChanges}
+		{#if hasBehindChanges && hasAheadChanges && !(mergeIntoParent && !canDeployToParent)}
 			<Alert
 				title="This fork is behind {parentWorkspaceId} and needs to be up to date before deploying"
 				type="warning"
@@ -855,7 +827,6 @@ $effect(() => {
 							kind={diff.kind}
 							canFavorite={false}
 							workspaceId=""
-							starred={false}
 						>
 							{#snippet customSummary()}
 								{#if oldSummary != newSummary && isSelectable && existsInBothWorkspaces}
@@ -962,20 +933,23 @@ $effect(() => {
 
 				<div class="flex flex-col items-end gap-2">
 					{#if comparison.all_behind_items_visible && comparison.all_ahead_items_visible}
-						<Button
-							color="blue"
-							disabled={selectedItems.length === 0 ||
-								deploying ||
-								(hasBehindChanges && !allowBehindChangesOverride)}
-							loading={deploying}
-							on:click={deployChanges}
-						>
-							{mergeIntoParent ? 'Deploy' : 'Update'}
-							{selectedItems.length} Item{selectedItems.length !== 1 ? 's' : ''}
-							{#if selectedConflicts != 0}
-								({selectedConflicts} conflicts)
-							{/if}
-						</Button>
+						{#if !(mergeIntoParent && !canDeployToParent)}
+							<Button
+								color="blue"
+								disabled={selectedItems.length === 0 ||
+									deploying ||
+									(hasBehindChanges && !allowBehindChangesOverride) ||
+									(mergeIntoParent && !canDeployToParent)}
+								loading={deploying}
+								on:click={deployChanges}
+							>
+								{mergeIntoParent ? 'Deploy' : 'Update'}
+								{selectedItems.length} Item{selectedItems.length !== 1 ? 's' : ''}
+								{#if selectedConflicts != 0}
+									({selectedConflicts} conflicts)
+								{/if}
+							</Button>
+						{/if}
 					{/if}
 
 					{#if deploymentErrorMessage != ''}
@@ -998,6 +972,4 @@ $effect(() => {
 			<div class="text-gray-500">No comparison data available</div>
 		</div>
 	{/if}
-
-	<!-- <DeployWorkspaceItems kind="script" initialPath="u/admin/economical_script" workspaceToDeployTo={parentWorkspaceId} /> -->
 </div>

package/package/components/ConcurrentJobsChart.svelte

@@ -196,6 +196,6 @@ let options = $derived({
 });
 </script>
 
-<div class="relative max-h-40">
+<div class="relative h-44">
 	<Line {data} {options} />
 </div>

package/package/components/ConnectionSection.svelte

@@ -8,6 +8,7 @@ import { WorkspaceService } from '../gen';
 import { sendUserToast } from '../utils';
 import TeamSelector from './TeamSelector.svelte';
 import CollapseLink from './CollapseLink.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { platform, teamName, display_name, scriptPath = $bindable(), initialPath = $bindable(), itemKind = $bindable('script'), onDisconnect, onSelect, connectHref, createScriptHref, createFlowHref, documentationLink, onLoadSettings, workspaceConfig, hideConnectButton = false, isOAuthEnabled = false, workspaceSpecificConnection = false } = $props();
 let selectedTeam = $state(undefined);
 async function connectTeams() {
@@ -43,85 +44,80 @@ async function connectTeams() {
 const capitalizedPlatform = $derived(platform.charAt(0).toUpperCase() + platform.slice(1));
 </script>
 
-<div class="flex flex-col gap-1">
-	<div class="text-xs font-semibold text-emphasis">{capitalizedPlatform} connection</div>
-	<div class="rounded-md border p-4 flex flex-col gap-6">
-		{#if workspaceConfig}
-			{@render workspaceConfig()}
-		{/if}
-		{#if teamName || workspaceSpecificConnection}
-			<div class="flex flex-col gap-2 max-w-sm">
-				<div class="flex flex-row gap-2 items-center">
-					{#if display_name}
-						<Badge color="green">
-							<Plug size={14} />
-							Workspace connected to {capitalizedPlatform} team '{display_name}'</Badge
-						>
+<SettingCard label={capitalizedPlatform + ' connection'}>
+	{#if workspaceConfig}
+		{@render workspaceConfig()}
+	{/if}
+	{#if teamName || workspaceSpecificConnection}
+		<div class="flex flex-col gap-2 max-w-sm">
+			<div class="flex flex-row gap-2 items-center">
+				{#if display_name}
+					<Badge color="green">
+						<Plug size={14} />
+						Workspace connected to {capitalizedPlatform} team '{display_name}'</Badge
+					>
+				{/if}
+				<Button
+					unifiedSize="md"
+					startIcon={{ icon: Unplug }}
+					disabled={!$enterpriseLicense && platform === 'teams'}
+					onclick={onDisconnect}
+					destructive
+					variant="subtle"
+				>
+					Disconnect {capitalizedPlatform}
+					{!$enterpriseLicense && platform === 'teams' ? '(EE only)' : ''}
+				</Button>
+			</div>
+		</div>
+	{:else if !hideConnectButton}
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-row gap-2 items-center">
+				{#if platform === 'teams'}
+					{#if $enterpriseLicense && isOAuthEnabled}
+						<TeamSelector
+							bind:selectedTeam
+							minWidth="180px"
+							disabled={!$enterpriseLicense}
+							onError={(e) => {
+								const errorMsg =
+									typeof (e as any)?.body === 'string'
+										? (e as any).body
+										: e?.message || 'Unknown error'
+								sendUserToast('Failed to load teams: ' + errorMsg, true)
+							}}
+						/>
 					{/if}
 					<Button
 						unifiedSize="md"
-						startIcon={{ icon: Unplug }}
-						disabled={!$enterpriseLicense && platform === 'teams'}
-						onclick={onDisconnect}
-						destructive
-						variant="subtle"
+						variant="accent"
+						onclick={connectTeams}
+						endIcon={{ icon: MsTeamsIcon }}
+						disabled={!selectedTeam || !$enterpriseLicense}
 					>
-						Disconnect {capitalizedPlatform}
-						{!$enterpriseLicense && platform === 'teams' ? '(EE only)' : ''}
+						Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
+						{$enterpriseLicense ? '' : '(EE only)'}
 					</Button>
-				</div>
-			</div>
-		{:else if !hideConnectButton}
-			<div class="flex flex-col gap-2">
-				<div class="flex flex-row gap-2 items-center">
-					{#if platform === 'teams'}
-						{#if $enterpriseLicense && isOAuthEnabled}
-							<TeamSelector
-								bind:selectedTeam
-								minWidth="180px"
-								disabled={!$enterpriseLicense}
-								onError={(e) => {
-									const errorMsg =
-										typeof (e as any)?.body === 'string'
-											? (e as any).body
-											: e?.message || 'Unknown error'
-									sendUserToast('Failed to load teams: ' + errorMsg, true)
-								}}
-							/>
-						{/if}
-						<Button
-							unifiedSize="md"
-							variant="accent"
-							onclick={connectTeams}
-							endIcon={{ icon: MsTeamsIcon }}
-							disabled={!selectedTeam || !$enterpriseLicense}
-						>
-							Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
-							{$enterpriseLicense ? '' : '(EE only)'}
-						</Button>
-					{:else}
-						<Button
-							size="xs"
-							variant="accent"
-							href={connectHref}
-							startIcon={{ icon: Slack }}
-							disabled={!isOAuthEnabled}
-						>
-							Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
-						</Button>
-					{/if}
-				</div>
+				{:else}
+					<Button
+						size="xs"
+						variant="accent"
+						href={connectHref}
+						startIcon={{ icon: Slack }}
+						disabled={!isOAuthEnabled}
+					>
+						Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
+					</Button>
+				{/if}
 			</div>
-		{/if}
-	</div>
-</div>
-
-<div class="flex flex-col gap-1">
-	<div class="text-primary text-xs font-semibold"> Script or flow to run on /windmill command </div>
-	<span class="text-xs text-secondary mb-2"
-		>Pick a script or flow meant to be triggered when the `/windmill` command is invoked.</span
-	>
+		</div>
+	{/if}
+</SettingCard>
 
+<SettingCard
+	label="Script or flow to run on /windmill command"
+	description="Pick a script or flow meant to be triggered when the `/windmill` command is invoked."
+>
 	<div class="flex flex-row gap-2">
 		<ScriptPicker
 			kinds={['script']}
@@ -183,4 +179,4 @@ const capitalizedPlatform = $derived(platform.charAt(0).toUpperCase() + platform
 			<a href={documentationLink}>documentation</a>.
 		</div>
 	</CollapseLink>
-</div>
+</SettingCard>

package/package/components/CustomSso.svelte

@@ -24,7 +24,7 @@ $: if (!login_config) {
 }
 </script>
 
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Auth URL</span>
 	<input
 		type="text"
@@ -32,7 +32,7 @@ $: if (!login_config) {
 		bind:value={login_config.auth_url}
 	/>
 </label>
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Token URL</span>
 	<input
 		type="text"
@@ -40,7 +40,7 @@ $: if (!login_config) {
 		bind:value={login_config.token_url}
 	/>
 </label>
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Userinfo URL</span>
 	<input
 		type="text"
@@ -49,12 +49,12 @@ $: if (!login_config) {
 	/>
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Scopes</span>
 	<OauthScopes bind:scopes={login_config.scopes} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
 			>Not needed in most cases. Examples of uses: google apis require the 2 extra args
@@ -64,14 +64,14 @@ $: if (!login_config) {
 	<OauthExtraParams bind:extra_params={login_config.extra_params} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Payload <Tooltip
 			>Auth is passed in query most commonly. LinkedIn is an example of OAuth using

package/package/components/DBManager.svelte

@@ -15,7 +15,8 @@ import { safeSelectItems } from './select/utils.svelte';
 import { dbSupportsTransactionalDdl, diffTableEditorValues } from './apps/components/display/dbtable/queries/alterTable';
 import { resource } from 'runed';
 import { capitalize, onlyAlphaNumAndUnderscore, pluralize } from '../utils';
-let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, dbSupportsSchemas, colDefs, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features } = $props();
+import Star from './Star.svelte';
+let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, dbSupportsSchemas, colDefs, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features, asset } = $props();
 // Helper to check if a table is selected in multi-select mode
 function isTableSelected(schema, table) {
     return selectedTables.some((t) => t.schema === schema && t.table === table);
@@ -360,16 +361,26 @@ export const dbTable = () => _dbTable;
 			{:else}
 				<!-- Normal mode: show tables for selected schema -->
 				{#each filteredTableKeys as tableKey}
+					<!-- PLACEHOLDER -->
 					<button
 						class={'w-full text-sm font-normal flex gap-2 items-center h-10 cursor-pointer pl-3 pr-1 ' +
-							(selected.tableKey === tableKey ? 'bg-gray-500/25' : 'hover:bg-gray-500/10')}
+							(selected.tableKey === tableKey ? 'bg-surface-secondary' : 'hover:bg-surface-hover')}
 						onclick={() => (selected.tableKey = tableKey)}
 					>
-						<Table2 class="text-primary shrink-0" size={16} />
+						{#if asset}
+							<Star
+								kind="asset"
+								path={`${asset.kind}://${asset.path == 'main' ? '' : asset.path}/${selected.schemaKey}.${tableKey}`}
+							/>
+						{:else}
+							<Table2 class="text-primary shrink-0" size={14} />
+						{/if}
+
 						<p
 							class="db-manager-table-key truncate text-ellipsis grow text-left text-emphasis text-xs"
-							>{tableKey}</p
 						>
+							{tableKey}
+						</p>
 						<DropdownV2
 							items={() => [
 								{

package/package/components/DBManager.svelte.d.ts

@@ -4,6 +4,7 @@ import type { IDbSchemaOps, IDbTableOps } from './dbOps';
 import type { DbType } from './dbTypes';
 import type { Snippet } from 'svelte';
 import type { DbFeatures } from './apps/components/display/dbtable/dbFeatures';
+import type { Asset } from '../gen';
 /** Represents a selected table with its schema */
 export interface SelectedTable {
     schema: string;
@@ -32,6 +33,7 @@ type Props = {
     /** Tables that are already added and should show as disabled */
     disabledTables?: SelectedTable[];
     features?: DbFeatures;
+    asset?: Asset;
 };
 declare const DBManager: import("svelte").Component<Props, {
     dbTable: () => ({

package/package/components/DBManagerContent.svelte

@@ -114,6 +114,11 @@ export const dbManager = () => _dbManager;
 				})}
 				initialTableKey={input.specificTable}
 				initialSchemaKey={input.type == 'database' ? input.specificSchema : undefined}
+				asset={_input.type == 'ducklake'
+					? { kind: 'ducklake', path: _input.ducklake }
+					: _input.resourcePath.startsWith('datatable://')
+						? { kind: 'datatable', path: _input.resourcePath.substring('datatable://'.length) }
+						: undefined}
 				{dbType}
 				refresh={() => refresh()}
 				{dbSelector}

package/package/components/DBManagerContent.svelte.d.ts

@@ -42,6 +42,7 @@ declare const DBManagerContent: import("svelte").Component<Props, {
             selectedTables?: SelectedTable[];
             disabledTables?: SelectedTable[];
             features?: import("./apps/components/display/dbtable/dbFeatures").DbFeatures;
+            asset?: import("../gen").Asset;
         }>): void;
     } & {
         dbTable: () => ({

package/package/components/DBManagerDrawer.svelte

@@ -59,6 +59,8 @@ export function closeDrawer() {
     input = undefined;
     selectedDatatable = undefined;
     dbManagerContent?.clearReplResult();
+    if (window.location.hash.startsWith('#dbmanager:'))
+        history.replaceState('', document.title, window.location.href.replace(/#dbmanager:.*$/, ''));
 }
 let windowWidth = $state(window.innerWidth);
 let expand = $state(false);

package/package/components/DatatablePicker.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { WorkspaceService } from '../gen';
+import { globalDbManagerDrawer, workspaceStore } from '../stores';
+import Select from './select/Select.svelte';
+import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
+import { usePromise } from '../svelte5Utils.svelte';
+let { value = $bindable(undefined), disabled = false, disablePortal = false, showSchemaExplorer = false, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined } = $props();
+let datatables = usePromise(() => WorkspaceService.listDataTables({ workspace: $workspaceStore ?? '' }));
+let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
+</script>
+
+<div class={className}>
+	<Select
+		items={datatables.value?.map((d) => ({ value: d })) ?? []}
+		bind:value
+		loading={datatables.status === 'loading'}
+		{disabled}
+		{disablePortal}
+		{placeholder}
+		inputClass={selectInputClass}
+		{onClear}
+	/>
+	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'datatable', path: value })}
+		<ExploreAssetButton
+			class="mt-1 w-fit"
+			asset={{ kind: 'datatable', path: value }}
+			{dbManagerDrawer}
+		/>
+	{/if}
+</div>

package/package/components/DatatablePicker.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    value?: string | undefined;
+    disabled?: boolean;
+    disablePortal?: boolean;
+    showSchemaExplorer?: boolean;
+    placeholder?: string | undefined;
+    selectInputClass?: string;
+    class?: string;
+    onClear?: () => void;
+}
+declare const DatatablePicker: import("svelte").Component<Props, {}, "value">;
+type DatatablePicker = ReturnType<typeof DatatablePicker>;
+export default DatatablePicker;

package/package/components/DateTimeInput.svelte

@@ -141,13 +141,13 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 			unifiedSize="md"
 			wrapperClasses="h-full"
 			{disabled}
+			iconOnly
+			endIcon={{ icon: X }}
 			on:click={() => {
 				value = null
 				dispatch('clear')
 			}}
-		>
-			<X size={14} />
-		</Button>
+		></Button>
 	{/if}
 	<!-- <div>
 		<ToggleButtonGroup bind:selected={format} let:item>