windmill-components 1.504.5 → 1.510.1

package/package/components/schema/AddPropertyFormV2.svelte

@@ -3,7 +3,7 @@ import { Button } from '../common';
 import { CornerDownLeft } from 'lucide-svelte';
 import Popover from '../meltComponents/Popover.svelte';
 let name = $state('');
-let { customName = undefined, disabled = false, trigger } = $props();
+let { customName = undefined, disabled = false, trigger, noPopover } = $props();
 const dispatch = createEventDispatcher();
 function addField() {
     dispatch('add', { name });
@@ -12,37 +12,46 @@ function addField() {
 const trigger_render = $derived(trigger);
 </script>
 
-<Popover closeButton={false} class="w-full" {disabled}>
-	{#snippet trigger()}
-		{@render trigger_render?.()}
-	{/snippet}
-	{#snippet content({ close })}
-		<div class="flex flex-row gap-2 p-2 rounded-md">
-			<input
-				bind:value={name}
-				placeholder={`${customName ?? 'Field'} name`}
-				onkeydown={(event) => {
-					if (event.key === 'Enter') {
-						addField()
-						close()
-					}
-				}}
-				{disabled}
-			/>
-			<Button
-				variant="contained"
-				color="dark"
-				size="xs"
-				id="flow-editor-add-property"
-				on:click={() => {
+{#snippet form({ close })}
+	<div class="flex flex-row gap-2 p-2 rounded-md">
+		<input
+			bind:value={name}
+			class="max-w-80"
+			placeholder={`${customName ?? 'Field'} name`}
+			onkeydown={(event) => {
+				if (event.key === 'Enter') {
 					addField()
 					close()
-				}}
-				disabled={!name || disabled}
-				shortCut={{ Icon: CornerDownLeft, withoutModifier: true }}
-			>
-				Add {customName ? customName.toLowerCase() : 'field'}
-			</Button>
-		</div>
-	{/snippet}
-</Popover>
+				}
+			}}
+			{disabled}
+		/>
+		<Button
+			variant="contained"
+			color="dark"
+			size="xs"
+			id="flow-editor-add-property"
+			on:click={() => {
+				addField()
+				close()
+			}}
+			disabled={!name || disabled}
+			shortCut={{ Icon: CornerDownLeft, withoutModifier: true }}
+		>
+			Add {customName ? customName.toLowerCase() : 'field'}
+		</Button>
+	</div>
+{/snippet}
+
+{#if noPopover}
+	{@render form({ close: () => {} })}
+{:else}
+	<Popover closeButton={false} class="w-full" {disabled}>
+		{#snippet trigger()}
+			{@render trigger_render?.()}
+		{/snippet}
+		{#snippet content({ close })}
+			{@render form({ close })}
+		{/snippet}
+	</Popover>
+{/if}

package/package/components/schema/AddPropertyFormV2.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     customName?: string | undefined;
     disabled?: boolean;
     trigger?: import('svelte').Snippet;
+    noPopover?: boolean;
 }
 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> & {

package/package/components/schema/AddPropertyV2.svelte

@@ -2,7 +2,7 @@
 import { emptySchema, sendUserToast } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import AddPropertyFormV2 from './AddPropertyFormV2.svelte';
-let { schema = $bindable(emptySchema()), trigger } = $props();
+let { schema = $bindable(emptySchema()), trigger, noPopover } = $props();
 export const DEFAULT_PROPERTY = {
     selectedType: 'string',
     description: '',
@@ -130,6 +130,7 @@ const trigger_render = $derived(trigger);
 </script>
 
 <AddPropertyFormV2
+	{noPopover}
 	on:add={(e) => {
 		try {
 			handleAddOrEditArgument({

package/package/components/schema/AddPropertyV2.svelte.d.ts

@@ -2,6 +2,7 @@ import { type Schema, type ModalSchemaProperty } from '../../common';
 interface Props {
     schema?: Schema | any;
     trigger?: import('svelte').Snippet;
+    noPopover?: boolean;
 }
 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> & {

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -7,7 +7,7 @@ import AddPropertyV2 from './AddPropertyV2.svelte';
 import { Plus } from 'lucide-svelte';
 import Select from '../select/Select.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
-let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), onSchemaChange } = $props();
+let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), onSchemaChange, customUi } = $props();
 let resourceIsTextFile = $state(false);
 let addPropertyComponent = $state(undefined);
 let editableSchemaForm = $state(undefined);
@@ -61,6 +61,7 @@ let suggestedFileExtensions = $state([
 	>
 		{#if noPreview}
 			<AddPropertyV2
+				noPopover={customUi?.noAddPopover}
 				bind:schema
 				bind:this={addPropertyComponent}
 				on:change={() => onSchemaChange?.({ schema: $state.snapshot(schema) })}
@@ -96,6 +97,7 @@ let suggestedFileExtensions = $state([
 			{#snippet addProperty()}
 				{#if !noPreview}
 					<AddPropertyV2
+						noPopover={customUi?.noAddPopover}
 						bind:schema
 						bind:this={addPropertyComponent}
 						on:change={() => onSchemaChange?.({ schema })}

package/package/components/schema/editable_schema_wrapper.d.ts

@@ -5,6 +5,9 @@ export type EditableSchemaWrapperProps = {
     noPreview?: boolean;
     fullHeight?: boolean;
     formatExtension?: string | undefined;
+    customUi?: {
+        noAddPopover?: boolean;
+    };
     onSchemaChange?: ({ schema }: {
         schema: Schema;
     }) => void;

package/package/components/scriptEditor/LogPanel.svelte

@@ -76,10 +76,10 @@ let forceJson = $state(false);
 				{#if selectedTab === 'logs'}
 					<SplitPanesWrapper>
 						<Splitpanes horizontal>
-							{#if previewJob?.is_flow_step == false && previewJob?.flow_status && !(typeof previewJob.flow_status == 'object' && '_metadata' in previewJob.flow_status)}
+							{#if previewJob?.workflow_as_code_status}
 								<Pane class="relative">
 									<WorkflowTimeline
-										flow_status={asWorkflowStatus(previewJob.flow_status)}
+										flow_status={asWorkflowStatus(previewJob.workflow_as_code_status)}
 										flowDone={previewJob.type == 'CompletedJob'}
 									/>
 								</Pane>
@@ -93,6 +93,7 @@ let forceJson = $state(false);
 									isLoading={previewJob?.['running'] == false && previewIsLoading}
 									tag={previewJob?.tag}
 									download={customUi?.disableDownload !== true}
+									tagLabel={customUi?.tagLabel}
 								/>
 							</Pane>
 							<Pane>

package/package/components/script_builder.d.ts

@@ -1,5 +1,5 @@
 import type { NewScript } from '../gen';
-import type { AssetWithAccessType } from './assets/lib';
+import type { AssetWithAltAccessType } from './assets/lib';
 import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui';
 import type { DiffDrawerI } from './diff_drawer';
 import type { ScriptBuilderFunctionExports } from './scriptBuilder';
@@ -8,7 +8,7 @@ import type { NewScriptWithDraftAndDraftTriggers, Trigger } from './triggers/uti
 export interface ScriptBuilderProps {
     script: NewScript & {
         draft_triggers?: Trigger[];
-        fallback_access_types?: AssetWithAccessType[];
+        assets?: AssetWithAltAccessType[];
     };
     disableAi?: boolean;
     fullyLoaded?: boolean;

package/package/components/settings/CreateToken.svelte

@@ -4,12 +4,13 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import Toggle from '../Toggle.svelte';
-import { UserService } from '../../gen';
-import { copyToClipboard } from '../../utils';
-import { Clipboard } from 'lucide-svelte';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
+import { IntegrationService, UserService } from '../../gen';
 import { createEventDispatcher } from 'svelte';
-let { showMcpMode = false, defaultNewTokenWorkspace, scopes, actions, newTokenLabel = $bindable(undefined) } = $props();
+import MultiSelect from '../select/MultiSelect.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+import TokenDisplay from './TokenDisplay.svelte';
+import ScopeSelector from './ScopeSelector.svelte';
+let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $props();
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
@@ -19,10 +20,9 @@ let mcpCreationMode = $state(false);
 let newMcpScope = $state('favorites');
 let loadingApps = $state(false);
 let errorFetchApps = $state(false);
-// let allApps = $state<string[]>([])
-function handleCopyClick() {
-    copyToClipboard(newToken ?? '');
-}
+let allApps = $state([]);
+let customScopes = $state([]);
+let showCustomScopes = $state(false);
 const dispatch = createEventDispatcher();
 function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
     if (!currentWorkspace) {
@@ -47,6 +47,9 @@ async function createToken(mcpMode = false) {
                 tokenScopes.push(`mcp:hub:${newMcpApps.join(',')}`);
             }
         }
+        else if (showCustomScopes && customScopes.length > 0) {
+            tokenScopes = customScopes;
+        }
         const createdToken = await UserService.createToken({
             requestBody: {
                 label: newTokenLabel,
@@ -62,8 +65,8 @@ async function createToken(mcpMode = false) {
             newToken = `${createdToken}`;
         }
         dispatch('tokenCreated', newToken ?? newMcpToken);
-        if (actions) {
-            actions();
+        if (onTokenCreated) {
+            onTokenCreated(newToken ?? newMcpToken ?? '');
         }
         mcpCreationMode = false;
     }
@@ -73,37 +76,36 @@ async function createToken(mcpMode = false) {
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
 const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
+$effect(() => {
+    if (mcpCreationMode) {
+        getAllApps();
+    }
+    else {
+        newMcpApps = [];
+    }
+});
+async function getAllApps() {
+    if (allApps.length > 0) {
+        return;
+    }
+    try {
+        loadingApps = true;
+        allApps = (await IntegrationService.listHubIntegrations({
+            kind: 'script'
+        })).map((x) => x.name);
+    }
+    catch (err) {
+        console.error('Hub is not available');
+        allApps = [];
+        errorFetchApps = true;
+    }
+    finally {
+        loadingApps = false;
+    }
+}
 </script>
 
 <div>
-	{#if newToken}
-		<div
-			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
-		>
-			<div>
-				Added token: <button onclick={handleCopyClick} class="inline-flex gap-2 items-center">
-					{newToken}
-					<Clipboard size={12} />
-				</button>
-			</div>
-			<div class="pt-1 text-xs ml-2">
-				Make sure to copy your personal access token now. You won't be able to see it again!
-			</div>
-		</div>
-	{/if}
-
-	{#if newMcpToken}
-		<div
-			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
-		>
-			<p class="text-sm mb-2">New MCP URL:</p>
-			<ClipboardPanel content={`${mcpBaseUrl}${newMcpToken}`} />
-			<p class="pt-1 text-xs">
-				Make sure to copy this URL now. You won't be able to see it again!
-			</p>
-		</div>
-	{/if}
-
 	<div class="py-3 px-3 border rounded-md mb-6 bg-surface-secondary min-w-min">
 		<h3 class="pb-3 font-semibold">Add a new token</h3>
 
@@ -149,7 +151,27 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			</div>
 		{/if}
 
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+		{#if !mcpCreationMode && (!scopes || scopes.length === 0)}
+			<div class="flex flex-col gap-2">
+				<Toggle
+					checked={showCustomScopes}
+					on:change={(e) => {
+						showCustomScopes = e.detail
+					}}
+					options={{
+						right: 'Limit token permissions',
+						rightTooltip:
+							'By default, tokens have full API access. Enable this to restrict the token to specific scopes.'
+					}}
+					size="xs"
+				/>
+				{#if showCustomScopes}
+					<ScopeSelector bind:selectedScopes={customScopes} />
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
 			{#if mcpCreationMode}
 				<div>
 					<span class="block mb-1">Scope</span>
@@ -178,7 +200,12 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 					{:else if errorFetchApps}
 						<div>Error fetching apps</div>
 					{:else}
-						<!-- MultiSelectWrapper was confirmed not to be necessary : deleted -->
+						<MultiSelect
+							items={safeSelectItems(allApps)}
+							placeholder="Select apps"
+							bind:value={newMcpApps}
+							class="!bg-surface"
+						/>
 					{/if}
 				</div>
 
@@ -232,4 +259,12 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			</Button>
 		</div>
 	</div>
+
+	{#if newToken}
+		<TokenDisplay token={newToken} type="token" />
+	{/if}
+
+	{#if newMcpToken}
+		<TokenDisplay token={newMcpToken} type="mcp" mcpUrl={`${mcpBaseUrl}${newMcpToken}`} />
+	{/if}
 </div>

package/package/components/settings/CreateToken.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     newTokenLabel?: string;
     defaultNewTokenWorkspace?: string;
     scopes?: string[];
-    actions?: () => void;
+    onTokenCreated?: (token: string) => void;
     displayCreateToken?: boolean;
 }
 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> {