windmill-components 1.37.0 → 1.46.1

package/components/Toggle.svelte

@@ -1,23 +1,25 @@
 <script>import { createEventDispatcher } from 'svelte';
 export let options = {};
 export let checked = false;
+export let disabled = false;
 const id = (Math.random() + 1).toString(36).substring(10);
 const dispatch = createEventDispatcher();
 </script>
 
-<span>
+<span class={$$props.class}>
 	<label for={id} class="inline-flex items-center cursor-pointer mt-2">
 		{#if Boolean(options?.left)}
 			<span class="mr-2 text-sm font-medium text-gray-900">{options?.left}</span>
 		{/if}
-		<div class="relative">
+		<div class="relative" on:click|stopPropagation={() => {}}>
 			<input
+				{disabled}
 				type="checkbox"
 				value={false}
 				{id}
 				class="sr-only peer"
 				bind:checked
-				on:change={() => {
+				on:change|stopPropagation={(e) => {
 					dispatch('change', checked)
 				}}
 			/>

package/components/Toggle.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         options?: {
             left?: string | undefined;
             right?: string | undefined;
         } | undefined;
         checked?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/Tooltip.svelte

@@ -1,68 +1,13 @@
 <script>import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
-import { createPopperActions } from 'svelte-popperjs';
-import { fade } from 'svelte/transition';
-const [popperRef, popperContent] = createPopperActions({
-    placement: 'auto'
-});
-const betterPreventOverflow = (options) => ({
-    name: 'preventOverflow',
-    options,
-    effect: ({ state }) => {
-        const { padding = 0 } = options;
-        state.elements.popper.style.maxWidth = `calc(100vw - ${padding * 2}px)`;
-    }
-});
-const extraOpts = {
-    modifiers: [
-        betterPreventOverflow({ padding: 50 }),
-        { name: 'offset', options: { offset: [8, 8] } },
-        {
-            name: 'arrow',
-            options: {
-                padding: 10 // 5px from the edges of the popper
-            }
-        }
-    ]
-};
-let showTooltip = false;
-let timeout;
-function open() {
-    clearTimeout(timeout);
-    showTooltip = true;
-}
-function close() {
-    timeout = setTimeout(() => (showTooltip = false), 200);
-}
+import Popover from './Popover.svelte';
 </script>
 
-<button use:popperRef on:mouseenter={open} on:mouseleave={close}>
-	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.8} />
-</button>
-{#if showTooltip}
-	<div
-		transition:fade
-		id="tooltip"
-		use:popperContent={extraOpts}
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class="w-96 text-left"
-	>
-		<slot />
-	</div>
-{/if}
-
-<style>
-	#tooltip {
-    z-index: 50;
-    white-space: normal;
-    border-radius: 0.75rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    padding: 1rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: 400;
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity))
-}</style>
+<Popover>
+	<Icon
+		class="text-gray-500 font-thin inline-block align-middle w-4"
+		data={faInfoCircle}
+		scale={0.8}
+	/>
+	<span slot="text"> <slot /> </span>
+</Popover>

package/components/UserSettings.svelte

