windmill-components 1.87.0 → 1.89.0

package/package/components/flows/header/FlowImportExportMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowImportExportMenuProps = typeof __propDef.props;
+export type FlowImportExportMenuEvents = typeof __propDef.events;
+export type FlowImportExportMenuSlots = typeof __propDef.slots;
+export default class FlowImportExportMenu extends SvelteComponentTyped<FlowImportExportMenuProps, FlowImportExportMenuEvents, FlowImportExportMenuSlots> {
+}
+export {};

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -0,0 +1,68 @@
+<script>import { Badge } from '../../common';
+import Button from '../../common/button/Button.svelte';
+import Drawer from '../../common/drawer/Drawer.svelte';
+import FlowPreviewContent from '../../FlowPreviewContent.svelte';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+const { selectedId } = getContext('FlowEditorContext');
+let previewOpen = false;
+let previewMode = 'whole';
+let jobId = undefined;
+let job = undefined;
+$: upToDisabled =
+    $selectedId == undefined ||
+        [
+            'settings',
+            'settings-metadata',
+            'settings-schedule',
+            'settings-retries',
+            'settings-same-worker',
+            'settings-graph',
+            'inputs',
+            'schedules',
+            'failure',
+            'constants'
+        ].includes($selectedId) ||
+        $selectedId?.includes('branch');
+</script>
+
+<Button
+	size="xs"
+	on:click={() => {
+		previewMode = 'whole'
+		previewOpen = !previewOpen
+	}}
+	startIcon={{ icon: faPlay }}
+>
+	Test flow
+</Button>
+{#if !upToDisabled}
+	<Button
+		size="xs"
+		disabled={upToDisabled}
+		color="light"
+		variant="border"
+		on:click={() => {
+			previewMode = 'upTo'
+			previewOpen = !previewOpen
+		}}
+		startIcon={{ icon: faPlay }}
+	>
+		Test up to
+		<Badge baseClass="ml-1" color="indigo">
+			{$selectedId}
+		</Badge>
+	</Button>
+{/if}
+
+<Drawer bind:open={previewOpen} alwaysOpen size="75%">
+	<FlowPreviewContent
+		open={previewOpen}
+		bind:previewMode
+		bind:job
+		bind:jobId
+		on:close={() => {
+			previewOpen = false
+		}}
+	/>
+</Drawer>

package/package/components/flows/header/FlowPreviewButtons.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowPreviewButtonsProps = typeof __propDef.props;
+export type FlowPreviewButtonsEvents = typeof __propDef.events;
+export type FlowPreviewButtonsSlots = typeof __propDef.slots;
+export default class FlowPreviewButtons extends SvelteComponentTyped<FlowPreviewButtonsProps, FlowPreviewButtonsEvents, FlowPreviewButtonsSlots> {
+}
+export {};

package/package/components/flows/idUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const forbiddenIds: string[];
+export declare function numberToChars(n: number): any;
+export declare function getNextId(currentKeys: string[]): string;
+export declare function charsToNumber(n: string): number;

package/package/components/flows/idUtils.js

@@ -0,0 +1,47 @@
+const aCharCode = 'a'.charCodeAt(0);
+export const forbiddenIds = ['do', 'bg', 'ctx', 'state'];
+export function numberToChars(n) {
+    if (n < 0) {
+        return '-' + numberToChars(-n);
+    }
+    var b = [n], sp, out, i, div;
+    sp = 0;
+    while (sp < b.length) {
+        if (b[sp] > 25) {
+            div = Math.floor(b[sp] / 26);
+            b[sp + 1] = div - 1;
+            b[sp] %= 26;
+        }
+        sp += 1;
+    }
+    out = '';
+    for (i = 0; i < b.length; i += 1) {
+        let charCode = aCharCode + b[i];
+        out = String.fromCharCode(charCode) + out;
+    }
+    return out;
+}
+export function getNextId(currentKeys) {
+    const takenKeys = [...currentKeys, ...forbiddenIds].map(charsToNumber);
+    let i = charsToNumber('a');
+    while (true) {
+        if (!takenKeys.includes(i)) {
+            break;
+        }
+        i++;
+    }
+    return numberToChars(i);
+}
+export function charsToNumber(n) {
+    if (n.charAt(0) == '-') {
+        return charsToNumber(n.slice(1)) * -1;
+    }
+    let b = Math.pow(26, n.length - 1);
+    let res = 0;
+    for (let c of n) {
+        let charCode = c == '-' || c == '_' ? aCharCode + 25 : c.charCodeAt(0);
+        res += (charCode - aCharCode + 1) * b;
+        b = b / 26;
+    }
+    return res - 1;
+}

package/package/components/flows/map/FlowConstantsItem.svelte

@@ -0,0 +1,13 @@
+<script>import { getContext } from 'svelte';
+import { classNames } from '../../../utils';
+import { DollarSign } from 'lucide-svelte';
+const { selectedId } = getContext('FlowEditorContext');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+</script>
+
+<button on:click={() => ($selectedId = 'constants')} class={settingsClass}>
+	<DollarSign size={16} />
+	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
+		All Static Inputs
+	</span>
+</button>

package/package/components/flows/map/FlowConstantsItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowConstantsItemProps = typeof __propDef.props;
+export type FlowConstantsItemEvents = typeof __propDef.events;
+export type FlowConstantsItemSlots = typeof __propDef.slots;
+export default class FlowConstantsItem extends SvelteComponentTyped<FlowConstantsItemProps, FlowConstantsItemEvents, FlowConstantsItemSlots> {
+}
+export {};

package/package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -0,0 +1,64 @@
+<script>import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { faBug } from '@fortawesome/free-solid-svg-icons';
+import { classNames, emptySchema } from '../../../utils';
+import Toggle from '../../Toggle.svelte';
+import { NEVER_TESTED_THIS_FAR } from '../utils';
+const { selectedId, flowStateStore, flowStore } = getContext('FlowEditorContext');
+function onToggle() {
+    if ($flowStore?.value?.failure_module) {
+        $flowStore.value.failure_module = undefined;
+        // By default, we return to settings when disabling the failure module
+        $selectedId = 'settings-metadata';
+    }
+    else {
+        const failureModule = {
+            schema: emptySchema(),
+            previewResult: NEVER_TESTED_THIS_FAR
+        };
+        $flowStateStore['failure'] = failureModule;
+        $flowStore.value.failure_module = {
+            id: 'failure',
+            value: { type: 'identity' }
+        };
+        $selectedId = 'failure';
+    }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	on:click={() => {
+		if ($flowStore?.value?.failure_module) {
+			$selectedId = 'failure'
+		} else {
+			onToggle()
+		}
+	}}
+	class={classNames(
+		'border mx-auto rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex justify-between items-center flex-row overflow-x-hidden ',
+		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
+	)}
+	style="min-width: 275px"
+>
+	<div class=" flex justify-between items-center flex-wrap">
+		<div>
+			<Icon data={faBug} class="mr-2" />
+			<span class="font-bold text-xs">Error handler</span>
+		</div>
+	</div>
+
+	<div class=" items-center truncate flex text-xs">
+		{#if Boolean($flowStore?.value?.failure_module)}
+			<span>
+				{$flowStore.value.failure_module?.summary ||
+					($flowStore.value.failure_module?.value.type === 'rawscript'
+						? `${$flowStore.value.failure_module?.value.language}`
+						: 'TBD')}
+			</span>
+		{/if}
+	</div>
+	<div class="-my-1">
+		<Toggle checked={Boolean($flowStore?.value?.failure_module)} on:change={onToggle} />
+	</div>
+</div>

package/package/components/flows/map/FlowErrorHandlerItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowErrorHandlerItemProps = typeof __propDef.props;
+export type FlowErrorHandlerItemEvents = typeof __propDef.events;
+export type FlowErrorHandlerItemSlots = typeof __propDef.slots;
+export default class FlowErrorHandlerItem extends SvelteComponentTyped<FlowErrorHandlerItemProps, FlowErrorHandlerItemEvents, FlowErrorHandlerItemSlots> {
+}
+export {};

package/package/components/flows/map/FlowInputsItem.svelte

@@ -0,0 +1,18 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import Icon from 'svelte-awesome';
+import { faFlagCheckered } from '@fortawesome/free-solid-svg-icons';
+const { selectedId } = getContext('FlowEditorContext');
+</script>
+
+<FlowModuleSchemaItem
+	on:click={() => ($selectedId = 'inputs')}
+	selected={$selectedId === 'inputs'}
+	bold
+	label="Flow Input"
+	id={'flow_input'}
+>
+	<div slot="icon">
+		<Icon data={faFlagCheckered} scale={0.8} />
+	</div>
+</FlowModuleSchemaItem>

package/package/components/flows/map/FlowInputsItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowInputsItemProps = typeof __propDef.props;
+export type FlowInputsItemEvents = typeof __propDef.events;
+export type FlowInputsItemSlots = typeof __propDef.slots;
+export default class FlowInputsItem extends SvelteComponentTyped<FlowInputsItemProps, FlowInputsItemEvents, FlowInputsItemSlots> {
+}
+export {};

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -0,0 +1,117 @@
+<script>import Badge from '../../common/badge/Badge.svelte';
+import Popover from '../../Popover.svelte';
+import { classNames } from '../../../utils';
+import { Bed, Move, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+export let selected = false;
+export let deletable = false;
+export let retry = false;
+export let earlyStop = false;
+export let suspend = false;
+export let sleep = false;
+export let bold = false;
+export let id = undefined;
+export let label;
+export let modType = undefined;
+export let bgColor = '';
+const dispatch = createEventDispatcher();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class={classNames(
+		'w-full module flex rounded-sm cursor-pointer',
+		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
+		'flex relative'
+	)}
+	style="width: 275px; height: 34px; background-color: {bgColor};"
+	on:click
+>
+	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
+		{#if retry}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Repeat size={14} />
+				</div>
+				<svelte:fragment slot="text">Retries</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if earlyStop}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Square size={14} />
+				</div>
+				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if suspend}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<PhoneIncoming size={14} />
+				</div>
+				<svelte:fragment slot="text">Suspend</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if sleep}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Bed size={14} />
+				</div>
+				<svelte:fragment slot="text">Sleep</svelte:fragment>
+			</Popover>
+		{/if}
+	</div>
+	<div
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
+			border border-gray-400 p-2 text-2xs module"
+	>
+		{#if $$slots.icon}
+			<slot name="icon" />
+			<span class="mr-2" />
+		{/if}
+		<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
+		<div class="flex items-center space-x-2">
+			{#if id}
+				<Badge color="indigo">{id}</Badge>
+			{/if}
+		</div>
+	</div>
+	{#if deletable}
+		<button
+			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center
+	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white
+	hover:border-red-700 {selected ? '' : '!hidden'}"
+			on:click|preventDefault|stopPropagation={(event) =>
+				dispatch('delete', { event, id, type: modType })}
+		>
+			<X size={12} strokeWidth={2} />
+		</button>
+
+		<button
+			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center
+border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white
+hover:border-blue-700 {selected ? '' : '!hidden'}"
+			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
+		>
+			<Move size={12} strokeWidth={2} />
+		</button>
+	{/if}
+</div>
+
+<style>
+	.module:hover .trash {
+		display: flex !important;
+	}</style>

package/package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        selected?: boolean | undefined;
+        deletable?: boolean | undefined;
+        retry?: boolean | undefined;
+        earlyStop?: boolean | undefined;
+        suspend?: boolean | undefined;
+        sleep?: boolean | undefined;
+        bold?: boolean | undefined;
+        id?: string | undefined;
+        label: string;
+        modType?: string | undefined;
+        bgColor?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        delete: CustomEvent<any>;
+        move: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+    };
+};
+export type FlowModuleSchemaItemProps = typeof __propDef.props;
+export type FlowModuleSchemaItemEvents = typeof __propDef.events;
+export type FlowModuleSchemaItemSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaItem extends SvelteComponentTyped<FlowModuleSchemaItemProps, FlowModuleSchemaItemEvents, FlowModuleSchemaItemSlots> {
+}
+export {};

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -0,0 +1,182 @@
+<script>import { getContext } from 'svelte';
+import { createBranchAll, createBranches, createLoop, deleteFlowStateById, emptyModule } from '../flowStateUtils';
+import { emptyFlowModuleState } from '../utils';
+import FlowSettingsItem from './FlowSettingsItem.svelte';
+import FlowConstantsItem from './FlowConstantsItem.svelte';
+import { dfs } from '../flowStore';
+import { FlowGraph } from '../../graph';
+import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
+import { push } from '../../../history';
+export let modules;
+export let sidebarSize = undefined;
+const { selectedId, moving, history, flowStateStore, flowStore } = getContext('FlowEditorContext');
+async function insertNewModuleAtIndex(modules, index, kind) {
+    push(history, $flowStore);
+    var module = emptyModule($flowStateStore, kind == 'flow');
+    var state = emptyFlowModuleState();
+    if (kind == 'forloop') {
+        ;
+        [module, state] = await createLoop(module.id);
+    }
+    else if (kind == 'branchone') {
+        ;
+        [module, state] = await createBranches(module.id);
+    }
+    else if (kind == 'branchall') {
+        ;
+        [module, state] = await createBranchAll(module.id);
+    }
+    $flowStateStore[module.id] = state;
+    if (kind == 'trigger') {
+        module.summary = 'Trigger';
+    }
+    else if (kind == 'approval') {
+        module.summary = 'Approval';
+    }
+    else if (kind == 'end') {
+        module.summary = 'Terminate flow';
+        module.stop_after_if = { skip_if_stopped: false, expr: 'true' };
+    }
+    if (!modules)
+        return [module];
+    modules.splice(index, 0, module);
+    return modules;
+}
+function removeAtId(modules, id) {
+    const index = modules.findIndex((mod) => mod.id == id);
+    if (index != -1) {
+        const [removed] = modules.splice(index, 1);
+        const leaves = dfs([removed], (mod) => mod.id);
+        leaves.forEach((leafId) => deleteFlowStateById(leafId, flowStateStore));
+        return modules;
+    }
+    return modules.map((mod) => {
+        if (mod.value.type == 'forloopflow') {
+            mod.value.modules = removeAtId(mod.value.modules, id);
+        }
+        else if (mod.value.type == 'branchall') {
+            mod.value.branches = mod.value.branches.map((branch) => {
+                branch.modules = removeAtId(branch.modules, id);
+                return branch;
+            });
+        }
+        else if (mod.value.type == 'branchone') {
+            mod.value.branches = mod.value.branches.map((branch) => {
+                branch.modules = removeAtId(branch.modules, id);
+                return branch;
+            });
+            mod.value.default = removeAtId(mod.value.default, id);
+        }
+        return mod;
+    });
+}
+$: sidebarMode == 'graph' ? (sidebarSize = 40) : (sidebarSize = 20);
+let sidebarMode = 'graph';
+let minHeight = 0;
+function selectNextId(id) {
+    if (modules) {
+        let allIds = dfs(modules, (mod) => mod.id);
+        if (allIds.length > 1) {
+            const idx = allIds.indexOf(id);
+            $selectedId = idx == 0 ? allIds[0] : allIds[idx - 1];
+        }
+        else {
+            $selectedId = 'settings-metadata';
+        }
+    }
+}
+async function addBranch(module) {
+    push(history, $flowStore);
+    if (module.value.type === 'branchone' || module.value.type === 'branchall') {
+        module.value.branches.splice(module.value.branches.length, 0, {
+            summary: '',
+            expr: 'false',
+            modules: []
+        });
+    }
+}
+function removeBranch(module, index) {
+    push(history, $flowStore);
+    if (module.value.type === 'branchone' || module.value.type === 'branchall') {
+        const offset = module.value.type === 'branchone' ? 1 : 0;
+        if (module.value.branches[index - offset]?.modules) {
+            const leaves = dfs(module.value.branches[index - offset].modules, (mod) => mod.id);
+            leaves.forEach((leafId) => deleteFlowStateById(leafId, flowStateStore));
+        }
+        module.value.branches.splice(index - offset, 1);
+    }
+}
+</script>
+
+<div class="flex flex-col h-full relative -pt-1">
+	<div
+		class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
+	>
+		<FlowSettingsItem />
+		<FlowConstantsItem />
+	</div>
+
+	<div class="flex-auto grow" bind:clientHeight={minHeight}>
+		<FlowGraph
+			insertable
+			scroll
+			{minHeight}
+			moving={$moving?.module.id}
+			rebuildOnChange={$flowStore}
+			maxHeight={minHeight}
+			modules={$flowStore.value?.modules}
+			{selectedId}
+			on:delete={({ detail }) => {
+				let e = detail.detail
+				push(history, $flowStore)
+				selectNextId(e.id)
+				removeAtId($flowStore.value.modules, e.id)
+				$flowStore = $flowStore
+			}}
+			on:insert={async ({ detail }) => {
+				if (detail.modules) {
+					if ($moving) {
+						push(history, $flowStore)
+						let indexToRemove = $moving.modules.findIndex((m) => $moving?.module?.id == m.id)
+						$moving.modules.splice(indexToRemove, 1)
+						detail.modules.splice(detail.index, 0, $moving.module)
+						$selectedId = $moving.module.id
+						$moving = undefined
+					} else {
+						await insertNewModuleAtIndex(detail.modules, detail.index ?? 0, detail.detail)
+						$selectedId = detail.modules[detail.index ?? 0].id
+					}
+					$flowStore = $flowStore
+				}
+			}}
+			on:newBranch={async ({ detail }) => {
+				if (detail.module) {
+					await addBranch(detail.module)
+					$flowStore = $flowStore
+				}
+			}}
+			on:deleteBranch={async ({ detail }) => {
+				if (detail.module) {
+					await removeBranch(detail.module, detail.index)
+					$flowStore = $flowStore
+					$selectedId = detail.module.id
+				}
+			}}
+			on:move={async ({ detail }) => {
+				if (!$moving || $moving.module.id !== detail.module.id) {
+					if (detail.module && detail.modules) {
+						console.log('MOVE+')
+						$moving = { module: detail.module, modules: detail.modules }
+					}
+				} else {
+					$moving = undefined
+				}
+			}}
+		/>
+	</div>
+	<div
+		class="z-10 absolute w-full inline-flex flex-col gap-2 bottom-0 left-0  flex-initial p-2 items-center border-b"
+	>
+		<FlowErrorHandlerItem />
+	</div>
+</div>

package/package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        modules: FlowModule[] | undefined;
+        sidebarSize?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleSchemaMapProps = typeof __propDef.props;
+export type FlowModuleSchemaMapEvents = typeof __propDef.events;
+export type FlowModuleSchemaMapSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaMap extends SvelteComponentTyped<FlowModuleSchemaMapProps, FlowModuleSchemaMapEvents, FlowModuleSchemaMapSlots> {
+}
+export {};

package/package/components/flows/map/FlowSettingsItem.svelte

@@ -0,0 +1,22 @@
+<script>import { getContext } from 'svelte';
+import { classNames } from '../../../utils';
+import { Badge } from '../../common';
+import { SlidersHorizontal } from 'lucide-svelte';
+const { selectedId, flowStore } = getContext('FlowEditorContext');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId?.startsWith('settings')
+    ? 'outline outline-offset-1 outline-2  outline-slate-900'
+    : '');
+</script>
+
+<button on:click={() => ($selectedId = 'settings-metadata')} class={settingsClass}>
+	<SlidersHorizontal size={16} />
+	<span
+		class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate ml-1"
+	>
+		Settings
+
+		{#if $flowStore.value.same_worker}
+			<Badge color="blue" baseClass="truncate">./shared</Badge>
+		{/if}
+	</span>
+</button>