UBER-554: show messages with error and allow resending (#3488)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>

plugins/gmail-assets/lang/en.json

@@ -13,10 +13,11 @@
     "ShareMessages": "Share messages",
     "Connect": "Connect",
     "RedirectGoogle": "You will be redirect to google auth page",
-    "ConnectGmai": "Connect Gmail account",
+    "ConnectGmail": "Connect Gmail account",
     "Reply": "Reply",
     "Subject": "Subject",
     "Send": "Send",
+    "Resend": "Resend",
     "NewMessage": "New message",
     "NewMessageTo": "New message to",
     "Cancel": "Cancel",

plugins/gmail-assets/lang/ru.json

@@ -13,10 +13,11 @@
     "ShareMessages": "Поделиться сообщениями",
     "Connect": "Подключить",
     "RedirectGoogle": "Вы будете перенаправлены на страницу авторизации Google",
-    "ConnectGmai": "Подключить Gmail",
+    "ConnectGmail": "Подключить Gmail",
     "Reply": "Ответить",
     "Subject": "Тема",
     "Send": "Отправить",
+    "Resend": "Переотправить",
     "NewMessage": "Новое сообщение",
     "NewMessageTo": "Новое сообщение для",
     "Cancel": "Отменить",

plugins/gmail-resources/src/components/Chats.svelte

@@ -31,21 +31,36 @@
   export let newMessage: boolean
   export let enabled: boolean
 
-  let messages: Message[] = []
+  let plainMessages: Message[] = []
+  let newMessages: Message[] = []
+  $: messages = newMessages.concat(plainMessages)
 
   let selected: Set<Ref<SharedMessage>> = new Set<Ref<SharedMessage>>()
   let selectable = false
 
   const messagesQuery = createQuery()
+  const newMessageQuery = createQuery()
 
   const notificationClient = NotificationClientImpl.getClient()
 
+  newMessageQuery.query(
+    gmail.class.NewMessage,
+    {
+      to: channel.value,
+      status: 'error'
+    },
+    (res) => {
+      newMessages = res as unknown as Message[]
+    },
+    { sort: { createdOn: SortingOrder.Descending } }
+  )
+
   function updateMessagesQuery (channelId: Ref<Channel>): void {
     messagesQuery.query(
       gmail.class.Message,
       { attachedTo: channelId },
       (res) => {
-        messages = res
+        plainMessages = res
         notificationClient.read(channelId)
       },
       { sort: { sendOn: SortingOrder.Descending } }

plugins/gmail-resources/src/components/Connect.svelte

@@ -48,7 +48,7 @@
 
 <div class="card">
   <div class="flex-between header">
-    <div class="overflow-label fs-title"><Label label={gmail.string.ConnectGmai} /></div>
+    <div class="overflow-label fs-title"><Label label={gmail.string.ConnectGmail} /></div>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="tool"

plugins/gmail-resources/src/components/FullMessage.svelte

@@ -14,16 +14,17 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { SharedMessage } from '@hcengineering/gmail'
+  import { NewMessage, SharedMessage } from '@hcengineering/gmail'
   import Button from '@hcengineering/ui/src/components/Button.svelte'
   import { createEventDispatcher } from 'svelte'
   import { IconArrowLeft, Label, Scroller, tooltip } from '@hcengineering/ui'
   import gmail from '../plugin'
   import FullMessageContent from './FullMessageContent.svelte'
-  import { createQuery } from '@hcengineering/presentation'
+  import { createQuery, getClient } from '@hcengineering/presentation'
   import attachment, { Attachment } from '@hcengineering/attachment'
   import { AttachmentPresenter } from '@hcengineering/attachment-resources'
   import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { Ref } from '@hcengineering/core'
 
   export let currentMessage: SharedMessage
   export let newMessage: boolean
@@ -32,10 +33,17 @@
   $: if (editor) editor.innerHTML = currentMessage.content
 
   const dispatch = createEventDispatcher()
+  const hasError = (currentMessage as unknown as NewMessage)?.status === 'error'
 
   const query = createQuery()
+  const client = getClient()
   let attachments: Attachment[] = []
 
+  async function resendMessage (): Promise<void> {
+    const messageId = currentMessage._id as string as Ref<NewMessage>
+    await client.updateDoc(gmail.class.NewMessage, currentMessage.space, messageId, { status: 'new' })
+  }
+
   $: currentMessage._id &&
     query.query(
       attachment.class.Attachment,
@@ -71,11 +79,14 @@
     </div>
     <div class="buttons-group small-gap">
       <Button
-        label={gmail.string.Reply}
+        label={hasError ? gmail.string.Resend : gmail.string.Reply}
         size={'small'}
         kind={'accented'}
         on:click={() => {
-          newMessage = true
+          if (hasError) {
+            resendMessage()
+            dispatch('close')
+          } else newMessage = true
         }}
       />
     </div>

plugins/gmail-resources/src/components/Message.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { SharedMessage } from '@hcengineering/gmail'
+  import type { NewMessage, SharedMessage } from '@hcengineering/gmail'
   import { AttachmentsPresenter } from '@hcengineering/attachment-resources'
   import { CheckBox, Label } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
@@ -24,6 +24,8 @@
   export let message: SharedMessage
   export let selected: boolean = false
   export let selectable: boolean = false
+  const isError = (message as unknown as NewMessage)?.status === 'error'
+  const errorMessage = isError ? (message as unknown as NewMessage) : undefined
 
   const dispatch = createEventDispatcher()
 </script>
@@ -42,7 +44,7 @@
       </div>
       <div class="content-dark-color flex">
         <AttachmentsPresenter value={message.attachments} object={message} />
-        <span class="content-color">{getTime(message.sendOn)}</span>
+        <span class="content-color">{!isError ? getTime(message.sendOn) : getTime(message.modifiedOn)}</span>
       </div>
     </div>
     <div class="content-dark-color text-sm overflow-label mr-4 mb-4">
@@ -52,9 +54,18 @@
     <div class="fs-title overflow-label mb-1">
       {message.subject}
     </div>
-    <div class="overflow-label">
-      {message.textContent}
-    </div>
+    {#if !isError}
+      <div class="overflow-label">
+        {message.textContent}
+      </div>
+    {/if}
+    {#if isError}
+      <div class="error-color top-divider mt-2 pt-2">
+        Error: {errorMessage && errorMessage?.error
+          ? JSON.parse(errorMessage.error)?.data?.error_description
+          : undefined ?? 'unknown error'}
+      </div>
+    {/if}
   </div>
   {#if selectable}
     <div class="ml-4"><CheckBox circle accented bind:checked={selected} /></div>

plugins/gmail-resources/src/plugin.ts

@@ -29,10 +29,11 @@ export default mergeIds(gmailId, gmail, {
     ShareMessages: '' as IntlString,
     Connect: '' as IntlString,
     RedirectGoogle: '' as IntlString,
-    ConnectGmai: '' as IntlString,
+    ConnectGmail: '' as IntlString,
     Reply: '' as IntlString,
     Subject: '' as IntlString,
     Send: '' as IntlString,
+    Resend: '' as IntlString,
     NewMessage: '' as IntlString,
     NewMessageTo: '' as IntlString,
     Cancel: '' as IntlString,