[Uptime] Expand synthetic journey step thumbnail on hover (#89179)

* Add desired hover functionality and a test.

* Switch render from img to EuiImage for step view.

* Create new module for ping_timestamp. Extract a function. Add a test.

* Extract nav buttons, translations. Add tests.

* Fix a typo.

* Extract caption to own file. Add tests.

* Extract no image display to dedicated file. Add aria label. Add tests.

* Make import path more explicit.

* Move step image popover to dedicated file. Add tests.

* Clean up inline code in timestamp component.

* Explicit var names.

* Simplicity.

* Fix refactoring issues in test files.

* Move translations to central file.

* Rename test for better accuracy.

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { PingTimestamp } from './ping_timestamp';

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/nav_buttons.test.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { render } from '../../../../../lib/helper/rtl_helpers';
+import { NavButtons, NavButtonsProps } from './nav_buttons';
+
+describe('NavButtons', () => {
+  let defaultProps: NavButtonsProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      maxSteps: 3,
+      stepNumber: 2,
+      setStepNumber: jest.fn(),
+      setIsImagePopoverOpen: jest.fn(),
+    };
+  });
+
+  it('labels prev and next buttons', () => {
+    const { getByLabelText } = render(<NavButtons {...defaultProps} />);
+
+    expect(getByLabelText('Previous step'));
+    expect(getByLabelText('Next step'));
+  });
+
+  it('increments step number on next click', async () => {
+    const { getByLabelText } = render(<NavButtons {...defaultProps} />);
+
+    const nextButton = getByLabelText('Next step');
+
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(defaultProps.setStepNumber).toHaveBeenCalledTimes(1);
+      expect(defaultProps.setStepNumber).toHaveBeenCalledWith(3);
+    });
+  });
+
+  it('decrements step number on prev click', async () => {
+    const { getByLabelText } = render(<NavButtons {...defaultProps} />);
+
+    const nextButton = getByLabelText('Previous step');
+
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(defaultProps.setStepNumber).toHaveBeenCalledTimes(1);
+      expect(defaultProps.setStepNumber).toHaveBeenCalledWith(1);
+    });
+  });
+
+  it('disables `next` button on final step', () => {
+    defaultProps.stepNumber = 3;
+
+    const { getByLabelText } = render(<NavButtons {...defaultProps} />);
+
+    // getByLabelText('Next step');
+    expect(getByLabelText('Next step')).toHaveAttribute('disabled');
+    expect(getByLabelText('Previous step')).not.toHaveAttribute('disabled');
+  });
+
+  it('disables `prev` button on final step', () => {
+    defaultProps.stepNumber = 1;
+
+    const { getByLabelText } = render(<NavButtons {...defaultProps} />);
+
+    expect(getByLabelText('Next step')).not.toHaveAttribute('disabled');
+    expect(getByLabelText('Previous step')).toHaveAttribute('disabled');
+  });
+
+  it('opens popover when mouse enters', async () => {
+    const { getByLabelText } = render(<NavButtons {...defaultProps} />);
+
+    const nextButton = getByLabelText('Next step');
+
+    fireEvent.mouseEnter(nextButton);
+
+    await waitFor(() => {
+      expect(defaultProps.setIsImagePopoverOpen).toHaveBeenCalledTimes(1);
+      expect(defaultProps.setIsImagePopoverOpen).toHaveBeenCalledWith(true);
+    });
+  });
+});

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/nav_buttons.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiButtonIcon, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import React from 'react';
+import { nextAriaLabel, prevAriaLabel } from './translations';
+
+export interface NavButtonsProps {
+  maxSteps?: number;
+  setIsImagePopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setStepNumber: React.Dispatch<React.SetStateAction<number>>;
+  stepNumber: number;
+}
+
+export const NavButtons: React.FC<NavButtonsProps> = ({
+  maxSteps,
+  setIsImagePopoverOpen,
+  setStepNumber,
+  stepNumber,
+}) => (
+  <EuiFlexGroup
+    className="stepArrows"
+    gutterSize="s"
+    alignItems="center"
+    onMouseEnter={() => setIsImagePopoverOpen(true)}
+    style={{ position: 'absolute', bottom: 0, left: 30 }}
+  >
+    <EuiFlexItem grow={false}>
+      <EuiButtonIcon
+        disabled={stepNumber === 1}
+        color="subdued"
+        size="s"
+        onClick={() => {
+          setStepNumber(stepNumber - 1);
+        }}
+        iconType="arrowLeft"
+        aria-label={prevAriaLabel}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiButtonIcon
+        disabled={stepNumber === maxSteps}
+        color="subdued"
+        size="s"
+        onClick={() => {
+          setStepNumber(stepNumber + 1);
+        }}
+        iconType="arrowRight"
+        aria-label={nextAriaLabel}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/no_image_available.test.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { render } from '../../../../../lib/helper/rtl_helpers';
+import { NoImageAvailable } from './no_image_available';
+
+describe('NoImageAvailable', () => {
+  it('renders expected text', () => {
+    const { getByText } = render(<NoImageAvailable />);
+
+    expect(getByText('No image available'));
+  });
+});