Add provider details route

src/lib/constants.ts

@@ -42,7 +42,8 @@ export enum Dependencies {
     MIGRATIONS = 'dependency:migrations',
     COLLECTIONS = 'dependency:collections',
     RUNTIMES = 'dependency:runtimes',
-    CONSOLE_VARIABLES = 'dependency:console_variables'
+    CONSOLE_VARIABLES = 'dependency:console_variables',
+    MESSAGING_PROVIDER = 'dependency:messaging_provider'
 }
 
 export const scopes: {

src/routes/console/project-[project]/messaging/providers/provider-[provider]/+layout.svelte

@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Provider - Appwrite</title>
+</svelte:head>
+
+<slot />

src/routes/console/project-[project]/messaging/providers/provider-[provider]/+layout.ts

@@ -0,0 +1,32 @@
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+    depends(Dependencies.MESSAGING_PROVIDER);
+
+    const response = await sdk.forProject.client.call(
+        'GET',
+        new URL(sdk.forProject.client.config.endpoint + '/messaging/providers/' + params.provider),
+        {
+            'X-Appwrite-Project': sdk.forProject.client.config.project,
+            'content-type': 'application/json',
+            'X-Appwrite-Mode': 'admin'
+        }
+    );
+
+    console.log(response);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            provider: response
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};

src/routes/console/project-[project]/messaging/providers/provider-[provider]/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import DangerZone from './dangerZone.svelte';
+    import UpdateName from './updateName.svelte';
+    import UpdateStatus from './updateStatus.svelte';
+</script>
+
+<Container>
+    <UpdateStatus />
+    <UpdateName />
+    <DangerZone />
+</Container>

src/routes/console/project-[project]/messaging/providers/provider-[provider]/breadcrumbs.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '$routes/console/project-[project]/store';
+    import { provider } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/messaging`,
+            title: 'Messaging'
+        },
+        {
+            href: `/console/project-${$project.$id}/messaging/providers/provider-${$provider?.$id}`,
+            title: $provider?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />

src/routes/console/project-[project]/messaging/providers/provider-[provider]/dangerZone.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" context="module">
+    import { get } from 'svelte/store';
+
+    let showDelete = writable(false);
+
+    export const promptDeleteUser = (id: string) => {
+        showDelete.set(true);
+        goto(`/console/project-${get(project).$id}/auth/user-${id}`);
+    };
+</script>
+
+<script lang="ts">
+    import { CardGrid, BoxAvatar, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { writable } from 'svelte/store';
+    import { provider } from './store';
+    import { goto } from '$app/navigation';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { project } from '$routes/console/project-[project]/store';
+    import DeleteProvider from './deleteProvider.svelte';
+</script>
+
+<CardGrid danger>
+    <div>
+        <Heading tag="h6" size="7">Delete provider</Heading>
+    </div>
+    <p>The provider's instance will be permanently deleted. This action is irreversible.</p>
+    <svelte:fragment slot="aside">
+        <BoxAvatar>
+            <svelte:fragment slot="title">
+                <h6 class="u-bold u-trim-1">{$provider.name}</h6>
+            </svelte:fragment>
+            <p>
+                Last updated: {toLocaleDateTime($provider.$updatedAt)}
+            </p>
+        </BoxAvatar>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button secondary on:click={() => ($showDelete = true)} event="delete_messaging_provider"
+            >Delete</Button>
+    </svelte:fragment>
+</CardGrid>
+
+<DeleteProvider bind:showDelete={$showDelete} />

src/routes/console/project-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { provider } from './store';
+    import { project } from '../../../store';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+
+    export let showDelete = false;
+
+    const deleteProvider = async () => {
+        try {
+            await sdk.forProject.client.call(
+                'DELETE',
+                new URL(
+                    sdk.forProject.client.config.endpoint + '/messaging/providers/' + $provider.$id
+                ),
+                {
+                    'X-Appwrite-Project': sdk.forProject.client.config.project,
+                    'content-type': 'application/json',
+                    'X-Appwrite-Mode': 'admin'
+                }
+            );
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$provider.name} has been deleted`
+            });
+            trackEvent(Submit.MessagingProviderDelete);
+            await goto(`${base}/console/project-${$page.params.project}/messaging/providers`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.MessagingProviderDelete);
+        }
+    };
+</script>
+
+<Modal
+    title="Delete provider"
+    bind:show={showDelete}
+    onSubmit={deleteProvider}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <p data-private>
+        Are you sure you want to delete <b>{$provider.name}</b> from '{$project.name}'?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>

