creevey 0.10.0-beta.4 → 0.10.0-beta.41

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "creevey",
   "description": "Cross-browser screenshot testing tool for Storybook with fancy UI Runner",
-  "version": "0.10.0-beta.4",
+  "version": "0.10.0-beta.41",
   "type": "commonjs",
   "bin": "dist/cli.js",
   "main": "./dist/index.js",
@@ -64,7 +64,7 @@
     "build": "yarn prebuild && yarn build:client && yarn build:creevey && yarn postbuild",
     "build:client": "vite build",
     "build:creevey": "tsc --build tsconfig.prod.json",
-    "postbuild": "cp \"\"scripts/dist/*.d.ts\"\" dist/",
+    "postbuild": "cp \"\"scripts/dist/*.d.ts\"\" dist/ && cp \"\"src/server/playwright/index-source.mjs\"\" dist/server/playwright/index-source.mjs",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token=chpt_80df83ca94e6fb4",
@@ -74,11 +74,11 @@
     "node": ">=18.0"
   },
   "peerDependencies": {
-    "playwright": "*",
+    "playwright-core": "*",
     "selenium-webdriver": "*"
   },
   "peerDependenciesMeta": {
-    "playwright": {
+    "playwright-core": {
       "optional": true
     },
     "selenium-webdriver": {
@@ -87,33 +87,33 @@
   },
   "dependencies": {
     "@koa/cors": "^5.0.0",
-    "@octokit/core": "^6.1.2",
-    "@storybook/icons": "^1.2.12",
+    "@octokit/core": "^6.1.4",
+    "@storybook/icons": "^1.4.0",
     "@types/chai": "^4.3.20",
-    "@types/dockerode": "^3.3.31",
+    "@types/dockerode": "^3.3.37",
     "@types/koa": "^2.15.0",
     "@types/koa-bodyparser": "^4.3.12",
     "@types/koa-mount": "^4.0.5",
     "@types/koa-static": "^4.0.4",
     "@types/koa__cors": "^5.0.0",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.16",
     "@types/micromatch": "^4.0.9",
     "@types/minimist": "^1.2.5",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "@types/qs": "^6.9.16",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/selenium-webdriver": "^4.1.27",
+    "@types/qs": "^6.9.18",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "@types/selenium-webdriver": "^4.1.28",
     "@types/shelljs": "^0.8.15",
-    "@types/ws": "^8.5.13",
+    "@types/ws": "^8.18.1",
     "chai": "^4.5.0",
     "chalk": "^4.1.2",
-    "chokidar": "^4.0.1",
-    "dockerode": "^4.0.2",
+    "chokidar": "^4.0.3",
+    "dockerode": "^4.0.5",
     "find-cache-dir": "^5.0.0",
     "get-port": "^7.1.0",
-    "koa": "^2.15.3",
+    "koa": "^2.16.0",
     "koa-bodyparser": "^4.4.1",
     "koa-mount": "^4.0.0",
     "koa-static": "^5.0.0",
@@ -122,72 +122,73 @@
     "loglevel-plugin-prefix": "^0.8.4",
     "micromatch": "^4.0.8",
     "minimist": "^1.2.8",
-    "odiff-bin": "^3.1.2",
+    "odiff-bin": "^3.2.1",
+    "package-manager-detector": "^0.2.11",
+    "pidtree": "^0.6.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "polished": "^4.3.1",
-    "qs": "^6.13.0",
-    "semver": "^7.6.3",
-    "shelljs": "^0.8.5",
+    "qs": "^6.14.0",
+    "semver": "^7.7.1",
+    "shelljs": "^0.9.2",
     "tar-stream": "^3.1.7",
-    "tsx": "^4.19.2",
-    "uuid": "^11.0.2",
-    "ws": "^8.18.0",
-    "yocto-spinner": "^0.1.1"
+    "tsx": "^4.19.3",
+    "uuid": "^11.1.0",
+    "ws": "^8.18.1",
+    "yocto-spinner": "^0.2.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.14.0",
-    "@storybook/addon-essentials": "^8.4.1",
-    "@storybook/addon-interactions": "^8.4.1",
-    "@storybook/blocks": "^8.4.1",
-    "@storybook/channels": "^8.4.1",
-    "@storybook/components": "^8.4.1",
-    "@storybook/csf": "^0.1.11",
-    "@storybook/manager-api": "^8.4.1",
-    "@storybook/preview-api": "^8.4.1",
-    "@storybook/react": "^8.4.1",
-    "@storybook/react-vite": "^8.4.1",
-    "@storybook/test": "^8.4.1",
-    "@storybook/theming": "^8.4.1",
-    "@storybook/types": "^8.4.1",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/js": "^9.23.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/channels": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@storybook/types": "^8.6.12",
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^18.19.64",
+    "@types/node": "^18.19.86",
     "@types/resize-observer-browser": "^0.1.11",
-    "@types/semver": "^7",
+    "@types/semver": "^7.7.0",
     "@types/tar-stream": "^3.1.3",
     "@types/tmp": "^0.2.6",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "browserstack-local": "^1.5.5",
-    "chromatic": "^11.16.3",
-    "concurrently": "^9.0.1",
+    "@vitejs/plugin-react-swc": "^3.8.1",
+    "browserstack-local": "^1.5.6",
+    "chromatic": "^11.28.0",
+    "concurrently": "^9.1.2",
     "conventional-changelog-cli": "^5.0.0",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.14.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "git-cz": "^4.9.0",
-    "globals": "^15.11.0",
-    "husky": "^9.1.6",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
     "immer": "^10.1.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.5.0",
     "pinst": "^3.0.0",
-    "playwright-core": "^1.48.0",
-    "prettier": "^3.3.3",
+    "playwright-core": "^1.51.1",
+    "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "selenium-webdriver": "^4.26.0",
-    "storybook": "^8.4.1",
+    "selenium-webdriver": "^4.30.0",
+    "storybook": "^8.6.12",
     "tmp": "^0.2.3",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
-    "use-immer": "^0.10.0",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.4"
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.29.0",
+    "use-immer": "^0.11.0",
+    "vite": "^5.4.17",
+    "vitest": "^2.1.9"
   },
   "config": {
     "commitizen": {

package/src/client/addon/components/Panel.tsx

@@ -1,11 +1,11 @@
 import React, { JSX } from 'react';
 import { Loader } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { TestData } from '../../../types.js';
+import { noop, TestData } from '../../../types.js';
 import { ResultsPage } from '../../shared/components/ResultsPage.js';
 import { getTestPath } from '../../shared/helpers.js';
 import TestSelect from './TestSelect.js';
-import { noop } from 'lodash';
+
 interface PanelProps {
   tests: TestData[];
   selectedTestId: string;

package/src/client/addon/withCreevey.ts

@@ -1,4 +1,4 @@
-import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
+import type { Renderer, StoryContextForEnhancers } from '@storybook/types';
 import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
 import {
@@ -12,9 +12,11 @@ import {
 } from '../../types.js';
 import { serializeRawStories } from '../../shared/index.js';
 import { getConnectionUrl } from '../shared/helpers.js';
+import isEqual from 'lodash/isEqual.js';
 
 declare global {
   interface Window {
+    __CREEVEY_ENV__: boolean;
     __CREEVEY_SERVER_HOST__: string;
     __CREEVEY_SERVER_PORT__: number;
     __CREEVEY_WORKER_ID__: number;
@@ -139,6 +141,7 @@ let captureResolver: () => void;
 let waitForCreevey: Promise<void>;
 let creeveyReady: () => void;
 let setStoriesCounter = 0;
+let globals = {};
 
 export function withCreevey(): ReturnType<typeof makeDecorator> {
   const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
@@ -225,7 +228,10 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     }
   }
 
-  function updateGlobals(globals: StorybookGlobals): void {
+  function updateGlobals(newGlobals: StorybookGlobals): void {
+    if (isEqual(globals, newGlobals)) return;
+
+    globals = newGlobals;
     addonsChannel().emit(StorybookEvents.UPDATE_GLOBALS, { globals });
   }
 
@@ -274,6 +280,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     });
   }
 
+  window.__CREEVEY_ENV__ = false;
   window.__CREEVEY_GET_STORIES__ = getStories;
   window.__CREEVEY_SELECT_STORY__ = selectStory;
   window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;
@@ -315,6 +322,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
   });
 }
 
+// TODO It's not accessible from the outside the package
 export async function capture(options?: CaptureOptions): Promise<void> {
   if (!isTestBrowser) return;
 

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -46,6 +46,24 @@ export const SwapView = withTheme(({ theme, expect, actual, diff }: ViewPropsWit
     setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
   }, []);
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'Space' && e.altKey) {
+        e.preventDefault();
+        handleChangeView();
+      }
+    },
+    [handleChangeView],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     if (loaded) readyForCapture();
   }, [loaded]);

