windmill-components 1.46.3 → 1.52.0

package/components/VariableEditor.svelte

@@ -1,16 +1,18 @@
-<script>import { sendUserToast } from '../utils';
+<script>import { canWrite, sendUserToast } from '../utils';
 import { VariableService } from '../gen';
 import Path from './Path.svelte';
 import { createEventDispatcher } from 'svelte';
-import { workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import Required from './Required.svelte';
 import Tooltip from './Tooltip.svelte';
-import { Button } from './common';
+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 = {
@@ -23,6 +25,7 @@ let drawer;
 let edit = false;
 let initialPath;
 let pathError = '';
+let can_write = true;
 export function initNew() {
     variable = {
         value: '',
@@ -32,6 +35,7 @@ export function initNew() {
     edit = false;
     initialPath = '';
     path = '';
+    can_write = true;
     drawer.openDrawer();
 }
 export async function editVariable(path) {
@@ -41,6 +45,8 @@ export async function editVariable(path) {
         path,
         decryptSecret: false
     });
+    can_write =
+        getV.workspace_id == $workspaceStore && canWrite(path, getV.extra_perms ?? {}, $userStore);
     variable = {
         value: getV.value ?? '',
         is_secret: getV.is_secret,
@@ -49,6 +55,15 @@ export async function editVariable(path) {
     initialPath = 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 = 3000;
 $: valid = variable.value.length <= MAX_VARIABLE_LENGTH;
 async function createVariable() {
@@ -90,9 +105,11 @@ async function updateVariable() {
         sendUserToast(`Could not update variable: ${err.body}`, true);
     }
 }
+let editorKind = 'plain';
+let editor = undefined;
 </script>
 
-<Drawer bind:this={drawer}>
+<Drawer bind:this={drawer} size="900px">
 	<DrawerContent
 		title={edit ? `Update variable at ${initialPath}` : 'Add a variable'}
 		on:close={drawer.closeDrawer}
@@ -100,8 +117,16 @@ async function updateVariable() {
 		<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}
 					<div class="mb-1 font-semibold text-gray-700">General</div>
 					<Path
+						disabled={!can_write}
 						bind:error={pathError}
 						bind:path
 						{initialPath}
@@ -112,40 +137,52 @@ async function updateVariable() {
 				<div class="mt-4">
 					<Toggle bind:checked={variable.is_secret} options={{ right: 'Secret' }} />
 					{#if variable.is_secret}
-						<Alert type="warning" title="Not visible after this">
-							If the variable is a secret, you will not be able to read the value of it from the
-							variable editor UI but only within scripts.
-							<Tooltip>
-								Within scripts, every read of the value create the audit log:
-								'variables.decrypt_secret'
-							</Tooltip>
+						<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>
-			<!-- 
-			{#if variable.is_secret}
-				<div class="mb-1 col-span-10">
-					<Password
-						bind:password={variable.value}
-						placeholder={'******** (only fill to update value)'}
-						label={`<span class="font-semibold text-gray-700">Secret value</span>
-							<span class="text-sm text-gray-500">(${variable.value.length}/3000 characters)</span>`}
-					/>
-				</div>
-			{:else} -->
+
 			<div>
 				<div class="mb-1">
 					<span class="font-semibold text-gray-700">Variable value</span>
-					<span class="text-sm text-gray-500">({variable.value.length}/3000 characters)</span>
+					<span class="text-sm text-gray-500 mr-4">({variable.value.length}/3000 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} />
+						</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} />
+						</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>
-				<textarea
-					rows="4"
-					type="text"
-					use:autosize
-					bind:value={variable.value}
-					placeholder="My variable value"
-				/>
 			</div>
 			<!-- {/if} -->
 
@@ -166,9 +203,11 @@ async function updateVariable() {
 		<div slot="submission">
 			<Button
 				on:click={() => (edit ? updateVariable() : createVariable())}
-				disabled={!valid || pathError != ''}
+				disabled={!can_write || !valid || pathError != ''}
+				btnClasses="mr-2"
+				startIcon={{ icon: faSave }}
 			>
-				{edit ? 'Save' : 'Add'}
+				{edit ? 'Update' : 'Save'}
 			</Button>
 		</div>
 	</DrawerContent>

package/components/VariableEditor.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         initNew?: (() => void) | undefined;
         editVariable?: ((path: string) => Promise<void>) | undefined;
+        loadVariable?: ((path: string) => Promise<void>) | undefined;
     };
     events: {
         create: CustomEvent<any>;
@@ -11,11 +12,12 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type VariableEditorProps = typeof __propDef.props;
-export declare type VariableEditorEvents = typeof __propDef.events;
-export declare type VariableEditorSlots = typeof __propDef.slots;
+export type VariableEditorProps = typeof __propDef.props;
+export type VariableEditorEvents = typeof __propDef.events;
+export type VariableEditorSlots = typeof __propDef.slots;
 export default class VariableEditor extends SvelteComponentTyped<VariableEditorProps, VariableEditorEvents, VariableEditorSlots> {
     get initNew(): () => void;
     get editVariable(): (path: string) => Promise<void>;
+    get loadVariable(): (path: string) => Promise<void>;
 }
 export {};

package/components/apps/CreateApp.svelte

@@ -0,0 +1,65 @@
+<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { AppService, Policy } from '../../gen';
+import { userStore, workspaceStore } from '../../stores';
+import { sendUserToast } from '../../utils';
+import { Button, Drawer, DrawerContent } from '../common';
+let path = '';
+let initialPath = '';
+let pathError = '';
+import { goto } from '$app/navigation';
+import Path from '../Path.svelte';
+let drawerOpen = false;
+function closeDrawer() {
+    drawerOpen = false;
+}
+async function createApp() {
+    const appJson = {
+        grid: [],
+        title: 'New app',
+        inlineScripts: {}
+    };
+    const policy = {
+        triggerables: {},
+        execution_mode: Policy.execution_mode.PUBLISHER,
+        on_behalf_of: `u/${$userStore?.username}`
+    };
+    try {
+        const appId = await AppService.createApp({
+            workspace: $workspaceStore,
+            requestBody: {
+                value: appJson,
+                path,
+                summary: 'App summary',
+                policy
+            }
+        });
+        goto(`/apps/edit/${appId}`);
+    }
+    catch (e) {
+        sendUserToast('Error creating app', e);
+    }
+}
+</script>
+
+<Drawer bind:open={drawerOpen} size="800px">
+	<DrawerContent title="Add an app" on:close={() => closeDrawer()}>
+		<Path bind:error={pathError} bind:path {initialPath} namePlaceholder="my_app" kind="app">
+			<div slot="ownerToolkit">
+				App permissions depend on their path. Select the group <span class="font-mono">all</span>
+				to share it, and <span class="font-mono">user</span> to keep it private.
+				<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+			</div>
+		</Path>
+
+		<Button on:click={() => createApp()}>Create app</Button>
+	</DrawerContent>
+</Drawer>
+
+<Button
+	size="sm"
+	spacingSize="lg"
+	startIcon={{ icon: faPlus }}
+	on:click={() => (drawerOpen = true)}
+>
+	New app
+</Button>

package/components/apps/CreateApp.svelte.d.ts

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

package/components/apps/components/DisplayComponent.svelte

@@ -0,0 +1,23 @@
+<script>import DisplayResult from '../../DisplayResult.svelte';
+import { getContext } from 'svelte';
+import InputValue from './helpers/InputValue.svelte';
+export let componentInputs;
+const { worldStore } = getContext('AppEditorContext');
+let resultValue = undefined;
+export const staticOutputs = [];
+</script>
+
+<InputValue input={componentInputs.result} bind:value={resultValue} />
+
+{#if $worldStore}
+	<div class="w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm">
+		Results
+	</div>
+	<div class="p-2">
+		{#if resultValue === undefined && componentInputs.result.type === 'output'}
+			<span class="text-sm">Waiting for result</span>
+		{:else}
+			<DisplayResult result={resultValue} />
+		{/if}
+	</div>
+{/if}

package/components/apps/components/DisplayComponent.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../types';
+declare const __propDef: {
+    props: {
+        componentInputs: InputsSpec;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DisplayComponentProps = typeof __propDef.props;
+export type DisplayComponentEvents = typeof __propDef.events;
+export type DisplayComponentSlots = typeof __propDef.slots;
+export default class DisplayComponent extends SvelteComponentTyped<DisplayComponentProps, DisplayComponentEvents, DisplayComponentSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -0,0 +1,42 @@
+<script>import { Button } from '../../../common';
+import InputValue from '../helpers/InputValue.svelte';
+import RunnableComponent from '../helpers/RunnableComponent.svelte';
+export let id;
+export let inputs;
+export let path = undefined;
+export let runType = undefined;
+export let inlineScriptName = undefined;
+export let componentInputs;
+export let extraQueryParams = {};
+export const staticOutputs = ['loading', 'result'];
+let labelValue = 'Default label';
+let color;
+let size;
+let runnableComponent;
+</script>
+
+<InputValue input={componentInputs.label} bind:value={labelValue} />
+<InputValue input={componentInputs.color} bind:value={color} />
+<InputValue input={componentInputs.size} bind:value={size} />
+
+<RunnableComponent
+	bind:this={runnableComponent}
+	bind:inputs
+	{path}
+	{runType}
+	{inlineScriptName}
+	{id}
+	autoRefresh={false}
+	{extraQueryParams}
+>
+	<Button
+		on:click={() => {
+			runnableComponent?.runComponent()
+		}}
+		btnClasses="w-full h-full"
+		{size}
+		{color}
+	>
+		{labelValue}
+	</Button>
+</RunnableComponent>

package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        inputs: InputsSpec;
+        path?: string | undefined;
+        runType?: 'script' | 'flow' | undefined;
+        inlineScriptName?: string | undefined;
+        componentInputs: InputsSpec;
+        extraQueryParams?: Record<string, any> | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppButtonProps = typeof __propDef.props;
+export type AppButtonEvents = typeof __propDef.events;
+export type AppButtonSlots = typeof __propDef.slots;
+export default class AppButton extends SvelteComponentTyped<AppButtonProps, AppButtonEvents, AppButtonSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/dataDisplay/AppBarChart.svelte

@@ -0,0 +1,18 @@
+<script>import { Bar } from 'svelte-chartjs';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement } from 'chart.js';
+import RunnableComponent from '../helpers/RunnableComponent.svelte';
+export let id;
+export let inputs;
+export let path = undefined;
+export let runType = undefined;
+export let inlineScriptName = undefined;
+export const staticOutputs = ['loading', 'result'];
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement);
+let result = undefined;
+</script>
+
+<RunnableComponent {id} {path} {runType} {inlineScriptName} bind:inputs bind:result>
+	{#if result}
+		<Bar data={result} options={{ responsive: true, animation: false }} />
+	{/if}
+</RunnableComponent>

package/components/apps/components/dataDisplay/AppBarChart.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        inputs: InputsSpec;
+        path?: string | undefined;
+        runType?: 'script' | 'flow' | undefined;
+        inlineScriptName?: string | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppBarChartProps = typeof __propDef.props;
+export type AppBarChartEvents = typeof __propDef.events;
+export type AppBarChartSlots = typeof __propDef.slots;
+export default class AppBarChart extends SvelteComponentTyped<AppBarChartProps, AppBarChartEvents, AppBarChartSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/dataDisplay/AppPieChart.svelte

@@ -0,0 +1,22 @@
+<script>import { Pie } from 'svelte-chartjs';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement } from 'chart.js';
+import RunnableComponent from '../helpers/RunnableComponent.svelte';
+export let id;
+export let inputs;
+export let path = undefined;
+export let runType = undefined;
+export let inlineScriptName = undefined;
+export const staticOutputs = ['loading', 'result'];
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement);
+let options = {
+    responsive: true,
+    animation: false
+};
+let result = undefined;
+</script>
+
+<RunnableComponent {id} {path} {runType} {inlineScriptName} bind:inputs bind:result>
+	{#if result}
+		<Pie data={result} {options} />
+	{/if}
+</RunnableComponent>

package/components/apps/components/dataDisplay/AppPieChart.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        inputs: InputsSpec;
+        path?: string | undefined;
+        runType?: 'script' | 'flow' | undefined;
+        inlineScriptName?: string | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppPieChartProps = typeof __propDef.props;
+export type AppPieChartEvents = typeof __propDef.events;
+export type AppPieChartSlots = typeof __propDef.slots;
+export default class AppPieChart extends SvelteComponentTyped<AppPieChartProps, AppPieChartEvents, AppPieChartSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/dataDisplay/AppTable.svelte

@@ -0,0 +1,135 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { classNames } from '../../../../utils';
+import { getContext } from 'svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import DebouncedInput from '../helpers/DebouncedInput.svelte';
+import RunnableComponent from '../helpers/RunnableComponent.svelte';
+import AppButton from '../buttons/AppButton.svelte';
+export let id;
+export let inputs;
+export let path = undefined;
+export let runType = undefined;
+export let inlineScriptName = undefined;
+export let componentInputs;
+export let actionButtons;
+const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
+export const staticOutputs = ['selectedRow', 'loading', 'result'];
+$: outputs = $worldStore?.outputsById[id];
+let selectedRowIndex = -1;
+function toggleRow(row, rowIndex) {
+    if (selectedRowIndex === rowIndex) {
+        selectedRowIndex = -1;
+        outputs.selectedRow.set(null);
+    }
+    else {
+        selectedRowIndex = rowIndex;
+        outputs?.selectedRow.set(row);
+    }
+}
+let searchEnabledValue = undefined;
+let paginationEnabled = undefined;
+let page = 1;
+let search = '';
+let result = [];
+$: headers = Object.keys(result[0] || {}) || [];
+const extraQueryParams = { search, page };
+export const reservedKeys = Object.keys(extraQueryParams);
+</script>
+
+<InputValue input={componentInputs.searchEnabled} bind:value={searchEnabledValue} />
+<InputValue input={componentInputs.paginationEnabled} bind:value={paginationEnabled} />
+
+<RunnableComponent
+	{id}
+	{path}
+	{runType}
+	{inlineScriptName}
+	bind:inputs
+	bind:result
+	extraQueryParams={{ search, page }}
+>
+	<div class="gap-2 flex flex-col mt-2">
+		{#if searchEnabledValue}
+			<div>
+				<div>
+					<DebouncedInput placeholder="Search..." bind:value={search} />
+				</div>
+			</div>
+		{/if}
+		<div class="flex flex-col">
+			<table class="divide-y divide-gray-300 border">
+				{#if headers}
+					<thead class="bg-gray-50">
+						<tr>
+							{#each headers as header}
+								<th
+									scope="col"
+									class="px-4 py-2 text-left text-xs font-medium text-gray-500 tracking-wider"
+								>
+									{header.replace(/([A-Z]+)*([A-Z][a-z])/g, '$1 $2')}
+								</th>
+							{/each}
+							<th scope="col" class="relative py-2 px-4">
+								<span class="sr-only">Edit</span>
+							</th>
+						</tr>
+					</thead>
+				{/if}
+				<tbody class="divide-y divide-gray-200 bg-white">
+					{#each result as row, rowIndex (rowIndex)}
+						<tr
+							class={classNames(
+								selectedRowIndex === rowIndex ? 'bg-blue-100 hover:bg-blue-200' : 'hover:bg-blue-50'
+							)}
+							on:click={() => toggleRow(row, rowIndex)}
+						>
+							{#each headers as header}
+								<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+									{row[header]}
+								</td>
+							{/each}
+							<td class="relative whitespace-nowrap px-4 py-2 text-right ">
+								{#if actionButtons?.length > 0}
+									<div class="center-center gap-2">
+										{#each actionButtons as props}
+											<AppButton
+												{...props}
+												extraQueryParams={{ row }}
+												bind:inputs={props.inputs}
+												bind:staticOutputs={$staticOutputsStore[props.id]}
+											/>
+										{/each}
+									</div>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		{#if paginationEnabled}
+			<div class="flex flex-row gap-2">
+				<Button
+					on:click={() => {
+						page = page - 1
+					}}
+					color="light"
+					size="xs"
+					variant="border"
+					disabled={page === 1}
+				>
+					Previous
+				</Button>
+				<Button
+					on:click={() => {
+						page = page + 1
+					}}
+					color="light"
+					size="xs"
+					variant="border">Next</Button
+				>
+			</div>
+		{/if}
+	</div>
+</RunnableComponent>

package/components/apps/components/dataDisplay/AppTable.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { BaseAppComponent, ButtonComponent, InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        inputs: InputsSpec;
+        path?: string | undefined;
+        runType?: 'script' | 'flow' | undefined;
+        inlineScriptName?: string | undefined;
+        componentInputs: InputsSpec;
+        actionButtons: (BaseAppComponent & ButtonComponent)[];
+        staticOutputs?: string[] | undefined;
+        reservedKeys?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTableProps = typeof __propDef.props;
+export type AppTableEvents = typeof __propDef.events;
+export type AppTableSlots = typeof __propDef.slots;
+export default class AppTable extends SvelteComponentTyped<AppTableProps, AppTableEvents, AppTableSlots> {
+    get staticOutputs(): string[];
+    get reservedKeys(): string[];
+}
+export {};

package/components/apps/components/dataDisplay/AppText.svelte

@@ -0,0 +1,15 @@
+<script>import SvelteMarkdown from 'svelte-markdown';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let componentInputs;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export const staticOutputs = [];
+let contentValue = '';
+</script>
+
+<InputValue input={componentInputs.content} bind:value={contentValue} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	<SvelteMarkdown source={String(contentValue)} />
+</AlignWrapper>