windmill-components 1.85.0 → 1.87.0

package/dist/components/VariableEditor.svelte

@@ -0,0 +1,230 @@
+<script>import { canWrite, isOwner, sendUserToast } from '../utils';
+import { VariableService } from '../gen';
+import Path from './Path.svelte';
+import { createEventDispatcher } from 'svelte';
+import { userStore, workspaceStore } from '../stores';
+import Required from './Required.svelte';
+import Tooltip from './Tooltip.svelte';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Alert from './common/alert/Alert.svelte';
+import autosize from 'svelte-autosize';
+import Toggle from './Toggle.svelte';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import SimpleEditor from './SimpleEditor.svelte';
+const dispatch = createEventDispatcher();
+let path = '';
+let variable = {
+    value: '',
+    is_secret: true,
+    description: ''
+};
+let valid = true;
+let drawer;
+let edit = false;
+let initialPath;
+let pathError = '';
+let can_write = true;
+export function initNew() {
+    variable = {
+        value: '',
+        is_secret: true,
+        description: ''
+    };
+    edit = false;
+    initialPath = '';
+    path = '';
+    can_write = true;
+    drawer.openDrawer();
+}
+export async function editVariable(edit_path) {
+    edit = true;
+    const getV = await VariableService.getVariable({
+        workspace: $workspaceStore ?? '',
+        path: edit_path,
+        decryptSecret: false
+    });
+    can_write =
+        getV.workspace_id == $workspaceStore &&
+            canWrite(edit_path, getV.extra_perms ?? {}, $userStore);
+    variable = {
+        value: getV.value ?? '',
+        is_secret: getV.is_secret,
+        description: getV.description ?? ''
+    };
+    initialPath = edit_path;
+    path = edit_path;
+    drawer.openDrawer();
+}
+export async function loadVariable(path) {
+    const getV = await VariableService.getVariable({
+        workspace: $workspaceStore ?? '',
+        path,
+        decryptSecret: true
+    });
+    variable.value = getV.value ?? '';
+    editor?.setCode(variable.value);
+}
+const MAX_VARIABLE_LENGTH = 10000;
+$: valid = variable.value.length <= MAX_VARIABLE_LENGTH;
+async function createVariable() {
+    await VariableService.createVariable({
+        workspace: $workspaceStore,
+        requestBody: {
+            path,
+            value: variable.value,
+            is_secret: variable.is_secret,
+            description: variable.description
+        }
+    });
+    sendUserToast(`Created variable ${path}`);
+    dispatch('create');
+    drawer.closeDrawer();
+}
+async function updateVariable() {
+    try {
+        const getV = await VariableService.getVariable({
+            workspace: $workspaceStore ?? '',
+            path: initialPath,
+            decryptSecret: false
+        });
+        await VariableService.updateVariable({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path: getV.path != path ? path : undefined,
+                value: variable.value == '' ? undefined : variable.value,
+                is_secret: getV.is_secret != variable.is_secret ? variable.is_secret : undefined,
+                description: getV.description != variable.description ? variable.description : undefined
+            }
+        });
+        sendUserToast(`Updated variable ${initialPath}`);
+        dispatch('create');
+        drawer.closeDrawer();
+    }
+    catch (err) {
+        sendUserToast(`Could not update variable: ${err.body}`, true);
+    }
+}
+let editorKind = 'plain';
+let editor = undefined;
+</script>
+
+<Drawer bind:this={drawer} size="900px">
+	<DrawerContent
+		title={edit ? `Update variable at ${initialPath}` : 'Add a variable'}
+		on:close={drawer.closeDrawer}
+	>
+		<div class="flex flex-col gap-6">
+			<div>
+				<div>
+					{#if !can_write}
+						<div class="m-2">
+							<Alert type="warning" title="Only read access"
+								>You only have read access to this resource and cannot edit it</Alert
+							>
+						</div>
+					{/if}
+					<span class="font-semibold text-gray-700">Path</span>
+					<Path
+						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+						bind:error={pathError}
+						bind:path
+						{initialPath}
+						namePlaceholder="variable"
+						kind="variable"
+					/>
+				</div>
+				<div class="mt-4">
+					<Toggle bind:checked={variable.is_secret} options={{ right: 'Secret' }} />
+					<div class="mb-2" />
+					{#if variable.is_secret}
+						<Alert type="warning" title="Audit log for each access">
+							Every secret is encrypted at rest and in transit with a key specific to this
+							workspace. In addition, any read of a secret variable generates an audit log whose
+							operation name is: variables.decrypt_secret
+						</Alert>
+					{/if}
+				</div>
+			</div>
+
+			<div>
+				<div class="mb-1">
+					<span class="font-semibold text-gray-700">Variable value</span>
+					<span class="text-sm text-gray-500 mr-4"
+						>({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)</span
+					>
+					{#if edit && variable.is_secret}<Button
+							variant="border"
+							size="xs"
+							on:click={() => loadVariable(initialPath)}
+							>Load secret value<Tooltip>Will generate an audit log</Tooltip></Button
+						>{/if}
+				</div>
+				<div class="flex flex-row">
+					{#if editorKind == 'plain'}
+						<textarea
+							disabled={!can_write}
+							rows="4"
+							type="text"
+							use:autosize
+							bind:value={variable.value}
+							placeholder="Update variable value"
+						/>
+					{:else if editorKind == 'json'}
+						<div class="border rounded mb-4 w-full border-gray-700">
+							<SimpleEditor
+								bind:this={editor}
+								autoHeight
+								lang="json"
+								bind:code={variable.value}
+								fixedOverflowWidgets={false}
+							/>
+						</div>
+					{:else if editorKind == 'yaml'}
+						<div class="border rounded mb-4 w-full border-gray-700">
+							<SimpleEditor
+								bind:this={editor}
+								autoHeight
+								lang="yaml"
+								bind:code={variable.value}
+								fixedOverflowWidgets={false}
+							/>
+						</div>
+					{/if}
+
+					<ToggleButtonGroup col bind:selected={editorKind}>
+						<ToggleButton light position="center" value="plain" size="xs">Plain</ToggleButton>
+						<ToggleButton light position="center" value="json" size="xs">Json</ToggleButton>
+						<ToggleButton light position="center" value="yaml" size="xs">YAML</ToggleButton>
+					</ToggleButtonGroup>
+				</div>
+			</div>
+			<!-- {/if} -->
+
+			<div>
+				<div class="mb-1 font-semibold text-gray-700">
+					Description
+					<Required required={false} />
+				</div>
+				<textarea
+					rows="4"
+					type="text"
+					use:autosize
+					bind:value={variable.description}
+					placeholder="Used for X"
+				/>
+			</div>
+		</div>
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={() => (edit ? updateVariable() : createVariable())}
+				disabled={!can_write || !valid || pathError != ''}
+				startIcon={{ icon: faSave }}
+			>
+				{edit ? 'Update' : 'Save'}
+			</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/dist/components/apps/components/buttons/AppButton.svelte

@@ -0,0 +1,130 @@
+<script>import { Button } from '../../../common';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { loadIcon } from '../icon';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let recomputeIds = undefined;
+export let extraQueryParams = {};
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let noWFull = false;
+export let preclickAction = undefined;
+export let customCss = undefined;
+export let render;
+export let initializing = false;
+export let extraKey = undefined;
+export let controls = undefined;
+const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['buttoncomponent'].initialData.configuration, configuration);
+$: initializing = resolvedConfig?.label == undefined;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+if (controls) {
+    $componentControl[id] = controls;
+}
+let runnableComponent;
+let beforeIconComponent;
+let afterIconComponent;
+$: resolvedConfig.beforeIcon && handleBeforeIcon();
+$: resolvedConfig.afterIcon && handleAfterIcon();
+async function handleBeforeIcon() {
+    if (resolvedConfig.beforeIcon) {
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
+    }
+}
+async function handleAfterIcon() {
+    if (resolvedConfig.afterIcon) {
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
+    }
+}
+let errors = {};
+$: errorsMessage = Object.values(errors)
+    .filter((x) => x != '')
+    .join('\n');
+let runnableWrapper;
+async function handleClick(event) {
+    event?.stopPropagation();
+    event?.preventDefault();
+    $selectedComponent = [id];
+    if (preclickAction) {
+        await preclickAction();
+    }
+    if (!runnableComponent) {
+        runnableWrapper.onSuccess();
+    }
+    else {
+        await runnableComponent?.runComponent();
+    }
+}
+let loading = false;
+</script>
+
+{#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<!-- gotoNewTab={resolvedConfig.onSuccess.selected == 'goto'} -->
+
+<RunnableWrapper
+	bind:this={runnableWrapper}
+	{recomputeIds}
+	bind:runnableComponent
+	bind:loading
+	{componentInput}
+	doOnSuccess={resolvedConfig.onSuccess}
+	{id}
+	{extraQueryParams}
+	autoRefresh={false}
+	{render}
+	{outputs}
+	{extraKey}
+	refreshOnStart={resolvedConfig.triggerOnAppLoad}
+>
+	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		{#if errorsMessage}
+			<div class="text-red-500 text-xs">{errorsMessage}</div>
+		{/if}
+		<Button
+			on:pointerdown={(e) => e.stopPropagation()}
+			btnClasses={twMerge(
+				$app.css?.['buttoncomponent']?.['button']?.class,
+				customCss?.button?.class,
+				resolvedConfig.fillContainer ? 'w-full h-full' : ''
+			)}
+			wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
+			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
+			disabled={resolvedConfig.disabled}
+			on:click={handleClick}
+			size={resolvedConfig.size}
+			color={resolvedConfig.color}
+			{loading}
+		>
+			<span class="truncate inline-flex gap-2 items-center">
+				{#if resolvedConfig.beforeIcon && beforeIconComponent}
+					<svelte:component this={beforeIconComponent} size={14} />
+				{/if}
+				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+					<div>{resolvedConfig.label}</div>
+				{/if}
+				{#if resolvedConfig.afterIcon && afterIconComponent}
+					<svelte:component this={afterIconComponent} size={14} />
+				{/if}
+			</span>
+		</Button>
+	</AlignWrapper>
+</RunnableWrapper>

package/dist/components/apps/components/display/AppHtml.svelte

@@ -0,0 +1,59 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent, mode } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let result = undefined;
+let h = undefined;
+let w = undefined;
+$: css = concatCustomCss($app.css?.htmlcomponent, customCss);
+</script>
+
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class="h-full w-full"
+	bind:clientHeight={h}
+	bind:clientWidth={w}
+>
+	{#if $mode == 'dnd'}
+		<button
+			class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
+			on:click={() => ($selectedComponent = [id])}>Select</button
+		>
+	{/if}
+
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
+		{#key result}
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
+				class="p-0 {css?.container?.class ?? ''}"
+				title="sandbox"
+				srcdoc={result
+					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result
+					: ''}
+			/>
+		{/key}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
+	</RunnableWrapper>
+</div>

package/dist/components/apps/components/display/AppIcon.svelte

@@ -0,0 +1,52 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import { AlignWrapper, InputValue } from '../helpers';
+import { loadIcon } from '../icon';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let horizontalAlignment = 'left';
+export let verticalAlignment = undefined;
+export let configuration;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+let icon = undefined;
+let size;
+let color;
+let strokeWidth;
+let iconComponent;
+$: handleIcon(icon);
+async function handleIcon(i) {
+    iconComponent = i ? await loadIcon(i) : undefined;
+}
+$: css = concatCustomCss($app.css?.iconcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.icon} bind:value={icon} />
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />
+
+<InitializeComponent {id} />
+
+<AlignWrapper
+	{render}
+	{horizontalAlignment}
+	{verticalAlignment}
+	class={css?.container?.class ?? ''}
+	style={css?.container?.style ?? ''}
+>
+	{#if icon && iconComponent}
+		<svelte:component
+			this={iconComponent}
+			size={size || 24}
+			color={color || 'currentColor'}
+			strokeWidth={strokeWidth || 2}
+			class={css?.icon?.class ?? ''}
+			style={css?.icon?.style ?? ''}
+		/>
+	{/if}
+</AlignWrapper>

package/dist/components/apps/components/display/AppImage.svelte

@@ -0,0 +1,49 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import { concatCustomCss } from '../../utils';
+import Loader from '../helpers/Loader.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+let resolvedConfig = initConfig(components['imagecomponent'].initialData.configuration, configuration);
+const { app, worldStore } = getContext('AppViewerContext');
+const fit = {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill'
+};
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+$: css = concatCustomCss($app.css?.imagecomponent, customCss);
+</script>
+
+<InitializeComponent {id} />
+
+{#each Object.keys(components['imagecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#if render}
+	<Loader loading={resolvedConfig.source == undefined}>
+		<img
+			on:pointerdown|preventDefault
+			src={resolvedConfig.source}
+			alt={resolvedConfig.altText}
+			style={css?.image?.style ?? ''}
+			class={twMerge(
+				`w-full h-full ${fit[resolvedConfig.imageFit || 'cover']}`,
+				css?.image?.class ?? ''
+			)}
+		/>
+	</Loader>
+{/if}