Move translations to central file.

elastic · Feb 1, 2021 · ad1ebbd · ad1ebbd
1 parent 44c5bb3
commit ad1ebbd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/...gins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx b/...gins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { i18n } from '@kbn/i18n';
 import React, { useContext, useEffect, useState } from 'react';
 import useIntersection from 'react-use/lib/useIntersection';
 import styled from 'styled-components';
@@ -16,6 +15,7 @@ import { NavButtons } from './nav_buttons';
 import { NoImageDisplay } from './no_image_display';
 import { StepImageCaption } from './step_image_caption';
 import { StepImagePopover } from './step_image_popover';
+import { formatCaptionContent } from './translations';
 
 const StepDiv = styled.div`
   figure.euiImage {
@@ -76,13 +76,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
 
   const imgSrc = stepImages[stepNumber] || data?.src;
 
-  const captionContent = i18n.translate('xpack.uptime.synthetics.pingTimestamp.captionContent', {
-    defaultMessage: 'Step: {stepNumber} {stepName}',
-    values: {
-      stepNumber,
-      stepName: data?.stepName,
-    },
-  });
+  const captionContent = formatCaptionContent(stepNumber, data?.maxSteps);
 
   const ImageCaption = (
     <StepImageCaption

diff --git a/.../uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_popover.tsx b/.../uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_popover.tsx
@@ -5,9 +5,9 @@
  */
 
 import { EuiImage, EuiPopover } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
+import { fullSizeImageAlt } from './translations';
 
 const POPOVER_IMG_HEIGHT = 360;
 const POPOVER_IMG_WIDTH = 640;
@@ -53,9 +53,7 @@ export const StepImagePopover: React.FC<StepImagePopoverProps> = ({
     isOpen={isImagePopoverOpen}
   >
     <EuiImage
-      alt={i18n.translate('xpack.uptime.synthetics.thumbnail.fullSize.alt', {
-        defaultMessage: `A larger version of the screenshot for this journey step's thumbnail.`,
-      })}
+      alt={fullSizeImageAlt}
       url={imgSrc}
       style={{ height: POPOVER_IMG_HEIGHT, width: POPOVER_IMG_WIDTH, objectFit: 'contain' }}
     />

diff --git a/...plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/translations.ts b/...plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/translations.ts
@@ -20,3 +20,16 @@ export const imageLoadingSpinnerAriaLabel = i18n.translate(
     defaultMessage: 'An animated spinner indicating the image is loading',
   }
 );
+
+export const fullSizeImageAlt = i18n.translate('xpack.uptime.synthetics.thumbnail.fullSize.alt', {
+  defaultMessage: `A larger version of the screenshot for this journey step's thumbnail.`,
+});
+
+export const formatCaptionContent = (stepNumber: number, stepName?: number) =>
+  i18n.translate('xpack.uptime.synthetics.pingTimestamp.captionContent', {
+    defaultMessage: 'Step: {stepNumber} {stepName}',
+    values: {
+      stepNumber,
+      stepName,
+    },
+  });