windmill-components 1.55.1 → 1.55.2

package/components/ScriptPicker.svelte

@@ -6,14 +6,17 @@ import { getScriptByPath } from '../utils';
 import RadioButton from './RadioButton.svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import HighlightCode from './HighlightCode.svelte';
+import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
 export let initialPath = undefined;
 export let scriptPath = undefined;
 export let allowFlow = false;
 export let allowHub = false;
 export let itemKind = allowHub ? 'hub' : 'script';
 export let kind = Script.kind.SCRIPT;
+export let disabled = false;
 let items = [];
 let drawerViewer;
+let drawerFlowViewer;
 let code = '';
 let lang;
 let options = [['Script', 'script']];
@@ -44,41 +47,64 @@ async function loadItems() {
 $: itemKind && $workspaceStore && loadItems();
 </script>
 
+<Drawer bind:this={drawerViewer} size="900px">
+	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>
+		<HighlightCode {code} language={lang} />
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:this={drawerFlowViewer} size="900px">
+	<DrawerContent title="Flow {scriptPath}" on:close={drawerFlowViewer.closeDrawer}>
+		<FlowPathViewer path={scriptPath ?? ''} />
+	</DrawerContent>
+</Drawer>
+
 <div class="flex flex-row  items-center gap-4 w-full">
 	{#if options.length > 1}
 		<div class="w-80 mt-1">
-			<RadioButton bind:value={itemKind} {options} />
+			<RadioButton {disabled} bind:value={itemKind} {options} />
 		</div>
 	{/if}
 
-	<Select
-		value={items.find((x) => x.value == initialPath)}
-		class="grow"
-		on:change={() => {
-			dispatch('select', { path: scriptPath })
-		}}
-		bind:justValue={scriptPath}
-		{items}
-		placeholder="Pick a {itemKind}"
-	/>
-	{#if scriptPath !== undefined && scriptPath !== ''}
-		<Button
-			color="light"
-			size="xs"
-			on:click={async () => {
-				const { language, content } = await getScriptByPath(scriptPath ?? '')
-				code = content
-				lang = language
-				drawerViewer.openDrawer()
+	{#if disabled}
+		<input type="text" value={scriptPath} disabled />
+	{:else}
+		<Select
+			value={items.find((x) => x.value == initialPath)}
+			class="grow"
+			on:change={() => {
+				dispatch('select', { path: scriptPath })
 			}}
-		>
-			Show code
-		</Button>
+			bind:justValue={scriptPath}
+			{items}
+			placeholder="Pick a {itemKind}"
+		/>
 	{/if}
-</div>
 
-<Drawer bind:this={drawerViewer}>
-	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>
-		<HighlightCode {code} language={lang} />
-	</DrawerContent>
-</Drawer>
+	{#if scriptPath !== undefined && scriptPath !== ''}
+		{#if itemKind == 'flow'}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					drawerFlowViewer.openDrawer()
+				}}
+			>
+				Show flow
+			</Button>
+		{:else}
+			<Button
+				color="light"
+				size="xs"
+				on:click={async () => {
+					const { language, content } = await getScriptByPath(scriptPath ?? '')
+					code = content
+					lang = language
+					drawerViewer.openDrawer()
+				}}
+			>
+				Show code
+			</Button>
+		{/if}
+	{/if}
+</div>

package/components/ScriptPicker.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         allowHub?: boolean | undefined;
         itemKind?: "flow" | "script" | "hub" | undefined;
         kind?: Script.kind | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/ShareModal.svelte

@@ -1,16 +1,16 @@
 <script>import TableCustom from './TableCustom.svelte';
 import { GranularAclService } from '../gen/services/GranularAclService';
-import { sendUserToast } from '../utils';
+import { isOwner, sendUserToast } from '../utils';
 import { GroupService, UserService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
-import { workspaceStore } from '../stores';
-import { Alert, Button, Drawer } from './common';
+import { userStore, workspaceStore } from '../stores';
+import { Alert, Button, Drawer, ToggleButton, ToggleButtonGroup } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
-export let kind;
-export let path = '';
+let kind;
+let path = '';
 let ownerKind = 'user';
 let owner = '';
 let newOwner = '';
@@ -20,15 +20,19 @@ let groups = [];
 let usernames = [];
 let drawer;
 $: newOwner = [ownerKind === 'group' ? 'g' : 'u', owner].join('/');
-export async function openDrawer(newPath) {
-    if (newPath) {
-        path = newPath;
-    }
+let own = false;
+export async function openDrawer(newPath, kind_l) {
+    path = newPath;
+    kind = kind_l;
     loadAcls();
     loadGroups();
     loadUsernames();
+    await loadOwner();
     drawer.openDrawer();
 }
+async function loadOwner() {
+    own = await isOwner(path, $userStore, $workspaceStore);
+}
 async function loadAcls() {
     acls = Object.entries(await GranularAclService.getGranularAcls({ workspace: $workspaceStore, path, kind }));
 }
@@ -47,7 +51,7 @@ async function deleteAcl(owner) {
             requestBody: { owner }
         });
         loadAcls();
-        dispatch('change');
+        dispatch('change', { path, kind });
     }
     catch (err) {
         sendUserToast(err.toString(), true);
@@ -61,76 +65,93 @@ async function addAcl(owner, write) {
         requestBody: { owner, write }
     });
     loadAcls();
-    dispatch('change');
+    dispatch('change', { path, kind });
 }
 </script>
 
 <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-col gap-6">
+			<h1>{path}</h1>
+			<h2
+				>Extra Permissions ({acls?.length ?? 0}) &nbsp; <Tooltip
+					>Items already have default permissions. If belonging to an user or group, that group or
+					user owns it and can write to it as well as modify its permisions and move it. Folders
+					have read/write that apply to the whole folder and are additive to the items permissions.</Tooltip
+				></h2
 			>
-			<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>
+			{#if !own}
+				<Alert type="warning" title="Not owner"
+					>Since you do not own this item, you cannot modify its permission</Alert
+				>
+			{/if}
+			<div>
+				{#if own}
+					<div class="flex flex-row flex-wrap gap-2 items-center">
+						<div>
+							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
+								<ToggleButton position="left" value="user" size="xs">User</ToggleButton>
+								<ToggleButton position="right" value="group" size="xs">Group</ToggleButton>
+							</ToggleButtonGroup>
 						</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>
-				<div class="mt-2">
-					<Button size="sm" on:click={() => addAcl(newOwner, write)}>Add permission</Button>
-				</div>
+						{#key ownerKind}
+							<AutoComplete
+								items={ownerKind === 'user' ? usernames : groups}
+								bind:selectedItem={owner}
+							/>
+						{/key}
+						<Button size="sm" on:click={() => addAcl(newOwner, write)}>Add permission</Button>
+					</div>
+				{/if}
+				<TableCustom>
+					<tr slot="header-row">
+						<th>owner</th>
+						<th />
+						<th />
+					</tr>
+					<tbody slot="body">
+						{#each acls as [owner, write]}
+							<tr>
+								<td>{owner}</td>
+								<td
+									>{#if own}
+										<div>
+											<ToggleButtonGroup
+												selected={write ? 'writer' : 'viewer'}
+												on:selected={async (e) => {
+													const role = e.detail
+													if (role == 'writer') {
+														await addAcl(owner, true)
+													} else {
+														await addAcl(owner, false)
+													}
+													loadAcls()
+												}}
+											>
+												<ToggleButton position="left" value="viewer" size="xs">Viewer</ToggleButton>
+												<ToggleButton position="right" value="writer" size="xs">Writer</ToggleButton
+												>
+											</ToggleButtonGroup>
+										</div>
+									{:else}{write}{/if}</td
+								>
+								<td>
+									{#if own}
+										<Button
+											variant="border"
+											color="red"
+											size="xs"
+											on:click={() => deleteAcl(owner)}
+										>
+											Delete
+										</Button>
+									{/if}
+								</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="red" size="sm" on:click={() => deleteAcl(owner)}>
-									Delete
-								</Button>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</TableCustom>
 		</div>
 	</DrawerContent>
 </Drawer>

package/components/ShareModal.svelte.d.ts

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

package/components/SimpleEditor.svelte

@@ -1,4 +1,5 @@
 <script context="module">import * as monaco from 'monaco-editor';
+import libStdContent from '../es5.d.ts.txt?raw';
 monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
@@ -129,16 +130,20 @@ async function loadMonaco() {
         code = getCode();
         dispatch('blur');
     });
-    if (lang == 'javascript' && extraLib != '') {
-        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
-            {
-                content: extraLib,
-                filePath: 'windmill.d.ts'
-            }
-        ]);
-    }
-    else {
-        monaco.languages.typescript.javascriptDefaults.setExtraLibs([]);
+    if (lang == 'javascript') {
+        const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
+        if (extraLib != '') {
+            monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+                {
+                    content: extraLib,
+                    filePath: 'windmill.d.ts'
+                },
+                stdLib
+            ]);
+        }
+        else {
+            monaco.languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+        }
     }
 }
 onMount(() => {