creevey 0.10.0-beta.9 → 0.10.0-rc.0

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

@@ -1,6 +1,6 @@
 import React, { JSX, useCallback, useEffect, useRef, useState } from 'react';
-import { Loader } from '@storybook/components';
-import { styled, withTheme } from '@storybook/theming';
+import { Loader } from 'storybook/internal/components';
+import { styled, withTheme } from 'storybook/theming';
 import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
 import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
 import { readyForCapture } from '../../../addon/readyForCapture.js';

package/src/client/shared/components/ImagesView/common.ts

@@ -1,4 +1,4 @@
-import { Color, Theme } from '@storybook/theming';
+import { Color, Theme } from 'storybook/theming';
 
 export const themeBorderColors = {
   actual: 'negative',

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

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { Paging } from './Paging.js';
 
 export interface PageFooterProps {

package/src/client/shared/components/PageFooter/Paging.tsx

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { TabButton } from '@storybook/components';
+import { TabButton } from 'storybook/internal/components';
 
 export interface PagingProps {
   activePage: string;

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

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme, Theme } from 'storybook/theming';
 
 const IMG_SIZE = 64;
 const DIAG_LENGTH = (2 * (IMG_SIZE - 8) ** 2) ** (1 / 2);

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

@@ -1,11 +1,12 @@
-import React, { JSX, useEffect } from 'react';
-import { Tabs } from '@storybook/components';
+import React, { JSX, useContext, useEffect } from 'react';
+import { Tabs } from 'storybook/internal/components';
 import { CloseAltIcon } from '@storybook/icons';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme, Theme } from 'storybook/theming';
 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[];
@@ -20,14 +21,14 @@ interface PageHeaderProps {
 }
 
 const Container = styled.div({
-  margin: '24px 44px 0',
+  marginTop: '24px',
 });
 
 const ErrorContainer = withTheme(
   styled.div<{ theme: Theme }>(({ theme }) => ({
     marginTop: '8px',
     padding: '8px',
-    background: theme.background.negative,
+    background: `${theme.background.negative}20`,
     color: theme.color.negative,
     borderRadius: '2px',
     display: 'flex',
@@ -47,8 +48,19 @@ const ErrorContainer = withTheme(
   })),
 );
 
+const UpdateModeBanner = withTheme(
+  styled.div(({ theme }) => ({
+    padding: '8px 32px',
+    backgroundColor: `${theme.color.positive}20`,
+    color: theme.color.positive,
+    fontSize: '12px',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  })),
+);
+
 const H1 = styled.h1({
-  margin: 0,
+  marginLeft: '44px',
   marginBottom: '8px',
 });
 
@@ -76,6 +88,7 @@ export function PageHeader({
   onImageChange,
   onViewModeChange,
 }: PageHeaderProps): JSX.Element | null {
+  const { isReport, isUpdateMode } = useContext(CreeveyContext);
   const imageEntires = Object.entries(images) as [string, Images][];
 
   const handleViewModeChange = (mode: string): void => {
@@ -110,7 +123,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)}
@@ -118,6 +131,9 @@ export function PageHeader({
           ))}
         </ImagesEntriesContainer>
       ) : null}
