windmill-components 1.89.0 → 1.103.0

package/dist/components/apps/editor/AppEditorHeader.svelte

@@ -1,623 +0,0 @@
-<script>import { goto } from '$app/navigation';
-import { page } from '$app/stores';
-import { Alert, Badge, Drawer, DrawerContent, UndoRedo } from '../../common';
-import Button from '../../common/button/Button.svelte';
-import { dirtyStore } from '../../common/confirmationModal/dirtyStore';
-import Skeleton from '../../common/skeleton/Skeleton.svelte';
-import ToggleButton from '../../common/toggleButton/ToggleButton.svelte';
-import ToggleButtonGroup from '../../common/toggleButton/ToggleButtonGroup.svelte';
-import DisplayResult from '../../DisplayResult.svelte';
-import Dropdown from '../../Dropdown.svelte';
-import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
-import FlowStatusViewer from '../../FlowStatusViewer.svelte';
-import JobArgs from '../../JobArgs.svelte';
-import LogViewer from '../../LogViewer.svelte';
-import Path from '../../Path.svelte';
-import TestJobLoader from '../../TestJobLoader.svelte';
-import Toggle from '../../Toggle.svelte';
-import Tooltip from '../../Tooltip.svelte';
-import { AppService, Job, Policy } from '../../../gen';
-import { redo, undo } from '../../../history';
-import { workspaceStore } from '../../../stores';
-import { faBug, faClipboard, faExternalLink, faFileExport, faSave } from '@fortawesome/free-solid-svg-icons';
-import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, Pencil, SlidersHorizontal, Smartphone, X } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { Icon } from 'svelte-awesome';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { classNames, copyToClipboard, sendUserToast } from '../../../utils';
-import { allItems, toStatic } from '../utils';
-import AppExportButton from './AppExportButton.svelte';
-import AppInputs from './AppInputs.svelte';
-import PanelSection from './settingsPanel/common/PanelSection.svelte';
-async function hash(message) {
-    const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
-    const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
-    const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
-    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
-    return hashHex;
-}
-export let policy;
-export let fromHub = false;
-const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppViewerContext');
-const { history } = getContext('AppEditorContext');
-const loading = {
-    publish: false,
-    save: false
-};
-$: if ($openDebugRun == undefined) {
-    $openDebugRun = (componentId) => {
-        jobsDrawerOpen = true;
-        const job = $jobs.find((job) => job.component === componentId);
-        if (job) {
-            selectedJobId = job.job;
-        }
-    };
-}
-let newPath = '';
-let pathError = undefined;
-let appExport;
-let saveDrawerOpen = false;
-let jobsDrawerOpen = false;
-let publishDrawerOpen = false;
-let inputsDrawerOpen = fromHub;
-function closeSaveDrawer() {
-    saveDrawerOpen = false;
-}
-function collectStaticFields(fields) {
-    return Object.fromEntries(Object.entries(fields ?? {})
-        .filter(([k, v]) => v.type == 'static')
-        .map(([k, v]) => {
-        return [k, v['value']];
-    }));
-}
-async function computeTriggerables() {
-    const allTriggers = await Promise.all(allItems($app.grid, $app.subgrids)
-        .flatMap((x) => {
-        let c = x.data;
-        let r = [c.componentInput];
-        if (c.type === 'tablecomponent') {
-            r.push(...c.actionButtons.map((x) => x.componentInput));
-        }
-        return r.filter((x) => x);
-    })
-        .map(async (input) => {
-        if (input?.type == 'runnable') {
-            const staticInputs = collectStaticFields(input.fields);
-            if (input.runnable?.type == 'runnableByName') {
-                let hex = await hash(input.runnable.inlineScript?.content);
-                return [`rawscript/${hex}`, staticInputs];
-            }
-            else if (input.runnable?.type == 'runnableByPath') {
-                let prefix = input.runnable.runType !== 'hubscript' ? input.runnable.runType : 'script';
-                return [`${prefix}/${input.runnable.path}`, staticInputs];
-            }
-        }
-        return [];
-    })
-        .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v) => {
-        let hex = await hash(v.inlineScript?.content);
-        const staticInputs = collectStaticFields(v.fields);
-        return [`rawscript/${hex}`, staticInputs];
-    })));
-    policy.triggerables = Object.fromEntries(allTriggers.filter((x) => x.length > 0));
-}
-async function createApp(path) {
-    await computeTriggerables();
-    try {
-        const appId = await AppService.createApp({
-            workspace: $workspaceStore,
-            requestBody: {
-                value: $app,
-                path,
-                summary: $summary,
-                policy
-            }
-        });
-        closeSaveDrawer();
-        goto(`/apps/edit/${appId}`);
-    }
-    catch (e) {
-        sendUserToast('Error creating app', e);
-    }
-}
-let secretUrl = undefined;
-$: secretUrl == undefined && policy.execution_mode == 'anonymous' && getSecretUrl();
-async function getSecretUrl() {
-    secretUrl = await AppService.getPublicSecretOfApp({
-        workspace: $workspaceStore,
-        path: appPath
-    });
-}
-async function setPublishState() {
-    await AppService.updateApp({
-        workspace: $workspaceStore,
-        path: appPath,
-        requestBody: { policy }
-    });
-    if (policy.execution_mode == 'anonymous') {
-        sendUserToast('App made visible publicly at the secret URL.');
-    }
-    else {
-        sendUserToast('App made unaccessible publicly');
-    }
-}
-async function save() {
-    $dirtyStore = false;
-    if ($page.params.path == undefined) {
-        saveDrawerOpen = true;
-        return;
-    }
-    loading.save = true;
-    try {
-        await computeTriggerables();
-        await AppService.updateApp({
-            workspace: $workspaceStore,
-            path: $page.params.path,
-            requestBody: {
-                value: $app,
-                summary: $summary,
-                policy
-            }
-        });
-        sendUserToast('App saved');
-        loading.save = false;
-    }
-    catch (e) {
-        loading.save = false;
-        throw e;
-    }
-}
-let selectedJobId = undefined;
-let testJobLoader;
-let job = undefined;
-let testIsLoading = false;
-$: selectedJobId && !selectedJobId?.includes('Frontend') && testJobLoader?.watchJob(selectedJobId);
-$: if (selectedJobId?.includes('Frontend') && selectedJobId) {
-    job = undefined;
-}
-$: hasErrors = Object.keys($errorByComponent).length > 0;
-let lock = false;
-function onKeyDown(event) {
-    if (lock)
-        return;
-    let classes = event.target?.['className'];
-    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
-        return;
-    }
-    lock = true;
-    switch (event.key) {
-        case 'Z':
-            if (event.ctrlKey || event.metaKey) {
-                $app = redo(history);
-                event.preventDefault();
-            }
-            break;
-        case 'z':
-            if (event.ctrlKey || event.metaKey) {
-                $app = undo(history, $app);
-                event.preventDefault();
-            }
-            break;
-        case 's':
-            if (event.ctrlKey || event.metaKey) {
-                save();
-                event.preventDefault();
-            }
-            break;
-        // case 'ArrowDown': {
-        // 	let ids = generateIds()
-        // 	let idx = ids.indexOf($selectedIdStore)
-        // 	if (idx > -1 && idx < ids.length - 1) {
-        // 		$selectedIdStore = ids[idx + 1]
-        // 		event.preventDefault()
-        // 	}
-        // 	break
-        // }
-        // case 'ArrowUp': {
-        // 	let ids = generateIds()
-        // 	let idx = ids.indexOf($selectedIdStore)
-        // 	if (idx > 0 && idx < ids.length) {
-        // 		$selectedIdStore = ids[idx - 1]
-        // 		event.preventDefault()
-        // 	}
-        // 	break
-        // }
-    }
-    lock = false;
-}
-</script>
-
-<svelte:window on:keydown={onKeyDown} />
-
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
-
-<Drawer bind:open={saveDrawerOpen} size="800px">
-	<DrawerContent title="Create an App" on:close={() => closeSaveDrawer()}>
-		<Path
-			bind:error={pathError}
-			bind:path={newPath}
-			initialPath=""
-			namePlaceholder="app"
-			kind="app"
-		/>
-
-		<div slot="actions">
-			<Button
-				startIcon={{ icon: faSave }}
-				disabled={pathError != ''}
-				on:click={() => createApp(newPath)}>Create app</Button
-			>
-		</div>
-	</DrawerContent>
-</Drawer>
-
-<Drawer bind:open={inputsDrawerOpen} size="600px">
-	<DrawerContent title="App inputs configuration" on:close={() => (inputsDrawerOpen = false)}>
-		<AppInputs />
-	</DrawerContent>
-</Drawer>
-
-<Drawer bind:open={jobsDrawerOpen} size="900px">
-	<DrawerContent noPadding title="Debug Runs" on:close={() => (jobsDrawerOpen = false)}>
-		<Splitpanes class="!overflow-visible">
-			<Pane size={25}>
-				<PanelSection title="Past Runs">
-					<div class="flex flex-col gap-2 w-full">
-						{#if $jobs.length > 0}
-							<div class="flex gap-2 flex-col">
-								{#each $jobs ?? [] as { job, component } (job)}
-									<!-- svelte-ignore a11y-click-events-have-key-events -->
-									<div
-										class={classNames(
-											'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-											$errorByComponent[job] ? 'border border-red-500 bg-red-100' : '',
-											selectedJobId == job && !$errorByComponent[component]
-												? 'bg-blue-100 text-blue-600'
-												: ''
-										)}
-										on:click={() => (selectedJobId = job)}
-									>
-										<span class="text-xs truncate">{job}</span>
-										<Badge color="dark-indigo">{component}</Badge>
-									</div>
-								{/each}
-							</div>
-						{:else}
-							<div class="text-sm text-gray-500">No items</div>
-						{/if}
-					</div>
-				</PanelSection>
-			</Pane>
-			<Pane size={75}>
-				<div class="h-full w-full overflow-auto">
-					{#if selectedJobId}
-						{#if !job}
-							{@const jobResult = $jobs.find((j) => j.job == selectedJobId)}
-
-							{#if jobResult?.error !== undefined}
-								<Splitpanes horizontal class="grow border w-full">
-									<Pane size={50} minSize={10}>
-										<LogViewer
-											content={`Logs are avaiable in the browser console directly`}
-											isLoading={false}
-										/>
-									</Pane>
-									<Pane size={50} minSize={10} class="text-sm text-gray-600">
-										<pre class="overflow-x-auto break-words relative h-full px-2">
-											<DisplayResult result={{ error: { name: 'Frontend execution error', message: jobResult.error } }} />
-										</pre>
-									</Pane>
-								</Splitpanes>
-							{:else if jobResult?.result !== undefined}
-								<Splitpanes horizontal class="grow border w-full">
-									<Pane size={50} minSize={10}>
-										<LogViewer
-											content={`Logs are avaiable in the browser console directly`}
-											isLoading={false}
-										/>
-									</Pane>
-									<Pane size={50} minSize={10} class="text-sm text-gray-600">
-										<pre class="overflow-x-auto break-words relative h-full px-2">
-											<DisplayResult result={jobResult.result} />
-										</pre>
-									</Pane>
-								</Splitpanes>
-							{:else}
-								<Skeleton layout={[[40]]} />
-							{/if}
-						{:else}
-							<div class="flex flex-col h-full w-full gap-4 p-2 mb-4">
-								{#if job?.['running']}
-									<div class="flex flex-row-reverse w-full">
-										<Button
-											color="red"
-											variant="border"
-											on:click={() => testJobLoader?.cancelJob()}
-										>
-											<Loader2 size={14} class="animate-spin mr-2" />
-
-											Cancel
-										</Button>
-									</div>
-								{/if}
-								<div class="p-2">
-									<JobArgs args={job?.args} />
-								</div>
-								{#if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview'}
-									<Splitpanes horizontal class="grow border w-full">
-										<Pane size={50} minSize={10}>
-											<LogViewer content={job?.logs} isLoading={testIsLoading} />
-										</Pane>
-										<Pane size={50} minSize={10} class="text-sm text-gray-600">
-											{#if job != undefined && 'result' in job && job.result != undefined}
-												<pre class="overflow-x-auto break-words relative h-full px-2"
-													><DisplayResult result={job.result} /></pre
-												>
-											{:else if testIsLoading}
-												<div class="p-2"><Loader2 class="animate-spin" /> </div>
-											{/if}
-										</Pane>
-									</Splitpanes>
-								{:else}
-									<div class="mt-10" />
-									<FlowProgressBar {job} class="py-4" />
-									<div class="w-full mt-10 mb-20">
-										<FlowStatusViewer
-											jobId={job.id}
-											on:jobsLoaded={({ detail }) => {
-												job = detail
-											}}
-										/>
-									</div>
-								{/if}
-							</div>
-						{/if}
-					{:else}
-						<div class="text-sm p-2 text-gray-500">Select a job to see its details</div>
-					{/if}
-				</div>
-			</Pane>
-		</Splitpanes>
-	</DrawerContent>
-</Drawer>
-
-<Drawer bind:open={publishDrawerOpen} size="800px">
-	<DrawerContent title="Publish an App" on:close={() => (publishDrawerOpen = false)}>
-		{#if appPath == ''}
-			<Alert title="Require saving" type="error">
-				Save this app once before you can publish it
-			</Alert>
-		{:else}
-			<Alert title="App executed on behalf of publisher">
-				A viewer of the app will execute the runnables of the app on behalf of the publisher
-				avoiding the risk that a resource or script would not be available to the viewer. To
-				guarantee tight security, a policy is computed at time of saving of the app which only allow
-				the scripts/flows referred to in the app to be called on behalf of. Furthermore, static
-				parameters are not overridable. Hence, users will only be able to use the app as intended by
-				the publisher without risk for leaking resources not used in the app.
-			</Alert>
-			<div class="mt-4" />
-			<Toggle
-				options={{
-					left: `Require read-access`,
-					right: `Publish publicly for anyone knowing the secret url`
-				}}
-				checked={policy.execution_mode == 'anonymous'}
-				on:change={(e) => {
-					policy.execution_mode = e.detail
-						? Policy.execution_mode.ANONYMOUS
-						: Policy.execution_mode.PUBLISHER
-					setPublishState()
-				}}
-			/>
-
-			{#if policy.execution_mode == 'anonymous' && secretUrl}
-				{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
-				{@const href = $page.url.protocol + '//' + url}
-				<div class="my-6 box">
-					Public url:
-					<a
-						on:click={(e) => {
-							e.preventDefault()
-							copyToClipboard(href)
-						}}
-						{href}
-						class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-					>
-						{url}
-						<span class="text-gray-700 ml-2">
-							<Icon data={faClipboard} />
-						</span>
-					</a>
-				</div>
-
-				<Alert type="info" title="Only show latest saved app">
-					Once made public, you will still need to save the app to make visible the latest changes
-				</Alert>
-			{/if}
-		{/if}
-
-		<div />
-	</DrawerContent>
-</Drawer>
-
-<div
-	class="border-b flex flex-row justify-between py-1 gap-4 gap-y-2 px-3 items-center overflow-y-visible"
->
-	<div class="min-w-64 w-64">
-		<input
-			type="text"
-			placeholder="App summary"
-			class="text-sm w-full font-semibold"
-			bind:value={$summary}
-		/>
-	</div>
-	<UndoRedo
-		undoProps={{ disabled: $history?.index === 0 }}
-		redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
-		on:undo={() => {
-			$app = undo(history, $app)
-		}}
-		on:redo={() => {
-			$app = redo(history)
-		}}
-	/>
-	<div class="flex gap-4 items-center grow justify-center">
-		<div>
-			<ToggleButtonGroup bind:selected={$mode}>
-				<ToggleButton position="left" value="dnd" size="xs">
-					<div class="inline-flex gap-1 items-center">
-						<Pencil size={14} />
-						<span class="hidden lg:inline">Editor</span>
-					</div>
-				</ToggleButton>
-				<ToggleButton position="right" value="preview" size="xs">
-					<div class="inline-flex gap-1 items-center">
-						<Eye size={14} /> <span class="hidden lg:inline">Preview</span>
-					</div>
-				</ToggleButton>
-			</ToggleButtonGroup>
-		</div>
-		<div>
-			<ToggleButtonGroup bind:selected={$breakpoint}>
-				<ToggleButton position="left" value="sm" size="xs">
-					<Smartphone size={14} />
-				</ToggleButton>
-				<ToggleButton position="right" value="lg" size="xs">
-					<Laptop2 size={14} />
-				</ToggleButton>
-			</ToggleButtonGroup>
-		</div>
-
-		<div class="hidden lg:block">
-			{#if $app}
-				<ToggleButtonGroup bind:selected={$app.fullscreen}>
-					<ToggleButton position="left" value={false} size="xs">
-						<div class="flex gap-1 justify-start items-center">
-							<AlignHorizontalSpaceAround size={14} />
-							<Tooltip light class="mb-0.5">
-								The max width is 1168px and the content stay centered instead of taking the full
-								page width
-							</Tooltip>
-						</div>
-					</ToggleButton>
-					<ToggleButton position="right" value={true} size="xs">
-						<Expand size={14} />
-					</ToggleButton>
-				</ToggleButtonGroup>
-			{/if}
-		</div>
-	</div>
-	{#if $focusedGrid !== undefined}
-		<div class="hidden lg:block">
-			<Badge color="indigo">
-				<div class="flex flex-row gap-2 justify-center items-center">
-					<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
-					<button
-						on:click={() => {
-							$selectedComponent = undefined
-							$focusedGrid = undefined
-						}}
-					>
-						<X size={14} />
-					</button>
-				</div>
-			</Badge>
-		</div>
-	{/if}
-
-	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
-		<Dropdown
-			placement="bottom-end"
-			btnClasses="hidden lg:block"
-			dropdownItems={[
-				{
-					displayName: 'JSON',
-					icon: faFileExport,
-					action: () => {
-						appExport.open($app)
-					}
-				},
-				// {
-				// 	displayName: 'Publish to Hub',
-				// 	icon: faGlobe,
-				// 	action: () => {
-				// 		const url = appToHubUrl(toStatic($app, $staticExporter, $summary))
-				// 		window.open(url.toString(), '_blank')
-				// 	}
-				// },
-				{
-					displayName: 'Hub compatible JSON',
-					icon: faFileExport,
-					action: () => {
-						appExport.open(toStatic($app, $staticExporter, $summary).app)
-					}
-				}
-			]}
-		/>
-		<span class="hidden md:inline">
-			<Button on:click={() => (inputsDrawerOpen = true)} color="light" size="xs" variant="border">
-				<span class="flex gap-2">
-					<SlidersHorizontal size={14} />
-					App inputs
-				</span>
-			</Button>
-		</span>
-		<span class="hidden md:inline">
-			<Button
-				on:click={() => {
-					if (selectedJobId == undefined && $jobs.length > 0) {
-						selectedJobId = $jobs[0].job
-					}
-					jobsDrawerOpen = true
-				}}
-				color={hasErrors ? 'red' : 'light'}
-				size="xs"
-				variant="border"
-				startIcon={{ icon: faBug }}
-			>
-				<span class="hidden xl:inline">Debug Runs</span>
-			</Button>
-		</span>
-		<AppExportButton bind:this={appExport} />
-		<Button
-			on:click={() => (publishDrawerOpen = true)}
-			color="light"
-			size="xs"
-			variant="border"
-			startIcon={{ icon: faExternalLink }}
-		>
-			<span class="hidden xl:inline">Publish</span>
-		</Button>
-		{#if appPath == ''}
-			<Button
-				loading={loading.save}
-				startIcon={{ icon: faSave }}
-				on:click={save}
-				color="dark"
-				size="xs"
-			>
-				<span class="hidden md:inline">Save</span>
-			</Button>
-		{:else}
-			<Button
-				loading={loading.save}
-				startIcon={{ icon: faSave }}
-				on:click={save}
-				color="dark"
-				size="xs"
-				dropdownItems={[
-					{
-						label: 'Fork',
-						onClick: () => {
-							window.open(`/apps/add?template=${appPath}`)
-						}
-					}
-				]}
-			>
-				Save
-			</Button>
-		{/if}
-	</div>
-</div>

package/dist/components/apps/editor/AppEditorHeader.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { Policy } from '../../../gen';
-declare const __propDef: {
-    props: {
-        policy: Policy;
-        fromHub?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppEditorHeaderProps = typeof __propDef.props;
-export type AppEditorHeaderEvents = typeof __propDef.events;
-export type AppEditorHeaderSlots = typeof __propDef.slots;
-export default class AppEditorHeader extends SvelteComponentTyped<AppEditorHeaderProps, AppEditorHeaderEvents, AppEditorHeaderSlots> {
-}
-export {};

package/dist/components/apps/editor/AppExportButton.svelte

@@ -1,32 +0,0 @@
-<script>import Drawer from '../../common/drawer/Drawer.svelte';
-import DrawerContent from '../../common/drawer/DrawerContent.svelte';
-import { copyToClipboard } from '../../../utils';
-import { faClipboard } from '@fortawesome/free-solid-svg-icons';
-import { Highlight } from 'svelte-highlight';
-import json from 'svelte-highlight/languages/json';
-import { Button } from '../../common';
-let jsonViewerDrawer;
-let app = undefined;
-export function open(app_l) {
-    app = app_l;
-    jsonViewerDrawer?.toggleDrawer();
-}
-</script>
-
-<Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
-		<div class="relative">
-			<Button
-				on:click={() => copyToClipboard(JSON.stringify(app, null, 4))}
-				color="dark"
-				variant="border"
-				size="sm"
-				startIcon={{ icon: faClipboard }}
-				btnClasses="absolute top-2 right-2"
-			>
-				Copy content
-			</Button>
-			<Highlight language={json} code={JSON.stringify(app ?? {}, null, 4)} />
-		</div>
-	</DrawerContent>
-</Drawer>

package/dist/components/apps/editor/AppExportButton.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { App } from '../types';
-declare const __propDef: {
-    props: {
-        open?: ((app_l: App) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppExportButtonProps = typeof __propDef.props;
-export type AppExportButtonEvents = typeof __propDef.events;
-export type AppExportButtonSlots = typeof __propDef.slots;
-export default class AppExportButton extends SvelteComponentTyped<AppExportButtonProps, AppExportButtonEvents, AppExportButtonSlots> {
-    get open(): (app_l: App) => void;
-}
-export {};