windmill-components 1.623.1 → 1.642.0

package/package/components/SuperadminSettingsInner.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">import { UserService, SettingService } from '../gen';
-import TableCustom from './TableCustom.svelte';
+import DataTable from './table/DataTable.svelte';
+import Head from './table/Head.svelte';
+import Cell from './table/Cell.svelte';
 import InviteGlobalUser from './InviteGlobalUser.svelte';
-import { Button, Tab, Tabs } from './common';
+import { Button } from './common';
 import { sendUserToast } from '../toast';
 import { base } from '../base';
 import SearchItems from './SearchItems.svelte';
@@ -9,23 +11,28 @@ import { page } from '$app/stores';
 import { goto as gotoUrl } from '$app/navigation';
 import Version from './Version.svelte';
 import Uptodate from './Uptodate.svelte';
-import TabContent from './common/tabs/TabContent.svelte';
 import InstanceSettings from './InstanceSettings.svelte';
 import { truncate } from '../utils';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import { userStore, workspaceStore } from '../stores';
-import { ExternalLink } from 'lucide-svelte';
-import { settingsKeys } from './instanceSettings';
+import { ExternalLink, Pencil, UserMinus, UserPlus } from 'lucide-svelte';
+import DropdownV2 from './DropdownV2.svelte';
+import Popover from './meltComponents/Popover.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import ChangeInstanceUsername from './ChangeInstanceUsername.svelte';
 import { isCloudHosted } from '../cloud';
 import InstanceNameEditor from './InstanceNameEditor.svelte';
 import Toggle from './Toggle.svelte';
 import { instanceSettingsSelectedTab } from '../stores';
-import { onDestroy } from 'svelte';
+import { onDestroy, tick } from 'svelte';
+import SidebarNavigation from './common/sidebar/SidebarNavigation.svelte';
+import { instanceSettingsNavigationGroups, tabToCategoryMap, tabToAuthSubTab, categoryToTabMap, buildSearchableSettingItems } from './instanceSettings';
+import TextInput from './text_input/TextInput.svelte';
+import SettingsPageHeader from './settings/SettingsPageHeader.svelte';
+import SettingsSearchInput from './instanceSettings/SettingsSearchInput.svelte';
 let filter = $state('');
