No screenshot image empty state (testimio#19)

packages/client/src/components/Screenshots/Screenshots.tsx

@@ -5,8 +5,10 @@ import styles from './styles.module.css';
 import { useBackgroundHighlight, ImageStretchBehavior } from "../../hooks/useBackgroundHighlight";
 import classNames from "classnames";
 import { useExternalResourceUrl } from "../../stores/ExternalResourceUrlContext";
+import noImagePlaceholder from "./[email protected]";
 
-export function Screenshot({ step, apiUrl, className, screenshotClassName, showHighlightRect = false, imageStretchBehavior = 'content-fit' }: { step: StepResult, apiUrl: string, className?: string, imageStretchBehavior?: ImageStretchBehavior, screenshotClassName?: string, showHighlightRect?: boolean }) {
+export function Screenshot(
+ { step, apiUrl, className, screenshotClassName, showHighlightRect = false, imageStretchBehavior = 'content-fit' }: { step: StepResult, apiUrl: string, className?: string, imageStretchBehavior?: ImageStretchBehavior, screenshotClassName?: string, showHighlightRect?: boolean }) {
 
  const image = useRef<HTMLImageElement>(null);
  const container = useRef<HTMLDivElement>(null);
@@ -15,18 +17,26 @@ export function Screenshot({ step, apiUrl, className, screenshotClassName, showH
 
  const [screenshotDimensions, highlightCoordinates, imageOffset] = useBackgroundHighlight(step, image, container, imageStretchBehavior);
 
+ if (!step.screenshot) {
+ return <div className={styles.emptyStateWrapper}>
+ {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
+ <img src={noImagePlaceholder} alt="No image placeholder" />
+ <h3>No image available</h3>
+ </div>;
+ }
+
  //TODO(Benji) when navigating to a page without a highlight - don't show the highlight
- return <div  className={className}>
- <div ref={container} style={{...screenshotDimensions, ...getBackgroundStyle(imageOffset)}} className={classNames(styles.screenshot, screenshotClassName)} >
-  <img
-  ref={image}
-  loading='lazy'
-  alt={step?.screenshot ?? ""}
-  src={screenshotResource}
-  />
-  { highlightCoordinates && <div className={styles.screenshotHighlight} style={highlightCoordinates}></div> }
-  { showHighlightRect && <div className={styles.highlightRect} style={highlightCoordinates ? adjustHighlightToHighlightRect(highlightCoordinates): {}}></div>}
-  </div></div>;
+ return <div className={className}>
+ <div ref={container} style={{ ...screenshotDimensions, ...getBackgroundStyle(imageOffset) }} className={classNames(styles.screenshot, screenshotClassName)} >
+ <img
+ ref={image}
+ loading='lazy'
+ alt={step?.screenshot ?? ""}
+ src={screenshotResource}
+ />
+ {highlightCoordinates && <div className={styles.screenshotHighlight} style={highlightCoordinates}></div>}
+ {showHighlightRect && <div className={styles.highlightRect} style={highlightCoordinates ? adjustHighlightToHighlightRect(highlightCoordinates) : {}}></div>}
+ </div></div>;
 }
 
 function getBackgroundStyle(imageOffset: { left: number; top: number } | undefined) {
@@ -36,7 +46,7 @@ function getBackgroundStyle(imageOffset: { left: number; top: number } | undefin
  return { ...imageOffset, position: 'relative' };
 }
 
-function adjustHighlightToHighlightRect({top, left, width, height }: { top: number, left: number, width: number; height: number}) {
+function adjustHighlightToHighlightRect({ top, left, width, height }: { top: number, left: number, width: number; height: number }) {
  return {
  top: top,
  left: left,