windmill-components 1.46.3 → 1.55.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,7 +55,16 @@ export async function editVariable(path) {
     initialPath = path;
     drawer.openDrawer();
 }
-const MAX_VARIABLE_LENGTH = 3000;
+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({
@@ -61,7 +76,7 @@ async function createVariable() {
             description: variable.description
         }
     });
-    sendUserToast(`Successfully created variable ${path}`);
+    sendUserToast(`Created variable ${path}`);
     dispatch('create');
     drawer.closeDrawer();
 }
@@ -82,7 +97,7 @@ async function updateVariable() {
                 description: getV.description != variable.description ? variable.description : undefined
             }
         });
-        sendUserToast(`Successfully updated variable at ${initialPath}`);
+        sendUserToast(`Updated variable ${initialPath}`);
         dispatch('create');
         drawer.closeDrawer();
     }
@@ -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,66 @@ 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}/{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>
-				<textarea
-					rows="4"
-					type="text"
-					use:autosize
-					bind:value={variable.value}
-					placeholder="My variable value"
-				/>
 			</div>
 			<!-- {/if} -->
 
@@ -163,13 +214,14 @@ async function updateVariable() {
 				/>
 			</div>
 		</div>
-		<div slot="submission">
+		<svelte:fragment slot="actions">
 			<Button
 				on:click={() => (edit ? updateVariable() : createVariable())}
-				disabled={!valid || pathError != ''}
+				disabled={!can_write || !valid || pathError != ''}
+				startIcon={{ icon: faSave }}
 			>
-				{edit ? 'Save' : 'Add'}
+				{edit ? 'Update' : 'Save'}
 			</Button>
-		</div>
+		</svelte:fragment>
 	</DrawerContent>
 </Drawer>

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,68 @@
+<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';
+import { LayoutDashboard } from 'lucide-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>
+
+		<div slot="actions">
+			<Button on:click={() => createApp()}>Create app</Button>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<Button
+	size="sm"
+	spacingSize="lg"
+	startIcon={{ icon: faPlus }}
+	on:click={() => (drawerOpen = true)}
+>
+	New App (alpha) <LayoutDashboard class="ml-1.5" size={18} />
+</Button>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    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,16 @@
+<script>import DisplayResult from '../../DisplayResult.svelte';
+import RunnableWrapper from './helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export const staticOutputs = [];
+let result = undefined;
+</script>
+
+<RunnableWrapper bind:result bind:componentInput {id}>
+	<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">
+		<DisplayResult {result} />
+	</div>
+</RunnableWrapper>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        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,49 @@
+<script>import { Button } from '../../../common';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.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 const staticOutputs = ['loading', 'result'];
+const { runnableComponents } = getContext('AppEditorContext');
+let labelValue = 'Default label';
+let color;
+let size;
+let runnableComponent;
+</script>
+
+<InputValue input={configuration.label} bind:value={labelValue} />
+<InputValue input={configuration.color} bind:value={color} />
+<InputValue input={configuration.size} bind:value={size} />
+
+<RunnableWrapper
+	bind:runnableComponent
+	bind:componentInput
+	{id}
+	{extraQueryParams}
+	autoRefresh={false}
+>
+	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+		<Button
+			on:click={() => {
+				runnableComponent?.runComponent()
+
+				if (recomputeIds) {
+					recomputeIds.forEach((id) => {
+						$runnableComponents[id]?.()
+					})
+				}
+			}}
+			{size}
+			{color}
+		>
+			{labelValue}
+		</Button>
+	</AlignWrapper>
+</RunnableWrapper>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        recomputeIds?: string[] | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | 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,42 @@
+<script>import { Bar } from 'svelte-chartjs';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement } from 'chart.js';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export const staticOutputs = ['loading', 'result'];
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement);
+let result = undefined;
+let labels = [];
+let theme = 'theme1';
+$: backgroundColor = {
+    theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+    // blue theme
+    theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
+    // red theme
+    theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
+}[theme];
+const options = {
+    responsive: true,
+    animation: false
+};
+$: data = {
+    labels,
+    datasets: [
+        {
+            data: result,
+            backgroundColor
+        }
+    ]
+};
+</script>
+
+<InputValue input={configuration.theme} bind:value={theme} />
+<InputValue input={configuration.labels} bind:value={labels} />
+
+<RunnableWrapper bind:componentInput {id} bind:result>
+	{#if data}
+		<Bar {data} {options} />
+	{/if}
+</RunnableWrapper>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        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,43 @@
+<script>import { Pie } from 'svelte-chartjs';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement } from 'chart.js';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export const staticOutputs = ['loading', 'result'];
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement);
+let result = undefined;
+let labels = [];
+let theme = 'theme1';
+$: backgroundColor = {
+    theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+    // blue theme
+    theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
+    // red theme
+    theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
+}[theme];
+const options = {
+    responsive: true,
+    animation: false,
+    maintainAspectRatio: false
+};
+$: data = {
+    labels,
+    datasets: [
+        {
+            data: result,
+            backgroundColor: backgroundColor
+        }
+    ]
+};
+</script>
+
+<InputValue input={configuration.theme} bind:value={theme} />
+<InputValue input={configuration.labels} bind:value={labels} />
+
+<RunnableWrapper bind:componentInput {id} bind:result>
+	{#if data}
+		<Pie {data} {options} />
+	{/if}
+</RunnableWrapper>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        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 {};