From c130820ba2c148ce380cfbb009e033f1af308dc2 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 19 Dec 2023 12:50:14 -0800
Subject: [PATCH 1/2] Fix alignment of create message/provider dropdowns

The right side of the droplist should align with the right side of the button.
---
 .../project-[project]/messaging/createMessageDropdown.svelte    | 2 +-
 .../messaging/providers/createProviderDropdown.svelte           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
index 30d297df05..7a596496af 100644
--- a/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
+++ b/src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
@@ -11,7 +11,7 @@
     export let showCreateDropdown = false;
 </script>
 
-<DropList bind:show={showCreateDropdown} scrollable>
+<DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
     <slot>
         <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_message">
             <span class="icon-plus" aria-hidden="true" />
diff --git a/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte b/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte
index e829f4927c..d027d35941 100644
--- a/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte
+++ b/src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte
@@ -16,7 +16,7 @@
     ): value is T[keyof T] => Object.values<string>(enumType).includes(value);
 </script>
 
-<DropList bind:show={showCreateDropdown} scrollable>
+<DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
     <slot>
         <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_provider">
             <span class="icon-plus" aria-hidden="true" />

From 81ddc6123ebbd0838b72d0f7aea27b63f2cf5894 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 19 Dec 2023 12:50:51 -0800
Subject: [PATCH 2/2] Fix the order create message/provider drop items

---
 .../messaging/providers/store.ts              | 345 +++++++++---------
 1 file changed, 173 insertions(+), 172 deletions(-)

