Skip to content

feat: disable actions by role and show tooltip instead of hi… #2228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: disable actions by role and show tooltip instead of hi… #2228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
912ae32
feat(console): disable actions by role and show tooltip instead of hi…
HarshMN2345 Aug 18, 2025
149e009
fix: wrap content in div
HarshMN2345 Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions src/routes/(console)/organization-[organization]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,18 @@
<Typography.Title>Projects</Typography.Title>

<DropList bind:show={showDropdown} placement="bottom-end">
{#if $canWriteProjects}
<Button
on:click={handleCreateProject}
event="create_project"
disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
<Icon icon={IconPlus} slot="start" size="s" />
Create project
</Button>
{/if}
<Tooltip disabled={$canWriteProjects}>
<div>
<Button
on:click={handleCreateProject}
event="create_project"
disabled={($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteProjects}>
<Icon icon={IconPlus} slot="start" size="s" />
Create project
</Button>
</div>
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
<svelte:fragment slot="list">
<DropListItem on:click={() => (showCreate = true)}>Empty project</DropListItem>
<DropListItem on:click={importProject}>
Expand Down
23 changes: 13 additions & 10 deletions src/routes/(console)/project-[region]-[project]/databases/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
import Table from './table.svelte';
import { registerCommands } from '$lib/commandCenter';
import { canWriteDatabases } from '$lib/stores/roles';
import { Icon, Layout } from '@appwrite.io/pink-svelte';
import { Icon, Layout, Tooltip } from '@appwrite.io/pink-svelte';
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
import EmptySearch from '$lib/components/emptySearch.svelte';

Expand Down Expand Up @@ -57,15 +57,18 @@
view={data.view}
hideColumns={!data.databases.total}
hideView={!data.databases.total} />
{#if $canWriteDatabases}
<Button
on:click={() => (showCreate = true)}
event="create_database"
disabled={isCreationDisabled}>
<Icon icon={IconPlus} slot="start" size="s" />
Create database
</Button>
{/if}
<Tooltip disabled={$canWriteDatabases}>
<div>
<Button
on:click={() => (showCreate = true)}
event="create_database"
disabled={isCreationDisabled || !$canWriteDatabases}>
<Icon icon={IconPlus} slot="start" size="s" />
Create database
</Button>
</div>
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
</Layout.Stack>
</Layout.Stack>

Expand Down
20 changes: 13 additions & 7 deletions src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import Grid from './grid.svelte';
import type { PageData } from './$types';
import { canWriteCollections } from '$lib/stores/roles';
import { Icon } from '@appwrite.io/pink-svelte';
import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
import { IconPlus } from '@appwrite.io/pink-icons-svelte';

export let data: PageData;
Expand All @@ -19,12 +19,18 @@
{columns}
hasSearch
searchPlaceholder="Search by name or ID">
{#if $canWriteCollections}
<Button on:click={() => ($showCreate = true)} event="create_collection">
<Icon icon={IconPlus} slot="start" size="s" />
Create collection
</Button>
{/if}
<Tooltip disabled={$canWriteCollections}>
<div>
<Button
on:click={() => ($showCreate = true)}
event="create_collection"
disabled={!$canWriteCollections}>
<Icon icon={IconPlus} slot="start" size="s" />
Create collection
</Button>
</div>
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
</ResponsiveContainerHeader>

{#if data.collections.total}
Expand Down
13 changes: 9 additions & 4 deletions ...ect-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { Container } from '$lib/layout';
import { preferences } from '$lib/stores/preferences';
import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
import { Card, Icon, Layout, Empty as PinkEmpty, Tooltip } from '@appwrite.io/pink-svelte';
import type { PageData } from './$types';
import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
import type { Option } from './attributes/store';
Expand Down Expand Up @@ -196,16 +196,21 @@
text
event="empty_documentation"
size="s">Documentation</Button>
{#if $canWriteCollections}
<Tooltip disabled={$canWriteCollections}>
<CreateAttributeDropdown
bind:selectedOption={selectedAttribute}
bind:showCreate={showCreateAttribute}
let:toggle>
<Button secondary event="create_attribute" on:click={toggle}>
<Button
secondary
event="create_attribute"
on:click={toggle}
disabled={!$canWriteCollections}>
Create attribute
</Button>
</CreateAttributeDropdown>
{/if}
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
</slot>
</PinkEmpty>
</Card.Base>
Expand Down
35 changes: 25 additions & 10 deletions ...]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,17 @@
<Container>
<Layout.Stack direction="row" justifyContent="space-between">
<Typography.Title>Attributes</Typography.Title>
{#if $canWriteCollections}
<CreateAttributeDropdown bind:selectedOption bind:showCreate />
{/if}
<Tooltip disabled={$canWriteCollections}>
<div>
<CreateAttributeDropdown bind:selectedOption bind:showCreate>
<Button event="create_attribute" disabled={!$canWriteCollections}>
<Icon icon={IconPlus} slot="start" size="s" />
Create attribute
</Button>
</CreateAttributeDropdown>
</div>
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
</Layout.Stack>

{#if $attributes.length}
Expand Down Expand Up @@ -236,13 +244,20 @@
text
event="empty_documentation"
ariaLabel={`create {target}`}>Documentation</Button>
{#if $canWriteCollections}
<CreateAttributeDropdown bind:selectedOption bind:showCreate let:toggle>
<Button secondary event="create_attribute" on:click={toggle}>
Create attribute
</Button>
</CreateAttributeDropdown>
{/if}
<Tooltip disabled={$canWriteCollections}>
<div>
<CreateAttributeDropdown bind:selectedOption bind:showCreate let:toggle>
<Button
secondary
event="create_attribute"
on:click={toggle}
disabled={!$canWriteCollections}>
Create attribute
</Button>
</CreateAttributeDropdown>
</div>
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
</svelte:fragment>
</Empty>
{/if}
Expand Down
33 changes: 21 additions & 12 deletions ...ion]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
Link,
Popover,
Table,
Tooltip,
Typography
} from '@appwrite.io/pink-svelte';
import {
Expand Down Expand Up @@ -59,15 +60,18 @@
<Container>
<Layout.Stack direction="row" justifyContent="space-between">
<Typography.Title>Indexes</Typography.Title>
{#if $canWriteCollections}
<Button
event="create_index"
disabled={!$collection?.attributes?.length}
on:click={() => (showCreateIndex = true)}>
<Icon icon={IconPlus} slot="start" size="s" />
Create index
</Button>
{/if}
<Tooltip disabled={$canWriteCollections}>
<div>
<Button
event="create_index"
disabled={!$collection?.attributes?.length || !$canWriteCollections}
on:click={() => (showCreateIndex = true)}>
<Icon icon={IconPlus} slot="start" size="s" />
Create index
</Button>
</div>
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
</Layout.Stack>

{#if data.collection?.attributes?.length}
Expand Down Expand Up @@ -165,16 +169,21 @@
text
event="empty_documentation"
ariaLabel={`create {target}`}>Documentation</Button>
{#if $canWriteCollections}
<Tooltip disabled={$canWriteCollections}>
<CreateAttributeDropdown
bind:selectedOption={selectedAttribute}
bind:showCreate={showCreateAttribute}
let:toggle>
<Button secondary event="create_attribute" on:click={toggle}>
<Button
secondary
event="create_attribute"
on:click={toggle}
disabled={!$canWriteCollections}>
Create attribute
</Button>
</CreateAttributeDropdown>
{/if}
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
</svelte:fragment>
</Empty>
{/if}
Expand Down
9 changes: 5 additions & 4 deletions ...ect-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { beforeNavigate } from '$app/navigation';
import { canWriteFunctions } from '$lib/stores/roles';
import { ActionMenu, Popover } from '@appwrite.io/pink-svelte';
import { ActionMenu, Popover, Tooltip } from '@appwrite.io/pink-svelte';
import CreateCli from '../(modals)/createCli.svelte';
import CreateGit from '../(modals)/createGit.svelte';
import CreateManual from '../(modals)/createManual.svelte';
Expand All @@ -17,9 +17,10 @@
</script>

<Popover let:toggle placement="bottom-end" padding="none">
{#if $canWriteFunctions}
<slot {toggle} />
{/if}
<Tooltip disabled={$canWriteFunctions}>
<slot {toggle} disabled={!$canWriteFunctions} />
<div slot="tooltip">Your role does not allow this action</div>
</Tooltip>
<svelte:fragment slot="tooltip" let:toggle>
<ActionMenu.Root>
<ActionMenu.Item.Button
Expand Down
19 changes: 13 additions & 6 deletions src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@
text
event="empty_documentation"
ariaLabel={`create deployment`}>Documentation</Button>
<CreateActionMenu let:toggle installations={data.installations}>
<Button secondary on:click={toggle} event="create_deployment">
<CreateActionMenu let:toggle let:disabled installations={data.installations}>
<Button secondary on:click={toggle} event="create_deployment" {disabled}>
Create deployment
</Button>
</CreateActionMenu>
Expand Down Expand Up @@ -192,8 +192,15 @@
text
event="empty_documentation"
ariaLabel={`create deployment`}>Documentation</Button>
<CreateActionMenu let:toggle installations={data.installations}>
<Button secondary on:click={toggle} event="create_deployment">
<CreateActionMenu
let:toggle
let:disabled
installations={data.installations}>
<Button
secondary
on:click={toggle}
event="create_deployment"
{disabled}>
Create deployment
</Button>
</CreateActionMenu>
Expand All @@ -208,8 +215,8 @@
{columns}
hideView
analyticsSource="function_deployments">
<CreateActionMenu let:toggle installations={data.installations}>
<Button on:click={toggle} event="create_deployment">
<CreateActionMenu let:toggle let:disabled installations={data.installations}>
<Button on:click={toggle} event="create_deployment" {disabled}>
<Icon icon={IconPlus} size="s" slot="start" />
Create deployment
</Button>
Expand Down
27 changes: 14 additions & 13 deletions src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,19 +214,20 @@
text>
<span class="text">Details</span>
</Button>
{#if $canWriteFunctions}
<ContainerButton
title="functions"
disabled={buttonDisabled}
buttonType="secondary"
buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${template.id}`}
showIcon={false}
buttonText="Create"
buttonEventData={{
source: 'functions_template'
}}
buttonEvent="create_function" />
{/if}
<ContainerButton
title="functions"
disabled={buttonDisabled || !$canWriteFunctions}
buttonType="secondary"
buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${template.id}`}
showIcon={false}
buttonText="Create"
buttonEventData={{
source: 'functions_template'
}}
buttonEvent="create_function"
tooltipContent={!$canWriteFunctions
? 'Your role does not allow this action'
: undefined} />
</Layout.Stack>
</Layout.Stack>
</Layout.Stack>
Expand Down
19 changes: 10 additions & 9 deletions ...(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,16 @@
View source
<Icon icon={IconExternalLink} size="s" slot="end" />
</Button>
{#if $canWriteFunctions}
<ContainerButton
title="functions"
disabled={buttonDisabled}
buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${$template.id}`}
showIcon={false}
buttonText="Create function"
buttonEvent="create_function" />
{/if}
<ContainerButton
title="functions"
disabled={buttonDisabled || !$canWriteFunctions}
buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${$template.id}`}
showIcon={false}
buttonText="Create function"
buttonEvent="create_function"
tooltipContent={!$canWriteFunctions
? 'Your role does not allow this action'
: undefined} />
</Layout.Stack>
</Layout.Stack>
</Card>
Expand Down
Loading