From 19400e8e383f368ddb297127ee5bf06d483d58dd Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Mon, 13 Oct 2025 14:26:46 +0530 Subject: [PATCH 01/12] new permissions table --- src/lib/components/permissions/row.svelte | 198 +++++++++++++++------- 1 file changed, 134 insertions(+), 64 deletions(-) diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte index 8706f77a7c..6ab8cf5964 100644 --- a/src/lib/components/permissions/row.svelte +++ b/src/lib/components/permissions/row.svelte @@ -1,11 +1,14 @@ {#if role === 'users'} @@ -48,70 +68,120 @@ {:else if role === 'any'}
Any
{:else} - - {role} -
- {#key showing} - {#await getData(role)} - - - - {:then data} - {@const isUser = role.startsWith('user')} - {@const isTeam = role.startsWith('team')} - {@const isAnonymous = !data.email && !data.phone && !data.name && isUser} - - - {#if isAnonymous} - - - - {:else if data.name} - - {:else} - - - - {/if} - - {data.name ?? data?.email ?? data?.phone ?? '-'} - + + + +
(isMouseOverTooltip = true)} + on:mouseleave={() => hidePopover(hide, false)}> + {#if showing} + + {#await getData(role)} + + + {:then data} + {@const isUser = role.startsWith('user')} + {@const isAnonymous = !data.email && !data.phone && !data.name && isUser} + {@const id = role.split(':')[1].split('/')[0]} - - {#if isUser} - {#if data?.email} - Email: {data?.email} - {/if} - {#if data?.phone} - Phone: {data?.phone} + + + {#if isAnonymous} + + + + {:else if data.name} + + {:else} + + + + {/if} + + + + + + {formatName( + data.name ?? data?.email ?? data?.phone ?? '-', + $isSmallViewport ? 12 : 24 + )} + + + + + + + + {#if isUser && (data.email || data.phone)} + + + {#if data.email} + + Email: {data.email} + + {/if} + {#if data.phone} + + Phone: {data.phone} + + {/if} + {/if} -
- - View user - - -
- {:else if isTeam} - Members: {data?.total} -
- - View team - - -
- {/if} - - {/await} - {/key} + + {/await} + + {/if}
{/if} From 939978f4517e227c1578b4a9f8718f5f9c53a8af Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Mon, 13 Oct 2025 17:51:23 +0530 Subject: [PATCH 02/12] fixing style and logic for custom permissions --- src/lib/components/permissions/row.svelte | 284 +++++++++++++++------- 1 file changed, 200 insertions(+), 84 deletions(-) diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte index 6ab8cf5964..dd2dffe6bf 100644 --- a/src/lib/components/permissions/row.svelte +++ b/src/lib/components/permissions/row.svelte @@ -25,25 +25,78 @@ export let role: string; export let placement: ComponentProps['placement'] = 'bottom-start'; + interface ParsedPermission { + type: 'user' | 'team' | 'other'; + id: string; + roleName?: string; + isValid: boolean; + } + + function parsePermission(permission: string): ParsedPermission { + try { + const [type, rest] = permission.split(':'); + if (!rest) { + return { type: 'other', id: permission, isValid: false }; + } + + const [id, roleName] = rest.split('/'); + if (!id) { + return { type: 'other', id: permission, isValid: false }; + } + + if (type === 'user' || type === 'team') { + return { + type: type as 'user' | 'team', + id, + roleName, + isValid: true + }; + } + + return { type: 'other', id: permission, isValid: false }; + } catch (error) { + return { type: 'other', id: permission, isValid: false }; + } + } + async function getData( permission: string ): Promise< - Partial> & Models.Team>> + Partial> & Models.Team>> & { + notFound?: boolean; + roleName?: string; + customName?: string; + } > { - const role = permission.split(':')[0]; - const id = permission.split(':')[1].split('/')[0]; - if (role === 'user') { - const user = await sdk - .forProject(page.params.region, page.params.project) - .users.get({ userId: id }); - return user; + const parsed = parsePermission(permission); + + if (!parsed.isValid || parsed.type === 'other') { + return { notFound: true, roleName: parsed.roleName, customName: parsed.id }; + } + + if (parsed.type === 'user') { + try { + const user = await sdk + .forProject(page.params.region, page.params.project) + .users.get({ userId: parsed.id }); + return user; + } catch (error) { + return { notFound: true, roleName: parsed.roleName, customName: parsed.id }; + } } - if (role === 'team') { - const team = await sdk - .forProject(page.params.region, page.params.project) - .teams.get({ teamId: id }); - return team; + + if (parsed.type === 'team') { + try { + const team = await sdk + .forProject(page.params.region, page.params.project) + .teams.get({ teamId: parsed.id }); + return team; + } catch (error) { + return { notFound: true, roleName: parsed.roleName, customName: parsed.id }; + } } + + return { notFound: true, roleName: parsed.roleName, customName: parsed.id }; } let isMouseOverTooltip = false; @@ -59,6 +112,11 @@ } }, 150); } + + function isCustomPermission(role: string): boolean { + const parsed = parsePermission(role); + return !!parsed.roleName || !parsed.isValid; + } {#if role === 'users'} @@ -77,22 +135,28 @@ }} on:mouseleave={() => hidePopover(hide)}> - - - {#await getData(role)} - {role} - {:then data} - {formatName( - data.name ?? data?.email ?? data?.phone ?? '-', - $isSmallViewport ? 5 : 12 - )} - {/await} - - - + {#if isCustomPermission(role)} + + {formatName(role, $isSmallViewport ? 8 : 15)} + + {:else} + + + {#await getData(role)} + {role} + {:then data} + {formatName( + data.name ?? data?.email ?? data?.phone ?? '-', + $isSmallViewport ? 5 : 12 + )} + {/await} + + + + {/if} @@ -101,8 +165,7 @@ let:showing slot="tooltip" role="tooltip" - style:padding="1rem" - style:margin="-1rem" + class="popover" on:mouseenter={() => (isMouseOverTooltip = true)} on:mouseleave={() => hidePopover(hide, false)}> {#if showing} @@ -112,76 +175,129 @@ {:then data} - {@const isUser = role.startsWith('user')} - {@const isAnonymous = !data.email && !data.phone && !data.name && isUser} - {@const id = role.split(':')[1].split('/')[0]} - - - - {#if isAnonymous} - - - - {:else if data.name} - - {:else} + {#if data.notFound} + + - {/if} - - - + + - {formatName( - data.name ?? data?.email ?? data?.phone ?? '-', - $isSmallViewport ? 12 : 24 - )} + {data.customName} - + + {#if data.roleName} + + {:else} + + {/if} - + {:else} + {@const isUser = role.startsWith('user')} + {@const isAnonymous = + !data.email && !data.phone && !data.name && isUser} + {@const id = role.split(':')[1].split('/')[0]} - {#if isUser && (data.email || data.phone)} - - - {#if data.email} - - Email: {data.email} - - {/if} - {#if data.phone} - - Phone: {data.phone} - + + + {#if isAnonymous} + + + + {:else if data.name} + + {:else} + + + {/if} + + + + + + {formatName( + data.name ?? + data?.email ?? + data?.phone ?? + '-', + $isSmallViewport ? 12 : 24 + )} + + + + + - {/if} - + + {#if isUser && (data.email || data.phone)} + + + {#if data.email} + + Email: {data.email} + + {/if} + {#if data.phone} + + Phone: {data.phone} + + {/if} + + {/if} + + {/if} {/await} {/if}
{/if} + + From f72b2420c2b754ef1249619618a77d3ccedff3d5 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Mon, 13 Oct 2025 18:01:42 +0530 Subject: [PATCH 03/12] fix formating --- src/lib/components/permissions/row.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte index dd2dffe6bf..f632c269e9 100644 --- a/src/lib/components/permissions/row.svelte +++ b/src/lib/components/permissions/row.svelte @@ -59,9 +59,7 @@ } } - async function getData( - permission: string - ): Promise< + async function getData(permission: string): Promise< Partial> & Models.Team>> & { notFound?: boolean; roleName?: string; From c0479370ae0c10fc4f20a18c7c9ce199343737e9 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Wed, 15 Oct 2025 12:24:46 +0530 Subject: [PATCH 04/12] used typography instead of link --- src/lib/components/permissions/row.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte index f632c269e9..fdab116e76 100644 --- a/src/lib/components/permissions/row.svelte +++ b/src/lib/components/permissions/row.svelte @@ -134,9 +134,9 @@ on:mouseleave={() => hidePopover(hide)}> {#if isCustomPermission(role)} - - {formatName(role, $isSmallViewport ? 8 : 15)} - + + {formatName(role, $isSmallViewport ? 8 : 15)} + {:else} From 19cbaa38a8393ff62d4769fc48133e38696b7290 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Wed, 15 Oct 2025 12:43:29 +0530 Subject: [PATCH 05/12] svelte 5 migartion --- src/lib/components/permissions/row.svelte | 139 +++++++++++++--------- 1 file changed, 81 insertions(+), 58 deletions(-) diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte index fdab116e76..4f341450eb 100644 --- a/src/lib/components/permissions/row.svelte +++ b/src/lib/components/permissions/row.svelte @@ -1,5 +1,5 @@