windmill-components 1.623.1 → 1.642.0

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">import AddUser from '../AddUser.svelte';
-import { Badge, Button, Skeleton } from '../common';
+import { Alert, Badge, Button, Section, Skeleton } from '../common';
 import Popover from '../meltComponents/Popover.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import WorkspaceOperatorSettings from './WorkspaceOperatorSettings.svelte';
 import InviteUser from '../InviteUser.svelte';
-import PageHeader from '../PageHeader.svelte';
+import SettingsPageHeader from './SettingsPageHeader.svelte';
 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, GroupService } from '../../gen';
-import { userStore, workspaceStore } from '../../stores';
+import { userStore, workspaceStore, superadmin, globalEmailInvite } from '../../stores';
 import { sendUserToast } from '../../toast';
-import { Loader2, Mails, Search, Plus } from 'lucide-svelte';
+import { Loader2, Mails, Search, Plus, UserMinus, X } from 'lucide-svelte';
 import Select from '../select/Select.svelte';
 import SearchItems from '../SearchItems.svelte';
 import Cell from '../table/Cell.svelte';
@@ -22,13 +22,14 @@ import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.sve
 import { isCloudHosted } from '../../cloud';
 import { truncate } from '../../utils';
 import { onDestroy, untrack } from 'svelte';
+import { goto } from '../../navigation';
 let users = $state(undefined);
 let invites = $state([]);
 let filteredUsers = $state(undefined);
 let userFilter = $state('');
 let auto_invite_domain = $state();
 let operatorOnly = $state(undefined);
-let autoAdd = $state(undefined);
+let autoAdd = $state(false);
 let nbDisplayed = $state(30);
 // Instance group auto-add settings
 let instanceGroups = $state([]);
@@ -72,11 +73,12 @@ function canConvertToGroup(user) {
 }
 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 || {};
+    const autoInvite = settings.auto_invite;
+    auto_invite_domain = autoInvite?.enabled ? (autoInvite?.domain ?? '*') : undefined;
+    operatorOnly = autoInvite?.operator ?? false;
+    autoAdd = autoInvite?.mode === 'add';
+    autoAddInstanceGroups = autoInvite?.instance_groups || [];
+    autoAddInstanceGroupsRoles = autoInvite?.instance_groups_roles || {};
 }
 let getUsagePromise = undefined;
 let usage = $state(undefined);
@@ -219,6 +221,10 @@ onDestroy(() => {
 let deleteConfirmedCallback = $state(undefined);
 let removeInstanceGroupConfirmedCallback = $state(undefined);
 let convertConfirmedCallback = $state(undefined);
+// Auto-add/invite confirmation modal states
+let autoAddConfirmCallback = $state(undefined);
+let autoInviteDisableConfirmCallback = $state(undefined);
+let switchToAutoAddConfirmCallback = $state(undefined);
 async function removeAllInvitesFromDomain() {
     await Promise.all(invites
         .filter((x) => isCloudHosted() ? x.email.endsWith('@' + (auto_invite_domain ?? '')) : true)
@@ -232,9 +238,93 @@ async function removeAllInvitesFromDomain() {
     })));
 }
 let nbInviteDisplayed = $state(50);
