windmill-components 1.55.0 → 1.55.2

package/components/FolderEditor.svelte

@@ -0,0 +1,299 @@
+<script>import { userStore, workspaceStore } from '../stores';
+import { FolderService, UserService, GranularAclService, GroupService } from '../gen';
+import AutoComplete from 'simple-svelte-autocomplete';
+import TableCustom from './TableCustom.svelte';
+import { Alert, Button, ToggleButton, ToggleButtonGroup } from './common';
+import Skeleton from './common/skeleton/Skeleton.svelte';
+import Tooltip from './Tooltip.svelte';
+export let name;
+let can_write = false;
+let folder;
+let perms = undefined;
+let managing_folders = [];
+let usernames = [];
+let groups = [];
+let ownerItem = '';
+let folders = [];
+async function loadUsernames() {
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
+}
+async function loadGroups() {
+    groups = await GroupService.listGroupNames({ workspace: $workspaceStore });
+}
+$: {
+    if ($workspaceStore && $userStore) {
+        load();
+    }
+}
+async function load() {
+    loadUsernames();
+    loadGroups();
+    loadFolders();
+    await loadFolder();
+}
+async function loadFolders() {
+    folders = (await FolderService.listFolders({ workspace: $workspaceStore })).map((x) => x.name);
+}
+async function addToFolder() {
+    await GranularAclService.addGranularAcls({
+        workspace: $workspaceStore ?? '',
+        path: name,
+        kind: 'folder',
+        requestBody: {
+            owner: (ownerKind == 'user' ? 'u/' : 'g/') + ownerItem
+        }
+    });
+    loadFolder();
+}
+async function loadFolder() {
+    folder = await FolderService.getFolder({ workspace: $workspaceStore, name });
+    can_write =
+        $userStore != undefined &&
+            (folder?.owners.includes('u/' + $userStore.username) ||
+                ($userStore.is_admin ?? false) ||
+                $userStore.pgroups.findIndex((x) => folder?.owners.includes(x)) != -1);
+    perms = Array.from(new Set(Object.entries(folder?.extra_perms ?? {})
+        .map((x) => x[0])
+        .concat(folder?.owners ?? []))).map((x) => {
+        return {
+            owner_name: x,
+            role: getRole(x)
+        };
+    });
+    managing_folders = Object.entries(folder?.extra_perms ?? {})
+        .filter(([k, v]) => k.startsWith('g/') && v)
+        .map(([k, v]) => k);
+}
+function getRole(x) {
+    const viewer = x in (folder?.extra_perms ?? {});
+    const writer = viewer && (folder?.extra_perms ?? {})[x];
+    const owner = folder?.owners?.includes(x);
+    if (owner) {
+        return 'admin';
+    }
+    else if (writer) {
+        return 'writer';
+    }
+    else {
+        return 'viewer';
+    }
+}
+let ownerKind = 'user';
+</script>
+
+<div class="flex flex-col gap-6">
+	<h1>{name}</h1>
+	<h2>Permissions ({perms?.length ?? 0})</h2>
+	{#if can_write}
+		<Alert role="info" title="New permissions may take up to 60s to apply"
+			><span class="text-xs text-gray-500">Due to permissions cache invalidation</span></Alert
+		>
+		<div class="flex items-center gap-1">
+			<div>
+				<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (ownerItem = '')}>
+					<ToggleButton position="left" value="user" size="xs">User</ToggleButton>
+					<ToggleButton position="right" value="group" size="xs">Group</ToggleButton>
+				</ToggleButtonGroup>
+			</div>
+			{#key ownerKind}
+				<AutoComplete
+					items={ownerKind === 'user' ? usernames : groups}
+					bind:selectedItem={ownerItem}
+				/>
+			{/key}
+			<Button
+				disabled={ownerItem == ''}
+				variant="contained"
+				color="blue"
+				size="sm"
+				on:click={addToFolder}
+			>
+				Grant permission to folder
+			</Button>
+		</div>
+	{/if}
+	{#if perms}
+		<TableCustom>
+			<tr slot="header-row">
+				<th>user</th>
+				<th />
+				<th />
+			</tr>
+			<tbody slot="body">
+				{#each perms as { owner_name, role }}<tr>
+						<td>{owner_name}</td>
+						<td>
+							{#if can_write}
+								<div>
+									<ToggleButtonGroup
+										selected={role}
+										on:selected={async (e) => {
+											const role = e.detail
+											// const wasInFolder = (folder?.owners ?? []).includes(folder)
+											// const inAcl = (
+											// 	folder?.extra_perms ? Object.keys(folder?.extra_perms) : []
+											// ).includes(folder)
+											if (role == 'admin') {
+												await FolderService.addOwnerToFolder({
+													workspace: $workspaceStore ?? '',
+													name,
+													requestBody: {
+														owner: owner_name
+													}
+												})
+												await GranularAclService.addGranularAcls({
+													workspace: $workspaceStore ?? '',
+													path: name,
+													kind: 'folder',
+													requestBody: {
+														owner: owner_name
+													}
+												})
+											} else if (role == 'writer') {
+												await FolderService.removeOwnerToFolder({
+													workspace: $workspaceStore ?? '',
+													name,
+													requestBody: {
+														owner: owner_name
+													}
+												})
+												await GranularAclService.addGranularAcls({
+													workspace: $workspaceStore ?? '',
+													path: name,
+													kind: 'folder',
+													requestBody: {
+														owner: owner_name,
+														write: true
+													}
+												})
+											} else if (role == 'viewer') {
+												await FolderService.removeOwnerToFolder({
+													workspace: $workspaceStore ?? '',
+													name,
+													requestBody: {
+														owner: owner_name
+													}
+												})
+												await GranularAclService.addGranularAcls({
+													workspace: $workspaceStore ?? '',
+													path: name,
+													kind: 'folder',
+													requestBody: {
+														owner: owner_name,
+														write: false
+													}
+												})
+											}
+											loadFolder()
+										}}
+									>
+										<ToggleButton position="left" value="viewer" size="xs"
+											>Viewer&nbsp;<Tooltip
+												>A viewer of a folder has read-only access to all the elements
+												(scripts/flows/apps/schedules/resources/variables) inside the folder</Tooltip
+											></ToggleButton
+										>
+										<ToggleButton position="center" value="writer" size="xs"
+											>Writer&nbsp;<Tooltip
+												>A viewer of a folder has read AND write access to all the elements
+												(scripts/flows/apps/schedules/resources/variables) inside the folder</Tooltip
+											></ToggleButton
+										>
+										<ToggleButton position="right" value="admin" size="xs"
+											>Admin&nbsp;<Tooltip
+												>An admin of a folder has read AND write access to all the elements inside
+												the folders and can manage the permissions as well as add new admins</Tooltip
+											></ToggleButton
+										>
+									</ToggleButtonGroup>
+								</div>
+							{:else}
+								{role}
+							{/if}</td
+						>
+						<td>
+							{#if can_write}
+								<button
+									class="ml-2 text-red-500"
+									on:click={async () => {
+										await FolderService.removeOwnerToFolder({
+											workspace: $workspaceStore ?? '',
+											name,
+											requestBody: { owner: owner_name }
+										})
+										await GranularAclService.removeGranularAcls({
+											workspace: $workspaceStore ?? '',
+											path: name,
+											kind: 'folder',
+											requestBody: {
+												owner: owner_name
+											}
+										})
+										loadFolder()
+									}}>remove</button
+								>
+							{/if}</td
+						>
+					</tr>{/each}
+			</tbody>
+		</TableCustom>
+		<!-- <h2 class="mt-10"
+			>Folders managing this folder <Tooltip
+				>Any owner of those folders can manage this folder</Tooltip
+			></h2
+		>
+		{#if can_write}
+			<div class="flex items-start">
+				<AutoComplete items={folders} bind:selectedItem={new_managing_folder} />
+				<Button
+					variant="contained"
+					color="blue"
+					size="sm"
+					btnClasses="!ml-4"
+					on:click={addToManagingFolder}
+				>
+					Add folder managing this folder
+				</Button>
+			</div>
+		{/if} -->
+		<!-- {#if managing_folders.length == 0}
+			<p class="text-gray-600 text-sm">No folder is managing this folder</p>
+		{:else}
+			<TableCustom>
+				<tr slot="header-row">
+					<th>folder</th>
+					<th />
+				</tr>
+				<tbody slot="body">
+					{#each managing_folders as managing_folder}<tr>
+							<td>{managing_folder.split('/')[1]}</td>
+							<td>
+								{#if can_write}
+									<button
+										class="ml-2 text-red-500"
+										on:click={async () => {
+											await GranularAclService.removeGranularAcls({
+												workspace: $workspaceStore ?? '',
+												path: name,
+												kind: 'folder',
+												requestBody: {
+													owner: managing_folder
+												}
+											})
+											loadFolder()
+										}}>remove</button
+									>
+								{/if}</td
+							>
+						</tr>{/each}
+				</tbody>
+			</TableCustom>
+		{/if} -->
+	{:else}
+		<div class="flex flex-col">
+			{#each new Array(6) as _}
+				<Skeleton layout={[[2], 0.7]} />
+			{/each}
+		</div>
+	{/if}
+</div>

package/components/FolderEditor.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 FolderEditorProps = typeof __propDef.props;
+export type FolderEditorEvents = typeof __propDef.events;
+export type FolderEditorSlots = typeof __propDef.slots;
+export default class FolderEditor extends SvelteComponentTyped<FolderEditorProps, FolderEditorEvents, FolderEditorSlots> {
+}
+export {};

package/components/FolderInfo.svelte

@@ -0,0 +1,13 @@
+<script>import Popover from './Popover.svelte';
+export let members;
+</script>
+
+<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
+>

package/components/FolderInfo.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        members: string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FolderInfoProps = typeof __propDef.props;
+export type FolderInfoEvents = typeof __propDef.events;
+export type FolderInfoSlots = typeof __propDef.slots;
+export default class FolderInfo extends SvelteComponentTyped<FolderInfoProps, FolderInfoEvents, FolderInfoSlots> {
+}
+export {};

package/components/FolderUsageInfo.svelte

@@ -0,0 +1,17 @@
+<script>import { FolderService, GroupService } from '../gen';
+import { workspaceStore } from '../stores';
+export let name;
+$: $workspaceStore && loadUsage();
+let usage = {};
+async function loadUsage() {
+    usage = await FolderService.getFolderUsage({ workspace: $workspaceStore, name });
+}
+</script>
+
+<div class="flex flex-col text-xs text-gray-600">
+	{#each Object.entries(usage) as [k, v]}
+		<div>
+			{k}: {v}
+		</div>
+	{/each}
+</div>

package/components/FolderUsageInfo.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 FolderUsageInfoProps = typeof __propDef.props;
+export type FolderUsageInfoEvents = typeof __propDef.events;
+export type FolderUsageInfoSlots = typeof __propDef.slots;
+export default class FolderUsageInfo extends SvelteComponentTyped<FolderUsageInfoProps, FolderUsageInfoEvents, FolderUsageInfoSlots> {
+}
+export {};

package/components/GroupEditor.svelte

@@ -0,0 +1,287 @@
+<script>import { userStore, workspaceStore } from '../stores';
+import { GroupService, UserService, GranularAclService } from '../gen';
+import AutoComplete from 'simple-svelte-autocomplete';
+import TableCustom from './TableCustom.svelte';
+import { canWrite, sendUserToast } from '../utils';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import Skeleton from './common/skeleton/Skeleton.svelte';
+import Tooltip from './Tooltip.svelte';
+import autosize from 'svelte-autosize';
+import { createEventDispatcher } from 'svelte';
+export let name;
+let can_write = false;
+let group;
+let members = undefined;
+let managing_groups = [];
+let usernames = [];
+let username = '';
+let groups = [];
+const dispatch = createEventDispatcher();
+async function loadUsernames() {
+    usernames = await UserService.listUsernames({ workspace: $workspaceStore });
+}
+$: {
+    if ($workspaceStore && $userStore) {
+        load();
+    }
+}
+async function load() {
+    loadGroups();
+    await loadGroup();
+    loadUsernames();
+}
+async function loadGroups() {
+    groups = (await GroupService.listGroups({ workspace: $workspaceStore })).map((x) => x.name);
+}
+async function addToGroup() {
+    await GroupService.addUserToGroup({
+        workspace: $workspaceStore ?? '',
+        name,
+        requestBody: { username }
+    });
+    loadGroup();
+}
+async function loadGroup() {
+    group = await GroupService.getGroup({ workspace: $workspaceStore, name });
+    can_write = canWrite(name, group.extra_perms ?? {}, $userStore);
+    members = Array.from(new Set(Object.entries(group?.extra_perms ?? {})
+        .filter(([k, v]) => k.startsWith('u/') && v)
+        .map(([k, _]) => k.split('/')[1])
+        .concat(group?.members ?? []))).map((x) => {
+        return {
+            member_name: x,
+            role: getRole(x)
+        };
+    });
+    managing_groups = Object.entries(group?.extra_perms ?? {})
+        .filter(([k, v]) => k.startsWith('g/') && v)
+        .map(([k, v]) => k);
+}
+function getRole(x) {
+    const writer = 'u/' + x in (group?.extra_perms ?? {}) && (group?.extra_perms ?? {})['u/' + x];
+    const member = group?.members?.includes(x);
+    if (writer && member) {
+        return 'admin';
+    }
+    else if (writer) {
+        return 'manager';
+    }
+    else {
+        return 'member';
+    }
+}
+</script>
+
+<div class="flex flex-col gap-6">
+	<h1>{name}</h1>
+	{#if group}
+		<div class="flex flex-col gap-1">
+			<textarea
+				disabled={!can_write}
+				rows="2"
+				type="text"
+				use:autosize
+				bind:value={group.summary}
+				placeholder="Summary of the group"
+			/>
+			<Button
+				size="xs"
+				on:click={async () => {
+					await GroupService.updateGroup({
+						workspace: $workspaceStore ?? '',
+						name,
+						requestBody: { summary: group?.summary }
+					})
+					dispatch('update')
+					sendUserToast('New summary saved')
+				}}>Save Summary</Button
+			>
+		</div>
+	{:else}
+		<Skeleton layout={[[4]]} />
+	{/if}
+	<h2>Members ({members?.length ?? 0})</h2>
+	{#if can_write}
+		<div class="flex items-start">
+			<AutoComplete items={usernames} bind:selectedItem={username} />
+			<Button variant="contained" color="blue" size="sm" btnClasses="!ml-4" on:click={addToGroup}>
+				Add member
+			</Button>
+		</div>
+	{/if}
+	{#if members}
+		<TableCustom>
+			<tr slot="header-row">
+				<th>user</th>
+				<th />
+				<th />
+			</tr>
+			<tbody slot="body">
+				{#each members as { member_name, role }}<tr>
+						<td>{member_name}</td>
+						<td>
+							{#if can_write}
+								<div>
+									<ToggleButtonGroup
+										selected={role}
+										on:selected={async (e) => {
+											const role = e.detail
+											// const wasInGroup = (group?.members ?? []).includes(group)
+											// const inAcl = (
+											// 	group?.extra_perms ? Object.keys(group?.extra_perms) : []
+											// ).includes(group)
+											if (role == 'member') {
+												await GroupService.addUserToGroup({
+													workspace: $workspaceStore ?? '',
+													name,
+													requestBody: {
+														username: member_name
+													}
+												})
+												await GranularAclService.removeGranularAcls({
+													workspace: $workspaceStore ?? '',
+													path: name,
+													kind: 'group_',
+													requestBody: {
+														owner: 'u/' + member_name
+													}
+												})
+											} else if (role == 'manager') {
+												await GroupService.removeUserToGroup({
+													workspace: $workspaceStore ?? '',
+													name,
+													requestBody: {
+														username: member_name
+													}
+												})
+												await GranularAclService.addGranularAcls({
+													workspace: $workspaceStore ?? '',
+													path: name,
+													kind: 'group_',
+													requestBody: {
+														owner: 'u/' + member_name,
+														write: true
+													}
+												})
+											} else if (role == 'admin') {
+												await GroupService.addUserToGroup({
+													workspace: $workspaceStore ?? '',
+													name,
+													requestBody: {
+														username: member_name
+													}
+												})
+												await GranularAclService.addGranularAcls({
+													workspace: $workspaceStore ?? '',
+													path: name,
+													kind: 'group_',
+													requestBody: {
+														owner: 'u/' + member_name,
+														write: true
+													}
+												})
+											}
+											loadGroup()
+										}}
+									>
+										<ToggleButton position="left" value="member" size="xs"
+											>Member <Tooltip
+												>A Member of a group can see everything the group can see, write to
+												everything the group can write, and generally act on behalf of the group</Tooltip
+											></ToggleButton
+										>
+										<!-- <ToggleButton position="center" value="manager" size="xs"
+											>Manager <Tooltip
+												>A manager of a group can manage the group, adding and removing users and
+												change their roles. Being a manager does not make you a member.</Tooltip
+											></ToggleButton
+										> -->
+										<ToggleButton position="right" value="admin" size="xs"
+											>Admin <Tooltip
+												>An admin of a group is a member of a group that can also add and remove
+												members to the group, or make them admin.</Tooltip
+											></ToggleButton
+										>
+									</ToggleButtonGroup>
+								</div>
+							{:else}
+								{role}
+							{/if}</td
+						>
+						<td>
+							{#if can_write}
+								<button
+									class="ml-2 text-red-500"
+									on:click={async () => {
+										await GroupService.removeUserToGroup({
+											workspace: $workspaceStore ?? '',
+											name,
+											requestBody: { username: member_name }
+										})
+										loadGroup()
+									}}>remove</button
+								>
+							{/if}</td
+						>
+					</tr>{/each}
+			</tbody>
+		</TableCustom>
+		<!-- <h2 class="mt-10"
+			>Groups managing this group <Tooltip>Any member of those groups can manage this group</Tooltip
+			></h2
+		>
+		{#if can_write}
+			<div class="flex items-start">
+				<AutoComplete items={groups} bind:selectedItem={new_managing_group} />
+				<Button
+					variant="contained"
+					color="blue"
+					size="sm"
+					btnClasses="!ml-4"
+					on:click={addToManagingGroup}
+				>
+					Add group managing this group
+				</Button>
+			</div>
+		{/if}
+		{#if managing_groups.length == 0}
+			<p class="text-gray-600 text-sm">No group is managing this group</p>
+		{:else}
+			<TableCustom>
+				<tr slot="header-row">
+					<th>group</th>
+					<th />
+				</tr>
+				<tbody slot="body">
+					{#each managing_groups as managing_group}<tr>
+							<td>{managing_group.split('/')[1]}</td>
+							<td>
+								{#if can_write}
+									<button
+										class="ml-2 text-red-500"
+										on:click={async () => {
+											await GranularAclService.removeGranularAcls({
+												workspace: $workspaceStore ?? '',
+												path: name,
+												kind: 'group_',
+												requestBody: {
+													owner: managing_group
+												}
+											})
+											loadGroup()
+										}}>remove</button
+									>
+								{/if}</td
+							>
+						</tr>{/each}
+				</tbody>
+			</TableCustom>
+		{/if} -->
+	{:else}
+		<div class="flex flex-col">
+			{#each new Array(6) as _}
+				<Skeleton layout={[[2], 0.7]} />
+			{/each}
+		</div>
+	{/if}
+</div>

package/components/GroupEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GroupEditorProps = typeof __propDef.props;
+export type GroupEditorEvents = typeof __propDef.events;
+export type GroupEditorSlots = typeof __propDef.slots;
+export default class GroupEditor extends SvelteComponentTyped<GroupEditorProps, GroupEditorEvents, GroupEditorSlots> {
+}
+export {};