UI: Improve sidebar empty state

code/core/src/manager/components/sidebar/Explorer.stories.tsx

@@ -82,6 +82,7 @@ export const Simple = () => (
     }}
     isLoading={false}
     isBrowsing
+    hasEntries={true}
   />
 );
 
@@ -94,5 +95,6 @@ export const WithRefs = () => (
     }}
     isLoading={false}
     isBrowsing
+    hasEntries={true}
   />
 );

code/core/src/manager/components/sidebar/Explorer.tsx

@@ -9,11 +9,13 @@ import { useHighlighted } from './useHighlighted';
 export interface ExplorerProps {
   isLoading: boolean;
   isBrowsing: boolean;
+  hasEntries: boolean;
   dataset: CombinedDataset;
   selected: Selection;
 }
 
 export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
+  hasEntries,
   isLoading,
   isBrowsing,
   dataset,
@@ -43,6 +45,7 @@ export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
           key={refId}
           isLoading={isLoading}
           isBrowsing={isBrowsing}
+          hasEntries={hasEntries}
           selectedStoryId={selected?.refId === ref.id ? selected.storyId : null}
           highlightedRef={highlightedRef}
           setHighlighted={setHighlighted}

code/core/src/manager/components/sidebar/NoResults.tsx

@@ -0,0 +1,17 @@
+import { styled } from 'storybook/theming';
+
+export const NoResults = styled.div(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'center',
+  textWrap: 'balance',
+  gap: 4,
+  padding: '20px 0',
+  lineHeight: `18px`,
+  fontSize: `${theme.typography.size.s2}px`,
+  color: theme.color.defaultText,
+  small: {
+    color: theme.textMutedColor,
+    fontSize: `${theme.typography.size.s1}px`,
+  },
+}));

code/core/src/manager/components/sidebar/RefBlocks.tsx

@@ -10,6 +10,7 @@ import { ChevronDownIcon, LockIcon, SyncIcon } from '@storybook/icons';
 import { styled } from 'storybook/theming';
 
 import { Contained, Loader } from './Loader';
+import { NoResults } from './NoResults';
 
 const { window: globalWindow } = global;
 
@@ -135,29 +136,48 @@ const WideSpaced = styled(Spaced)({
   flex: 1,
 });
 