-let showInvites = $state(false);
-$effect(() => {
-    showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !autoAdd);
+async function inviteUser(email, selected) {
+    try {
+        await WorkspaceService.inviteUser({
+            workspace: $workspaceStore,
+            requestBody: {
+                email,
+                is_admin: selected == 'admin',
+                operator: selected == 'operator'
+            }
+        });
+        sendUserToast(`Invited ${email}`);
+    }
+    catch (e) {
+        console.error('Failed to invite user:', e);
+        sendUserToast('Failed to invite user', true);
+    }
+    if (!(await UserService.existsEmail({ email }))) {
+        let isSuperadmin = $superadmin;
+        if (!isCloudHosted()) {
+            sendUserToast(`User ${email} is not registered yet on the instance. ${!isSuperadmin
+                ? `If not using SSO, ask an administrator to add ${email} to the instance`
+                : ''}`, true, isSuperadmin
+                ? [
+                    {
+                        label: 'Add user to the instance',
+                        callback: () => {
+                            $globalEmailInvite = email;
+                            goto('#superadmin-settings');
+                        }
+                    }
+                ]
+                : []);
+        }
+    }
+    listInvites();
+}
+async function updateAutoInvite(enable) {
+    // Cleanup invites if auto add is enabled
+    if (enable && autoAdd) {
+        await removeAllInvitesFromDomain();
+    }
+    const updateType = enable ? (autoInviteOrAddEnabled ? 'update' : 'enable') : 'disable';
+    try {
+        // await removeAllInvitesFromDomain()
+        await WorkspaceService.editAutoInvite({
+            workspace: $workspaceStore ?? '',
+            requestBody: enable
+                ? {
+                    operator: operatorOnly ?? false,
+                    invite_all: !isCloudHosted(),
+                    auto_add: autoAdd
+                }
+                : {
+                    operator: undefined,
+                    auto_add: undefined
+                }
+        });
+        const message = updateType === 'update'
+            ? `Auto-${autoAdd ? 'add' : 'invite'} updated`
+            : updateType === 'enable'
+                ? `Auto-${autoAdd ? 'add' : 'invite'} enabled`
+                : `Auto-${autoAdd ? 'add' : 'invite'} disabled`;
+        sendUserToast(message);
+    }
+    catch (e) {
+        console.error('Failed to update auto invite:', e);
+        sendUserToast('Failed to update auto invite', true);
+    }
+    loadSettings();
+    listInvites();
+    listUsers();
+}
+const autoInviteOrAddEnabled = $derived(auto_invite_domain != undefined);
+// Legacy auto-invite: user already has auto-invite enabled (not auto-add) on a non-cloud instance
+// This preserves their existing setup even though auto-invite is deprecated for new setups
+const isLegacyAutoInvite = $derived(autoInviteOrAddEnabled && !autoAdd && !isCloudHosted());
+// Show auto-invite toggle only for:
+// - Cloud hosted users (always available)
+// - Legacy users who already have auto-invite enabled (preserve existing setup)
+const showAutoInviteToggle = $derived(isCloudHosted() || isLegacyAutoInvite);
+// Display mode for labels: for non-cloud, non-legacy users, always show "add"
+// For cloud or legacy users, show based on actual autoAdd setting
+const displayMode = $derived.by(() => {
+    if (!isCloudHosted() && !isLegacyAutoInvite) {
+        return 'add';
+    }
+    return autoAdd ? 'add' : 'invite';
 });
 </script>
 
@@ -244,349 +334,336 @@ $effect(() => {
 	bind:filteredItems={filteredUsers}
 	f={(x) => x.email + ' ' + x.name + ' ' + x.company}
 />
-<div class="flex flex-col gap-4 my-8">
-	<div class="flex flex-col gap-1">
-		<div class="text-primary text-xs">
-			Add members to your workspace and manage their roles. You can also auto-add users to join your
-			workspace.
-			<a
-				href="https://www.windmill.dev/docs/core_concepts/roles_and_permissions"
-				target="_blank"
-				class="text-blue-500">Learn more</a
-			>.
-		</div>
-	</div>
-</div>
-<div class="flex flex-row justify-between items-center pt-2">
-	<PageHeader
-		title="Members {(filteredUsers?.length ?? users?.length) != undefined
-			? `(${filteredUsers?.length ?? users?.length})`
-			: ''}"
-		primary={false}
-		tooltip="Manage users manually or enable SSO authentication."
-		documentationLink="https://www.windmill.dev/docs/core_concepts/authentification"
-	/>
-
-	<div class="flex flex-row items-center gap-2 relative whitespace-nowrap">
-		<input placeholder="Filter members" bind:value={userFilter} class="input !pl-8" />
-		<Search class="absolute left-2" size={14} />
-
-		<Popover
-			floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-			usePointerDownOutside
-		>
-			{#snippet trigger()}
-				<Button
-					color={'accent'}
-					destructive={auto_invite_domain === undefined}
-					variant="default"
-					size="xs"
-					nonCaptureEvent={true}
-					startIcon={{ icon: Mails }}
-					>Auto-{showInvites && !autoAdd ? 'invite' : 'add'}: {auto_invite_domain != undefined
-						? 'ON'
-						: 'OFF'}
-				</Button>
-			{/snippet}
-			{#snippet content()}
-				<div class="flex flex-col items-start p-4">
-					<span class="text-sm leading-6 font-semibold">
-						{isCloudHosted()
-							? `Auto-add anyone from ${
-									auto_invite_domain != undefined ? auto_invite_domain : domain
-								}`
-							: `Auto-add anyone joining the instance`}
-					</span>
-
-					{#if showInvites}
-						<span class="text-xs mb-1 leading-6 pt-2"
-							>Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
-						</span>
-						<ToggleButtonGroup
-							selected={autoAdd ? 'add' : 'invite'}
-							on:selected={async (e) => {
-								if (auto_invite_domain != undefined) {
-									await removeAllInvitesFromDomain()
-									await WorkspaceService.editAutoInvite({
-										workspace: $workspaceStore ?? '',
-										requestBody: {
-											operator: operatorOnly ?? false,
-											invite_all: !isCloudHosted(),
-											auto_add: e.detail === 'add'
-										}
-									})
-									loadSettings()
-									listInvites()
-									listUsers()
-									autoAdd = e.detail === 'add'
-								} else {
-									autoAdd = e.detail === 'add'
-								}
-							}}
-						>
-							{#snippet children({ item })}
-								<ToggleButton value="invite" small label="Auto-invite" {item} />
-								<ToggleButton value="add" small label="Auto-add" {item} />
-							{/snippet}
-						</ToggleButtonGroup>
-					{/if}
 
-					<span class="text-xs mb-1 leading-6 pt-2"
-						>Role <Tooltip>Role of the auto-added users</Tooltip></span
-					>
-					<ToggleButtonGroup
-						selected={operatorOnly ? 'operator' : 'developer'}
-						on:selected={async (e) => {
-							if (auto_invite_domain != undefined) {
-								await removeAllInvitesFromDomain()
-								await WorkspaceService.editAutoInvite({
-									workspace: $workspaceStore ?? '',
-									requestBody: {
-										operator: e.detail === 'operator',
-										invite_all: !isCloudHosted(),
-										auto_add: showInvites ? (autoAdd ?? false) : true
-									}
-								})
-								operatorOnly = e.detail === 'operator'
-								loadSettings()
-								listInvites()
-								listUsers()
-							} else {
-								operatorOnly = e.detail === 'operator'
-							}
-						}}
-					>
-						{#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}
-							/>
-						{/snippet}
-					</ToggleButtonGroup>
-					<div class="pt-2">
-						<Toggle
-							size="xs"
-							checked={auto_invite_domain != undefined}
-							on:change={async (e) => {
-								await removeAllInvitesFromDomain()
-								await WorkspaceService.editAutoInvite({
-									workspace: $workspaceStore ?? '',
-									requestBody: e.detail
-										? {
-												operator: operatorOnly ?? false,
-												invite_all: !isCloudHosted(),
-												auto_add: showInvites ? (autoAdd ?? false) : true
-											}
-										: {
-												operator: undefined,
-												auto_add: undefined
-											}
-								})
-								loadSettings()
-								listInvites()
-								listUsers()
-							}}
-							disabled={isCloudHosted() && !allowedAutoDomain}
-							options={{
-								right: 'Enabled'
-							}}
-						/>
-					</div>
-					{#if isCloudHosted() && !allowedAutoDomain}
-						<div class="text-red-400 text-xs">{domain} domain not allowed for auto-add</div>
-					{/if}
-				</div>
-			{/snippet}
-		</Popover>
+<SettingsPageHeader
+	title="Members {(filteredUsers?.length ?? users?.length) != undefined
+		? `(${filteredUsers?.length ?? users?.length})`
+		: ''}"
+	description="Add members to your workspace and manage their roles. You can also auto-add users to join your workspace."
+	link="https://www.windmill.dev/docs/core_concepts/roles_and_permissions"
+/>
+
+<Section>
+	{#snippet action()}
+		<div class="flex flex-row items-center gap-2 relative whitespace-nowrap w-full">
+			<input placeholder="Filter members" bind:value={userFilter} class="input !pl-8 !w-56" />
+			<Search class="absolute left-2" size={14} />
 
-		{#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"
+						variant="default"
+						unifiedSize="md"
 						nonCaptureEvent={true}
 						startIcon={{ icon: Mails }}
-						>Instance groups: {autoAddInstanceGroups.length}
+						>Auto-{displayMode}: {autoInviteOrAddEnabled ? 'ON' : 'OFF'}
 					</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-primary">Instance group</span>
-											<Select
-												items={availableGroupItems}
-												placeholder="Select group"
-												bind:value={selectedNewInstanceGroup}
-												class="max-w-[160px]"
-												disablePortal={true}
-											/>
-										</div>
+					<div class="flex flex-col items-start p-4 min-w-[320px] max-w-sm">
+						{#if showAutoInviteToggle}
+							<div class="text-xs mb-1 text-primary"
+								>Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
+							</div>
+							<ToggleButtonGroup
+								selected={displayMode}
+								on:selected={async (e) => {
+									const switchingToAdd = e.detail === 'add' && !autoAdd
 
-										<div class="flex flex-col gap-1">
-											<span class="text-xs text-primary">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>
+									// If switching from invite to add on non-cloud, show confirmation with warning
+									if (switchingToAdd && isLegacyAutoInvite) {
+										switchToAutoAddConfirmCallback = async () => {
+											autoAdd = true
+											if (autoInviteOrAddEnabled) {
+												await updateAutoInvite(true)
+											}
+										}
+									} else {
+										autoAdd = e.detail === 'add'
+										if (autoInviteOrAddEnabled) {
+											await updateAutoInvite(true)
+										}
+									}
+								}}
+							>
+								{#snippet children({ item })}
+									<ToggleButton value="invite" small label="Auto-invite" {item} />
+									<ToggleButton value="add" small label="Auto-add" {item} />
+								{/snippet}
+							</ToggleButtonGroup>
 
-									<Button
-										color="blue"
-										size="xs"
-										startIcon={{ icon: Plus }}
-										disabled={!selectedNewInstanceGroup || !selectedNewRole}
-										onclick={addInstanceGroup}
-									>
-										Add
-									</Button>
+							{#if isLegacyAutoInvite && !autoAdd}
+								<div class="mt-3 w-full">
+									<Alert type="warning" size="xs" title="Legacy mode">
+										Auto-invite is deprecated. Switching to auto-add will permanently disable
+										auto-invite for this workspace.
+									</Alert>
 								</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-primary">
-													<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-primary">{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-primary text-sm py-4">
-									No instance groups configured for auto-add
-								</div>
-							{/if}
+							<div class="mt-6"></div>
+						{/if}
+
+						<span class="text-xs mb-1">Role <Tooltip>Role of the auto-added users</Tooltip></span>
+						<ToggleButtonGroup
+							selected={operatorOnly ? 'operator' : 'developer'}
+							on:selected={async (e) => {
+								operatorOnly = e.detail === 'operator'
+								if (auto_invite_domain != undefined) {
+									await updateAutoInvite(true)
+								}
+							}}
+						>
+							{#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}
+								/>
+							{/snippet}
+						</ToggleButtonGroup>
+
+						<div class="mt-6">
+							<Toggle
+								checked={autoInviteOrAddEnabled}
+								on:change={async (e) => {
+									const enabling = e.detail
+
+									if (enabling) {
+										// Non-cloud users without legacy auto-invite: force auto-add mode
+										if (!isCloudHosted() && !isLegacyAutoInvite) {
+											autoAdd = true
+										}
+
+										// Show confirmation when enabling auto-add
+										if (autoAdd || (!isCloudHosted() && !showAutoInviteToggle)) {
+											autoAddConfirmCallback = async () => {
+												await updateAutoInvite(true)
+											}
+										} else {
+											await updateAutoInvite(true)
+										}
+									} else {
+										// Disabling: show confirmation if currently using auto-invite (legacy)
+										if (isLegacyAutoInvite) {
+											autoInviteDisableConfirmCallback = async () => {
+												await updateAutoInvite(false)
+											}
+										} else {
+											await updateAutoInvite(false)
+										}
+									}
+								}}
+								disabled={isCloudHosted() && !allowedAutoDomain}
+								options={{
+									right: isCloudHosted()
+										? `Auto-${displayMode} anyone from ${
+												autoInviteOrAddEnabled ? auto_invite_domain : domain
+											}`
+										: `Auto-${displayMode} anyone joining the instance`
+								}}
+							/>
 						</div>
+						{#if isCloudHosted() && !allowedAutoDomain}
+							<div class="text-red-400 text-xs">{domain} domain not allowed for auto-add</div>
+						{/if}
 					</div>
 				{/snippet}
 			</Popover>
-		{/if}
 
-		<AddUser
-			on:new={() => {
-				listUsers()
-				listInvites()
-			}}
-		/>
-	</div>
-</div>
+			{#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-primary">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-primary">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-primary">
+														<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-primary">{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-primary text-sm py-4">
+										No instance groups configured for auto-add
+									</div>
+								{/if}
+							</div>
+						</div>
+					{/snippet}
+				</Popover>
+			{/if}
+
+			{#if showAutoInviteToggle}
+				<InviteUser {inviteUser} />
+			{/if}
+
+			<AddUser
+				on:new={() => {
+					listUsers()
+					listInvites()
+				}}
+			/>
+		</div>
+	{/snippet}
 
-<div class="">
 	<DataTable
 		shouldLoadMore={(filteredUsers?.length ?? 0) > 30}
 		loadMore={30}
@@ -615,14 +692,14 @@ $effect(() => {
 						first one
 					</Tooltip>
 				</Cell>
-				<Cell head>Status</Cell>
 				<Cell head>Role</Cell>
+				<Cell head>Enabled</Cell>
 				<Cell head last>
 					<span class="sr-only">Actions</span>
 				</Cell>
 			</tr>
 		</Head>
-		<tbody class="divide-y bg-surface">
+		<tbody>
 			{#if filteredUsers}
 				{#each sortedUsers().slice(0, nbDisplayed) as user, index (user.email)}
 					{@const { email, username, is_admin, operator, disabled, added_via } = user}
@@ -630,11 +707,11 @@ $effect(() => {
 					{#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-primary font-bold"> Instance group users </div>
+								<div class="text-xs text-emphasis font-semibold"> Instance group users </div>
 							</td>
 						</tr>
 					{/if}
-					<tr class="!hover:bg-surface-hover">
+					<tr class={index % 2 === 0 ? 'bg-surface-tertiary' : 'bg-surface'}>
 						<Cell first><a href="mailto:{email}">{truncate(email, 20)}</a></Cell>
 						<Cell>{truncate(username, 30)}</Cell>
 						{#if hasNonManualUsers}
@@ -657,15 +734,6 @@ $effect(() => {
 									class="animate-spin"
 								/>{/if}</Cell
 						>
-						<Cell>
-							<div class="flex gap-1">
-								{#if disabled}
-									<Badge color="red">Disabled</Badge>
-								{:else}
-									<Badge color="green">Enabled</Badge>
-								{/if}
-							</div>
-						</Cell>
 						<Cell>
 							<div>
 								{#if added_via?.source === 'instance_group'}
@@ -729,13 +797,10 @@ $effect(() => {
 							</div>
 						</Cell>
 						<Cell>
-							<div class="flex gap-1">
-								<Button
-									color="light"
-									variant="contained"
-									size="xs"
-									spacingSize="xs2"
-									on:click={async () => {
+							<Toggle
+								checked={!disabled}
+								on:change={async (e) => {
+									try {
 										await UserService.updateUser({
 											workspace: $workspaceStore ?? '',
 											username,
@@ -743,51 +808,25 @@ $effect(() => {
 												disabled: !disabled
 											}
 										})
+										sendUserToast(`User ${username} ${disabled ? 'enabled' : 'disabled'}`)
 										listUsers()
-									}}
-								>
-									{disabled ? 'Enable' : 'Disable'}
-								</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 if canConvertToGroup(user)}
-									<Button
-										color="light"
-										variant="contained"
-										btnClasses="text-blue-500"
-										size="xs"
-										spacingSize="xs2"
-										on:click={() => {
-											convertConfirmedCallback = async () => {
-												await convertUserToGroup(username)
-											}
-										}}
-									>
-										Convert
-									</Button>
+									} catch (e) {
+										console.error('Failed to update user status:', e)
+										sendUserToast('Failed to update user status', true)
+									}
+								}}
+								size="xs"
+							/>
+						</Cell>
+						<Cell>
+							<div class="flex gap-1">
+								{#snippet removeUserButton(disabled: boolean)}
 									<Button
-										color="light"
-										variant="contained"
-										btnClasses="text-red-500"
-										size="xs"
-										spacingSize="xs2"
-										on:click={() => {
+										unifiedSize="sm"
+										variant="subtle"
+										destructive
+										{disabled}
+										onClick={() => {
 											deleteConfirmedCallback = async () => {
 												await UserService.deleteUser({
 													workspace: $workspaceStore ?? '',
@@ -797,29 +836,34 @@ $effect(() => {
 												listUsers()
 											}
 										}}
+										startIcon={{ icon: UserMinus }}
 									>
 										Remove
 									</Button>
-								{:else}
+								{/snippet}
+
+								{#if added_via?.source === 'instance_group'}
+									<div class="flex items-center gap-1">
+										{@render removeUserButton(true)}
+										<Tooltip
+											>Cannot remove users synced from instance groups. Either disable the user or
+											remove them from the SCIM group.</Tooltip
+										>
+									</div>
+								{:else if canConvertToGroup(user)}
 									<Button
-										color="light"
-										variant="contained"
-										btnClasses="text-red-500"
-										size="xs"
-										spacingSize="xs2"
+										variant="accent"
+										unifiedSize="sm"
 										on:click={() => {
-											deleteConfirmedCallback = async () => {
-												await UserService.deleteUser({
-													workspace: $workspaceStore ?? '',
-													username
-												})
-												sendUserToast('User removed')
-												listUsers()
+											convertConfirmedCallback = async () => {
+												await convertUserToGroup(username)
 											}
 										}}
 									>
-										Remove
+										Convert
 									</Button>
+								{:else}
+									{@render removeUserButton(false)}
 								{/if}
 							</div>
 						</Cell>
@@ -836,23 +880,27 @@ $effect(() => {
 			{/if}
 		</tbody>
 	</DataTable>
-</div>
+</Section>
+
+<div class="pt-12"></div>
 
 <WorkspaceOperatorSettings />
 
-{#if showInvites}
-	<PageHeader
-		title="Invites ({invites.length ?? ''})"
-		primary={false}
+<div class="pt-12"></div>
+
+{#if invites?.length > 0}
+	<Section
+		label="Invites ({invites.length ?? ''})"
 		tooltip="Manage invites on your workspace."
 		documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#adding-users-to-a-workspace"
 	>
-		<div class="flex gap-2 items-center">
-			<InviteUser on:new={listInvites} />
-		</div>
-	</PageHeader>
-
-	<div>
+		{#snippet action()}
+			{#if showAutoInviteToggle}
+				<div class="flex gap-2 items-center">
+					<InviteUser {inviteUser} />
+				</div>
+			{/if}
+		{/snippet}
 		<DataTable>
 			<Head>
 				<tr>
@@ -913,9 +961,13 @@ $effect(() => {
 								</div>
 							</Cell>
 							<Cell last>
-								<button
-									class="ml-2 text-red-500"
-									onclick={async () => {
+								<Button
+									variant="default"
+									destructive
+									unifiedSize="sm"
+									startIcon={{ icon: X }}
+									btnClasses="w-fit"
+									onClick={async () => {
 										await WorkspaceService.deleteInvite({
 											workspace: $workspaceStore ?? '',
 											requestBody: {
@@ -927,8 +979,8 @@ $effect(() => {
 										listInvites()
 									}}
 								>
-									Cancel
-								</button>
+									Cancel invite
+								</Button>
 							</Cell>
 						</Row>
 					{/each}
@@ -947,9 +999,8 @@ $effect(() => {
 				<button class="ml-4" onclick={() => (nbInviteDisplayed += 50)}>load 50 more</button></span
 			>
 		{/if}
-	</div>
+	</Section>
 {/if}
-
 <ConfirmationModal
 	open={Boolean(deleteConfirmedCallback)}
 	title="Remove user"
@@ -1017,3 +1068,68 @@ $effect(() => {
 		</ul>
 	</div>
 </ConfirmationModal>
+
+<!-- Auto-add/invite confirmation modals - z-index to appear above popover -->
+<div class="[&>div]:!z-[5002]">
+	<ConfirmationModal
+		open={Boolean(autoAddConfirmCallback)}
+		title="Enable Auto-add"
+		confirmationText="Enable"
+		on:canceled={() => {
+			autoAddConfirmCallback = undefined
+		}}
+		on:confirmed={() => {
+			if (autoAddConfirmCallback) {
+				autoAddConfirmCallback()
+			}
+			autoAddConfirmCallback = undefined
+		}}
+	>
+		Are you sure you want to enable auto-add?<br />
+		Anyone added to the instance will automatically join this workspace.
+	</ConfirmationModal>
+</div>
+
+<div class="[&>div]:!z-[5002]">
+	<ConfirmationModal
+		open={Boolean(autoInviteDisableConfirmCallback)}
+		title="Disable Auto-invite"
+		confirmationText="Disable"
+		on:canceled={() => {
+			autoInviteDisableConfirmCallback = undefined
+		}}
+		on:confirmed={() => {
+			if (autoInviteDisableConfirmCallback) {
+				autoInviteDisableConfirmCallback()
+			}
+			autoInviteDisableConfirmCallback = undefined
+		}}
+	>
+		Are you sure you want to disable auto-invite? Auto-invite is a legacy feature. After disabling,
+		it will no longer be available for this workspace. You will only be able to use auto-add. <br />
+		Anyone added to the instance will automatically join this workspace.
+	</ConfirmationModal>
+</div>
+
+<div class="[&>div]:!z-[5002]">
+	<ConfirmationModal
+		open={Boolean(switchToAutoAddConfirmCallback)}
+		title="Switch to Auto-add"
+		confirmationText="Switch"
+		on:canceled={() => {
+			switchToAutoAddConfirmCallback = undefined
+		}}
+		on:confirmed={() => {
+			if (switchToAutoAddConfirmCallback) {
+				switchToAutoAddConfirmCallback()
+			}
+			switchToAutoAddConfirmCallback = undefined
+		}}
+	>
+		Are you sure you want to switch from auto-invite to auto-add?<br />
+		Auto-invite is a legacy feature. After switching to auto-add, auto-invite will no longer be available
+		for this workspace. <br />
+		With auto-add, anyone added to the instance will automatically join this workspace without needing
+		to accept an invitation.
+	</ConfirmationModal>
+</div>