Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: QA issues

Browse Source
This commit is contained in:
Arman
2023-11-24 22:26:16 +01:00
parent 2dd404c1b9
commit fc137fecc5
13 changed files with 111 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/elements/forms/button.svelte
+2
View File
@@ -15,6 +15,7 @@
export let external = false;
export let href: string = null;
export let fullWidth = false;
export let fullWidthMobile = false;
export let ariaLabel: string = null;
export let noMargin = false;
export let event: string = null;
@@ -47,6 +48,7 @@
text && 'is-text',
danger && 'is-danger',
fullWidth && 'is-full-width',
fullWidthMobile && 'is-full-width-mobile',
noMargin && 'u-padding-inline-0',
classes
]
src/lib/layout/headerAlert.svelte
+26
View File
@@ -0,0 +1,26 @@
<script lang="ts">
export let title: string;
</script>
<section class="alert is-action is-action-and-top-sticky is-danger u-sep-block-end">
<div class="alert-grid">
<span class="icon-info" aria-hidden="true" />
<div class="alert-content">
{#if title || $$slots.title}
<h6 class="alert-title">
<slot name="title">
{title}
</slot>
</h6>
{/if}
<p class="alert-message">
<slot />
</p>
</div>
{#if $$slots.buttons}
<div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
<slot name="buttons" />
</div>
{/if}
</div>
</section>
src/lib/layout/index.ts
+1
View File
@@ -17,3 +17,4 @@ export { default as Activity } from './activity.svelte';
export { default as Progress } from './progress.svelte';
export { default as GridHeader } from './gridHeader.svelte';
export { default as ContainerHeader } from './containerHeader.svelte';
export { default as HeaderAlert } from './headerAlert.svelte';
src/routes/console/+layout.svelte
+32 -28
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import { INTERVAL } from '$lib/constants';
import { Logs } from '$lib/layout';
import { HeaderAlert, Logs } from '$lib/layout';
import Footer from '$lib/layout/footer.svelte';
import Header from '$lib/layout/header.svelte';
import SideNavigation from '$lib/layout/navigation.svelte';
@@ -44,6 +44,7 @@
import ExcesLimitModal from './organization-[organization]/excesLimitModal.svelte';
import { showExcess } from './organization-[organization]/store';
import UsageRates from './wizard/cloudOrganization/usageRates.svelte';
import { Button } from '$lib/elements/forms';
function kebabToSentenceCase(str: string) {
return str
@@ -327,6 +328,7 @@
const payment = await sdk.forConsole.billing.getPaymentMethod(
$organization.paymentMethodId
);
if (!payment?.expiryYear) return;
const year = new Date().getFullYear();
const month = new Date().getMonth();
const expiredMessage = `The default payment method for <b>${$organization.name}</b> has expired`;
@@ -393,33 +395,35 @@
<svelte:fragment slot="alert">
{#if $failedInvoice && !$page.url.pathname.includes('/console/account')}
{@const daysPassed = diffDays(new Date($failedInvoice.dueAt), new Date())}
<section class="alert is-action is-action-and-top-sticky is-danger u-sep-block-end">
<div class="alert-grid">
<span class="icon-info" aria-hidden="true" />
<div class="alert-content">
<h6 class="alert-title">Your projects are at risk</h6>
<p class="alert-message">
{#if daysPassed > 30}
Your scheduled payment on <b
>{toLocaleDate($failedInvoice?.dueAt)}</b> failed. To resume write
access of your organization, please update your billing details.
{:else}
Your scheduled payment on <b
>{toLocaleDate($failedInvoice?.dueAt)}</b> failed. Access to paid
projects within this organization will be disabled if no action is taken
within 30 days.
{/if}
</p>
</div>
<div class="alert-buttons u-flex u-gap-16 u-cross-child-center">
<a
href={`${base}/console/organization-${$failedInvoice?.teamId}/billing#paymentMethods`}
class="button is-secondary is-full-width-mobile">
<span class="text">Update billing details</span>
</a>
</div>
</div>
</section>
<HeaderAlert title="Your projects are at risk">
<svelte:fragment>
{#if daysPassed > 30}
Your scheduled payment on <b>{toLocaleDate($failedInvoice?.dueAt)}</b> failed.
To resume write access of your organization, please update your billing details.
{:else}
Your scheduled payment on <b>{toLocaleDate($failedInvoice?.dueAt)}</b> failed.
Access to paid projects within this organization will be disabled if no action
is taken within 30 days.
{/if}
</svelte:fragment>
<svelte:fragment slot="buttons">
<Button
href={`${base}/console/organization-${$failedInvoice?.teamId}/billing#paymentMethods`}
secondary
fullWidthMobile>
<span class="text">Update billing details</span>
</Button>
</svelte:fragment>
</HeaderAlert>
{/if}
<!-- TODO: add variable from backend that indicates org is due to be deleted -->
{#if false}
<HeaderAlert title="Organization flagged for deletion">
<svelte:fragment>
All existing projects in the {$organization.name} organization have been paused.
This organization will be deleted once your upcoming invoice is processed successfully.
</svelte:fragment>
</HeaderAlert>
{/if}
</svelte:fragment>
<Header slot="header" />
src/routes/console/organization-[organization]/billing/replaceCard.svelte
+6 -3
View File
@@ -22,12 +22,14 @@
onMount(async () => {
methods = await sdk.forConsole.billing.listPaymentMethods();
if (!$organization.paymentMethodId && !$organization.backupPaymentMethodId) {
selectedPaymentMethodId = methods?.total ? methods.paymentMethods[0].$id : null;
}
selectedPaymentMethodId = isBackup
? $organization.backupPaymentMethodId
: $organization.paymentMethodId;
});
// TODO: fix new payment method replacement
async function handleSubmit() {
try {
if (!selectedPaymentMethodId) {
@@ -167,7 +169,8 @@
secondary
submit
disabled={selectedPaymentMethodId ===
(isBackup ? $organization.backupPaymentMethodId : $organization.paymentMethodId)}
>Save</Button>
(isBackup ? $organization.backupPaymentMethodId : $organization.paymentMethodId)}>
Save
</Button>
</svelte:fragment>
</FakeModal>
src/routes/console/organization-[organization]/createMember.svelte
+1
View File
@@ -33,6 +33,7 @@
name || undefined
);
await invalidate(Dependencies.ACCOUNT);
await invalidate(Dependencies.ORGANIZATION);
showCreate = false;
addNotification({
type: 'success',
src/routes/console/organization-[organization]/members/+page.ts
+3 -2
View File
@@ -1,10 +1,11 @@
import { PAGE_LIMIT } from '$lib/constants';
import { Dependencies, PAGE_LIMIT } from '$lib/constants';
import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
import { sdk } from '$lib/stores/sdk';
import { Query } from '@appwrite.io/console';
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ url, params, route }) => {
export const load: PageLoad = async ({ url, params, route, depends }) => {
depends(Dependencies.ORGANIZATION);
const page = getPage(url);
const limit = getLimit(url, route, PAGE_LIMIT);
const offset = pageToOffset(page, limit);
src/routes/console/organization-[organization]/settings/+page.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { onMount } from 'svelte';
import Delete from '../deleteOrganization.svelte';
import Delete from './deleteOrganization.svelte';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
let name: string;
src/routes/console/organization-[organization]/settings/+page.ts
+10
View File
@@ -0,0 +1,10 @@
import type { PageLoad } from './$types';
import { Dependencies } from '$lib/constants';
import { sdk } from '$lib/stores/sdk';
export const load: PageLoad = async ({ depends }) => {
depends(Dependencies.ORGANIZATION);
return {
projects: await sdk.forConsole.projects.list()
};
};
src/routes/console/organization-[organization]/deleteOrganization.svelte → src/routes/console/organization-[organization]/settings/deleteOrganization.svelte
+25 -10
View File
@@ -8,8 +8,14 @@
import { base } from '$app/paths';
import { Dependencies } from '$lib/constants';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { projects } from '../store';
import { toLocaleDate } from '$lib/helpers/date';
export let showDelete = false;
let error: string = null;
//TODO: replace variable with value from method
const TEMPORARY_SET_FOR_DELETION = true;
async function deleteOrg() {
try {
@@ -26,12 +32,9 @@
goto(`${base}/console/onboarding`);
}
showDelete = false;
} catch (error) {
addNotification({
type: 'error',
message: error.message
});
trackError(error, Submit.OrganizationDelete);
} catch (e) {
error = e.message;
trackError(e, Submit.OrganizationDelete);
}
}
</script>
@@ -40,13 +43,25 @@
title="Delete organization"
onSubmit={deleteOrg}
bind:show={showDelete}
bind:error
icon="exclamation"
state="warning"
headerDivider={false}>
<p data-private>
Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
and data associated with this organization will be deleted. This action is irreversible.
</p>
{#if TEMPORARY_SET_FOR_DELETION}
<p data-private>
The organization <b>{$organization.name}</b> will be flagged for deletion.
</p>
<p data-private>
All existing projects will be paused and the organization will be deleted once your
upcoming invoice is processed on {toLocaleDate($organization.billingNextInvoiceDate)}.
</p>
{:else}
<p data-private>
Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$projects.total})
and data associated with this organization will be deleted. This action is irreversible.
</p>
{/if}
<svelte:fragment slot="footer">
<Button text on:click={() => (showDelete = false)}>Cancel</Button>
<Button secondary submit>Delete</Button>
src/routes/console/organization-[organization]/store.ts
+4 -1
View File
@@ -1,3 +1,6 @@
import { writable } from 'svelte/store';
import { page } from '$app/stores';
import type { Models } from '@appwrite.io/console';
import { derived, writable } from 'svelte/store';
export const showExcess = writable<boolean>(false);
export const projects = derived(page, ($page) => $page.data?.projects as Models.ProjectList);
src/routes/console/wizard/cloudOrganization/addressDetails.svelte
-6
View File
@@ -3,7 +3,6 @@
import { WizardStep } from '$lib/layout';
import { onMount } from 'svelte';
import { sdk } from '$lib/stores/sdk';
import { Alert } from '$lib/components';
import { createOrganization } from './store';
import type { AddressesList } from '$lib/sdk/billing';
@@ -32,11 +31,6 @@
<svelte:fragment slot="title">Billing address</svelte:fragment>
<svelte:fragment slot="subtitle">Add a billing address for your organization.</svelte:fragment>
<Alert type="info">
Depending on your location, your billing address might need to be in the same country
associated with the payment method for your organization.
</Alert>
<p class="text u-margin-block-start-24"><b>Billing address</b></p>
<FormList class="u-margin-block-start-8">
<div class:boxes-wrapper={addressList?.total}>
src/routes/console/wizard/cloudOrganizationChangeTier/addressDetails.svelte
-6
View File
@@ -3,7 +3,6 @@
import { WizardStep } from '$lib/layout';
import { onMount } from 'svelte';
import { sdk } from '$lib/stores/sdk';
import { Alert } from '$lib/components';
import { changeOrganizationTier } from './store';
import { organization } from '$lib/stores/organization';
import type { AddressesList } from '$lib/sdk/billing';
@@ -35,11 +34,6 @@
<svelte:fragment slot="title">Billing address</svelte:fragment>
<svelte:fragment slot="subtitle">Add a billing address for your organization.</svelte:fragment>
<Alert type="info">
Depending on your location, your billing address might need to be in the same country
associated with the payment method for your organization.
</Alert>
<p class="text u-margin-block-start-24"><b>Billing address</b></p>
<FormList class="u-margin-block-start-8">
<div class:boxes-wrapper={addressList?.total}>