diff --git a/src/routes/console/project-[project]/messaging/providers/store.ts b/src/routes/console/project-[project]/messaging/providers/store.ts
index 714db9d9a7..68e518b744 100644
--- a/src/routes/console/project-[project]/messaging/providers/store.ts
+++ b/src/routes/console/project-[project]/messaging/providers/store.ts
@@ -38,6 +38,179 @@ type ProvidersMap = {
 };
 
 export const providers: ProvidersMap = {
+    [ProviderTypes.Push]: {
+        name: 'Push notification',
+        text: 'notifications',
+        icon: 'device-mobile',
+        providers: {
+            [Providers.FCM]: {
+                imageIcon: 'firebase',
+                title: 'FCM',
+                description: 'Firebase Cloud Messaging',
+                configure: [
+                    {
+                        label: 'Server key (.json file)',
+                        name: 'serverKey',
+                        type: 'file',
+                        allowedFileExtensions: ['json'],
+                        placeholder: 'Enter server key',
+                        popover: [
+                            '<b>How to get the FCM server key?</b>',
+                            'Head to <b>Project settings -> Service accounts -> Generate new private key.</b>',
+                            'Generating the new key will result in the download of a JSON file.'
+                        ]
+                    }
+                ]
+            },
+            [Providers.APNS]: {
+                imageIcon: 'apple',
+                title: 'APNS',
+                description: 'Apple Push Notification Service',
+                configure: [
+                    {
+                        label: 'Team ID',
+                        name: 'teamId',
+                        type: 'text',
+                        placeholder: 'Enter team ID',
+                        popover: [
+                            '<b>How to get the team ID?</b>',
+                            'Head to <b>Apple Developer Member Center -> Membership details -> Team ID.</b>'
+                        ]
+                    },
+                    {
+                        label: 'Bundle ID',
+                        name: 'bundleId',
+                        type: 'text',
+                        placeholder: 'Enter bundle ID',
+                        popover: [
+                            '<b>How to get the bundle ID?</b>',
+                            'Head to <b>Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Identifiers.</b>',
+                            `<a
+                                href="/images/apns-bundle-id.png"
+                                class="file-preview is-with-image"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                aria-label="open file in new window">
+                                <div class="file-preview-image">
+                                    <img
+                                        width="205"
+                                        height="125"
+                                        src="/images/apns-bundle-id.png"
+                                        alt="Screenshot of Bundle ID in Apple" />
+                                </div>
+                                <div class="file-preview-content">
+                                    <div class="avatar">
+                                        <span class="icon-external-link" aria-hidden="true" />
+                                    </div>
+                                </div>
+                            </a>`
+                        ]
+                    },
+                    {
+                        label: 'Authentication key ID',
+                        name: 'authKeyId',
+                        type: 'text',
+                        placeholder: 'Enter key ID',
+                        popover: [
+                            '<b>How to get the auth key ID?</b>',
+                            'Head to <b>Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Keys.</b>',
+                            'Click on your key to view details.'
+                        ]
+                    },
+                    {
+                        label: 'Auth key (.p8 file)',
+                        name: 'authKey',
+                        type: 'file',
+                        allowedFileExtensions: ['p8'],
+                        popover: [
+                            '<b>How to get the authentication key?</b>',
+                            'Head to <b>Apple Developer Member Center</b> (under Program resources) <b>-> Certificates, Identifiers & Profiles -> Keys.</b>',
+                            'Create a key and give it a name. Enable the Apple Push Notifications service (APNS), and register your key.'
+                        ]
+                    }
+                ]
+            }
+            // [Providers.MQTT]: {
+            //     imageIcon: 'mqtt',
+            //     title: 'MQTT',
+            //     description: 'Message Queuing Telemtry Transport'
+            // }
+        }
+    },
+    [ProviderTypes.Email]: {
+        name: 'Email',
+        text: 'emails',
+        icon: 'mail',
+        providers: {
+            [Providers.Mailgun]: {
+                imageIcon: 'mailgun',
+                title: 'Mailgun',
+                description: '',
+                configure: [
+                    {
+                        label: 'API key',
+                        name: 'apiKey',
+                        type: 'text',
+                        placeholder: 'Enter API key',
+                        popover: [
+                            '<b>How to get the API key?</b>',
+                            'Create an account in Mailgun.',
+                            'Head to <b>Profile -> API Security -> Add new key.</b>'
+                        ]
+                    },
+                    {
+                        label: 'Domain',
+                        name: 'domain',
+                        type: 'domain',
+                        placeholder: 'Enter domain',
+                        popover: [
+                            '<b>How to create a domain?</b>',
+                            'Head to <b>Sending -> Domains -> Add new domain.</b>',
+                            'Follow <b>Mailgun instructions</b> to verify the domain name.'
+                        ]
+                    },
+                    {
+                        label: 'EU region',
+                        name: 'isEuRegion',
+                        type: 'switch',
+                        description:
+                            'Enable the EU region setting if your domain is within the European Union.'
+                    },
+                    {
+                        label: 'Sender email',
+                        name: 'from',
+                        type: 'email',
+                        placeholder: 'Enter email'
+                    }
+                ]
+            },
+            [Providers.Sendgrid]: {
+                imageIcon: 'sendgrid',
+                title: 'Sendgrid',
+                description: '',
+                configure: [
+                    {
+                        label: 'API key',
+                        name: 'apiKey',
+                        type: 'text',
+                        placeholder: 'Enter API key',
+                        popover: [
+                            '<b>How to get the API key?</b>',
+                            'Create an account in Mailgun.',
+                            'Head to <b>Profile -> API Security -> Add new key.</b>'
+                        ]
+                    },
+                    {
+                        label: 'Sender email',
+                        name: 'from',
+                        type: 'email',
+                        placeholder: 'Enter email'
+                    }
+                ]
+            }
+        }
+    },
+
     [ProviderTypes.Sms]: {
         name: 'SMS',
         text: 'SMS',
@@ -205,177 +378,5 @@ export const providers: ProvidersMap = {
                 ]
             }
         }
