feat: localize sqs queue page

Dabolus · Jan 7, 2024 · 0688df9 · 0688df9
1 parent 9452747
commit 0688df9
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/app/routes/sqs.queues.$name/QueueSidebar.tsx b/app/routes/sqs.queues.$name/QueueSidebar.tsx
@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Link as RemixLink,
   useFetcher,
@@ -30,6 +31,7 @@ export interface QueueSidebarProps {
 }
 
 const QueueSidebar: FunctionComponent<QueueSidebarProps> = ({ queue }) => {
+  const { t } = useTranslation();
   const { name } = useParams();
   const fetcher = useFetcher();
   const { revalidate } = useRevalidator();
@@ -46,17 +48,17 @@ const QueueSidebar: FunctionComponent<QueueSidebarProps> = ({ queue }) => {
       subheader={
         <Stack direction="row" py={1} gap={0.5}>
           {queue.Attributes?.FifoQueue === 'true' && (
-            <Tooltip title="First-In-First-Out">
+            <Tooltip title={t('firstInFirstOut')}>
               <Chip size="small" label="FIFO" />
             </Tooltip>
           )}
           {queue.Attributes?.ContentBasedDeduplication === 'true' && (
-            <Tooltip title="Content-Based Deduplication">
+            <Tooltip title={t('contentBasedDeduplication')}>
               <Chip size="small" label="CBD" />
             </Tooltip>
           )}
           {queue.Attributes?.SqsManagedSseEnabled === 'true' && (
-            <Tooltip title="SQS-Managed Server-Side Encryption">
+            <Tooltip title={t('sqsManagedSse')}>
               <Chip size="small" label="SSE" />
             </Tooltip>
           )}
@@ -65,7 +67,8 @@ const QueueSidebar: FunctionComponent<QueueSidebarProps> = ({ queue }) => {
               <Tooltip
                 title={
                   <>
-                    Dead Letter Queue for{' '}
+                    {t('dlqOf')}
+                    {': '}
                     {joinNodes(
                       queue.DeadLetterSourceQueues.map(queue => (
                         <strong key={queue.QueueUrl}>{queue.QueueName}</strong>
@@ -89,15 +92,15 @@ const QueueSidebar: FunctionComponent<QueueSidebarProps> = ({ queue }) => {
           component={RemixLink}
           to={withSearchParam('include', isPolling ? null : 'messages')}
         >
-          {isPolling ? 'Stop polling' : 'Start polling'}
+          {isPolling ? t('stopPolling') : t('startPolling')}
         </Button>
         <Button
           variant="contained"
           color="error"
           component={RemixLink}
           to={withSearchParam('delete', '')}
         >
-          Delete
+          {t('delete')}
         </Button>
       </Stack>
       <fetcher.Form method="POST" action={`/sqs/queues/${name}`}>
@@ -109,12 +112,12 @@ const QueueSidebar: FunctionComponent<QueueSidebarProps> = ({ queue }) => {
             multiline
             rows={3}
             name="message"
-            label="Message"
+            label={t('message')}
             inputProps={{
               style: { fontFamily: "'Amazon Ember Mono', monospace" },
             }}
           />
-          <Button type="submit">Send</Button>
+          <Button type="submit">{t('send')}</Button>
         </Stack>
       </fetcher.Form>
       <Box overflow="auto" mb={6}>

diff --git a/app/routes/sqs.queues.$name/route.tsx b/app/routes/sqs.queues.$name/route.tsx
@@ -18,16 +18,14 @@ import { computeTitle } from '~/src/utils';
 import QueueSidebar from './QueueSidebar';
 import { deleteQueueAction, postMessageToQueueAction } from './actions';
 import type { MetaFunction } from '@remix-run/node';
-
-export const meta: MetaFunction<typeof loader> = ({ data }) => [
-  computeTitle('SQS', 'Queues', data?.QueueName),
-];
+import { useServerTranslation } from '~/i18next.server';
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const sqsClient = getAwsClient('sqs');
   const { searchParams } = new URL(request.url);
   const extraIncludes = searchParams.getAll('include');
   const QueueName = params.name;
+  const serverTranslationPromise = useServerTranslation(request);
   const { QueueUrl } = await sqsClient.send(
     new GetQueueUrlCommand({ QueueName }),
   );
@@ -49,8 +47,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
         }),
       )
     : { Messages: undefined };
+  const { t } = await serverTranslationPromise;
 
   return json({
+    meta: { titleParts: [t('queues'), QueueName] },
     QueueName,
     QueueUrl,
     Attributes,
@@ -62,6 +62,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => [
+  computeTitle('SQS', ...(data?.meta.titleParts || [])),
+];
+
 export const action = (args: ActionFunctionArgs) => {
   switch (args.request.method) {
     case 'POST':

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -24,6 +24,7 @@
   "dlqHintExisting": "The queue \"{{dlqName}}\" will be used as DLQ",
   "dlqHintNew": "A queue named \"{{dlqName}}\" will be created and used as DLQ",
   "dlqHintNone": "No DLQ will be created",
+  "dlqOf": "Dead-letter queue of",
   "download": "Download",
   "dragAndDropOrClickToUploadFiles": "Drag and drop files here, or click to select files",
   "dropFilesToUpload": "Drop files here to upload them",
@@ -37,6 +38,7 @@
   "homeDescription": "A simple UI to interact with real or emulated AWS services (LocalStack, Minio, etc).",
   "lastModified": "Last modified",
   "maxReceiveCount": "Max receive count",
+  "message": "Message",
   "name": "Name",
   "noBucketsAvailable": "No buckets available.",
   "noObjectsAvailable": "No objects available.",
@@ -56,10 +58,13 @@
   "searchObjects": "Search objects",
   "searchQueues": "Search queues",
   "searchTables": "Search tables",
+  "send": "",
   "size": "Size",
   "sortKey": "Sort key",
   "sqsDescription": "Managed message queues for microservices & serverless applications",
   "sqsManagedSse": "SQS-managed server-side encryption",
+  "startPolling": "",
+  "stopPolling": "",
   "storageClass": "Storage class",
   "string": "String",
   "tableName": "Table name",

diff --git a/public/locales/it/common.json b/public/locales/it/common.json
@@ -24,6 +24,7 @@
   "dlqHintExisting": "La coda \"{{dlqName}}\" verrà utilizzata come DLQ",
   "dlqHintNew": "Una coda chiamata \"{{dlqName}}\" verrà creata e utilizzata come DLQ",
   "dlqHintNone": "Non verrà creata nessuna DLQ",
+  "dlqOf": "Dead-letter queue di",
   "download": "Scarica",
   "dragAndDropOrClickToUploadFiles": "Trascina e rilascia i file qui, o fai clic per selezionare i file",
   "dropFilesToUpload": "Rilascia i file qui per caricarli",
@@ -37,6 +38,7 @@
   "homeDescription": "Una semplice interfaccia utente per interagire con servizi AWS reali o emulati (LocalStack, Minio, ecc.)",
   "lastModified": "Ultima modifica",
   "maxReceiveCount": "Numero massimo di ricezioni",
+  "message": "Messaggio",
   "name": "Nome",
   "noBucketsAvailable": "Nessun bucket disponibile.",
   "noObjectsAvailable": "Nessun oggetto disponibile.",
@@ -56,10 +58,13 @@
   "searchObjects": "Cerca oggetti",
   "searchQueues": "Cerca code",
   "searchTables": "Cerca tabelle",
+  "send": "Invia",
   "size": "Dimensione",
   "sortKey": "Chiave di ordinamento",
   "sqsDescription": "Code di messaggi gestite per microservizi e applicazioni serverless",
   "sqsManagedSse": "Encryption server-side gestita da SQS",
+  "startPolling": "Avvia polling",
+  "stopPolling": "Interrompi polling",
   "storageClass": "Classe di archiviazione",
   "string": "Stringa",
   "tableName": "Nome tabella",