windmill-components 1.542.5 → 1.555.0

package/package/components/GroupEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { GranularAclService, GroupService, UserService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { Button } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
@@ -12,23 +12,18 @@ import Section from './Section.svelte';
 import Label from './Label.svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
-export let name;
-let can_write = false;
+let { name } = $props();
+let can_write = $state(false);
 let group;
-let instance_group;
-let members = undefined;
-let usernames = [];
-let username = '';
-let summary = '';
+let instance_group = $state();
+let members = $state(undefined);
+let usernames = $state([]);
+let username = $state('');
+let summary = $state('');
 const dispatch = createEventDispatcher();
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
 }
-$: {
-    if ($workspaceStore && $userStore) {
-        load();
-    }
-}
 async function load() {
     return Promise.all([loadGroup(), loadInstanceGroup(), loadUsernames()]);
 }
@@ -85,6 +80,13 @@ function getRole(x) {
         return 'member';
     }
 }
+$effect.pre(() => {
+    if ($workspaceStore && $userStore) {
+        untrack(() => {
+            load();
+        });
+    }
+});
 </script>
 
 <Section label="Metadata" class="mb-4">
@@ -119,150 +121,155 @@ function getRole(x) {
 	{/if}
 	{#if members}
 		<TableCustom>
+			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 			<tr slot="header-row">
 				<th>user</th>
 				<th></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()
-										}}
-									>
-										{#snippet children({ item })}
-											<ToggleButton
-												value="member"
-												size="xs"
-												label="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"
-												{item}
-											/>
-											<ToggleButton
-												position="right"
-												value="admin"
-												size="xs"
-												label="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."
-												{item}
-											/>
-											{#if role === 'manager'}
+			{#snippet body()}
+				<tbody>
+					{#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()
+											}}
+										>
+											{#snippet children({ item })}
 												<ToggleButton
-													value="manager"
-													size="xs"
-													label="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"
+													value="member"
+													small
+													label="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"
 													{item}
 												/>
-											{/if}
-										{/snippet}
-									</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 }
-										})
-										await GranularAclService.removeGranularAcls({
-											workspace: $workspaceStore ?? '',
-											path: name,
-											kind: 'group_',
-											requestBody: {
-												owner: 'u/' + member_name
-											}
-										})
-										loadGroup()
-									}}>remove</button
-								>
-							{/if}</td
-						>
-					</tr>{/each}
-			</tbody>
+												<ToggleButton
+													value="admin"
+													small
+													label="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."
+													{item}
+												/>
+												{#if role === 'manager'}
+													<ToggleButton
+														value="manager"
+														small
+														label="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"
+														{item}
+													/>
+												{/if}
+											{/snippet}
+										</ToggleButtonGroup>
+									</div>
+								{:else}
+									{role}
+								{/if}</td
+							>
+							<td>
+								{#if can_write}
+									<button
+										class="ml-2 text-red-500"
+										onclick={async () => {
+											await GroupService.removeUserToGroup({
+												workspace: $workspaceStore ?? '',
+												name,
+												requestBody: { username: member_name }
+											})
+											await GranularAclService.removeGranularAcls({
+												workspace: $workspaceStore ?? '',
+												path: name,
+												kind: 'group_',
+												requestBody: {
+													owner: 'u/' + member_name
+												}
+											})
+											loadGroup()
+										}}>remove</button
+									>
+								{/if}</td
+							>
+						</tr>{/each}
+				</tbody>
+			{/snippet}
 		</TableCustom>
 
 		{#if instance_group?.emails}
 			<h2 class="mt-10">Members from the instance group</h2>
 			<TableCustom>
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 				<tr slot="header-row">
 					<th>user</th>
 				</tr>
-				<tbody slot="body">
-					{#each instance_group?.emails ?? [] as email}<tr>
-							<td>{email}</td>
-						</tr>{/each}
-				</tbody>
+				{#snippet body()}
+					<tbody>
+						{#each instance_group?.emails ?? [] as email}<tr>
+								<td>{email}</td>
+							</tr>{/each}
+					</tbody>
+				{/snippet}
 			</TableCustom>
 		{/if}
 	{:else}

package/package/components/GroupEditor.svelte.d.ts

@@ -1,3 +1,6 @@
+interface Props {
+    name: string;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,12 +14,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const GroupEditor: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-}, {
+declare const GroupEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type GroupEditor = InstanceType<typeof GroupEditor>;
 export default GroupEditor;