windmill-components 1.35.1 → 1.35.43

package/components/flows/content/FlowModule.svelte

@@ -0,0 +1,190 @@
+<script context="module">export {};
+</script>
+
+<script>import { VSplitPane } from 'svelte-split-pane';
+import Tab from '../../common/tabs/Tab.svelte';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import Editor from '../../Editor.svelte';
+import EditorBar from '../../EditorBar.svelte';
+import ModulePreview from '../../ModulePreview.svelte';
+import FlowInputs from './FlowInputs.svelte';
+import { createInlineScriptModule, createLoop, createScriptFromInlineScript, fork, getStepPropPicker, isEmptyFlowModule, pickScript } from '../flowStateUtils';
+import { flowStore } from '../flowStore';
+import SchemaForm from '../../SchemaForm.svelte';
+import { RawScript } from '../../../gen';
+import FlowCard from '../common/FlowCard.svelte';
+import FlowModuleHeader from './FlowModuleHeader.svelte';
+import { flowStateStore } from '../flowState';
+import { scriptLangToEditorLang } from '../../../utils';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { getContext, setContext } from 'svelte';
+import FlowModuleAdvancedSettings from './FlowModuleAdvancedSettings.svelte';
+import { loadSchemaFromModule } from '../utils';
+import { writable } from 'svelte/store';
+import FlowModuleScript from './FlowModuleScript.svelte';
+const { selectedId, select } = getContext('FlowEditorContext');
+export let flowModule;
+export let previewArgs = {};
+export let flowModuleState;
+$: [parentIndex, childIndex] = $selectedId.split('-').map(Number);
+let editor;
+let modulePreview;
+let websocketAlive = { pyright: false, black: false, deno: false };
+let selected = 'inputs';
+$: shouldPick = isEmptyFlowModule(flowModule);
+$: stepPropPicker = getStepPropPicker($selectedId.split('-').map(Number), $flowStore.schema, $flowStateStore, previewArgs);
+function onKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
+        event.preventDefault();
+        selected = 'test';
+        modulePreview?.runTestWithStepArgs();
+    }
+}
+async function apply(fn, arg) {
+    const [module, moduleState] = await fn(arg);
+    if (JSON.stringify(flowModule) != JSON.stringify(module) ||
+        JSON.stringify(flowModuleState) != JSON.stringify(moduleState)) {
+        flowModule = module;
+        flowModuleState = moduleState;
+    }
+}
+async function reload(flowModule) {
+    const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
+    flowModuleState.schema = schema;
+    flowModule.input_transforms = input_transforms;
+}
+async function applyCreateLoop() {
+    await apply(createLoop, null);
+}
+export const FLOW_MODULE_WIDTH_THRESHOLD = 768;
+const width = writable(0);
+setContext('FlowModuleWidth', {
+    width,
+    threshold: FLOW_MODULE_WIDTH_THRESHOLD
+});
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<div class="flex flex-col h-full" bind:clientWidth={$width}>
+	<FlowCard bind:flowModule>
+		<svelte:fragment slot="header">
+			<FlowModuleHeader
+				bind:module={flowModule}
+				on:delete
+				on:fork={() => apply(fork, flowModule)}
+				on:createScriptFromInlineScript={() => {
+					apply(createScriptFromInlineScript, {
+						flowModule: flowModule,
+						suffix: $selectedId,
+						schema: flowModuleState.schema
+					})
+				}}
+			/>
+		</svelte:fragment>
+		{#if shouldPick}
+			<FlowInputs
+				shouldDisableTriggerScripts={parentIndex != 0}
+				shouldDisableLoopCreation={childIndex !== undefined ||
+					parentIndex === 0 ||
+					$selectedId.includes('failure')}
+				on:loop={() => {
+					applyCreateLoop()
+					select(['loop', $selectedId].join('-'))
+				}}
+				on:pick={(e) => apply(pickScript, e.detail.path)}
+				on:new={(e) =>
+					apply(createInlineScriptModule, {
+						language: e.detail.language,
+						kind: e.detail.kind,
+						subkind: e.detail.subkind
+					})}
+			/>
+		{:else}
+			{#if flowModule.value.type === 'rawscript'}
+				<div class="flex-shrink-0 border-b p-1">
+					<EditorBar
+						{editor}
+						lang={flowModule.value['language'] ?? 'deno'}
+						{websocketAlive}
+						iconOnly={$width < FLOW_MODULE_WIDTH_THRESHOLD}
+					/>
+				</div>
+			{/if}
+
+			<div class="overflow-hidden flex-grow">
+				<VSplitPane
+					topPanelSize={flowModule.value.type === 'rawscript' ? '50%' : '0%'}
+					downPanelSize={flowModule.value.type === 'rawscript' ? '50%' : '100%'}
+					minTopPaneSize="20%"
+					minDownPaneSize="20%"
+				>
+					<top slot="top">
+						{#if flowModule.value.type === 'rawscript'}
+							<div on:mouseleave={() => reload(flowModule)} class="h-full overflow-auto">
+								<Editor
+									bind:websocketAlive
+									bind:this={editor}
+									class="h-full px-2"
+									bind:code={flowModule.value.content}
+									deno={flowModule.value.language === RawScript.language.DENO}
+									lang={scriptLangToEditorLang(flowModule.value.language)}
+									automaticLayout={true}
+									cmdEnterAction={() => {
+										selected = 'test'
+										modulePreview?.runTestWithStepArgs()
+									}}
+									formatAction={() => reload(flowModule)}
+								/>
+							</div>
+						{:else if flowModule.value.type === 'script'}
+							<FlowModuleScript {flowModule} />
+						{/if}
+					</top>
+
+					<down slot="down" class="flex flex-col flex-1 h-full">
+						<Tabs bind:selected>
+							<Tab value="inputs">Inputs</Tab>
+							<Tab value="test">Test</Tab>
+							{#if !$selectedId.includes('failure')}
+								<Tab value="advanced">Advanced</Tab>
+							{/if}
+
+							<svelte:fragment slot="content">
+								<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+									<TabContent value="inputs" class="flex flex-col flex-1 h-full">
+										<PropPickerWrapper bind:pickableProperties={stepPropPicker.pickableProperties}>
+											<!-- <pre class="text-xs">{JSON.stringify($flowStateStore, null, 4)}</pre> -->
+											<SchemaForm
+												schema={flowModuleState.schema}
+												inputTransform={true}
+												importPath={$selectedId}
+												bind:args={flowModule.input_transforms}
+												bind:extraLib={stepPropPicker.extraLib}
+											/>
+										</PropPickerWrapper>
+									</TabContent>
+									<TabContent value="test" class="flex flex-col flex-1 h-full" alwaysMounted={true}>
+										<ModulePreview
+											bind:this={modulePreview}
+											mod={flowModule}
+											schema={flowModuleState.schema}
+											indices={[parentIndex, childIndex]}
+										/>
+									</TabContent>
+
+									<TabContent value="advanced" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleAdvancedSettings bind:flowModule />
+										</div>
+									</TabContent>
+								</div>
+							</svelte:fragment>
+						</Tabs>
+					</down>
+				</VSplitPane>
+			</div>
+		{/if}
+	</FlowCard>
+</div>

package/components/flows/content/FlowModule.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type FlowModuleWidthContext = {
+    width: Writable<number>;
+    threshold: number;
+};
+import { type FlowModule } from '../../../gen';
+import { type FlowModuleState } from '../flowState';
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+        previewArgs?: Record<string, any> | undefined;
+        flowModuleState: FlowModuleState;
+        FLOW_MODULE_WIDTH_THRESHOLD?: 768 | undefined;
+    };
+    events: {
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleProps = typeof __propDef.props;
+export declare type FlowModuleEvents = typeof __propDef.events;
+export declare type FlowModuleSlots = typeof __propDef.slots;
+export default class FlowModule extends SvelteComponentTyped<FlowModuleProps, FlowModuleEvents, FlowModuleSlots> {
+    get FLOW_MODULE_WIDTH_THRESHOLD(): number;
+}
+export {};

package/components/flows/content/FlowModuleAdvancedSettings.svelte

@@ -0,0 +1,64 @@
+<script>import SimpleEditor from '../../SimpleEditor.svelte';
+import Toggle from '../../Toggle.svelte';
+export let flowModule;
+$: isSuspendEnabled = Boolean(flowModule.suspend);
+$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
+</script>
+
+<div class="flex flex-col items-start space-y-2">
+	<Toggle
+		checked={isSuspendEnabled}
+		on:change={() => {
+			if (isSuspendEnabled && flowModule.suspend != undefined) {
+				flowModule.suspend = undefined
+			} else {
+				flowModule.suspend = 1
+			}
+		}}
+		options={{
+			right: 'Suspend flow execution until events received enabled'
+		}}
+	/>
+	<span class="text-xs font-bold">Number of events to wait for</span>
+
+	{#if flowModule.suspend}
+		<input bind:value={flowModule.suspend} type="number" min="1" placeholder="1" />
+	{:else}
+		<input type="number" disabled />
+	{/if}
+
+	<Toggle
+		checked={isStopAfterIfEnabled}
+		on:change={() => {
+			if (isStopAfterIfEnabled && flowModule.stop_after_if) {
+				flowModule.stop_after_if = undefined
+			} else {
+				flowModule.stop_after_if = {
+					expr: 'result == undefined',
+					skip_if_stopped: false
+				}
+			}
+		}}
+		options={{
+			right: 'Early stop if condition met enabled'
+		}}
+	/>
+
+	{#if flowModule.stop_after_if}
+		<span class="text-xs font-bold">Stop condition expression</span>
+
+		<SimpleEditor
+			lang="javascript"
+			bind:code={flowModule.stop_after_if.expr}
+			class="few-lines-editor border w-full"
+		/>
+		<span class="text-xs font-bold">Should skip if stopped</span>
+
+		<input type="checkbox" bind:checked={flowModule.stop_after_if.skip_if_stopped} />
+	{:else}
+		<span class="text-xs font-bold">Stop condition expression</span>
+		<textarea disabled rows="3" />
+		<span class="text-xs font-bold">Should skip if stopped</span>
+		<input type="checkbox" disabled />
+	{/if}
+</div>

package/components/flows/content/FlowModuleAdvancedSettings.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleAdvancedSettingsProps = typeof __propDef.props;
+export declare type FlowModuleAdvancedSettingsEvents = typeof __propDef.events;
+export declare type FlowModuleAdvancedSettingsSlots = typeof __propDef.slots;
+export default class FlowModuleAdvancedSettings extends SvelteComponentTyped<FlowModuleAdvancedSettingsProps, FlowModuleAdvancedSettingsEvents, FlowModuleAdvancedSettingsSlots> {
+}
+export {};

package/components/flows/content/FlowModuleHeader.svelte

@@ -0,0 +1,68 @@
+<script>import Button from '../../common/button/Button.svelte';
+import { isEmptyFlowModule } from '../flowStateUtils';
+import { faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher, getContext } from 'svelte';
+import RemoveStepConfirmationModal from './RemoveStepConfirmationModal.svelte';
+export let module;
+let confirmationModalOpen = false;
+$: shouldPick = isEmptyFlowModule(module);
+const dispatch = createEventDispatcher();
+const { selectedId, select } = getContext('FlowEditorContext');
+const { width, threshold } = getContext('FlowModuleWidth');
+$: iconOnly = $width < threshold;
+</script>
+
+<div class="flex flex-row space-x-2">
+	{#if module.value.type === 'script' && !shouldPick}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			on:click={() => dispatch('fork')}
+			startIcon={{ icon: faCodeBranch }}
+			{iconOnly}
+		>
+			Fork
+		</Button>
+	{/if}
+
+	{#if module.value.type === 'rawscript' && !shouldPick}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faSave }}
+			on:click={() => dispatch('createScriptFromInlineScript')}
+			{iconOnly}
+		>
+			Save to workspace
+		</Button>
+	{/if}
+	<Button
+		size="xs"
+		color="light"
+		variant="border"
+		startIcon={{ icon: faTrashAlt }}
+		{iconOnly}
+		on:click={(event) => {
+			if (event.shiftKey || shouldPick) {
+				dispatch('delete')
+				select('settings')
+			} else {
+				confirmationModalOpen = true
+			}
+		}}
+	>
+		{$selectedId.includes('failure') ? 'Delete error handler' : 'Remove step'}
+	</Button>
+</div>
+
+<RemoveStepConfirmationModal
+	bind:open={confirmationModalOpen}
+	on:confirmed={() => {
+		dispatch('delete')
+		setTimeout(() => {
+			select('settings')
+		})
+	}}
+/>

package/components/flows/{FlowModuleHeader.svelte.d.ts → content/FlowModuleHeader.svelte.d.ts}

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FlowModule } from '../../gen';
+import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
-        indexes: number[];
-        mod: FlowModule;
+        module: FlowModule;
     };
     events: {
         fork: CustomEvent<any>;

package/components/flows/content/FlowModuleScript.svelte

@@ -0,0 +1,21 @@
+<script>import HighlightCode from '../../HighlightCode.svelte';
+import { getScriptByPath } from '../../../utils';
+export let flowModule;
+let code;
+let language;
+async function loadCode(module) {
+    if (module.value.type == 'script') {
+        const script = await getScriptByPath(module.value.path);
+        code = script.content;
+        language = script.language;
+    }
+    else {
+        throw Error('Not a script');
+    }
+}
+$: flowModule && loadCode(flowModule);
+</script>
+
+<div class="flex flex-col flex-1 h-full overflow-auto">
+	<HighlightCode {language} {code} />
+</div>

package/components/flows/content/FlowModuleScript.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleScriptProps = typeof __propDef.props;
+export declare type FlowModuleScriptEvents = typeof __propDef.events;
+export declare type FlowModuleScriptSlots = typeof __propDef.slots;
+export default class FlowModuleScript extends SvelteComponentTyped<FlowModuleScriptProps, FlowModuleScriptEvents, FlowModuleScriptSlots> {
+}
+export {};

package/components/flows/content/FlowModuleWrapper.svelte

@@ -0,0 +1,47 @@
+<script>import { getContext } from 'svelte';
+import { flowStateStore } from '../flowState';
+import { flowStore } from '../flowStore';
+import FlowModule from './FlowModule.svelte';
+const { selectedId, previewArgs, select } = getContext('FlowEditorContext');
+function selectedIdToIndexes(selectedId) {
+    return selectedId.split('-').map(Number);
+}
+$: [parentIndex, childIndex] = selectedIdToIndexes($selectedId);
+</script>
+
+{#if childIndex != undefined}
+	{#each [$flowStore.value.modules[parentIndex].value] as mod, index (index)}
+		{#each [$flowStateStore.modules[parentIndex].childFlowModules] as state}
+			{#if mod.type == 'forloopflow' && state != undefined}
+				<FlowModule
+					previewArgs={$previewArgs}
+					bind:flowModule={mod.modules[childIndex]}
+					bind:flowModuleState={state[childIndex]}
+					on:delete={() => {
+						$flowStateStore.modules[parentIndex].childFlowModules?.splice(childIndex, 1)
+						let mod = $flowStore.value.modules[parentIndex].value
+						if (mod.type === 'forloopflow') {
+							mod.modules.splice(childIndex, 1)
+						} else {
+							throw new Error('Expected forloop')
+						}
+					}}
+				/>
+			{:else}
+				<span>Incorrect state</span>
+			{/if}
+		{/each}
+	{/each}
+{:else if $flowStore.value.modules[parentIndex]}
+	<FlowModule
+		previewArgs={$previewArgs}
+		bind:flowModule={$flowStore.value.modules[parentIndex]}
+		bind:flowModuleState={$flowStateStore.modules[parentIndex]}
+		on:delete={() => {
+			$flowStateStore.modules.splice(parentIndex, 1)
+			$flowStateStore = $flowStateStore
+			$flowStore.value.modules.splice(parentIndex, 1)
+			$flowStore = $flowStore
+		}}
+	/>
+{/if}

package/components/flows/content/FlowModuleWrapper.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleWrapperProps = typeof __propDef.props;
+export declare type FlowModuleWrapperEvents = typeof __propDef.events;
+export declare type FlowModuleWrapperSlots = typeof __propDef.slots;
+export default class FlowModuleWrapper extends SvelteComponentTyped<FlowModuleWrapperProps, FlowModuleWrapperEvents, FlowModuleWrapperSlots> {
+}
+export {};

package/components/flows/content/FlowRetries.svelte

@@ -0,0 +1,80 @@
+<script>import Toggle from '../../Toggle.svelte';
+import { flowStore } from '../flowStore';
+function setConstantRetries() {
+    $flowStore.value.retry = {
+        ...$flowStore.value.retry,
+        constant: {
+            attempts: 0,
+            seconds: 0
+        }
+    };
+}
+function setExpoentialRetries() {
+    $flowStore.value.retry = {
+        ...$flowStore.value.retry,
+        exponential: {
+            attempts: 0,
+            multiplier: 1,
+            seconds: 0
+        }
+    };
+}
+$: isConstantRetryEnabled = Boolean($flowStore.value.retry?.constant);
+$: isExponentialRetryEnabled = Boolean($flowStore.value.retry?.exponential);
+</script>
+
+<div class="flex flex-col items-start space-y-1">
+	<Toggle
+		checked={isConstantRetryEnabled}
+		on:change={() => {
+			if (isConstantRetryEnabled && $flowStore.value.retry?.constant) {
+				$flowStore.value.retry.constant = undefined
+			} else {
+				setConstantRetries()
+			}
+		}}
+		options={{
+			right: 'Constant retry enabled'
+		}}
+	/>
+	{#if $flowStore.value.retry?.constant}
+		<span class="text-xs font-bold">Attempts</span>
+		<input bind:value={$flowStore.value.retry.constant.attempts} type="number" />
+		<span class="text-xs font-bold">Delay (seconds)</span>
+		<input bind:value={$flowStore.value.retry.constant.seconds} type="number" />
+	{:else}
+		<span class="text-xs font-bold">Attempts</span>
+		<input type="number" disabled />
+		<span class="text-xs font-bold">Delay (seconds)</span>
+		<input type="number" disabled />
+	{/if}
+
+	<Toggle
+		checked={isExponentialRetryEnabled}
+		on:change={() => {
+			if (isExponentialRetryEnabled && $flowStore.value.retry?.exponential) {
+				$flowStore.value.retry.exponential = undefined
+			} else {
+				setExpoentialRetries()
+			}
+		}}
+		options={{
+			right: 'Exponential retry enabled'
+		}}
+	/>
+	{#if $flowStore.value.retry?.exponential}
+		<span class="text-xs font-bold">Attempts</span>
+		<input bind:value={$flowStore.value.retry.exponential.attempts} type="number" />
+		<span class="text-xs font-bold">Mulitplier</span>
+		<input bind:value={$flowStore.value.retry.exponential.multiplier} type="number" />
+		<span class="text-xs font-bold">Initial delay (seconds)</span>
+		<input bind:value={$flowStore.value.retry.exponential.seconds} type="number" />
+	{:else}
+		<span class="text-xs font-bold">Attempts</span>
+		<input type="number" disabled />
+		<span class="text-xs font-bold">Mulitplier</span>
+		<input type="number" disabled />
+		<span class="text-xs font-bold">Initial delay (seconds)</span>
+		<input type="number" disabled />
+	{/if}
+</div>

package/components/flows/content/FlowRetries.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowRetriesProps = typeof __propDef.props;
+export declare type FlowRetriesEvents = typeof __propDef.events;
+export declare type FlowRetriesSlots = typeof __propDef.slots;
+export default class FlowRetries extends SvelteComponentTyped<FlowRetriesProps, FlowRetriesEvents, FlowRetriesSlots> {
+}
+export {};

package/components/flows/content/FlowSchedules.svelte

@@ -0,0 +1,18 @@
+<script>import CronInput from '../../CronInput.svelte';
+import SchemaForm from '../../SchemaForm.svelte';
+import Toggle from '../../Toggle.svelte';
+import { getContext } from 'svelte';
+import { flowStore } from '../flowStore';
+const { schedule } = getContext('FlowEditorContext');
+</script>
+
+<CronInput bind:schedule={$schedule.cron} />
+
+<SchemaForm schema={$flowStore.schema} bind:args={$schedule.args} />
+
+<Toggle
+	bind:checked={$schedule.enabled}
+	options={{
+		right: 'Schedule enabled'
+	}}
+/>

package/components/flows/content/FlowSchedules.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowSchedulesProps = typeof __propDef.props;
+export declare type FlowSchedulesEvents = typeof __propDef.events;
+export declare type FlowSchedulesSlots = typeof __propDef.slots;
+export default class FlowSchedules extends SvelteComponentTyped<FlowSchedulesProps, FlowSchedulesEvents, FlowSchedulesSlots> {
+}
+export {};

package/components/flows/content/FlowSettings.svelte

@@ -0,0 +1,51 @@
+<script>import Tabs from '../../common/tabs/Tabs.svelte';
+import Tab from '../../common/tabs/Tab.svelte';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import { flowStore } from '../flowStore';
+import Path from '../../Path.svelte';
+import Required from '../../Required.svelte';
+import { getContext } from 'svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import FlowSchedules from './FlowSchedules.svelte';
+import FlowRetries from './FlowRetries.svelte';
+const { path } = getContext('FlowEditorContext');
+export let defaultTab = 'configuration';
+</script>
+
+<FlowCard title="Settings">
+	<Tabs selected={defaultTab}>
+		<Tab value="configuration">Configuration</Tab>
+		<Tab value="schedule">Schedule</Tab>
+		<Tab value="retries">Retries</Tab>
+
+		<svelte:fragment slot="content">
+			<TabContent value="configuration" class="p-4">
+				<Path bind:path={$flowStore.path} initialPath={path} namePlaceholder="my_flow" kind="flow">
+					<div slot="ownerToolkit">
+						Flow permissions depend on their path. Select the group <span class="font-mono"
+							>all</span
+						>
+						to share your flow, and <span class="font-mono">user</span> to keep it private.
+						<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+					</div>
+				</Path>
+
+				<label class="block mt-4">
+					<span class="text-gray-700">Summary <Required required={false} /></span>
+					<textarea
+						bind:value={$flowStore.summary}
+						class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+						placeholder="A very short summary of the flow displayed when the flow is listed"
+						rows="1"
+					/>
+				</label>
+			</TabContent>
+			<TabContent value="schedule" class="p-4">
+				<FlowSchedules />
+			</TabContent>
+			<TabContent value="retries" class="px-4">
+				<FlowRetries />
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
+</FlowCard>