Add designer role

src/lib/components/roles/roles.svelte

@@ -5,7 +5,7 @@
 <Base>
     <div class="u-flex-vertical u-gap-8">
         <p class="u-bold">Roles</p>
-        <p>Owner, Developer, Editor, Analyst and Billing.</p>
+        <p>Owner, Developer, Editor, Analyst, Designer and Billing.</p>
         <p>
             <a
                 class="link"

src/lib/components/roles/upgrade.svelte

@@ -13,7 +13,7 @@
         {#if isCloud}
             {#if $organization?.billingPlan !== BillingPlan.FREE}
                 <Typography.Text variant="m-600">Roles</Typography.Text>
-                <Typography.Text>Owner, Developer, Editor, Analyst and Billing.</Typography.Text>
+                <Typography.Text>Owner, Developer, Editor, Analyst, Designer and Billing.</Typography.Text>
                 <Typography.Text>
                     <Link.Anchor
                         target="_blank"
@@ -29,7 +29,7 @@
                     <Badge variant="secondary" size="xs" content="Pro plan" />
                 </Layout.Stack>
                 <Typography.Text>
-                    Upgrade to Pro to assign new roles to members such as Owner, Developer, Editor
+                    Upgrade to Pro to assign new roles to members such as Owner, Developer, Editor, Designer
                     or Analyst.
                 </Typography.Text>
 

src/lib/components/sidebar.svelte

@@ -38,6 +38,12 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
 
     import type { HTMLAttributes } from 'svelte/elements';
+    import {
+        canSeeBuckets,
+        canSeeDatabases,
+        canSeeFunctions,
+        canSeeMessages,
+    } from '$lib/stores/roles';
 
     type $$Props = HTMLAttributes<HTMLElement> & {
         state?: 'closed' | 'open' | 'icons';
@@ -161,34 +167,36 @@
                     <div class="only-mobile divider">
                         <Divider />
                     </div>
-                    <div class="products-label-container">
-                        <span class="products-label" class:hidden={state === 'icons'}>Build</span>
-                        <span class="products-label-indicator" class:hidden={state !== 'icons'}
-                        ></span>
-                    </div>
-                    {@const buildProjectOptions = projectOptions.filter(
-                        (projectOption) => projectOption.category === 'build'
-                    )}
-                    {#each buildProjectOptions as projectOption}
-                        <Tooltip placement="right" disabled={state !== 'icons'}>
-                            <a
-                                href={`/console/project-${project.$id}/${projectOption.slug}`}
-                                class="link"
-                                class:active={page.url.pathname.includes(projectOption.slug)}
-                                on:click={() => {
-                                    trackEvent(`click_menu_${projectOption.slug}`);
-                                    sideBarIsOpen = false;
-                                }}
-                                ><span class="link-icon"
-                                    ><Icon icon={projectOption.icon} size="s" />
-                                </span><span
-                                    class:no-text={state === 'icons'}
-                                    class:has-text={state === 'open'}
-                                    class="link-text">{projectOption.name}</span
-                                ></a>
-                            <span slot="tooltip">{projectOption.name}</span>
-                        </Tooltip>
-                    {/each}
+                    {#if $canSeeDatabases && $canSeeFunctions && $canSeeBuckets && $canSeeMessages}
+                        <div class="products-label-container">
+                            <span class="products-label" class:hidden={state === 'icons'}>Build</span>
+                            <span class="products-label-indicator" class:hidden={state !== 'icons'}
+                            ></span>
+                        </div>
+                        {@const buildProjectOptions = projectOptions.filter(
+                            (projectOption) => projectOption.category === 'build'
+                        )}
+                        {#each buildProjectOptions as projectOption}
+                            <Tooltip placement="right" disabled={state !== 'icons'}>
+                                <a
+                                    href={`/console/project-${project.$id}/${projectOption.slug}`}
+                                    class="link"
+                                    class:active={page.url.pathname.includes(projectOption.slug)}
+                                    on:click={() => {
+                                        trackEvent(`click_menu_${projectOption.slug}`);
+                                        sideBarIsOpen = false;
+                                    }}
+                                    ><span class="link-icon"
+                                        ><Icon icon={projectOption.icon} size="s" />
+                                    </span><span
+                                        class:no-text={state === 'icons'}
+                                        class:has-text={state === 'open'}
+                                        class="link-text">{projectOption.name}</span
+                                    ></a>
+                                <span slot="tooltip">{projectOption.name}</span>
+                            </Tooltip>
+                        {/each}
+                    {/if}
                     <div class="only-mobile divider">
                         <Divider />
                     </div>

src/lib/stores/billing.ts

@@ -56,6 +56,10 @@ export const roles = [
     {
         label: 'Billing',
         value: 'billing'
+    },
+    {
+        label: 'Designer',
+        value: 'designer'
     }
 ];
 

src/lib/stores/roles.ts

@@ -33,6 +33,7 @@ export const canWriteSubscribers = derived(scopes, ($scopes) =>
     $scopes.includes('subscribers.write')
 );
 export const canWriteKeys = derived(scopes, ($scopes) => $scopes.includes('keys.write'));
+export const canReadKeys = derived(scopes, ($scopes) => $scopes.includes('keys.read'));
 export const canWriteRules = derived(scopes, ($scopes) => $scopes.includes('rules.write'));
 export const canWriteMigrations = derived(scopes, ($scopes) =>
     $scopes.includes('migrations.write')

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

@@ -31,6 +31,7 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { columns } from './store';
     import { View } from '$lib/helpers/load';
+    import { canWriteRules } from '$lib/stores/roles';
 
     export let data;
 
@@ -50,6 +51,7 @@
                         source: 'organization_domain_overview'
                     });
                 }}
+                disabled={!$canWriteRules}
                 href={`${base}/organization-${page.params.organization}/domains/add-domain`}>
                 <Icon icon={IconPlus} size="s" />
                 Add domain

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

@@ -33,6 +33,7 @@
         ActionMenu
     } from '@appwrite.io/pink-svelte';
     import Upgrade from '$lib/components/roles/upgrade.svelte';
+    import { canWriteTeams } from '$lib/stores/roles';
 
     export let data: PageData;
 
@@ -70,7 +71,7 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Members</Typography.Title>
-        <ConsoleButton on:mousedown={() => newMemberModal.set(true)} event="create_user" size="s">
+        <ConsoleButton on:mousedown={() => newMemberModal.set(true)} event="create_user" size="s" disabled={!$canWriteTeams}>
             <Icon size="s" icon={IconPlus} slot="start" />
             <span class="text">Invite</span>
         </ConsoleButton>

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

@@ -42,6 +42,10 @@
         {
             label: 'Billing',
             value: 'billing'
+        },
+        {
+            label: 'Designer',
+            value: 'designer'
         }
     ];
 

src/routes/(console)/project-[project]/overview/+layout.svelte

@@ -23,7 +23,7 @@
     import { total } from '$lib/helpers/array';
     import type { Metric } from '$lib/sdk/usage';
     import { periodToDates } from '$lib/layout/usage.svelte';
-    import { canWriteProjects } from '$lib/stores/roles';
+    import { canReadKeys, canWriteProjects } from '$lib/stores/roles';
     import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { writable, type Writable } from 'svelte/store';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -211,11 +211,13 @@
                         href={`${path}/platforms`}
                         selected={page.url.pathname === `${path}/platforms`}
                         event="platforms">Platforms</Tab>
+                    {#if $canReadKeys}
                     <Tab
                         noscroll
                         href={`${path}/keys`}
                         selected={page.url.pathname === `${path}/keys`}
                         event="keys">API keys</Tab>
+                    {/if}
                 </Tabs>
                 {#if $action}
                     <svelte:component this={$action} />

src/routes/(console)/project-[project]/sites/(components)/deploymentActionMenu.svelte

@@ -3,6 +3,7 @@
     import { Menu } from '$lib/components/menu';
     import SubMenu from '$lib/components/menu/subMenu.svelte';
     import { Button } from '$lib/elements/forms';
+    import { canWriteSites } from '$lib/stores/roles';
     import { sdk } from '$lib/stores/sdk';
     import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
     import {
@@ -54,6 +55,7 @@
             {#if !inCard}
                 <ActionMenu.Item.Button
                     leadingIcon={IconRefresh}
+                    disabled={!$canWriteSites}
                     on:click={(e) => {
                         e.preventDefault();
                         selectedDeployment = deployment;
@@ -120,6 +122,7 @@
             {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
                 <ActionMenu.Item.Button
                     status="danger"
+                    disabled={!$canWriteSites}
                     leadingIcon={IconTrash}
                     on:click={(e) => {
                         e.preventDefault();

src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte

@@ -19,6 +19,7 @@
     import CreateCliModal from './createCliModal.svelte';
     import { page } from '$app/state';
     import { ConnectRepoModal } from '$lib/components/git';
+    import { canWriteSites } from '$lib/stores/roles.js';
 
     export let data;
 
@@ -84,7 +85,7 @@
                 analyticsSource="site_deployments"
                 hideView>
                 <Popover padding="none" let:toggle>
-                    <Button size="s" on:click={toggle}>
+                    <Button size="s" on:click={toggle} disabled={!$canWriteSites}>
                         <Icon size="s" icon={IconPlus} />
                         Create deployment
                     </Button>
@@ -133,7 +134,7 @@
                             <ViewSelector view={View.Table} {columns} hideView />
                         {/if}
                         <Popover padding="none" let:toggle>
-                            <Button size="s" on:click={toggle}>
+                            <Button size="s" disabled={!$canWriteSites} on:click={toggle}>
                                 <Icon size="s" icon={IconPlus} />
                                 Create deployment
                             </Button>

src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte

@@ -19,6 +19,7 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { page } from '$app/state';
+    import { canWriteSites } from '$lib/stores/roles';
 
     let { data } = $props();
 
@@ -54,7 +55,7 @@
                 </Button>
             {/if}
 
-            <Button secondary on:click={() => (showRedeploy = true)}>Redeploy</Button>
+            <Button secondary disabled={!$canWriteSites} on:click={() => (showRedeploy = true)}>Redeploy</Button>
             <DeploymentActionMenu
                 inCard
                 {deployment}

src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte

@@ -10,6 +10,7 @@
     import { app } from '$lib/stores/app';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import Table from './table.svelte';
+    import { canWriteRules } from '$lib/stores/roles.js';
 
     export let data;
 </script>
@@ -18,6 +19,7 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search domain" />
         <Button
+            disabled={!$canWriteRules}
             href={`${base}/project-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}
             on:click={() => {
                 trackEvent(Click.DomainCreateClick, {

src/routes/(console)/project-[project]/sites/site-[site]/domains/table.svelte

@@ -17,6 +17,7 @@
     import DeleteDomainModal from './deleteDomainModal.svelte';
     import RetryDomainModal from './retryDomainModal.svelte';
     import { columns } from './store';
+    import { canWriteRules } from '$lib/stores/roles';
 
     let {
         domains
@@ -93,6 +94,7 @@
                                 <ActionMenu.Item.Button
                                     status="danger"
                                     leadingIcon={IconTrash}
+                                    disabled={!$canWriteRules}
                                     on:click={(e) => {
                                         selectedDomain = domain;
                                         showDelete = true;

src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte

@@ -12,6 +12,7 @@
     import { Card, Trim } from '$lib/components';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { RuleTrigger } from '$lib/stores/sdk';
+    import { canWriteRules } from '$lib/stores/roles';
 
     export let proxyRuleList: Models.ProxyRuleList;
 
@@ -51,6 +52,7 @@
                     <div>
                         <Button
                             secondary
+                            disabled={!$canWriteRules}
                             size="s"
                             on:click={() => {
                                 trackEvent(Click.DomainCreateClick, {