fix formatting

This commit is contained in:
Damodar Lohani
2024-09-04 14:55:32 +05:45
parent d335c62c69
commit 274e023ed1
39 changed files with 484 additions and 457 deletions
+1 -3
View File
@@ -28,12 +28,10 @@
{#if total > 3 ? total < limit + offset : total % 2 !== 0}
{#if isCloud && serviceId && total >= planLimit}
<CardPlanLimit {service} />
{:else}
{#if showEmpty}
{:else if showEmpty}
<Empty on:click target={event}>
<slot name="empty" />
</Empty>
{/if}
{/if}
{/if}
</ul>
+3 -3
View File
@@ -56,9 +56,9 @@
event="empty_documentation"
ariaLabel="create {target}">Documentation</Button>
{#if allowCreate}
<Button secondary on:click on:click={track}>
Create {target}
</Button>
<Button secondary on:click on:click={track}>
Create {target}
</Button>
{/if}
</div>
</slot>
+17 -17
View File
@@ -97,23 +97,23 @@
</a>
</li>
{#if $canSeeDatabases}
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/databases`
)}
on:click={() => trackEvent('click_menu_databases')}
href={`${projectPath}/databases`}
use:tooltip={{
content: 'Databases',
placement: 'right',
disabled: !narrow
}}>
<span class="icon-database" aria-hidden="true" />
<span class="text">Databases</span>
</a>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/databases`
)}
on:click={() => trackEvent('click_menu_databases')}
href={`${projectPath}/databases`}
use:tooltip={{
content: 'Databases',
placement: 'right',
disabled: !narrow
}}>
<span class="icon-database" aria-hidden="true" />
<span class="text">Databases</span>
</a>
</li>
{/if}
<li class="drop-list-item">
<a
+37 -36
View File
@@ -57,9 +57,9 @@
</Heading>
{#if $canWriteRules}
<Button on:click={openWizard}>
<span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
</Button>
<Button on:click={openWizard}>
<span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
</Button>
{/if}
</div>
{#if rules.total}
@@ -69,7 +69,7 @@
<TableCellHead width={120}>Verification Status</TableCellHead>
<TableCellHead width={180}>Certificate Status</TableCellHead>
{#if $canWriteRules}
<TableCellHead width={40} />
<TableCellHead width={40} />
{/if}
</TableHeader>
<TableBody>
@@ -140,40 +140,41 @@
{/if}
</TableCell>
{#if $canWriteRules}
<TableCell right>
<DropList
bind:show={showDomainsDropdown[i]}
placement="bottom-start"
noArrow>
<Button
text
round
ariaLabel="more options"
on:click={() => (showDomainsDropdown[i] = !showDomainsDropdown[i])}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</Button>
<svelte:fragment slot="list">
{#if domain.status !== 'verified'}
<TableCell right>
<DropList
bind:show={showDomainsDropdown[i]}
placement="bottom-start"
noArrow>
<Button
text
round
ariaLabel="more options"
on:click={() =>
(showDomainsDropdown[i] = !showDomainsDropdown[i])}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</Button>
<svelte:fragment slot="list">
{#if domain.status !== 'verified'}
<DropListItem
icon="refresh"
on:click={() => openRetry(domain, i)}>
{domain.status === 'unverified'
? 'Retry generation'
: 'Retry verification'}
</DropListItem>
{/if}
<DropListItem
icon="refresh"
on:click={() => openRetry(domain, i)}>
{domain.status === 'unverified'
? 'Retry generation'
: 'Retry verification'}
icon="trash"
on:click={() => {
selectedDomain = domain;
showDelete = true;
showDomainsDropdown[i] = false;
}}>
Delete
</DropListItem>
{/if}
<DropListItem
icon="trash"
on:click={() => {
selectedDomain = domain;
showDelete = true;
showDomainsDropdown[i] = false;
}}>
Delete
</DropListItem>
</svelte:fragment>
</DropList>
</TableCell>
</svelte:fragment>
</DropList>
</TableCell>
{/if}
</TableRow>
{/each}
+6 -10
View File
@@ -280,9 +280,9 @@ export type PlansInfo = {
export type PlansMap = Map<Tier, Plan>;
export type Roles = {
scopes: string[],
roles: string[],
}
scopes: string[];
roles: string[];
};
export class Billing {
client: Client;
@@ -368,13 +368,9 @@ export class Billing {
async getRoles(organizationId: string): Promise<Roles> {
const path = `/organizations/${organizationId}/roles`;
const uri = new URL(this.client.config.endpoint + path);
return await this.client.call(
'get',
uri,
{
'content-type': 'application/json'
}
);
return await this.client.call('get', uri, {
'content-type': 'application/json'
});
}
async updatePlan(
+37 -29
View File
@@ -1,35 +1,43 @@
import { page } from "$app/stores";
import { derived } from "svelte/store";
import { page } from '$app/stores';
import { derived } from 'svelte/store';
export const roles = derived(page, ($page) => $page.data.roles);
export const scopes = derived(page, ($page) => $page.data.scopes);
export const isDeveloper = derived(roles, ($roles) => $roles.includes("developer"));
export const isBilling = derived(roles, ($roles) => $roles.includes("billing"));
export const isOwner = derived(roles, ($roles) => $roles.includes("owner"));
export const isDeveloper = derived(roles, ($roles) => $roles.includes('developer'));
export const isBilling = derived(roles, ($roles) => $roles.includes('billing'));
export const isOwner = derived(roles, ($roles) => $roles.includes('owner'));
export const canWriteDatabases = derived(scopes, ($scopes) => $scopes.includes("databases.write"));
export const canWriteProjects = derived(scopes, ($scopes) => $scopes.includes("projects.write"));
export const canWriteFunctions = derived(scopes, ($scopes) => $scopes.includes("functions.write"));
export const canWriteBuckets = derived(scopes, ($scopes) => $scopes.includes("buckets.write"));
export const canWriteProviders = derived(scopes, ($scopes) => $scopes.includes("providers.write"));
export const canWriteMessages = derived(scopes, ($scopes) => $scopes.includes("messages.write"));
export const canWriteWebhooks = derived(scopes, ($scopes) => $scopes.includes("webhooks.write"));
export const canWritePlatforms = derived(scopes, ($scopes) => $scopes.includes("platforms.write"));
export const canWriteTargets = derived(scopes, ($scopes) => $scopes.includes("targets.write"));
export const canWriteUsers = derived(scopes, ($scopes) => $scopes.includes("users.write"));
export const canWriteTeams = derived(scopes, ($scopes) => $scopes.includes("teams.write"));
export const canWriteCollections = derived(scopes, ($scopes) => $scopes.includes("collections.write"));
export const canWriteExecutions = derived(scopes, ($scopes) => $scopes.includes("executions.write"));
export const canWriteSubscribers = derived(scopes, ($scopes) => $scopes.includes("subscribers.write"));
export const canWriteKeys = derived(scopes, ($scopes) => $scopes.includes("keys.write"));
export const canWriteRules = derived(scopes, ($scopes) => $scopes.includes("rules.write"));
export const canWriteMigrations = derived(scopes, ($scopes) => $scopes.includes("migrations.write"));
export const canWriteVcs = derived(scopes, ($scopes) => $scopes.includes("vcs.write"));
export const canWriteTopics = derived(scopes, ($scopes) => $scopes.includes("topics.write"));
export const canWriteDatabases = derived(scopes, ($scopes) => $scopes.includes('databases.write'));
export const canWriteProjects = derived(scopes, ($scopes) => $scopes.includes('projects.write'));
export const canWriteFunctions = derived(scopes, ($scopes) => $scopes.includes('functions.write'));
export const canWriteBuckets = derived(scopes, ($scopes) => $scopes.includes('buckets.write'));
export const canWriteProviders = derived(scopes, ($scopes) => $scopes.includes('providers.write'));
export const canWriteMessages = derived(scopes, ($scopes) => $scopes.includes('messages.write'));
export const canWriteWebhooks = derived(scopes, ($scopes) => $scopes.includes('webhooks.write'));
export const canWritePlatforms = derived(scopes, ($scopes) => $scopes.includes('platforms.write'));
export const canWriteTargets = derived(scopes, ($scopes) => $scopes.includes('targets.write'));
export const canWriteUsers = derived(scopes, ($scopes) => $scopes.includes('users.write'));
export const canWriteTeams = derived(scopes, ($scopes) => $scopes.includes('teams.write'));
export const canWriteCollections = derived(scopes, ($scopes) =>
$scopes.includes('collections.write')
);
export const canWriteExecutions = derived(scopes, ($scopes) =>
$scopes.includes('executions.write')
);
export const canWriteSubscribers = derived(scopes, ($scopes) =>
$scopes.includes('subscribers.write')
);
export const canWriteKeys = derived(scopes, ($scopes) => $scopes.includes('keys.write'));
export const canWriteRules = derived(scopes, ($scopes) => $scopes.includes('rules.write'));
export const canWriteMigrations = derived(scopes, ($scopes) =>
$scopes.includes('migrations.write')
);
export const canWriteVcs = derived(scopes, ($scopes) => $scopes.includes('vcs.write'));
export const canWriteTopics = derived(scopes, ($scopes) => $scopes.includes('topics.write'));
export const canSeeBilling = derived(scopes, ($scopes) => $scopes.includes("billing.read"));
export const canSeeProjects = derived(scopes, ($scopes) => $scopes.includes("projects.read"));
export const canSeeDatabases = derived(scopes, ($scopes) => $scopes.includes("databases.read"));
export const canSeeFunctions = derived(scopes, ($scopes) => $scopes.includes("functions.read"));
export const canSeeBuckets = derived(scopes, ($scopes) => $scopes.includes("projects.read"));
export const canSeeBilling = derived(scopes, ($scopes) => $scopes.includes('billing.read'));
export const canSeeProjects = derived(scopes, ($scopes) => $scopes.includes('projects.read'));
export const canSeeDatabases = derived(scopes, ($scopes) => $scopes.includes('databases.read'));
export const canSeeFunctions = derived(scopes, ($scopes) => $scopes.includes('functions.read'));
export const canSeeBuckets = derived(scopes, ($scopes) => $scopes.includes('projects.read'));
@@ -18,11 +18,11 @@ export const load: LayoutLoad = async ({ params, depends }) => {
depends(Dependencies.PAYMENT_METHODS);
var roles = [];
var scopes = [];
try {
if (isCloud) {
await failedInvoice.load(params.organization);
if (get(failedInvoice)) {
headerAlert.add({
show: true,
@@ -31,7 +31,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
importance: 1
});
}
const res = await sdk.forConsole.billing.getRoles(params.organization);
roles = res.roles;
scopes = res.scopes;
@@ -144,13 +144,13 @@
<DropList bind:show={showDropdown} placement="bottom-end">
{#if $canWriteProjects}
<Button
on:click={handleCreateProject}
event="create_project"
disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create project</span>
</Button>
<Button
on:click={handleCreateProject}
event="create_project"
disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create project</span>
</Button>
{/if}
<svelte:fragment slot="list">
<DropListItem on:click={() => (showCreate = true)}>Empty project</DropListItem>
@@ -12,7 +12,7 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
const limit = getLimit(url, route, CARD_LIMIT);
const offset = pageToOffset(page, limit);
if(!parentData.scopes.includes('projects.read')) {
if (!parentData.scopes.includes('projects.read')) {
return redirect(301, `/console/organization-${params.organization}/billing`);
}
@@ -168,31 +168,31 @@
</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">
<AvatarGroup size={40} {avatars} total={$members?.total ?? 0} />
</a>
<div
use:tooltip={{
content:
$organization?.billingPlan === BillingPlan.FREE
? `Upgrade to add more members`
: `You've reached the members limit for the ${
tierToPlan($organization?.billingPlan)?.name
} plan`,
disabled: !areMembersLimited
}}>
<Button
secondary
on:click={() => newMemberModal.set(true)}
disabled={areMembersLimited}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Invite</span>
</Button>
<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">
<AvatarGroup size={40} {avatars} total={$members?.total ?? 0} />
</a>
<div
use:tooltip={{
content:
$organization?.billingPlan === BillingPlan.FREE
? `Upgrade to add more members`
: `You've reached the members limit for the ${
tierToPlan($organization?.billingPlan)?.name
} plan`,
disabled: !areMembersLimited
}}>
<Button
secondary
on:click={() => newMemberModal.set(true)}
disabled={areMembersLimited}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Invite</span>
</Button>
</div>
</div>
</div>
</div>
{/if}
</svelte:fragment>
<Tabs>
@@ -46,19 +46,19 @@
<ContainerHeader title="Users" isFlex={false} total={data.users.total} let:isButtonDisabled>
<SearchQuery search={data.search} placeholder="Search by name, email, phone, or ID">
{#if $canWriteUsers}
<div
use:tooltip={{
content: `Upgrade to add more users`,
disabled: !isButtonDisabled
}}>
<Button
on:click={() => ($showCreateUser = true)}
event="create_user"
disabled={isButtonDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create user</span>
</Button>
</div>
<div
use:tooltip={{
content: `Upgrade to add more users`,
disabled: !isButtonDisabled
}}>
<Button
on:click={() => ($showCreateUser = true)}
event="create_user"
disabled={isButtonDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create user</span>
</Button>
</div>
{/if}
</SearchQuery>
</ContainerHeader>
@@ -51,19 +51,19 @@
let:isButtonDisabled>
<SearchQuery search={data.search} placeholder="Search by name">
{#if $canWriteTeams}
<div
use:tooltip={{
content: `Upgrade to add more teams`,
disabled: !isButtonDisabled
}}>
<Button
on:click={() => ($showCreateTeam = true)}
event="create_team"
disabled={isButtonDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create team</span>
</Button>
</div>
<div
use:tooltip={{
content: `Upgrade to add more teams`,
disabled: !isButtonDisabled
}}>
<Button
on:click={() => ($showCreateTeam = true)}
event="create_team"
disabled={isButtonDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create team</span>
</Button>
</div>
{/if}
</SearchQuery>
</ContainerHeader>
@@ -57,19 +57,19 @@
hideColumns={!data.databases.total}
hideView={!data.databases.total} />
{#if $canWriteDatabases}
<div
use:tooltip={{
content: `Upgrade to add more databases`,
disabled: !isCreationDisabled
}}>
<Button
on:click={() => (showCreate = true)}
event="create_database"
disabled={isCreationDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create database</span>
</Button>
</div>
<div
use:tooltip={{
content: `Upgrade to add more databases`,
disabled: !isCreationDisabled
}}>
<Button
on:click={() => (showCreate = true)}
event="create_database"
disabled={isCreationDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create database</span>
</Button>
</div>
{/if}
</div>
</svelte:fragment>
@@ -19,10 +19,10 @@
hideColumns={!data.collections.total}
hideView={!data.collections.total}>
{#if $canWriteCollections}
<Button on:click={() => ($showCreate = true)} event="create_collection">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create collection</span>
</Button>
<Button on:click={() => ($showCreate = true)} event="create_collection">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create collection</span>
</Button>
{/if}
</GridHeader>
@@ -53,7 +53,7 @@
<Heading tag="h2" size="5">Attributes</Heading>
{#if $canWriteCollections}
<CreateAttributeDropdown bind:showCreateDropdown bind:selectedOption bind:showCreate />
<CreateAttributeDropdown bind:showCreateDropdown bind:selectedOption bind:showCreate />
{/if}
</div>
@@ -40,11 +40,15 @@
event: 'usage',
hasChildren: true
},
...$canWriteCollections ? [{
href: `${path}/settings`,
title: 'Settings',
event: 'settings'
}]:[]
...($canWriteCollections
? [
{
href: `${path}/settings`,
title: 'Settings',
event: 'settings'
}
]
: [])
];
</script>
@@ -40,13 +40,13 @@
<Heading tag="h2" size="5">Indexes</Heading>
{#if $canWriteCollections}
<Button
event="create_index"
disabled={!$collection?.attributes?.length}
on:click={() => (showCreateIndex = true)}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create index</span>
</Button>
<Button
event="create_index"
disabled={!$collection?.attributes?.length}
on:click={() => (showCreateIndex = true)}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create index</span>
</Button>
{/if}
</div>
{#if $collection?.attributes?.length}
@@ -63,9 +63,9 @@
<TableScroll>
<TableHeader>
{#if $canWriteCollections}
<TableCellHeadCheck
bind:selected
pageItemsIds={data.collections.collections.map((c) => c.$id)} />
<TableCellHeadCheck
bind:selected
pageItemsIds={data.collections.collections.map((c) => c.$id)} />
{/if}
{#each $columns as column}
{#if column.show}
@@ -78,7 +78,7 @@
<TableRowLink
href={`${base}/project-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
{#if $canWriteCollections}
<TableCellCheck bind:selectedIds={selected} id={collection.$id} />
<TableCellCheck bind:selectedIds={selected} id={collection.$id} />
{/if}
{#each $columns as column}
{#if column.show}
@@ -60,9 +60,9 @@
<TableScroll>
<TableHeader>
{#if $canWriteDatabases}
<TableCellHeadCheck
bind:selected
pageItemsIds={data.databases.databases.map((c) => c.$id)} />
<TableCellHeadCheck
bind:selected
pageItemsIds={data.databases.databases.map((c) => c.$id)} />
{/if}
{#each $columns as column}
{#if column.show}
@@ -74,7 +74,7 @@
{#each data.databases.databases as database}
<TableRowLink href={`${base}/project-${projectId}/databases/database-${database.$id}`}>
{#if $canWriteDatabases}
<TableCellCheck bind:selectedIds={selected} id={database.$id} />
<TableCellCheck bind:selectedIds={selected} id={database.$id} />
{/if}
{#each $columns as column}
{#if column.show}
@@ -86,7 +86,7 @@
<Container>
<ContainerHeader
title="Functions"
buttonText={$canWriteFunctions ? "Create function" : ""}
buttonText={$canWriteFunctions ? 'Create function' : ''}
buttonEvent="create_function"
buttonMethod={openWizard}
total={data.functions.total} />
@@ -187,15 +187,15 @@
Build logs
</Button>
{#if $canWriteFunctions}
<Button
text
class="u-margin-inline-end-16"
on:click={() => {
selectedDeployment = activeDeployment;
showRedeploy = true;
}}>
Redeploy
</Button>
<Button
text
class="u-margin-inline-end-16"
on:click={() => {
selectedDeployment = activeDeployment;
showRedeploy = true;
}}>
Redeploy
</Button>
{/if}
<Button
secondary
@@ -26,14 +26,14 @@
<DropList bind:show placement="bottom-end">
{#if $canWriteFunctions}
<Button {secondary} {round} on:click={() => (show = !show)} event="create_deployment">
<slot>
{#if !secondary}
<span class="icon-plus" aria-hidden="true" />
{/if}
<span class="text">Create deployment</span>
</slot>
</Button>
<Button {secondary} {round} on:click={() => (show = !show)} event="create_deployment">
<slot>
{#if !secondary}
<span class="icon-plus" aria-hidden="true" />
{/if}
<span class="text">Create deployment</span>
</slot>
</Button>
{/if}
<svelte:fragment slot="list">
<DropListItem
@@ -34,11 +34,15 @@
event: 'sage',
hasChildren: true
},
...$canWriteFunctions ? [{
href: `${path}/settings`,
event: 'settings',
title: 'Settings'
}] : []
...($canWriteFunctions
? [
{
href: `${path}/settings`,
event: 'settings',
title: 'Settings'
}
]
: [])
];
</script>
@@ -228,14 +228,14 @@
<span class="text">View details</span>
</Button>
{#if $canWriteFunctions}
<ContainerButton
title="functions"
disabled={buttonDisabled}
buttonType="secondary"
buttonMethod={() => connectTemplate(template)}
showIcon={false}
buttonText="Create function"
buttonEvent="create_function" />
<ContainerButton
title="functions"
disabled={buttonDisabled}
buttonType="secondary"
buttonMethod={() => connectTemplate(template)}
showIcon={false}
buttonText="Create function"
buttonEvent="create_function" />
{/if}
</div>
</article>
@@ -79,13 +79,13 @@
<span class="icon-external-link" />
</Button>
{#if $canWriteFunctions}
<ContainerButton
title="functions"
disabled={buttonDisabled}
buttonMethod={() => connectTemplate($template)}
showIcon={false}
buttonText="Create function"
buttonEvent="create_function" />
<ContainerButton
title="functions"
disabled={buttonDisabled}
buttonMethod={() => connectTemplate($template)}
showIcon={false}
buttonText="Create function"
buttonEvent="create_function" />
{/if}
</div>
</Card>
@@ -95,9 +95,9 @@
<Container>
<ContainerHeader title="Messages">
{#if $canWriteMessages}
<div class="is-only-mobile">
<CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
</div>
<div class="is-only-mobile">
<CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
</div>
{/if}
</ContainerHeader>
<div class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-16">
@@ -115,7 +115,8 @@
allowNoColumns
showColsTextMobile />
{#if $canWriteMessages}
<CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
<CreateMessageDropdown
bind:showCreateDropdown={showCreateDropdownDesktop} />
{/if}
</div>
</div>
@@ -139,9 +140,9 @@
<TableScroll>
<TableHeader>
{#if $canWriteMessages}
<TableCellHeadCheck
bind:selected
pageItemsIds={data.messages.messages.map((d) => d.$id)} />
<TableCellHeadCheck
bind:selected
pageItemsIds={data.messages.messages.map((d) => d.$id)} />
{/if}
{#each $columns as column}
{#if column.show}
@@ -154,10 +155,10 @@
<TableRowLink
href={`${base}/project-${project}/messaging/message-${message.$id}`}>
{#if $canWriteMessages}
<TableCellCheck
bind:selectedIds={selected}
id={message.$id}
disabled={message.status === 'processing'} />
<TableCellCheck
bind:selectedIds={selected}
id={message.$id}
disabled={message.status === 'processing'} />
{/if}
{#each $columns as column (column.id)}
{#if column.show}
@@ -281,14 +282,14 @@
Documentation
</Button>
{#if $canWriteMessages}
<CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
<Button
secondary
on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
event="create_message">
<span class="text">Create message</span>
</Button>
</CreateMessageDropdown>
<CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
<Button
secondary
on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
event="create_message">
<span class="text">Create message</span>
</Button>
</CreateMessageDropdown>
{/if}
</div>
</Empty>
@@ -31,9 +31,9 @@
<div class="u-flex u-main-space-between">
<Heading tag="h2" size="5">Providers</Heading>
{#if $canWriteProviders}
<div class="is-only-mobile">
<CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
</div>
<div class="is-only-mobile">
<CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
</div>
{/if}
</div>
<!-- TODO: fix width of search input in mobile -->
@@ -47,7 +47,7 @@
allowNoColumns
showColsTextMobile />
{#if $canWriteProviders}
<CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
<CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
{/if}
</div>
</SearchQuery>
@@ -107,14 +107,14 @@
Documentation
</Button>
{#if $canWriteProviders}
<CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
<Button
secondary
on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
event="create_provider">
<span class="text">Create provider</span>
</Button>
</CreateProviderDropdown>
<CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
<Button
secondary
on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
event="create_provider">
<span class="text">Create provider</span>
</Button>
</CreateProviderDropdown>
{/if}
</div>
</Empty>
@@ -65,9 +65,9 @@
<TableScroll>
<TableHeader>
{#if $canWriteProviders}
<TableCellHeadCheck
bind:selected={selectedIds}
pageItemsIds={data.providers.providers.map((d) => d.$id)} />
<TableCellHeadCheck
bind:selected={selectedIds}
pageItemsIds={data.providers.providers.map((d) => d.$id)} />
{/if}
{#each $columns as column}
{#if column.show}
@@ -78,9 +78,11 @@
<TableBody>
{#each data.providers.providers as provider (provider.$id)}
<TableRowLink
href={$canWriteProviders ? `${base}/project-${$project.$id}/messaging/providers/provider-${provider.$id}` : '#'}>
href={$canWriteProviders
? `${base}/project-${$project.$id}/messaging/providers/provider-${provider.$id}`
: '#'}>
{#if $canWriteProviders}
<TableCellCheck bind:selectedIds id={provider.$id} />
<TableCellCheck bind:selectedIds id={provider.$id} />
{/if}
{#each $columns as column}
{#if column.show}
@@ -54,12 +54,12 @@
<div class="u-flex u-main-space-between">
<Heading tag="h2" size="5">Topics</Heading>
{#if $canWriteTopics}
<div class="is-only-mobile">
<Button on:click={() => ($showCreate = true)} event="create_topic">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create topic</span>
</Button>
</div>
<div class="is-only-mobile">
<Button on:click={() => ($showCreate = true)} event="create_topic">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create topic</span>
</Button>
</div>
{/if}
</div>
<!-- TODO: fix width of search input in mobile -->
@@ -73,10 +73,10 @@
allowNoColumns
showColsTextMobile />
{#if $canWriteTopics}
<Button on:click={() => ($showCreate = true)} event="create_topic">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create topic</span>
</Button>
<Button on:click={() => ($showCreate = true)} event="create_topic">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create topic</span>
</Button>
{/if}
</div>
</SearchQuery>
@@ -62,9 +62,9 @@
<TableScroll>
<TableHeader>
{#if $canWriteTopics}
<TableCellHeadCheck
bind:selected={selectedIds}
pageItemsIds={data.topics.topics.map((d) => d.$id)} />
<TableCellHeadCheck
bind:selected={selectedIds}
pageItemsIds={data.topics.topics.map((d) => d.$id)} />
{/if}
{#each columns as column}
{#if column.show}
@@ -77,7 +77,7 @@
<TableRowLink
href={`${base}/project-${$project.$id}/messaging/topics/topic-${topic.$id}`}>
{#if $canWriteTopics}
<TableCellCheck bind:selectedIds id={topic.$id} />
<TableCellCheck bind:selectedIds id={topic.$id} />
{/if}
{#each columns as column (column.id)}
{#if column.show}
@@ -21,11 +21,15 @@
title: 'Activity',
event: 'activity'
},
...$canWriteTopics ? [{
href: `${path}/settings`,
title: 'Settings',
event: 'settings'
}]:[]
...($canWriteTopics
? [
{
href: `${path}/settings`,
title: 'Settings',
event: 'settings'
}
]
: [])
];
</script>
@@ -27,12 +27,12 @@
<div class="common-section u-flex u-gap-12">
<Heading tag="h3" size="7">API keys</Heading>
{#if $canWriteKeys}
<span class="u-margin-inline-start-auto">
<Button on:click={createApiKey}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create API key</span>
</Button>
</span>
<span class="u-margin-inline-start-auto">
<Button on:click={createApiKey}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create API key</span>
</Button>
</span>
{/if}
</div>
@@ -57,106 +57,109 @@
</script>
{#if $canWriteKeys || $canWritePlatforms}
<div class="card">
<header class="card-header common-section grid-1-2">
<div class="grid-1-2-col-1">
<h2 class="heading-level-5">Getting started</h2>
<p class="u-line-height-1-5 u-margin-block-start-12">
Here are some next steps to start building
</p>
</div>
</header>
<div class="card">
<header class="card-header common-section grid-1-2">
<div class="grid-1-2-col-1">
<h2 class="heading-level-5">Getting started</h2>
<p class="u-line-height-1-5 u-margin-block-start-12">
Here are some next steps to start building
</p>
</div>
</header>
{#if $canWritePlatforms}
<section class="common-section card-separator grid-1-2">
<div class="grid-1-2-col-1">
<h3 class="heading-level-7">Add a platform</h3>
<p class="u-line-height-1-5 u-margin-block-start-16">
Our SDKs make it possible to easily integrate with any platform.
</p>
</div>
<div class="grid-1-2-col-2">
<ul class="grid-box">
{#each platforms as platform}
<li class="grid-box-item">
<button
type="button"
class="card u-width-full-line"
on:click={() => addPlatform(platform.platform)}>
<span class="u-flex u-cross-center u-gap-16">
<div class="avatar is-medium" aria-hidden="true">
<img
src={`${base}/icons/${$app.themeInUse}/${platform.icon}.svg`}
alt="technology" />
</div>
<span class="text">{platform.title}</span>
<span
class="icon-plus u-margin-inline-start-auto"
style="font-size: var(--icon-size-large);"
aria-hidden="true" />
</span>
</button>
</li>
{/each}
</ul>
</div>
</section>
<div class="separator-with-text">
<span class="text">OR</span>
{#if $canWritePlatforms}
<section class="common-section card-separator grid-1-2">
<div class="grid-1-2-col-1">
<h3 class="heading-level-7">Add a platform</h3>
<p class="u-line-height-1-5 u-margin-block-start-16">
Our SDKs make it possible to easily integrate with any platform.
</p>
</div>
<div class="grid-1-2-col-2">
<ul class="grid-box">
{#each platforms as platform}
<li class="grid-box-item">
<button
type="button"
class="card u-width-full-line"
on:click={() => addPlatform(platform.platform)}>
<span class="u-flex u-cross-center u-gap-16">
<div class="avatar is-medium" aria-hidden="true">
<img
src={`${base}/icons/${$app.themeInUse}/${platform.icon}.svg`}
alt="technology" />
</div>
<span class="text">{platform.title}</span>
<span
class="icon-plus u-margin-inline-start-auto"
style="font-size: var(--icon-size-large);"
aria-hidden="true" />
</span>
</button>
</li>
{/each}
</ul>
</div>
</section>
<div class="separator-with-text">
<span class="text">OR</span>
</div>
{/if}
{#if $canWriteKeys}
<section class="common-section grid-1-2">
<div class="grid-1-2-col-1">
<h3 class="heading-level-7">Integrate with your server</h3>
<p class="u-line-height-1-5 u-margin-block-start-16">
Appwrite is designed to adapt to your existing backend. Integrate Appwrite
with your backend code base using Server SDKs or Webhooks.
</p>
</div>
<div class="grid-1-2-col-2">
<ul class="grid-box">
<li class="grid-box-item">
<button
type="button"
class="card u-width-full-line"
on:click={createKey}>
<span class="u-flex u-cross-center u-gap-16">
<div class="avatar is-medium" aria-hidden="true">
<img
src={`${base}/icons/${$app.themeInUse}/grayscale/code.svg`}
alt="technology" />
</div>
<span class="text">API key</span>
<span
class="icon-plus u-margin-inline-start-auto"
style="font-size: var(--icon-size-large);"
aria-hidden="true" />
</span>
</button>
</li>
<li class="grid-box-item">
<a
href={`${base}/project-${projectId}/settings/webhooks`}
style="line-height: 1.5;"
class="card u-width-full-line">
<span class="u-flex u-cross-center u-gap-16">
<div class="avatar is-medium" aria-hidden="true">
<img
src={`${base}/icons/${$app.themeInUse}/grayscale/code.svg`}
alt="technology" />
</div>
<span class="text">Webhook</span>
<span
class="icon-plus u-margin-inline-start-auto"
style="font-size: var(--icon-size-large);"
aria-hidden="true" />
</span>
</a>
</li>
</ul>
</div>
</section>
{/if}
</div>
{/if}
{#if $canWriteKeys}
<section class="common-section grid-1-2">
<div class="grid-1-2-col-1">
<h3 class="heading-level-7">Integrate with your server</h3>
<p class="u-line-height-1-5 u-margin-block-start-16">
Appwrite is designed to adapt to your existing backend. Integrate Appwrite with your
backend code base using Server SDKs or Webhooks.
</p>
</div>
<div class="grid-1-2-col-2">
<ul class="grid-box">
<li class="grid-box-item">
<button type="button" class="card u-width-full-line" on:click={createKey}>
<span class="u-flex u-cross-center u-gap-16">
<div class="avatar is-medium" aria-hidden="true">
<img
src={`${base}/icons/${$app.themeInUse}/grayscale/code.svg`}
alt="technology" />
</div>
<span class="text">API key</span>
<span
class="icon-plus u-margin-inline-start-auto"
style="font-size: var(--icon-size-large);"
aria-hidden="true" />
</span>
</button>
</li>
<li class="grid-box-item">
<a
href={`${base}/project-${projectId}/settings/webhooks`}
style="line-height: 1.5;"
class="card u-width-full-line">
<span class="u-flex u-cross-center u-gap-16">
<div class="avatar is-medium" aria-hidden="true">
<img
src={`${base}/icons/${$app.themeInUse}/grayscale/code.svg`}
alt="technology" />
</div>
<span class="text">Webhook</span>
<span
class="icon-plus u-margin-inline-start-auto"
style="font-size: var(--icon-size-large);"
aria-hidden="true" />
</span>
</a>
</li>
</ul>
</div>
</section>
{/if}
</div>
{/if}
<article class="u-grid u-width-full-line common-section onboard-cover">
@@ -89,10 +89,10 @@
let:isButtonDisabled>
<DropList bind:show={showDropdown} placement="bottom-start">
{#if $canWritePlatforms}
<Button on:click={() => (showDropdown = !showDropdown)} disabled={isButtonDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Add platform</span>
</Button>
<Button on:click={() => (showDropdown = !showDropdown)} disabled={isButtonDisabled}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Add platform</span>
</Button>
{/if}
<svelte:fragment slot="list">
<DropListItem on:click={() => addPlatform(Platform.Web)}>Web app</DropListItem>
@@ -162,9 +162,11 @@
</Button>
<DropList bind:show={showDropdownEmpty} placement="bottom-start">
{#if $canWritePlatforms}
<Button secondary on:click={() => (showDropdownEmpty = !showDropdownEmpty)}>
<span class="text">Add platform</span>
</Button>
<Button
secondary
on:click={() => (showDropdownEmpty = !showDropdownEmpty)}>
<span class="text">Add platform</span>
</Button>
{/if}
<svelte:fragment slot="list">
<DropListItem on:click={() => addPlatform(Platform.Web)}>
@@ -78,39 +78,39 @@
{#if $project}
<UpdateName />
{#if $canWriteProjects}
<UpdateServices />
<UpdateInstallations {...data.installations} limit={data.limit} offset={data.offset} />
<UpdateVariables
{sdkCreateVariable}
{sdkUpdateVariable}
{sdkDeleteVariable}
isGlobal={true}
variableList={data.variables} />
<CardGrid>
<Heading tag="h6" size="7">Transfer project</Heading>
<p class="text">Transfer your project to another organization that you own.</p>
<UpdateServices />
<UpdateInstallations {...data.installations} limit={data.limit} offset={data.offset} />
<UpdateVariables
{sdkCreateVariable}
{sdkUpdateVariable}
{sdkDeleteVariable}
isGlobal={true}
variableList={data.variables} />
<CardGrid>
<Heading tag="h6" size="7">Transfer project</Heading>
<p class="text">Transfer your project to another organization that you own.</p>
<svelte:fragment slot="aside">
<FormList>
<InputSelect
id="organization"
label="Available organizations"
bind:value={teamId}
options={$organizationList.teams.map((team) => ({
value: team.$id,
label: team.name
}))} />
</FormList>
</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
<InputSelect
id="organization"
label="Available organizations"
bind:value={teamId}
options={$organizationList.teams.map((team) => ({
value: team.$id,
label: team.name
}))} />
</FormList>
</svelte:fragment>
<svelte:fragment slot="actions">
<Button
secondary
disabled={teamId === $project.teamId}
on:click={() => (showTransfer = true)}>Transfer</Button>
</svelte:fragment>
</CardGrid>
<DeleteProject />
<svelte:fragment slot="actions">
<Button
secondary
disabled={teamId === $project.teamId}
on:click={() => (showTransfer = true)}>Transfer</Button>
</svelte:fragment>
</CardGrid>
<DeleteProject />
{/if}
{/if}
</Container>
@@ -62,23 +62,23 @@
</svelte:fragment>
</CardGrid>
{#if $canWriteProjects}
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<CardGrid>
<Heading tag="h6" size="7">Name</Heading>
<svelte:fragment slot="aside">
<FormList>
<InputText
id="name"
label="Name"
bind:value={name}
required
placeholder="Enter name" />
</FormList>
</svelte:fragment>
<svelte:fragment slot="aside">
<FormList>
<InputText
id="name"
label="Name"
bind:value={name}
required
placeholder="Enter name" />
</FormList>
</svelte:fragment>
<svelte:fragment slot="actions">
<Button disabled={name === $project.name} submit>Update</Button>
</svelte:fragment>
</CardGrid>
<svelte:fragment slot="actions">
<Button disabled={name === $project.name} submit>Update</Button>
</svelte:fragment>
</CardGrid>
{/if}
</Form>
@@ -51,10 +51,10 @@
<Container>
<GridHeader title="Webhooks" {columns} view={data.view} hideColumns={false} hideView={true}>
{#if $canWriteWebhooks}
<Button on:click={openWizard} event="create_webhook">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create webhook</span>
</Button>
<Button on:click={openWizard} event="create_webhook">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Create webhook</span>
</Button>
{/if}
</GridHeader>
@@ -30,7 +30,7 @@
<ContainerHeader
title="Buckets"
total={data.buckets.total}
buttonText={$canWriteBuckets ? "Create bucket" : ""}
buttonText={$canWriteBuckets ? 'Create bucket' : ''}
buttonEvent="create_bucket"
buttonMethod={() => ($showCreateBucket = true)} />
{#if data.buckets.total}
@@ -23,11 +23,15 @@
event: 'usage',
hasChildren: true
},
...$canWriteBuckets ? [{
href: `${path}/settings`,
event: 'settings',
title: 'Settings'
}]:[]
...($canWriteBuckets
? [
{
href: `${path}/settings`,
event: 'settings',
title: 'Settings'
}
]
: [])
];
</script>