diff --git a/frontend/src/lib/components/DropdownSubmenuItem.svelte b/frontend/src/lib/components/DropdownSubmenuItem.svelte new file mode 100644 index 0000000000..b9204b7ae9 --- /dev/null +++ b/frontend/src/lib/components/DropdownSubmenuItem.svelte @@ -0,0 +1,83 @@ + + + + +{#if $subOpen} +
+ {#each subItems as subItem} + {#if subItem.separatorTop} +
+ {/if} + subItem?.action?.(e)} + href={subItem?.href} + target={subItem?.hrefTarget} + disabled={subItem?.disabled} + class={twMerge( + 'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full', + 'data-[highlighted]:bg-surface-hover', + 'flex flex-row gap-2 items-center rounded-sm', + subItem?.disabled && 'text-disabled cursor-not-allowed' + )} + item={meltItem} + > + {#if subItem.icon} + + {/if} +

+ {subItem.displayName} +

+ {@render subItem.extra?.()} + {#if subItem.tooltip} + + {#snippet text()} + {subItem.tooltip} + {/snippet} + + {/if} + + {/each} +
+{/if} diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte index baea52c9cf..493dec8f1f 100644 --- a/frontend/src/lib/components/DropdownV2.svelte +++ b/frontend/src/lib/components/DropdownV2.svelte @@ -71,6 +71,7 @@ const { elements: { menu: menuEl, item, trigger }, + builders, states, ids: { menu: dropdownId } } = createDropdownMenu({ @@ -177,7 +178,7 @@ class="bg-surface-tertiary dark:border w-56 origin-top-right rounded-lg shadow-lg focus:outline-none overflow-y-auto py-1" style={`${customWidth ? `width: ${customWidth}px;` : ''} max-height: ${maxHeight || '50vh'};`} > - + {/if} diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte index ebb12077d1..35fedd660e 100644 --- a/frontend/src/lib/components/DropdownV2Inner.svelte +++ b/frontend/src/lib/components/DropdownV2Inner.svelte @@ -1,5 +1,6 @@ - + { newFolder?.closeDrawer() folderCreated = undefined }} > - {#if !folderCreated} -
- - -
- {:else} + {#if folderCreated} {/if} - +
- + { - currentTarget.select() - }} - /> - + {#if !hideFullPath} +
+
+ + Full path + + { + currentTarget.select() + }} + /> + +
+
{error}
-
{error}
-
+ {/if} {#if pathUsageInFlowsPromise || pathUsageInAppsPromise || pathUsageInScriptsPromise} {#await Promise.all( [pathUsageInAppsPromise, pathUsageInFlowsPromise, pathUsageInScriptsPromise] )} diff --git a/frontend/src/lib/components/SummaryPathDisplay.svelte b/frontend/src/lib/components/SummaryPathDisplay.svelte new file mode 100644 index 0000000000..ed2387167e --- /dev/null +++ b/frontend/src/lib/components/SummaryPathDisplay.svelte @@ -0,0 +1,151 @@ + + +{#if editable || onEdit} + + {#snippet trigger()} +
+ {path} + + {emptyString(summary) ? 'Add a summary...' : summary} + +
+ {/snippet} + {#snippet content({ close })} +
+ {#if onEdit} + +
+
Path
+ +
+ + {:else} + +
+
Path
+ +
+ {/if} +
+ {/snippet} + +{:else} +
+ {#if !emptyString(summary)} + {path} + {/if} + + {emptyString(summary) ? (path ?? '') : summary} + +
+{/if} diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte index 04ebcfb1f7..2c8f43d145 100644 --- a/frontend/src/lib/components/details/DetailPageHeader.svelte +++ b/frontend/src/lib/components/details/DetailPageHeader.svelte @@ -6,9 +6,9 @@ import { twMerge } from 'tailwind-merge' import { userStore } from '$lib/stores' import { createEventDispatcher, getContext, tick } from 'svelte' + import SummaryPathDisplay from '$lib/components/SummaryPathDisplay.svelte' import type { TriggerContext } from '../triggers' import { Calendar } from 'lucide-svelte' - import { emptyString } from '$lib/utils' type MainButton = { label: string @@ -35,6 +35,7 @@ errorHandlerKind: 'flow' | 'script' scriptOrFlowPath: string errorHandlerMuted: boolean | undefined + onEdit?: (summary: string, path: string) => void children?: import('svelte').Snippet trigger_badges?: import('svelte').Snippet } @@ -48,6 +49,7 @@ errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), + onEdit, children, trigger_badges }: Props = $props() @@ -55,29 +57,14 @@ const dispatch = createEventDispatcher() -
+
-
-
- - {emptyString(summary) ? (path ?? '') : summary} - - {#if !emptyString(summary)} - {path} - {/if} +
+
+
{#if tag} tag: {tag} @@ -104,7 +91,7 @@ {/if} {@render trigger_badges?.()}
-
+
{#if menuItems.length > 0} {#key menuItems} { - return Array.from(document.querySelectorAll('[data-popover]')) as HTMLElement[] + const selector = excludeSelectors + ? `[data-popover], ${excludeSelectors}` + : '[data-popover]' + return Array.from(document.querySelectorAll(selector)) as HTMLElement[] } let { debounced: debounceClose, clearDebounce: clearDebounceClose } = debounce( diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index a7de8a5424..1ddebf1aec 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -1504,6 +1504,8 @@ export type Item = { extra?: Snippet id?: string tooltip?: string + separatorTop?: boolean + submenuItems?: Item[] } export function isObjectTooBig(obj: any): boolean { diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte index e6d1fecf73..314a330a07 100644 --- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte @@ -69,7 +69,7 @@ import NoDirectDeployAlert from '$lib/components/NoDirectDeployAlert.svelte' let flow: Flow | undefined = $state() - let can_write = false + let can_write = $state(false) let shareModal: ShareModal | undefined = $state() let scheduledForStr: string | undefined = $state(undefined) @@ -497,6 +497,32 @@ tag={flow?.tag ?? ''} summary={flow?.summary} path={flow?.path} + onEdit={can_write + ? async (newSummary, newPath) => { + if (!flow || !$workspaceStore) return + try { + await FlowService.updateFlow({ + workspace: $workspaceStore, + path: flow.path, + requestBody: { + path: newPath, + summary: newSummary, + description: flow.description, + value: flow.value, + schema: flow.schema + } + }) + sendUserToast('Flow updated') + if (newPath !== flow.path) { + await goto(`/flows/get/${newPath}?workspace=${$workspaceStore}`) + } else { + loadFlow() + } + } catch (e) { + sendUserToast('Could not update flow: ' + e.body, true) + } + } + : undefined} > {#snippet trigger_badges()}