Skip to content

Fix message status pill colors #808

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

Merged
merged 4 commits into from
Feb 13, 2024
Merged

Fix message status pill colors #808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4d16bb1
Fix message status pill colors
stnguyen90 Feb 13, 2024
5eb791d
Update messages table to show Details link for errors
stnguyen90 Feb 13, 2024
adc1075
Update copy on the message errors modal
stnguyen90 Feb 13, 2024
76defd7
Add a button to view logs in message details
stnguyen90 Feb 13, 2024
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
19 changes: 12 additions & 7 deletions src/routes/console/project-[project]/messaging/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,13 +169,18 @@
</TableCellText>
{:else if column.id === 'status'}
<TableCellText onlyDesktop title="Status">
<MessageStatusPill
status={message.status}
on:click={(e) => {
e.preventDefault();
errors = message.deliveryErrors;
showFailed = true;
}} />
<span class="u-inline-flex u-gap-12 u-cross-center">
<MessageStatusPill status={message.status} />
{#if message.status === 'failed'}
<Button
link
on:click={(e) => {
e.preventDefault();
errors = message.deliveryErrors;
showFailed = true;
}}>Details</Button>
{/if}
</span>
</TableCellText>
{:else if column.type === 'datetime'}
<TableCellText title={column.title} width={column.width}>
Expand Down
11 changes: 10 additions & 1 deletion src/routes/console/project-[project]/messaging/failedModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,16 @@

<Modal title="Message error" headerDivider={false} bind:show size="big">
<div class="box u-flex-vertical u-gap-24">
<p>Some messages failed to send.</p>
<p class="u-inline-flex u-cross-center u-gap-8">
<span
class="icon-exclamation-circle u-font-size-20"
aria-hidden="true"
style="color:hsl(var(--color-danger-100));" />Message failed
</p>
<p>
The message has been sent with errors. Please refer to the logs below for more
information.
</p>
<div style="max-inline-size: 524px">
<Code language="html" code={errors.join('\n')} noMargin noBoxPadding allowScroll />
</div>
Expand Down
19 changes: 16 additions & 3 deletions src/routes/console/project-[project]/messaging/message-[message]/overview.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@
import ProviderType from '../providerType.svelte';
import MessageStatusPill from '../messageStatusPill.svelte';
import { MessagingProviderType } from '@appwrite.io/console';
import { Button } from '$lib/elements/forms';
import FailedModal from '../failedModal.svelte';

let scheduledAt: string = '';
let showFailed = false;
let errors: string[] = [];

if ($message.status === 'sent') {
scheduledAt = $message.deliveredAt;
} else if ($message.status === 'scheduled') {
Expand Down Expand Up @@ -46,8 +51,16 @@
</svelte:fragment>

<svelte:fragment slot="actions">
<!-- TODO: Add support for editing draft messages -->
<!-- <Button disabled={$message.status !== 'draft'} on:click={() => console.log('click')}
>Edit message</Button> -->
{#if $message.status === 'failed'}
<Button
text
on:click={(e) => {
e.preventDefault();
errors = $message.deliveryErrors;
showFailed = true;
}}>View logs</Button>
{/if}
</svelte:fragment>
</CardGrid>

<FailedModal bind:show={showFailed} {errors} />
10 changes: 3 additions & 7 deletions src/routes/console/project-[project]/messaging/messageStatusPill.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,11 @@
</script>

<Pill
success={status === 'sent'}
info={status === 'scheduled'}
button={status == 'failed'}
warning={status === 'processing'}
success={status === 'sent'}
danger={status == 'failed'}
on:click>
{#if status === 'sent'}
<span class="icon-check-circle" aria-hidden="true"></span>
{:else if status === 'scheduled'}
<span class="icon-clock" aria-hidden="true"></span>
{/if}
<span class="text u-trim">
{status}
</span>
Expand Down