-    },
-    [ProviderTypes.Email]: {
-        name: 'Email',
-        text: 'emails',
-        icon: 'mail',
-        providers: {
-            [Providers.Mailgun]: {
-                imageIcon: 'mailgun',
-                title: 'Mailgun',
-                description: '',
-                configure: [
-                    {
-                        label: 'API key',
-                        name: 'apiKey',
-                        type: 'text',
-                        placeholder: 'Enter API key',
-                        popover: [
-                            '<b>How to get the API key?</b>',
-                            'Create an account in Mailgun.',
-                            'Head to <b>Profile -> API Security -> Add new key.</b>'
-                        ]
-                    },
-                    {
-                        label: 'Domain',
-                        name: 'domain',
-                        type: 'domain',
-                        placeholder: 'Enter domain',
-                        popover: [
-                            '<b>How to create a domain?</b>',
-                            'Head to <b>Sending -> Domains -> Add new domain.</b>',
-                            'Follow <b>Mailgun instructions</b> to verify the domain name.'
-                        ]
-                    },
-                    {
-                        label: 'EU region',
-                        name: 'isEuRegion',
-                        type: 'switch',
-                        description:
-                            'Enable the EU region setting if your domain is within the European Union.'
-                    },
-                    {
-                        label: 'Sender email',
-                        name: 'from',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    }
-                ]
-            },
-            [Providers.Sendgrid]: {
-                imageIcon: 'sendgrid',
-                title: 'Sendgrid',
-                description: '',
-                configure: [
-                    {
-                        label: 'API key',
-                        name: 'apiKey',
-                        type: 'text',
-                        placeholder: 'Enter API key',
-                        popover: [
-                            '<b>How to get the API key?</b>',
-                            'Create an account in Mailgun.',
-                            'Head to <b>Profile -> API Security -> Add new key.</b>'
-                        ]
-                    },
-                    {
-                        label: 'Sender email',
-                        name: 'from',
-                        type: 'email',
-                        placeholder: 'Enter email'
-                    }
-                ]
-            }
-        }
-    },
-    [ProviderTypes.Push]: {
-        name: 'Push notification',
-        text: 'notifications',
-        icon: 'device-mobile',
-        providers: {
-            [Providers.FCM]: {
-                imageIcon: 'firebase',
-                title: 'FCM',
-                description: 'Firebase Cloud Messaging',
-                configure: [
-                    {
-                        label: 'Server key (.json file)',
-                        name: 'serverKey',
-                        type: 'file',
-                        allowedFileExtensions: ['json'],
-                        placeholder: 'Enter server key',
-                        popover: [
-                            '<b>How to get the FCM server key?</b>',
-                            'Head to <b>Project settings -> Service accounts -> Generate new private key.</b>',
-                            'Generating the new key will result in the download of a JSON file.'
-                        ]
-                    }
-                ]
-            },
-            [Providers.APNS]: {
-                imageIcon: 'apple',
-                title: 'APNS',
-                description: 'Apple Push Notification Service',
-                configure: [
-                    {
-                        label: 'Team ID',
-                        name: 'teamId',
-                        type: 'text',
-                        placeholder: 'Enter team ID',
-                        popover: [
-                            '<b>How to get the team ID?</b>',
-                            'Head to <b>Apple Developer Member Center -> Membership details -> Team ID.</b>'
-                        ]
-                    },
-                    {
-                        label: 'Bundle ID',
-                        name: 'bundleId',
-                        type: 'text',
-                        placeholder: 'Enter bundle ID',
-                        popover: [
-                            '<b>How to get the bundle ID?</b>',
-                            'Head to <b>Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Identifiers.</b>',
-                            `<a
-                                href="/images/apns-bundle-id.png"
-                                class="file-preview is-with-image"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                aria-label="open file in new window">
-                                <div class="file-preview-image">
-                                    <img
-                                        width="205"
-                                        height="125"
-                                        src="/images/apns-bundle-id.png"
-                                        alt="Screenshot of Bundle ID in Apple" />
-                                </div>
-                                <div class="file-preview-content">
-                                    <div class="avatar">
-                                        <span class="icon-external-link" aria-hidden="true" />
-                                    </div>
-                                </div>
-                            </a>`
-                        ]
-                    },
-                    {
-                        label: 'Authentication key ID',
-                        name: 'authKeyId',
-                        type: 'text',
-                        placeholder: 'Enter key ID',
-                        popover: [
-                            '<b>How to get the auth key ID?</b>',
-                            'Head to <b>Apple Developer Member Center -> Certificates, Identifiers & Profiles -> Keys.</b>',
-                            'Click on your key to view details.'
-                        ]
-                    },
-                    {
-                        label: 'Auth key (.p8 file)',
-                        name: 'authKey',
-                        type: 'file',
-                        allowedFileExtensions: ['p8'],
-                        popover: [
-                            '<b>How to get the authentication key?</b>',
-                            'Head to <b>Apple Developer Member Center</b> (under Program resources) <b>-> Certificates, Identifiers & Profiles -> Keys.</b>',
-                            'Create a key and give it a name. Enable the Apple Push Notifications service (APNS), and register your key.'
-                        ]
-                    }
-                ]
-            }
-            // [Providers.MQTT]: {
-            //     imageIcon: 'mqtt',
-            //     title: 'MQTT',
-            //     description: 'Message Queuing Telemtry Transport'
-            // }
-        }
     }
 };