From 38162ca0cf2b6f630d1cd7b9e950716dc5820d0c Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Mon, 23 Oct 2023 15:06:05 -0700
Subject: [PATCH] Wrap user-facing strings in header.tsx

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 .../__snapshots__/header.test.tsx.snap        | 30 +++++++++++++++++--
 public/components/common/header.tsx           | 18 +++++++++--
 .../__snapshots__/create_index.test.tsx.snap  | 30 +++++++++++++++++--
 3 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/public/components/common/__test__/__snapshots__/header.test.tsx.snap b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
index c1dfee0..615080d 100644
--- a/public/components/common/__test__/__snapshots__/header.test.tsx.snap
+++ b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
@@ -16,7 +16,15 @@ exports[`Header component Renders header component 1`] = `
         <h1
           className="euiTitle euiTitle--medium"
         >
-          Compare search results
+          <FormattedMessage
+            defaultMessage="Compare search results"
+            id="searchRelevance.header.title"
+            values={Object {}}
+          >
+            <span>
+              Compare search results
+            </span>
+          </FormattedMessage>
         </h1>
       </EuiTitle>
       <EuiText>
@@ -24,7 +32,15 @@ exports[`Header component Renders header component 1`] = `
           className="euiText euiText--medium"
         >
           <p>
-            Compare results using the same search text with different queries.
+            <FormattedMessage
+              defaultMessage="Compare results using the same search text with different queries."
+              id="searchRelevance.header.description"
+              values={Object {}}
+            >
+              <span>
+                Compare results using the same search text with different queries.
+              </span>
+            </FormattedMessage>
              
             <EuiLink
               href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
@@ -36,7 +52,15 @@ exports[`Header component Renders header component 1`] = `
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                Learn more
+                <FormattedMessage
+                  defaultMessage="Learn more"
+                  id="searchRelevance.header.descriptionLink"
+                  values={Object {}}
+                >
+                  <span>
+                    Learn more
+                  </span>
+                </FormattedMessage>
                 <EuiIcon
                   aria-label="External link"
                   className="euiLink__externalIcon"
diff --git a/public/components/common/header.tsx b/public/components/common/header.tsx
index 6fd9503..22a7aa0 100644
--- a/public/components/common/header.tsx
+++ b/public/components/common/header.tsx
@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
 import { EuiText, EuiLink, EuiPanel, EuiTitle } from '@elastic/eui';
 
 interface HeaderProps {
@@ -20,16 +21,27 @@ export const Header = ({ children }: HeaderProps) => {
       borderRadius="none"
     >
       <EuiTitle>
-        <h1>Compare search results</h1>
+        <h1>
+          <FormattedMessage
+            id="searchRelevance.header.title"
+            defaultMessage="Compare search results"
+          />
+        </h1>
       </EuiTitle>
       <EuiText>
         <p>
-          Compare results using the same search text with different queries.{' '}
+          <FormattedMessage
+            id="searchRelevance.header.description"
+            defaultMessage="Compare results using the same search text with different queries."
+          />{' '}
           <EuiLink
             href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
             target="_blank"
           >
-            Learn more
+            <FormattedMessage
+              id="searchRelevance.header.descriptionLink"
+              defaultMessage="Learn more"
+            />
           </EuiLink>
         </p>
       </EuiText>
diff --git a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
index c24021e..6779956 100644
--- a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
+++ b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
@@ -17,7 +17,15 @@ exports[`Create index component Renders create index component 1`] = `
           <h1
             className="euiTitle euiTitle--medium"
           >
-            Compare search results
+            <FormattedMessage
+              defaultMessage="Compare search results"
+              id="searchRelevance.header.title"
+              values={Object {}}
+            >
+              <span>
+                Compare search results
+              </span>
+            </FormattedMessage>
           </h1>
         </EuiTitle>
         <EuiText>
@@ -25,7 +33,15 @@ exports[`Create index component Renders create index component 1`] = `
             className="euiText euiText--medium"
           >
             <p>
-              Compare results using the same search text with different queries.
+              <FormattedMessage
+                defaultMessage="Compare results using the same search text with different queries."
+                id="searchRelevance.header.description"
+                values={Object {}}
+              >
+                <span>
+                  Compare results using the same search text with different queries.
+                </span>
+              </FormattedMessage>
                
               <EuiLink
                 href="https://opensearch.org/docs/latest/search-plugins/search-relevance"
@@ -37,7 +53,15 @@ exports[`Create index component Renders create index component 1`] = `
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  Learn more
+                  <FormattedMessage
+                    defaultMessage="Learn more"
+                    id="searchRelevance.header.descriptionLink"
+                    values={Object {}}
+                  >
+                    <span>
+                      Learn more
+                    </span>
+                  </FormattedMessage>
                   <EuiIcon
                     aria-label="External link"
                     className="euiLink__externalIcon"