From 09c56df9dc2f6de903dcf9845a344dac7a1aa906 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Mon, 17 Jun 2024 19:35:58 +0800
Subject: [PATCH] TagsFilter: Don't use filtered index to generate tags

---
 .../src/components/sidebar/Sidebar.tsx        |  7 ++++++-
 .../components/sidebar/TagsFilter.stories.tsx |  7 +++++--
 .../src/components/sidebar/TagsFilter.tsx     | 20 +++++++++----------
 .../sidebar/TagsFilterPanel.stories.tsx       |  1 +
 code/ui/manager/src/container/Sidebar.tsx     |  5 +++++
 5 files changed, 26 insertions(+), 14 deletions(-)

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 && <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
index 489eba8e756f..74b53b30c838 100644
--- 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
index d248bbad77a8..982f2d719f75 100644
--- 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,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<Tag>());
 
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<typeof TagsFilterPanel>;
 
 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,