windmill-components 1.52.0 → 1.55.1

package/components/flows/CreateActionsFlow.svelte

@@ -1,66 +1,39 @@
 <script>import { goto } from '$app/navigation';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import Fuse from 'fuse.js';
-import { loadHubFlows } from '../../utils';
+import { faBarsStaggered, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { Button, ButtonPopup, ButtonPopupItem } from '../common';
-import ItemPicker from '../ItemPicker.svelte';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
 import { flowStore, initFlow } from './flowStore';
-let hubFlows = undefined;
-const drawers = {
-    hub: undefined,
-    json: undefined
-};
+import { Icon } from 'svelte-awesome';
+let drawer = undefined;
 let pendingJson;
-let hubFilter = '';
-const flowHubFuse = new Fuse([], {
-    includeScore: false,
-    keys: ['summary']
-});
-$: filteredHubFlows =
-    hubFilter.length > 0 ? flowHubFuse.search(hubFilter).map((value) => value.item) : hubFlows ?? [];
 async function importJson() {
     await goto('/flows/add');
     Object.assign($flowStore, JSON.parse(pendingJson));
     initFlow($flowStore);
-    drawers.json?.closeDrawer();
-}
-async function loadHubFlowsWFuse() {
-    hubFlows = await loadHubFlows();
-    flowHubFuse.setCollection(hubFlows ?? []);
+    drawer?.closeDrawer?.();
 }
 </script>
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/flows/add">
-		<svelte:fragment slot="main">New Flow</svelte:fragment>
-		<ButtonPopupItem on:click={() => drawers.json?.toggleDrawer()}>
+		<svelte:fragment slot="main"
+			>New Flow <Icon data={faBarsStaggered} scale={0.8} class="ml-1.5" />
+		</svelte:fragment>
+		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from raw JSON
 		</ButtonPopupItem>
 	</ButtonPopup>
 </div>
 
-<!-- WindmillHub script list -->
-<ItemPicker
-	bind:this={drawers.hub}
-	pickCallback={(path) => {
-		goto('/flows/add?hub=' + path)
-	}}
-	itemName={'Flow'}
-	extraField="summary"
-	loadItems={async () => {
-		await loadHubFlowsWFuse()
-		return filteredHubFlows.map((x) => ({ ...x, path: x.flow_id }))
-	}}
-/>
-
 <!-- Raw JSON -->
-<Drawer bind:this={drawers.json} size="800px">
-	<DrawerContent title="Import flow from JSON" on:close={() => drawers.json?.toggleDrawer()}>
-		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
-		<span slot="submission"><Button size="sm" on:click={importJson}>Import</Button></span>
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Import flow from JSON" on:close={() => drawer?.toggleDrawer?.()}>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" fixedOverflowWidgets={false} />
+		<svelte:fragment slot="actions">
+			<Button size="sm" on:click={importJson}>Import</Button>
+		</svelte:fragment>
 	</DrawerContent>
 </Drawer>

package/components/flows/CreateActionsFlow.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/common/FlowCardHeader.svelte

@@ -1,10 +1,9 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import IconedPath from '../../IconedPath.svelte';
 import { RawScript } from '../../../gen';
-import { isEmptyFlowModule } from '../utils';
+import { truncateHash } from '../../../utils';
 export let flowModule = undefined;
 export let title = undefined;
-$: shouldPick = flowModule && isEmptyFlowModule(flowModule);
 const languageColors = {
     [RawScript.language.GO]: 'dark-indigo',
     [RawScript.language.DENO]: 'dark-blue',
@@ -17,18 +16,18 @@ const languageColors = {
 	class="flex items-center justify-between py-2 px-4 border-b border-gray-300 space-x-2  h-full max-h-12 flex-nowrap"
 >
 	{#if flowModule}
-		<span class="text-sm w-full">
+		<span class="text-sm w-full mr-4">
 			<div class="flex items-center space-x-2">
-				{#if shouldPick}
-					<span class="font-bold text-xs">Select a step kind</span>
+				{#if flowModule.value.type === 'identity'}
+					<span class="font-bold text-xs">Identity (input copied to output)</span>
 				{:else if flowModule?.value.type === 'rawscript'}
 					<Badge color={languageColors[flowModule?.value.language] ?? 'gray'} capitalize>
 						{flowModule?.value.language}
 					</Badge>
-					<input bind:value={flowModule.summary} placeholder={'Summary'} />
+					<input bind:value={flowModule.summary} placeholder={'Summary'} class="w-full grow" />
 				{:else if flowModule?.value.type === 'script' && 'path' in flowModule.value && flowModule.value.path}
-					<IconedPath path={flowModule.value.path} />
-					<input bind:value={flowModule.summary} placeholder="Summary" class="ml-2" />
+					<IconedPath path={flowModule.value.path} hash={flowModule.value.hash} class="grow" />
+					<input bind:value={flowModule.summary} placeholder="Summary" class="w-full grow" />
 				{/if}
 			</div>
 		</span>

package/components/flows/content/BranchPredicateEditor.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from 'svelte';
+import { flowStore } from '../flowStore';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import { flowStateStore } from '../flowState';
+import { getStepPropPicker } from '../previousResults';
+export let branch;
+export let parentModule;
+export let previousModule;
+const { previewArgs } = getContext('FlowEditorContext');
+let editor = undefined;
+$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, $previewArgs, false, true);
+</script>
+
+<PropPickerWrapper
+	notSelectable
+	pickableProperties={stepPropPicker.pickableProperties}
+	on:select={({ detail }) => {
+		editor?.insertAtCursor(detail)
+	}}
+>
+	<SimpleEditor
+		bind:this={editor}
+		lang="javascript"
+		bind:code={branch.expr}
+		class="small-editor"
+		shouldBindKey={false}
+		extraLib={stepPropPicker.extraLib}
+	/>
+</PropPickerWrapper>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        branch: {
+            summary?: string;
+            expr: string;
+            modules: Array<FlowModule>;
+        };
+        parentModule: FlowModule;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BranchPredicateEditorProps = typeof __propDef.props;
+export type BranchPredicateEditorEvents = typeof __propDef.events;
+export type BranchPredicateEditorSlots = typeof __propDef.slots;
+export default class BranchPredicateEditor extends SvelteComponentTyped<BranchPredicateEditorProps, BranchPredicateEditorEvents, BranchPredicateEditorSlots> {
+}
+export {};

package/components/flows/content/CapturePayload.svelte

@@ -84,24 +84,28 @@ async function getCaptureInput() {
 		<div class="box p-2 my-2  mb-4">
 			<ObjectViewer topBrackets={true} json={captureInput} />
 		</div>
-		<div class="flex flex-row-reverse gap-2" slot="submission">
+		<svelte:fragment slot="actions">
 			<Button
 				size="sm"
+				variant="border"
 				on:click={() => {
 					$previewArgs = captureInput
-					$flowStore.schema = jsonSchema
-					sendUserToast('Copied as flow inputs and test args')
-				}}>Copy as flow inputs and test args</Button
+					sendUserToast('Copied as test args')
+				}}
 			>
+				Copy only as test args
+			</Button>
 			<Button
 				size="sm"
-				variant="border"
 				on:click={() => {
 					$previewArgs = captureInput
-					sendUserToast('Copied as test args')
-				}}>Copy only as test args</Button
+					$flowStore.schema = jsonSchema
+					sendUserToast('Copied as flow inputs and test args')
+				}}
 			>
-		</div>
+				Copy as flow inputs and test args
+			</Button>
+		</svelte:fragment>
 		<h3 class="mt-2">Derived inputs schema</h3>
 		<div class="box p-2">
 			<SchemaViewer schema={jsonSchema} />

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowBranchAllWrapper.svelte

@@ -9,11 +9,11 @@ export let branch;
 			<input bind:value={branch.summary} placeholder={'Summary'} />
 		</div>
 		<div class="p-4">
-			<div class="mt-6 mb-2 text-sm font-bold">Skip failures</div>
+			<div class="mt-2 mb-2 text-sm font-bold">Skip failures</div>
 			<Toggle
 				bind:checked={branch.skip_failure}
 				options={{
-					right: 'Skip failure'
+					right: 'Skip failures'
 				}}
 			/>
 		</div>

package/components/flows/content/FlowBranchOneWrapper.svelte

@@ -1,17 +1,8 @@
-<script>import { getContext } from 'svelte';
-import FlowCard from '../common/FlowCard.svelte';
-import { flowStore } from '../flowStore';
-import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
-import SimpleEditor from '../../SimpleEditor.svelte';
-import { flowStateStore } from '../flowState';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { getStepPropPicker } from '../previousResults';
+<script>import FlowCard from '../common/FlowCard.svelte';
+import BranchPredicateEditor from './BranchPredicateEditor.svelte';
 export let branch;
 export let parentModule;
 export let previousModule;
-const { previewArgs } = getContext('FlowEditorContext');
-let editor = undefined;
-$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, $previewArgs, false, true);
 </script>
 
 <div class="h-full flex flex-col">
@@ -20,31 +11,8 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 			<input bind:value={branch.summary} placeholder={'Summary'} />
 		</div>
 		<div class="overflow-hidden flex-grow">
-			<Splitpanes>
-				<Pane>
-					<div class="p-6 flex flex-col h-full overflow-clip">
-						<span class="mb-2 text-sm font-bold">Branch predicate</span>
-						<div class="border w-full">
-							<PropPickerWrapper
-								notSelectable
-								pickableProperties={stepPropPicker.pickableProperties}
-								on:select={({ detail }) => {
-									editor?.insertAtCursor(detail)
-								}}
-							>
-								<SimpleEditor
-									bind:this={editor}
-									lang="javascript"
-									bind:code={branch.expr}
-									class="small-editor"
-									shouldBindKey={false}
-									extraLib={stepPropPicker.extraLib}
-								/>
-							</PropPickerWrapper>
-						</div>
-					</div>
-				</Pane>
-			</Splitpanes>
+			<h3 class="p-2">Predicate expression</h3>
+			<BranchPredicateEditor {branch} {parentModule} {previousModule} />
 		</div>
 	</FlowCard>
 </div>

package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -0,0 +1,91 @@
+<script>import { Alert, Badge, Button, Tab } from '../../common';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import Toggle from '../../Toggle.svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSleep from './FlowModuleSleep.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+// import FlowRetries from './FlowRetries.svelte'
+export let flowModule;
+export let previousModule;
+let value = flowModule.value;
+$: value = flowModule.value;
+let selected = 'early-stop';
+</script>
+
+<div class="h-full flex flex-col w-full">
+	<FlowCard title={value.type == 'branchall' ? 'Run all branches' : 'Run one branch'}>
+		<div class="flex flex-col h-full w-full">
+			<div class="border w-full">
+				<Alert notRounded type="info" title="All branches will be run">
+					The result of this step is the list of the result of each branch.
+				</Alert>
+
+				<div class="p-4 mt-4 w-full">
+					<h3 class="mb-4">{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
+					>
+					<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
+						{#each value.branches as branch, i}
+							<div class="flex flex-row gap-x-4 w-full">
+								<div class="grow">
+									<input type="text" bind:value={branch.summary} placeholder="Summary" />
+								</div>
+								<div class="w-min-sm">
+									<Toggle
+										bind:checked={branch.skip_failure}
+										options={{
+											right: 'Skip failure'
+										}}
+									/>
+								</div>
+							</div>
+						{/each}
+					</div>
+					<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
+					<Toggle
+						bind:checked={value.parallel}
+						options={{
+							right: 'All branches run in parallel'
+						}}
+					/>
+				</div>
+			</div>
+			{#if flowModule}
+				<Tabs bind:selected>
+					<!-- <Tab value="retries">Retries</Tab> -->
+					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="suspend">Suspend</Tab>
+					<Tab value="sleep">Sleep</Tab>
+
+					<svelte:fragment slot="content">
+						<div class="overflow-hidden bg-white">
+							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowRetries bind:flowModule />
+								</div>
+							</TabContent> -->
+
+							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleEarlyStop bind:flowModule />
+								</div>
+							</TabContent>
+
+							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSuspend bind:flowModule />
+								</div>
+							</TabContent>
+							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+								</div>
+							</TabContent>
+						</div>
+					</svelte:fragment>
+				</Tabs>
+			{/if}
+		</div>
+	</FlowCard>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowBranchesAllWrapperProps = typeof __propDef.props;
+export type FlowBranchesAllWrapperEvents = typeof __propDef.events;
+export type FlowBranchesAllWrapperSlots = typeof __propDef.slots;
+export default class FlowBranchesAllWrapper extends SvelteComponentTyped<FlowBranchesAllWrapperProps, FlowBranchesAllWrapperEvents, FlowBranchesAllWrapperSlots> {
+}
+export {};

package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -0,0 +1,88 @@
+<script>import { Alert, Badge, Button, Tab } from '../../common';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import BranchPredicateEditor from './BranchPredicateEditor.svelte';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSleep from './FlowModuleSleep.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+// import FlowRetries from './FlowRetries.svelte'
+export let flowModule;
+export let previousModule;
+let value = flowModule.value;
+$: value = flowModule.value;
+let selected = 'early-stop';
+</script>
+
+<div class="h-full">
+	<FlowCard title="Run one branch">
+		<div class="flex flex-col h-full overflow-auto">
+			<div class="border">
+				<Alert notRounded type="info" title="Only one branch will be run">
+					The result of this step is the result of the branch.
+				</Alert>
+
+				<div class="p-2">
+					<h3 class="my-4"
+						>{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}</h3
+					>
+					<div class="flex flex-col gap-y-4 py-2">
+						<div class="flex flex-row gap-2 text-sm border border-gray-400 p-2">
+							<Badge large={true} color="blue">Default branch</Badge>
+							<p class="italic text-gray-600"
+								>If none of the predicates' expressions evaluated in-order match, this branch is
+								chosen</p
+							>
+						</div>
+						{#each value.branches as branch, i}
+							<div class="flex flex-col gap-x-2 p-2 items-center border border-gray-400">
+								<input
+									class="w-full"
+									type="text"
+									bind:value={branch.summary}
+									placeholder="Summary"
+								/>
+								<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+			{#if flowModule}
+				<Tabs bind:selected>
+					<!-- <Tab value="retries">Retries</Tab> -->
+					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="suspend">Suspend</Tab>
+					<Tab value="sleep">Sleep</Tab>
+
+					<svelte:fragment slot="content">
+						<div class="overflow-hidden bg-white">
+							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowRetries bind:flowModule />
+								</div>
+							</TabContent> -->
+
+							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleEarlyStop bind:flowModule />
+								</div>
+							</TabContent>
+
+							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSuspend bind:flowModule />
+								</div>
+							</TabContent>
+							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+								</div>
+							</TabContent>
+						</div>
+					</svelte:fragment>
+				</Tabs>
+			{/if}
+		</div>
+	</FlowCard>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowBranchesOneWrapperProps = typeof __propDef.props;
+export type FlowBranchesOneWrapperEvents = typeof __propDef.events;
+export type FlowBranchesOneWrapperSlots = typeof __propDef.slots;
+export default class FlowBranchesOneWrapper extends SvelteComponentTyped<FlowBranchesOneWrapperProps, FlowBranchesOneWrapperEvents, FlowBranchesOneWrapperSlots> {
+}
+export {};

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowInput.svelte

@@ -3,7 +3,6 @@ import SchemaEditor from '../../SchemaEditor.svelte';
 import SchemaForm from '../../SchemaForm.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import { copyFirstStepSchema, flowStore } from '../flowStore';
-import { isEmptyFlowModule } from '../utils';
 import CapturePayload from './CapturePayload.svelte';
 let capturePayload;
 </script>
@@ -26,7 +25,7 @@ let capturePayload;
 				color="dark"
 				size="sm"
 				disabled={$flowStore.value.modules.length === 0 ||
-					isEmptyFlowModule($flowStore.value.modules[0])}
+					$flowStore.value.modules[0].value.type == 'identity'}
 				on:click={copyFirstStepSchema}
 			>
 				First step's inputs

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowInputs.svelte

@@ -1,8 +1,8 @@
 <script>import { ToggleButton, ToggleButtonGroup } from '../../common';
-import WindmillIcon from '../../icons/WindmillIcon.svelte';
+import ToggleHubWorkspace from '../../ToggleHubWorkspace.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { RawScript, Script } from '../../../gen';
-import { faBolt, faBuilding, faCheck, faCode } from '@fortawesome/free-solid-svg-icons';
+import { faBolt, faCheck, faCode } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
@@ -21,11 +21,14 @@ let filter = '';
 			<div class="max-w-min">
 				<ToggleButtonGroup bind:selected={kind}>
 					<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
-						Common
+						Common &nbsp;<Tooltip>
+							A common script is simply a script that is neither a trigger nor an approval script.
+							Those are the majority of the scripts.
+						</Tooltip>
 					</ToggleButton>
 					{#if !shouldDisableTriggerScripts}
 						<ToggleButton position="center" value="trigger" size="sm" startIcon={{ icon: faBolt }}>
-							Trigger <Tooltip>
+							Trigger &nbsp;<Tooltip>
 								Used as a first step most commonly with a state and a schedule to watch for changes
 								on an external system, compute the diff since last time, set the new state. The
 								diffs are then treated one by one with a for-loop.
@@ -33,22 +36,22 @@ let filter = '';
 						</ToggleButton>
 					{/if}
 					<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-						Approval <Tooltip>
+						Approval &nbsp;<Tooltip>
 							An approval step will suspend the execution of a flow until it has been approved
 							through the resume endpoints or the approval page by and solely by the recipients of
-							those secret urls. Use getResumeEndpoints from the wmill client to generate those
-							URLs.
+							those secret urls. Use `wmill.getResumeUrls()` in Typescript or
+							`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
 						</Tooltip>
 					</ToggleButton>
 				</ToggleButtonGroup>
 			</div>
 		</div>
 	{/if}
-	<h3 class="pb-2">
-		Inline new
+	<h3 class="pb-2 pt-4">
+		Inline new <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script
 		<Tooltip>
 			Embed a script directly inside a flow instead of saving the script into your workspace for
-			reuse. You can always save an inline script later.
+			reuse. You can always save an inline script to your workspace later.
 		</Tooltip>
 	</h3>
 	<div class="flex flex-row">
@@ -111,29 +114,28 @@ let filter = '';
 						on:click={() =>
 							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
 					/>
+
+					<FlowScriptPicker
+						label={`MySQL`}
+						lang="mysql"
+						on:click={() =>
+							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
+					/>
 				{/if}
 			{/if}
 		</div>
 	</div>
 
-	<div class="flex flex-row gap-x-2 mt-8 mb-2"
-		><h3>Use pre-made</h3>
-		<div class="max-w-min">
-			<ToggleButtonGroup bind:selected={pick_existing}>
-				<ToggleButton position="left" value="hub" size="xs">
-					<WindmillIcon white={pick_existing == 'hub'} height="16px" width="16px" /><div
-						class="mr-1"
-					/>Hub
-				</ToggleButton>
-				<ToggleButton position="right" value="workspace" size="xs" startIcon={{ icon: faBuilding }}>
-					Workspace
-				</ToggleButton>
-			</ToggleButtonGroup>
-		</div></div
+	<h3 class="mb-2 mt-6"
+		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script</h3
 	>
 	{#if pick_existing == 'hub'}
-		<PickHubScript bind:filter {kind} on:pick />
+		<PickHubScript bind:filter {kind} on:pick>
+			<ToggleHubWorkspace bind:selected={pick_existing} />
+		</PickHubScript>
 	{:else}
-		<WorkspaceScriptPicker bind:filter {kind} on:pick />
+		<WorkspaceScriptPicker displayLock bind:filter {kind} on:pick>
+			<ToggleHubWorkspace bind:selected={pick_existing} />
+		</WorkspaceScriptPicker>
 	{/if}
 </div>