use gif

x-pack/plugins/security_solution/public/attack_discovery/tour/video_toast.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { VideoToast } from './video_toast';
 
@@ -24,16 +24,14 @@ describe('VideoToast', () => {
     expect(videoToast).toBeInTheDocument();
   });
 
-  it('should render the video iframe', () => {
-    const videoIframe = screen.getByTitle('Watch overview video');
-    expect(videoIframe).toBeInTheDocument();
+  it('should render the video gif', () => {
+    const videoGif = screen.getByTestId('video-gif');
+    expect(videoGif).toBeInTheDocument();
   });
 
-  // WIP, still working on this test. will unskip before merge
-  it.skip('should open the video in a new tab when the iframe is clicked', () => {
-    const videoIframe = screen.getByTitle('Watch overview video');
-    fireEvent.mouseOver(videoIframe);
-    fireEvent.blur(videoIframe);
+  it('should open the video in a new tab when the gif is clicked', () => {
+    const videoGif = screen.getByTestId('video-gif');
+    userEvent.click(videoGif);
     expect(window.open).toHaveBeenCalledWith(
       'https://videos.elastic.co/watch/BrDaDBAAvdygvemFKNAkBW',
       '_blank'

x-pack/plugins/security_solution/public/attack_discovery/tour/video_toast.tsx

@@ -14,61 +14,33 @@ import {
   EuiText,
   EuiSpacer,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import * as i18n from './translations';
-import theGif from './1.gif';
+import theGif from './overview.gif';
 
-const VIDEO_CONTENT_HEIGHT = 160;
 const VIDEO_CONTENT_WIDTH = 250;
-const VIDEO_ID = 'BrDaDBAAvdygvemFKNAkBW';
-const VIDEO_SOURCE = `//play.vidyard.com/${VIDEO_ID}.html`;
-const VIDEO_PAGE = `https://videos.elastic.co/watch/${VIDEO_ID}`;
+const VIDEO_PAGE = `https://videos.elastic.co/watch/BrDaDBAAvdygvemFKNAkBW`;
 
 const VideoComponent: React.FC<{ onClose: () => void }> = ({ onClose }) => {
-  const ref = React.useRef<HTMLIFrameElement>(null);
-  const [isIframeFocused, setIsIframeFocused] = React.useState(false);
-
   const openVideoInNewTab = useCallback(() => {
     window.open(VIDEO_PAGE, '_blank');
   }, []);
 
-  const onIframeClick = useCallback(() => {
-    if (isIframeFocused) {
-      openVideoInNewTab();
-    }
-  }, [isIframeFocused, openVideoInNewTab]);
-
-  useEffect(() => {
-    window.addEventListener('blur', onIframeClick);
-    return () => window.removeEventListener('blur', onIframeClick);
-  }, [onIframeClick]);
-  const handleOnMouseOver = useCallback(() => {
-    setIsIframeFocused(true);
-  }, []);
-  const handleOnMouseOut = useCallback(() => {
-    setIsIframeFocused(false);
-  }, []);
-
   return (
     <EuiPortal>
       <div
         data-test-subj="attackDiscovery-tour-step-2"
-        style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 9999 }}
+        css={{ position: 'fixed', bottom: 16, right: 16, zIndex: 9999 }}
       >
         <EuiToast onClose={onClose} css={{ maxWidth: VIDEO_CONTENT_WIDTH }}>
-          <div
-            css={css`
-              height: ${VIDEO_CONTENT_HEIGHT}px;
-            `}
-            onMouseOver={handleOnMouseOver}
-            onMouseOut={handleOnMouseOut}
-            onFocus={handleOnMouseOver}
-            onBlur={handleOnMouseOut}
-          >
-            <EuiImage size="m" src={theGif} alt="" />
-          </div>
-          <EuiText size="s" grow={false}>
+          <EuiImage
+            onClick={openVideoInNewTab}
+            css={{ marginTop: 20, '&:hover': { cursor: 'pointer' } }}
+            src={theGif}
+            data-test-subj="video-gif"
+            alt={i18n.WATCH_OVERVIEW_VIDEO}
+          />
+          <EuiText size="s" grow={false} css={{ marginTop: 20 }}>
             <h4>
               <EuiIcon type="cheer" color="success" /> {i18n.ATTACK_DISCOVERY_TOUR_VIDEO_STEP_TITLE}
             </h4>