From 11a4b3d81a148f9d2eb12c739da13817817504ee Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Fri, 27 Sep 2024 17:07:51 -0700
Subject: [PATCH] Fix dynamic uses of i18n

Signed-off-by: Miki <miki@amazon.com>
---
 CHANGELOG.md                                         |  1 +
 .../documents_config/style/document_layer_style.tsx  |  3 ++-
 .../documents_config/style/label_config.tsx          |  6 +++++-
 .../layer_control_panel/layer_control_panel.tsx      |  6 +++++-
 public/components/map_top_nav/get_top_nav_config.tsx | 12 ++++--------
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d1e6e28..90912130 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Enhancements
 ### Bug Fixes
 * fix: prevent overlay from overlapping new application header
+* Fix dynamic uses of i18n ([#678](https://github.com/opensearch-project/dashboards-maps/pull/678))
 ### Infrastructure
 ### Documentation
 ### Maintenance
diff --git a/public/components/layer_config/documents_config/style/document_layer_style.tsx b/public/components/layer_config/documents_config/style/document_layer_style.tsx
index e066fff4..46f5f798 100644
--- a/public/components/layer_config/documents_config/style/document_layer_style.tsx
+++ b/public/components/layer_config/documents_config/style/document_layer_style.tsx
@@ -128,7 +128,8 @@ export const DocumentLayerStyle = ({
         fullWidth={true}
         isInvalid={hasInvalid}
         error={i18n.translate('maps.documents.style.invalidWidth', {
-          defaultMessage: `must be between ${min} and ${max}`,
+          defaultMessage: 'must be between {min} and {max}',
+          values: { min, max },
         })}
       >
         <EuiCompressedFieldNumber
diff --git a/public/components/layer_config/documents_config/style/label_config.tsx b/public/components/layer_config/documents_config/style/label_config.tsx
index 6aa0fbbe..97bb8070 100644
--- a/public/components/layer_config/documents_config/style/label_config.tsx
+++ b/public/components/layer_config/documents_config/style/label_config.tsx
@@ -232,7 +232,11 @@ export const LabelConfig = ({
             })}
             isInvalid={invalidLabelSize}
             error={i18n.translate('maps.documents.labelSizeError', {
-              defaultMessage: `Must be between ${DOCUMENTS_MIN_LABEL_SIZE} and ${DOCUMENTS_MAX_LABEL_SIZE}`,
+              defaultMessage: 'Must be between {min} and {max}',
+              values: {
+                min: DOCUMENTS_MIN_LABEL_SIZE,
+                max: DOCUMENTS_MAX_LABEL_SIZE
+              },
             })}
           >
             <EuiCompressedFieldNumber
diff --git a/public/components/layer_control_panel/layer_control_panel.tsx b/public/components/layer_control_panel/layer_control_panel.tsx
index 680e67fc..d04992f3 100644
--- a/public/components/layer_control_panel/layer_control_panel.tsx
+++ b/public/components/layer_control_panel/layer_control_panel.tsx
@@ -228,7 +228,11 @@ export const LayerControlPanel = memo(
 
       if (zoom < layer.zoomRange[0] || zoom > layer.zoomRange[1]) {
         return i18n.translate('maps.layerControl.layerNotVisibleZoom', {
-          defaultMessage: `Layer is hidden outside of zoom range ${layer.zoomRange[0]}–${layer.zoomRange[1]}`,
+          defaultMessage: 'Layer is hidden outside of zoom range {min}–{max}',
+          values: {
+            min: layer.zoomRange[0],
+            max: layer.zoomRange[1],
+          },
         });
       }
       return '';
diff --git a/public/components/map_top_nav/get_top_nav_config.tsx b/public/components/map_top_nav/get_top_nav_config.tsx
index d43442e5..5b0b5fc0 100644
--- a/public/components/map_top_nav/get_top_nav_config.tsx
+++ b/public/components/map_top_nav/get_top_nav_config.tsx
@@ -188,10 +188,8 @@ export const onGetSave = (
         }
         toastNotifications.addSuccess({
           title: i18n.translate('map.topNavMenu.saveMap.successNotificationText', {
-            defaultMessage: `Saved ${newTitle}`,
-            values: {
-              visTitle: newTitle,
-            },
+            defaultMessage: 'Saved {newTitle}',
+            values: { newTitle },
           }),
         });
         if (originatingApp && returnToOrigin) {
@@ -212,10 +210,8 @@ export const onGetSave = (
     } catch (error: any) {
       toastNotifications.addDanger({
         title: i18n.translate('maps.topNavMenu.saveVisualization.failureNotificationText', {
-          defaultMessage: `Error on saving ${newTitle}`,
-          values: {
-            visTitle: newTitle,
-          },
+          defaultMessage: 'Error on saving {newTitle}',
+          values: { newTitle },
         }),
         text: error.message,
         'data-test-subj': 'saveMapError',