From a4ab7e1ebf2814a207fb85a430e4a259c1937ceb Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 18 Feb 2024 14:35:42 +0100
Subject: [PATCH] fix: improve instance settings save button UX

---
 .../lib/components/InstanceSettings.svelte    |  18 +--
 .../lib/components/SuperadminSettings.svelte  |  21 ++-
 .../src/lib/components/UserSettings.svelte    | 143 ++++++++++--------
 3 files changed, 100 insertions(+), 82 deletions(-)

diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index fc0d9cb253..1f46f81a60 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -25,6 +25,7 @@
 
 	export let tab: string = 'Core'
 	export let hideTabs: boolean = false
+	export let hideSave: boolean = false
 
 	let values: Record<string, any> = {}
 	let initialOauths: Record<string, any> = {}
@@ -76,7 +77,7 @@
 		}
 	}
 
-	async function saveSettings() {
+	export async function saveSettings() {
 		if (values) {
 			const allSettings = Object.values(settings).flatMap((x) => Object.entries(x))
 			const newServerConfig = Object.fromEntries(
@@ -126,6 +127,7 @@
 		} else {
 			console.error('Values not loaded')
 		}
+		sendUserToast('Settings updated')
 	}
 
 	let oauths: Record<string, any> = {}
@@ -558,14 +560,8 @@
 		</svelte:fragment>
 	</Tabs>
 </div>
-<div class="py-4" />
 
-<Button
-	on:click={async () => {
-		await saveSettings()
-		sendUserToast('Settings updated')
-	}}
->
-	Save
-</Button>
-<div class="pb-8" />
+{#if !hideSave}
+	<Button on:click={saveSettings}>Save settings</Button>
+	<div class="pb-8" />
+{/if}
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index 2ac3d4d19a..8b381467fb 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -50,6 +50,8 @@
 	let tab: 'users' | string = 'users'
 
 	let nbDisplayed = 50
+
+	let instanceSettings
 </script>
 
 <SearchItems
@@ -61,7 +63,7 @@
 
 <Drawer bind:this={drawer} on:open={listUsers} size="1200px" on:close={removeHash}>
 	<DrawerContent overflow_y={true} title="Instance Settings" on:close={closeDrawer}>
-		<div class="flex flex-col h-full">
+		<div class="flex flex-col h-full w-full">
 			<div>
 				<div class="flex justify-between">
 					<div class="text-xs pt-1 text-tertiary flex flex-col">
@@ -171,13 +173,24 @@
 							</div>
 						</TabContent>
 						<TabContent value="" values={settingsKeys}>
-							<div class="h-full"> <InstanceSettings hideTabs {tab} /> </div>
+							<InstanceSettings bind:this={instanceSettings} hideTabs hideSave {tab} />
 						</TabContent>
 					</svelte:fragment>
 				</Tabs>
 			</div>
-		</div></DrawerContent
-	>
+		</div>
+		{#if tab != 'users'}
+			<div class="absolute bottom-2 w-[95%]">
+				<Button
+					color="dark"
+					on:click={() => {
+						instanceSettings?.saveSettings()
+					}}
+				>
+					Save
+				</Button>
+			</div>{/if}
+	</DrawerContent>
 </Drawer>
 
 <ConfirmationModal
diff --git a/frontend/src/lib/components/UserSettings.svelte b/frontend/src/lib/components/UserSettings.svelte
index 90b9dcd4e5..1dc1599048 100644
--- a/frontend/src/lib/components/UserSettings.svelte
+++ b/frontend/src/lib/components/UserSettings.svelte
@@ -118,30 +118,32 @@
 				<div class="font-semibold flex items-baseline">
 					Theme: <DarkModeToggle forcedDarkMode={false} />
 				</div>
-				{#if scopes == undefined}
-					<h2 class="border-b mt-4">User info</h2>
-					<div class="">
-						{#if passwordError}
-							<div class="text-red-600 text-2xs grow">{passwordError}</div>
-						{/if}
-						<div class="flex flex-col gap-2 w-full">
-							<div class="mt-4">
-								<label class="block w-60 mb-2 text-tertiary">
-									<div class="text-secondary">email</div>
-									<input
-										type="text"
-										disabled
-										value={$usersWorkspaceStore?.email}
-										class="input mt-1"
-									/>
-								</label>
-								{#if login_type == 'password'}
-									<label class="block w-120">
-										<div class="text-secondary">password</div>
-										<input
-											type="password"
-											bind:value={newPassword}
-											class="
+				<div class="flex flex-wrap md:gap-40 gap-10 mt-2">
+					{#if scopes == undefined}
+						<div>
+							<h2 class="border-b">User info</h2>
+							<div class="">
+								{#if passwordError}
+									<div class="text-red-600 text-2xs grow">{passwordError}</div>
+								{/if}
+								<div class="flex flex-col gap-2 w-full">
+									<div class="mt-4">
+										<label class="block w-60 mb-2 text-tertiary">
+											<div class="text-secondary">email</div>
+											<input
+												type="text"
+												disabled
+												value={$usersWorkspaceStore?.email}
+												class="input mt-1"
+											/>
+										</label>
+										{#if login_type == 'password'}
+											<label class="block w-120">
+												<div class="text-secondary">password</div>
+												<input
+													type="password"
+													bind:value={newPassword}
+													class="
 							w-full
 							block
 							py-1
@@ -153,52 +155,59 @@
 							focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
 							text-sm
 							"
-										/>
-										<Button size="sm" btnClasses="mt-4 w-min" on:click={setPassword}
-											>Set password</Button
-										>
-									</label>
-								{:else if login_type == 'github'}
-									<span>Authentified through Github OAuth2. Cannot set a password.</span>
-								{/if}
+												/>
+												<Button size="sm" btnClasses="mt-4 w-min" on:click={setPassword}
+													>Set password</Button
+												>
+											</label>
+										{:else if login_type == 'github'}
+											<span>Authentified through Github OAuth2. Cannot set a password.</span>
+										{/if}
+									</div>
+								</div>
 							</div>
 						</div>
+					{/if}
+					<div>
+						<h2 class="border-b">AI user settings</h2>
+
+						<div class="flex flex-col gap-4 mt-2">
+							<Toggle
+								on:change={(e) => {
+									updateSetting(
+										codeCompletionSessionEnabled,
+										e.detail,
+										'codeCompletionSessionEnabled'
+									)
+								}}
+								checked={$codeCompletionSessionEnabled}
+								options={{
+									right: 'Code completion',
+									rightTooltip: 'AI completion in the code editors'
+								}}
+							/>
+							<Toggle
+								on:change={(e) => {
+									updateSetting(metadataCompletionEnabled, e.detail, 'metadataCompletionEnabled')
+								}}
+								checked={$metadataCompletionEnabled}
+								options={{
+									right: 'Metadata completion',
+									rightTooltip: 'AI completion for summaries and descriptions'
+								}}
+							/>
+							<Toggle
+								on:change={(e) => {
+									updateSetting(stepInputCompletionEnabled, e.detail, 'stepInputCompletionEnabled')
+								}}
+								checked={$stepInputCompletionEnabled}
+								options={{
+									right: 'Flow step input completion',
+									rightTooltip: 'AI completion for flow step inputs'
+								}}
+							/>
+						</div>
 					</div>
-				{/if}
-
-				<h2 class="border-b mt-8">AI user settings</h2>
-
-				<div class="flex flex-col gap-4 mt-2">
-					<Toggle
-						on:change={(e) => {
-							updateSetting(codeCompletionSessionEnabled, e.detail, 'codeCompletionSessionEnabled')
-						}}
-						checked={$codeCompletionSessionEnabled}
-						options={{
-							right: 'Code completion',
-							rightTooltip: 'AI completion in the code editors'
-						}}
-					/>
-					<Toggle
-						on:change={(e) => {
-							updateSetting(metadataCompletionEnabled, e.detail, 'metadataCompletionEnabled')
-						}}
-						checked={$metadataCompletionEnabled}
-						options={{
-							right: 'Metadata completion',
-							rightTooltip: 'AI completion for summaries and descriptions'
-						}}
-					/>
-					<Toggle
-						on:change={(e) => {
-							updateSetting(stepInputCompletionEnabled, e.detail, 'stepInputCompletionEnabled')
-						}}
-						checked={$stepInputCompletionEnabled}
-						options={{
-							right: 'Flow step input completion',
-							rightTooltip: 'AI completion for flow step inputs'
-						}}
-					/>
 				</div>
 
 				<div class="grid grid-cols-2 pt-8 pb-1">