From 7481af6949aad28e842c9df094f986cc17eb4303 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Mon, 22 Feb 2021 12:27:40 +0100
Subject: [PATCH] [Uptime] Thumbnail full screen view steps navigation fix
 (#91895)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../ping_list/columns/ping_timestamp/ping_timestamp.tsx       | 3 ++-
 .../columns/ping_timestamp/step_image_caption.test.tsx        | 1 +
 .../ping_list/columns/ping_timestamp/step_image_caption.tsx   | 4 ++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
index 71c22b44068674..cfb92dd31190e8 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
@@ -73,7 +73,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
     }
   }, [data]);
 
-  const imgSrc = stepImages[stepNumber] || data?.src;
+  const imgSrc = stepImages?.[stepNumber - 1] ?? data?.src;
 
   const captionContent = formatCaptionContent(stepNumber, data?.maxSteps);
 
@@ -85,6 +85,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
       setStepNumber={setStepNumber}
       stepNumber={stepNumber}
       timestamp={timestamp}
+      isLoading={status === FETCH_STATUS.LOADING || status === FETCH_STATUS.PENDING}
     />
   );
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx
index 80ed3ca46b8aa8..a33e5870932799 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx
@@ -21,6 +21,7 @@ describe('StepImageCaption', () => {
       setStepNumber: jest.fn(),
       stepNumber: 2,
       timestamp: '2020-11-26T15:28:56.896Z',
+      isLoading: false,
     };
   });
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
index 018ef85062ecc6..fe9709a02b684e 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
@@ -19,6 +19,7 @@ export interface StepImageCaptionProps {
   setStepNumber: React.Dispatch<React.SetStateAction<number>>;
   stepNumber: number;
   timestamp: string;
+  isLoading: boolean;
 }
 
 const ImageCaption = euiStyled.div`
@@ -35,6 +36,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
   setStepNumber,
   stepNumber,
   timestamp,
+  isLoading,
 }) => {
   return (
     <ImageCaption>
@@ -49,6 +51,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
                 }}
                 iconType="arrowLeft"
                 aria-label={prevAriaLabel}
+                isLoading={isLoading}
               >
                 {prevAriaLabel}
               </EuiButtonEmpty>
@@ -65,6 +68,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
                 iconType="arrowRight"
                 iconSide="right"
                 aria-label={nextAriaLabel}
+                isLoading={isLoading}
               >
                 {nextAriaLabel}
               </EuiButtonEmpty>