diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 5b6513d43269..5fbb56aac46b 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -8,6 +8,7 @@ import type {
Addon_SidebarBottomType,
Addon_SidebarTopType,
API_LoadedRefData,
+ StoryIndex,
} from '@storybook/types';
import type { HeadingProps } from './Heading';
import { Heading } from './Heading';
@@ -126,12 +127,14 @@ export interface SidebarProps extends API_LoadedRefData {
enableShortcuts?: boolean;
onMenuClick?: HeadingProps['onMenuClick'];
showCreateStoryButton?: boolean;
+ indexJson?: StoryIndex;
}
export const Sidebar = React.memo(function Sidebar({
storyId = null,
refId = DEFAULT_REF_ID,
index,
+ indexJson,
indexError,
status,
previewInitialized,
@@ -163,7 +166,9 @@ export const Sidebar = React.memo(function Sidebar({
isLoading={isLoading}
onMenuClick={onMenuClick}
/>
- {index && }
+ {index && (
+
+ )}
({
export interface TagsFilterProps {
api: API;
- index: API_IndexHash;
+ indexJson: StoryIndex;
updateQueryParams: (params: Record) => void;
initialSelectedTags?: Tag[];
}
export const TagsFilter = ({
api,
- index,
+ indexJson,
updateQueryParams,
initialSelectedTags = [],
}: TagsFilterProps) => {
@@ -49,10 +49,10 @@ export const TagsFilter = ({
useEffect(() => {
api.experimental_setFilter(TAGS_FILTER, (item) => {
- const tags = item.tags ?? [];
- return exclude
- ? !selectedTags.some((tag) => tags.includes(tag))
- : selectedTags.every((tag) => tags.includes(tag));
+ if (selectedTags.length === 0) return true;
+
+ const hasSelectedTags = selectedTags.some((tag) => item.tags?.includes(tag));
+ return exclude ? !hasSelectedTags : hasSelectedTags;
});
const tagsParam = selectedTags.join(',');
@@ -60,10 +60,8 @@ export const TagsFilter = ({
updateQueryParams({ includeTags, excludeTags });
}, [api, selectedTags, exclude, updateQueryParams]);
- const allTags = Object.values(index).reduce((acc, entry) => {
- if (entry.type === 'story') {
- entry.tags.forEach((tag: Tag) => acc.add(tag));
- }
+ const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
+ entry.tags?.forEach((tag: Tag) => acc.add(tag));
return acc;
}, new Set());
diff --git a/code/ui/manager/src/components/sidebar/TagsFilterPanel.stories.tsx b/code/ui/manager/src/components/sidebar/TagsFilterPanel.stories.tsx
index b97093b2d0e1..ef0b9e47002d 100644
--- a/code/ui/manager/src/components/sidebar/TagsFilterPanel.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/TagsFilterPanel.stories.tsx
@@ -10,6 +10,7 @@ const meta = {
toggleTag: fn(),
toggleExclude: fn(),
},
+ tags: ['hoho'],
} satisfies Meta;
export default meta;
diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx
index 21d9cf09ef6c..fc30fddc1a47 100755
--- a/code/ui/manager/src/container/Sidebar.tsx
+++ b/code/ui/manager/src/container/Sidebar.tsx
@@ -22,6 +22,10 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
storyId,
refId,
layout: { showToolbar },
+ // FIXME: This is the actual `index.json` index where the `index` below
+ // is actually the stories hash. We should fix this up and make it consistent.
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ internal_index,
index,
status,
indexError,
@@ -52,6 +56,7 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
return {
title: name,
url,
+ indexJson: internal_index,
index,
indexError,
status,