From d26c549ec66fdf3799f2d8a721c0f66a3ab05dd1 Mon Sep 17 00:00:00 2001
From: "@a-ng-d" <a.grimaud@involt.io>
Date: Mon, 2 Sep 2024 00:36:58 +0200
Subject: [PATCH] refactor: update localization strings for pending
 announcements and actions

---
 src/content/locals.ts                |  9 +++-
 src/ui/modules/Highlight.tsx         | 74 +++++++++++++++++-----------
 src/ui/modules/PriorityContainer.tsx | 20 +-------
 src/ui/modules/Publication.tsx       |  4 +-
 src/utils/config.ts                  |  2 +-
 5 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/src/content/locals.ts b/src/content/locals.ts
index 269f87d2..9341ebc2 100644
--- a/src/content/locals.ts
+++ b/src/content/locals.ts
@@ -52,14 +52,13 @@ export const locals: { [key: string]: any } = {
       statusUptoDate: 'No change',
       statusUnpublished: 'Unpublished',
       statusRemoteChanges: 'Remote changes',
-      statusWaiting: 'Waiting…',
+      statusWaiting: 'Pending…',
       statusNotFound: 'Not found',
       publish: 'Publish…',
       unpublish: 'Unpublish',
       synchronize: 'Synchronize…',
       revert: 'Revert',
       detach: 'Detach',
-      waiting: 'Waiting…',
       signIn: 'Sign in to publish',
     },
     relaunch: {
@@ -456,6 +455,11 @@ export const locals: { [key: string]: any } = {
           'A top analytics platform for tracking and understanding user interactions',
       },
     },
+    pending: {
+      announcements: 'Pending announcements…',
+      primaryAction: '………',
+      secondaryAction: '………',
+    },
     success: {
       publication: '✓ The palette has been published',
       nonPublication: '✓ The palette has been unpublished',
@@ -511,6 +515,7 @@ export const locals: { [key: string]: any } = {
       addToFile: '✕ The palette cannot be added',
       noInternetConnection:
         '✕ The connection with the remote palette is unlinked',
+      announcements: 'The announcements cannot be loaded',
     },
   },
 }
diff --git a/src/ui/modules/Highlight.tsx b/src/ui/modules/Highlight.tsx
index 36cc3741..c60f1e76 100644
--- a/src/ui/modules/Highlight.tsx
+++ b/src/ui/modules/Highlight.tsx
@@ -1,11 +1,12 @@
-import { Dialog, Icon, texts } from '@a_ng_d/figmug-ui'
+import { Dialog, Icon, Message, texts } from '@a_ng_d/figmug-ui'
 import React from 'react'
 
 import { locals } from '../../content/locals'
-import { Language } from '../../types/app'
+import { HighlightDigest, Language } from '../../types/app'
 import { announcementsWorkerUrl } from '../../utils/config'
 
 interface HighlightProps {
+  highlight: HighlightDigest
   lang: Language
   onCloseHighlight: React.ReactEventHandler
 }
@@ -41,15 +42,6 @@ export default class Highlight extends React.Component<
         })
       })
       .catch(() => {
-        parent.postMessage(
-          {
-            pluginMessage: {
-              type: 'SEND_MESSAGE',
-              message: 'Nope',
-            },
-          },
-          '*'
-        )
         this.setState({ status: 'ERROR' })
       })
   }
@@ -67,28 +59,37 @@ export default class Highlight extends React.Component<
     if (this.state.status === 'LOADING')
       return (
         <Dialog
-          title="Loading..."
+          title={locals[this.props.lang].pending.announcements}
           actions={{
-            primary: {
-              label: locals[this.props.lang].publication.waiting,
-              state: 'DISABLED',
-              action: () => null,
-            },
-            secondary: {
-              label: locals[this.props.lang].publication.waiting,
-              state: 'DISABLED',
-              action: () => null,
-            },
+            primary: undefined,
+            secondary: undefined,
           }}
-          onClose={(e) => {
-            this.props.onCloseHighlight(e)
-            this.setState({ position: 0 })
+          onClose={this.props.onCloseHighlight}
+        >
+          <div className="onboarding__callout--centered">
+            <Icon
+              type="PICTO"
+              iconName="spinner"
+            />
+          </div>
+        </Dialog>
+      )
+    else if (this.state.status === 'ERROR')
+      return (
+        <Dialog
+          title={locals[this.props.lang].error.generic}
+          actions={{
+            primary: undefined,
+            secondary: undefined,
           }}
+          onClose={this.props.onCloseHighlight}
         >
-          <Icon
-            type="PICTO"
-            iconName="spinner"
-          />
+          <div className="onboarding__callout--centered">
+            <Message
+              icon="warning"
+              messages={[locals[this.props.lang].error.announcements]}
+            />
+          </div>
         </Dialog>
       )
     else
@@ -122,8 +123,21 @@ export default class Highlight extends React.Component<
               : undefined
           }
           onClose={(e) => {
+            parent.postMessage(
+              {
+                pluginMessage: {
+                  type: 'SET_ITEMS',
+                  items: [
+                    {
+                      key: 'highlight_version',
+                      value: this.props.highlight.version,
+                    },
+                  ],
+                },
+              },
+              '*'
+            )
             this.props.onCloseHighlight(e)
-            this.setState({ position: 0 })
           }}
         >
           <div className="dialog__cover">
diff --git a/src/ui/modules/PriorityContainer.tsx b/src/ui/modules/PriorityContainer.tsx
index 895ff935..1a1ceff5 100644
--- a/src/ui/modules/PriorityContainer.tsx
+++ b/src/ui/modules/PriorityContainer.tsx
@@ -291,24 +291,8 @@ export default class PriorityContainer extends React.Component<
         }
       >
         <Highlight
-          lang={this.props.lang}
-          onCloseHighlight={() => {
-            parent.postMessage(
-              {
-                pluginMessage: {
-                  type: 'SET_ITEMS',
-                  items: [
-                    {
-                      key: 'highlight_version',
-                      value: this.props.highlight.version,
-                    },
-                  ],
-                },
-              },
-              '*'
-            )
-            this.props.onClose()
-          }}
+          {...this.props}
+          onCloseHighlight={this.props.onClose}
         />
       </Feature>
     )
diff --git a/src/ui/modules/Publication.tsx b/src/ui/modules/Publication.tsx
index 2bc23ff9..091e76db 100644
--- a/src/ui/modules/Publication.tsx
+++ b/src/ui/modules/Publication.tsx
@@ -779,12 +779,12 @@ export default class Publication extends React.Component<
       },
       WAITING: {
         primary: {
-          label: locals[this.props.lang].publication.waiting,
+          label: locals[this.props.lang].pending.primaryAction,
           state: 'DISABLED',
           action: () => null,
         },
         secondary: {
-          label: locals[this.props.lang].publication.waiting,
+          label: locals[this.props.lang].pending.secondaryAction,
           state: 'DISABLED',
           action: () => null,
         },
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 2cf42d38..145a941f 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -11,7 +11,7 @@ export const authWorkerUrl =
     : (process.env.REACT_APP_AUTH_WORKER_URL as string)
 export const announcementsWorkerUrl =
   process.env.NODE_ENV === 'development'
-    ? 'http://localhost:8787'
+    ? 'http://localhost:8888'
     : (process.env.REACT_APP_ANNOUNCEMENTS_WORKER_URL as string)
 export const databaseUrl = process.env.REACT_APP_SUPABASE_URL as string
 export const authUrl =