diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index b967d3a3b2..2a0c8a3017 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -20,6 +20,7 @@ import type { FlowEditorContext } from './flows/types' import { cleanInputs } from './flows/utils' import { Pen } from 'lucide-svelte' + import Kbd from './common/kbd/Kbd.svelte' export let initialPath: string = '' export let selectedId: string | undefined @@ -362,6 +363,7 @@
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index 4fea2aa984..30bb5bc00e 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -83,6 +83,17 @@ scriptEditor?.inferSchema(script.content, language) } + async function leaveF(leave: boolean, newHash: string) { + if (leave) { + history.replaceState(history.state, '', `/scripts/edit/${newHash}`) + goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`) + } else { + await goto(`/scripts/edit/${newHash}`) + script.hash = newHash + topHash = undefined + } + } + async function editScript(leave: boolean): Promise { loadingSave = true try { @@ -112,34 +123,37 @@ kind: script.kind } }) - if (leave) { - history.replaceState(history.state, '', `/scripts/edit/${newHash}`) - goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`) - } else { - await goto(`/scripts/edit/${newHash}`) - script.hash = newHash - topHash = undefined - } + leaveF(leave, newHash) } catch (error) { sendUserToast(`Error while saving the script: ${error.body || error.message}`, true) } loadingSave = false } - const dropdownItems: Array<{ label: string; onClick: () => void }> = [ - { - label: 'Save and leave', - onClick: () => editScript(true) - } - ] + function computeDropdownItems() { + let dropdownItems: { label: string; onClick: () => void }[] = [] + + if ($dirtyStore) { + dropdownItems.push({ + label: 'Save and see details', + onClick: () => editScript(true) + }) + } - if (initialPath != '') { dropdownItems.push({ - label: 'Fork', - onClick: () => { - window.open(`/scripts/add?template=${initialPath}`) - } + label: 'See details', + onClick: () => leaveF(true, script.hash) }) + + if (initialPath != '') { + dropdownItems.push({ + label: 'Fork', + onClick: () => { + window.open(`/scripts/add?template=${initialPath}`) + } + }) + } + return dropdownItems } @@ -286,12 +300,13 @@ Customise diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte index 268a8da43a..e2fe28c495 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte @@ -77,6 +77,7 @@ } } } + $: if ( componentInput && componentInput.type == 'runnable' && diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte index 125d2fa066..54e39e1e6e 100644 --- a/frontend/src/lib/components/common/button/Button.svelte +++ b/frontend/src/lib/components/common/button/Button.svelte @@ -33,7 +33,15 @@ onClick?: () => void href?: string } - export let dropdownItems: MenuItem[] | undefined = undefined + export let dropdownItems: MenuItem[] | (() => MenuItem[]) | undefined = undefined + + function computeDropdowns(): MenuItem[] | undefined { + if (typeof dropdownItems === 'function') { + return dropdownItems() + } else { + return dropdownItems + } + } const dispatch = createEventDispatcher() // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else @@ -80,19 +88,6 @@ $: buttonProps = { id, - class: twMerge( - 'w-full', - colorVariants?.[color]?.[variant], - variant === 'border' ? 'border' : '', - ButtonType.FontSizeClasses[size], - ButtonType.SpacingClasses[spacingSize][variant], - 'focus:ring-2 font-semibold', - dropdownItems ? 'rounded-l-md h-full' : 'rounded-md', - 'justify-center items-center text-center whitespace-nowrap inline-flex', - btnClasses, - disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '', - 'transition-all ' - ), href, target, tabindex: disabled ? -1 : 0, @@ -121,6 +116,21 @@ $: isSmall = size === 'xs' || size === 'sm' $: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes) $: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes) + + function computeClass() { + return twMerge( + 'w-full', + colorVariants?.[color]?.[variant], + variant === 'border' ? 'border' : '', + ButtonType.FontSizeClasses[size], + ButtonType.SpacingClasses[spacingSize][variant], + 'focus:ring-2 font-semibold', + dropdownItems ? 'rounded-l-md h-full' : 'rounded-md', + 'justify-center items-center text-center whitespace-nowrap inline-flex', + btnClasses, + 'transition-all ' + ) + }
@@ -131,6 +141,10 @@ on:click={onClick} on:focus on:blur + class={twMerge( + computeClass(), + disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '' + )} {...buttonProps} disabled={disabled || loading} type="submit" @@ -151,12 +165,14 @@ {#if dropdownItems} -
+
- {#each dropdownItems as item} + {#each computeDropdowns() ?? [] as item} -
+
{item.label}