diff --git a/package.json b/package.json index ef47925c9..564d62ce0 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "dependencies": { "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@d13e864", "@appwrite.io/pink-icons": "0.25.0", - "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ffaca61", + "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332", "@appwrite.io/pink-legacy": "^1.0.1", "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ffaca61", "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3de54dc37..11a1f5e05 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,8 +15,8 @@ importers: specifier: 0.25.0 version: 0.25.0 '@appwrite.io/pink-icons-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ffaca61 - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ffaca61(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332 + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332(svelte@4.2.19) '@appwrite.io/pink-legacy': specifier: ^1.0.1 version: 1.0.1 @@ -223,8 +223,8 @@ packages: peerDependencies: svelte: ^4.0.0 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ffaca61c9e94c624744b168517346fb0f5b04d84': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ffaca61c9e94c624744b168517346fb0f5b04d84} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -4105,7 +4105,7 @@ snapshots: dependencies: svelte: 4.2.19 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ffaca61c9e94c624744b168517346fb0f5b04d84(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2ff4e332(svelte@4.2.19)': dependencies: svelte: 4.2.19 diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte index 6c19d6b05..499cd5e95 100644 --- a/src/lib/components/avatarGroup.svelte +++ b/src/lib/components/avatarGroup.svelte @@ -24,7 +24,9 @@ {#if total > 2} - +{total - 2} + + +{total - 2} + {/if} diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte index 0585199b5..2ff8986ec 100644 --- a/src/lib/components/navbar.svelte +++ b/src/lib/components/navbar.svelte @@ -44,6 +44,7 @@ import { isTabletViewport } from '$lib/stores/viewport'; import { isCloud } from '$lib/system.js'; import { user } from '$lib/stores/user'; + import { trackEvent } from '$lib/actions/analytics'; let showSupport = false; @@ -68,6 +69,10 @@ : 'light' : theme; + trackEvent('select_theme', { + value: theme === 'auto' ? 'system' : theme + }); + app.update(() => ({ themeInUse: themeInUse, theme: theme @@ -130,12 +135,24 @@ { + trackEvent('click_organization_upgrade', { + from: 'button', + source: 'top_nav' + }); + }} href={`${base}/organization-${currentOrg.$id}/change-plan`} >Upgrade {/if} - toggleFeedback()} + { + toggleFeedback(); + trackEvent('click_menu_feedback', { source: 'top_nav' }); + }} >Feedback @@ -152,7 +169,10 @@ (showSupport = !showSupport)}> + on:click={() => { + showSupport = !showSupport; + trackEvent('click_menu_support', { source: 'top_nav' }); + }}> Support @@ -174,6 +194,9 @@ { showAccountMenu = !showAccountMenu; + if (showAccountMenu) { + trackEvent('click_menu_dropdown'); + } }}>
diff --git a/src/lib/components/roles/base.svelte b/src/lib/components/roles/base.svelte index 9e37e47b5..6733ad202 100644 --- a/src/lib/components/roles/base.svelte +++ b/src/lib/components/roles/base.svelte @@ -1,21 +1,10 @@ -
+
diff --git a/src/lib/components/roles/upgrade.svelte b/src/lib/components/roles/upgrade.svelte index 9e5487476..e482387c8 100644 --- a/src/lib/components/roles/upgrade.svelte +++ b/src/lib/components/roles/upgrade.svelte @@ -5,58 +5,62 @@ import { organization } from '$lib/stores/organization'; import { BillingPlan } from '$lib/constants'; import Button from '$lib/elements/forms/button.svelte'; + import { Badge, Layout, Link, Tag, Typography } from '@appwrite.io/pink-svelte'; - {#if isCloud} - {#if $organization?.billingPlan !== BillingPlan.FREE} -
-

- Roles - {#if $organization?.billingPlan === BillingPlan.FREE} - Pro plan - {/if} -

-

Owner, Developer, Editor, Analyst and Billing.

-
-

- about roles. -

- {:else} -
-

- Roles - {#if $organization?.billingPlan === BillingPlan.FREE} - Pro plan - {/if} -

-

+ + {#if isCloud} + {#if $organization?.billingPlan !== BillingPlan.FREE} + Roles + Owner, Developer, Editor, Analyst and Billing. + + Learn more + + {:else} + + + Roles + + + + Upgrade to Pro to assign new roles to members such as Owner, Developer, Editor or Analyst. + + +

+ +

-
+ {/if} + {:else} + + + Roles + + + + + Upgrade to Cloud to assign new roles to members or ask us about our enterprise self + hosted offering. +

- - + +

{/if} - {:else} -
-

- Roles - Appwrite Cloud -

-

- Upgrade to Cloud to assign new roles to members or ask us about our entriprise self - hosted offering. -

-
-

- - -

- {/if} + diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte index 0f1b3ecca..b9462140a 100644 --- a/src/lib/components/sidebar.svelte +++ b/src/lib/components/sidebar.svelte @@ -34,6 +34,7 @@ import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte'; import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar'; import { isTabletViewport } from '$lib/stores/viewport'; + import { trackEvent } from '$lib/actions/analytics'; type $$Props = HTMLElement & { state?: 'closed' | 'open' | 'icons'; @@ -66,6 +67,7 @@ $: state = $isTabletViewport ? 'closed' : getSidebarState(); $: pathname = $page.url.pathname; + $: isOnProjectSettings = /^\/console\/project-[a-zA-Z0-9-]+\/settings$/.test(pathname); const projectOptions = [ { name: 'Auth', icon: IconUserGroup, slug: 'auth' }, @@ -111,6 +113,7 @@ class="progress-card" href={`/console/project-${project.$id}/get-started`} on:click={() => { + trackEvent('click_menu_get_started'); sideBarIsOpen = false; }}>
@@ -138,6 +141,7 @@ class="link" class:active={pathname.includes('overview')} on:click={() => { + trackEvent('click_menu_overview'); sideBarIsOpen = false; }} > { + trackEvent(`click_menu_${projectOption.slug}`); sideBarIsOpen = false; }} >
- { + trackEvent('click_menu_settings'); + }} + class="link" > toggleFeedback()} + on:click={() => { + toggleFeedback(); + trackEvent('click_menu_feedback', { source: 'side_nav' }); + }} >Feedback @@ -212,7 +225,10 @@ ($showSupportModal = true)}> + on:click={() => { + $showSupportModal = true; + trackEvent('click_menu_support', { source: 'side_nav' }); + }}> Support @@ -232,7 +248,10 @@ { + trackEvent('click_menu_settings'); + }} + class:active={isOnProjectSettings} > toggleFeedback()} + on:click={() => { + toggleFeedback(); + trackEvent('click_menu_feedback', { source: 'side_nav' }); + }} >Feedback @@ -263,7 +285,10 @@ ($showSupportModal = true)}> + on:click={() => { + $showSupportModal = true; + trackEvent('click_menu_support', { source: 'side_nav' }); + }}> Support diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte index 9ca8c022a..70a7e05f1 100644 --- a/src/lib/components/tab.svelte +++ b/src/lib/components/tab.svelte @@ -10,6 +10,7 @@ export let selected = false; export let href: string = null; export let event: string = null; + export let noscroll = false; export let root: { variant: Variant; stretch: boolean } = { variant: 'primary', stretch: false @@ -87,6 +88,7 @@ {#if href} - import { goto, invalidate } from '$app/navigation'; - import { page } from '$app/stores'; - import { Submit, trackEvent, trackError } from '$lib/actions/analytics'; - import { Card, Heading } from '$lib/components'; - import { BillingPlan, Dependencies } from '$lib/constants'; - import { Button, Form, InputSelect, InputText } from '$lib/elements/forms'; - import FormList from '$lib/elements/forms/formList.svelte'; - import { Container } from '$lib/layout'; - import { addNotification } from '$lib/stores/notifications'; - import { sdk } from '$lib/stores/sdk'; - import { isCloud } from '$lib/system'; - import { ID } from '@appwrite.io/console'; - import { onMount } from 'svelte'; - import { tierToPlan, type Tier, plansInfo } from '$lib/stores/billing'; - import { formatCurrency } from '$lib/helpers/numbers'; - import { base } from '$app/paths'; - import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect'; - - let name: string; - let plan: Tier; - - const options = isCloud - ? [ - { - value: BillingPlan.FREE, - label: `${tierToPlan(BillingPlan.FREE).name} - ${formatCurrency($plansInfo.get(BillingPlan.FREE).price)} / month` - }, - { - value: BillingPlan.PRO, - label: `${tierToPlan(BillingPlan.PRO).name} - ${formatCurrency($plansInfo.get(BillingPlan.PRO).price)} / month + add-ons` - }, - { - value: BillingPlan.SCALE, - label: `${tierToPlan(BillingPlan.SCALE).name} - ${formatCurrency($plansInfo.get(BillingPlan.SCALE).price)}/month + usage` - } - ] - : []; - - onMount(() => { - if (isCloud) { - checkPricingRefAndRedirect($page.url.searchParams); - } - }); - - async function handleSubmit() { - const orgName = name?.length ? name : 'Personal Projects'; - if (isCloud) { - if (plan === BillingPlan.FREE) { - try { - const org = await sdk.forConsole.billing.createOrganization( - ID.unique(), - orgName, - plan, - null, - null - ); - trackEvent(Submit.OrganizationCreate, { - plan: tierToPlan(plan)?.name - }); - await invalidate(Dependencies.ACCOUNT); - await goto(`${base}/organization-${org.$id}`); - addNotification({ - message: `${orgName} organization successfully created`, - type: 'success' - }); - } catch (error) { - addNotification({ - message: error.message, - type: 'error' - }); - trackError(error, Submit.OrganizationCreate); - } - } else { - goto(`${base}/create-organization?name=${orgName}&plan=${plan}`); - } - } else { - try { - const org = await sdk.forConsole.teams.create(ID.unique(), orgName); - - await invalidate(Dependencies.ACCOUNT); - await goto(`${base}/organization-${org.$id}`); - - addNotification({ - message: `${orgName} organization successfully created`, - type: 'success' - }); - } catch (error) { - addNotification({ - message: error.message, - type: 'error' - }); - trackError(error, Submit.OrganizationCreate); - } - } - } - - - - - Create a new organization -
- - - {#if isCloud} -
-

Plan

-

- For more details on our plans, visit our . -

- - - -
- {/if} - - -
- - diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte index 6647afd93..71a6f18b7 100644 --- a/src/routes/(console)/organization-[organization]/+page.svelte +++ b/src/routes/(console)/organization-[organization]/+page.svelte @@ -25,16 +25,25 @@ import { sdk } from '$lib/stores/sdk'; import { loading } from '$routes/store'; import type { Models } from '@appwrite.io/console'; - import { ID, Region } from '@appwrite.io/console'; + import { ID, Region, PlatformType } from '@appwrite.io/console'; import { openImportWizard } from '../project-[project]/settings/migrations/(import)'; import { readOnly } from '$lib/stores/billing'; import type { RegionList } from '$lib/sdk/billing'; - import { onMount } from 'svelte'; + import { onMount, type ComponentType } from 'svelte'; import { organization } from '$lib/stores/organization'; import { canWriteProjects } from '$lib/stores/roles'; import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect'; - import { Icon } from '@appwrite.io/pink-svelte'; - import { IconPlus } from '@appwrite.io/pink-icons-svelte'; + import { Badge, Icon } from '@appwrite.io/pink-svelte'; + import { + IconAndroid, + IconApple, + IconCode, + IconFlutter, + IconGlobe, + IconPlus, + IconReact, + IconUnity + } from '@appwrite.io/pink-icons-svelte'; import { getPlatformInfo } from '$lib/helpers/platform'; export let data; @@ -64,6 +73,26 @@ if (isCloud) wizard.start(Create); else showCreate = true; } + + function getIconForPlatform(platform: string): ComponentType { + switch (platform) { + case 'web': + return IconCode; + case 'flutter': + return IconFlutter; + case 'apple': + return IconApple; + case 'android': + return IconAndroid; + case 'react-native': + return IconReact; + case 'unity': + return IconUnity; + default: + return null; + } + } + $: $registerCommands([ { label: 'Create project', @@ -170,10 +199,10 @@ {#each platforms as platform, i} {#if i < 3} - - + {@const icon = getIconForPlatform(platform.icon)} + + + {/if} {/each} {#if platforms?.length > 3} diff --git a/src/routes/(console)/organization-[organization]/createMember.svelte b/src/routes/(console)/organization-[organization]/createMember.svelte index 683501c13..6cf08dc39 100644 --- a/src/routes/(console)/organization-[organization]/createMember.svelte +++ b/src/routes/(console)/organization-[organization]/createMember.svelte @@ -59,24 +59,24 @@ } - - - + + + {#if isCloud} + - - {#if isCloud} - - {/if} - + popover={Roles} + id="role" + label="Role" + options={roles} + bind:value={role} /> + {/if} diff --git a/src/routes/(console)/organization-[organization]/createProject.svelte b/src/routes/(console)/organization-[organization]/createProject.svelte index 8638642ac..c3e372838 100644 --- a/src/routes/(console)/organization-[organization]/createProject.svelte +++ b/src/routes/(console)/organization-[organization]/createProject.svelte @@ -8,6 +8,8 @@ import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { ID, Region } from '@appwrite.io/console'; + import { IconPencil } from '@appwrite.io/pink-icons-svelte'; + import { Icon, Layout, Tag } from '@appwrite.io/pink-svelte'; import { createEventDispatcher } from 'svelte'; export let show = false; @@ -49,21 +51,27 @@ } - - + + {#if !showCustomId} -
- (showCustomId = !showCustomId)}> - -
+ + (showCustomId = !showCustomId)}> + + Project ID + + {:else} - + {/if} - + + diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte index c98000ea3..25d161257 100644 --- a/src/routes/(console)/organization-[organization]/members/+page.svelte +++ b/src/routes/(console)/organization-[organization]/members/+page.svelte @@ -14,9 +14,24 @@ import { isOwner } from '$lib/stores/roles'; import Edit from './edit.svelte'; import { getRoleLabel } from '$lib/stores/billing'; - import { Drop } from '$lib/components'; - import { IconDotsHorizontal, IconPlus } from '@appwrite.io/pink-icons-svelte'; - import { Layout, Table, Badge, Button, Icon } from '@appwrite.io/pink-svelte'; + import { + IconDotsHorizontal, + IconInfo, + IconPencil, + IconPlus, + IconRefresh, + IconTrash + } from '@appwrite.io/pink-icons-svelte'; + import { + Layout, + Table, + Badge, + Button, + Icon, + Typography, + Popover, + ActionMenu + } from '@appwrite.io/pink-svelte'; import Upgrade from '$lib/components/roles/upgrade.svelte'; export let data: PageData; @@ -25,7 +40,6 @@ let showDelete = false; let showEdit = false; let showDropdown = []; - let showPopover = false; const resend = async (member: Models.Membership) => { try { @@ -54,7 +68,8 @@ - + + Members newMemberModal.set(true)} event="create_user" size="s"> Invite @@ -65,28 +80,16 @@ Name Email - Roles - -   - -
- -
- - + + + Roles + + + + + + + 2FA {#if $isOwner} @@ -102,7 +105,7 @@ {member.userName ? member.userName : 'n/a'} {#if member.invited && !member.joined} - + {/if} @@ -121,49 +124,41 @@ {#if $isOwner} - - { - e.preventDefault(); - showDropdown[index] = !showDropdown[index]; - }}> - + + + - - { - selectedMember = member; - showEdit = true; - showDropdown[index] = false; - }}> - Edit role - - {#if member.invited && !member.joined} - + + { - resend(member); + selectedMember = member; + showEdit = true; showDropdown[index] = false; }}> - Resend - - {/if} - { - selectedMember = member; - showDelete = true; - showDropdown[index] = false; - }}> - Remove - - - + Edit role + + {#if member.invited && !member.joined} + { + resend(member); + }}> + Resend + + {/if} + { + selectedMember = member; + showDelete = true; + }}> + Remove + + +
+ {/if} diff --git a/src/routes/(console)/organization-[organization]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/settings/+page.svelte index 59bb50f98..0788e3092 100644 --- a/src/routes/(console)/organization-[organization]/settings/+page.svelte +++ b/src/routes/(console)/organization-[organization]/settings/+page.svelte @@ -53,14 +53,13 @@ Name -
    - -
+ diff --git a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte index 95ff127d9..52bc80b28 100644 --- a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte +++ b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte @@ -1,6 +1,6 @@ -
- - {#if upcomingInvoice} - - - You have a pending {formatCurrency(upcomingInvoice.grossAmount)} invoice for your - {tierToPlan(upcomingInvoice.plan).name} plan - -

- By proceeding, your invoice will be processed within the hour. Upon successful - payment, your organization will be deleted. -

- - {/if} - -

- {#if $projects.total > 0} - The following projects and all data associated with {$organization.name} will - be permanently deleted. This action is irreversible. - {:else} - All data associated with {$organization.name} will be permanently deleted. - This action is irreversible. - {/if} -

+ + {#if upcomingInvoice} + + By proceeding, your invoice will be processed within the hour. Upon successful payment, + your organization will be deleted. + + {/if} +

{#if $projects.total > 0} -

- - {#each tabs as { name, label, total }} - (selectedTab = name)}> - {label.desktop} ({total}) - - {/each} - - - - - {#each tabData.headers as header} - {header} - {/each} - - - {#each tabData.rows as row} - - {#each row.cells as cell} - {cell} - {/each} - - {/each} - - -
-
- - {#each tabs as { name, label, total }} - (selectedTab = name)}> - {label.mobile} ({total}) - - {/each} - - - - - {#each tabData.headers as header, index} - {header} - {/each} - - - {#each tabData.rows as row} - - {#each row.cells as cell, index} - {cell} - {/each} - - {/each} - - -
+ The following projects and all data associated with {$organization.name} will be + permanently deleted. This action is irreversible. + {:else} + All data associated with {$organization.name} will be permanently deleted. + This action is irreversible. {/if} +

- - - + {#if $projects.total > 0} + + {#each tabs as { name, label, total }} + (selectedTab = name)} + active={selectedTab === name}> + {label.desktop} ({total}) + + {/each} + - - - - - -
+ + + {#each tabData.headers as header} + {header} + {/each} + + {#each tabData.rows as row} + + {#each row.cells as cell} + {cell} + {/each} + + {/each} + +
+ + {#each tabs as { name, label, total }} + (selectedTab = name)}> + {label.mobile} ({total}) + + {/each} + + + + + {#each tabData.headers as header, index} + {header} + {/each} + + + {#each tabData.rows as row} + + {#each row.cells as cell, index} + {cell} + {/each} + + {/each} + + +
+ {/if} + + + + + + diff --git a/src/routes/(console)/project-[project]/overview/bandwidth.svelte b/src/routes/(console)/project-[project]/overview/bandwidth.svelte index a6e1b53c9..8f4924671 100644 --- a/src/routes/(console)/project-[project]/overview/bandwidth.svelte +++ b/src/routes/(console)/project-[project]/overview/bandwidth.svelte @@ -1,16 +1,16 @@ -
+
-
+ {bandwidth.value} {bandwidth.unit} -
-
Bandwidth
+ + Bandwidth
- - - - dispatch('change', '24h')}>24h - dispatch('change', '30d')}>30d - dispatch('change', '90d')}>90d + + + + {period} + + + + + + dispatch('change', '24h')} + >24h + dispatch('change', '30d')} + >30d + dispatch('change', '90d')} + >90d + - -
+ + {#if bandwidth.value !== '0'}
{#if !$page.url.pathname.includes('get-started')} @@ -45,6 +46,7 @@ variant="secondary" size="s" on:click={async () => { + trackEvent('onboarding_hub_platform_dismiss'); await setHasOnboardingDismissed($project.$id); goto(`${base}/project-${$project.$id}/overview`); requestAnimationFrame(() => { diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte index feeb49746..4c191ff50 100644 --- a/src/routes/(console)/project-[project]/overview/onboard.svelte +++ b/src/routes/(console)/project-[project]/overview/onboard.svelte @@ -37,8 +37,15 @@ import { AvatarGroup } from '$lib/components'; import type { Models } from '@appwrite.io/console'; import { getPlatformInfo } from '$lib/helpers/platform'; + import { trackEvent } from '$lib/actions/analytics'; + import { redirect } from '@sveltejs/kit'; + import { goto } from '$app/navigation'; function createKey() { + trackEvent('onboarding_hub_platform', { + platform: 'server', + state: 'add' + }); wizard.start(Wizard); } @@ -386,7 +393,12 @@ - addPlatform(0)} padding="s" + { + trackEvent('onboarding_hub_setup_databases'); + goto(`${base}/project-${projectId}/databases`); + }} + padding="s" >
{ + trackEvent( + 'onboarding_hub_api_references' + ); + }} target="_blank">API references { + trackEvent('onboarding_hub_tutorials'); + }} target="_blank">Tutorials { + trackEvent( + 'onboarding_hub_storage_quick_start' + ); + }} target="_blank" >Storage quick start { + trackEvent( + 'onboarding_hub_functions_quick_start' + ); + }} target="_blank" >Functions quick start @@ -458,16 +488,29 @@ { + trackEvent( + 'onboarding_hub_auth_email_password' + ); + }} >E-mail and password OAuth 2 + on:click={() => { + trackEvent( + 'onboarding_hub_auth_oauth2' + ); + }}>OAuth 2 View all methods + on:click={() => { + trackEvent( + 'onboarding_hub_auth_all_methods' + ); + }}>View all methods
- + { + trackEvent('onboarding_hub_discord'); + }}>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte index b35bbf617..83943e974 100644 --- a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte +++ b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte @@ -8,6 +8,7 @@ import CreateReactNative from './createReactNative.svelte'; import CreateWeb from './createWeb.svelte'; import { createPlatform, versions } from './wizard/store'; + import { trackEvent } from '$lib/actions/analytics'; export enum Platform { Web, @@ -20,6 +21,10 @@ export async function addPlatform(type: Platform) { await versions.load(); createPlatform.reset(); + trackEvent('onboarding_hub_platform', { + platform: platforms[type], + state: 'add' + }); wizard.start(platforms[type]); } @@ -35,6 +40,10 @@ key: key, type: type }); + trackEvent('onboarding_hub_platform', { + platform: platforms[platform], + state: 'continue' + }); wizard.start(platforms[platform], null, 1, { isPlatformCreated: true, platform: type, @@ -61,8 +70,15 @@ import type { PageData } from './$types'; import { canWritePlatforms } from '$lib/stores/roles'; import { setOverviewAction } from '../context'; - import { Table } from '@appwrite.io/pink-svelte'; + import { ActionMenu, Card, Empty, Popover, Table } from '@appwrite.io/pink-svelte'; import Action from './action.svelte'; + import { + IconAndroid, + IconApple, + IconCode, + IconFlutter, + IconReact + } from '@appwrite.io/pink-icons-svelte'; export let data: PageData; @@ -124,52 +140,49 @@ {/each} {:else} -
-
- {#if $app.themeInUse === 'dark'} - - {:else} - - {/if} - -
- Create a platform to get started. -

- Need a hand? Learn more in our documentation. -

-
-
- - - {#if $canWritePlatforms} - - {/if} - - addPlatform(Platform.Web)}> + + + + + + {#if $canWritePlatforms} + + {/if} +
+ + addPlatform(Platform.Web)} + leadingIcon={IconCode}> Web - - addPlatform(Platform.Flutter)}> + + addPlatform(Platform.Flutter)} + leadingIcon={IconFlutter}> Flutter - - addPlatform(Platform.Android)}> + + addPlatform(Platform.Android)} + leadingIcon={IconAndroid}> Android - - addPlatform(Platform.Apple)}> + + addPlatform(Platform.Apple)} + leadingIcon={IconApple}> Apple - - addPlatform(Platform.ReactNative)}> + + addPlatform(Platform.ReactNative)} + leadingIcon={IconReact}> React Native - - - -
- -
-
+ + +
+ + + + {/if} diff --git a/src/routes/(console)/project-[project]/overview/platforms/action.svelte b/src/routes/(console)/project-[project]/overview/platforms/action.svelte index 17dca51eb..dedbef189 100644 --- a/src/routes/(console)/project-[project]/overview/platforms/action.svelte +++ b/src/routes/(console)/project-[project]/overview/platforms/action.svelte @@ -3,26 +3,56 @@ import DropListItem from '$lib/components/dropListItem.svelte'; import Button from '$lib/elements/forms/button.svelte'; import { canWritePlatforms } from '$lib/stores/roles'; - import { Icon } from '@appwrite.io/pink-svelte'; + import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte'; import { addPlatform, Platform } from './+page.svelte'; - import { IconPlus } from '@appwrite.io/pink-icons-svelte'; + import { + IconAndroid, + IconApple, + IconCode, + IconFlutter, + IconPlus, + IconReact + } from '@appwrite.io/pink-icons-svelte'; let showDropdown = false; {#if $canWritePlatforms} - - - - addPlatform(Platform.Web)}>Web app - addPlatform(Platform.Flutter)}>Flutter app - addPlatform(Platform.Android)}>Android app - addPlatform(Platform.Apple)}>Apple app - addPlatform(Platform.ReactNative)} - >React Native app - - + + {#if $canWritePlatforms} + + {/if} +
+ + addPlatform(Platform.Web)} + leadingIcon={IconCode}> + Web + + addPlatform(Platform.Flutter)} + leadingIcon={IconFlutter}> + Flutter + + addPlatform(Platform.Android)} + leadingIcon={IconAndroid}> + Android + + addPlatform(Platform.Apple)} + leadingIcon={IconApple}> + Apple + + addPlatform(Platform.ReactNative)} + leadingIcon={IconReact}> + React Native + + +
+ {/if} diff --git a/src/routes/(console)/project-[project]/overview/realtime.svelte b/src/routes/(console)/project-[project]/overview/realtime.svelte index 852065d0b..14b5f50f3 100644 --- a/src/routes/(console)/project-[project]/overview/realtime.svelte +++ b/src/routes/(console)/project-[project]/overview/realtime.svelte @@ -3,6 +3,7 @@ import { BarChart } from '$lib/charts'; import { Card } from '$lib/components'; import { formatNum } from '$lib/helpers/string'; + import { Link, Typography } from '@appwrite.io/pink-svelte'; import { stats } from '../store'; $: projectId = $page.params.project; @@ -34,12 +35,11 @@ class="icon-chart-square-bar text-large" aria-hidden="true" style="font-size: 32px;" /> -