@@ -0,0 +1,241 @@
+<script>import { usersWorkspaceStore } from '../stores';
+import { UserService, SettingsService } from '../gen';
+import { displayDate, sendUserToast, getToday, copyToClipboard, truncate } from '../utils';
+import { faClipboard, faPlus } from '@fortawesome/free-solid-svg-icons';
+import TableCustom from './TableCustom.svelte';
+import { Button } from './common';
+import Icon from 'svelte-awesome';
+let newPassword;
+let passwordError;
+let version;
+let tokens;
+let newToken;
+let newTokenLabel;
+let newTokenExpiration;
+let displayCreateToken = false;
+let login_type = 'none';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+let drawer;
+export function openDrawer() {
+    loadVersion();
+    loadLoginType();
+    listTokens();
+    drawer?.openDrawer();
+}
+export function toggleDrawer() {
+    drawer?.toggleDrawer();
+}
+async function setPassword() {
+    if (newPassword) {
+        await UserService.setPassword({
+            requestBody: {
+                password: newPassword
+            }
+        });
+        sendUserToast('Your password was successfully updated');
+    }
+    else {
+        sendUserToast('Specify a new password value to change your passord', true);
+    }
+}
+async function loadVersion() {
+    version = await SettingsService.backendVersion();
+}
+async function loadLoginType() {
+    login_type = (await UserService.globalWhoami()).login_type;
+}
+async function createToken() {
+    newToken = undefined;
+    let expirationISO;
+    if (newTokenExpiration) {
+        expirationISO = new Date(newTokenExpiration);
+    }
+    newToken = await UserService.createToken({
+        requestBody: { label: newTokenLabel, expiration: expirationISO?.toISOString() }
+    });
+    listTokens();
+    displayCreateToken = false;
+}
+async function listTokens() {
+    tokens = await UserService.listTokens();
+}
+async function deleteToken(tokenPrefix) {
+    await UserService.deleteToken({ tokenPrefix });
+    sendUserToast('Succesfully deleted token');
+    listTokens();
+}
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="User Settings" on:close={drawer.toggleDrawer}>
+		<div class="flex flex-col h-full">
+			<div>
+				<div class="text-xs pt-1 pb-2 text-gray-500 ">
+					Windmill {version}
+				</div>
+
+				<h2 class="border-b">User info</h2>
+				<div class="">
+					{#if passwordError}
+						<div class="text-red-600 text-2xs grow">{passwordError}</div>
+					{/if}
+					<div class="flex flex-col gap-2 w-full ">
+						<div class="mt-4">
+							<label class="block w-60 mb-2 text-gray-500">
+								<div class="text-gray-700">email</div>
+								<input
+									type="text"
+									disabled
+									value={$usersWorkspaceStore?.email}
+									class="input mt-1"
+								/>
+							</label>
+							{#if login_type == 'password'}
+								<label class="block w-120">
+									<div class="text-gray-700">password</div>
+									<input
+										type="password"
+										bind:value={newPassword}
+										class="
+							w-full
+							block
+							py-1
+							px-2
+							rounded-md
+							border
+							border-gray-300
+							shadow-sm
+							focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
+							text-sm
+							"
+									/>
+									<Button size="sm" btnClasses="mt-4" on:click={setPassword}>Set password</Button>
+								</label>
+							{:else if login_type == 'github'}
+								<span>Authentified through Github OAuth2. Cannot set a password.</span>
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				<div class="grid grid-cols-2 pt-8 pb-1">
+					<h2 class="py-0 my-0 border-b">Tokens</h2>
+					<div class="flex justify-end border-b pb-1">
+						<Button
+							size="sm"
+							startIcon={{ icon: faPlus }}
+							btnClasses={displayCreateToken ? 'hidden' : ''}
+							on:click={() => {
+								displayCreateToken = !displayCreateToken
+								newToken = undefined
+								newTokenExpiration = undefined
+								newTokenLabel = undefined
+							}}
+						>
+							Create token
+						</Button>
+					</div>
+				</div>
+				<div class="text-2xs text-gray-500 italic pb-6">
+					Authentify to the Windmill API with access tokens.
+				</div>
+
+				<div>
+					<div
+						class="{newToken
+							? ''
+							: 'hidden'} border rounded-md mb-6 px-2 py-2 bg-green-50 flex flex-row flex-wrap "
+					>
+						<div>
+							Added token: <button on:click={() => copyToClipboard(newToken ?? '')} class="inline"
+								>{truncate(newToken ?? '', 10, '****')} <Icon data={faClipboard} />
+							</button>
+						</div>
+						<div class="pt-1 text-xs text-right">
+							Make sure to copy your personal access token now. You won’t be able to see it again!
+						</div>
+					</div>
+
+					<!-- Token creation interface -->
+					<div
+						class="{displayCreateToken
+							? ''
+							: 'hidden'} py-3 px-3 border rounded-md mb-6 bg-gray-50 min-w-min"
+					>
+						<h3 class="pb-3 font-semibold">Add new token</h3>
+						<div class="flex flex-row flex-wrap gap-x-2 w-full justify-between">
+							<div class="flex flex-col">
+								<label for="label"
+									>Label <span class="text-xs text-gray-500">(optional)</span></label
+								>
+								<input type="text" bind:value={newTokenLabel} />
+							</div>
+							<div class="flex flex-col ">
+								<label for="expires"
+									>Expires on <span class="text-xs text-gray-500">(optional)</span>
+								</label>
+								<input
+									class="block md:w-1/2"
+									type="date"
+									id="expires"
+									name="expiration-date"
+									bind:value={newTokenExpiration}
+									min={getToday().getFullYear() +
+										'/' +
+										getToday().getMonth() +
+										'/' +
+										getToday().getDate()}
+									max={getToday().getFullYear() +
+										1 +
+										'/' +
+										getToday().getMonth() +
+										'/' +
+										getToday().getDate()}
+								/>
+							</div>
+							<div class="flex items-end">
+								<Button btnClasses="!mt-2" on:click={createToken}>Submit</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="overflow-auto">
+					<TableCustom>
+						<tr slot="header-row">
+							<th>prefix</th>
+							<th>label</th>
+							<th>expiration</th>
+							<th />
+						</tr>
+						<tbody slot="body">
+							{#if tokens && tokens.length > 0}
+								{#each tokens as { token_prefix, expiration, label }}
+									<tr>
+										<td class="grow">{token_prefix}****</td>
+										<td class="grow">{label ?? ''}</td>
+										<td class="grow">{displayDate(expiration ?? '')}</td>
+										<td class="grow"
+											><button
+												class="text-red-500 text-xs underline"
+												on:click={() => {
+													deleteToken(token_prefix)
+												}}>Delete</button
+											></td
+										>
+									</tr>
+								{/each}
+							{:else if tokens && tokens.length === 0}
+								<tr class="px-6"
+									><td class="text-gray-700 italic text-xs"> There are no tokens yet</td></tr
+								>
+							{:else}
+								<tr> Loading...</tr>
+							{/if}
+						</tbody>
+					</TableCustom>
+				</div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/components/UserSettings.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 UserSettingsProps = typeof __propDef.props;
+export declare type UserSettingsEvents = typeof __propDef.events;
+export declare type UserSettingsSlots = typeof __propDef.slots;
+export default class UserSettings extends SvelteComponentTyped<UserSettingsProps, UserSettingsEvents, UserSettingsSlots> {
+    get openDrawer(): () => void;
+    get toggleDrawer(): () => void;
+}
+export {};

package/components/VariableEditor.svelte

@@ -1,14 +1,16 @@
-<script>import Password from './Password.svelte';
-import { sendUserToast } from '../utils';
+<script>import { sendUserToast } from '../utils';
 import { VariableService } from '../gen';
-import AutosizedTextarea from './AutosizedTextarea.svelte';
 import Path from './Path.svelte';
-import Modal from './Modal.svelte';
 import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import Required from './Required.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Button } 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';
 const dispatch = createEventDispatcher();
 let path = '';
 let variable = {
@@ -17,7 +19,7 @@ let variable = {
     description: ''
 };
 let valid = true;
-let modal;
+let drawer;
 let edit = false;
 let initialPath;
 let pathError = '';
@@ -30,7 +32,7 @@ export function initNew() {
     edit = false;
     initialPath = '';
     path = '';
-    modal.openModal();
+    drawer.openDrawer();
 }
 export async function editVariable(path) {
     edit = true;
@@ -45,7 +47,7 @@ export async function editVariable(path) {
         description: getV.description ?? ''
     };
     initialPath = path;
-    modal.openModal();
+    drawer.openDrawer();
 }
 const MAX_VARIABLE_LENGTH = 3000;
 $: valid = variable.value.length <= MAX_VARIABLE_LENGTH;
@@ -61,7 +63,7 @@ async function createVariable() {
     });
     sendUserToast(`Successfully created variable ${path}`);
     dispatch('create');
-    modal.closeModal();
+    drawer.closeDrawer();
 }
 async function updateVariable() {
     try {
@@ -82,7 +84,7 @@ async function updateVariable() {
         });
         sendUserToast(`Successfully updated variable at ${initialPath}`);
         dispatch('create');
-        modal.closeModal();
+        drawer.closeDrawer();
     }
     catch (err) {
         sendUserToast(`Could not update variable: ${err.body}`, true);
@@ -90,80 +92,84 @@ async function updateVariable() {
 }
 </script>
 
-<Modal z="z-50" bind:this={modal}>
-	<div slot="title">
-		{#if edit}
-			Update variable at {initialPath}
-		{:else}
-			Add a variable
-		{/if}
-	</div>
-
-	<div slot="content">
-		<div class="text-gray-700 text-2xs mb-6">
-			Variables have a globally unique name represented by their path. When passed to scripts, <pre
-				class="inline text-red-700 bg-gray-50 rounded round-sm">/</pre
-			>
-			are converted to
-			<pre class="inline text-red-700 bg-gray-50 rounded round-sm">_</pre>
-		</div>
-
-		<div class="flex flex-col gap-2 ">
+<Drawer bind:this={drawer}>
+	<DrawerContent
+		title={edit ? `Update variable at ${initialPath}` : 'Add a variable'}
+		on:close={drawer.closeDrawer}
+	>
+		<div class="flex flex-col gap-6">
 			<div>
-				<div class="text-gray-700 mb-0 pb-0">path</div>
-				<Path
-					bind:error={pathError}
-					bind:path
-					{initialPath}
-					namePlaceholder="my_variable"
-					kind="variable"
-				/>
+				<div>
+					<div class="mb-1 font-semibold text-gray-700">General</div>
+					<Path
+						bind:error={pathError}
+						bind:path
+						{initialPath}
+						namePlaceholder="my_variable"
+						kind="variable"
+					/>
+				</div>
+				<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>
+					{/if}
+				</div>
 			</div>
-
-			<label class="block pb-6">
-				<input type="checkbox" bind:checked={variable.is_secret} />
-				<span class="ml-2">Secret</span>
-				{#if variable.is_secret}
-					<div
-						class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-1 mt-1 text-sm"
-						role="alert"
-					>
-						When a secret, you will not be able to read this variable value 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
-						>
-					</div>
-				{/if}
-			</label>
+			<!-- 
 			{#if variable.is_secret}
-				<div class="font-semibold text-gray-700 col-span-10 }">
+				<div class="mb-1 col-span-10">
 					<Password
 						bind:password={variable.value}
 						placeholder={'******** (only fill to update value)'}
-						label={`Secret value (${variable.value.length}/3000 characters)`}
+						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>
-					<span>Variable value ({variable.value.length}/3000 characters)</span>
-					<AutosizedTextarea bind:value={variable.value} minRows={5} />
+			{: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>
 				</div>
-			{/if}
+				<textarea
+					rows="4"
+					type="text"
+					use:autosize
+					bind:value={variable.value}
+					placeholder="My variable value"
+				/>
+			</div>
+			<!-- {/if} -->
 
-			<div class="flex flex-col w-full">
-				<span class="text-gray-700">Description<Required required={false} /></span>
-				<AutosizedTextarea bind:value={variable.description} placeholder={''} minRows={3} />
+			<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>
-	</div>
-	<div slot="submission">
-		<Button
-			size="sm"
-			on:click={() => (edit ? updateVariable() : createVariable())}
-			disabled={!valid || pathError != ''}
-		>
-			{edit ? 'Save' : 'Add a variable'}
-		</Button>
-	</div>
-</Modal>
+		<div slot="submission">
+			<Button
+				on:click={() => (edit ? updateVariable() : createVariable())}
+				disabled={!valid || pathError != ''}
+			>
+				{edit ? 'Save' : 'Add'}
+			</Button>
+		</div>
+	</DrawerContent>
+</Drawer>

package/components/common/actionRow/ActionRow.svelte

@@ -1,15 +1,16 @@
 <script>export let applyPageWidth = false;
 export let stickToTop = false;
-$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8 ' : '';
-let scrollY;
+$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8' : '';
+let scrollY = 0;
 </script>
 
 <svelte:window bind:scrollY />
 
 <div
 	class={'bg-white py-3 ' +
-		(stickToTop ? 'sticky top-0 ' + (scrollY >= 30 ? 'border-b ' : '') : '') +
-		$$props.class}
+		(stickToTop ? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 '
+			+ (scrollY >= 30 ? 'border-opacity-100 ' : '') : '')
+			+ ($$props.class || '')}
 >
 	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
 		<div class="flex flex-wrap items-center gap-2">

package/components/common/alert/Alert.svelte

@@ -37,7 +37,7 @@ const classes = {
 };
 </script>
 
-<div class={classNames('rounded-md p-4', classes[type].bgClass)}>
+<div class={classNames('rounded-md p-4', classes[type].bgClass, $$props.class)}>
 	<div class="flex">
 		<div class="flex h-8 w-8 items-center justify-center rounded-full">
 			<Icon data={icons[type]} class={classes[type].iconClass} />

package/components/common/alert/Alert.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { AlertType } from './model';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         type?: AlertType | undefined;
         title: string;
     };

package/components/common/badge/Badge.svelte

@@ -41,14 +41,14 @@ const hovers = {
 };
 $: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href &&
     (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', index
-    ? 'absolute flex justify-center items-center font-bold overflow-hidden border-2 border-white dark:border-gray-900 ' +
+    ? 'absolute flex justify-center items-center font-bold overflow-hidden border-2 border-white dark:border-gray-900' +
         (large ? 'w-7 h-7 -top-3.5 -right-3.5' : 'w-6 h-6 -top-3 -right-3')
     : '', $$props.class);
 $: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined };
 const handleHide = () => (hidden = !hidden);
 </script>
 
-<span class="inline-flex justify-center items-center">
+<span class="inline-flex justify-center items-center whitespace-nowrap">
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}

package/components/common/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,24 @@
+<script>import { createEventDispatcher } from 'svelte';
+import Button from '../button/Button.svelte';
+export let items;
+export let selectedIndex;
+export let disabled = false;
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex items-center justify-center">
+	{#each items as item, index}
+		{#if index > 0}
+			<slot name="separator" />
+		{/if}
+		<Button
+			size="sm"
+			color="light"
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-gray-500'}
+			on:click={() => dispatch('select', { index })}
+			disabled={selectedIndex - 1 === index ? disabled : false}
+		>
+			{item}
+		</Button>
+	{/each}
+</div>