Merge pull request storybookjs#35276 from storybookjs/review/review-arrival

Review: Notify on review arrival instead of auto-navigating

Author: ghengeveld

code/core/src/components/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import { deprecate } from 'storybook/internal/client-logger';
 
 import { Slot } from '@radix-ui/react-slot';
 import { darken, lighten, rgba, transparentize } from 'polished';
-import { type API_KeyCollection, shortcutToAriaKeyshortcuts } from 'storybook/manager-api';
+import { shortcutToAriaKeyshortcuts, type API_KeyCollection } from 'storybook/manager-api';
 import { isPropValid, styled } from 'storybook/theming';
 
 import { InteractiveTooltipWrapper } from './helpers/InteractiveTooltipWrapper.tsx';

code/core/src/core-server/server-channel/review-channel.test.ts

@@ -59,7 +59,7 @@ const sampleReview: ReviewState = {
 };
 
 describe('initReviewChannel', () => {
-  const NOW = 1_700_000_000_000;
+  const NOW = new Date().getTime();
 
   beforeEach(() => {
     vi.spyOn(Date, 'now').mockReturnValue(NOW);

code/core/src/manager-api/modules/stories.ts

@@ -48,9 +48,12 @@ import type {
   Tag,
   TagsOptions,
 } from 'storybook/internal/types';
+import { isReviewManagerRoute } from '../../shared/review/routes.ts';
 
 import { global } from '@storybook/global';
 
+import { BUILT_IN_FILTERS } from '../../shared/constants/tags.ts';
+import { countStatusesByValue } from '../../shared/status-store/index.ts';
 import { getEventMetadata } from '../lib/events.ts';
 import {
   addPreparedStories,
@@ -63,8 +66,6 @@ import type { ModuleFn } from '../lib/types.tsx';
 import { buildNavigationUrl } from '../lib/url.ts';
 import type { ComposedRef } from '../root.tsx';
 import { fullStatusStore } from '../stores/status.ts';
-import { BUILT_IN_FILTERS } from '../../shared/constants/tags.ts';
-import { countStatusesByValue } from '../../shared/status-store/index.ts';
 import { computeStatusFilterFn, parseStatusesParam, serializeStatusesParam } from './statuses.ts';
 import {
   computeStaticFilterFn,
@@ -1053,7 +1054,8 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       if (sourceType === 'local') {
         const state = store.getState();
         const isCanvasRoute =
-          state.path === '/' || state.viewMode === 'story' || state.viewMode === 'docs';
+          !isReviewManagerRoute(state.path, state.customQueryParams) &&
+          (state.path === '/' || state.viewMode === 'story' || state.viewMode === 'docs');
         const stateHasSelection = state.viewMode && state.storyId;
         const stateSelectionDifferent = state.viewMode !== viewMode || state.storyId !== storyId;
         const { type } = state.index?.[state.storyId] || {};

code/core/src/manager/App.tsx

@@ -10,7 +10,7 @@ import { Global, createGlobal } from 'storybook/theming';
 import { ManagerErrorBoundary } from './components/error-boundary/ManagerErrorBoundary.tsx';
 import { Layout } from './components/layout/Layout.tsx';
 import { useLayout } from './components/layout/LayoutProvider.tsx';
-import { ReviewPersistentLayer } from './components/review/ReviewPersistentLayer.tsx';
+import { ReviewPersistentLayer } from './components/review/components/ReviewPersistentLayer.tsx';
 import Panel from './container/Panel.tsx';
 import Preview from './container/Preview.tsx';
 import Sidebar from './container/Sidebar.tsx';

code/core/src/manager/components/layout/Layout.stories.tsx

@@ -509,13 +509,13 @@ export const MobileDocs = {
   },
 };
 
-export const MobilePages: Story = {
+export const MobileReview: Story = {
   ...Mobile,
   args: {
     managerLayoutState: { ...defaultState, viewMode: 'review' },
   },
   play: async ({ canvas }) => {
-    expect(canvas.queryByLabelText('Open navigation menu')).not.toBeInTheDocument();
-    expect(canvas.getByTestId('page')).toBeInTheDocument();
+    expect(canvas.getByLabelText('Open navigation menu')).toBeInTheDocument();
+    expect(canvas.getByTestId('preview')).toBeInTheDocument();
   },
 };

code/core/src/manager/components/layout/Layout.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useLayoutEffect, useState } from 'react';
 
 import type { API_Layout, API_ViewMode } from 'storybook/internal/types';
 
-import { type API, useStorybookApi } from 'storybook/manager-api';
+import { useStorybookApi, type API } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
 import { MEDIA_DESKTOP_BREAKPOINT, MINIMUM_CONTENT_WIDTH_PX } from '../../constants.ts';
@@ -107,7 +107,8 @@ const useLayoutSyncingState = ({
   const isPagesShown =
     managerLayoutState.viewMode !== undefined &&
     managerLayoutState.viewMode !== 'story' &&
-    managerLayoutState.viewMode !== 'docs';
+    managerLayoutState.viewMode !== 'docs' &&
+    managerLayoutState.viewMode !== 'review';
   const isPanelShown = managerLayoutState.viewMode === 'story' && !hasTab;
 
   const { navSize, rightPanelWidth, bottomPanelHeight } = internalDraggingSizeState.isDragging

code/core/src/manager/components/preview/Preview.tsx

@@ -10,10 +10,10 @@ import { global } from '@storybook/global';
 
 import type { TabListState } from '@react-stately/tabs';
 import { Helmet } from 'react-helmet-async';
-import { type Combo, Consumer, addons, merge, types } from 'storybook/manager-api';
+import { Consumer, addons, merge, types, type Combo } from 'storybook/manager-api';
 
 import { useLandmark } from '../../hooks/useLandmark.ts';
-import { ReviewToolbarHeader } from '../review/ReviewToolbarHeader.tsx';
+import { ReviewToolbarHeader } from '../review/components/ReviewToolbarHeader.tsx';
 import { FramesRenderer } from './FramesRenderer.tsx';
 import { ToolbarComp } from './Toolbar.tsx';
 import { ApplyWrappers } from './Wrappers.tsx';