windmill-components 1.677.1 → 1.695.0

package/package/components/settings/CreateToken.svelte

@@ -5,19 +5,18 @@ import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import Toggle from '../Toggle.svelte';
 import { UserService } from '../../gen';
 import TokenDisplay from './TokenDisplay.svelte';
-import ScopeSelector from './ScopeSelector.svelte';
-import McpScopeSelector from '../mcp/McpScopeSelector.svelte';
+import ScopesPicker from './ScopesPicker.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 import Select from '../select/Select.svelte';
-let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined), displayCreateToken = true } = $props();
+let { showMcpMode = false, openWithMcpMode = false, mcpOnly = false, lockWorkspace = false, title = 'Add a new token', defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined), displayCreateToken = true } = $props();
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
 let newTokenWorkspace = $state(untrack(() => defaultNewTokenWorkspace));
 let mcpCreationMode = $state(false);
-let mcpScope = $state('mcp:favorites');
-let customScopes = $state([]);
-let showCustomScopes = $state(false);
+let lastRequestedMcpMode = $state(undefined);
+let mcpLabelAutofilled = $state(false);
+let pickedScopes = $state(null);
 function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
     if (!currentWorkspace) {
         return workspacesList;
@@ -28,19 +27,37 @@ function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
     }
     return [{ id: currentWorkspace, name: currentWorkspace }, ...workspacesList];
 }
