From 6ffecb126edbe83b6adbc6ffacbd2768c3d48c03 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Mon, 28 Sep 2020 14:48:48 -0400
Subject: [PATCH] Translate screenshot component.

---
 .../monitor/synthetics/executed_journey.tsx   |  9 +--
 .../monitor/synthetics/executed_step.tsx      |  5 +-
 .../synthetics/step_screenshot_display.tsx    | 65 ++++++++++++++++---
 3 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx
index e889989952e19..b43d5b2308de3 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx
@@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiSpacer, EuiText } from '@elastic/eui';
 import React, { FC } from 'react';
 import { Ping } from '../../../../common/runtime_types';
 import { JourneyState } from '../../../state/reducers/journey';
-import { StepComponent } from './executed_step';
+import { ExecutedStep } from './executed_step';
 
 interface StepStatusCount {
   succeeded: number;
@@ -50,12 +50,7 @@ export const ExecutedJourney: FC<ExecutedJourneyProps> = ({ journey, fetchScreen
         {journey.steps
           .filter((step) => step.synthetics?.type === 'step/end')
           .map((step, index) => (
-            <StepComponent
-              key={index}
-              index={index}
-              step={step}
-              fetchScreenshot={fetchScreenshot}
-            />
+            <ExecutedStep key={index} index={index} step={step} fetchScreenshot={fetchScreenshot} />
           ))}
       </EuiFlexGroup>
     </div>
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx
index de5f752ce6e51..2ee82d271e2e7 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx
@@ -13,13 +13,13 @@ import { Ping } from '../../../../common/runtime_types';
 
 const CODE_BLOCK_OVERFLOW_HEIGHT = 360;
 
-interface StepComponentProps {
+interface ExecutedStepProps {
   step: Ping;
   index: number;
   fetchScreenshot: (stepIndex: number) => void;
 }
 
-export const StepComponent: FC<StepComponentProps> = ({ step, index, fetchScreenshot }) => {
+export const ExecutedStep: FC<ExecutedStepProps> = ({ step, index, fetchScreenshot }) => {
   return (
     <>
       <div style={{ padding: '8px' }}>
@@ -42,6 +42,7 @@ export const StepComponent: FC<StepComponentProps> = ({ step, index, fetchScreen
                 isLoading={step.synthetics.screenshotLoading}
                 screenshot={step.synthetics.blob}
                 stepIndex={step.synthetics.step.index}
+                stepName={step.synthetics?.step?.name}
                 fetchScreenshot={fetchScreenshot}
               />
             </EuiFlexItem>
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx
index 81fd705559bd3..a44e36df75e6a 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx
@@ -13,24 +13,30 @@ import {
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useContext, useEffect, useRef, useState, FC } from 'react';
 import { useIntersection } from 'react-use';
 import { UptimeThemeContext } from '../../../contexts';
 
-interface ScreenshotDisplayProps {
+interface StepScreenshotDisplayProps {
   isLoading: boolean;
   screenshot: string;
   stepIndex: number;
   fetchScreenshot: (stepIndex: number) => void;
+  stepName?: string;
 }
 
 const THUMBNAIL_WIDTH = 320;
 const THUMBNAIL_HEIGHT = 180;
+const POPOVER_IMG_WIDTH = 640;
+const POPOVER_IMG_HEIGHT = 360;
 
-export const StepScreenshotDisplay: FC<ScreenshotDisplayProps> = ({
+export const StepScreenshotDisplay: FC<StepScreenshotDisplayProps> = ({
   isLoading,
   screenshot,
   stepIndex,
+  stepName,
   fetchScreenshot,
 }) => {
   const containerRef = useRef(null);
@@ -63,7 +69,24 @@ export const StepScreenshotDisplay: FC<ScreenshotDisplayProps> = ({
             <input
               type="image"
               src={screenshotSrc}
-              alt="full-size screenshot"
+              alt={
+                stepName
+                  ? i18n.translate(
+                      'xpack.uptime.synthetics.screenshotDisplay.fullScreenshotAltText',
+                      {
+                        defaultMessage: 'Full screenshot for step with name {stepName}',
+                        values: {
+                          stepName,
+                        },
+                      }
+                    )
+                  : i18n.translate(
+                      'xpack.uptime.synthetics.screenshotDisplay.fullScreenshotAltTextWithoutName',
+                      {
+                        defaultMessage: 'Full screenshot',
+                      }
+                    )
+              }
               style={{ objectFit: 'contain' }}
               onClick={() => setIsOverlayOpen(false)}
             />
@@ -81,7 +104,18 @@ export const StepScreenshotDisplay: FC<ScreenshotDisplayProps> = ({
                 objectPosition: 'center top',
               }}
               src={screenshotSrc}
-              alt="stuff"
+              alt={
+                stepName
+                  ? i18n.translate('xpack.uptime.synthetics.screenshotDisplay.altText', {
+                      defaultMessage: 'Screenshot for step with name {stepName}',
+                      values: {
+                        stepName,
+                      },
+                    })
+                  : i18n.translate('xpack.uptime.synthetics.screenshotDisplay.altTextWithoutName', {
+                      defaultMessage: 'Screenshot',
+                    })
+              }
               onClick={() => setIsOverlayOpen(true)}
               onMouseEnter={() => setIsImagePopoverOpen(true)}
               onMouseLeave={() => setIsImagePopoverOpen(false)}
@@ -91,10 +125,20 @@ export const StepScreenshotDisplay: FC<ScreenshotDisplayProps> = ({
           isOpen={isImagePopoverOpen}
         >
           <img
-            alt="stuff"
+            alt={
+              stepName
+                ? i18n.translate('xpack.uptime.synthetics.screenshotDisplay.thumbnailAltText', {
+                    defaultMessage: 'Thumbnail screenshot for step with name {stepName}',
+                    values: {
+                      stepName,
+                    },
+                  })
+                : i18n.translate('xpack.uptime.synthetics.screenshotDisplay.altTextWithoutName', {
+                    defaultMessage: 'Thumbnail screenshot',
+                  })
+            }
             src={screenshotSrc}
-            // TODO: extract these vals to a constant and @media
-            style={{ width: 640, height: 360, objectFit: 'contain' }}
+            style={{ width: POPOVER_IMG_WIDTH, height: POPOVER_IMG_HEIGHT, objectFit: 'contain' }}
           />
         </EuiPopover>
       </>
@@ -107,7 +151,12 @@ export const StepScreenshotDisplay: FC<ScreenshotDisplayProps> = ({
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiText>
-            <strong>No image available</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.uptime.synthetics.screenshot.noImageMessage"
+                defaultMessage="No image available"
+              />
+            </strong>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>