Merge remote-tracking branch 'origin/main' into poc-invoice-cycle-ref

appwrite · Dec 23, 2024 · 10195f4 · 10195f4
2 parents 1ee29b2 + 4145174
commit 10195f4
Show file tree

Hide file tree

Showing 30 changed files with 302 additions and 115 deletions.
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
     webServer: {
         timeout: 120000,
         env: {
-            PUBLIC_APPWRITE_ENDPOINT: 'https://console-testing.appwrite.org/v1',
+            PUBLIC_APPWRITE_ENDPOINT: 'https://console-testing-2.appwrite.org/v1',
             PUBLIC_CONSOLE_MODE: 'cloud',
             PUBLIC_STRIPE_KEY:
                 'pk_test_51LT5nsGYD1ySxNCyd7b304wPD8Y1XKKWR6hqo6cu3GIRwgvcVNzoZv4vKt5DfYXL1gRGw4JOqE19afwkJYJq1g3K004eVfpdWn'

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
@@ -32,14 +32,20 @@
     export let noBoxPadding = false;
     export let allowScroll = false;
 
+    let classes = '';
+    export { classes as class };
+
     Prism.plugins.customClass.prefix('prism-');
 
     afterUpdate(async () => {
         Prism.highlightAll();
     });
 </script>
 
-<section class="box u-overflow-hidden" class:common-section={!noMargin} class:noBoxPadding>
+<section
+    class="box u-overflow-hidden {classes}"
+    class:common-section={!noMargin}
+    class:noBoxPadding>
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}

diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
@@ -6,6 +6,7 @@
     export let disabled = false;
     export let external = false;
     export let event: string = null;
+    export let iconStyle: string = '';
 
     function track() {
         if (!event) {
@@ -29,7 +30,7 @@
         rel={external ? 'noopener noreferrer' : ''}>
         <span class="text"><slot /></span>
         {#if icon}
-            <span class={`icon-${icon}`} aria-hidden="true" />
+            <span class={`icon-${icon}`} style={iconStyle} aria-hidden="true" />
         {/if}
     </a>
 </li>
diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
@@ -5,17 +5,14 @@
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { isCloud } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
     import { upgradeURL } from '$lib/stores/billing';
+    import { currentPlan } from '$lib/stores/organization';
 
     export let show = false;
 
-    $: isPaid =
-        $organization?.billingPlan === BillingPlan.PRO ||
-        $organization?.billingPlan === BillingPlan.SCALE;
+    $: hasPremiumSupport = $currentPlan?.premiumSupport ?? false;
 
     $: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeTimezoneName()}`;
 </script>
@@ -24,13 +21,13 @@
     <section class="drop-section u-grid u-gap-24 u-padding-24">
         <div>
             <h4 class="eyebrow-heading-3">Premium support</h4>
-            {#if isPaid}
+            {#if hasPremiumSupport}
                 <p class="u-line-height-1-5 u-margin-block-start-8">
                     Get personalized support from the Appwrite team from <b>{supportTimings}</b>
                 </p>
             {/if}
         </div>
-        {#if $organization?.billingPlan === BillingPlan.FREE}
+        {#if !hasPremiumSupport}
             <Button
                 fullWidth
                 href={$upgradeURL}

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
@@ -156,8 +156,9 @@
 
             <div class="u-stretch u-margin-block-start-32 u-overflow-hidden">
                 <section class="code-panel">
-                    <header class="code-panel-header u-flex u-main-space-between u-width-full-line">
-                        <div class="u-flex u-gap-24">
+                    <header
+                        class="code-panel-header code-panel-compact-header u-main-space-between u-width-full-line">
+                        <div class="u-flex">
                             <div class="u-flex u-gap-16">
                                 <h4 class="text u-bold">Method:</h4>
                                 <span class="u-text-color-gray">{execution.requestMethod}</span>
@@ -197,8 +198,9 @@
                             </div>
                         </div>
                     </header>
-                    <div class="code-panel-content grid-1-2" style="u-grid">
-                        <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
+                    <div class="code-panel-content grid-1-2">
+                        <div
+                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding">
                             <Heading tag="h3" size="6">Request</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>
@@ -281,7 +283,7 @@
                                     </div>
                                 {/if}
 
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     {execution.requestHeaders?.length
                                         ? 'Not all header data is'
                                         : 'Header data is not'}
@@ -296,7 +298,7 @@
                                     >.
                                 </p>
                             {:else if selectedRequest === 'body'}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     Body data is not captured by Appwrite for your user's security
                                     and privacy. To display body data in the Logs tab, use
                                     <b>context.log()</b>.
@@ -309,7 +311,9 @@
                                 </p>
                             {/if}
                         </div>
-                        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
+                        <div class="u-sep-block-end is-only-mobile u-padding-block-start-16" />
+                        <div
+                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding">
                             <Heading tag="h3" size="6">Response</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>
@@ -348,10 +352,12 @@
                                         </Alert>
                                     {/if}
                                     <Code
+                                        allowScroll
                                         withCopy
                                         noMargin
                                         code={unescapeNewLines(execution.logs)}
-                                        language="sh" />
+                                        language="sh"
+                                        class="limited-code-height" />
                                 {:else}
                                     <Card isDashed isTile>
                                         <p class="text u-text-center">No response was recorded.</p>
@@ -360,10 +366,12 @@
                             {:else if selectedResponse === 'errors'}
                                 {#if execution?.errors}
                                     <Code
+                                        allowScroll
                                         withCopy
                                         noMargin
                                         code={unescapeNewLines(execution.errors)}
-                                        language="sh" />
+                                        language="sh"
+                                        class="limited-code-height" />
                                 {:else}
                                     <Card isDashed isTile>
                                         <p class="text u-text-center">No response was recorded.</p>
@@ -389,7 +397,7 @@
                                         </TableBody>
                                     </TableScroll>
                                 {/if}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     {execution.responseHeaders?.length
                                         ? 'Not all header data is'
                                         : 'Header data is not'}
@@ -404,7 +412,7 @@
                                     >.
                                 </p>
                             {:else if selectedResponse === 'body'}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     Body data is not captured by Appwrite for your user's security
                                     and privacy. To display body data in the Logs tab, use
                                     <b>context.log()</b>.
@@ -423,3 +431,39 @@
         </div>
     </section>
 {/if}
+
+<style>
+    :global(.limited-code-height) {
+        overflow: auto;
+        max-height: 50vh;
+    }
+
+    .code-panel-compact-header .u-flex {
+        gap: 1.5rem;
+    }
+
+    @media (max-width: 768px) {
+        .code-panel-compact-header {
+            row-gap: 1rem;
+            flex-direction: column;
+        }
+
+        .code-panel-content {
+            padding: unset;
+            padding-block: 1.5rem;
+        }
+
+        .mobile-only-inline-20-padding {
+            padding-inline: 1.5rem;
+        }
+
+        .mobile-only-block-start-20-padding {
+            padding-block-start: 1.5rem;
+        }
+
+        .code-panel-content.grid-1-2 {
+            display: unset;
+            row-gap: unset;
+        }
+    }
+</style>
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
@@ -15,8 +15,7 @@
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { getContext } from 'svelte';
     import type { Writable } from 'svelte/store';
-
-    export let isOpen = false;
+    import { showSubNavigation } from '$lib/stores/layout';
 
     $: project = $page.params.project;
     $: projectPath = `${base}/project-${project}`;
@@ -44,12 +43,12 @@
     }
 
     function openFeedback() {
-        isOpen = false;
+        $showSubNavigation = false;
         wizard.start(Create);
     }
 
     function openSupport() {
-        isOpen = false;
+        $showSubNavigation = false;
         $showSupportModal = true;
     }
 </script>

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
@@ -7,21 +7,21 @@
     import { activeHeaderAlert } from '$routes/(console)/store';
     import { setContext } from 'svelte';
     import { writable } from 'svelte/store';
+    import { showSubNavigation } from '$lib/stores/layout';
 
-    export let isOpen = false;
     export let showSideNavigation = false;
 
     let y: number;
 
     page.subscribe(({ url }) => {
-        isOpen = url.searchParams.get('openNavbar') === 'true';
+        $showSubNavigation = url.searchParams.get('openNavbar') === 'true';
     });
 
     const toggleMenu = () => {
         y = 0;
-        isOpen = !isOpen;
+        $showSubNavigation = !$showSubNavigation;
         if (browser) {
-            if (isOpen) {
+            if ($showSubNavigation) {
                 document.body.classList.add('u-overflow-hidden');
             } else {
                 document.body.classList.remove('u-overflow-hidden');
@@ -52,7 +52,7 @@
 
 <main
     class:grid-with-side={showSideNavigation}
-    class:is-open={isOpen}
+    class:is-open={$showSubNavigation}
     class:u-hide={$wizard.show || $log.show || $wizard.cover}
     class:is-fixed-layout={$activeHeaderAlert?.show}
     style:--p-side-size={sideSize}>
@@ -65,7 +65,10 @@
             class="icon-button is-not-desktop"
             aria-label="Open Menu"
             on:click={toggleMenu}>
-            <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
+            <span
+                class:icon-x={$showSubNavigation}
+                class:icon-menu={!$showSubNavigation}
+                aria-hidden="true" />
         </button>
         <slot name="header" />
     </header>

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
@@ -285,6 +285,12 @@ export type Plan = {
     trialDays: number;
     isAvailable: boolean;
     selfService: boolean;
+    premiumSupport: boolean;
+    budgeting: boolean;
+    supportsMockNumbers: boolean;
+    backupsEnabled: boolean;
+    backupPolicies: number;
+    emailBranding: boolean;
 };
 
 export type PlansInfo = {

diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
@@ -25,3 +25,5 @@ export function updateLayout(args: updateLayoutArguments) {
     header.set(args.header ?? null);
     breadcrumb.set(args.breadcrumb ?? null);
 }
+
+export const showSubNavigation = writable(false);
diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
@@ -2,6 +2,7 @@ import { page } from '$app/stores';
 import { derived, writable } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 import type { Tier } from './billing';
+import type { Plan } from '$lib/sdk/billing';
 
 export type OrganizationError = {
     status: number;
@@ -54,4 +55,5 @@ export const organizationList = derived(
 );
 
 export const organization = derived(page, ($page) => $page.data?.organization as Organization);
+export const currentPlan = derived(page, ($page) => $page.data?.currentPlan as Plan);
 export const members = derived(page, ($page) => $page.data.members as Models.MembershipList);
diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
@@ -125,7 +125,7 @@
     </p>
     {#if selectedInstallation}
         {#await loadRepositories(selectedInstallation, search)}
-            <div class="u-flex u-gap-8 u-cross-center u-main-center">
+            <div class="u-flex u-gap-8 u-cross-center u-main-center" style:height="50vh">
                 <div class="loader u-margin-32" />
             </div>
         {:then response}
@@ -225,3 +225,9 @@
         </Button>
     </div>
 {/if}
+
+<style>
+    .icon-lock-closed {
+        color: hsl(var(--color-neutral-50));
+    }
+</style>
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
@@ -225,7 +225,7 @@
                                 {/each}
                             {:then templatesListWithoutStarter}
                                 {#each templatesListWithoutStarter.templates as template}
-                                    <li class="clickable-list-item">
+                                    <li class="clickable-list-item u-padding-block-8">
                                         <button
                                             type="button"
                                             on:click={() => {
@@ -295,6 +295,22 @@
         );
     }
 
+    .u-sep-block-start {
+        border-block-start: solid 0.0625rem hsl(var(--color-neutral)) !important;
+    }
+
+    .clickable-list-item:not(:last-child) {
+        border-block-end: solid 0.0625rem hsl(var(--color-neutral)) !important;
+    }
+
+    :global(.theme-light) {
+        --color-neutral: var(--color-neutral-10);
+    }
+
+    :global(.theme-dark) {
+        --color-neutral: var(--color-neutral-85);
+    }
+
     .inline-tag {
         line-height: 140%;
         font-weight: 500;

diff --git a/src/lib/wizards/functions/steps/gitConfiguration.svelte b/src/lib/wizards/functions/steps/gitConfiguration.svelte
@@ -67,7 +67,7 @@
                             $choices.branch = event.detail.value;
                         }}
                         interactiveOutput
-                        name="branch"
+                        name="branches"
                         {options} />
                     <InputText
                         id="root"