kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve instance settings save button UX

Browse Source
This commit is contained in:
Ruben Fiszel
2024-02-18 14:35:42 +01:00
parent 879a6cda00
commit a4ab7e1ebf
3 changed files with 100 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/lib/components/InstanceSettings.svelte
View File

@@ -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}

21
frontend/src/lib/components/SuperadminSettings.svelte
View File

@@ -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

143
frontend/src/lib/components/UserSettings.svelte
View File

@@ -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">