package/src/client/shared/components/PageHeader/ImagePreview.tsx

@@ -70,6 +70,7 @@ export const ImagePreview = withTheme(
       onClick(imageName);
     };
 
+    // TODO Add image name as a title
     return (
       <Button
         onClick={handleClick}

package/src/client/shared/components/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { JSX, useEffect } from 'react';
+import React, { JSX, useContext, useEffect } from 'react';
 import { Tabs } from '@storybook/components';
 import { CloseAltIcon } from '@storybook/icons';
 import { styled, withTheme, Theme } from '@storybook/theming';
@@ -6,6 +6,7 @@ import { ImagesViewMode, Images } from '../../../../types.js';
 import { getImageUrl } from '../../helpers.js';
 import { ImagePreview } from './ImagePreview.js';
 import { viewModes } from '../../viewMode.js';
+import { CreeveyContext } from '../../../web/CreeveyContext.js';
 
 interface PageHeaderProps {
   title: string[];
@@ -76,6 +77,7 @@ export function PageHeader({
   onImageChange,
   onViewModeChange,
 }: PageHeaderProps): JSX.Element | null {
+  const { isReport } = useContext(CreeveyContext);
   const imageEntires = Object.entries(images) as [string, Images][];
 
   const handleViewModeChange = (mode: string): void => {
@@ -110,7 +112,7 @@ export function PageHeader({
             <ImagePreview
               key={name}
               imageName={name}
-              url={`${getImageUrl(title, name)}/${image.actual}`}
+              url={`${getImageUrl(title, name, isReport)}/${image.actual}`}
               isActive={name === imageName}
               onClick={onImageChange}
               error={imagesWithError.includes(name)}

package/src/client/shared/components/ResultsPage.tsx

@@ -1,12 +1,13 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useCallback, useContext, useEffect, useState } from 'react';
 import { Placeholder, ScrollArea } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';
 import { PageHeader } from './PageHeader/PageHeader.js';
 import { PageFooter } from './PageFooter/PageFooter.js';
 import { getImageUrl } from '../helpers.js';
-import { getViewMode, VIEW_MODE_KEY } from '../viewMode.js';
+import { getViewMode, VIEW_MODE_KEY, viewModes } from '../viewMode.js';
 import { ImagesViewMode, TestResult } from '../../../types.js';
+import { CreeveyContext } from '../../web/CreeveyContext.js';
 
 interface ResultsPageProps {
   path: string[];
@@ -65,8 +66,9 @@ export function ResultsPageInternal({
   onRetryChange,
 }: ResultsPageProps): JSX.Element {
   const result = results[retry - 1] ?? {};
+  const { isReport } = useContext(CreeveyContext);
   const [viewMode, setViewMode] = useState<ImagesViewMode>(getViewMode());
-  const url = getImageUrl(path, imageName);
+  const url = getImageUrl(path, imageName, isReport);
   const image = result.images?.[imageName];
   const canApprove = Boolean(image && approved?.[imageName] != retry - 1 && result.status != 'success');
   const hasDiffAndExpect = canApprove && Boolean(image?.diff && image.expect);
@@ -77,10 +79,31 @@ export function ResultsPageInternal({
       )
     : [];
 
-  const handleChangeViewMode = (mode: ImagesViewMode): void => {
-    localStorage.setItem(VIEW_MODE_KEY, mode);
-    setViewMode(mode);
-  };
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!canApprove) return;
+      if (e.code === 'Tab') {
+        e.preventDefault();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (e.shiftKey) setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) - 1) % viewModes.length)!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        else setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) + 1) % viewModes.length)!);
+      }
+    },
+    [canApprove],
+  );
+
+  useEffect(() => {
+    localStorage.setItem(VIEW_MODE_KEY, viewMode);
+  }, [viewMode]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
 
   return (
     <Container height={height}>
@@ -92,7 +115,7 @@ export function ResultsPageInternal({
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
-          onViewModeChange={handleChangeViewMode}
+          onViewModeChange={setViewMode}
           onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />

package/src/client/shared/creeveyClientApi.ts

@@ -12,6 +12,7 @@ export interface CreeveyClientApi {
 
 export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   let clientApiResolver: (api: CreeveyClientApi) => void = noop;
+  let clientApiRejecter: (error: Error | Event) => void = noop;
   const updateListeners = new Set<(update: CreeveyUpdate) => void>();
   let statusRequest: Promise<CreeveyStatus> | null = null;
   let statusResolver: (status: CreeveyStatus) => void = noop;
@@ -22,6 +23,10 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
     ws.send(JSON.stringify(request));
   }
 
+  ws.addEventListener('error', (event) => {
+    clientApiRejecter(event);
+  });
+
   ws.addEventListener('open', () => {
     clientApiResolver({
       start(ids: string[]) {
@@ -64,5 +69,8 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   });
   // TODO Reconnect
 
-  return new Promise((resolve) => (clientApiResolver = resolve));
+  return new Promise((resolve, reject) => {
+    clientApiResolver = resolve;
+    clientApiRejecter = reject;
+  });
 }

package/src/client/shared/helpers.ts

@@ -1,4 +1,3 @@
-import { themes, ThemeVars } from '@storybook/theming';
 import { parse, stringify } from 'qs';
 import { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { TestData, isTest, isDefined, TestStatus, CreeveySuite, CreeveyTest, CreeveyStatus } from '../../types.js';
@@ -300,12 +299,14 @@ export function getConnectionUrl(): string {
     .join(':');
 }
 
-export function getImageUrl(path: string[], imageName: string): string {
+export function getImageUrl(path: string[], imageName: string, isReport?: boolean): string {
   // path => [title, story, test, browser]
   const browser = path.slice(-1)[0];
   const imagesUrl = window.location.host
     ? `${window.location.protocol}//${getConnectionUrl()}${
-        window.location.pathname == '/' ? '/report' : window.location.pathname.split('/').slice(0, -1).join('/')
+        window.location.pathname == '/' && !isReport
+          ? '/report'
+          : window.location.pathname.split('/').slice(0, -1).join('/')
       }/${encodeURI(path.slice(0, -1).join('/'))}`
     : encodeURI(path.slice(0, -1).join('/'));
 
@@ -393,27 +394,6 @@ export function useCalcScale(diffImageRef: RefObject<HTMLImageElement>, loaded:
   return scale;
 }
 
-const CREEVEY_THEME = 'Creevey_theme';
-
-function isTheme(theme?: string | null): theme is ThemeVars['base'] {
-  return isDefined(theme) && Object.prototype.hasOwnProperty.call(themes, theme);
-}
-
-function initialTheme(): ThemeVars['base'] {
-  const theme = localStorage.getItem(CREEVEY_THEME);
-  return isTheme(theme) ? theme : 'light';
-}
-
-export function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void] {
-  const [theme, setTheme] = useState<ThemeVars['base']>(initialTheme());
-
-  useEffect(() => {
-    localStorage.setItem(CREEVEY_THEME, theme);
-  }, [theme]);
-
-  return [theme, setTheme];
-}
-
 export function setSearchParams(testPath: string[]): void {
   const pageUrl = `?${stringify({ testPath })}`;
   window.history.pushState({ testPath }, '', pageUrl);

package/src/client/web/CreeveyApp.tsx

@@ -11,17 +11,17 @@ import {
   getTestByPath,
   removeTests,
   getTestPath,
-  useTheme,
   setSearchParams,
   getTestPathFromSearch,
   CreeveyViewFilter,
   getFailedTests,
 } from '../shared/helpers.js';
-import { CreeveyContext } from './CreeveyContext.js';
+import { CreeveyContext, FocusableItem } from './CreeveyContext.js';
 import { KeyboardEvents } from './KeyboardEventsContext.js';
 import { SideBar } from './CreeveyView/SideBar/index.js';
 import { ResultsPage } from '../shared/components/ResultsPage.js';
 import { Toggle } from './CreeveyView/SideBar/Toggle.js';
+import { useTheme } from './themes.js';
 
 export interface CreeveyAppProps {
   api?: CreeveyClientApi;
@@ -59,8 +59,9 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   const failedTests = useMemo(() => getFailedTests(tests), [tests]);
 
   const [retry, setRetry] = useState(openedTest?.results?.length ?? 0);
-  const result = openedTest?.results?.[retry - 1] ?? { images: {} };
-  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
+  const result = useMemo(() => openedTest?.results?.[retry - 1], [openedTest, retry]);
+  const [imageName, setImageName] = useState(Object.keys(result?.images ?? {})[0] ?? '');
+  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
   const canApprove = useMemo(
     () =>
       Boolean(
@@ -94,6 +95,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
     (test: CreeveyTest): void => {
       const testPath = getTestPath(test);
       setSearchParams(testPath);
+      setSidebarFocusedItem(testPath);
       updateTests((draft) => {
         openSuite(draft, testPath, true);
         openTest(testPath);
@@ -103,11 +105,24 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   );
 
   const handleGoToNextFailedTest = useCallback(() => {
-    if (failedTests.length <= 1) return;
+    if (failedTests.length == 0) return;
     const currentTest = failedTests.findIndex((t) => t.id === openedTest?.id);
-    const nextFailedTest = failedTests[currentTest + 1] || failedTests[0];
-    handleOpenTest(nextFailedTest);
-  }, [failedTests, handleOpenTest, openedTest?.id]);
+    const failedImages = Object.entries(result?.images ?? {})
+      .filter(([name, image]) =>
+        // TODO Move to helpers, it duplicates in a few places
+        Boolean(image?.error != null && openedTest?.approved?.[name] != retry - 1 && result?.status != 'success'),
+      )
+      .map(([name]) => name);
+    if (
+      failedImages.length > 1 &&
+      (failedTests.length == 1 || failedImages.indexOf(imageName) < failedImages.length - 1)
+    ) {
+      setImageName((name) => failedImages[failedImages.indexOf(name) + 1] ?? failedImages[0]);
+    } else {
+      const nextFailedTest = failedTests[currentTest + 1] ?? failedTests[0];
+      handleOpenTest(nextFailedTest);
+    }
+  }, [failedTests, handleOpenTest, openedTest, retry, result, imageName]);
 
   const handleImageApproveNew = useCallback((): void => {
     const id = openedTest?.id;
@@ -122,6 +137,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   }, [handleImageApproveNew, handleGoToNextFailedTest]);
 
   const handleApproveAll = useCallback(() => {
+    // TODO Update handled incorrectly
     api?.approveAll();
   }, [api]);
 
@@ -189,12 +205,15 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
       value={{
         isReport: initialState.isReport,
         isRunning,
+        onImageNext: canApprove ? handleGoToNextFailedTest : undefined,
         onImageApprove: canApprove ? handleImageApproveAndGoNext : undefined,
         onApproveAll: handleApproveAll,
         onStart: handleStart,
         onStop: handleStop,
         onSuiteOpen: handleSuiteOpen,
         onSuiteToggle: handleSuiteToggle,
+        sidebarFocusedItem,
+        setSidebarFocusedItem,
       }}
     >
       <ThemeProvider theme={ensure(themes[theme])}>

package/src/client/web/CreeveyContext.tsx

@@ -1,26 +1,35 @@
 import React, { useContext } from 'react';
 import { CreeveySuite, noop } from '../../types.js';
 
+export type SuitePath = string[];
+export type FocusableItem = null | SuitePath;
+
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
   onStop: () => void;
+  onImageNext?: () => void;
   onImageApprove?: () => void;
   onApproveAll: () => void;
   onStart: (rootSuite: CreeveySuite) => void;
   onSuiteOpen: (path: string[], opened: boolean) => void;
   onSuiteToggle: (path: string[], checked: boolean) => void;
+  sidebarFocusedItem: FocusableItem;
+  setSidebarFocusedItem: (item: FocusableItem) => void;
 }
 
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  onImageNext: noop,
   onImageApprove: noop,
   onApproveAll: noop,
   onStop: noop,
   onStart: noop,
   onSuiteOpen: noop,
   onSuiteToggle: noop,
+  sidebarFocusedItem: [],
+  setSidebarFocusedItem: noop,
 });
 
 export const useCreeveyContext = () => useContext(CreeveyContext);

package/src/client/web/CreeveyLoader.tsx

@@ -1,6 +1,6 @@
 import React, { JSX } from 'react';
 import { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from '@storybook/theming';
-import { useTheme } from '../shared/helpers.js';
+import { useTheme } from './themes.js';
 
 const Container = withTheme(
   styled.div(({ theme }) => ({

package/src/client/web/CreeveyView/SideBar/Search.tsx

@@ -1,7 +1,7 @@
-import React, { JSX, ChangeEvent, useContext, useRef, useState } from 'react';
+import React, { JSX, ChangeEvent, useRef, useState } from 'react';
 import { SearchIcon, CloseAltIcon } from '@storybook/icons';
 import { styled, Theme, withTheme } from '@storybook/theming';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 interface SearchProps {
   onChange: (arg: string) => void;
@@ -100,7 +100,7 @@ const FilterForm = withTheme(
 );
 
 export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
-  const { setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { setSidebarFocusedItem } = useCreeveyContext();
   const [focussed, onSetFocussed] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
 

package/src/client/web/CreeveyView/SideBar/SideBar.tsx

@@ -62,6 +62,7 @@ const SelectAllContainer = styled.div({
 });
 
 const TestsContainer = styled.div({
+  marginBottom: '8px',
   position: 'relative',
   height: '100%',
 });