[Uptime] Thumbnail full screen view steps navigation fix (#91895) (#9…

…2148) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
elastic · Feb 22, 2021 · 579de12 · 579de12
1 parent 76924e2
commit 579de12
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
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
@@ -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/...me/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx b/...me/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/.../uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx b/.../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>