-export const EmptyBlock: FC<any> = ({ isMain }) => (
+export const EmptyBlock = ({ isMain, hasEntries }: { isMain: boolean; hasEntries: boolean }) => (
   <Contained>
     <FlexSpaced col={1}>
       <WideSpaced>
-        <Text>
-          {isMain ? (
-            <>
-              Oh no! Your Storybook is empty. Possible reasons why:
-              <ul>
-                <li>
-                  The glob specified in <code>main.js</code> isn't correct.
-                </li>
-                <li>No stories are defined in your story files.</li>
-                <li>You're using filter-functions, and all stories are filtered away.</li>
-              </ul>{' '}
-            </>
-          ) : (
-            <>
-              This composed storybook is empty, maybe you're using filter-functions, and all stories
-              are filtered away.
-            </>
-          )}
-        </Text>
+        {hasEntries ? (
+          <NoResults>
+            <strong>No stories found</strong>
+            <small>Your selected filters did not match any stories.</small>
+          </NoResults>
+        ) : isMain ? (
+          <Text>
+            Oh no! Your Storybook is empty. This can happen when:
+            <ul>
+              <li>
+                Your{' '}
+                <Link
+                  href="https://storybook.js.org/docs/api/main-config/main-config-stories?ref=ui"
+                  cancel={false}
+                  target="_blank"
+                >
+                  stories glob configuration
+                </Link>{' '}
+                does not match any files.{' '}
+              </li>
+              <li>
+                You have{' '}
+                <Link
+                  href="https://storybook.js.org/docs/writing-stories?ref=ui"
+                  cancel={false}
+                  target="_blank"
+                >
+                  no stories defined
+                </Link>{' '}
+                in your story files.{' '}
+              </li>
+            </ul>
+          </Text>
+        ) : (
+          <Text>
+            This composed Storybook is empty. Perhaps no stories match your selected filters.
+          </Text>
+        )}
       </WideSpaced>
     </FlexSpaced>
   </Contained>

code/core/src/manager/components/sidebar/Refs.stories.tsx

@@ -172,6 +172,18 @@ const refs: Record<string, RefType> = {
 export const Optimized = () => (
   <Ref
     {...refs.optimized}
+    hasEntries={true}
+    isLoading={false}
+    isBrowsing
+    selectedStoryId=""
+    highlightedRef={{ current: null }}
+    setHighlighted={() => {}}
+  />
+);
+export const NoEntries = () => (
+  <Ref
+    {...refs.empty}
+    hasEntries={false}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -182,6 +194,7 @@ export const Optimized = () => (
 export const IsEmpty = () => (
   <Ref
     {...refs.empty}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -192,6 +205,7 @@ export const IsEmpty = () => (
 export const StartInjectedUnknown = () => (
   <Ref
     {...refs.startInjected_unknown}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -202,6 +216,7 @@ export const StartInjectedUnknown = () => (
 export const StartInjectedLoading = () => (
   <Ref
     {...refs.startInjected_loading}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -212,6 +227,7 @@ export const StartInjectedLoading = () => (
 export const StartInjectedReady = () => (
   <Ref
     {...refs.startInjected_ready}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -222,6 +238,7 @@ export const StartInjectedReady = () => (
 export const Versions = () => (
   <Ref
     {...refs.versions}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -232,6 +249,7 @@ export const Versions = () => (
 export const VersionsMissingCurrent = () => (
   <Ref
     {...refs.versionsMissingCurrent}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -242,6 +260,7 @@ export const VersionsMissingCurrent = () => (
 export const Errored = () => (
   <Ref
     {...refs.error}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -252,6 +271,7 @@ export const Errored = () => (
 export const Auth = () => (
   <Ref
     {...refs.auth}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -262,6 +282,7 @@ export const Auth = () => (
 export const Long = () => (
   <Ref
     {...refs.long}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""
@@ -273,6 +294,7 @@ export const Long = () => (
 export const WithSourceCode = () => (
   <Ref
     {...refs.withSourceCode}
+    hasEntries={true}
     isLoading={false}
     isBrowsing
     selectedStoryId=""

code/core/src/manager/components/sidebar/Refs.tsx

@@ -16,6 +16,7 @@ import type { Highlight, RefType } from './types';
 export interface RefProps {
   isLoading: boolean;
   isBrowsing: boolean;
+  hasEntries: boolean;
   selectedStoryId: string | null;
   highlightedRef: MutableRefObject<Highlight>;
   setHighlighted: (highlight: Highlight) => void;
@@ -82,6 +83,7 @@ export const Ref: FC<RefType & RefProps> = React.memo(function Ref(props) {
     title = refId,
     isLoading: isLoadingMain,
     isBrowsing,
+    hasEntries,
     selectedStoryId,
     highlightedRef,
     setHighlighted,
@@ -146,7 +148,7 @@ export const Ref: FC<RefType & RefProps> = React.memo(function Ref(props) {
           {/* @ts-expect-error (non strict) */}
           {state === 'error' && <ErrorBlock error={indexError} />}
           {state === 'loading' && <LoaderBlock isMain={isMain} />}
-          {state === 'empty' && <EmptyBlock isMain={isMain} />}
+          {state === 'empty' && <EmptyBlock isMain={isMain} hasEntries={hasEntries} />}
           {state === 'ready' && (
             <Tree
               allStatuses={allStatuses}

code/core/src/manager/components/sidebar/SearchResults.tsx

@@ -15,6 +15,7 @@ import { styled } from 'storybook/theming';
 import { matchesKeyCode, matchesModifiers } from '../../keybinding';
 import { statusMapping } from '../../utils/status';
 import { UseSymbol } from './IconSymbols';
+import { NoResults } from './NoResults';
 import { StatusLabel } from './StatusButton';
 import { TypeIcon } from './TreeNode';
 import type { DownshiftItem, Match, SearchResult } from './types';
@@ -63,18 +64,6 @@ const ResultRowContent = styled.div({
   flexDirection: 'column',
 });
 
-const NoResults = styled.div(({ theme }) => ({
-  marginTop: 20,
-  textAlign: 'center',
-  fontSize: `${theme.typography.size.s2}px`,
-  lineHeight: `18px`,
-  color: theme.color.defaultText,
-  small: {
-    color: theme.textMutedColor,
-    fontSize: `${theme.typography.size.s1}px`,
-  },
-}));
-
 const Mark = styled.mark(({ theme }) => ({
   background: 'transparent',
   color: theme.color.secondary,
@@ -312,7 +301,6 @@ export const SearchResults: FC<{
         <li>
           <NoResults>
             <strong>No components found</strong>
-            <br />
             <small>Find components by name or path.</small>
           </NoResults>
         </li>

code/core/src/manager/components/sidebar/Sidebar.stories.tsx

@@ -162,6 +162,16 @@ export const Empty: Story = {
   },
 };
 
+export const EmptyIndex: Story = {
+  args: {
+    index: {},
+    indexJson: {
+      entries: {},
+      v: 6,
+    },
+  },
+};
+
 export const IndexError: Story = {
   args: {
     indexError,

code/core/src/manager/components/sidebar/Sidebar.tsx

@@ -148,6 +148,7 @@ export const Sidebar = React.memo(function Sidebar({
   const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, allStatuses, refs);
   const isLoading = !index && !indexError;
+  const hasEntries = Object.keys(indexJson?.entries ?? {}).length > 0;
   const lastViewedProps = useLastViewed(selected);
   const { isMobile } = useLayout();
   const api = useStorybookApi();
@@ -230,6 +231,7 @@ export const Sidebar = React.memo(function Sidebar({
                   selected={selected}
                   isLoading={isLoading}
                   isBrowsing={isBrowsing}
+                  hasEntries={hasEntries}
                 />
                 <SearchResults
                   query={query}

code/core/src/manager/container/Sidebar.tsx

@@ -1,6 +1,4 @@
-import React, { useMemo } from 'react';
-
-import { Addon_TypesEnum } from 'storybook/internal/types';
+import React from 'react';
 
 import type { Combo, StoriesHash } from 'storybook/manager-api';
 import { Consumer, experimental_useStatusStore } from 'storybook/manager-api';