windmill-components 1.623.1 → 1.642.0

package/package/components/workspaceSettings/AISettings.svelte

@@ -2,12 +2,13 @@
 import { workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
 import { AI_PROVIDERS, fetchAvailableModels } from '../copilot/lib';
+import { supportsAutocomplete } from '../copilot/utils';
 import TestAiKey from '../copilot/TestAIKey.svelte';
-import Description from '../Description.svelte';
 import Label from '../Label.svelte';
+import SettingsPageHeader from '../settings/SettingsPageHeader.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
 import Toggle from '../Toggle.svelte';
-import ArgEnum from '../ArgEnum.svelte';
+import Select from '../select/Select.svelte';
 import Button from '../common/button/Button.svelte';
 import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
@@ -15,10 +16,22 @@ import Badge from '../common/badge/Badge.svelte';
 import Tooltip from '../Tooltip.svelte';
 import ModelTokenLimits from './ModelTokenLimits.svelte';
 import { setCopilotInfo } from '../../aiStore';
-import CustomAIPrompts from '../copilot/CustomAIPrompts.svelte';
-let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), customPrompts = $bindable(), maxTokensPerModel = $bindable(), usingOpenaiClientCredentialsOauth = $bindable(), onSave } = $props();
+import AIPromptsModal from '../settings/AIPromptsModal.svelte';
+import { Settings } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+import SettingsFooter from './SettingsFooter.svelte';
+import SettingCard from '../instanceSettings/SettingCard.svelte';
+let { aiProviders = $bindable(), codeCompletionModel = $bindable(), defaultModel = $bindable(), customPrompts = $bindable(), maxTokensPerModel = $bindable(), usingOpenaiClientCredentialsOauth = $bindable(), onSave, onDiscard, hasUnsavedChanges = false } = $props();
 let fetchedAiModels = $state(false);
 let availableAiModels = $state(Object.fromEntries(Object.keys(AI_PROVIDERS).map((provider) => [provider, AI_PROVIDERS[provider].defaultModels])));
+let modalOpen = $state(false);
+let initialPrompts = $state($state.snapshot(customPrompts));
+let hasPromptsChanges = $derived(Array.from(new Set([...Object.keys(customPrompts), ...Object.keys(initialPrompts)])).some((key) => {
+    const currentValue = customPrompts[key] || '';
+    const initialValue = initialPrompts[key] || '';
+    return currentValue !== initialValue;
+}));
+let promptCount = $derived(Object.values(customPrompts).filter((p) => p?.trim().length > 0).length);
 let selectedAiModels = $derived(Object.values(aiProviders).flatMap((p) => p.models));
 let modelProviderMap = $derived(Object.fromEntries(Object.entries(aiProviders).flatMap(([provider, config]) => config.models.map((m) => [m, provider]))));
 $effect(() => {
@@ -46,6 +59,10 @@ $effect(() => {
         fetchedAiModels = true;
     })();
 });
+function resetPrompts() {
+    customPrompts = { ...initialPrompts };
+    sendUserToast('Reset to last saved state');
+}
 async function editCopilotConfig() {
     if (Object.keys(aiProviders ?? {}).length > 0) {
         const code_completion_model = codeCompletionModel && modelProviderMap[codeCompletionModel]
@@ -78,7 +95,8 @@ async function editCopilotConfig() {
         });
         setCopilotInfo({});
     }
-    sendUserToast(`Copilot settings updated`);
+    sendUserToast(`AI settings updated`);
+    initialPrompts = { ...customPrompts }; // Update initial prompts after successful save
     onSave?.();
 }
 async function onAiProviderChange(provider) {
@@ -98,37 +116,20 @@ async function onAiProviderChange(provider) {
         aiProviders[provider].models = availableAiModels[provider].slice(0, 1);
     }
 }
+const autocompleteModels = $derived(selectedAiModels.filter(supportsAutocomplete));
 </script>
 
