windmill-components 1.613.5 → 1.623.1

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">import AddUser from '../AddUser.svelte';
-import { Alert, Badge, Button, Section, Skeleton } from '../common';
+import { Badge, Button, 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 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, superadmin, globalEmailInvite } from '../../stores';
+import { userStore, workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
-import { Loader2, Mails, Search, Plus, UserMinus, X } 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';
@@ -21,14 +22,13 @@ 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(false);
+let autoAdd = $state(undefined);
 let nbDisplayed = $state(30);
 // Instance group auto-add settings
 let instanceGroups = $state([]);
@@ -219,10 +219,6 @@ 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)
@@ -236,93 +232,9 @@ async function removeAllInvitesFromDomain() {
     })));
 }
 let nbInviteDisplayed = $state(50);
-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';
+let showInvites = $state(false);
+$effect(() => {
+    showInvites = invites?.length > 0 || (auto_invite_domain != undefined && !autoAdd);
 });
 </script>
 
@@ -345,334 +257,336 @@ const displayMode = $derived.by(() => {
 		</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}
 
-<Section
-	label="Members {(filteredUsers?.length ?? users?.length) != undefined
-		? `(${filteredUsers?.length ?? users?.length})`
-		: ''}"
-	tooltip="Manage users manually or enable SSO authentication."
-	documentationLink="https://www.windmill.dev/docs/core_concepts/authentification"
->
-	{#snippet action()}
-		<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} />
+					<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>
 
+		{#if instanceGroups.length > 0}
 			<Popover
 				floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 				usePointerDownOutside
+				floatingClass="!z-20"
 			>
 				{#snippet trigger()}
 					<Button
-						variant="default"
-						unifiedSize="md"
+						color={autoAddInstanceGroups.length > 0 ? 'green' : 'gray'}
+						variant="border"
+						size="xs"
 						nonCaptureEvent={true}
 						startIcon={{ icon: Mails }}
-						>Auto-{displayMode}: {autoInviteOrAddEnabled ? 'ON' : 'OFF'}
+						>Instance groups: {autoAddInstanceGroups.length}
 					</Button>
 				{/snippet}
 				{#snippet content()}
-					<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 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>
 
-									// 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>
+										<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 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>
+									<Button
+										color="blue"
+										size="xs"
+										startIcon={{ icon: Plus }}
+										disabled={!selectedNewInstanceGroup || !selectedNewRole}
+										onclick={addInstanceGroup}
+									>
+										Add
+									</Button>
 								</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`
-								}}
-							/>
+							<!-- 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>
-						{#if isCloudHosted() && !allowedAutoDomain}
-							<div class="text-red-400 text-xs">{domain} domain not allowed for auto-add</div>
-						{/if}
 					</div>
 				{/snippet}
 			</Popover>
+		{/if}
 
-			{#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}
+		<AddUser
+			on:new={() => {
+				listUsers()
+				listInvites()
+			}}
+		/>
+	</div>
+</div>
 
+<div class="">
 	<DataTable
 		shouldLoadMore={(filteredUsers?.length ?? 0) > 30}
 		loadMore={30}
@@ -701,8 +615,8 @@ const displayMode = $derived.by(() => {
 						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>
@@ -743,6 +657,15 @@ const displayMode = $derived.by(() => {
 									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'}
@@ -806,10 +729,13 @@ const displayMode = $derived.by(() => {
 							</div>
 						</Cell>
 						<Cell>
-							<Toggle
-								checked={!disabled}
-								on:change={async (e) => {
-									try {
+							<div class="flex gap-1">
+								<Button
+									color="light"
+									variant="contained"
+									size="xs"
+									spacingSize="xs2"
+									on:click={async () => {
 										await UserService.updateUser({
 											workspace: $workspaceStore ?? '',
 											username,
@@ -817,43 +743,24 @@ const displayMode = $derived.by(() => {
 												disabled: !disabled
 											}
 										})
-										sendUserToast(`User ${username} ${disabled ? 'enabled' : 'disabled'}`)
 										listUsers()
-									} 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
-										unifiedSize="sm"
-										variant="subtle"
-										destructive
-										{disabled}
-										onClick={() => {
-											deleteConfirmedCallback = async () => {
-												await UserService.deleteUser({
-													workspace: $workspaceStore ?? '',
-													username
-												})
-												sendUserToast('User removed')
-												listUsers()
-											}
-										}}
-										startIcon={{ icon: UserMinus }}
-									>
-										Remove
-									</Button>
-								{/snippet}
+									}}
+								>
+									{disabled ? 'Enable' : 'Disable'}
+								</Button>
 
 								{#if added_via?.source === 'instance_group'}
 									<div class="flex items-center gap-1">
-										{@render removeUserButton(true)}
+										<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
@@ -861,8 +768,11 @@ const displayMode = $derived.by(() => {
 									</div>
 								{:else if canConvertToGroup(user)}
 									<Button
-										variant="accent"
-										unifiedSize="sm"
+										color="light"
+										variant="contained"
+										btnClasses="text-blue-500"
+										size="xs"
+										spacingSize="xs2"
 										on:click={() => {
 											convertConfirmedCallback = async () => {
 												await convertUserToGroup(username)
@@ -871,8 +781,45 @@ const displayMode = $derived.by(() => {
 									>
 										Convert
 									</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>
 								{:else}
-									{@render removeUserButton(false)}
+									<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>
@@ -889,27 +836,23 @@ const displayMode = $derived.by(() => {
 			{/if}
 		</tbody>
 	</DataTable>
-</Section>
-
-<div class="pt-12"></div>
+</div>
 
 <WorkspaceOperatorSettings />
 
-<div class="pt-12"></div>
-
-{#if invites?.length > 0}
-	<Section
-		label="Invites ({invites.length ?? ''})"
+{#if showInvites}
+	<PageHeader
+		title="Invites ({invites.length ?? ''})"
+		primary={false}
 		tooltip="Manage invites on your workspace."
 		documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#adding-users-to-a-workspace"
 	>
-		{#snippet action()}
-			{#if showAutoInviteToggle}
-				<div class="flex gap-2 items-center">
-					<InviteUser {inviteUser} />
-				</div>
-			{/if}
-		{/snippet}
+		<div class="flex gap-2 items-center">
+			<InviteUser on:new={listInvites} />
+		</div>
+	</PageHeader>
+
+	<div>
 		<DataTable>
 			<Head>
 				<tr>
@@ -970,13 +913,9 @@ const displayMode = $derived.by(() => {
 								</div>
 							</Cell>
 							<Cell last>
-								<Button
-									variant="default"
-									destructive
-									unifiedSize="sm"
-									startIcon={{ icon: X }}
-									btnClasses="w-fit"
-									onClick={async () => {
+								<button
+									class="ml-2 text-red-500"
+									onclick={async () => {
 										await WorkspaceService.deleteInvite({
 											workspace: $workspaceStore ?? '',
 											requestBody: {
@@ -988,8 +927,8 @@ const displayMode = $derived.by(() => {
 										listInvites()
 									}}
 								>
-									Cancel invite
-								</Button>
+									Cancel
+								</button>
 							</Cell>
 						</Row>
 					{/each}
@@ -1008,8 +947,9 @@ const displayMode = $derived.by(() => {
 				<button class="ml-4" onclick={() => (nbInviteDisplayed += 50)}>load 50 more</button></span
 			>
 		{/if}
-	</Section>
+	</div>
 {/if}
+
 <ConfirmationModal
 	open={Boolean(deleteConfirmedCallback)}
 	title="Remove user"
@@ -1077,68 +1017,3 @@ const displayMode = $derived.by(() => {
 		</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>