Add messaging providers route

src/lib/actions/analytics.ts

@@ -287,5 +287,8 @@ export enum Submit {
     SmsResetTemplate = 'submit_sms_reset_template',
     SmsUpdateInviteTemplate = 'submit_sms_update_invite_template',
     SmsUpdateLoginTemplate = 'submit_sms_update_login_template',
-    SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template'
+    SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template',
+    MessagingProviderCreate = 'submit_messaging_provider_create',
+    MessagingProviderDelete = 'submit_messaging_provider_delete',
+    MessagingProviderUpdate = 'submit_messaging_provider_update'
 }

src/lib/components/drop.svelte

@@ -13,6 +13,7 @@
     export let noStyle = false;
     export let fullWidth = false;
     export let fixed = false;
+    export let display = 'block';
 
     const dispatch = createEventDispatcher<{
         blur: undefined;
@@ -100,7 +101,11 @@
 
 <svelte:window on:click={onBlur} on:keydown={onKeyDown} />
 
-<div class:drop-wrapper={!noStyle} class:u-cross-child-start={childStart} bind:this={element}>
+<div
+    class:drop-wrapper={!noStyle}
+    class:u-cross-child-start={childStart}
+    bind:this={element}
+    style:display>
     <slot />
 </div>
 

src/lib/components/labelCard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
+    import { app } from '$lib/stores/app';
+    import { base } from '$app/paths';
 
     export let name: string;
     export let group: string;
     export let value: string | number | boolean;
     export let disabled = false;
     export let padding = 1;
     export let icon: string = null;
+    export let imageIcon: string = null;
     export let fullHeight = true;
     export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
     export let backgroundColor: string = null;
@@ -58,5 +61,12 @@
                 <span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />
             {/if}
         {/if}
+        {#if imageIcon}
+            <img
+                class="u-margin-inline-start-auto"
+                style:--p-text-size="1.25rem"
+                src={`${base}/icons/${$app.themeInUse}/color/${imageIcon}.svg`}
+                alt={imageIcon} />
+        {/if}
     </div>
 </label>

src/lib/constants.ts

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

src/lib/elements/forms/inputDomain.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
+    import { Drop } from '$lib/components';
 
     export let label: string;
     export let showLabel = true;
@@ -19,6 +20,7 @@
 
     let element: HTMLInputElement;
     let error: string;
+    let show = false;
 
     onMount(() => {
         if (element && autofocus) {
@@ -48,7 +50,26 @@
 
 <FormItem>
     <Label {required} hide={!showLabel} for={id}>
-        {label}
+        {label}{#if $$slots.popover}
+            <Drop bind:show display="inline-block">
+                <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                &nbsp;<button
+                    type="button"
+                    on:click={() => (show = !show)}
+                    class="tooltip"
+                    aria-label="input tooltip">
+                    <span
+                        class="icon-info"
+                        aria-hidden="true"
+                        style="font-size: var(--icon-size-small)" />
+                </button>
+                <svelte:fragment slot="list">
+                    <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+                        <slot name="popover" />
+                    </div>
+                </svelte:fragment>
+            </Drop>
+        {/if}
     </Label>
 
     <div class="input-text-wrapper">

src/lib/elements/forms/inputEmail.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
+    import { Drop } from '$lib/components';
 
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -19,6 +20,7 @@
 
     let element: HTMLInputElement;
     let error: string;
+    let show = false;
 
     onMount(() => {
         if (element && autofocus) {
@@ -57,7 +59,26 @@
 
 <FormItem>
     <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
-        {label}
+        {label}{#if $$slots.popover}
+            <Drop bind:show display="inline-block">
+                <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                &nbsp;<button
+                    type="button"
+                    on:click={() => (show = !show)}
+                    class="tooltip"
+                    aria-label="input tooltip">
+                    <span
+                        class="icon-info"
+                        aria-hidden="true"
+                        style="font-size: var(--icon-size-small)" />
+                </button>
+                <svelte:fragment slot="list">
+                    <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+                        <slot name="popover" />
+                    </div>
+                </svelte:fragment>
+            </Drop>
+        {/if}
     </Label>
 
     <div

src/lib/elements/forms/inputFile.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Trim } from '$lib/components';
+    import { Drop, Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { onMount } from 'svelte';
     import { Helper, Label } from '.';
@@ -16,6 +16,7 @@
 
     let input: HTMLInputElement;
     let hovering = false;
+    let show = false;
 
     function setFiles(value: FileList) {
         if (!value) return;
@@ -94,7 +95,26 @@
 <div>
     {#if label}
         <Label {required} {optionalText} {tooltip} hide={!label}>
-            {label}
+            {label}{#if $$slots.popover}
+                <Drop bind:show display="inline-block">
+                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    &nbsp;<button
+                        type="button"
+                        on:click={() => (show = !show)}
+                        class="tooltip"
+                        aria-label="input tooltip">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+                            <slot name="popover" />
+                        </div>
+                    </svelte:fragment>
+                </Drop>
+            {/if}
         </Label>
     {/if}
     <div

src/lib/elements/forms/inputText.svelte

@@ -3,6 +3,7 @@
     import { FormItem, FormItemPart, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import TextCounter from './textCounter.svelte';
+    import { Drop } from '$lib/components';
 
     export let label: string = undefined;
     export let optionalText: string | undefined = undefined;
@@ -25,6 +26,7 @@
 
     let element: HTMLInputElement;
     let error: string;
+    let show = false;
 
     onMount(() => {
         if (element && autofocus) {
@@ -74,7 +76,26 @@
 <svelte:component this={wrapper} {fullWidth}>
     {#if label}
         <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}
+            {label}{#if $$slots.popover}
+                <Drop bind:show display="inline-block">
+                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    &nbsp;<button
+                        type="button"
+                        on:click={() => (show = !show)}
+                        class="tooltip"
+                        aria-label="input tooltip">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+                            <slot name="popover" />
+                        </div>
+                    </svelte:fragment>
+                </Drop>
+            {/if}
         </Label>
     {/if}
 

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

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Empty,
+        EmptySearch,
+        SearchQuery,
+        PaginationWithLimit,
+        Heading,
+        ViewSelector
+    } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import type { PageData } from './$types';
+    import { columns } from './store';
+    import Filters from '$lib/components/filters/filters.svelte';
+    import CreateProviderDropdown from './createProviderDropdown.svelte';
+    import Table from './table.svelte';
+
+    export let data: PageData;
+
+    let showCreateDropdownMobile = false;
+    let showCreateDropdownDesktop = false;
+    let showCreateDropdownEmpty = false;
+</script>
+
+<Container>
+    <div class="u-flex u-flex-vertical">
+        <div class="u-flex u-main-space-between">
+            <Heading tag="h2" size="5">Providers</Heading>
+            <div class="is-only-mobile">
+                <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
+            </div>
+        </div>
+        <!-- TODO: fix width of search input in mobile -->
+        <SearchQuery search={data.search} placeholder="Search provider">
+            <div class="u-flex u-gap-16 is-not-mobile">
+                <Filters query={data.query} {columns} />
+                <ViewSelector
+                    view={data.view}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+                <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
+            </div>
+        </SearchQuery>
+        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <ViewSelector
+                    view={data.view}
+                    {columns}
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+            </div>
+            <div class="u-flex-basis-50-percent">
+                <!-- TODO: fix width -->
+                <Filters query={data.query} {columns} />
+            </div>
+        </div>
+    </div>
+    {#if data.providers.total}
+        <Table {data} />
+
+        <PaginationWithLimit
+            name="Providers"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.providers.total} />
+    {:else if data.search && data.search != 'empty'}
+        <EmptySearch>
+            <div class="u-text-center">
+                <b>Sorry, we couldn't find '{data.search}'</b>
+                <p>There are no providers that match your search.</p>
+            </div>
+            <Button secondary href={`/console/project-${$page.params.project}/messaging/providers`}>
+                Clear search
+            </Button>
+        </EmptySearch>
+    {:else}
+        <!-- TODO: Update docs links -->
+        <Empty single target="provider">
+            <div class="u-text-center">
+                <Heading size="7" tag="h2" trimmed={false}>
+                    Create your first provider to get started.
+                </Heading>
+                <p class="body-text-2 u-bold u-margin-block-start-4">
+                    Need a hand? Learn more in our documentation.
+                </p>
+            </div>
+            <div class="u-flex u-flex-wrap u-gap-16 u-main-center">
+                <Button
+                    external
+                    href="https://appwrite.io/docs/references/cloud/client-web/providers"
+                    text
+                    event="empty_documentation"
+                    ariaLabel={`create provider`}>
+                    Documentation
+                </Button>
+                <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
+                    <Button
+                        secondary
+                        on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
+                        event="create_provider">
+                        <span class="text">Create provider</span>
+                    </Button>
+                </CreateProviderDropdown>
+            </div>
+        </Empty>
+    {/if}
+</Container>