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

Merge pull request #1832 from appwrite/fix-provider-wizard-aside

Browse Source 
Fix provider wizard aside
This commit is contained in:
Ernst Mulders
2025-05-08 15:01:39 +02:00
committed by GitHub
parent 073eb2d314 8296eb08a5
commit d19ba8b837
4 changed files with 76 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -27,7 +27,7 @@
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f",
"@appwrite.io/pink-legacy": "^1.0.3",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
pnpm-lock.yaml
Generated
+12 -12
View File
@@ -27,8 +27,8 @@ importers:
specifier: ^1.0.3
version: 1.0.3
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -258,14 +258,14 @@ packages:
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f76aff1}
version: 1.2.1
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -279,8 +279,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.3':
resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -3627,11 +3627,11 @@ snapshots:
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f76aff1': {}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a(svelte@5.25.3)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f(svelte@5.25.3)':
dependencies:
svelte: 5.25.3
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f(svelte@5.25.3)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10(svelte@5.25.3)':
dependencies:
svelte: 5.25.3
@@ -3644,9 +3644,9 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@de27ca4(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a(svelte@5.25.3)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@de27ca407599e51b378814b421fb63625cb98c10(svelte@5.25.3)
'@floating-ui/dom': 1.6.13
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
'@melt-ui/svelte': 0.86.6(svelte@5.25.3)
src/routes/(console)/project-[project]/messaging/providers/create.svelte
+62 -4
View File
@@ -10,11 +10,26 @@
import { base } from '$app/paths';
import { project } from '../../store';
import { wizard } from '$lib/stores/wizard';
import { provider, providerParams } from './wizard/store';
import { ID, type Models } from '@appwrite.io/console';
import { provider, providerParams, providerType } from './wizard/store';
import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
import { Providers } from '../provider.svelte';
import { Button, Form } from '$lib/elements/forms';
import { Fieldset, Layout } from '@appwrite.io/pink-svelte';
import {
Fieldset,
Layout,
Typography,
ActionList,
Accordion,
Card
} from '@appwrite.io/pink-svelte';
import { providers } from '$routes/(console)/project-[project]/messaging/providers/store';
import { getProviderText } from '$routes/(console)/project-[project]/messaging/helper';
import { newMemberModal } from '$lib/stores/organization';
import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
import { IconBookOpen, IconInfo, IconUserGroup } from '@appwrite.io/pink-icons-svelte';
import { getProviderDisplayNameAndIcon } from '$routes/(console)/project-[project]/messaging/provider.svelte';
let open = false;
async function create() {
try {
@@ -167,7 +182,7 @@
});
</script>
<Wizard title="Create provider">
<Wizard title="Create provider" columnSize="l">
<Form onSubmit={create} isModal={false}>
<Layout.Stack gap="xxl">
<Fieldset legend="Provider">
@@ -181,4 +196,47 @@
</Layout.Stack>
</Layout.Stack>
</Form>
<svelte:fragment slot="aside">
<Card.Base padding="s">
<Layout.Stack gap="s">
<Typography.Text variant="m-500">Need a hand?</Typography.Text>
<ActionList.Root>
{#if providers[$providerType].providers[$provider].needAHand}
{@const needAHand = providers[$providerType].providers[$provider].needAHand}
<ActionList.Item.Accordion
hasDivider
title={`How to enable ${getProviderText($provider)} ${
$providerType == MessagingProviderType.Push ||
$providerType == MessagingProviderType.Sms
? `${getProviderDisplayNameAndIcon($provider).displayName} notifications`
: getProviderText($provider)
}?`}
icon={IconInfo}>
<Layout.Stack>
{#each needAHand as p}
<p>
{@html p}
</p>
{/each}
</Layout.Stack>
</ActionList.Item.Accordion>
{/if}
<ActionList.Item.Anchor
hasDivider
href={`https://appwrite.io/docs/products/messaging/${$provider}`}
title="Read the guide in the docs"
icon={IconBookOpen} />
<ActionList.Item.Button
on:click={() => {
$newMemberModal = true;
}}
title="Invite a team member"
icon={IconUserGroup} />
</ActionList.Root>
</Layout.Stack>
</Card.Base>
</svelte:fragment>
{#if $newMemberModal}
<CreateMember bind:showCreate={$newMemberModal} />
{/if}
</Wizard>
src/routes/(console)/project-[project]/messaging/providers/wizard/settings.svelte
+1 -122
View File
@@ -4,8 +4,7 @@
import { providers } from '../store';
import { providerType, provider, providerParams } from './store';
import SettingsFormList from '../settingsFormList.svelte';
import { newMemberModal } from '$lib/stores/organization';
import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
import { MessagingProviderType } from '@appwrite.io/console';
import {
Collapsible,
@@ -17,7 +16,6 @@
let files: Record<string, FileList> = {};
$: inputs = providers[$providerType].providers[$provider].configure;
let open = false;
$: {
files;
@@ -65,7 +63,6 @@
</script>
<WizardStep {beforeSubmit}>
<svelte:fragment slot="title">Settings</svelte:fragment>
<svelte:fragment slot="subtitle">
Set up the credentials below to enable {providers[$providerType].providers[$provider].title}
for sending
@@ -73,122 +70,4 @@
</svelte:fragment>
<SettingsFormList bind:files {inputs} bind:params={$providerParams[$provider]} />
<div class="need-a-hand u-flex-vertical u-gap-8">
<p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
<div>
{#if providers[$providerType].providers[$provider].needAHand}
{@const needAHand = providers[$providerType].providers[$provider].needAHand}
<div
class="how-to-enable u-padding-inline-8 u-padding-0"
style={!open ? '' : 'background-color: hsl(var(--p-bg-color-hover));'}>
<Collapsible>
<CollapsibleItem withIndentation bind:open>
<svelte:fragment slot="beforetitle">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span
class="icon-info"
style:--p-text-size="1.25rem"
aria-hidden="true"></span>
</div>
<span class="title body-text-2 u-small" class:u-bold={open}
>How to enable {getProviderText($provider)}
{#if $providerType == MessagingProviderType.Push}notifications{:else}{getProviderText(
$provider
)}{/if} service?</span>
</div>
</svelte:fragment>
<div class="u-flex-vertical u-gap-16">
{#each needAHand as p}
<p>
{@html p}
</p>
{/each}
</div>
</CollapsibleItem>
</Collapsible>
</div>
<div class="u-margin-block-start-4 u-sep-block-end"></div>
{/if}
<ClickableList>
<ClickableListItem
href={`https://appwrite.io/docs/products/messaging/${$provider}`}
external>
<div class="u-flex u-cross-center u-main-space-between">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span
class="icon-book-open"
style:--p-text-size="1.25rem"
aria-hidden="true"></span>
</div>
<p>Read the full guide in the documentation</p>
</div>
<span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true"></span>
</div>
</ClickableListItem>
<ClickableListItem on:click={() => ($newMemberModal = true)}>
<div class="u-flex u-cross-center u-main-space-between">
<div class="u-flex u-cross-center u-gap-16">
<div class="avatar is-size-small">
<span
class="icon-user-group"
style:--p-text-size="1.25rem"
aria-hidden="true"></span>
</div>
<p>Invite a team member to complete this step</p>
</div>
<span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true"></span>
</div>
</ClickableListItem>
</ClickableList>
</div>
</div>
</WizardStep>
{#if $newMemberModal}
<CreateMember bind:showCreate={$newMemberModal} />
{/if}
<style lang="scss">
.need-a-hand {
--p-bg-color-hover: var(--color-neutral-5);
.how-to-enable {
border-radius: var(--border-radius-small);
&:hover,
&:focus {
background-color: hsl(var(--p-bg-color-hover));
.title {
font-weight: 600;
}
}
}
:global(.clickable-list) {
--border: var(--color-neutral-5);
--p-clickable-button-bg-color-hover: var(--border);
:global(.theme-dark) & {
--border: var(--color-neutral-85);
}
}
:global(.clickable-list-button) {
padding-inline: 0.5rem;
}
:global(.theme-dark) & {
--p-bg-color-hover: var(--color-neutral-85);
}
}
:global(.clickable-list-button):hover p,
:global(.clickable-list-button):focus p {
font-weight: 600;
}
</style>