No data to show

- No data to show + Get started with Realtime + rel="noopener noreferrer">Get started with Realtime
{/if} diff --git a/src/routes/(console)/project-[project]/overview/requests.svelte b/src/routes/(console)/project-[project]/overview/requests.svelte index 7fe57efda..c9f940532 100644 --- a/src/routes/(console)/project-[project]/overview/requests.svelte +++ b/src/routes/(console)/project-[project]/overview/requests.svelte @@ -6,6 +6,8 @@ import { createEventDispatcher } from 'svelte'; import { LineChart } from '$lib/charts'; import { formatNum } from '$lib/helpers/string'; + import { ActionMenu, Icon, Layout, Link, Popover, Typography } from '@appwrite.io/pink-svelte'; + import { IconChevronDown } from '@appwrite.io/pink-icons-svelte'; export let period: UsagePeriods; @@ -23,25 +25,31 @@ } -
+
-
+ {formatNum(totalMetrics($usage?.requests))} -
-
Requests
+ + Requests
- - - - dispatch('change', '24h')}>24h - dispatch('change', '30d')}>30d - dispatch('change', '90d')}>90d - - -
+ + + + {period} + + + + + dispatch('change', '24h')} + >24h + dispatch('change', '30d')} + >30d + dispatch('change', '90d')} + >90d + + + + {#if totalMetrics($usage?.requests) !== 0}