windmill-components 1.55.0 → 1.55.2

package/components/apps/gridUtils.js

@@ -14,6 +14,21 @@ function disableDrag(component) {
     });
     return component;
 }
+function toggleFixed(component) {
+    gridColumns.forEach((column) => {
+        component[column].fixed = !component[column].fixed;
+    });
+    return component;
+}
+function isFixed(component) {
+    let fixed = false;
+    gridColumns.forEach((column) => {
+        if (component[column].fixed) {
+            fixed = true;
+        }
+    });
+    return fixed;
+}
 function enableDrag(component) {
     gridColumns.forEach((column) => {
         component[column].customDragger = false;
@@ -21,4 +36,4 @@ function enableDrag(component) {
     });
     return component;
 }
-export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints };
+export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };

package/components/apps/inputType.d.ts

@@ -1,5 +1,6 @@
 import type { staticValues } from './editor/componentsPanel/componentStaticValues';
-export type InputType = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object' | 'array';
+import type { InlineScript } from './types';
+export type InputType = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -17,13 +18,18 @@ export type StaticInput<U> = {
     type: 'static';
     visible?: boolean | undefined;
 };
+export type TemplateInput = {
+    eval: string;
+    type: 'template';
+};
 type RunnableByPath = {
     path: string;
     runType: 'script' | 'flow' | 'hubscript';
     type: 'runnableByPath';
 };
 type RunnableByName = {
-    inlineScriptName: string;
+    name: string;
+    inlineScript: InlineScript | undefined;
     type: 'runnableByName';
 };
 export type Runnable = RunnableByPath | RunnableByName | undefined;
@@ -32,13 +38,13 @@ export type ResultInput = {
     fields: Record<string, StaticAppInput | ConnectedAppInput>;
     type: 'runnable';
 };