-let { closeDrawer } = $props();
+let { closeDrawer, showHeaderInfo = true, yamlMode = $bindable(false), hasUnsavedChanges = $bindable(false) } = $props();
 function removeHash() {
     const index = $page.url.href.lastIndexOf('#');
     if (index === -1)
@@ -39,6 +46,8 @@ onDestroy(() => {
 let users = $state([]);
 let filteredUsers = $state([]);
 let deleteConfirmedCallback = $state(undefined);
+let deleteUserEmail = $state('');
+let editWrappers = $state({});
 let activeOnly = $state(false);
 async function listUsers(activeOnly) {
     users = await UserService.listUsersAsSuperAdmin({ perPage: 100000, activeOnly: activeOnly });
@@ -55,10 +64,10 @@ $effect(() => {
 });
 let nbDisplayed = $state(50);
 let instanceSettings = $state();
-let automateUsernameCreation = $state(false);
+let automateUsernameCreation = $state(true);
 async function getAutomateUsernameCreationSetting() {
     automateUsernameCreation =
-        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? true;
 }
 getAutomateUsernameCreationSetting();
 let automateUsernameModalOpen = $state(false);
@@ -86,6 +95,51 @@ async function updateName(name, email) {
         sendUserToast('Error updating user', true);
     }
 }
+// The category name for InstanceSettings based on current sidebar tab
+let instanceSettingsCategory = $derived(tabToCategoryMap[tab] ?? 'Core');
+let authSubTab = $derived(tabToAuthSubTab[tab] ?? 'sso');
+function handleNavigate(newTab) {
+    if (newTab === tab)
+        return;
+    tab = newTab;
+}
+export function saveSettings() {
+    return instanceSettings?.saveSettings();
+}
+export function discardAll() {
+    instanceSettings?.discardAll();
+}
+export function syncBeforeDiff() {
+    return instanceSettings?.syncBeforeDiff() ?? true;
+}
+export function buildFullDiff() {
+    return instanceSettings?.buildFullDiff() ?? { original: '', modified: '' };
+}
+// --- Settings search ---
+const searchableItems = buildSearchableSettingItems();
+let scrollTimeout;
+let highlightTimeout;
+async function handleSearchSelect(item) {
+    handleNavigate(item.tabId);
+    if (item.settingKey) {
+        clearTimeout(scrollTimeout);
+        clearTimeout(highlightTimeout);
+        await tick();
+        // Wait for the tab content to render before scrolling
+        scrollTimeout = setTimeout(() => {
+            const el = document.querySelector(`[data-setting-key="${item.settingKey}"]`);
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                el.classList.add('setting-highlight');
+                highlightTimeout = setTimeout(() => el.classList.remove('setting-highlight'), 2500);
+            }
+        }, 100);
+    }
+}
+onDestroy(() => {
+    clearTimeout(scrollTimeout);
+    clearTimeout(highlightTimeout);
+});
 </script>
 
 <SearchItems
@@ -96,135 +150,177 @@ async function updateName(name, email) {
 />
 
 <div class="flex flex-col h-full w-full">
-	<div>
-		<div class="flex justify-between">
-			<div class="text-xs pt-1 text-primary flex flex-col">
-				<div>Windmill <Version /></div>
-			</div>
-			<div><Uptodate /></div></div
-		>
-	</div>
-	{#if $workspaceStore !== 'admins'}
-		<div class="flex flex-row-reverse">
-			<Button
-				variant="default"
-				target="_blank"
-				href="{base}/?workspace=admins"
-				endIcon={{ icon: ExternalLink }}
+	{#if showHeaderInfo}
+		<div>
+			<div class="flex justify-between">
+				<div class="text-xs pt-1 text-secondary flex flex-col">
+					<div>Windmill <Version /></div>
+				</div>
+				<div><Uptodate /></div></div
 			>
-				Admins workspace
-			</Button>
 		</div>
+		{#if $workspaceStore !== 'admins'}
+			<div class="flex flex-row-reverse">
+				<Button
+					variant="default"
+					target="_blank"
+					href="{base}/?workspace=admins"
+					endIcon={{ icon: ExternalLink }}
+				>
+					Admins workspace
+				</Button>
+			</div>
+		{/if}
 	{/if}
-	<div class="pt-4 h-full">
-		<Tabs bind:selected={tab}>
-			<Tab
-				value="users"
-				aiId="instance-settings-users"
-				aiDescription="Instance users settings"
-				label="Users"
-			/>
-
-			{#each settingsKeys as category}
-				<Tab
-					value={category}
-					aiId={`instance-settings-${category}`}
-					aiDescription={`Instance ${category} settings`}
-					label={category}
+	<div class="{showHeaderInfo ? 'pt-4' : ''} flex grow min-h-0">
+		{#if !yamlMode}
+			<!-- Sidebar Navigation -->
+			<div class="w-52 shrink-0 h-full overflow-auto p-4 bg-surface flex flex-col">
+				<SettingsSearchInput {searchableItems} onSelect={handleSearchSelect} class="mb-3" />
+				<SidebarNavigation
+					groups={instanceSettingsNavigationGroups}
+					selectedId={tab}
+					onNavigate={handleNavigate}
 				/>
-			{/each}
-			{#snippet content()}
-				<div class="pt-4"></div>
-				<TabContent value="users">
-					<div class="h-full">
-						{#if !automateUsernameCreation && !isCloudHosted()}
-							<div class="mb-4">
-								<h3 class="mb-2"> Automatic username creation </h3>
-								<div class="mb-2">
-									<span class="text-primary text-sm"
-										>Automatically create a username for new users based on their email, shared
-										across workspaces. <a
-											target="_blank"
-											href="https://www.windmill.dev/docs/advanced/instance_settings#automatic-username-creation"
-											>Learn more</a
-										></span
+				{#if $workspaceStore !== 'admins'}
+					<div class="mt-4 pt-2 border-t border-surface-hover">
+						<a
+							href="{base}/?workspace=admins"
+							target="_blank"
+							class="flex items-center gap-2 px-2 py-1.5 text-xs text-secondary hover:text-primary transition-colors"
+						>
+							<ExternalLink size={14} />
+							Admins workspace
+						</a>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Main Content -->
+		<div class="flex-1 min-w-0 h-full">
+			<div class="h-full overflow-auto bg-surface">
+				<div class="h-fit px-8 py-4">
+					{#if tab === 'users' && !yamlMode}
+						<div class="h-full">
+							{#if !automateUsernameCreation && !isCloudHosted()}
+								<div class="mb-4">
+									<h3 class="mb-2"> Automatic username creation </h3>
+									<div class="mb-2">
+										<span class="text-primary text-sm"
+											>Automatically create a username for new users based on their email, shared
+											across workspaces. <a
+												target="_blank"
+												href="https://www.windmill.dev/docs/advanced/instance_settings#automatic-username-creation"
+												>Learn more</a
+											></span
+										>
+									</div>
+									<Button
+										btnClasses="w-auto"
+										size="sm"
+										variant="accent"
+										on:click={() => {
+											automateUsernameModalOpen = true
+										}}
 									>
+										Enable (recommended)
+									</Button>
+									<ConfirmationModal
+										open={automateUsernameModalOpen}
+										on:confirmed={() => {
+											automateUsernameModalOpen = false
+											enableAutomateUsernameCreationSetting()
+										}}
+										on:canceled={() => (automateUsernameModalOpen = false)}
+										title="Automatic username creation"
+										confirmationText="Enable"
+									>
+										Once activated, it will not be possible to disable this feature. In case
+										existing users have different usernames in different workspaces, you will have
+										to manually confirm the username for each user.
+									</ConfirmationModal>
 								</div>
-								<Button
-									btnClasses="w-auto"
-									size="sm"
-									variant="accent"
-									on:click={() => {
-										automateUsernameModalOpen = true
+							{/if}
+
+							<SettingsPageHeader
+								title="Instance users ({users.length})"
+								description="Manage all users across your Windmill instance."
+								link="https://www.windmill.dev/docs/advanced/instance_settings#global-users"
+							/>
+							<div class="flex flex-row gap-2 items-center">
+								<TextInput
+									inputProps={{ placeholder: 'Search users' }}
+									bind:value={filter}
+									class="w-60"
+								/><Toggle
+									bind:checked={activeOnly}
+									options={{
+										left: 'Show active users only',
+										leftTooltip:
+											'An active user is a user who has performed at least one action in the last 30 days'
 									}}
-								>
-									Enable (recommended)
-								</Button>
-								<ConfirmationModal
-									open={automateUsernameModalOpen}
-									on:confirmed={() => {
-										automateUsernameModalOpen = false
-										enableAutomateUsernameCreationSetting()
+								/>
+
+								<div class="flex-1"></div>
+								<Popover placement="bottom-end" disableFocusTrap closeButton>
+									{#snippet trigger()}
+										<Button
+											variant="accent"
+											unifiedSize="md"
+											startIcon={{ icon: UserPlus }}
+											nonCaptureEvent
+											wrapperClasses="w-fit shrink-0"
+										>
+											Add new user
+										</Button>
+									{/snippet}
+									{#snippet content()}
+										<InviteGlobalUser on:new={() => listUsers(activeOnly)} />
+									{/snippet}
+								</Popover>
+							</div>
+							<p class="text-hint text-2xs mt-2">
+								{filteredUsers.length} user{filteredUsers.length !== 1 ? 's' : ''} found
+							</p>
+							<div class="mt-1">
+								<DataTable
+									shouldLoadMore={(filteredUsers?.length ?? 0) > 50}
+									loadMore={50}
+									on:loadMore={() => {
+										nbDisplayed += 50
 									}}
-									on:canceled={() => (automateUsernameModalOpen = false)}
-									title="Automatic username creation"
-									confirmationText="Enable"
 								>
-									Once activated, it will not be possible to disable this feature. In case existing
-									users have different usernames in different workspaces, you will have to manually
-									confirm the username for each user.
-								</ConfirmationModal>
-							</div>
-						{/if}
-
-						<div class="py-2 mb-6">
-							<InviteGlobalUser on:new={() => listUsers(activeOnly)} />
-						</div>
-
-						<div class="flex flex-row justify-between">
-							<h3 class="text-sm font-semibold text-emphasis">All instance users</h3>
-							<Toggle
-								bind:checked={activeOnly}
-								options={{
-									left: 'Show active users only',
-									leftTooltip:
-										'An active user is a user who has performed at least one action in the last 30 days'
-								}}
-							/>
-						</div>
-						<div class="pb-1"></div>
-						<div>
-							<input placeholder="Search users" bind:value={filter} class="input mt-1" />
-						</div>
-						<div class="mt-2 overflow-auto">
-							<TableCustom>
-								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-								<tr slot="header-row" class="sticky top-0 bg-surface border-b">
-									<th>email</th>
-									<th>auth</th>
-									<th>name</th>
-									{#if automateUsernameCreation}
-										<th>username</th>
-									{/if}
-									{#if activeOnly}
-										<th>kind</th>
-									{/if}
-									<th></th>
-									<th></th>
-								</tr>
-								{#snippet body()}
-									<tbody class="overflow-y-auto w-full h-full max-h-full">
+									<Head>
+										<tr>
+											<Cell head first>Email</Cell>
+											{#if automateUsernameCreation}
+												<Cell head>Username</Cell>
+											{/if}
+											<Cell head>Name</Cell>
+											<Cell head>Auth</Cell>
+											{#if activeOnly}
+												<Cell head>Kind</Cell>
+											{/if}
+											<Cell head>Role</Cell>
+											<Cell head last>
+												<span class="sr-only">Actions</span>
+											</Cell>
+										</tr>
+									</Head>
+									<tbody>
 										{#if filteredUsers && users}
-											{#each filteredUsers.slice(0, nbDisplayed) as { email, super_admin, devops, login_type, name, username, operator_only } (email)}
-												<tr class="border">
-													<td>{email}</td>
-													<td>{login_type}</td>
-													<td><span class="break-words">{truncate(name ?? '', 30)}</span></td>
-
+											{#each filteredUsers.slice(0, nbDisplayed) as { email, super_admin, devops, login_type, name, username, operator_only }, i (email)}
+												<tr class={i % 2 === 0 ? 'bg-surface-tertiary' : 'bg-surface'}>
+													<Cell first class="max-w-[200px]"
+														><a href="mailto:{email}" title={email} class="truncate block"
+															>{email}</a
+														></Cell
+													>
 													{#if automateUsernameCreation}
-														<td>
+														<Cell class="max-w-[150px]">
 															{#if username}
-																{username}
+																<span title={username} class="truncate block">{username}</span>
 															{:else}
 																{#key filteredUsers.map((u) => u.username).join()}
 																	<ChangeInstanceUsername
@@ -237,18 +333,27 @@ async function updateName(name, email) {
 																	/>
 																{/key}
 															{/if}
-														</td>
+														</Cell>
 													{/if}
+													<Cell class="max-w-[150px]"
+														><span title={name ?? ''} class="truncate block"
+															>{truncate(name ?? '', 30)}</span
+														></Cell
+													>
+													<Cell class="max-w-[100px]"
+														><span title={login_type} class="truncate block">{login_type}</span
+														></Cell
+													>
 													{#if activeOnly}
-														<td>
+														<Cell>
 															{#if operator_only}
 																Operator only
 															{:else}
 																Developer
 															{/if}
-														</td>
+														</Cell>
 													{/if}
-													<td>
+													<Cell>
 														<ToggleButtonGroup
 															selected={super_admin ? 'super_admin' : devops ? 'devops' : 'user'}
 															on:selected={async (e) => {
@@ -308,77 +413,87 @@ async function updateName(name, email) {
 																/>
 															{/snippet}
 														</ToggleButtonGroup>
-													</td>
-													<td>
-														<div class="flex flex-row gap-x-1 justify-end">
-															<InstanceNameEditor
-																{login_type}
-																value={name}
-																{username}
-																{email}
-																on:refresh={() => {
-																	listUsers(activeOnly)
-																}}
-																on:save={(e) => {
-																	updateName(e.detail, email)
-																}}
-																on:renamed={() => {
-																	listUsers(activeOnly)
-																}}
-																{automateUsernameCreation}
-															/>
-															<Button
-																color="light"
-																variant="contained"
-																size="xs"
-																spacingSize="xs2"
-																btnClasses="text-red-500"
-																on:click={() => {
-																	deleteConfirmedCallback = async () => {
-																		await UserService.globalUserDelete({ email })
-																		sendUserToast(`User ${email} removed`)
+													</Cell>
+													<Cell last>
+														<div class="flex items-center justify-end">
+															<div bind:this={editWrappers[email]} class="w-0 h-0 overflow-hidden">
+																<InstanceNameEditor
+																	{login_type}
+																	value={name}
+																	{username}
+																	{email}
+																	on:refresh={() => {
+																		listUsers(activeOnly)
+																	}}
+																	on:save={(e) => {
+																		updateName(e.detail, email)
+																	}}
+																	on:renamed={() => {
 																		listUsers(activeOnly)
+																	}}
+																	{automateUsernameCreation}
+																/>
+															</div>
+															<DropdownV2
+																items={[
+																	{
+																		displayName: 'Edit',
+																		icon: Pencil,
+																		action: () => {
+																			const btn = editWrappers[email]?.querySelector(
+																				'[aria-label="Popup button"]'
+																			)
+																			if (btn instanceof HTMLElement) btn.click()
+																		}
+																	},
+																	{
+																		displayName: 'Remove',
+																		icon: UserMinus,
+																		type: 'delete',
+																		action: () => {
+																			deleteUserEmail = email
+																			deleteConfirmedCallback = async () => {
+																				await UserService.globalUserDelete({
+																					email
+																				})
+																				sendUserToast(`User ${email} removed`)
+																				listUsers(activeOnly)
+																			}
+																		}
 																	}
-																}}
-															>
-																Remove
-															</Button>
+																]}
+															/>
 														</div>
-													</td>
+													</Cell>
 												</tr>
 											{/each}
 										{/if}
 									</tbody>
-								{/snippet}
-							</TableCustom>
+								</DataTable>
+							</div>
 						</div>
-						{#if filteredUsers && filteredUsers?.length > 50 && nbDisplayed < filteredUsers.length}
-							<span class="text-xs"
-								>{nbDisplayed} users out of {filteredUsers.length}
-								<button class="ml-4" onclick={() => (nbDisplayed += 50)}>load 50 more</button></span
-							>
-						{/if}
-					</div>
-				</TabContent>
-				<TabContent value="" values={settingsKeys}>
-					<InstanceSettings bind:this={instanceSettings} hideTabs hideSave bind:tab {closeDrawer} />
-				</TabContent>
-			{/snippet}
-		</Tabs>
+					{:else}
+						<InstanceSettings
+							bind:this={instanceSettings}
+							hideTabs
+							bind:yamlMode
+							bind:hasUnsavedChanges
+							tab={instanceSettingsCategory}
+							{authSubTab}
+							{closeDrawer}
+							onNavigateToTab={(category) => {
+								const targetTab = categoryToTabMap[category]
+								if (targetTab) {
+									handleNavigate(targetTab)
+								}
+							}}
+						/>
+					{/if}
+				</div>
+			</div>
+		</div>
 	</div>
 </div>
-{#if tab != 'users'}
-	<div class="absolute bottom-2 w-[95%]">
-		<Button
-			variant="accent"
-			on:click={() => {
-				instanceSettings?.saveSettings()
-			}}
-		>
-			Save
-		</Button>
-	</div>{/if}
-
 <ConfirmationModal
 	open={Boolean(deleteConfirmedCallback)}
 	title="Remove user"
@@ -394,6 +509,6 @@ async function updateName(name, email) {
 	}}
 >
 	<div class="flex flex-col w-full space-y-4">
-		<span>Are you sure you want to remove ?</span>
+		<span>Are you sure you want to remove <b>{deleteUserEmail}</b>?</span>
 	</div>
 </ConfirmationModal>

package/package/components/SuperadminSettingsInner.svelte.d.ts

@@ -1,5 +1,16 @@
 declare const SuperadminSettingsInner: import("svelte").Component<{
     closeDrawer: any;
-}, {}, "">;
+    showHeaderInfo?: boolean;
+    yamlMode?: boolean;
+    hasUnsavedChanges?: boolean;
+}, {
+    saveSettings: () => Promise<void> | undefined;
+    discardAll: () => void;
+    syncBeforeDiff: () => boolean;
+    buildFullDiff: () => {
+        original: string;
+        modified: string;
+    };
+}, "hasUnsavedChanges" | "yamlMode">;
 type SuperadminSettingsInner = ReturnType<typeof SuperadminSettingsInner>;
 export default SuperadminSettingsInner;