Merge pull request #28979 from storybookjs/fix-status-hooks

UI: Fix conditional hooks usage in sidebar
storybookjs · Sep 3, 2024 · e399617 · e399617
2 parents 00c1524 + 9026bd8
commit e399617
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/code/core/src/manager/components/sidebar/StatusContext.tsx b/code/core/src/manager/components/sidebar/StatusContext.tsx
@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react';
 
 import type { API_StatusObject, API_StatusState, API_StatusValue, StoryId } from '@storybook/types';
 
-import type { ComponentEntry, GroupEntry, StoriesHash } from '../../../manager-api';
+import type { StoriesHash } from '../../../manager-api';
+import type { Item } from '../../container/Sidebar';
 import { getDescendantIds } from '../../utils/tree';
 
 export const StatusContext = createContext<{
@@ -11,7 +12,7 @@ export const StatusContext = createContext<{
   groupStatus?: Record<StoryId, API_StatusValue>;
 }>({});
 
-export const useStatusSummary = (item: GroupEntry | ComponentEntry) => {
+export const useStatusSummary = (item: Item) => {
   const { data, status, groupStatus } = useContext(StatusContext);
   const summary: {
     counts: Record<API_StatusValue, number>;

diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -153,6 +153,7 @@ const Node = React.memo<NodeProps>(function Node({
 }) {
   const { isDesktop, isMobile, setMobileMenuOpen } = useLayout();
   const theme = useTheme();
+  const { counts, statuses } = useStatusSummary(item);
 
   if (!isDisplayed) {
     return null;
@@ -283,8 +284,6 @@ const Node = React.memo<NodeProps>(function Node({
   }
 
   if (item.type === 'component' || item.type === 'group') {
-    const { counts, statuses } = useStatusSummary(item);
-
     const itemStatus = groupStatus?.[item.id];
     const color = itemStatus ? statusMapping[itemStatus][1] : null;
     const BranchNode = item.type === 'component' ? ComponentNode : GroupNode;