windmill-components 1.522.0 → 1.531.0

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -10,10 +10,11 @@ import DataTable from '../table/DataTable.svelte';
 import Head from '../table/Head.svelte';
 import Toggle from '../Toggle.svelte';
 import Tooltip from '../Tooltip.svelte';
-import { UserService, WorkspaceService } from '../../gen';
+import { UserService, WorkspaceService, GroupService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
-import { Loader2, Mails, Search } from 'lucide-svelte';
+import { Loader2, Mails, Search, Plus } from 'lucide-svelte';
+import Select from '../select/Select.svelte';
 import SearchItems from '../SearchItems.svelte';
 import Cell from '../table/Cell.svelte';
 import Row from '../table/Row.svelte';
@@ -29,11 +30,37 @@ let auto_invite_domain = $state();
 let operatorOnly = $state(undefined);
 let autoAdd = $state(undefined);
 let nbDisplayed = $state(30);
+// Instance group auto-add settings
+let instanceGroups = $state([]);
+let autoAddInstanceGroups = $state([]);
+let autoAddInstanceGroupsRoles = $state({});
+// Add new instance group form state
+let selectedNewInstanceGroup = $state(undefined);
+let selectedNewRole = $state('developer');
+// Available groups for dropdowns - filter out already configured groups
+let availableGroupItems = $derived(instanceGroups
+    .filter(group => !autoAddInstanceGroups.includes(group.name))
+    .map(group => ({
+    value: group.name,
+    label: group.name + (group.summary ? ` - ${group.summary}` : '')
+})));
+// Sort users so manual users come first, then instance group users
+let sortedUsers = $derived(() => {
+    const userList = (filteredUsers || users || []).slice();
+    return userList.sort((a, b) => {
+        const aIsInstanceGroup = a.added_via?.source === 'instance_group' ? 1 : 0;
+        const bIsInstanceGroup = b.added_via?.source === 'instance_group' ? 1 : 0;
+        return aIsInstanceGroup - bIsInstanceGroup;
+    });
+});
+let hasNonManualUsers = $derived((filteredUsers || users || []).some((user) => user.added_via?.source === 'instance_group' || user.added_via?.source === 'domain'));
 async function loadSettings() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     auto_invite_domain = settings.auto_invite_domain;
     operatorOnly = settings.auto_invite_operator;
     autoAdd = settings.auto_add;
+    autoAddInstanceGroups = settings.auto_add_instance_groups || [];
+    autoAddInstanceGroupsRoles = settings.auto_add_instance_groups_roles || {};
 }
 let getUsagePromise = undefined;
 let usage = $state(undefined);
@@ -62,6 +89,82 @@ let allowedAutoDomain = $state(false);
 async function getDisallowedAutoDomain() {
     allowedAutoDomain = await WorkspaceService.isDomainAllowed();
 }
+async function loadInstanceGroups() {
+    try {
+        instanceGroups = await GroupService.listInstanceGroups();
+    }
+    catch (e) {
+        console.warn('Failed to load instance groups:', e);
+        instanceGroups = [];
+    }
+}
+async function saveInstanceGroupSettings() {
+    try {
+        await WorkspaceService.editInstanceGroups({
+            workspace: $workspaceStore ?? '',
+            requestBody: {
+                groups: autoAddInstanceGroups,
+                roles: autoAddInstanceGroupsRoles
+            }
+        });
+        sendUserToast('Instance group settings saved');
+        // Refresh user list to show newly auto-added users
+        listUsers();
+    }
+    catch (e) {
+        console.error('Failed to save instance group settings:', e);
+        sendUserToast('Failed to save settings', true);
+    }
+}
+async function addInstanceGroup() {
+    if (!selectedNewInstanceGroup || !selectedNewRole)
+        return;
+    const groupToAdd = selectedNewInstanceGroup;
+    const roleToAdd = selectedNewRole;
+    try {
+        autoAddInstanceGroups = [...autoAddInstanceGroups, groupToAdd];
+        autoAddInstanceGroupsRoles[groupToAdd] = roleToAdd;
+        // Reset form
+        selectedNewInstanceGroup = undefined;
+        selectedNewRole = 'developer';
+        await saveInstanceGroupSettings();
+    }
+    catch (e) {
+        // Rollback on error
+        autoAddInstanceGroups = autoAddInstanceGroups.filter(g => g !== groupToAdd);
+        delete autoAddInstanceGroupsRoles[groupToAdd];
+        sendUserToast('Failed to add instance group', true);
+    }
+}
+async function removeInstanceGroup(groupName) {
+    const previousGroups = [...autoAddInstanceGroups];
+    const previousRole = autoAddInstanceGroupsRoles[groupName];
+    try {
+        autoAddInstanceGroups = autoAddInstanceGroups.filter(g => g !== groupName);
+        delete autoAddInstanceGroupsRoles[groupName];
+        await saveInstanceGroupSettings();
+    }
+    catch (e) {
+        // Rollback on error
+        autoAddInstanceGroups = previousGroups;
+        if (previousRole) {
+            autoAddInstanceGroupsRoles[groupName] = previousRole;
+        }
+        sendUserToast('Failed to remove instance group', true);
+    }
+}
+async function updateGroupRole(groupName, role) {
+    const previousRole = autoAddInstanceGroupsRoles[groupName];
+    try {
+        autoAddInstanceGroupsRoles[groupName] = role;
+        await saveInstanceGroupSettings();
+    }
+    catch (e) {
+        // Rollback on error
+        autoAddInstanceGroupsRoles[groupName] = previousRole;
+        sendUserToast('Failed to update role', true);
+    }
+}
 let domain = $derived($userStore?.email.split('@')[1]);
 $effect(() => {
     if ($workspaceStore) {
@@ -71,6 +174,7 @@ $effect(() => {
             getUsage();
             listInvites();
             loadSettings();
+            loadInstanceGroups();
         });
     }
 });
