windmill-components 1.37.0 → 1.46.2

package/components/ScriptPicker.svelte

@@ -3,13 +3,10 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
 import ItemPicker from './ItemPicker.svelte';
-import Modal from './Modal.svelte';
-import { Highlight } from 'svelte-highlight';
-import typescript from 'svelte-highlight/languages/typescript';
-import python from 'svelte-highlight/languages/python';
 import { getScriptByPath } from '../utils';
 import RadioButton from './RadioButton.svelte';
-import { Button } from './common';
+import { Button, Drawer, DrawerContent } from './common';
+import HighlightCode from './HighlightCode.svelte';
 export let scriptPath = undefined;
 export let allowFlow = false;
 export let allowHub = false;
@@ -17,7 +14,7 @@ export let itemKind = allowHub ? 'hub' : 'script';
 export let kind = Script.kind.SCRIPT;
 let items = [];
 let itemPicker;
-let modalViewer;
+let drawerViewer;
 let code = '';
 let lang;
 let options = [['Script', 'script']];
@@ -56,20 +53,20 @@ $: {
 	}}
 />
 
-<div class="flex flex-row flex-wrap items-center gap-4">
-	<div class="w-80 -mb-2">
-		{#if options.length > 1}
+<div class="flex flex-row flex-wrap items-center gap-4 w-full">
+	{#if options.length > 1}
+		<div class="w-80 -mb-2">
 			<RadioButton bind:value={itemKind} {options} />
-		{/if}
-	</div>
+		</div>
+	{/if}
 
 	<div class="flex items-center grow gap-4">
-		<input type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
+		<input class="grow w-full" type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
 		<Button
 			size="sm"
 			endIcon={{ icon: faSearch }}
 			btnClasses="mx-auto whitespace-nowrap"
-			on:click={() => itemPicker.openModal()}
+			on:click={() => itemPicker.openDrawer()}
 		>
 			Pick a {itemKind} path
 		</Button>
@@ -82,7 +79,7 @@ $: {
 				const { language, content } = await getScriptByPath(scriptPath ?? '')
 				code = content
 				lang = language
-				modalViewer.openModal()
+				drawerViewer.openDrawer()
 			}}
 		>
 			Show code
@@ -90,13 +87,8 @@ $: {
 	{/if}
 </div>
 
-<Modal bind:this={modalViewer}>
-	<div slot="title">Script {scriptPath}</div>
-	<div slot="content">
-		{#if lang == 'python3'}
-			<Highlight language={python} {code} />
-		{:else if lang == 'deno'}
-			<Highlight language={typescript} {code} />
-		{/if}
-	</div>
-</Modal>
+<Drawer bind:this={drawerViewer}>
+	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>
+		<HighlightCode {code} language={lang} />
+	</DrawerContent>
+</Drawer>

package/components/ScriptSchema.svelte

@@ -1,11 +1,11 @@
-<script>import PageHeader from './PageHeader.svelte';
-import SchemaForm from './SchemaForm.svelte';
+<script>import SchemaForm from './SchemaForm.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import SvelteMarkdown from 'svelte-markdown';
+import { Alert } from './common';
 export let schema;
 export let summary;
 export let description;
@@ -15,45 +15,46 @@ export function setSchema(newSchema) {
 </script>
 
 <div class="w-full">
-	<PageHeader title="UI customisation" />
+	<h1 class="my-4">UI customisation</h1>
 
 	<Tabs selected="ui">
 		<Tab value="ui">UI</Tab>
 		<Tab value="jsonschema">JSON Schema</Tab>
 		<svelte:fragment slot="content">
 			<TabContent value="ui">
-				<div class="grid grid-cols-3 gap-2">
-					<div>
-						<h2 class="mb-1">Summary</h2>
-						<div class="mb-2 md:mb-3 text-sm">
-							<textarea bind:value={summary} placeholder="Edit summary" />
-							<div class="prose text-sm">
-								{summary != '' ? summary : 'No summary'}
-							</div>
-						</div>
-					</div>
-					<div class="col-span-2">
-						<h2 class="mb-1">Description</h2>
-						<div class="mb-2 md:mb-6">
-							<div class="prose text-sm">
-								<textarea bind:value={description} placeholder="Edit description" />
-								<div class="prose text-sm">
-									<SvelteMarkdown
-										source={description && description != '' ? description : 'No description'}
-									/>
+				<h2 class="border-b pb-1 mt-6">Display</h2>
+				<div class="grid grid-cols-3 gap-2 mt-4">
+					<label>
+						<div class="text-gray-700 text-sm">Summary</div>
+						<textarea bind:value={summary} placeholder="Edit summary" class="text-sm" />
+					</label>
+					<label class="col-span-2">
+						<div class="text-gray-700 text-sm">Description</div>
+						<textarea
+							bind:value={description}
+							placeholder="Edit description. Markdown accepted."
+							class="text-sm"
+						/>
+						<div class="mt-1 px-2">
+							{#if description}
+								<div
+									class="prose !max-w-full !max-h-48 text-xs shadow-inner shadow-blue overflow-auto mt-1"
+								>
+									<SvelteMarkdown source={description} />
 								</div>
-							</div>
+							{:else}
+								<div class="text-xs text-gray-500"> Enter a description to see the preview </div>
+							{/if}
 						</div>
-					</div>
-				</div>
-				<div class="bg-blue-100 border-l-4 border-blue-600 text-blue-700 p-4 m-4" role="alert">
-					<p class="font-bold">Synchronized with main signature</p>
-					<p>
-						Argument names, being required or not, and default values are derived from the main
-						signature of step 2 and cannot be edited directly. Change the main signature to edit
-						them.
-					</p>
+					</label>
 				</div>
+				<h2 class="border-b pb-1 my-4">Arguments</h2>
+				<Alert type="info" title="Synchronized with main signature">
+					Argument names, being required or not, and default values are derived from the main
+					signature of step 2 and cannot be edited directly. Change the main signature to edit them.
+				</Alert>
+				<div class="mt-4" />
+
 				<SchemaForm {schema} editableSchema={true} />
 			</TabContent>
 			<TabContent value="jsonschema">

package/components/ShareModal.svelte

@@ -1,12 +1,13 @@
-<script>import Modal from './Modal.svelte';
-import TableCustom from './TableCustom.svelte';
+<script>import TableCustom from './TableCustom.svelte';
 import { GranularAclService } from '../gen/services/GranularAclService';
 import { sendUserToast } from '../utils';
 import { GroupService, UserService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { workspaceStore } from '../stores';
-import { Button } from './common';
+import { Alert, Button, Drawer } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Toggle from './Toggle.svelte';
 const dispatch = createEventDispatcher();
 export let kind;
 export let path = '';
@@ -17,16 +18,16 @@ let write = false;
 let acls = [];
 let groups = [];
 let usernames = [];
-let modal;
+let drawer;
 $: newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/');
-export async function openModal(newPath) {
+export async function openDrawer(newPath) {
     if (newPath) {
         path = newPath;
     }
     loadAcls();
     loadGroups();
     loadUsernames();
-    modal.openModal();
+    drawer.openDrawer();
 }
 async function loadAcls() {
     acls = Object.entries(await GranularAclService.getGranularAcls({ workspace: $workspaceStore, path, kind }));
@@ -64,67 +65,72 @@ async function addAcl(owner, write) {
 }
 </script>
 
-<Modal bind:this={modal}>
-	<div slot="title">Share {path}</div>
-
-	<div slot="content">
-		<div class="flex flex-row pb-0 mb-5 justify-between">
-			<label class="block">
-				<span class="text-gray-700 text-sm"> Owner Kind </span>
-
-				<select
-					class="block mt-2 w-20"
-					bind:value={ownerKind}
-					on:change={() => {
-						if (ownerKind === 'group') {
-							owner = 'all'
-						} else {
-							owner = ''
-						}
-					}}
-				>
-					<option>user</option>
-					<option>group</option>
-				</select>
-			</label>
-			<label class="block grow mx-2" for="inp">
-				<span class="text-sm text-gray-700">Owner</span>
-				<div class="block mt-1">
-					<div class="static z-50">
-						<AutoComplete
-							items={ownerKind === 'user' ? usernames : groups}
-							bind:selectedItem={owner}
-						/>
-					</div>
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Share {path}" on:close={drawer.closeDrawer}>
+		<div>
+			<Alert type="info" title="Owners/Editors/Readers"
+				>Owner is the user or group that is prefix of its path. Sharing allow other users or group
+				to be able to read or write to this item without being an owner.</Alert
+			>
+			<div class="flex flex-row flex-wrap pb-0 my-5  items-end">
+				<div class="flex gap-4 mr-2 flex-row">
+					<label class="flex flex-col">
+						<span class="text-gray-700 text-sm"> Owner Kind </span>
+						<select
+							class="block mt-1 w-20"
+							bind:value={ownerKind}
+							on:change={() => {
+								if (ownerKind === 'group') {
+									owner = 'all'
+								} else {
+									owner = ''
+								}
+							}}
+						>
+							<option>user</option>
+							<option>group</option>
+						</select>
+					</label>
+					<label class="flex flex-col" for="inp">
+						<span class="text-sm text-gray-700">Owner</span>
+						<div class="block mt-1">
+							<div class="static z-50">
+								<AutoComplete
+									items={ownerKind === 'user' ? usernames : groups}
+									bind:selectedItem={owner}
+								/>
+							</div>
+						</div>
+					</label>
+					<label class="flex flex-col items-end" for="inp">
+						<span class="text-sm text-gray-700">Editor</span>
+						<Toggle bind:checked={write} />
+					</label>
 				</div>
-			</label>
-			<label class="block">
-				<span class="text-sm text-gray-700">Editor</span>
-				<input class="block mt-4" type="checkbox" bind:checked={write} />
-			</label>
-			<Button size="sm" btnClasses="ml-2" on:click={() => addAcl(newOwner, write)}>
-				Add permission
-			</Button>
+				<div class="mt-2">
+					<Button size="sm" on:click={() => addAcl(newOwner, write)}>Add permission</Button>
+				</div>
+			</div>
+			<TableCustom>
+				<tr slot="header-row">
+					<th>owner</th>
+					<th>has write permission</th>
+					<th />
+				</tr>
+				<tbody slot="body">
+					{#each acls as [owner, write]}
+						<tr>
+							<td>{owner}</td>
+							<td>{write}</td>
+							<td>
+								<Button variant="border" color="red" size="sm" on:click={() => deleteAcl(owner)}>
+									Delete
+								</Button>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</TableCustom>
 		</div>
-		<TableCustom>
-			<tr slot="header-row">
-				<th>owner</th>
-				<th>has write permission</th>
-				<th />
-			</tr>
-			<tbody slot="body">
-				{#each acls as [owner, write]}
-					<tr>
-						<td>{owner}</td>
-						<td>{write}</td>
-						<td
-							><Button variant="border" color="blue" size="sm" on:click={() => deleteAcl(owner)}
-								>Delete</Button
-							></td
-						>
-					</tr>
-				{/each}
-			</tbody>
-		</TableCustom>
-	</div>
-</Modal>
+	</DrawerContent>
+</Drawer>

package/components/ShareModal.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         kind: 'script' | 'group_' | 'resource' | 'schedule' | 'variable' | 'flow';
         path?: string | undefined;
-        openModal?: ((newPath?: string) => Promise<void>) | undefined;
+        openDrawer?: ((newPath?: string) => Promise<void>) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -16,6 +16,6 @@ export declare type ShareModalProps = typeof __propDef.props;
 export declare type ShareModalEvents = typeof __propDef.events;
 export declare type ShareModalSlots = typeof __propDef.slots;
 export default class ShareModal extends SvelteComponentTyped<ShareModalProps, ShareModalEvents, ShareModalSlots> {
-    get openModal(): (newPath?: string | undefined) => Promise<void>;
+    get openDrawer(): (newPath?: string | undefined) => Promise<void>;
 }
 export {};

package/components/SimpleEditor.svelte

@@ -21,6 +21,7 @@ import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 let divEl = null;
 let editor;
+let model;
 export let lang;
 export let code = '';
 export let hash = createHash();
@@ -78,7 +79,7 @@ function format() {
     }
 }
 async function loadMonaco() {
-    const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
     model.updateOptions(updateOptions);
     editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
     let timeoutModel = undefined;
@@ -120,6 +121,7 @@ onMount(() => {
 });
 onDestroy(() => {
     try {
+        model && model.dispose();
         editor && editor.dispose();
     }
     catch (err) { }
@@ -143,5 +145,5 @@ onDestroy(() => {
 
 	.few-lines-editor {
 		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80px;
+		height: 100px;
 	}</style>

package/components/SuperadminSettings.svelte

@@ -0,0 +1,134 @@
+<script>import Fuse from 'fuse.js';
+import { UserService, SettingsService, GlobalUserInfo } from '../gen';
+import TableCustom from './TableCustom.svelte';
+import PageHeader from './PageHeader.svelte';
+import InviteGlobalUser from './InviteGlobalUser.svelte';
+import { Alert, Badge, Drawer, DrawerContent } from './common';
+import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
+let drawer;
+export function openDrawer() {
+    loadVersion();
+    listUsers();
+    drawer?.openDrawer();
+}
+export function toggleDrawer() {
+    drawer?.toggleDrawer();
+}
+let version;
+let users = [];
+let filteredUsers;
+let userFilter = '';
+let deleteConfirmedCallback = undefined;
+$: openConfirmation = Boolean(deleteConfirmedCallback);
+const fuseOptions = {
+    includeScore: false,
+    keys: ['email', 'name', 'company']
+};
+const fuse = new Fuse(users, fuseOptions);
+$: filteredUsers = fuse?.search(userFilter).map((value) => value.item);
+async function loadVersion() {
+    version = await SettingsService.backendVersion();
+}
+async function listUsers() {
+    users = await UserService.listUsersAsSuperAdmin({ perPage: 100000 });
+    fuse?.setCollection(users);
+}
+</script>
+
+<Drawer bind:this={drawer} on:open={listUsers} size="900px">
+	<DrawerContent overflow_y={false} title="Superadmin Settings" on:close={drawer.closeDrawer}>
+		<ConfirmationModal
+			open={openConfirmation}
+			title="Remove user"
+			confirmationText="Remove"
+			on:canceled={() => {
+				deleteConfirmedCallback = undefined
+			}}
+			on:confirmed={() => {
+				if (deleteConfirmedCallback) {
+					deleteConfirmedCallback()
+				}
+				deleteConfirmedCallback = undefined
+			}}
+		>
+			<div class="flex flex-col w-full space-y-4">
+				<span>Are you sure you want to remove this user?</span>
+				<Alert type="info" title="Bypass confirmation">
+					<div>
+						You can press
+						<Badge color="dark-gray">SHIFT</Badge>
+						while removing a variable to bypass confirmation.
+					</div>
+				</Alert>
+			</div>
+		</ConfirmationModal>
+
+		<div class="flex flex-col h-full">
+			<div>
+				<div class="text-xs pt-1 text-gray-500 ">
+					Windmill {version}
+				</div>
+
+				<PageHeader title="All users" primary={false} />
+
+				<div class="pb-1" />
+				<InviteGlobalUser on:new={listUsers} />
+				<div class="pb-1" />
+
+				<input placeholder="Search users" bind:value={userFilter} class="input mt-1" />
+			</div>
+			<div class="mt-2 overflow-auto">
+				<TableCustom>
+					<tr slot="header-row" class="sticky top-0 bg-white border-b">
+						<th>email</th>
+						<th>superadmin</th>
+						<th>auth</th>
+						<th>name</th>
+						<th>company</th>
+						<th />
+					</tr>
+					<tbody slot="body" class="overflow-y-auto h-full max-h-full">
+						{#if filteredUsers && users}
+							{#each userFilter === '' ? users : filteredUsers as { email, super_admin, login_type, name, company }}
+								<tr class="border">
+									<td>{email}</td>
+									<td>{super_admin ? 'yes' : ''}</td>
+									<td>{login_type}</td>
+									<td><span class="break-words">{name ?? ''}</span></td>
+									<td><span class="break-words">{company ?? ''}</span></td>
+									<td>
+										<div class="flex flex-row gap-x-1">
+											<button
+												class="text-blue-500"
+												on:click={async () => {
+													await UserService.globalUserUpdate({
+														email,
+														requestBody: {
+															is_super_admin: !super_admin
+														}
+													})
+													listUsers()
+												}}>{super_admin ? 'demote' : 'promote'}</button
+											>
+											|
+											<button
+												class="text-red-500"
+												on:click={async () => {
+													deleteConfirmedCallback = async () => {
+														await UserService.globalUserDelete({ email })
+														listUsers()
+													}
+													openConfirmation = true
+												}}>remove</button
+											>
+										</div>
+									</td>
+								</tr>
+							{/each}
+						{/if}
+					</tbody>
+				</TableCustom>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/components/SuperadminSettings.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: (() => void) | undefined;
+        toggleDrawer?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SuperadminSettingsProps = typeof __propDef.props;
+export declare type SuperadminSettingsEvents = typeof __propDef.events;
+export declare type SuperadminSettingsSlots = typeof __propDef.slots;
+export default class SuperadminSettings extends SvelteComponentTyped<SuperadminSettingsProps, SuperadminSettingsEvents, SuperadminSettingsSlots> {
+    get openDrawer(): () => void;
+    get toggleDrawer(): () => void;
+}
+export {};

package/components/TableCustom.svelte

@@ -11,7 +11,7 @@ const dispatch = createEventDispatcher();
 -->
 <div class="flex flex-col {$$props.class} min-w-full">
 	<div class="inline-block min-w-full py-2 align-middle">
-		<table id="table-custom" class="min-w-full divide-y divide-gray-300 table-auto">
+		<table class="table-custom min-w-full table-auto divide-y divide-gray-300">
 			<thead>
 				<slot name="header-row" />
 			</thead>

package/components/TableSimple.svelte

@@ -31,7 +31,7 @@ const dispatch = createEventDispatcher();
 						<tr>
 							{#each keys as key, i}
 								<td
-									class="py-4 text-sm text-gray-700 {i == 0
+									class="py-2 text-sm text-gray-700 break-words {i == 0
 										? 'pl-4 pr-3 sm:pl-6 md:pl-0 font-semibold'
 										: 'px-3'} {twTextSize}"
 								>

package/components/TestJobLoader.svelte

@@ -5,6 +5,9 @@ import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let isLoading = false;
 export let job = undefined;
+export let workspaceOverride = undefined;
+export let notfound = false;
+$: workspace = workspaceOverride ?? $workspaceStore;
 let intervalId;
 let syncIteration = 0;
 let ITERATIONS_BEFORE_SLOW_REFRESH = 100;
@@ -13,14 +16,14 @@ export async function runPreview(path, code, lang, args) {
         intervalId && clearInterval(intervalId);
         if (isLoading && job) {
             JobService.cancelQueuedJob({
-                workspace: $workspaceStore,
+                workspace: workspace,
                 id: job.id,
                 requestBody: {}
             });
         }
         isLoading = true;
         const testId = await JobService.runScriptPreview({
-            workspace: $workspaceStore,
+            workspace: workspace,
             requestBody: {
                 path,
                 content: code,
@@ -61,7 +64,7 @@ async function loadTestJob(id) {
     try {
         if (job && `running` in job) {
             let previewJobUpdates = await JobService.getJobUpdates({
-                workspace: $workspaceStore,
+                workspace: workspace,
                 id,
                 running: job.running,
                 logOffset: job.logs?.length ?? 0
@@ -70,23 +73,28 @@ async function loadTestJob(id) {
                 job.logs = (job.logs ?? '').concat(previewJobUpdates.new_logs);
             }
             if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
-                job = await JobService.getJob({ workspace: $workspaceStore, id });
+                job = await JobService.getJob({ workspace: workspace, id });
             }
         }
         else {
-            job = await JobService.getJob({ workspace: $workspaceStore, id });
+            job = await JobService.getJob({ workspace: workspace, id });
         }
         if (job?.type === 'CompletedJob') {
             //only CompletedJob has success property
             isCompleted = true;
-            clearInterval(intervalId);
+            intervalId && clearInterval(intervalId);
             if (isLoading) {
                 dispatch('done', job);
                 isLoading = false;
             }
         }
+        notfound = false;
     }
     catch (err) {
+        intervalId && clearInterval(intervalId);
+        if (err.status === 404) {
+            notfound = true;
+        }
         console.error(err);
     }
     return isCompleted;

package/components/TestJobLoader.svelte.d.ts

@@ -4,7 +4,9 @@ declare const __propDef: {
     props: {
         isLoading?: boolean | undefined;
         job?: Job | undefined;
-        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3', args: Record<string, any>) => Promise<void>) | undefined;
+        workspaceOverride?: string | undefined;
+        notfound?: boolean | undefined;
+        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>) => Promise<void>) | undefined;
         cancelJob?: (() => Promise<void>) | undefined;
         watchJob?: ((testId: string) => Promise<void>) | undefined;
     };
@@ -19,7 +21,7 @@ export declare type TestJobLoaderProps = typeof __propDef.props;
 export declare type TestJobLoaderEvents = typeof __propDef.events;
 export declare type TestJobLoaderSlots = typeof __propDef.slots;
 export default class TestJobLoader extends SvelteComponentTyped<TestJobLoaderProps, TestJobLoaderEvents, TestJobLoaderSlots> {
-    get runPreview(): (path: string | undefined, code: string, lang: "go" | "python3" | "deno", args: Record<string, any>) => Promise<void>;
+    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash", args: Record<string, any>) => Promise<void>;
     get cancelJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;
 }