From ad1617d466469b4f1912a2acb9980662dfb1d34b Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 16 Jun 2024 20:36:59 +0800
Subject: [PATCH] Only show filter after index has bene created

---
 .../src/components/sidebar/Sidebar.tsx        | 32 ++++++++++---------
 .../components/sidebar/TagsFilter.stories.tsx |  1 +
 .../components/sidebar/TagsFilterPanel.tsx    |  9 +++++-
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 2c98f1a5c695..c4c1b35db9ce 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -152,21 +152,23 @@ export const Sidebar = React.memo(function Sidebar({
             isLoading={isLoading}
             onMenuClick={onMenuClick}
           />
-          <TagsFilter
-            api={api}
-            index={index}
-            updateQueryParams={(params) => {
-              const url = new URL(window.location.href);
-              Object.entries(params).forEach(([key, value]) => {
-                if (value) {
-                  url.searchParams.set(key, value);
-                } else {
-                  url.searchParams.delete(key);
-                }
-              });
-              window.history.pushState({}, '', url);
-            }}
-          />
+          {index && (
+            <TagsFilter
+              api={api}
+              index={index}
+              updateQueryParams={(params) => {
+                const url = new URL(window.location.href);
+                Object.entries(params).forEach(([key, value]) => {
+                  if (value) {
+                    url.searchParams.set(key, value);
+                  } else {
+                    url.searchParams.delete(key);
+                  }
+                });
+                window.history.pushState({}, '', url);
+              }}
+            />
+          )}
           <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 73892a531968..489eba8e756f 100644
--- a/code/ui/manager/src/components/sidebar/TagsFilter.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/TagsFilter.stories.tsx
@@ -5,6 +5,7 @@ import { TagsFilter } from './TagsFilter';
 
 const meta = {
   component: TagsFilter,
+  tags: ['haha'],
 } satisfies Meta<typeof TagsFilter>;
 
 export default meta;
diff --git a/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx b/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx
index 5ab710d928e0..4f7d2e5c4b9c 100644
--- a/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx
+++ b/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx
@@ -4,7 +4,14 @@ import { transparentize } from 'polished';
 import { styled } from '@storybook/theming';
 import { CollapseIcon } from './components/CollapseIcon';
 
-const BUILT_IN_TAGS = new Set(['dev', 'autodocs', 'test', 'attached-mdx', 'unattached-mdx']);
+const BUILT_IN_TAGS = new Set([
+  'dev',
+  'autodocs',
+  'test',
+  'attached-mdx',
+  'unattached-mdx',
+  'play-fn',
+]);
 
 const CollapseButton = styled.button(({ theme }) => ({
   all: 'unset',