+      {isUpdateMode && (
+        <UpdateModeBanner>Update Mode: Review and approve screenshots from previous test runs</UpdateModeBanner>
+      )}
       {showViewModes && (
         <Tabs selected={viewMode} actions={{ onSelect: handleViewModeChange }}>
           {viewModes.map((x) => (

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

@@ -1,12 +1,13 @@
-import React, { JSX, useCallback, useEffect, useState } from 'react';
-import { Placeholder, ScrollArea } from '@storybook/components';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import React, { JSX, useCallback, useContext, useEffect, useState } from 'react';
+import { Placeholder, ScrollArea } from 'storybook/internal/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, 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);

package/src/client/shared/creeveyClientApi.ts

@@ -12,9 +12,11 @@ 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;
+  let isUpdateMode = false;
 
   const ws = new WebSocket(`ws://${getConnectionUrl()}`);
 
@@ -22,12 +24,24 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
     ws.send(JSON.stringify(request));
   }
 
+  ws.addEventListener('error', (event) => {
+    clientApiRejecter(event);
+  });
+
   ws.addEventListener('open', () => {
     clientApiResolver({
       start(ids: string[]) {
+        if (isUpdateMode) {
+          console.warn('Tests cannot be started in Update Mode. This mode is for approving screenshots only.');
+          return;
+        }
         send({ type: 'start', payload: ids });
       },
       stop() {
+        if (isUpdateMode) {
+          console.warn('Tests cannot be stopped in Update Mode. This mode is for approving screenshots only.');
+          return;
+        }
         send({ type: 'stop' });
       },
       approve(id: string, retry: number, image: string) {
@@ -57,6 +71,7 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
         fn(data.payload);
       });
     if (data.type == 'status') {
+      isUpdateMode = data.payload.isUpdateMode;
       statusResolver(data.payload);
       statusResolver = noop;
       statusRequest = null;
@@ -64,5 +79,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

@@ -1,6 +1,6 @@
 import React, { JSX, useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
-import { ensure, styled, ThemeProvider, themes, withTheme } from '@storybook/theming';
+import { ensure, styled, ThemeProvider, themes, withTheme } from 'storybook/theming';
 import { CreeveyUpdate, CreeveySuite, isDefined, CreeveyTest } from '../../types.js';
 import { CreeveyClientApi } from '../shared/creeveyClientApi.js';
 import {
@@ -11,7 +11,6 @@ import {
   getTestByPath,
   removeTests,
   getTestPath,
-  useTheme,
   setSearchParams,
   getTestPathFromSearch,
   CreeveyViewFilter,
@@ -22,6 +21,7 @@ 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;
@@ -29,6 +29,7 @@ export interface CreeveyAppProps {
     tests: CreeveySuite;
     isRunning: boolean;
     isReport: boolean;
+    isUpdateMode: boolean;
   };
 }
 
@@ -137,6 +138,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   }, [handleImageApproveNew, handleGoToNextFailedTest]);
 
   const handleApproveAll = useCallback(() => {
+    // TODO Update handled incorrectly
     api?.approveAll();
   }, [api]);
 
@@ -213,6 +215,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
         onSuiteToggle: handleSuiteToggle,
         sidebarFocusedItem,
         setSidebarFocusedItem,
+        isUpdateMode: initialState.isUpdateMode,
       }}
     >
       <ThemeProvider theme={ensure(themes[theme])}>

package/src/client/web/CreeveyContext.tsx

@@ -7,6 +7,7 @@ export type FocusableItem = null | SuitePath;
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
+  isUpdateMode: boolean;
   onStop: () => void;
   onImageNext?: () => void;
   onImageApprove?: () => void;
@@ -21,6 +22,7 @@ export interface CreeveyContextType {
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  isUpdateMode: false,
   onImageNext: noop,
   onImageApprove: noop,
   onApproveAll: noop,

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 { styled, withTheme, Theme, keyframes, ensure, ThemeProvider, themes, Keyframes } from 'storybook/theming';
+import { useTheme } from './themes.js';
 
 const Container = withTheme(
   styled.div(({ theme }) => ({

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

@@ -1,5 +1,5 @@
-import React, { JSX } from 'react';
-import { styled, Theme, withTheme } from '@storybook/theming';
+import React, { Component, JSX } from 'react';
+import { styled, Theme, withTheme } from 'storybook/theming';
 import { CircleIcon, CheckIcon } from '@storybook/icons';
 import { transparentize } from 'polished';
 
@@ -76,7 +76,7 @@ export const CheckboxContainer = styled.span({
   lineHeight: '18px',
 });
 
-export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+export class Checkbox extends Component<CheckboxProps, CheckboxState> {
   state: CheckboxState = { indeterminate: false };
 
   handleIndeterminateChange = (value: boolean): void => {

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

@@ -1,6 +1,6 @@
 import React, { JSX, ChangeEvent, useRef, useState } from 'react';
 import { SearchIcon, CloseAltIcon } from '@storybook/icons';
-import { styled, Theme, withTheme } from '@storybook/theming';
+import { styled, Theme, withTheme } from 'storybook/theming';
 import { useCreeveyContext } from '../../CreeveyContext.js';
 
 interface SearchProps {

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

@@ -1,7 +1,7 @@
 import React, { JSX, createContext } from 'react';
 import { transparentize } from 'polished';
-import { ScrollArea } from '@storybook/components';
-import { styled, Theme, withTheme } from '@storybook/theming';
+import { ScrollArea } from 'storybook/internal/components';
+import { styled, Theme, withTheme } from 'storybook/theming';
 import { SideBarHeader } from './SideBarHeader.js';
 import { CreeveySuite, CreeveyTest, noop, isTest } from '../../../../types.js';
 import {
@@ -47,6 +47,12 @@ const ScrollContainer = styled.div({
   left: '0',
 });
 
+const StyledScrollArea = styled(ScrollArea)({
+  '& > [data-state="visible"]': {
+    zIndex: 5,
+  },
+});
+
 const Shadow = withTheme(
   styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
     [position]: '0px',
@@ -62,14 +68,13 @@ const SelectAllContainer = styled.div({
 });
 
 const TestsContainer = styled.div({
-  marginBottom: '8px',
   position: 'relative',
   height: '100%',
 });
 
 const Divider = withTheme(
   styled.div<{ theme: Theme; position: 'top' | 'bottom' }>(({ theme, position }) => ({
-    ...(position === 'top' ? { position: 'absolute' } : { position: 'relative', bottom: '8px', marginBottom: '-8px' }),
+    ...(position === 'top' ? { position: 'absolute' } : { position: 'relative', bottom: '8px' }),
     height: '8px',
     width: '100%',
     zIndex: 4,
@@ -102,7 +107,7 @@ export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: Si
           canStart={countCheckedTests !== 0}
         />
         <ScrollContainer>
-          <ScrollArea vertical>
+          <StyledScrollArea vertical>
             <Shadow position="top" />
             <TestsContainer>
               <Divider position="top" />
@@ -120,7 +125,7 @@ export function SideBar({ rootSuite, testId, onOpenTest, filter, setFilter }: Si
               )}
             </TestsContainer>
             <Divider position="bottom" />
-          </ScrollArea>
+          </StyledScrollArea>
           <Shadow position="bottom" />
         </ScrollContainer>
         <SideBarFooter />

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

@@ -1,6 +1,6 @@
 import React, { JSX, useCallback, useEffect, useState } from 'react';
-import { styled, withTheme } from '@storybook/theming';
-import { Button } from '@storybook/components';
+import { styled, withTheme } from 'storybook/theming';
+import { Button } from 'storybook/internal/components';
 import { ChevronRightIcon } from '@storybook/icons';
 import { useCreeveyContext } from '../../CreeveyContext.js';
 
@@ -48,23 +48,25 @@ export function SideBarFooter(): JSX.Element {
   }, [handleKeyDown, handleKeyUp]);
 
   return (
-    <Sticky>
-      <Container>
-        {isAlt ? (
-          <Button variant="outline" size="medium" onClick={onImageNext} disabled={!onImageApprove}>
-            Next
-            <ChevronRightIcon />
+    <>
+      <Sticky>
+        <Container>
+          {isAlt ? (
+            <Button variant="outline" size="medium" onClick={onImageNext} disabled={!onImageApprove}>
+              Next
+              <ChevronRightIcon />
+            </Button>
+          ) : (
+            <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
+              Approve
+              <ChevronRightIcon />
+            </Button>
+          )}
+          <Button variant="outline" size="medium" onClick={onApproveAll}>
+            Approve all
           </Button>
-        ) : (
-          <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
-            Approve
-            <ChevronRightIcon />
-          </Button>
-        )}
-        <Button variant="outline" size="medium" onClick={onApproveAll}>
-          Approve all
-        </Button>
-      </Container>
-    </Sticky>
+        </Container>
+      </Sticky>
+    </>
   );
 }

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

@@ -1,7 +1,7 @@
 import React, { JSX, useContext, useState } from 'react';
-import { Button as NativeButton } from '@storybook/components';
+import { Button as NativeButton } from 'storybook/internal/components';
 import { StopIcon, PlayIcon } from '@storybook/icons';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { CreeveyContext } from '../../CreeveyContext.js';
 import { TestsStatus, TestsStatusProps } from './TestsStatus.js';
 import { TestStatus } from '../../../../types.js';
@@ -36,6 +36,7 @@ const Container = styled.div({
 const Header = styled.h2({
   fontWeight: 'normal',
   margin: 0,
+  padding: '2px 6px',
 });
 
 const Button = withTheme(
@@ -58,12 +59,23 @@ const Button = withTheme(
   })),
 );
 
+const UpdateModeDescription = withTheme(
+  styled.div(({ theme }) => ({
+    fontSize: '0.8em',
+    marginTop: '4px',
+    padding: '2px 6px',
+    color: theme.color.positive,
+    backgroundColor: `${theme.color.positive}20`,
+  })),
+);
+
 const MarginContainer = styled.div<{ left?: string; right?: string; top?: string; bottom?: string }>(
   ({ left, right, top, bottom }) => ({
     marginLeft: left ?? 0,
     marginRight: right ?? 0,
     marginTop: top ?? 0,
     marginBottom: bottom ?? 0,
+    padding: '2px 6px',
   }),
 );
 
@@ -92,7 +104,7 @@ export function SideBarHeader({
   onFilterChange,
   canStart,
 }: SideBarHeaderProps): JSX.Element {
-  const { isReport, isRunning } = useContext(CreeveyContext);
+  const { isReport, isRunning, isUpdateMode } = useContext(CreeveyContext);
   const [filterInput, setFilterInput] = useState('');
 
   const handleClickByStatus = (status: TestStatus): void => {
@@ -115,9 +127,12 @@ export function SideBarHeader({
       <Container>
         <div>
           <Header>colin.creevey</Header>
+          {isUpdateMode && (
+            <UpdateModeDescription>Review and approve screenshots from previous test runs</UpdateModeDescription>
+          )}
           <TestsStatus {...testsStatus} onClickByStatus={handleClickByStatus} />
         </div>
-        {isReport ? null : (
+        {isReport || isUpdateMode ? null : (
           <MarginContainer top="10px">
             {isRunning ? (
               <Button variant="outline" onClick={onStop}>
@@ -131,7 +146,7 @@ export function SideBarHeader({
           </MarginContainer>
         )}
       </Container>
-      <MarginContainer top="24px" bottom="24px">
+      <MarginContainer top="12px" bottom="12px">
         <Search onChange={handleInputFilterChange} value={filterInput} />
       </MarginContainer>
     </Sticky>

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

@@ -1,6 +1,6 @@
 import React, { JSX, useRef, useEffect, useMemo } from 'react';
 import { ChevronDownIcon, ChevronRightIcon } from '@storybook/icons';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme, Theme } from 'storybook/theming';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { TestStatusIcon } from './TestStatusIcon.js';
 import { CreeveySuite, isTest } from '../../../../types.js';
@@ -78,7 +78,7 @@ export const SuiteTitle = styled.span({
 });
 
 export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
-  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
+  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem, isUpdateMode } = useCreeveyContext();
   const checkboxRef = useRef<Checkbox>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -117,12 +117,14 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
   return (
     <Container focused={isSuiteFocused}>
       <CheckboxContainer>
-        <Checkbox
-          ref={checkboxRef}
-          checked={suite.skip ? false : suite.checked}
-          disabled={Boolean(suite.skip)}
-          onValueChange={handleCheck}
-        />
+        {!isUpdateMode && (
+          <Checkbox
+            ref={checkboxRef}
+            checked={suite.skip ? false : suite.checked}
+            disabled={Boolean(suite.skip)}
+            onValueChange={handleCheck}
+          />
+        )}
       </CheckboxContainer>
       <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} ref={buttonRef}>
         <SuiteContainer padding={(suite.path.length - 1) * 8}>

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

@@ -6,7 +6,7 @@ import { SideBarContext } from './SideBar.js';
 import { Button, Container, SuiteContainer, SuiteTitle } from './SuiteLink.js';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { getTestPath } from '../../../shared/helpers.js';
-import { styled } from '@storybook/theming';
+import { styled } from 'storybook/theming';
 
 export interface TestLinkProps {
   title: string;
@@ -19,7 +19,7 @@ const TestContainer = styled(SuiteContainer)({
 });
 
 export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
-  const { onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
+  const { onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem, isUpdateMode } = useCreeveyContext();
   const { onOpenTest } = useContext(SideBarContext);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -55,11 +55,13 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
       {/* NOTE Little hack to allow click on checkbox and don't trigger Button click */}
       {/* We can use other approach, but checkbox has vertical-align: top */}
       <CheckboxContainer>
-        <Checkbox
-          checked={test.skip ? false : test.checked}
-          disabled={Boolean(test.skip)}
-          onValueChange={handleCheck}
-        />
+        {!isUpdateMode && (
+          <Checkbox
+            checked={test.skip ? false : test.checked}
+            disabled={Boolean(test.skip)}
+            onValueChange={handleCheck}
+          />
+        )}
       </CheckboxContainer>
       <Button onClick={handleOpen} disabled={emptyResults} ref={buttonRef}>
         <TestContainer padding={(testPath.length + 1) * 8}>

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

@@ -1,6 +1,6 @@
 import React, { JSX } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
-import { Loader } from '@storybook/components';
+import { styled, withTheme, Theme } from 'storybook/theming';
+import { Loader } from 'storybook/internal/components';
 import { CrossIcon, CheckIcon, CircleHollowIcon, ThumbsUpIcon, AlertIcon, TimeIcon } from '@storybook/icons';
 import { TestStatus } from '../../../../types.js';
 

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

@@ -1,7 +1,7 @@
 import React, { JSX } from 'react';
-import { IconButton } from '@storybook/components';
+import { IconButton } from 'storybook/internal/components';
 import { TimeIcon, CheckIcon, CrossIcon, ThumbsUpIcon } from '@storybook/icons';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme, Theme } from 'storybook/theming';
 import { TestStatus } from '../../../../types.js';
 import { CreeveyTestsStatus } from '../../../shared/helpers.js';
 
@@ -15,6 +15,7 @@ const Container = styled.div({
   alignItems: 'center',
   fontSize: '14px',
   lineHeight: '22px',
+  padding: '2px 6px',
 });
 
 const IconContainer = styled.div<{ color?: string }>(({ color }) => ({

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

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { opacify } from 'polished';
 
 const Container = withTheme(