@@ -83,6 +187,7 @@ onDestroy(() => {
     }
 });
 let deleteConfirmedCallback = $state(undefined);
+let removeInstanceGroupConfirmedCallback = $state(undefined);
 async function removeAllInvitesFromDomain() {
     await Promise.all(invites
         .filter((x) => isCloudHosted() ? x.email.endsWith('@' + (auto_invite_domain ?? '')) : true)
@@ -248,7 +353,10 @@ $effect(() => {
 												invite_all: !isCloudHosted(),
 												auto_add: showInvites ? (autoAdd ?? false) : true
 											}
-										: { operator: undefined, auto_add: undefined }
+										: {
+												operator: undefined,
+												auto_add: undefined
+											}
 								})
 								loadSettings()
 								listInvites()
@@ -266,6 +374,179 @@ $effect(() => {
 				</div>
 			{/snippet}
 		</Popover>
+
+		{#if instanceGroups.length > 0}
+			<Popover
+				floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+				usePointerDownOutside
+				floatingClass="!z-20"
+			>
+				{#snippet trigger()}
+					<Button
+						color={autoAddInstanceGroups.length > 0 ? 'green' : 'gray'}
+						variant="border"
+						size="xs"
+						nonCaptureEvent={true}
+						startIcon={{ icon: Mails }}
+						>Instance groups: {autoAddInstanceGroups.length}
+					</Button>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-col p-4 min-w-[500px]">
+						<div class="flex flex-col gap-4">
+							<span class="text-sm leading-6 font-semibold">
+								Auto-add instance groups
+							</span>
+
+							<!-- Add new instance group form -->
+							{#if availableGroupItems.length > 0}
+								<div class="flex w-full mt-1 gap-2 items-end justify-between">
+									<div class="flex gap-2 items-end">
+										<div class="flex flex-col gap-1">
+											<span class="text-xs text-tertiary">Instance group</span>
+											<Select
+												items={availableGroupItems}
+												placeholder="Select group"
+												bind:value={selectedNewInstanceGroup}
+												class="max-w-[160px]"
+												disablePortal={true}
+											/>
+										</div>
+
+										<div class="flex flex-col gap-1">
+											<span class="text-xs text-tertiary">Role</span>
+											<ToggleButtonGroup
+												selected={selectedNewRole}
+												on:selected={(e) => {
+													selectedNewRole = e.detail
+												}}
+											>
+												{#snippet children({ item })}
+													<ToggleButton
+														value="operator"
+														label="Operator"
+														tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+														{item}
+													/>
+													<ToggleButton
+														value="developer"
+														label="Developer"
+														tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+														{item}
+													/>
+													<ToggleButton
+														value="admin"
+														label="Admin"
+														tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+														{item}
+													/>
+												{/snippet}
+											</ToggleButtonGroup>
+										</div>
+									</div>
+
+									<Button
+										color="blue"
+										size="xs"
+										startIcon={{ icon: Plus }}
+										disabled={!selectedNewInstanceGroup || !selectedNewRole}
+										onclick={addInstanceGroup}
+									>
+										Add
+									</Button>
+								</div>
+							{/if}
+
+							<!-- Configured groups table -->
+							{#if autoAddInstanceGroups.length > 0}
+								<div class="flex flex-col gap-2">
+									<p class="text-sm font-medium text-secondary">Configured groups:</p>
+									<div class="flex flex-col gap-1">
+										<table class="w-full text-sm">
+											<thead>
+												<tr class="text-left text-xs text-tertiary">
+													<th class="pb-2 w-1/2">Group</th>
+													<th class="pb-2 w-1/4">Role</th>
+													<th class="pb-2 w-1/4"></th>
+												</tr>
+											</thead>
+											<tbody>
+												{#each autoAddInstanceGroups as groupName (groupName)}
+													{@const group = instanceGroups.find(g => g.name === groupName)}
+													<tr class="border-t border-gray-200 dark:border-gray-700">
+														<td class="py-2">
+															<div class="font-medium">{groupName}</div>
+															{#if group?.summary}
+																<div class="text-xs text-tertiary">{group.summary}</div>
+															{/if}
+														</td>
+														<td class="py-2">
+															<div>
+																<ToggleButtonGroup
+																	selected={autoAddInstanceGroupsRoles[groupName] || 'developer'}
+																	on:selected={async (e) => {
+																		autoAddInstanceGroupsRoles[groupName] = e.detail
+																		await updateGroupRole(groupName, e.detail)
+																	}}
+																>
+																	{#snippet children({ item })}
+																		<ToggleButton
+																			value="operator"
+																			label="Operator"
+																			tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+																			{item}
+																		/>
+																		<ToggleButton
+																			value="developer"
+																			label="Developer"
+																			tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+																			{item}
+																		/>
+																		<ToggleButton
+																			value="admin"
+																			label="Admin"
+																			tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+																			{item}
+																		/>
+																	{/snippet}
+																</ToggleButtonGroup>
+															</div>
+														</td>
+														<td class="py-2">
+															<div class="flex justify-end">
+																<Button
+																	color="light"
+																	variant="contained"
+																	btnClasses="text-red-500"
+																	size="xs"
+																	spacingSize="xs2"
+																	onclick={() => {
+																		removeInstanceGroupConfirmedCallback = async () => {
+																			await removeInstanceGroup(groupName)
+																		}
+																	}}
+																>
+																	Remove
+																</Button>
+															</div>
+														</td>
+													</tr>
+												{/each}
+											</tbody>
+										</table>
+									</div>
+								</div>
+							{:else}
+								<div class="text-center text-tertiary text-sm py-4">
+									No instance groups configured for auto-add
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/snippet}
+			</Popover>
+		{/if}
+
 		<AddUser
 			on:new={() => {
 				listUsers()
@@ -287,6 +568,14 @@ $effect(() => {
 			<tr>
 				<Cell head first>Email</Cell>
 				<Cell head>Username</Cell>
+				{#if hasNonManualUsers}
+					<Cell head>
+						Added via
+						<Tooltip>
+							Shows how the user was added to the workspace: manually, via domain auto-invite, or through an instance group.
+						</Tooltip>
+					</Cell>
+				{/if}
 
 				<Cell head>
 					Executions (<abbr title="past 1w">1w</abbr>)
@@ -304,10 +593,34 @@ $effect(() => {
 		</Head>
 		<tbody class="divide-y bg-surface">
 			{#if filteredUsers}
-				{#each filteredUsers.slice(0, nbDisplayed) as { email, username, is_admin, operator, disabled } (email)}
+				{#each sortedUsers().slice(0, nbDisplayed) as { email, username, is_admin, operator, disabled, added_via }, index (email)}
+					<!-- Add separator between manual users and instance group users -->
+					{#if hasNonManualUsers && index > 0 && sortedUsers()[index - 1]?.added_via?.source !== 'instance_group' && added_via?.source === 'instance_group'}
+						<tr class="bg-surface-secondary">
+							<td colspan={hasNonManualUsers ? 8 : 7} class="px-4 py-2">
+								<div class="text-xs text-tertiary font-bold">
+									Instance group users
+								</div>
+							</td>
+						</tr>
+					{/if}
 					<tr class="!hover:bg-surface-hover">
 						<Cell first><a href="mailto:{email}">{truncate(email, 20)}</a></Cell>
 						<Cell>{truncate(username, 30)}</Cell>
+						{#if hasNonManualUsers}
+							<Cell>
+								<div class="flex items-center gap-2">
+									{#if added_via?.source === 'instance_group'}
+										<Badge color="blue">Group</Badge>
+										<span>{truncate(added_via.group || 'Unknown', 20)}</span>
+									{:else if added_via?.source === 'domain'}
+										<Badge color="blue">Auto-add</Badge>
+									{:else}
+										<Badge color="blue">Manual</Badge>
+									{/if}
+								</div>
+							</Cell>
+						{/if}
 						<Cell
 							>{#if usage?.[email] != undefined}{usage?.[email]}{:else}<Loader2
 									size={14}
@@ -325,55 +638,64 @@ $effect(() => {
 						</Cell>
 						<Cell>
 							<div>
-								<ToggleButtonGroup
-									selected={is_admin ? 'admin' : operator ? 'operator' : 'developer'}
-									on:selected={async (e) => {
-										if (is_admin && email == $userStore?.email && e.detail != 'admin') {
-											sendUserToast(
-												'Admins cannot be demoted by themselves, ask another admin to demote you',
-												true
-											)
-											e.preventDefault()
+								{#if added_via?.source === 'instance_group'}
+									<div class="flex items-center gap-1">
+										<span class="rounded-md text-xs px-2 py-1 bg-surface shadow-md font-bold">
+											{is_admin ? 'Admin' : operator ? 'Operator' : 'Developer'}
+										</span>
+										<Tooltip>Role is managed through instance group configuration above.</Tooltip>
+									</div>
+								{:else}
+									<ToggleButtonGroup
+										selected={is_admin ? 'admin' : operator ? 'operator' : 'developer'}
+										on:selected={async (e) => {
+											if (is_admin && email == $userStore?.email && e.detail != 'admin') {
+												sendUserToast(
+													'Admins cannot be demoted by themselves, ask another admin to demote you',
+													true
+												)
+												e.preventDefault()
+												listUsers()
+												return
+											}
+											const body =
+												e.detail == 'admin'
+													? { is_admin: true, operator: false }
+													: e.detail == 'operator'
+														? { is_admin: false, operator: true }
+														: { is_admin: false, operator: false }
+											await UserService.updateUser({
+												workspace: $workspaceStore ?? '',
+												username,
+												requestBody: body
+											})
 											listUsers()
-											return
-										}
-										const body =
-											e.detail == 'admin'
-												? { is_admin: true, operator: false }
-												: e.detail == 'operator'
-													? { is_admin: false, operator: true }
-													: { is_admin: false, operator: false }
-										await UserService.updateUser({
-											workspace: $workspaceStore ?? '',
-											username,
-											requestBody: body
-										})
-										listUsers()
-									}}
-								>
-									{#snippet children({ item })}
-										<ToggleButton
-											value="operator"
-											label="Operator"
-											tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-											{item}
-										/>
+										}}
+									>
+										{#snippet children({ item })}
+											<ToggleButton
+												value="operator"
+												label="Operator"
+												tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+												{item}
+											/>
 
-										<ToggleButton
-											value="developer"
-											label="Developer"
-											tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-											{item}
-										/>
+											<ToggleButton
+												value="developer"
+												label="Developer"
+												tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+												{item}
+											/>
 
-										<ToggleButton
-											value="admin"
-											label="Admin"
-											tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-											{item}
-										/>
-									{/snippet}
-								</ToggleButtonGroup>
+											<ToggleButton
+												value="admin"
+												label="Admin"
+												tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+												{item}
+											/>
+										{/snippet}
+									</ToggleButtonGroup>
+								{/if}
 							</div>
 						</Cell>
 						<Cell>
@@ -397,25 +719,41 @@ $effect(() => {
 									{disabled ? 'Enable' : 'Disable'}
 								</Button>
 
-								<Button
-									color="light"
-									variant="contained"
-									btnClasses="text-red-500"
-									size="xs"
-									spacingSize="xs2"
-									on:click={() => {
-										deleteConfirmedCallback = async () => {
-											await UserService.deleteUser({
-												workspace: $workspaceStore ?? '',
-												username
-											})
-											sendUserToast('User removed')
-											listUsers()
-										}
-									}}
-								>
-									Remove
-								</Button>
+								{#if added_via?.source === 'instance_group'}
+									<div class="flex items-center gap-1">
+										<Button
+											color="light"
+											variant="contained"
+											btnClasses="text-gray-400"
+											size="xs"
+											spacingSize="xs2"
+											disabled={true}
+										>
+											Remove
+										</Button>
+										<Tooltip>Cannot remove users synced from instance groups. Either disable the user or remove them from the SCIM group.</Tooltip>
+									</div>
+								{:else}
+									<Button
+										color="light"
+										variant="contained"
+										btnClasses="text-red-500"
+										size="xs"
+										spacingSize="xs2"
+										on:click={() => {
+											deleteConfirmedCallback = async () => {
+												await UserService.deleteUser({
+													workspace: $workspaceStore ?? '',
+													username
+												})
+												sendUserToast('User removed')
+												listUsers()
+											}
+										}}
+									>
+										Remove
+									</Button>
+								{/if}
 							</div>
 						</Cell>
 					</tr>
@@ -563,3 +901,24 @@ $effect(() => {
 		<span>Are you sure you want to remove ?</span>
 	</div>
 </ConfirmationModal>
+
+<div class="[&>div]:!z-[5002]">
+	<ConfirmationModal
+		open={Boolean(removeInstanceGroupConfirmedCallback)}
+		title="Remove instance group"
+		confirmationText="Remove"
+		on:canceled={() => {
+			removeInstanceGroupConfirmedCallback = undefined
+		}}
+		on:confirmed={() => {
+			if (removeInstanceGroupConfirmedCallback) {
+				removeInstanceGroupConfirmedCallback()
+			}
+			removeInstanceGroupConfirmedCallback = undefined
+		}}
+	>
+		<div class="flex flex-col w-full space-y-4">
+			<span>Are you sure you want to remove this instance group from auto-add? This will not remove users already added from this group.</span>
+		</div>
+	</ConfirmationModal>
+</div>

package/package/components/sidebar/MenuButton.svelte

@@ -2,12 +2,13 @@
 import Popover from '../Popover.svelte';
 import { createEventDispatcher } from 'svelte';
 import SideBarNotification from './SideBarNotification.svelte';
-import { goto } from '$app/navigation';
 import { conditionalMelt } from '../../utils';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 let { aiId = undefined, aiDescription = undefined, label = undefined, icon = undefined, iconClasses = null, iconProps = null, isCollapsed, disabled = false, lightMode = false, stopPropagationOnClick = false, shortcut = '', notificationsCount = 0, color = null, trigger = undefined, href = undefined, class: classNames = undefined } = $props();
 let buttonRef = $state(undefined);
 let dispatch = createEventDispatcher();
+// Dynamic component based on whether href is provided
+const Element = href ? 'a' : 'button';
 </script>
 
 {#if !disabled}
@@ -18,7 +19,8 @@ let dispatch = createEventDispatcher();
 		disablePopup={!isCollapsed}
 		placement="right"
 	>
-		<button
+		<svelte:element
+			this={Element}
 			bind:this={buttonRef}
 			use:triggerableByAI={{
 				id: aiId,
@@ -29,13 +31,13 @@ let dispatch = createEventDispatcher();
 					}
 				}
 			}}
-			onclick={(e) => {
-				if (stopPropagationOnClick) e.preventDefault()
-				if (href) {
-					goto(href)
-				}
-				dispatch('click')
-			}}
+			onclick={href
+				? undefined
+				: (e) => {
+						if (stopPropagationOnClick) e.preventDefault()
+						dispatch('click')
+					}}
+			{href}
 			class={twMerge(
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
 				lightMode
@@ -91,7 +93,7 @@ let dispatch = createEventDispatcher();
 					<SideBarNotification notificationCount={notificationsCount} small={false} />
 				</div>
 			{/if}
-		</button>
+		</svelte:element>
 
 		{#snippet text()}
 			{#if label}

package/package/components/stepHistoryLoader.svelte.d.ts

@@ -1,6 +1,6 @@
-import { type Writable } from 'svelte/store';
 import type { FlowState } from './flows/flowState';
 import { type Flow } from '../gen';
+import type { StateStore } from '../utils';
 export type stepState = {
     initial?: boolean;
     loadingJobs?: boolean;
@@ -13,7 +13,7 @@ export declare class StepHistoryLoader {
     setFlowJobInitial(value: boolean | undefined): void;
     constructor(stepStates: Record<string, stepState>, flowJobInitial?: boolean, saveCb?: () => void, noInitial?: boolean);
     resetInitial(stepId: string | undefined): void;
-    loadIndividualStepsStates(flow: Flow, flowStateStore: Writable<FlowState>, workspaceId: string, initialPath: string, path: string): Promise<void>;
+    loadIndividualStepsStates(flow: Flow, flowStateStore: StateStore<FlowState>, workspaceId: string, initialPath: string, path: string): Promise<void>;
 }
 export declare function getStepHistoryLoaderContext(): StepHistoryLoader;
 export declare function setStepHistoryLoaderContext(stepHistoryLoader: StepHistoryLoader): void;