more role fixes

src/lib/stores/roles.ts

@@ -43,5 +43,6 @@ export const canSeeProjects = derived(scopes, function ($scopes) {
 });
 export const canSeeDatabases = derived(scopes, ($scopes) => $scopes.includes('databases.read'));
 export const canSeeFunctions = derived(scopes, ($scopes) => $scopes.includes('functions.read'));
+export const canSeeTeams = derived(scopes, ($scopes) => $scopes.includes('teams.read'));
 export const canSeeBuckets = derived(scopes, ($scopes) => $scopes.includes('buckets.read'));
 export const canSeeMessages = derived(scopes, ($scopes) => $scopes.includes('messages.read'));

src/routes/(console)/organization-[organization]/header.svelte

@@ -32,7 +32,7 @@
         organization,
         organizationList
     } from '$lib/stores/organization';
-    import { canSeeBilling, canSeeProjects, isOwner } from '$lib/stores/roles';
+    import { canSeeBilling, canSeeProjects, canSeeTeams, isOwner } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
 
     let areMembersLimited: boolean;
@@ -68,14 +68,14 @@
             title: 'Members',
             event: 'members',
             hasChildren: true,
-            disabled: !$isOwner
+            disabled: !$canSeeTeams
         },
         {
             href: `${path}/usage`,
             event: 'usage',
             title: 'Usage',
             hasChildren: true,
-            disabled: !(isCloud && $isOwner)
+            disabled: !(isCloud && $canSeeTeams)
         },
         {
             href: `${path}/billing`,
@@ -142,7 +142,6 @@
                         </ul>
                     </section></svelte:fragment>
             </DropList>
-            {#if $isOwner}
                 <div class="u-margin-inline-start-auto">
                     <div class="u-flex u-gap-16 u-cross-center">
                         <a href={`${path}/members`} class="is-not-mobile">
@@ -158,6 +157,7 @@
                                           } plan`,
                                 disabled: !areMembersLimited
                             }}>
+                            {#if $isOwner}
                             <Button
                                 secondary
                                 on:click={() => newMemberModal.set(true)}
@@ -165,10 +165,10 @@
                                 <span class="icon-plus" aria-hidden="true" />
                                 <span class="text">Invite</span>
                             </Button>
+                            {/if}
                         </div>
                     </div>
                 </div>
-            {/if}
         </svelte:fragment>
         <Tabs>
             {#each tabs as tab}

src/routes/(console)/organization-[organization]/members/+page.svelte

@@ -21,6 +21,7 @@
     import type { PageData } from './$types';
     import Delete from '../deleteMember.svelte';
     import { base } from '$app/paths';
+    import { isOwner } from '$lib/stores/roles';
 
     export let data: PageData;
 
@@ -58,7 +59,7 @@
         <ContainerHeader
             title="Members"
             total={data.organizationMembers.total}
-            buttonText="Invite"
+            buttonText={ $isOwner ? "Invite" : ""}
             buttonMethod={() => newMemberModal.set(true)}
             showAlert={false} />
 
@@ -68,8 +69,10 @@
                 <TableCellHead width={120}>Email</TableCellHead>
                 <TableCellHead width={120}>Role</TableCellHead>
                 <TableCellHead width={90}>2FA</TableCellHead>
+                {#if $isOwner}
                 <TableCellHead width={60} />
                 <TableCellHead width={30} />
+                {/if}
             </TableHeader>
             <TableBody
                 service="members"
@@ -102,6 +105,7 @@
                                 {/if}
                             </Pill>
                         </TableCellText>
+                        {#if $isOwner}
                         <TableCell>
                             {#if member.invited && !member.joined}
                                 <Button
@@ -122,6 +126,7 @@
                                 <span class="icon-trash" aria-hidden="true" />
                             </button>
                         </TableCell>
+                        {/if}
                     </TableRow>
                 {/each}
             </TableBody>

src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte

@@ -14,6 +14,7 @@
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import type { OrganizationUsage } from '$lib/sdk/billing';
     import { base } from '$app/paths';
+    import { canSeeProjects } from '$lib/stores/roles';
 
     type Metric = 'users' | 'storage' | 'bandwidth' | 'executions';
     export let data: PageData;
@@ -60,7 +61,9 @@
             <TableHeader>
                 <TableCellHead width={185}>Project</TableCellHead>
                 <TableCellHead width={100}>Usage</TableCellHead>
+                {#if $canSeeProjects}
                 <TableCellHead width={140} />
+                {/if}
             </TableHeader>
             <TableBody>
                 {#each groupByProject(metric).sort((a, b) => b.usage - a.usage) as project}
@@ -69,11 +72,13 @@
                             {getProjectName(project.projectId)}
                         </TableCellText>
                         <TableCellText title="Usage">{format(project.usage)}</TableCellText>
+                        {#if $canSeeProjects}
                         <TableCellLink
                             title="Go to project usage"
                             href={getProjectUsageLink(project.projectId)}>
                             View project usage
                         </TableCellLink>
+                        {/if}
                     </TableRow>
                 {/each}
             </TableBody>