TagsFilter: Don't use filtered index to generate tags

storybookjs · Jun 17, 2024 · 09c56df · 09c56df
1 parent 22a699b
commit 09c56df
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 14 deletions.
diff --git 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 && <TagsFilter api={api} index={index} updateQueryParams={updateQueryParams} />}
+          {index && (
+            <TagsFilter api={api} indexJson={indexJson} updateQueryParams={updateQueryParams} />
+          )}
           <Search
             dataset={dataset}
             enableShortcuts={enableShortcuts}

diff --git a/code/ui/manager/src/components/sidebar/TagsFilter.stories.tsx b/code/ui/manager/src/components/sidebar/TagsFilter.stories.tsx
@@ -17,8 +17,11 @@ export const Closed: Story = {
     api: {
       experimental_setFilter: fn(),
     } as any,
-    index: {
-      story1: { type: 'story', tags: ['A', 'B', 'C', 'dev'] } as any,
+    indexJson: {
+      v: 6,
+      entries: {
+        'c1-s1': { tags: ['A', 'B', 'C', 'dev'] } as any,
+      },
     },
     updateQueryParams: fn(),
   },

diff --git a/code/ui/manager/src/components/sidebar/TagsFilter.tsx b/code/ui/manager/src/components/sidebar/TagsFilter.tsx
@@ -3,7 +3,7 @@ import { Badge, IconButton, WithTooltip } from '@storybook/components';
 import { FilterIcon } from '@storybook/icons';
 import type { API } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
-import type { Tag, API_IndexHash } from '@storybook/types';
+import type { Tag, API_IndexHash, StoryIndex } from '@storybook/types';
 import { TagsFilterPanel } from './TagsFilterPanel';
 
 const TAGS_FILTER = 'tags-filter';
@@ -31,14 +31,14 @@ const Count = styled(Badge)(({ theme }) => ({
 
 export interface TagsFilterProps {
   api: API;
-  index: API_IndexHash;
+  indexJson: StoryIndex;
   updateQueryParams: (params: Record<string, string | null>) => void;
   initialSelectedTags?: Tag[];
 }
 
 export const TagsFilter = ({
   api,
-  index,
+  indexJson,
   updateQueryParams,
   initialSelectedTags = [],
 }: TagsFilterProps) => {
@@ -49,21 +49,19 @@ 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(',');
     const [includeTags, excludeTags] = exclude ? [null, tagsParam] : [tagsParam, null];
     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<Tag>());
 

diff --git 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<typeof TagsFilterPanel>;
 
 export default meta;

diff --git 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,