windmill-components 1.122.0 → 1.138.2

package/package/components/common/kbd/Kbd.svelte

@@ -11,7 +11,7 @@ else {
 <span
 	class="{$$props.class} {small
 		? 'h-4  center-center'
-		: ''} -py-0.5 ml-0.5 rounded border bg-white/70 text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
+		: ''} -py-0.5 ml-0.5 rounded border bg-surface-secondary text-primary shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-inverse"
 >
 	<kbd class={kbdClass}>
 		<slot />

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -4,25 +4,46 @@ import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
 import JavaScript from './JavaScript.svelte';
 import FetchIcon from './FetchIcon.svelte';
 import DockerIcon from '../../icons/DockerIcon.svelte';
+import RestIcon from '../../icons/RestIcon.svelte';
+import { Script } from '../../../gen';
+import PowershellIcon from '../../icons/PowershellIcon.svelte';
+import BigQueryIcon from '../../icons/BigQueryIcon.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
 export let scale = 1;
+const languageLabel = {
+    [Script.language.PYTHON3]: 'Python',
+    [Script.language.DENO]: 'TypeScript',
+    [Script.language.GO]: 'Go',
+    [Script.language.BASH]: 'Bash',
+    [Script.language.NATIVETS]: 'HTTP',
+    // [Script.language.GRAPHQL]: 'HTTP',
+    [Script.language.POSTGRESQL]: 'Postgresql'
+};
 const langToComponent = {
     go: GoIcon,
     python3: PythonIcon,
     deno: TypeScriptIcon,
+    // graphql: TypeScriptIcon,
+    bun: TypeScriptIcon,
     bash: BashIcon,
     pgsql: PostgresIcon,
     mysql: MySQLIcon,
+    bigquery: BigQueryIcon,
     javascript: JavaScript,
     fetch: FetchIcon,
-    docker: DockerIcon
+    docker: DockerIcon,
+    powershell: PowershellIcon,
+    postgresql: PostgresIcon,
+    nativets: RestIcon,
+    graphql: RestIcon
 };
 </script>
 
 <svelte:component
 	this={langToComponent[lang]}
+	title={languageLabel[lang]}
 	width={width * scale}
 	height={height * scale}
 	{...$$restProps}

package/package/components/common/languageIcons/LanguageIcon.svelte.d.ts

@@ -3,7 +3,7 @@ import type { SupportedLanguage } from '../../../common';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker';
+        lang: SupportedLanguage | 'mysql' | 'bun' | 'pgsql' | 'javascript' | 'fetch' | 'docker' | 'powershell';
         width?: number | undefined;
         height?: number | undefined;
         scale?: number | undefined;

package/package/components/common/menu/Menu.svelte

