small UX nits

This commit is contained in:
Ruben Fiszel
2023-12-29 03:21:11 +01:00
parent 74fc2d3f43
commit ad6c3e5cee
5 changed files with 65 additions and 50 deletions

View File

@@ -179,7 +179,7 @@
}
}
async function editScript(): Promise<void> {
async function editScript(stay: boolean): Promise<void> {
loadingSave = true
try {
try {
@@ -223,7 +223,11 @@
})
savedScript = cloneDeep(script) as NewScriptWithDraft
history.replaceState(history.state, '', `/scripts/edit/${script.path}`)
goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
if (stay) {
script.parent_hash = newHash
} else {
goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
}
} catch (error) {
sendUserToast(`Error while saving the script: ${error.body || error.message}`, true)
}
@@ -332,6 +336,12 @@
let dropdownItems: { label: string; onClick: () => void }[] =
initialPath != ''
? [
{
label: 'Deploy & Stay here',
onClick: () => {
editScript(true)
}
},
{
label: 'Fork',
onClick: () => {
@@ -1007,7 +1017,7 @@
loading={loadingSave}
size="xs"
startIcon={{ icon: Save }}
on:click={() => editScript()}
on:click={() => editScript(false)}
dropdownItems={computeDropdownItems(initialPath)}
>
Deploy

View File

@@ -49,6 +49,10 @@
}
}
export function focus() {
element?.focus({})
}
const dispatch = createEventDispatcher()
// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
const colorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>> = {

View File

@@ -34,7 +34,7 @@
}
</script>
<svelte:window on:keydown={onKeyDown} />
<svelte:window on:keydown|capture={onKeyDown} />
{#if open}
<div

View File

@@ -4,7 +4,6 @@
import Button from '../../common/button/Button.svelte'
import { twMerge } from 'tailwind-merge'
import type { ReadFileAs } from './model'
import { sendUserToast } from '$lib/toast'
type ConvertedFile = string | ArrayBuffer | null

View File

@@ -192,7 +192,7 @@
OauthService.disconnectAccount({ workspace: $workspaceStore!, id: account })
}
await ResourceService.deleteResource({ workspace: $workspaceStore!, path })
loadResources()
reload()
}
async function addResourceType(): Promise<void> {
@@ -312,8 +312,53 @@
inferrer?.closeDrawer?.()
}
let deploymentDrawer: DeployWorkspaceDrawer
async function reload() {
loading = {
resources: true,
types: true
}
if (tab == 'cache') {
await loadCache()
} else if (tab == 'states') {
await loadState()
} else {
await loadResources()
}
await loadResourceTypes()
loading = {
resources: false,
types: false
}
}
</script>
<ConfirmationModal
open={Boolean(deleteConfirmedCallback)}
title="Remove resource"
confirmationText="Remove"
on:canceled={() => {
deleteConfirmedCallback = undefined
}}
on:confirmed={() => {
if (deleteConfirmedCallback) {
deleteConfirmedCallback()
}
deleteConfirmedCallback = undefined
}}
>
<div class="flex flex-col w-full space-y-4">
<span>Are you sure you want to remove this resource?</span>
<Alert type="info" title="Bypass confirmation">
<div>
You can press
<Badge color="dark-gray">SHIFT</Badge>
while removing a resource to bypass confirmation.
</div>
</Alert>
</div>
</ConfirmationModal>
<DeployWorkspaceDrawer bind:this={deploymentDrawer} />
<Portal>
@@ -541,24 +586,7 @@
<Button
variant="border"
color="light"
on:click={async () => {
loading = {
resources: true,
types: true
}
if (tab == 'cache') {
await loadCache()
} else if (tab == 'states') {
await loadState()
} else {
await loadResources()
}
await loadResourceTypes()
loading = {
resources: false,
types: false
}
}}
on:click={reload}
startIcon={{
icon: RotateCw,
classes: loading.resources || loading.types ? 'animate-spin' : ''
@@ -888,29 +916,3 @@
loadResources()
}}
/>
<ConfirmationModal
open={Boolean(deleteConfirmedCallback)}
title="Remove resource"
confirmationText="Remove"
on:canceled={() => {
deleteConfirmedCallback = undefined
}}
on:confirmed={() => {
if (deleteConfirmedCallback) {
deleteConfirmedCallback()
}
deleteConfirmedCallback = undefined
}}
>
<div class="flex flex-col w-full space-y-4">
<span>Are you sure you want to remove this resource?</span>
<Alert type="info" title="Bypass confirmation">
<div>
You can press
<Badge color="dark-gray">SHIFT</Badge>
while removing a resource to bypass confirmation.
</div>
</Alert>
</div>
</ConfirmationModal>