+function enterMcpMode() {
+    mcpCreationMode = true;
+    newTokenExpiration = undefined;
+    newTokenWorkspace = defaultNewTokenWorkspace ?? $workspaceStore;
+    newToken = undefined;
+    newMcpToken = undefined;
+    if (!newTokenLabel) {
+        newTokenLabel = 'MCP token';
+        mcpLabelAutofilled = true;
+    }
+    else {
+        mcpLabelAutofilled = false;
+    }
+}
+function exitMcpMode() {
+    mcpCreationMode = false;
+    newTokenExpiration = undefined;
+    newTokenWorkspace = defaultNewTokenWorkspace;
+    newMcpToken = undefined;
+    if (mcpLabelAutofilled) {
+        newTokenLabel = undefined;
+    }
+    mcpLabelAutofilled = false;
+}
 async function createToken(mcpMode = false) {
     try {
         let date;
         if (newTokenExpiration) {
             date = new Date(new Date().getTime() + newTokenExpiration * 1000);
         }
-        let tokenScopes = scopes;
-        if (mcpMode) {
-            tokenScopes = mcpScope.split(' ').filter((s) => s.length > 0);
-        }
-        else if (showCustomScopes && customScopes.length > 0) {
-            tokenScopes = customScopes;
-        }
+        const tokenScopes = scopes ?? pickedScopes ?? undefined;
         const createdToken = await UserService.createToken({
             requestBody: {
                 label: newTokenLabel,
@@ -50,13 +67,17 @@ async function createToken(mcpMode = false) {
             }
         });
         if (mcpMode) {
+            newToken = undefined;
             newMcpToken = `${createdToken}`;
         }
         else {
+            newMcpToken = undefined;
             newToken = `${createdToken}`;
         }
-        onTokenCreated(newToken ?? newMcpToken ?? '');
-        mcpCreationMode = false;
+        onTokenCreated(`${createdToken}`);
+        if (!mcpOnly) {
+            mcpCreationMode = false;
+        }
     }
     catch (err) {
         console.error('Failed to create token:', err);
@@ -64,13 +85,31 @@ async function createToken(mcpMode = false) {
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
 const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/mcp?token=`);
+$effect(() => {
+    const requestedMcpMode = mcpOnly || openWithMcpMode;
+    if (requestedMcpMode === lastRequestedMcpMode) {
+        return;
+    }
+    if (requestedMcpMode) {
+        enterMcpMode();
+    }
+    else {
+        exitMcpMode();
+    }
+    lastRequestedMcpMode = requestedMcpMode;
+});
+$effect(() => {
+    if (mcpLabelAutofilled && newTokenLabel !== 'MCP token') {
+        mcpLabelAutofilled = false;
+    }
+});
 </script>
 
 <div>
 	<div class="p-4 rounded-md mb-6 min-w-min bg-surface-tertiary">
-		<h3 class="pb-2 font-semibold text-emphasis text-sm">Add a new token</h3>
+		<h3 class="pb-2 font-semibold text-emphasis text-sm">{title}</h3>
 
-		{#if showMcpMode}
+		{#if showMcpMode && !mcpOnly}
 			<div
 				class="mb-4 flex flex-row flex-shrink-0"
 				use:triggerableByAI={{
@@ -80,15 +119,10 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			>
 				<Toggle
 					on:change={(e) => {
-						mcpCreationMode = e.detail
 						if (e.detail) {
-							newTokenLabel = 'MCP token'
-							newTokenExpiration = undefined
-							newTokenWorkspace = $workspaceStore
+							enterMcpMode()
 						} else {
-							newTokenLabel = undefined
-							newTokenExpiration = undefined
-							newTokenWorkspace = defaultNewTokenWorkspace
+							exitMcpMode()
 						}
 					}}
 					checked={mcpCreationMode}
@@ -112,51 +146,36 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 			</div>
 		{/if}
 
-		{#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 !scopes || scopes.length === 0}
+			<ScopesPicker
+				mode={mcpCreationMode ? 'mcp' : 'standard'}
+				workspaceId={newTokenWorkspace || $workspaceStore || ''}
+				bind:value={pickedScopes}
+			/>
 		{/if}
 
 		<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
 			{#if mcpCreationMode}
-				<div class="col-span-2">
-					<McpScopeSelector
-						workspaceId={newTokenWorkspace || $workspaceStore || ''}
-						bind:scope={mcpScope}
-					/>
-				</div>
+				{#if !lockWorkspace}
+					<div>
+						<span class="block mb-1 text-emphasis text-xs font-semibold">Workspace</span>
+						<Select
+							bind:value={newTokenWorkspace}
+							items={workspaces.map((w) => ({ label: w.name, value: w.id, subtitle: w.id }))}
+						/>
+					</div>
+				{/if}
+			{/if}
 
+			{#if !mcpOnly}
 				<div>
-					<span class="block mb-1 text-emphasis text-xs font-semibold">Workspace</span>
-					<Select
-						bind:value={newTokenWorkspace}
-						items={workspaces.map((w) => ({ label: w.name, value: w.id, subtitle: w.id }))}
-					/>
+					<span class="block mb-1 text-emphasis text-xs font-semibold"
+						>Label <span class="text-xs text-primary">(optional)</span></span
+					>
+					<TextInput inputProps={{ type: 'text' }} bind:value={newTokenLabel} class="w-full" />
 				</div>
 			{/if}
 
-			<div>
-				<span class="block mb-1 text-emphasis text-xs font-semibold"
-					>Label <span class="text-xs text-primary">(optional)</span></span
-				>
-				<TextInput inputProps={{ type: 'text' }} bind:value={newTokenLabel} class="w-full" />
-			</div>
-
 			{#if !mcpCreationMode}
 				<div>
 					<span class="block mb-1 text-xs text-emphasis font-semibold"
@@ -182,21 +201,22 @@ const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorks
 		</div>
 
 		<div class="mt-4 flex justify-end gap-2 flex-row">
-			<Button
-				on:click={() => {
-					mcpCreationMode = false
-				}}
-				variant="default"
-			>
-				Cancel
-			</Button>
+			{#if !mcpOnly}
+				<Button
+					on:click={() => {
+						exitMcpMode()
+					}}
+					variant="default"
+				>
+					Cancel
+				</Button>
+			{/if}
 			<Button
 				on:click={() => createToken(mcpCreationMode)}
-				disabled={mcpCreationMode &&
-					(newTokenWorkspace == undefined || !mcpScope || mcpScope.trim().length === 0)}
+				disabled={mcpCreationMode && (newTokenWorkspace == undefined || !pickedScopes)}
 				variant="accent"
 			>
-				New token
+				{mcpCreationMode ? 'Generate MCP URL' : 'New token'}
 			</Button>
 		</div>
 	</div>

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

@@ -1,6 +1,9 @@
 interface Props {
     showMcpMode?: boolean;
     openWithMcpMode?: boolean;
+    mcpOnly?: boolean;
+    lockWorkspace?: boolean;
+    title?: string;
     newTokenLabel?: string;
     defaultNewTokenWorkspace?: string;
     scopes?: string[];

package/package/components/settings/EditTokenScopesModal.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import { UserService } from '../../gen';
+import { sendUserToast } from '../../toast';
+import { workspaceStore } from '../../stores';
+import Button from '../common/button/Button.svelte';
+import Modal from '../common/modal/Modal.svelte';
+import ScopesPicker from './ScopesPicker.svelte';
+let { open = $bindable(), tokenPrefix, initialScopes, tokenWorkspaceId, onSaved } = $props();
+// Treat as MCP only when *all* existing scopes are mcp:* — mixed-scope or
+// null-scope tokens fall back to the standard picker so non-MCP scopes are
+// never silently dropped.
+const isMcp = $derived((initialScopes ?? []).length > 0 && (initialScopes ?? []).every((s) => s.startsWith('mcp:')));
+const mcpWorkspaceId = $derived(tokenWorkspaceId ?? $workspaceStore ?? '');
+let pickedScopes = $state(null);
+let saving = $state(false);
+async function save() {
+    if (!tokenPrefix)
+        return;
+    saving = true;
+    try {
+        await UserService.updateTokenScopes({
+            tokenPrefix,
+            requestBody: { scopes: pickedScopes }
+        });
+        sendUserToast('Token scopes updated');
+        onSaved?.();
+        open = false;
+    }
+    catch (err) {
+        sendUserToast(`Failed to update scopes: ${err.body ?? err.message}`, true);
+    }
+    finally {
+        saving = false;
+    }
+}
+const saveDisabled = $derived(saving || !tokenPrefix || (isMcp && !pickedScopes));
+</script>
+
+<Modal bind:open title="Edit token scopes" class="!max-w-3xl">
+	<div class="flex flex-col gap-3">
+		<div class="text-xs text-secondary">
+			Token <span class="font-mono">{tokenPrefix}****</span>
+		</div>
+
+		{#key tokenPrefix}
+			<ScopesPicker
+				mode={isMcp ? 'mcp' : 'standard'}
+				workspaceId={mcpWorkspaceId}
+				{initialScopes}
+				bind:value={pickedScopes}
+			/>
+		{/key}
+	</div>
+
+	{#snippet actions()}
+		<Button size="sm" variant="accent" disabled={saveDisabled} on:click={save}>Save</Button>
+	{/snippet}
+</Modal>

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

@@ -0,0 +1,10 @@
+interface Props {
+    open: boolean;
+    tokenPrefix?: string;
+    initialScopes?: string[];
+    tokenWorkspaceId?: string;
+    onSaved?: () => void;
+}
+declare const EditTokenScopesModal: import("svelte").Component<Props, {}, "open">;
+type EditTokenScopesModal = ReturnType<typeof EditTokenScopesModal>;
+export default EditTokenScopesModal;

package/package/components/settings/ScopesPicker.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">import Toggle from '../Toggle.svelte';
+import ScopeSelector from './ScopeSelector.svelte';
+import McpScopeSelector from '../mcp/McpScopeSelector.svelte';
+let { mode, workspaceId = '', initialScopes, value = $bindable() } = $props();
+const initialMcpScope = $derived((initialScopes ?? []).length > 0 ? (initialScopes ?? []).join(' ') : undefined);
+// Standard-mode local state, seeded from initialScopes if any.
+let limited = $state((initialScopes ?? []).length > 0);
+let standardScopes = $state([...(initialScopes ?? [])]);
+// MCP-mode local state. When no initial scope is provided we fall back
+// to `mcp:favorites` (matches the create-token default).
+let mcpScope = $state(initialMcpScope ?? 'mcp:favorites');
+$effect(() => {
+    if (mode === 'mcp') {
+        const parts = mcpScope
+            .split(' ')
+            .map((s) => s.trim())
+            .filter((s) => s.length > 0);
+        value = parts.length > 0 ? parts : null;
+    }
+    else {
+        value = limited && standardScopes.length > 0 ? standardScopes : null;
+    }
+});
+</script>
+
+{#if mode === 'standard'}
+	<div class="flex flex-col gap-2">
+		<Toggle
+			bind:checked={limited}
+			options={{
+				right: 'Limit token permissions',
+				rightTooltip:
+					'When off, the token has full API access. Turn on to restrict it to specific scopes.'
+			}}
+			size="xs"
+		/>
+		{#if limited}
+			<ScopeSelector bind:selectedScopes={standardScopes} />
+		{/if}
+	</div>
+{:else}
+	<McpScopeSelector {workspaceId} bind:scope={mcpScope} initialScope={initialMcpScope} />
+{/if}

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

@@ -0,0 +1,11 @@
+interface Props {
+    mode: 'standard' | 'mcp';
+    workspaceId?: string;
+    /** Existing scopes (used for both initial standard selection and parsing MCP scope) */
+    initialScopes?: string[];
+    /** Final scope value: null = unrestricted/full access, array = explicit list */
+    value: string[] | null;
+}
+declare const ScopesPicker: import("svelte").Component<Props, {}, "value">;
+type ScopesPicker = ReturnType<typeof ScopesPicker>;
+export default ScopesPicker;

package/package/components/settings/TokensTable.svelte

@@ -4,15 +4,18 @@ import { displayDate } from '../../utils';
 import { UserService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import CreateToken from './CreateToken.svelte';
+import EditTokenScopesModal from './EditTokenScopesModal.svelte';
 import Button from '../common/button/Button.svelte';
 import Badge from '../common/badge/Badge.svelte';
 import Alert from '../common/alert/Alert.svelte';
-import { Trash } from 'lucide-svelte';
+import { Pen, Trash } from 'lucide-svelte';
 let { showMcpMode = false, openWithMcpMode = false, defaultNewTokenLabel, defaultNewTokenWorkspace, scopes, onTokenCreated } = $props();
 // --- Local State ---
 let tokens = $state([]);
 let tokenPage = $state(1);
 let newTokenLabel = $state(untrack(() => defaultNewTokenLabel));
+let editingToken = $state(undefined);
+let editModalOpen = $state(false);
 $effect(() => {
     listTokens();
 });
@@ -69,6 +72,14 @@ async function handleDeleteClick(tokenPrefix) {
     sendUserToast('Successfully deleted token');
     listTokens();
 }
+function handleEditClick(tokenPrefix, tokenScopes, tokenWorkspaceId) {
+    editingToken = {
+        prefix: tokenPrefix,
+        scopes: tokenScopes,
+        workspaceId: tokenWorkspaceId
+    };
+    editModalOpen = true;
+}
 async function listTokens() {
     tokens = await UserService.listTokens({
         excludeEphemeral: true,
@@ -93,7 +104,11 @@ function handlePreviousPage() {
 	</div>
 	{#if expiringSoonCount > 0}
 		<div class="mb-2">
-			<Alert type="warning" title="{expiringSoonCount} token{expiringSoonCount > 1 ? 's' : ''} expiring within 7 days" size="xs" />
+			<Alert
+				type="warning"
+				title="{expiringSoonCount} token{expiringSoonCount > 1 ? 's' : ''} expiring within 7 days"
+				size="xs"
+			/>
 		</div>
 	{/if}
 	<CreateToken
@@ -106,20 +121,19 @@ function handlePreviousPage() {
 	/>
 	<div class="overflow-auto grow min-h-64 max-h-2/3">
 		<TableCustom>
-
 			{#snippet headerRow()}
-						<tr >
+				<tr>
 					<th>Prefix</th>
 					<th>Label</th>
 					<th>Expiration</th>
 					<th>Scopes</th>
 					<th></th>
 				</tr>
-					{/snippet}
+			{/snippet}
 			{#snippet body()}
 				<tbody>
 					{#if tokens && tokens.length > 0}
-						{#each tokens as { token_prefix, expiration, label, scopes } (token_prefix)}
+						{#each tokens as { token_prefix, expiration, label, scopes, workspace_id } (token_prefix)}
 							{@const badge = expirationBadge(expiration, label)}
 							<tr>
 								<td class="w-32 text-xs text-primary">{token_prefix}****</td>
@@ -136,15 +150,29 @@ function handlePreviousPage() {
 									class="min-w-0 max-w-48 truncate text-xs text-secondary"
 									title={scopes?.join(', ') ?? ''}>{scopes?.join(', ') ?? ''}</td
 								>
-								<td class="w-16 text-center">
-									<Button
-										variant="subtle"
-										destructive
-										on:click={() => handleDeleteClick(token_prefix)}
-										size="xs"
-										startIcon={{ icon: Trash }}
-										iconOnly
-									/>
+								<td class="w-24 text-center">
+									<div class="flex items-center justify-center gap-1">
+										<Button
+											variant="subtle"
+											on:click={() =>
+												handleEditClick(
+													token_prefix,
+													scopes ?? undefined,
+													workspace_id ?? undefined
+												)}
+											size="xs"
+											startIcon={{ icon: Pen }}
+											iconOnly
+										/>
+										<Button
+											variant="subtle"
+											destructive
+											on:click={() => handleDeleteClick(token_prefix)}
+											size="xs"
+											startIcon={{ icon: Trash }}
+											iconOnly
+										/>
+									</div>
 								</td>
 							</tr>
 						{/each}
@@ -168,3 +196,11 @@ function handlePreviousPage() {
 		</div>
 	</div>
 </div>
+
+<EditTokenScopesModal
+	bind:open={editModalOpen}
+	tokenPrefix={editingToken?.prefix}
+	initialScopes={editingToken?.scopes}
+	tokenWorkspaceId={editingToken?.workspaceId}
+	onSaved={listTokens}
+/>

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -19,10 +19,14 @@ import SearchItems from '../SearchItems.svelte';
 import Cell from '../table/Cell.svelte';
 import Row from '../table/Row.svelte';
 import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
+import UserOffboardingModal from '../UserOffboardingModal.svelte';
 import { isCloudHosted } from '../../cloud';
 import { truncate } from '../../utils';
 import { onDestroy, untrack } from 'svelte';
 import { goto } from '../../navigation';
+import { ArrowRightLeft } from 'lucide-svelte';
+let offboardingUser = $state(undefined);
+let offboardingReassignOnly = $state(false);
 let users = $state(undefined);
 let invites = $state([]);
 let filteredUsers = $state(undefined);
@@ -219,7 +223,6 @@ onDestroy(() => {
         console.warn(e);
     }
 });
-let deleteConfirmedCallback = $state(undefined);
 let removeInstanceGroupConfirmedCallback = $state(undefined);
 let convertConfirmedCallback = $state(undefined);
 // Auto-add/invite confirmation modal states
@@ -896,14 +899,8 @@ const isAdminsWorkspaceWithoutEE = $derived($workspaceStore === 'admins' && !$en
 										destructive
 										{disabled}
 										onClick={() => {
-											deleteConfirmedCallback = async () => {
-												await UserService.deleteUser({
-													workspace: $workspaceStore ?? '',
-													username
-												})
-												sendUserToast('User removed')
-												listUsers()
-											}
+											offboardingUser = username
+											offboardingReassignOnly = false
 										}}
 										startIcon={{ icon: UserMinus }}
 									>
@@ -932,7 +929,20 @@ const isAdminsWorkspaceWithoutEE = $derived($workspaceStore === 'admins' && !$en
 										Convert
 									</Button>
 								{:else}
-									{@render removeUserButton(false)}
+									<div class="flex items-center gap-1">
+										<Button
+											unifiedSize="sm"
+											variant="subtle"
+											onClick={() => {
+												offboardingUser = username
+												offboardingReassignOnly = true
+											}}
+											startIcon={{ icon: ArrowRightLeft }}
+										>
+											Reassign
+										</Button>
+										{@render removeUserButton(false)}
+									</div>
 								{/if}
 							</div>
 						</Cell>
@@ -1073,24 +1083,20 @@ const isAdminsWorkspaceWithoutEE = $derived($workspaceStore === 'admins' && !$en
 		{/if}
 	</Section>
 {/if}
-<ConfirmationModal
-	open={Boolean(deleteConfirmedCallback)}
-	title="Remove user"
-	confirmationText="Remove"
-	on:canceled={() => {
-		deleteConfirmedCallback = undefined
-	}}
-	on:confirmed={() => {
-		if (deleteConfirmedCallback) {
-			deleteConfirmedCallback()
-		}
-		deleteConfirmedCallback = undefined
-	}}
->
-	<div class="flex flex-col w-full space-y-4">
-		<span>Are you sure you want to remove ?</span>
-	</div>
-</ConfirmationModal>
+{#if offboardingUser}
+	<UserOffboardingModal
+		open={offboardingUser != null}
+		username={offboardingUser}
+		reassignOnly={offboardingReassignOnly}
+		onClose={() => {
+			offboardingUser = undefined
+		}}
+		onComplete={() => {
+			offboardingUser = undefined
+			listUsers()
+		}}
+	/>
+{/if}
 
 <div class="[&>div]:!z-[5002]">
 	<ConfirmationModal

package/package/components/sidebar/OperatorMenu.svelte

@@ -102,6 +102,12 @@ let allTriggerLinks = $derived([
         href: `${base}/gcp_triggers`,
         kind: 'gcp'
     },
+    {
+        label: 'Azure Event Grid triggers',
+        id: 'triggers',
+        href: `${base}/azure_triggers`,
+        kind: 'azure'
+    },
     { label: 'MQTT triggers', id: 'triggers', href: `${base}/mqtt_triggers`, kind: 'mqtt' },
     { label: 'Email triggers', id: 'triggers', href: `${base}/email_triggers`, kind: 'email' }
 ].filter(filterLink));