Wrap user-facing strings in header.tsx

Signed-off-by: Nicholas Ung <[email protected]>
nung22 · Oct 26, 2023 · b69ff41 · b69ff41
1 parent fe99311
commit b69ff41
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 9 deletions.
diff --git a/public/components/common/__test__/__snapshots__/header.test.tsx.snap b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
@@ -16,15 +16,31 @@ 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>
         <div
           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
@@ -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
@@ -17,15 +17,31 @@ 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>
           <div
             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"