Merge branch 'main' into 'layout-header-alignment'.

This commit is contained in:
Darshan
2025-09-05 19:36:03 +05:30
9 changed files with 112 additions and 57 deletions
+12 -2
View File
@@ -14,6 +14,10 @@
export let wrapperFullWidth = false;
export let position: 'relative' | 'static' = 'relative';
export let noMaxWidthList = false;
export let paddingBlock: string = undefined;
export let paddingInline: string = undefined;
export let resetListPadding: boolean = false;
export let gap: string = undefined;
let classes: string = '';
export { classes as class };
</script>
@@ -34,14 +38,20 @@
class="drop is-no-arrow {classes}"
class:u-max-width-100-percent={fullWidth}
style:--drop-width-size-desktop={width ? `${width}rem` : ''}
style:margin-block-start={gap}
style:position>
{#if $$slots.list}
<section
class:u-overflow-y-auto={scrollable}
class:u-max-height-200={scrollable}
class="drop-section"
style={noMaxWidthList ? 'max-inline-size: 100%' : ''}>
<ul class="drop-list">
style={noMaxWidthList ? 'max-inline-size: 100%' : ''}
style:padding-block={paddingBlock}
style:padding-inline={paddingInline}>
<ul
class="drop-list"
style:padding={resetListPadding ? '0' : undefined}
style:margin={resetListPadding ? '0' : undefined}>
<slot name="list" />
</ul>
</section>
@@ -178,7 +178,7 @@
</script>
<Container size="xxl">
<div class="u-flex u-gap-32 u-flex-vertical-mobile">
<div class="backups-page u-flex u-gap-32 u-flex-vertical-mobile">
{#if !isDisabled}
<div class="u-flex-vertical u-gap-16 policies-holder-card">
<ContainerHeader
@@ -285,4 +285,8 @@
min-width: 330px;
}
}
:global(.backups-page .common-section) {
margin-block-start: 0 !important;
}
</style>
@@ -2,9 +2,11 @@
import { DropList } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
import { Badge, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
import { Badge, Icon, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
import { goto } from '$app/navigation';
import { upgradeURL } from '$lib/stores/billing';
import { BillingPlan } from '$lib/constants';
import { organization } from '$lib/stores/organization';
export let isFlex = true;
export let title: string;
@@ -39,13 +41,32 @@
{#if title === 'Policies' && policiesCreated >= maxPolicies}
<div style:height="40px;" style:padding-block-start="4px">
<DropList bind:show={showDropdown} width="16">
<Badge
variant="secondary"
content={`${policiesCreated}/${maxPolicies} created`}
on:click={() => (showDropdown = true)}>
<Icon icon={IconInfo} size="s" slot="start" />
</Badge>
<DropList
bind:show={showDropdown}
width="16"
noArrow
placement="bottom-start"
gap="6px"
paddingBlock="var(--space-5, 12px)"
paddingInline="var(--space-6, 16px)"
resetListPadding>
{#if $organization?.billingPlan === BillingPlan.PRO}
<Tag
size="s"
style="white-space: nowrap; max-width: none;"
on:click={() => (showDropdown = true)}>
<Icon icon={IconInfo} size="s" />
{policiesCreated}/{maxPolicies} created
</Tag>
{:else}
<Badge
style="white-space: nowrap; max-width: none;"
variant="secondary"
content={`${policiesCreated}/${maxPolicies} created`}
on:click={() => (showDropdown = true)}>
<Icon icon={IconInfo} size="s" slot="start" />
</Badge>
{/if}
<svelte:fragment slot="list">
<slot name="tooltip">
<span>
@@ -198,7 +198,7 @@
<!-- Prev / Next section -->
<div class="policy-cycles u-flex u-gap-24 u-padding-block-2">
<div style="width: 128px" class="u-flex-vertical policy-item-caption">
<div style="width: 160px" class="u-flex-vertical policy-item-caption">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
>Previous
</Typography.Caption>
@@ -225,7 +225,7 @@
<Divider vertical />
</div>
<div style="width: 128px" class="u-flex-vertical policy-item-caption">
<div style="width: 140px" class="u-flex-vertical policy-item-caption">
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
>Next
</Typography.Caption>
@@ -30,8 +30,8 @@ export const presetPolicies = writable<UserBackupPolicy[]>([
export const columns = writable<Column[]>([
{ id: 'backups', title: 'Backups', type: 'string', width: { min: 180 } },
{ id: 'size', title: 'Size', type: 'integer', width: { min: 163 } },
{ id: 'size', title: 'Size', type: 'integer', width: { min: 100 } },
{ id: 'status', title: 'Status', type: 'enum', width: { min: 163 } },
{ id: 'policy', title: 'Policy', type: 'string', width: { min: 163 } },
{ id: 'actions', title: '', type: 'string', width: 48 }
{ id: 'policy', title: 'Policy', type: 'string', width: { min: 100 } },
{ id: 'actions', title: '', type: 'string', width: 64 }
]);
@@ -205,7 +205,7 @@
<!--{/if}-->
</Table.Cell>
<Table.Cell column="policy" {root}>
<div class="u-flex u-main-space-between u-cross-baseline">
<div class="u-flex u-cross-baseline">
<Tooltip maxWidth="fit-content">
<span>
{policy?.name || 'Manual'}
@@ -217,51 +217,53 @@
</Tooltip>
</div>
</Table.Cell>
<Table.Cell column="action" {root}>
<Popover let:toggle padding="m" placement="bottom-end">
<Button extraCompact on:click={toggle}>
<Icon icon={IconDotsHorizontal} />
</Button>
<svelte:fragment slot="tooltip" let:toggle>
<ActionMenu.Root width="180px" noPadding>
{#if backup.status === 'completed'}
<Table.Cell column="actions" {root}>
<div class="action-cell u-flex u-main-end u-width-full-line">
<Popover let:toggle padding="m" placement="bottom-end">
<Button extraCompact on:click={toggle}>
<Icon icon={IconDotsHorizontal} />
</Button>
<svelte:fragment slot="tooltip" let:toggle>
<ActionMenu.Root width="180px" noPadding>
{#if backup.status === 'completed'}
<ActionMenu.Item.Button
trailingIcon={IconRefresh}
on:click={(e) => {
toggle(e);
showRestore = true;
selectedBackup = backup;
showDropdown[index] = false;
trackEvent(Click.BackupRestoreClick);
}}>
Restore
</ActionMenu.Item.Button>
{/if}
<ActionMenu.Item.Button
trailingIcon={IconRefresh}
trailingIcon={IconDuplicate}
on:click={(e) => {
toggle(e);
showRestore = true;
copy(backup.$id);
showDropdown[index] = false;
trackEvent(Click.BackupCopyIdClick);
}}>
Copy ID
</ActionMenu.Item.Button>
<ActionMenu.Item.Button
status="danger"
trailingIcon={IconTrash}
on:click={(e) => {
toggle(e);
showDelete = true;
selectedBackup = backup;
showDropdown[index] = false;
trackEvent(Click.BackupRestoreClick);
trackEvent(Click.BackupDeleteClick);
}}>
Restore
Delete
</ActionMenu.Item.Button>
{/if}
<ActionMenu.Item.Button
trailingIcon={IconDuplicate}
on:click={(e) => {
toggle(e);
copy(backup.$id);
showDropdown[index] = false;
trackEvent(Click.BackupCopyIdClick);
}}>
Copy ID
</ActionMenu.Item.Button>
<ActionMenu.Item.Button
status="danger"
trailingIcon={IconTrash}
on:click={(e) => {
toggle(e);
showDelete = true;
selectedBackup = backup;
showDropdown[index] = false;
trackEvent(Click.BackupDeleteClick);
}}>
Delete
</ActionMenu.Item.Button>
</ActionMenu.Root>
</svelte:fragment>
</Popover>
</ActionMenu.Root>
</svelte:fragment>
</Popover>
</div>
</Table.Cell>
</Table.Row.Base>
{/each}
@@ -34,6 +34,14 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
Query.limit(limit),
Query.offset(offset),
Query.orderDesc(''),
Query.select([
'buildSize',
'sourceSize',
'totalSize',
'buildDuration',
'status',
'type'
]),
...parsedQueries.values()
]
})
@@ -12,14 +12,16 @@ export const load = async ({ params, depends, parent }) => {
const [deploymentList, prodReadyDeployments, proxyRuleList] = await Promise.all([
sdk.forProject(params.region, params.project).sites.listDeployments({
siteId: params.site,
queries: [Query.limit(4), Query.orderDesc('')]
queries: [Query.limit(4), Query.orderDesc(''), Query.select(['status', 'type'])]
}),
sdk.forProject(params.region, params.project).sites.listDeployments({
siteId: params.site,
queries: [
Query.equal('status', 'ready'),
Query.equal('activate', true),
Query.orderDesc('')
Query.limit(1),
Query.orderDesc(''),
Query.select(['buildDuration', 'totalSize', 'sourceSize', 'buildSize', 'type'])
]
}),
sdk.forProject(params.region, params.project).proxy.listRules({
@@ -22,6 +22,14 @@ export const load = async ({ params, depends, url, route, parent }) => {
Query.limit(limit),
Query.offset(offset),
Query.orderDesc(''),
Query.select([
'buildSize',
'sourceSize',
'totalSize',
'buildDuration',
'status',
'type'
]),
...parsedQueries.values()
]
}),