windmill-components 1.55.1 → 1.55.2

package/components/GroupInfo.svelte

@@ -0,0 +1,22 @@
+<script>import { GroupService } from '../gen';
+import { workspaceStore } from '../stores';
+import Popover from './Popover.svelte';
+export let name;
+$: $workspaceStore && loadMembers();
+let members = [];
+async function loadMembers() {
+    members = (await GroupService.getGroup({ workspace: $workspaceStore, name })).members;
+}
+</script>
+
+{#if members}
+	<Popover
+		><div class="inline-flex gap-1 items-end"
+			><span class="text-gray-500 text-xs mb-0.5">({members.length})</span>
+			<div class="max-w-xs truncate"
+				><span class="text-gray-600 text-xs ">{members?.join(', ')}</span></div
+			></div
+		>
+		<span slot="text">{members?.join(', ')}</span></Popover
+	>
+{/if}

package/components/GroupInfo.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GroupInfoProps = typeof __propDef.props;
+export type GroupInfoEvents = typeof __propDef.events;
+export type GroupInfoSlots = typeof __propDef.slots;
+export default class GroupInfo extends SvelteComponentTyped<GroupInfoProps, GroupInfoEvents, GroupInfoSlots> {
+}
+export {};

package/components/InputTransformForm.svelte

@@ -6,6 +6,9 @@ import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/u
 import SimpleEditor from './SimpleEditor.svelte';
 import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
+import TemplateEditor from './TemplateEditor.svelte';
+import Tooltip from './Tooltip.svelte';
+import { escape } from 'svelte/internal';
 export let schema;
 export let arg;
 export let argName;
@@ -84,6 +87,9 @@ function onFocus() {
     }
 }
 const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