-type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | ResultInput) & InputConfiguration<T, U, V>;
+type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
 type InputConfiguration<T extends InputType, U, V extends InputType> = {
     fieldType: T;
     defaultValue: U;
     subFieldType?: V;
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'object', Record<string | number, any>> | (AppInputSpec<'select', string> & {
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | (AppInputSpec<'select', string> & {
     /**
      * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
      */

package/components/apps/rx.d.ts

@@ -1,4 +1,5 @@
 import type { AppInput } from './inputType';
+import { type Writable } from 'svelte/store';
 export interface Subscriber<T> {
     next(v: T): any;
 }
@@ -7,21 +8,20 @@ export interface Observable<T> {
 }
 export interface Output<T> extends Observable<T> {
     set(x: T, force?: boolean): void;
+    peak(): T | any | undefined;
 }
 export interface Input<T> extends Subscriber<T> {
     peak(): T | any | undefined;
 }
 export type World = {
     outputsById: Record<string, Record<string, Output<any>>>;
-    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
-};
-export declare function buildWorld(components: Record<string, string[]>): {
-    outputsById: Record<string, Record<string, Output<any>>>;
-    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void, previousValue: T) => Input<T>;
+    state: Writable<number>;
 };
+export declare function buildWorld(components: Record<string, string[]>, previousWorld: World | undefined): World;
 export declare function buildObservableWorld(): {
-    connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
-    newOutput: <T_1>(id: string, name: string) => Output<T_1>;
+    connect: <T>(inputSpec: AppInput, next: (x: T) => void, previousValue: T) => Input<T>;
+    newOutput: <T_1>(id: string, name: string, state: Writable<number>, previousValue: T_1) => Output<T_1>;
 };
 export declare function cachedInput<T>(nextParan: (x: T) => void): Input<T>;
-export declare function settableOutput<T>(): Output<T>;
+export declare function settableOutput<T>(state: Writable<number>, previousValue: T): Output<T>;

package/components/apps/rx.js

@@ -1,17 +1,20 @@
-export function buildWorld(components) {
+import { writable } from 'svelte/store';
+export function buildWorld(components, previousWorld) {
     const newWorld = buildObservableWorld();
     const outputsById = {};
+    const state = writable(0);
     for (const [k, outputs] of Object.entries(components)) {
         outputsById[k] = {};
         for (const o of outputs) {
-            outputsById[k][o] = newWorld.newOutput(k, o);
+            outputsById[k][o] = newWorld.newOutput(k, o, state, previousWorld?.outputsById[k]?.[o].peak());
         }
     }
-    return { outputsById, connect: newWorld.connect };
+    state.update((x) => x + 1);
+    return { outputsById, connect: newWorld.connect, state };
 }
 export function buildObservableWorld() {
     const observables = {};
-    function connect(inputSpec, next) {
+    function connect(inputSpec, next, previousValue) {
         if (inputSpec.type === 'static') {
             return {
                 peak: () => inputSpec.value,
@@ -50,8 +53,8 @@ export function buildObservableWorld() {
             throw Error('Unknown input type ' + inputSpec);
         }
     }
-    function newOutput(id, name) {
-        const output = settableOutput();
+    function newOutput(id, name, state, previousValue) {
+        const output = settableOutput(state, previousValue);
         observables[`${id}.${name}`] = output;
         return output;
     }
@@ -74,8 +77,8 @@ export function cachedInput(nextParan) {
         next
     };
 }
-export function settableOutput() {
-    let value = undefined;
+export function settableOutput(state, previousValue) {
+    let value = previousValue;
     const subscribers = [];
     function subscribe(x) {
         if (!subscribers.includes(x)) {
@@ -88,12 +91,17 @@ export function settableOutput() {
     }
     function set(x, force = false) {
         if (value != x || force) {
+            state.update((x) => x + 1);
             value = x;
             subscribers.forEach((x) => x.next(value));
         }
     }
+    function peak() {
+        return value;
+    }
     return {
         subscribe,
-        set
+        set,
+        peak
     };
 }

package/components/apps/types.d.ts

@@ -9,6 +9,8 @@ type BaseComponent<T extends string> = {
 };
 export type TextComponent = BaseComponent<'textcomponent'>;
 export type TextInputComponent = BaseComponent<'textinputcomponent'>;
+export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
+export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
     recomputeIds: string[] | undefined;
@@ -39,8 +41,14 @@ export interface BaseAppComponent extends Partial<Aligned> {
     componentInput: AppInput | undefined;
     configuration: Record<string, StaticAppInput | ConnectedAppInput | UserAppInput>;
     card: boolean | undefined;
+    /**
+     * If `true` then the wrapper will allow items to flow outside of it's borders.
+     *
+     * *For example when the component has a popup like `Select`*
+     */
+    softWrap?: boolean;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | NumberInputComponent | BarChartComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | BarChartComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
 export type ComponentSet = {
     title: string;
     components: AppComponent[];
@@ -62,8 +70,11 @@ export type InlineScript = {
 };
 export type App = {
     grid: GridItem[];
-    inlineScripts: Record<string, InlineScript>;
     title: string;
+    unusedInlineScripts: Array<{
+        name: string;
+        inlineScript: InlineScript;
+    }>;
 };
 export type ConnectingInput = {
     opened: boolean;
@@ -79,6 +90,7 @@ export type AppEditorContext = {
     connectingInput: Writable<ConnectingInput>;
     breakpoint: Writable<EditorBreakpoint>;
     runnableComponents: Writable<Record<string, () => void>>;
+    appPath: string;
 };
 export type EditorMode = 'dnd' | 'preview';
 export type EditorBreakpoint = 'sm' | 'lg';

package/components/apps/utils.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="node" />
 import type { Schema } from '../../common';
-import type { InputType } from 'zlib';
-import type { AppInputs } from './inputType';
+import type { AppInput, AppInputs, InputType, ResultAppInput } from './inputType';
 import type { AppComponent } from './types';
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema): AppInputs;
@@ -11,3 +9,6 @@ export declare const displayData: Record<AppComponent['type'], {
 }>;
 export declare function accessPropertyByPath<T>(object: T, path: string): T | undefined;
 export declare function fieldTypeToTsType(inputType: InputType): string;
+export declare function isScriptByNameDefined(appInput: AppInput | undefined): boolean;
+export declare function isScriptByPathDefined(appInput: AppInput | undefined): boolean;
+export declare function clearResultAppInput(appInput: ResultAppInput): ResultAppInput;

package/components/apps/utils.js

@@ -1,5 +1,5 @@
 import { FlowService, ScriptService } from '../../gen';
-import { BarChart4, Binary, BoxSelect, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, TextCursorInput, Type, FolderInput } from 'lucide-svelte';
+import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft } from 'lucide-svelte';
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -19,7 +19,6 @@ export async function loadSchema(workspace, path, runType) {
         const script = await ScriptService.getHubScriptByPath({
             path
         });
-        debugger;
         return script.schema;
     }
 }
@@ -51,7 +50,7 @@ export const displayData = {
     },
     formcomponent: {
         name: 'Form',
-        icon: FolderInput
+        icon: FormInput
     },
     piechartcomponent: {
         name: 'Pie chart',
@@ -66,8 +65,8 @@ export const displayData = {
         icon: Table2
     },
     checkboxcomponent: {
-        name: 'Checkbox',
-        icon: BoxSelect
+        name: 'Toggle',
+        icon: ToggleLeft
     },
     textinputcomponent: {
         name: 'Text input',
@@ -96,6 +95,14 @@ export const displayData = {
     numberinputcomponent: {
         name: 'Number input',
         icon: Binary
+    },
+    passwordinputcomponent: {
+        name: 'Password input',
+        icon: Lock
+    },
+    dateinputcomponent: {
+        name: 'Date input',
+        icon: Calendar
     }
 };
 export function accessPropertyByPath(object, path) {
@@ -126,7 +133,32 @@ export function fieldTypeToTsType(inputType) {
             return 'object';
         case 'array':
             return 'array';
+        case 'any':
+            return 'any';
         default:
             return 'string';
     }
 }
+export function isScriptByNameDefined(appInput) {
+    if (!appInput) {
+        return false;
+    }
+    if (appInput.type === 'runnable' && appInput.runnable?.type == 'runnableByName') {
+        return Boolean(appInput.runnable?.name);
+    }
+    return false;
+}
+export function isScriptByPathDefined(appInput) {
+    if (!appInput) {
+        return false;
+    }
+    if (appInput.type === 'runnable' && appInput.runnable?.type == 'runnableByPath') {
+        return Boolean(appInput.runnable?.path);
+    }
+    return false;
+}
+export function clearResultAppInput(appInput) {
+    appInput.runnable = undefined;
+    appInput.fields = {};
+    return appInput;
+}

package/components/common/drawer/Drawer.svelte

@@ -55,7 +55,7 @@ onMount(() => {
 
 <svelte:window on:keydown={onKeyDown} />
 
-<aside class="drawer" class:open class:close={!open && timeout} {style}>
+<aside class="drawer {$$props.class}" class:open class:close={!open && timeout} {style}>
 	<div class="overlay" on:click={handleClickAway} />
 	<div class="panel {placement}" class:size>
 		{#if open || !timeout}

package/components/common/drawer/Drawer.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         open?: boolean | undefined;
         duration?: number | undefined;
         placement?: string | undefined;

package/components/common/popup/Popup.svelte

@@ -4,7 +4,6 @@
 import { slide } from 'svelte/transition';
 import { createPopperActions } from 'svelte-popperjs';
 import { clickOutside } from '../../../utils';
-import { Kbd } from '..';
 import { createStateMachine } from '../../../stateMachine';
 export let ref;
 export let options = { placement: 'auto' };
@@ -12,7 +11,6 @@ export let options = { placement: 'auto' };
 export let openOn = ['focus'];
 /** Events on the reference element */
 export let closeOn = ['blur'];
-export let disableInstruction = false;
 export let innerClasses = '';
 export let outerClasses = '';
 const states = ['closed', 'open-focus-in', 'open-focus-out'];

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

@@ -6,7 +6,6 @@ declare const __propDef: {
         options?: PopperOptions<any>;
         /** Events on the reference element */ openOn?: (keyof HTMLElementEventMap)[] | undefined;
         /** Events on the reference element */ closeOn?: (keyof HTMLElementEventMap)[] | undefined;
-        disableInstruction?: boolean | undefined;
         innerClasses?: string | undefined;
         outerClasses?: string | undefined;
     };
@@ -33,9 +32,6 @@ export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents,
     get closeOn(): (keyof HTMLElementEventMap)[] | undefined;
     /**accessor*/
     set closeOn(_: (keyof HTMLElementEventMap)[] | undefined);
-    get disableInstruction(): boolean | undefined;
-    /**accessor*/
-    set disableInstruction(_: boolean | undefined);
     get innerClasses(): string | undefined;
     /**accessor*/
     set innerClasses(_: string | undefined);

package/components/common/table/FlowRow.svelte

@@ -1,9 +1,11 @@
-<script>import Dropdown from '../../Dropdown.svelte';
+<script>import { goto } from '$app/navigation';
+import Dropdown from '../../Dropdown.svelte';
+import ScheduleEditor from '../../ScheduleEditor.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
 import { FlowService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../utils';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
@@ -11,6 +13,7 @@ export let flow;
 export let marked;
 export let starred;
 export let shareModal;
+export let moveDrawer;
 let { summary, path, extra_perms, canWrite, workspace_id } = flow;
 const dispatch = createEventDispatcher();
 async function archiveFlow(path) {
@@ -23,8 +26,10 @@ async function archiveFlow(path) {
         sendUserToast(`Could not archive this flow ${err.body}`, true);
     }
 }
+let scheduleEditor;
 </script>
 
+<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 <Row
 	href={`/flows/run/${path}`}
 	kind="flow"
@@ -113,18 +118,27 @@ async function archiveFlow(path) {
 					icon: faList,
 					href: `/runs/${path}`
 				},
+				{
+					displayName: 'Move',
+					icon: faFileExport,
+					action: () => {
+						moveDrawer.openDrawer(path, 'flow')
+					},
+					disabled: !canWrite
+				},
 				{
 					displayName: 'Schedule',
 					icon: faCalendarAlt,
-					href: `/schedule/add?path=${path}&isFlow=true`
+					action: () => {
+						scheduleEditor.openNew(true, path)
+					}
 				},
 				{
-					displayName: 'Share',
+					displayName: canWrite ? 'Share' : 'See Permissions',
 					icon: faShare,
 					action: () => {
-						shareModal.openDrawer && shareModal.openDrawer(path)
-					},
-					disabled: !canWrite
+						shareModal.openDrawer && shareModal.openDrawer(path, 'flow')
+					}
 				},
 				{
 					displayName: 'Archive',

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
 import { type Flow } from '../../../gen';
 declare const __propDef: {
@@ -9,6 +10,7 @@ declare const __propDef: {
         marked: string | undefined;
         starred: boolean;
         shareModal: ShareModal;
+        moveDrawer: MoveDrawer;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/table/ScriptRow.svelte

@@ -1,9 +1,11 @@
-<script>import Dropdown from '../../Dropdown.svelte';
+<script>import { goto } from '$app/navigation';
+import Dropdown from '../../Dropdown.svelte';
+import ScheduleEditor from '../../ScheduleEditor.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
 import { ScriptService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { capitalize, sendUserToast } from '../../../utils';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Badge from '../badge/Badge.svelte';
 import Button from '../button/Button.svelte';
@@ -13,6 +15,7 @@ export let script;
 export let marked;
 export let starred;
 export let shareModal;
+export let moveDrawer;
 let { summary, path, hash, language, extra_perms, canWrite, lock_error_logs, kind, workspace_id } = script;
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
@@ -20,8 +23,11 @@ async function archiveScript(path) {
     dispatch('change');
     sendUserToast(`Archived script ${path}`);
 }
+let scheduleEditor;
 </script>
 
+<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
+
 <Row
 	href={`/scripts/run/${hash}`}
 	kind="script"
@@ -122,6 +128,14 @@ async function archiveScript(path) {
 					icon: faCodeFork,
 					href: `/scripts/add?template=${path}`
 				},
+				{
+					displayName: 'Move',
+					icon: faFileExport,
+					action: () => {
+						moveDrawer.openDrawer(path, 'script')
+					},
+					disabled: !canWrite
+				},
 				{
 					displayName: 'View runs',
 					icon: faList,
@@ -130,15 +144,16 @@ async function archiveScript(path) {
 				{
 					displayName: 'Schedule',
 					icon: faCalendarAlt,
-					href: `/schedule/add?path=${path}`
+					action: () => {
+						scheduleEditor.openNew(false, path)
+					}
 				},
 				{
-					displayName: 'Share',
+					displayName: canWrite ? 'Share' : 'See Permissions',
 					icon: faShare,
 					action: () => {
-						shareModal.openDrawer && shareModal.openDrawer(path)
-					},
-					disabled: !canWrite
+						shareModal.openDrawer && shareModal.openDrawer(path, 'script')
+					}
 				},
 				{
 					displayName: 'Archive',

package/components/common/table/ScriptRow.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
 import { type Script } from '../../../gen';
 declare const __propDef: {
@@ -9,6 +10,7 @@ declare const __propDef: {
         marked: string | undefined;
         starred: boolean;
         shareModal: ShareModal;
+        moveDrawer: MoveDrawer;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/toggleButton/ToggleButton.svelte

@@ -16,7 +16,7 @@ const { select, selected } = getContext('ToggleButtonGroup');
 		position === 'center' ? 'rounded-none border-t border-b border-r' : '',
 		position === 'right' ? 'rounded-none rounded-r-md  border-r border-y' : ''
 	)}
-	color={$selected === value ? (light ? 'dark' : 'dark') : 'light'}
+	color={$selected === value ? (light ? 'gray' : 'dark') : 'light'}
 	variant="contained"
 >
 	<slot />

package/components/common/toggleButton/ToggleButtonGroup.svelte

@@ -21,6 +21,6 @@ setContext('ToggleButtonGroup', {
 });
 </script>
 
-<div class:flex-col={col} class="flex rounded-md" role="group">
+<div class:flex-col={col} class="flex rounded-md {$$props.class}" role="group">
 	<slot />
 </div>

package/components/common/toggleButton/ToggleButtonGroup.svelte.d.ts

@@ -6,6 +6,7 @@ export type ToggleButtonContext = {
 import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         selected: any;
         col?: boolean | undefined;
     };

package/components/flows/content/FlowEditorPanel.svelte

@@ -8,22 +8,16 @@ export let initialPath;
 const { selectedId } = getContext('FlowEditorContext');
 </script>
 
-{#key $selectedId}
-	{#if $selectedId === 'settings'}
-		<FlowSettings {initialPath} />
-	{:else if $selectedId === 'inputs'}
-		<FlowInput />
-	{:else if $selectedId === 'settings-schedule'}
-		<FlowSettings {initialPath} defaultTab="schedule" />
-	{:else if $selectedId === 'settings-same-worker'}
-		<FlowSettings {initialPath} defaultTab="same-worker" />
-	{:else if $selectedId === 'settings-graph'}
-		<FlowSettings {initialPath} defaultTab="graph" />
-	{:else if $selectedId === 'failure'}
-		<FlowFailureModule />
-	{:else}
+{#if $selectedId?.startsWith('settings')}
+	<FlowSettings {initialPath} />
+{:else if $selectedId === 'inputs'}
+	<FlowInput />
+{:else if $selectedId === 'failure'}
+	<FlowFailureModule />
+{:else}
+	{#key $selectedId}
 		{#each $flowStore.value.modules as flowModule, index (flowModule.id ?? index)}
 			<FlowModuleWrapper bind:flowModule previousModule={$flowStore.value.modules[index - 1]} />
 		{/each}
-	{/if}
-{/key}
+	{/key}
+{/if}

package/components/flows/content/FlowInputs.svelte

@@ -1,4 +1,4 @@
-<script>import { ToggleButton, ToggleButtonGroup } from '../../common';
+<script>import { Alert, ToggleButton, ToggleButtonGroup } from '../../common';
 import ToggleHubWorkspace from '../../ToggleHubWorkspace.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { RawScript, Script } from '../../../gen';
@@ -9,8 +9,15 @@ import PickHubScript from '../pickers/PickHubScript.svelte';
 import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte';
 export let failureModule;
 export let shouldDisableTriggerScripts = false;
+export let summary = undefined;
 const dispatch = createEventDispatcher();
-let kind = failureModule ? 'failure' : 'script';
+let kind = failureModule
+    ? 'failure'
+    : summary == 'Trigger'
+        ? 'trigger'
+        : summary == 'Approval'
+            ? 'approval'
+            : 'script';
 let pick_existing = 'hub';
 let filter = '';
 </script>
@@ -21,8 +28,8 @@ let filter = '';
 			<div class="max-w-min">
 				<ToggleButtonGroup bind:selected={kind}>
 					<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
-						Common &nbsp;<Tooltip>
-							A common script is simply a script that is neither a trigger nor an approval script.
+						Action &nbsp;<Tooltip>
+							An action script is simply a script that is neither a trigger nor an approval script.
 							Those are the majority of the scripts.
 						</Tooltip>
 					</ToggleButton>
@@ -47,6 +54,13 @@ let filter = '';
 			</div>
 		</div>
 	{/if}
+	{#if kind == 'trigger'}
+		<div class="mt-2" />
+		<Alert title="Trigger script automatic schedule" role="info">
+			A schedule will be automatically attached to this flow to run every 15 minutes. Adjust
+			frequency in 'Settings -> Schedule'</Alert
+		>
+	{/if}
 	<h3 class="pb-2 pt-4">
 		Inline new <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script
 		<Tooltip>

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         failureModule: boolean;
         shouldDisableTriggerScripts?: boolean | undefined;
+        summary?: string | undefined;
     };
     events: {
         pick: CustomEvent<any>;