Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix messaging based on design review feedback #665

Merged
merged 2 commits into from
Jan 2, 2024
Merged

Fix messaging based on design review feedback #665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c130820
Fix alignment of create message/provider dropdowns
stnguyen90 Dec 19, 2023
81ddc61
Fix the order create message/provider drop items
stnguyen90 Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/routes/console/project-[project]/messaging/createMessageDropdown.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
345 changes: 173 additions & 172 deletions src/routes/console/project-[project]/messaging/providers/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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'
// }
}
}
};