-<div class="flex flex-col gap-4 my-8">
-	<div class="flex flex-col gap-1">
-		<div class="text-emphasis text-sm font-semibold"> Windmill AI</div>
-		<Description link="https://www.windmill.dev/docs/core_concepts/ai_generation">
-			Windmill AI integrates with your favorite AI providers and models.
-		</Description>
-	</div>
-</div>
-
-<div class="flex flex-row-reverse gap-2 pb-4">
-	<Button
-		variant="accent"
-		size="xl"
-		wrapperClasses="self-start"
-		disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||
-			(codeCompletionModel != undefined && codeCompletionModel.length === 0) ||
-			(Object.keys(aiProviders).length > 0 && !defaultModel)}
-		on:click={editCopilotConfig}
-	>
-		Save
-	</Button>
-</div>
+<SettingsPageHeader
+	title="Windmill AI"
+	description="Windmill AI integrates with your favorite AI providers and models."
+	link="https://www.windmill.dev/docs/core_concepts/ai_generation"
+/>
 
-<div class="flex flex-col gap-8">
-	<div class="flex flex-col gap-2">
-		<p class="font-semibold text-xs text-emphasis">AI Providers</p>
-		<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-6 mt-4 pb-8">
+	<SettingCard label="AI Providers">
+		<div class="flex flex-col gap-4 p-4 rounded-md border bg-surface-tertiary">
 			{#each Object.entries(AI_PROVIDERS) as [provider, details]}
-				<div class="flex flex-col gap-2">
+				<div class="flex flex-col">
 					<div class="flex flex-row gap-2">
 						<Toggle
 							options={{
@@ -186,28 +187,33 @@ async function onAiProviderChange(provider) {
 					</div>
 
 					{#if aiProviders[provider]}
-						<div class="mb-4 flex flex-col gap-2">
-							<div class="flex flex-row gap-1">
-								<ResourcePicker
-									selectFirst
-									resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
-										? 'openai_client_credentials_oauth'
-										: provider}
-									initialValue={aiProviders[provider].resource_path}
-									bind:value={
-										() => aiProviders[provider].resource_path || undefined,
-										(v) => {
-											aiProviders[provider].resource_path = v ?? ''
-											onAiProviderChange(provider as AIProvider)
+						<div
+							class="mb-4 flex flex-col gap-6 border p-4 rounded-md mt-2"
+							transition:slide|local={{ duration: 150 }}
+						>
+							<Label label="Resource">
+								<div class="flex flex-row gap-1">
+									<ResourcePicker
+										selectFirst
+										resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
+											? 'openai_client_credentials_oauth'
+											: provider}
+										initialValue={aiProviders[provider].resource_path}
+										bind:value={
+											() => aiProviders[provider].resource_path || undefined,
+											(v) => {
+												aiProviders[provider].resource_path = v ?? ''
+												onAiProviderChange(provider as AIProvider)
+											}
 										}
-									}
-								/>
-								<TestAiKey
-									aiProvider={provider as AIProvider}
-									resourcePath={aiProviders[provider].resource_path}
-									model={aiProviders[provider].models[0]}
-								/>
-							</div>
+									/>
+									<TestAiKey
+										aiProvider={provider as AIProvider}
+										resourcePath={aiProviders[provider].resource_path}
+										model={aiProviders[provider].models[0]}
+									/>
+								</div>
+							</Label>
 
 							<Label label="Enabled models">
 								<MultiSelect
@@ -220,79 +226,106 @@ async function onAiProviderChange(provider) {
 									onCreateItem={(item) =>
 										(aiProviders[provider].models = [...aiProviders[provider].models, item])}
 								/>
+								<p class="text-2xs text-hint">
+									If you don't see the model you want, you can type it manually in the selector.
+								</p>
 							</Label>
-							<p class="text-xs">
-								If you don't see the model you want, you can type it manually in the selector.
-							</p>
 						</div>
 					{/if}
 				</div>
 			{/each}
 		</div>
-	</div>
+	</SettingCard>
 
-	{#if Object.keys(aiProviders).length > 0}
-		{@const autocompleteModels = selectedAiModels.filter(
-			(m) => m.startsWith('codestral-') && !m.startsWith('codestral-embed')
-		)}
-		<div class="flex flex-col gap-2">
-			<p class="font-semibold">Settings</p>
-			<div class="flex flex-col gap-4">
-				<Label label="Default chat model">
-					{#key Object.keys(aiProviders).length}
-						<ArgEnum
-							enum_={selectedAiModels}
-							bind:value={defaultModel}
-							disabled={false}
-							autofocus={false}
-							defaultValue={undefined}
-							valid={true}
-							create={false}
-						/>
-					{/key}
-				</Label>
+	<SettingCard label="Default chat model">
+		{#key Object.keys(aiProviders).length}
+			<Select
+				items={safeSelectItems(selectedAiModels)}
+				bind:value={defaultModel}
+				disabled={false}
+				placeholder="Select a default model"
+				size="sm"
+				class="max-w-lg"
+			/>
+		{/key}
+	</SettingCard>
 
-				<div class="flex flex-col gap-2">
-					<Toggle
-						on:change={(e) => {
-							if (e.detail) {
-								codeCompletionModel = autocompleteModels[0] ?? ''
-							} else {
-								codeCompletionModel = undefined
-							}
-						}}
-						checked={codeCompletionModel != undefined}
-						disabled={autocompleteModels.length == 0}
-						options={{
-							right: 'Code completion (Codestral only)',
-							rightTooltip:
-								'We currently only support Mistral Codestral models for code completion.'
-						}}
-					/>
+	<!-- Code completion group for animation purposes -->
+	<div>
+		<SettingCard label="Code completion">
+			<Toggle
+				on:change={(e) => {
+					if (e.detail) {
+						codeCompletionModel = autocompleteModels[0] ?? ''
+					} else {
+						codeCompletionModel = undefined
+					}
+				}}
+				checked={codeCompletionModel != undefined}
+				disabled={autocompleteModels.length == 0}
+				options={{
+					right: 'Enable code completion',
+					rightTooltip: 'We currently only support Mistral Codestral models for code completion.'
+				}}
+			/>
+		</SettingCard>
 
-					{#if codeCompletionModel != undefined}
-						<Label label="Code completion model">
-							<ArgEnum
-								enum_={autocompleteModels}
-								bind:value={codeCompletionModel}
-								disabled={false}
-								autofocus={false}
-								defaultValue={undefined}
-								valid={true}
-								create={false}
-							/>
-						</Label>
-					{/if}
-				</div>
+		{#if codeCompletionModel != undefined}
+			<div transition:slide|local={{ duration: 150 }} class="mt-6">
+				<SettingCard label="Code completion model">
+					<Select
+						items={safeSelectItems(autocompleteModels)}
+						bind:value={codeCompletionModel}
+						disabled={false}
+						placeholder="Select a code completion model"
+						size="sm"
+					/>
+				</SettingCard>
 			</div>
-		</div>
-	{/if}
+		{/if}
+	</div>
 
-	{#if Object.keys(aiProviders).length > 0}
-		<ModelTokenLimits {aiProviders} bind:maxTokensPerModel />
-	{/if}
+	<ModelTokenLimits {aiProviders} bind:maxTokensPerModel />
 
-	{#if Object.keys(aiProviders).length > 0}
-		<CustomAIPrompts bind:customPrompts title="Custom system prompts" />
-	{/if}
+	<SettingCard
+		label="Custom system prompts"
+		description="Customize AI behavior with workspace-level system prompts. These apply to all workspace
+			members."
+	>
+		<div class="flex items-center gap-2 pt-1">
+			<Button
+				onclick={() => (modalOpen = true)}
+				variant="default"
+				unifiedSize="sm"
+				startIcon={{ icon: Settings }}
+				disabled={Object.keys(aiProviders ?? {}).length === 0}
+			>
+				Configure AI prompts
+			</Button>
+			{#if promptCount > 0}
+				<span class="text-xs text-secondary">({promptCount} configured)</span>
+			{/if}
+			{#if hasPromptsChanges}
+				<Badge color="yellow">Unsaved changes</Badge>
+			{/if}
+		</div>
+	</SettingCard>
 </div>
+
+<AIPromptsModal
+	bind:open={modalOpen}
+	bind:customPrompts
+	onReset={resetPrompts}
+	hasChanges={hasPromptsChanges}
+	isWorkspaceSettings={true}
+/>
+
+<SettingsFooter
+	{hasUnsavedChanges}
+	onSave={editCopilotConfig}
+	onDiscard={() => onDiscard?.()}
+	saveLabel="Save AI settings"
+	disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||
+		(codeCompletionModel != undefined && codeCompletionModel.length === 0) ||
+		(Object.keys(aiProviders).length > 0 && !defaultModel)}
+/>

package/package/components/workspaceSettings/AISettings.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = {
     maxTokensPerModel: Record<string, number>;
     usingOpenaiClientCredentialsOauth: boolean;
     onSave?: () => void;
+    onDiscard?: () => void;
+    hasUnsavedChanges?: boolean;
 };
 declare const AISettings: import("svelte").Component<$$ComponentProps, {}, "codeCompletionModel" | "defaultModel" | "customPrompts" | "aiProviders" | "maxTokensPerModel" | "usingOpenaiClientCredentialsOauth">;
 type AISettings = ReturnType<typeof AISettings>;

package/package/components/workspaceSettings/CreateWorkspace.svelte

@@ -3,7 +3,7 @@ import { goto } from '../../navigation';
 import { base } from '../../base';
 import { JobService, ResourceService, SettingService, UserService, VariableService, WorkspaceService } from '../../gen';
 import { validateUsername } from '../../utils';
-import { logoutWithRedirect } from '../../logout';
+import { logoutWithRedirect } from '../../logoutKit';
 import { page } from '$app/stores';
 import { usersWorkspaceStore, workspaceStore } from '../../stores';
 import CenteredModal from '../CenteredModal.svelte';
@@ -169,7 +169,7 @@ async function createWorkspace() {
     if (auto_invite) {
         await WorkspaceService.editAutoInvite({
             workspace: id,
-            requestBody: { operator: operatorOnly, invite_all: !isCloudHosted(), auto_add: true }
+            requestBody: { operator: operatorOnly, invite_all: !isCloudHosted(), auto_add: autoAdd }
         });
     }
     if (aiKey != '') {
@@ -246,10 +246,10 @@ async function loadWorkspaces() {
         await logoutWithRedirect(url.href.replace(url.origin, ''));
     }
 }
-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;
     if (!automateUsernameCreation) {
         UserService.globalWhoami().then((x) => {
             let uname = '';
@@ -274,6 +274,7 @@ onMount(() => {
 let isDomainAllowed = $state(undefined);
 let auto_invite = $state(false);
 let operatorOnly = $state(false);
+let autoAdd = $state(true);
 let selected = $state('openai');
 run(() => {
     id = name.toLowerCase().replace(/\s/gi, '-');
@@ -290,7 +291,7 @@ run(() => {
 let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 </script>
 
-<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace">
+<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace" centerVertically={false}>
 	<div class="flex flex-col gap-8">
 		{#if isFork}
 			<div class="flex flex-block gap-2">
@@ -370,11 +371,11 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 		<label class="flex flex-col gap-1">
 			<span class="text-xs font-semibold text-emphasis">Workspace ID</span>
 			{#if isFork}
-				<span class="text-2xs text-secondary"
+				<span class="text-xs text-secondary"
 					>Slug to uniquely identify your fork (this will also set the branch name)</span
 				>
 			{:else}
-				<span class="text-2xs text-secondary">Slug to uniquely identify your workspace</span>
+				<span class="text-xs text-secondary">Slug to uniquely identify your workspace</span>
 			{/if}
 
 			{#if isFork}
@@ -487,8 +488,8 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 			<div class="flex flex-col gap-1">
 				<label for="auto-invite" class="text-xs font-semibold text-emphasis"
 					>{isCloudHosted()
-						? `Auto-invite anyone from ${domain}`
-						: `Auto-invite anyone joining the instance`}</label
+						? `Auto-${autoAdd ? 'add' : 'invite'} anyone from ${domain}`
+						: `Auto-${autoAdd ? 'add' : 'invite'} anyone joining the instance`}</label
 				>
 				<Toggle
 					id="auto-invite"
@@ -502,12 +503,25 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 				{#if auto_invite}
 					<div class="bg-surface-tertiary p-4 rounded-md flex flex-col gap-8">
 						<!-- svelte-ignore a11y_label_has_associated_control -->
-						<label class="flex flex-col gap-1">
-							<span class="text-xs font-semibold text-emphasis">Mode</span>
-							<span class="text-xs text-secondary font-normal"
-								>Whether to invite or add users directly to the workspace.</span
-							>
-						</label>
+						{#if isCloudHosted()}
+							<label class="flex flex-col gap-1">
+								<span class="text-xs font-semibold text-emphasis">Mode</span>
+								<span class="text-xs text-secondary font-normal"
+									>Whether to invite or add users directly to the workspace.</span
+								>
+								<ToggleButtonGroup
+									selected={autoAdd ? 'add' : 'invite'}
+									on:selected={async (e) => {
+										autoAdd = e.detail === 'add'
+									}}
+								>
+									{#snippet children({ item })}
+										<ToggleButton value="invite" label="Auto-invite" {item} />
+										<ToggleButton value="add" label="Auto-add" {item} />
+									{/snippet}
+								</ToggleButtonGroup>
+							</label>
+						{/if}
 
 						<label class="font-semibold flex flex-col gap-1">
 							<span class="text-xs font-semibold text-emphasis">Role</span>
@@ -528,7 +542,7 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 				{/if}
 			</div>
 		{/if}
-		<div class="flex flex-wrap flex-row justify-between pt-12 gap-4">
+		<div class="flex flex-wrap flex-row justify-between gap-4 pt-4">
 			<Button
 				disabled={forkCreationLoading}
 				variant="default"

package/package/components/workspaceSettings/CustomInstanceDbSelect.svelte

@@ -22,6 +22,7 @@ let currentIsAlreadyUsedElsewhere = $derived(tag && status && status.tag !== tag
 		placeholder="Search or create..."
 		showPlaceholderOnOpen
 		items={onlySelectedTags}
+		id="custom-instance-db-select"
 		disabled={!$isCustomInstanceDbEnabled}
 	>
 		{#snippet endSnippet({ item })}

package/package/components/workspaceSettings/CustomInstanceDbWizardModal.svelte

@@ -109,7 +109,8 @@ let preventClose = false;
 										'GRANT CREATE ON SCHEMA public TO custom_instance_user;\n' +
 										`GRANT CREATE ON DATABASE "${dbname}" TO custom_instance_user;\n` +
 										'ALTER DEFAULT PRIVILEGES IN SCHEMA public \n' +
-										'  	GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES\n    TO custom_instance_user;'
+										'  	GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES\n    TO custom_instance_user;\n' +
+										'ALTER ROLE custom_instance_user CREATEROLE;'
 								}
 							],
 							status?.error ?? undefined
@@ -132,6 +133,7 @@ let preventClose = false;
 				{/if}
 				<Button
 					size="sm"
+					id="run-custom-instance-db-setup-button"
 					variant={!status?.success ? 'accent' : 'default'}
 					endIcon={status?.success ? undefined : { icon: ArrowRight }}
 					disabled={!$isCustomInstanceDbEnabled}

package/package/components/workspaceSettings/CustomInstanceDbWizardModal.svelte.d.ts

@@ -1,12 +1,11 @@
 import { type CustomInstanceDb, type CustomInstanceDbTag, type ListCustomInstanceDbsResponse } from '../../gen';
 import type { ResourceReturn } from 'runed';
 import type { ConfirmationModalHandle } from '../common/confirmationModal/asyncConfirmationModal.svelte';
-import type DBManagerDrawer from '../DBManagerDrawer.svelte';
 import type { Snippet } from 'svelte';
 type Props = {
     customInstanceDbs: ResourceReturn<ListCustomInstanceDbsResponse>;
     confirmationModal: ConfirmationModalHandle;
-    dbManagerDrawer: DBManagerDrawer | undefined;
+    dbManagerDrawer: any | undefined;
     bottomHint?: Snippet | undefined;
     opened: {
         status: CustomInstanceDb | undefined;

package/package/components/workspaceSettings/DataTableSettings.svelte

@@ -29,8 +29,8 @@ let DEFAULT_DATATABLE_DB_NAME = 'datatable_db';
 <script lang="ts">import { Plus } from 'lucide-svelte';
 import Button from '../common/button/Button.svelte';
 import CloseButton from '../common/CloseButton.svelte';
-import Description from '../Description.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
+import SettingsPageHeader from '../settings/SettingsPageHeader.svelte';
 import Select from '../select/Select.svelte';
 import Cell from '../table/Cell.svelte';
 import DataTable from '../table/DataTable.svelte';
@@ -42,16 +42,16 @@ import { isCustomInstanceDbEnabled } from './utils.svelte';
 import { random_adj } from '../random_positive_adjetive';
 import { sendUserToast } from '../../toast';
 import { SettingService, WorkspaceService } from '../../gen';
-import { workspaceStore } from '../../stores';
+import { globalDbManagerDrawer, workspaceStore } from '../../stores';
 import { createAsyncConfirmationModal } from '../common/confirmationModal/asyncConfirmationModal.svelte';
 import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
 import { resource } from 'runed';
 import CustomInstanceDbSelect from './CustomInstanceDbSelect.svelte';
-import DBManagerDrawer from '../DBManagerDrawer.svelte';
 import { Popover } from '../meltComponents';
 import ExploreAssetButton from '../ExploreAssetButton.svelte';
 import { deepEqual } from 'fast-equals';
 import { clone } from '../../utils';
+import SettingsFooter from './SettingsFooter.svelte';
 let { dataTableSettings = $bindable() } = $props();
 let tableHeadNames = ['Name', 'Database', '', ''];
 let tableHeadTooltips = {
@@ -102,10 +102,11 @@ async function onSave() {
     catch (e) {
         sendUserToast(e, true);
         console.error('Error saving data table settings', e);
+        throw e;
     }
 }
 let confirmationModal = createAsyncConfirmationModal();
-let dbManagerDrawer = $state();
+let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 let dirtyMap = $derived.by(() => {
     const map = {};
     for (let i = 0; i < tempSettings.dataTables.length; i++) {
@@ -115,20 +116,25 @@ let dirtyMap = $derived.by(() => {
     }
     return map;
 });
+function onDiscard() {
+    tempSettings.dataTables = $state.snapshot(dataTableSettings.dataTables);
+}
+export function discard() {
+    onDiscard();
+}
 export function unsavedChanges() {
     return { savedValue: dataTableSettings, modifiedValue: tempSettings };
 }
+let hasUnsavedChanges = $derived.by(() => {
+    return !deepEqual(dataTableSettings, tempSettings);
+});
 </script>
 
-<div class="flex flex-col gap-4 my-8">
-	<div class="flex flex-col gap-1">
-		<div class="text-sm font-semibold text-emphasis">Data tables</div>
-		<Description link="https://www.windmill.dev/docs/core_concepts/persistent_storage/data_tables">
-			Store relational data out of the box. Interact with a fully managed PostgreSQL database
-			directly from the Windmill SDK.
-		</Description>
-	</div>
-</div>
+<SettingsPageHeader
+	title="Data tables"
+	description="Store relational data out of the box. Interact with a fully managed PostgreSQL database directly from the Windmill SDK."
+	link="https://www.windmill.dev/docs/core_concepts/persistent_storage/data_tables"
+/>
 
 <DataTable>
 	<Head>
@@ -145,7 +151,7 @@ export function unsavedChanges() {
 			{/each}
 		</tr>
 	</Head>
-	<tbody class="divide-y bg-surface">
+	<tbody class="divide-y bg-surface-tertiary">
 		{#if tempSettings.dataTables.length == 0}
 			<Row>
 				<Cell colspan={tableHeadNames.length} class="text-center py-6">
@@ -156,7 +162,7 @@ export function unsavedChanges() {
 		{#each tempSettings.dataTables as dataTable, dataTableIndex}
 			<Row>
 				<Cell first class="w-48 relative">
-					<TextInput bind:value={dataTable.name} inputProps={{ placeholder: 'Name' }} />
+					<TextInput bind:value={dataTable.name} inputProps={{ placeholder: 'Name', id: 'name' }} />
 				</Cell>
 				<Cell>
 					<div class="flex gap-2">
@@ -185,6 +191,7 @@ export function unsavedChanges() {
 										}
 									}
 								}
+								id="database-type-select"
 								class="w-28"
 							/>
 						</div>
@@ -250,7 +257,12 @@ export function unsavedChanges() {
 	</tbody>
 </DataTable>
 
-<Button wrapperClasses="mt-4 mb-16 max-w-fit" on:click={onSave} variant="accent">Save</Button>
+<SettingsFooter
+	class="mt-8"
+	{hasUnsavedChanges}
+	{onSave}
+	{onDiscard}
+	saveLabel="Save data table settings"
+/>
 
 <ConfirmationModal {...confirmationModal.props} />
-<DBManagerDrawer bind:this={dbManagerDrawer} />

package/package/components/workspaceSettings/DataTableSettings.svelte.d.ts

@@ -14,6 +14,7 @@ type Props = {
     dataTableSettings: DataTableSettingsType;
 };
 declare const DataTableSettings: import("svelte").Component<Props, {
+    discard: () => void;
     unsavedChanges: () => {
         savedValue: any;
         modifiedValue: any;