src/routes/console/project-[project]/messaging/providers/provider-[provider]/header.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Id } from '$lib/components';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { provider } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`/console/project-${projectId}/messaging/providers`}>
+            {$provider?.name ? $provider?.name : '-'}
+        </CoverTitle>
+        <Id value={$provider?.$id} event="provider">{$provider?.$id}</Id>
+    </svelte:fragment>
+</Cover>

src/routes/console/project-[project]/messaging/providers/provider-[provider]/store.ts

@@ -0,0 +1,9 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Provider } from '../../store';
+
+export const provider = derived(
+    page,
+    // TODO: Set actual type
+    ($page) => $page.data.provider as Provider
+);

src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateName.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { onMount } from 'svelte';
+    import { provider } from './store';
+
+    let providerName: string = null;
+    onMount(async () => {
+        providerName ??= $provider.name;
+    });
+
+    async function updateName() {
+        // TODO: switch on provider and update name
+        // try {
+        //     await sdk.forProject.users.updateName($provider.$id, providerName);
+        //     await invalidate(Dependencies.USER);
+        //     addNotification({
+        //         message: 'Name has been updated',
+        //         type: 'success'
+        //     });
+        //     trackEvent(Submit.UserUpdateName);
+        // } catch (error) {
+        //     addNotification({
+        //         message: error.message,
+        //         type: 'error'
+        //     });
+        //     trackError(error, Submit.UserUpdateName);
+        // }
+    }
+</script>
+
+<Form onSubmit={updateName}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Name</Heading>
+
+        <svelte:fragment slot="aside">
+            <ul data-private>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Enter name"
+                    autocomplete={false}
+                    bind:value={providerName} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={providerName === $provider.name} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>

src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { CardGrid, Heading } from '$lib/components';
+    import Provider from '$lib/components/provider.svelte';
+    import { Pill } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { provider } from './store';
+
+    async function updateStatus() {
+        if (!$provider.enabled) {
+            // TODO: open the wizard with the saved info that the developer already filled.
+            return;
+        }
+
+        // TODO: switch on provider and update status
+    }
+</script>
+
+<CardGrid>
+    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
+        <Provider provider="apns">
+            <Heading tag="h6" size="7">{$provider.name}</Heading>
+        </Provider>
+    </div>
+    <svelte:fragment slot="aside">
+        <div class="u-flex u-main-space-between">
+            <div data-private>
+                <!-- TODO: fix casing -->
+                <p class="title">Provider: {$provider.provider}</p>
+                <p class="title">Channel: {$provider.type}</p>
+                <p>Created: {toLocaleDateTime($provider.$createdAt)}</p>
+            </div>
+            <Pill success={$provider.enabled}>
+                {#if $provider.enabled}
+                    <span class="icon-check-circle" aria-hidden="true"></span>
+                {/if}
+                <span class="text u-trim">
+                    {$provider.enabled ? 'enabled' : 'disabled'}
+                </span>
+            </Pill>
+        </div>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button
+            text={$provider.enabled}
+            secondary={!$provider.enabled}
+            on:click={() => updateStatus()}>
+            {$provider.enabled ? 'Disable' : 'Enable'}
+        </Button>
+    </svelte:fragment>
+</CardGrid>