@@ -62,7 +62,7 @@ const placementsClasses = {
 		<div
 			transition:fade|local={{ duration: transitionDuration }}
 			class={classNames(
-				'z-50 absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
+				'z-50 absolute mt-2 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 focus:outline-none',
 				placementsClasses[placement],
 				noMinW ? 'min-w-0' : 'w-60',
 				popupClasses

package/package/components/common/menu/MenuItem.svelte

@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click class="py-1">
 	<span
-		class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+		class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 		role="menuitem"
 		tabindex="-1"
 	>

package/package/components/common/modal/AlwaysMountedModal.svelte

@@ -29,7 +29,7 @@ export function open() {
 			<div
 				style={css?.popup?.style}
 				class={twMerge(
-					'bg-white max-w-5xl m-24 overflow-y-auto rounded-lg relative',
+					'bg-surface max-w-5xl m-24 overflow-y-auto rounded-lg relative',
 					css?.popup?.class
 				)}
 				use:clickOutside
@@ -45,15 +45,15 @@ export function open() {
 								isOpen = false
 							}}
 							style={css?.button?.style}
-							class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
 						>
-							<X class="text-gray-500" />
+							<X class="text-tertiary" />
 						</button>
 					</div>
 				</div>
 
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div class="relative bg-white rounded-md" on:click|stopPropagation={() => {}}>
+				<div class="relative bg-surface rounded-md" on:click|stopPropagation={() => {}}>
 					<div
 						class={twMerge(
 							'max-w-screen-lg max-h-screen-80 overflow-auto flex flex-col',

package/package/components/common/modal/Modal.svelte

@@ -53,7 +53,7 @@ function fadeFast(node) {
 				<div
 					on:click|stopPropagation
 					class={twMerge(
-						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						c,
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
@@ -63,10 +63,10 @@ function fadeFast(node) {
 				>
 					<div class="flex">
 						<div class="ml-4 text-left flex-1">
-							<h3 class="text-lg font-medium text-gray-900">
+							<h3 class="text-lg font-medium text-primary">
 								{title}
 							</h3>
-							<div class="mt-2 text-sm text-gray-500">
+							<div class="mt-2 text-sm text-tertiary">
 								<slot />
 							</div>
 						</div>

package/package/components/common/popup/Popup.svelte

@@ -1,160 +1,36 @@
-<svelte:options accessors />
-
-<script>import { createEventDispatcher, onDestroy } from 'svelte';
-import { slide } from 'svelte/transition';
-import { createPopperActions } from 'svelte-popperjs';
-import { clickOutside } from '../../../utils';
-import { createStateMachine } from '../../../stateMachine';
-export let ref;
-export let options = { placement: 'auto', strategy: 'fixed' };
-/** Events on the reference element */
-export let openOn = ['focus'];
-/** Events on the reference element */
-export let closeOn = ['blur'];
-export let innerClasses = '';
-export let outerClasses = '';
-export let wrapperClasses = '';
-export let transition = slide;
-export { openFocusIn as open, closed as close };
-const states = ['closed', 'open-focus-in', 'open-focus-out'];
-const stateMachine = createStateMachine(states, {
-    to: {
-        closed: ({ previousState, currentState }) => {
-            return isFocusContained() ? previousState : currentState;
-        }
-    }
-});
-const [popperRef, popperContent, getInstance] = createPopperActions();
-const dispatch = createEventDispatcher();
-let popup;
-let focusableElements;
-function getFocusableElements() {
-    let elements = [];
-    popup
-        ?.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
-        .forEach((elem) => elements.push(elem));
-    focusableElements = elements.filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
-    focusableElements.forEach((el) => {
-        el.tabIndex = -1;
-        el.addEventListener('click', openFocusIn);
-        el.addEventListener('blur', conditionalClosed);
-    });
-}
-function isFocusContained() {
-    const activeElem = document.activeElement;
-    return popup?.contains(activeElem) || ref?.contains(activeElem);
-}
-function closed() {
-    if ($stateMachine.currentState === 'open-focus-out') {
-        setTimeout(() => {
-            stateMachine.setState('closed');
-            dispatch('close');
-        }, 0);
-    }
-    else {
-        stateMachine.setState('closed');
-        dispatch('close');
-    }
-}
-function conditionalClosed() {
-    setTimeout(() => {
-        if (isFocusContained())
-            return;
-        closed();
-    }, 0);
-}
-function openFocusOut() {
-    stateMachine.setState('open-focus-out');
-}
-function openFocusIn() {
-    stateMachine.setState('open-focus-in');
-}
-function keyDown(event) {
-    const modifiers = ['Shift', 'Control', 'Command', 'Alt', 'Meta'];
-    // Prevent closing the popup when the only key pressed is a modifier key
-    if (modifiers.includes(event.key) || $stateMachine.currentState === 'closed')
-        return;
-    if (event.key === 'Escape') {
-        ;
-        document.activeElement?.blur();
-        return conditionalClosed();
-    }
-    const prev = ['Up', 'Left'];
-    const next = ['Down', 'Right'];
-    if (![...prev, ...next].some((dir) => `Arrow${dir}` === event.key))
-        return;
-    event.preventDefault();
-    if (popup?.contains(document.activeElement)) {
-        const index = focusableElements.findIndex((elem) => elem === document.activeElement);
-        if (index === -1)
-            return;
-        let targetIndex = undefined;
-        if (prev.some((dir) => `Arrow${dir}` === event.key)) {
-            targetIndex = index === 0 ? focusableElements.length - 1 : index - 1;
-        }
-        else if (next.some((dir) => `Arrow${dir}` === event.key)) {
-            targetIndex = index + 1 === focusableElements.length ? 0 : index + 1;
-        }
-        if (targetIndex !== undefined) {
-            focusableElements[targetIndex].focus();
-            stateMachine.setState('open-focus-in');
-        }
-    }
-    else {
-        const elem = focusableElements[event.key === 'ArrowUp' ? focusableElements.length - 1 : 0];
-        if (elem) {
-            elem.focus();
-            stateMachine.setState('open-focus-in');
-        }
-    }
-}
-function addRefListeners() {
-    if (!ref)
-        return;
-    openOn.forEach((action) => ref.addEventListener(action, openFocusOut));
-    closeOn.forEach((action) => ref.addEventListener(action, closed));
-}
-function removeAllListeners() {
-    focusableElements?.forEach((el) => el.removeEventListener('click', openFocusIn));
-    focusableElements?.forEach((el) => el.removeEventListener('blur', conditionalClosed));
-    if (!ref)
-        return;
-    openOn.forEach((action) => ref.removeEventListener(action, openFocusOut));
-    closeOn.forEach((action) => ref.removeEventListener(action, closed));
-}
-$: if ($stateMachine.currentState === 'closed') {
-    focusableElements?.forEach((el) => el.removeEventListener('click', openFocusIn));
-}
-else {
-    setTimeout(() => {
-        getFocusableElements();
-        getInstance()?.update();
-    }, 0);
-}
-$: if (ref) {
-    popperRef(ref);
-    addRefListeners();
-}
-$: $$slots.default && getInstance()?.update();
-onDestroy(removeAllListeners);
+<script>import { Popover, PopoverButton, PopoverPanel, Transition } from '@rgossiaux/svelte-headlessui';
+import Portal from 'svelte-portal';
+import { createFloatingActions } from 'svelte-floating-ui';
+export let floatingConfig = {
+    strategy: 'absolute',
+    placement: 'bottom-start'
+};
+export let containerClasses = 'rounded-lg shadow-lg p-4 bg-surface';
+const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
 </script>
 
-<svelte:window on:keydown={keyDown} />
-
-<div
-	class="z-50 {wrapperClasses}"
-	bind:this={popup}
-	use:popperContent={options}
-	use:clickOutside
-	on:click_outside={closed}
-	aria-haspopup="true"
-	aria-expanded={$stateMachine.currentState !== 'closed'}
->
-	{#if $stateMachine.currentState !== 'closed'}
-		<div transition:transition|local={{ duration: 100 }} class={outerClasses}>
-			<div class={innerClasses}>
-				<slot open={openFocusIn} close={closed} />
-			</div>
+<Popover let:open on:close>
+	<PopoverButton>
+		<div use:floatingRef>
+			<slot name="button" />
+		</div>
+	</PopoverButton>
+	<Portal>
+		<div use:floatingContent class="z5000" hidden={!open}>
+			<Transition
+				enter="transition ease-out duration-200"
+				enterFrom="opacity-0 translate-y-1"
+				enterTo="opacity-100 translate-y-0"
+				leave="transition ease-in duration-150"
+				leaveFrom="opacity-100 translate-y-0"
+				leaveTo="opacity-0 translate-y-1"
+			>
+				<PopoverPanel let:close>
+					<div class={containerClasses}>
+						<slot {close} />
+					</div>
+				</PopoverPanel>
+			</Transition>
 		</div>
-	{/if}
-</div>
+	</Portal>
+</Popover>

package/package/components/common/popup/Popup.svelte.d.ts

@@ -1,28 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import { type TransitionConfig } from 'svelte/transition';
-import { type PopperOptions } from 'svelte-popperjs';
+import { type ComputeConfig } from 'svelte-floating-ui';
 declare const __propDef: {
     props: {
-        ref: HTMLElement | undefined;
-        options?: PopperOptions<any>;
-        /** Events on the reference element */ openOn?: (keyof HTMLElementEventMap)[] | undefined;
-        /** Events on the reference element */ closeOn?: (keyof HTMLElementEventMap)[] | undefined;
-        innerClasses?: string | undefined;
-        outerClasses?: string | undefined;
-        wrapperClasses?: string | undefined;
-        transition?: ((node: Element, params?: Record<string, any>) => TransitionConfig) | undefined;
-        open?: (() => void) | undefined;
-        close?: (() => void) | undefined;
-    }; /**accessor*/
+        floatingConfig?: ComputeConfig | undefined;
+        containerClasses?: string | undefined;
+    };
     events: {
         close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        button: {};
         default: {
-            open: () => void;
-            close: () => void;
+            close: (focusableElement: HTMLElement | null) => void;
         };
     };
 };
@@ -30,35 +21,5 @@ export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
 export type PopupSlots = typeof __propDef.slots;
 export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents, PopupSlots> {
-    get ref(): HTMLElement | undefined;
-    /**accessor*/
-    set ref(_: HTMLElement | undefined);
-    get options(): PopperOptions<any>;
-    /**accessor*/
-    set options(_: PopperOptions<any>);
-    get openOn(): (keyof HTMLElementEventMap)[] | undefined;
-    /**accessor*/
-    set openOn(_: (keyof HTMLElementEventMap)[] | undefined);
-    get closeOn(): (keyof HTMLElementEventMap)[] | undefined;
-    /**accessor*/
-    set closeOn(_: (keyof HTMLElementEventMap)[] | undefined);
-    get innerClasses(): string | undefined;
-    /**accessor*/
-    set innerClasses(_: string | undefined);
-    get outerClasses(): string | undefined;
-    /**accessor*/
-    set outerClasses(_: string | undefined);
-    get wrapperClasses(): string | undefined;
-    /**accessor*/
-    set wrapperClasses(_: string | undefined);
-    get transition(): ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined;
-    /**accessor*/
-    set transition(_: ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined);
-    get open(): (() => void) | undefined;
-    /**accessor*/
-    set open(_: (() => void) | undefined);
-    get close(): (() => void) | undefined;
-    /**accessor*/
-    set close(_: (() => void) | undefined);
 }
 export {};

package/package/components/common/skeleton/SkeletonElement.svelte

@@ -3,6 +3,6 @@ export let element;
 </script>
 
 <div
-	class="animate-skeleton [animation-delay:1000ms]"
+	class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms]"
 	style="height: {element.h * HEIGHT_UNIT}px; width: {element.w}%; min-width: {element.minW}px;"
 />

package/package/components/common/stepper/Stepper.svelte

@@ -39,7 +39,7 @@ function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
         }
         else {
             return current
-                ? 'border-gray-500 border bg-gray-200 text-gray-600'
+                ? 'border-gray-500 border bg-gray-200 text-tertiary'
                 : 'border-gray-500 border';
         }
     }
@@ -47,7 +47,7 @@ function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
 </script>
 
 <div class="flex justify-between">
-	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-gray-500">
+	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-tertiary">
 		{#each tabs ?? [] as step, index}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<li
@@ -76,7 +76,7 @@ function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
 				<span
 					class={classNames(
 						'hidden sm:block',
-						selectedIndex === index ? 'font-semibold text-gray-900' : 'font-normal text-gray-600'
+						selectedIndex === index ? 'font-semibold text-primary' : 'font-normal text-tertiary'
 					)}
 				>
 					{step}

package/package/components/common/table/AppRow.svelte

@@ -1,8 +1,8 @@
 <script>import Dropdown from '../../Dropdown.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
-import { AppService, DraftService } from '../../../gen';
+import { AppService, AppWithLastVersion, DraftService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faCodeFork, faEdit, faExternalLink, faEye, faFileExport, faPen, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCodeFork, faEdit, faExternalLink, faFileExport, faHistory, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
@@ -12,6 +12,8 @@ import { Eye } from 'lucide-svelte';
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { DELETE } from '../../../utils';
+import AppExportButton from '../../apps/editor/AppExportButton.svelte';
+import AppDeploymentHistory from '../../apps/editor/AppDeploymentHistory.svelte';
 export let app;
 export let marked;
 export let starred;
@@ -21,8 +23,26 @@ export let deploymentDrawer;
 export let deleteConfirmedCallback;
 let { summary, path, extra_perms, canWrite, workspace_id, has_draft, draft_only, execution_mode } = app;
 const dispatch = createEventDispatcher();
+let appExport;
+let appDeploymentHistory;
+async function loadAppJson() {
+    const app = (await AppService.getAppByPath({
+        workspace: $workspaceStore,
+        path
+    }));
+    appExport.open(app);
+}
+async function loadDeployements() {
+    const app = (await AppService.getAppByPath({
+        workspace: $workspaceStore,
+        path
+    }));
+    appDeploymentHistory.open(app.versions);
+}
 </script>
 
+<AppExportButton bind:this={appExport} />
+<AppDeploymentHistory bind:this={appDeploymentHistory} />
 <Row
 	href={`/apps/get/${path}`}
 	kind="app"
@@ -35,7 +55,6 @@ const dispatch = createEventDispatcher();
 	canFavorite={!draft_only}
 >
 	<svelte:fragment slot="badges">
-		<DraftBadge {has_draft} {draft_only} />
 		{#if execution_mode == 'anonymous'}
 			<Badge small>
 				<div class="flex gap-1 items-center">
@@ -45,6 +64,8 @@ const dispatch = createEventDispatcher();
 			>
 		{/if}
 		<SharedBadge {canWrite} extraPerms={extra_perms} />
+		<DraftBadge {has_draft} {draft_only} />
+		<div class="w-8 center-center" />
 	</svelte:fragment>
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
@@ -75,16 +96,6 @@ const dispatch = createEventDispatcher();
 					</div>
 				{/if}
 			{/if}
-
-			<Button
-				href="/apps/get/{path}"
-				color="dark"
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faEye }}
-			>
-				View
-			</Button>
 		</span>
 		<Dropdown
 			placement="bottom-end"
@@ -111,17 +122,6 @@ const dispatch = createEventDispatcher();
 					]
 				}
 				return [
-					{
-						displayName: 'View',
-						icon: faEye,
-						href: `/apps/get/${path}`
-					},
-					{
-						displayName: 'Edit',
-						icon: faPen,
-						href: `/apps/edit/${path}?nodraft=true`,
-						disabled: !canWrite
-					},
 					{
 						displayName: 'Duplicate/Fork',
 						icon: faCodeFork,
@@ -142,6 +142,18 @@ const dispatch = createEventDispatcher();
 							deploymentDrawer.openDrawer(path, 'app')
 						}
 					},
+					{
+						displayName: 'App JSON',
+						icon: faFileExport,
+						action: () => {
+							loadAppJson()
+						}
+					},
+					{
+						displayName: 'Deployments',
+						icon: faHistory,
+						action: () => loadDeployements()
+					},
 					{
 						displayName: canWrite ? 'Share' : 'See Permissions',
 						icon: faShare,

package/package/components/common/table/FlowRow.svelte

@@ -4,14 +4,14 @@ import ScheduleEditor from '../../ScheduleEditor.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
 import { FlowService, DraftService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faCalendarAlt, faCodeFork, faCopy, faEdit, faFileExport, faList, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Badge from '../badge/Badge.svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import { sendUserToast } from '../../../toast';
-import { DELETE, isOwner } from '../../../utils';
+import { DELETE, copyToClipboard, isOwner } from '../../../utils';
 export let flow;
 export let marked;
 export let starred;
@@ -50,7 +50,7 @@ let scheduleEditor;
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 <Row
-	href={`/flows/run/${path}`}
+	href="/flows/get/{path}?workspace={$workspaceStore}"
 	kind="flow"
 	workspaceId={workspace_id ?? $workspaceStore ?? ''}
 	{marked}
@@ -61,12 +61,12 @@ let scheduleEditor;
 	canFavorite={!draft_only}
 >
 	<svelte:fragment slot="badges">
-		<SharedBadge {canWrite} extraPerms={extra_perms} />
-		<DraftBadge {has_draft} {draft_only} />
-
 		{#if archived}
 			<Badge color="red" baseClass="border">archived</Badge>
 		{/if}
+		<SharedBadge {canWrite} extraPerms={extra_perms} />
+		<DraftBadge {has_draft} {draft_only} />
+		<div class="w-8 center-center" />
 	</svelte:fragment>
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
@@ -97,28 +97,6 @@ let scheduleEditor;
 					</div>
 				{/if}
 			{/if}
-
-			{#if !draft_only}
-				<Button
-					href="/flows/get/{path}?workspace={$workspaceStore}"
-					color="light"
-					variant="border"
-					size="xs"
-					spacingSize="md"
-					startIcon={{ icon: faEye }}
-				>
-					Detail
-				</Button>
-				<Button
-					href="/flows/run/{path}"
-					color="dark"
-					size="xs"
-					spacingSize="md"
-					endIcon={{ icon: faPlay }}
-				>
-					Run
-				</Button>
-			{/if}
 		</span>
 
 		<Dropdown
@@ -145,17 +123,6 @@ let scheduleEditor;
 					]
 				}
 				return [
-					{
-						displayName: 'View flow',
-						icon: faEye,
-						href: `/flows/get/${path}?workspace=${$workspaceStore}`
-					},
-					{
-						displayName: 'Edit',
-						icon: faEdit,
-						href: `/flows/edit/${path}?nodraft=true`,
-						disabled: !canWrite || archived
-					},
 					{
 						displayName: 'Duplicate/Fork',
 						icon: faCodeFork,
@@ -174,6 +141,13 @@ let scheduleEditor;
 						},
 						disabled: !owner || archived
 					},
+					{
+						displayName: 'Copy path',
+						icon: faCopy,
+						action: () => {
+							copyToClipboard(path)
+						}
+					},
 					{
 						displayName: 'Deploy to staging/prod',
 						icon: faFileExport,