+$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg.value);
+const openBracket = '${';
+const closeBracket = '}';
 </script>
 
 {#if arg != undefined}
@@ -159,7 +165,11 @@ const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 				>
 					{#if isStaticTemplate(inputCat)}
 						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Templatable</ToggleButton
+							{'${} '}Templatable &nbsp; <Tooltip
+								>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
+								refer to contextual objects like 'flow_input', or 'result' or functions like
+								'resource' and 'variable'
+							</Tooltip></ToggleButton
 						>
 					{:else}
 						<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
@@ -192,7 +202,11 @@ const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 				Connect input &rightarrow;
 			</span>
 		{/if}
-		{#if propertyType === undefined || propertyType == 'static'}
+		{#if isStaticTemplate(inputCat) && propertyType == 'static'}
+			<div class="py-1">
+				<TemplateEditor {extraLib} on:focus={onFocus} bind:code={arg.value} />
+			</div>
+		{:else if propertyType === undefined || propertyType == 'static'}
 			<ArgInput
 				noMargin
 				compact
@@ -214,11 +228,6 @@ const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 				properties={schema.properties[argName].properties}
 				displayHeader={false}
 				bind:inputCat
-				on:input={(e) => {
-					if (isStaticTemplate(inputCat)) {
-						setPropertyType(e.detail.rawValue)
-					}
-				}}
 				{variableEditor}
 				{itemPicker}
 				bind:pickForField

package/components/MoveDrawer.svelte

@@ -0,0 +1,75 @@
+<script>import { isOwner } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { userStore, workspaceStore } from '../stores';
+import { Alert, Button, Drawer } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Path from './Path.svelte';
+import { FlowService, ScriptService } from '../gen';
+const dispatch = createEventDispatcher();
+let kind;
+let initialPath = '';
+let path = '';
+let drawer;
+let own = false;
+export async function openDrawer(initialPath_l, kind_l) {
+    kind = kind_l;
+    initialPath = initialPath_l;
+    await loadOwner();
+    drawer.openDrawer();
+}
+async function loadOwner() {
+    own = await isOwner(path, $userStore, $workspaceStore);
+}
+async function updatePath() {
+    if (kind == 'flow') {
+        const flow = await FlowService.getFlowByPath({
+            workspace: $workspaceStore,
+            path: initialPath
+        });
+        await FlowService.updateFlow({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path,
+                summary: flow.summary,
+                description: flow.description,
+                value: flow.value
+            }
+        });
+    }
+    else if (kind == 'script') {
+        const script = await ScriptService.getScriptByPath({
+            workspace: $workspaceStore,
+            path: initialPath
+        });
+        await ScriptService.createScript({
+            workspace: $workspaceStore,
+            requestBody: {
+                ...script,
+                description: script.description ?? '',
+                lock: script.lock?.split('\n'),
+                parent_hash: script.hash,
+                path
+            }
+        });
+    }
+    dispatch('update', path);
+    drawer.closeDrawer();
+}
+</script>
+
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Move {initialPath}" on:close={drawer.closeDrawer}>
+		<div class="flex flex-col gap-6">
+			<h1>Move {initialPath} to</h1>
+			{#if !own}
+				<Alert type="warning" title="Not owner"
+					>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
+				>
+			{/if}
+			<Path disabled={!own} {kind} {initialPath} bind:path />
+			<Button disabled={!own} on:click={updatePath}>Move</Button>
+			<div />
+		</div>
+	</DrawerContent>
+</Drawer>

package/components/MoveDrawer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: ((initialPath_l: string, kind_l: "flow" | "script" | "resource" | "app" | "schedule" | "variable") => Promise<void>) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MoveDrawerProps = typeof __propDef.props;
+export type MoveDrawerEvents = typeof __propDef.events;
+export type MoveDrawerSlots = typeof __propDef.slots;
+export default class MoveDrawer extends SvelteComponentTyped<MoveDrawerProps, MoveDrawerEvents, MoveDrawerSlots> {
+    get openDrawer(): (initialPath_l: string, kind_l: "flow" | "script" | "resource" | "app" | "schedule" | "variable") => Promise<void>;
+}
+export {};

package/components/Path.svelte

@@ -1,31 +1,37 @@
 <script>import { pathToMeta } from '../common';
-import { FlowService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
-import { GroupService } from '../gen';
+import { FlowService, FolderService, GroupService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
 import { superadmin, userStore, workspaceStore } from '../stores';
-import { sleep } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import Required from './Required.svelte';
-import Popover from './Popover.svelte';
-export let meta = {
-    ownerKind: 'user',
-    owner: '',
-    name: ''
-};
+import { Button, Drawer, DrawerContent } from './common';
+import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons';
+import ToggleButtonGroup from './common/toggleButton/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton/ToggleButton.svelte';
+import { Icon } from 'svelte-awesome';
+import Tooltip from './Tooltip.svelte';
+import FolderEditor from './FolderEditor.svelte';
+import GroupEditor from './GroupEditor.svelte';
+let meta = undefined;
 export let namePlaceholder = '';
 export let initialPath;
 export let path = '';
 export let error = '';
 export let disabled = false;
+export let checkInitialPathExistence = false;
 export let kind;
 let inputP = undefined;
 const dispatch = createEventDispatcher();
+let folders = [];
 let groups = [];
-$: path = metaToPath(meta);
-function metaToPath(meta) {
-    return [meta.ownerKind === 'group' ? 'g' : 'u', meta.owner, meta.name].join('/');
+$: meta && onMetaChange();
+function onMetaChange() {
+    if (meta) {
+        path = metaToPath(meta);
+        validate(meta, path, kind);
+    }
 }
-export function getPath() {
-    return path;
+function metaToPath(meta) {
+    return [meta.ownerKind?.charAt(0) ?? '', meta.owner, meta.name].join('/');
 }
 export function focus() {
     inputP?.focus();
@@ -39,29 +45,36 @@ function handleKeyUp(event) {
 }
 export async function reset() {
     if (path == '' || path == 'u//') {
-        meta.ownerKind = 'user';
-        while ($userStore == undefined) {
-            await sleep(500);
-        }
-        meta.owner = $userStore.username;
-        meta.name = namePlaceholder;
+        meta = { ownerKind: 'user', name: namePlaceholder, owner: '' };
+        meta.owner = $userStore.username.split('@')[0];
         let i = 1;
         while (await pathExists(metaToPath(meta), kind)) {
             meta.name = `${namePlaceholder}_${i}`;
             i += 1;
-            if (initialPath && initialPath != '') {
-                meta = pathToMeta(initialPath);
-            }
         }
+        path = metaToPath(meta);
     }
     else {
         meta = pathToMeta(path);
     }
 }
-$: validate(meta, path, kind);
+async function loadFolders() {
+    let initialFolders = [];
+    if (initialPath?.split('/')?.[0] == 'f') {
+        initialFolders.push(initialPath?.split('/')?.[1]);
+    }
+    folders = initialFolders.concat(await FolderService.listFolderNames({
+        workspace: $workspaceStore
+    }));
+}
 async function loadGroups() {
-    groups = await GroupService.listGroups({ workspace: $workspaceStore });
-    meta.owner = meta.owner;
+    let initialGroups = [];
+    if (initialPath?.split('/')?.[0] == 'f') {
+        initialGroups.push(initialPath?.split('/')?.[1]);
+    }
+    groups = initialGroups.concat(await GroupService.listGroupNames({
+        workspace: $workspaceStore
+    }));
 }
 async function validate(meta, path, kind) {
     error = '';
@@ -73,10 +86,11 @@ async function validatePath(path, kind) {
         clearTimeout(validateTimeout);
     }
     validateTimeout = setTimeout(async () => {
-        if ((path == '' || path != initialPath) && (await pathExists(path, kind))) {
+        if ((path == '' || checkInitialPathExistence || path != initialPath) &&
+            (await pathExists(path, kind))) {
             error = 'path already used';
         }
-        else if (validateName(meta)) {
+        else if (meta && validateName(meta)) {
             error = '';
         }
         validateTimeout = undefined;
@@ -120,99 +134,232 @@ function validateName(meta) {
         error = 'This name is not valid';
         return false;
     }
+    else if (meta.owner == '' && meta.ownerKind == 'folder') {
+        error = 'Folder need to be chosen';
+        return false;
+    }
+    else if (meta.owner == '' && meta.ownerKind == 'group') {
+        error = 'Group need to be chosen';
+        return false;
+    }
     else {
         return true;
     }
 }
 $: {
-    if ($workspaceStore) {
+    if ($workspaceStore && $userStore) {
+        loadFolders();
         loadGroups();
+        initPath();
     }
 }
-$: {
+function initPath() {
     if (initialPath == undefined || initialPath == '') {
         reset();
     }
     else {
         meta = pathToMeta(initialPath);
+        onMetaChange();
+        path = initialPath;
+    }
+}
+let newFolder;
+let viewFolder;
+let newFolderName;
+let folderCreated = undefined;
+async function addFolder() {
+    await FolderService.createFolder({
+        workspace: $workspaceStore ?? '',
+        requestBody: { name: newFolderName }
+    });
+    folderCreated = newFolderName;
+    if (meta) {
+        meta.owner = newFolderName;
+    }
+    loadFolders();
+}
+let newGroup;
+let viewGroup;
+let newGroupName;
+let groupCreated = undefined;
+async function addGroup() {
+    await GroupService.createGroup({
+        workspace: $workspaceStore ?? '',
+        requestBody: { name: newGroupName }
+    });
+    groupCreated = newGroupName;
+    if (meta) {
+        meta.owner = newGroupName;
     }
+    loadGroups();
 }
 </script>
 
+<Drawer bind:this={newGroup}>
+	<DrawerContent
+		title="New Folder"
+		on:close={() => {
+			newGroup.closeDrawer()
+			groupCreated = undefined
+		}}
+	>
+		<div class="flex flex-row">
+			<input class="mr-2" placeholder="New group name" bind:value={newGroupName} />
+			<Button size="md" startIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
+				New&nbsp;group
+			</Button>
+		</div>
+		{#if groupCreated}
+			<div class="mt-8" />
+			<GroupEditor name={groupCreated} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+<Drawer bind:this={viewGroup}>
+	<DrawerContent title="Folder {meta?.owner}" on:close={viewGroup.closeDrawer}>
+		<GroupEditor name={meta?.owner ?? ''} />
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={newFolder}>
+	<DrawerContent
+		title="New Folder"
+		on:close={() => {
+			newFolder.closeDrawer()
+			folderCreated = undefined
+		}}
+	>
+		<div class="flex flex-row">
+			<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
+			<Button size="md" startIcon={{ icon: faPlus }} disabled={!newFolderName} on:click={addFolder}>
+				New&nbsp;folder
+			</Button>
+		</div>
+
+		{#if folderCreated}
+			<div class="mt-8" />
+			<FolderEditor name={folderCreated} />
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={viewFolder}>
+	<DrawerContent title="Folder {meta?.owner}" on:close={viewFolder.closeDrawer}>
+		<FolderEditor name={meta?.owner ?? ''} />
+	</DrawerContent>
+</Drawer>
+
 <div>
-	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
-		<label class="block">
-			<span class="text-gray-700 text-sm whitespace-nowrap">
-				<Popover
-					>Owner Kind
-					<span slot="text"
-						>Select the group <span class="font-mono">all</span>
-						to share it with all workspace users, and <span class="font-mono">user</span> to keep it
-						private.
-						<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-					</span>
-				</Popover>
-			</span>
+	<div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 pb-0 mb-1">
+		{#if meta != undefined}
+			<div class="flex gap-4 shrink">
+				<label class="block">
+					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
+
+					<ToggleButtonGroup
+						class="mt-0.5"
+						bind:selected={meta.ownerKind}
+						on:selected={(e) => {
+							const kind = e.detail
+							if (meta) {
+								if (kind === 'folder') {
+									meta.owner = $userStore?.folders?.[0] ?? ''
+								} else if (kind === 'group') {
+									meta.owner = 'all'
+								} else {
+									meta.owner = $userStore?.username?.split('@')[0] ?? ''
+								}
+							}
+						}}
+					>
+						<ToggleButton light size="xs" value="user" position="left">User</ToggleButton>
+						<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
+						<ToggleButton light size="xs" value="folder" position="right">Folder</ToggleButton>
+					</ToggleButtonGroup>
+				</label>
+				{#if meta.ownerKind === 'user'}
+					<label class="block shrink min-w-0">
+						<span class="text-gray-700 text-sm">User</span>
+						<input
+							class="!w-36"
+							type="text"
+							bind:value={meta.owner}
+							placeholder={$userStore?.username ?? ''}
+							disabled={!($superadmin || ($userStore?.is_admin ?? false))}
+						/>
+					</label>
+				{:else if meta.ownerKind === 'folder'}
+					<label class="block grow w-48">
+						<span class="text-gray-700 text-sm"
+							>Folder <Tooltip
+								>Read and write permissions are given to groups and users at the folder level and
+								shared by all items inside the folder.</Tooltip
+							></span
+						>
 
-			<select
-				{disabled}
-				bind:value={meta.ownerKind}
-				on:change={() => {
-					if (meta.ownerKind === 'group') {
-						meta.owner = 'all'
-					} else {
-						meta.owner = $userStore?.username ?? ''
-					}
-				}}
-			>
-				<option>user</option>
-				<option>group</option>
-			</select>
-		</label>
-		{#if meta.ownerKind === 'user'}
-			<label class="block">
-				<span class="text-gray-700 text-sm">Owner</span>
+						<div class="flex flex-row gap-1 w-full">
+							<select class="grow w-full" {disabled} bind:value={meta.owner}>
+								{#each folders as f}
+									<option>{f}</option>
+								{/each}
+							</select>
+							<Button variant="border" size="xs" on:click={viewFolder.openDrawer}>
+								<Icon scale={0.8} data={faEye} /></Button
+							>
+							<Button variant="border" size="xs" on:click={newFolder.openDrawer}>
+								<Icon scale={0.8} data={faPlus} /></Button
+							></div
+						>
+					</label>
+				{:else if meta.ownerKind === 'group'}
+					<label class="block grow w-48">
+						<span class="text-gray-700 text-sm"
+							>Group <Tooltip>Item will be owned by the group and hence all its member</Tooltip
+							></span
+						>
+
+						<div class="flex flex-row gap-1">
+							<select class="grow w-full" {disabled} bind:value={meta.owner}>
+								{#each groups as g}
+									<option>{g}</option>
+								{/each}
+							</select>
+							<Button variant="border" size="xs" on:click={viewGroup.openDrawer}>
+								<Icon scale={0.8} data={faEye} /></Button
+							>
+							<Button variant="border" size="xs" on:click={newGroup.openDrawer}>
+								<Icon scale={0.8} data={faPlus} /></Button
+							></div
+						>
+					</label>
+				{/if}
+			</div>
+			<label class="block grow w-full max-w-md">
+				<span class="text-gray-700 text-sm">
+					Name
+					<Required required={true} />
+				</span>
 				<input
+					{disabled}
 					type="text"
-					bind:value={meta.owner}
-					placeholder={$userStore?.username ?? ''}
-					disabled={!($superadmin || ($userStore?.is_admin ?? false))}
+					id="path"
+					autofocus
+					bind:this={inputP}
+					autocomplete="off"
+					on:keyup={handleKeyUp}
+					bind:value={meta.name}
+					placeholder={namePlaceholder}
+					class={error === ''
+						? ''
+						: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
 				/>
 			</label>
-		{:else}
-			<label class="block">
-				<span class="text-gray-700 text-sm">Owner</span>
-				<select {disabled} bind:value={meta.owner}>
-					{#each groups as g}
-						<option>{g.name}</option>
-					{/each}
-				</select>
-			</label>
 		{/if}
-		<label class="block col-span-2">
-			<span class="text-gray-700 text-sm">
-				Name
-				<Required required={true} />
-			</span>
-			<input
-				{disabled}
-				type="text"
-				id="path"
-				autofocus
-				bind:this={inputP}
-				autocomplete="off"
-				on:keyup={handleKeyUp}
-				bind:value={meta.name}
-				placeholder={namePlaceholder}
-				class={error === ''
-					? ''
-					: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-			/>
-		</label>
 	</div>
-	<div class="pt-0 text-xs px-1 flex flex-col-reverse sm:grid sm:grid-cols-4 sm:gap-4 w-full">
-		<div class="col-span-2"><span class="font-mono">{path}</span></div>
-		<div class="text-red-600 text-2xs col-span-2">{error}</div>
+
+	<div class="flex-row flex justify-between">
+		<div><span class="font-mono text-sm">{path}</span></div>
+		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>
 

package/components/Path.svelte.d.ts

@@ -1,15 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Meta } from '../common';
 declare const __propDef: {
     props: {
-        meta?: Meta | undefined;
         namePlaceholder?: string | undefined;
         initialPath: string;
         path?: string | undefined;
         error?: string | undefined;
         disabled?: boolean | undefined;
+        checkInitialPathExistence?: boolean | undefined;
         kind: "flow" | "script" | "resource" | "app" | "schedule" | "variable";
-        getPath?: (() => string) | undefined;
         focus?: (() => void) | undefined;
         reset?: (() => Promise<void>) | undefined;
     };
@@ -24,7 +22,6 @@ export type PathProps = typeof __propDef.props;
 export type PathEvents = typeof __propDef.events;
 export type PathSlots = typeof __propDef.slots;
 export default class Path extends SvelteComponentTyped<PathProps, PathEvents, PathSlots> {
-    get getPath(): () => string;
     get focus(): () => void;
     get reset(): () => Promise<void>;
 }

package/components/RadioButton.svelte

@@ -1,6 +1,7 @@
 <script>export let label = '';
 export let options;
 export let value;
+export let disabled = false;
 import { createEventDispatcher } from 'svelte';
 import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
@@ -16,6 +17,7 @@ const dispatch = createEventDispatcher();
 				{val === value ? '!bg-blue-50 !border-blue-500' : ''}"
 			>
 				<input
+					{disabled}
 					type="radio"
 					value={val}
 					class="sr-only"

package/components/RadioButton.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
             desc: string;
         }, any][];
         value: any;
+        disabled?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;