UI: Replace experimental_SIDEBAR_BOTTOM API with a status filter UI

code/core/src/core-events/index.ts

@@ -47,6 +47,8 @@ enum events {
   STORY_ARGS_UPDATED = 'storyArgsUpdated',
   // Reset either a single arg of a story all args of a story
   RESET_STORY_ARGS = 'resetStoryArgs',
+  // Emitted after a filter is set
+  SET_FILTER = 'setFilter',
   // Emitted by the preview at startup once it knows the initial set of globals+globalTypes
   SET_GLOBALS = 'setGlobals',
   // Tell the preview to update the value of a global
@@ -114,6 +116,7 @@ export const {
   SELECT_STORY,
   SET_CONFIG,
   SET_CURRENT_STORY,
+  SET_FILTER,
   SET_GLOBALS,
   SET_INDEX,
   SET_STORIES,

code/core/src/manager-api/modules/stories.ts

@@ -41,6 +41,7 @@ import {
   DOCS_PREPARED,
   SET_CURRENT_STORY,
   SET_CONFIG,
+  SET_FILTER,
 } from '@storybook/core/core-events';
 import { logger } from '@storybook/core/client-logger';
 
@@ -662,6 +663,8 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       Object.entries(refs).forEach(([refId, { internal_index, ...ref }]) => {
         fullAPI.setRef(refId, { ...ref, storyIndex: internal_index }, true);
       });
+
+      provider.channel?.emit(SET_FILTER, { id });
     },
   };
 

code/core/src/manager/components/sidebar/FilterToggle.stories.ts

@@ -0,0 +1,40 @@
+import { fn } from '@storybook/test';
+import { FilterToggle } from './FilterToggle';
+
+export default {
+  component: FilterToggle,
+  args: {
+    active: false,
+    onClick: fn(),
+  },
+};
+
+export const Changes = {
+  args: {
+    count: 12,
+    label: 'Change',
+    status: 'warning',
+  },
+};
+
+export const ChangesActive = {
+  args: {
+    ...Changes.args,
+    active: true,
+  },
+};
+
+export const Errors = {
+  args: {
+    count: 2,
+    label: 'Error',
+    status: 'critical',
+  },
+};
+
+export const ErrorsActive = {
+  args: {
+    ...Errors.args,
+    active: true,
+  },
+};

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

@@ -0,0 +1,59 @@
+import { Badge as BaseBadge, IconButton } from '@storybook/components';
+import { css, styled } from '@storybook/theming';
+import React, { type ComponentProps } from 'react';
+
+const Badge = styled(BaseBadge)(({ theme }) => ({
+  padding: '4px 8px',
+  fontSize: theme.typography.size.s1,
+}));
+
+const Button = styled(IconButton)(
+  ({ theme }) => ({
+    fontSize: theme.typography.size.s2,
+    '&:hover [data-badge][data-status=warning], [data-badge=true][data-status=warning]': {
+      background: '#E3F3FF',
+      borderColor: 'rgba(2, 113, 182, 0.1)',
+      color: '#0271B6',
+    },
+    '&:hover [data-badge][data-status=critical], [data-badge=true][data-status=critical]': {
+      background: theme.background.negative,
+      boxShadow: `inset 0 0 0 1px rgba(182, 2, 2, 0.1)`,
+      color: theme.color.negativeText,
+    },
+  }),
+  ({ active, theme }) =>
+    !active &&
+    css({
+      '&:hover': {
+        color: theme.base === 'light' ? theme.color.defaultText : theme.color.light,
+      },
+    })
+);
+
+const Label = styled.span(({ theme }) => ({
+  color: theme.base === 'light' ? theme.color.defaultText : theme.color.light,
+}));
+
+interface FilterToggleProps {
+  active: boolean;
+  count: number;
+  label: string;
+  status: ComponentProps<typeof Badge>['status'];
+}
+
+export const FilterToggle = ({
+  active,
+  count,
+  label,
+  status,
+  ...props
+}: FilterToggleProps & Omit<ComponentProps<typeof Button>, 'status'>) => {
+  return (
+    <Button active={active} {...props}>
+      <Badge status={status} data-badge={active} data-status={status}>
+        {count}
+      </Badge>
+      <Label>{`${label}${count === 1 ? '' : 's'}`}</Label>
+    </Button>
+  );
+};

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

@@ -4,7 +4,7 @@ import type { IndexHash, State } from '@storybook/core/manager-api';
 import { ManagerContext, types } from '@storybook/core/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent, expect, fn } from '@storybook/test';
-import type { Addon_SidebarTopType } from '@storybook/core/types';
+import type { Addon_SidebarTopType, API_StatusState } from '@storybook/core/types';
 import { Button, IconButton } from '@storybook/core/components';
 import { FaceHappyIcon } from '@storybook/icons';
 import { Sidebar, DEFAULT_REF_ID } from './Sidebar';
@@ -26,6 +26,26 @@ const storyId = 'root-1-child-a2--grandchild-a1-1';
 export const simpleData = { menu, index, storyId };
 export const loadingData = { menu };
 
+const managerContext: any = {
+  state: {
+    docsOptions: {
+      defaultName: 'Docs',
+      autodocs: 'tag',
+      docsMode: false,
+    },
+  },
+  api: {
+    emit: fn().mockName('api::emit'),
+    on: fn().mockName('api::on'),
+    off: fn().mockName('api::off'),
+    getShortcutKeys: fn(() => ({ search: ['control', 'shift', 's'] })).mockName(
+      'api::getShortcutKeys'
+    ),
+    selectStory: fn().mockName('api::selectStory'),
+    experimental_setFilter: fn().mockName('api::experimental_setFilter'),
+  },
+};
+
 const meta = {
   component: Sidebar,
   title: 'Sidebar/Sidebar',
@@ -44,28 +64,7 @@ const meta = {
   },
   decorators: [
     (storyFn) => (
-      <ManagerContext.Provider
-        value={
-          {
-            state: {
-              docsOptions: {
-                defaultName: 'Docs',
-                autodocs: 'tag',
-                docsMode: false,
-              },
-            },
-            api: {
-              emit: fn().mockName('api::emit'),
-              on: fn().mockName('api::on'),
-              off: fn().mockName('api::off'),
-              getShortcutKeys: fn(() => ({ search: ['control', 'shift', 's'] })).mockName(
-                'api::getShortcutKeys'
-              ),
-              selectStory: fn().mockName('api::selectStory'),
-            },
-          } as any
-        }
-      >
+      <ManagerContext.Provider value={managerContext}>
         <LayoutProvider>
           <IconSymbols />
           {storyFn()}
@@ -218,41 +217,29 @@ export const Searching: Story = {
 };
 
 export const Bottom: Story = {
-  args: {
-    bottom: [
-      {
-        id: '1',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => (
-          <Button>
-            <FaceHappyIcon />
-            Custom addon A
-          </Button>
-        ),
-      },
-      {
-        id: '2',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => (
-          <Button>
-            {' '}
-            <FaceHappyIcon />
-            Custom addon B
-          </Button>
-        ),
-      },
-      {
-        id: '3',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => (
-          <IconButton>
-            {' '}
-            <FaceHappyIcon />
-          </IconButton>
-        ),
-      },
-    ],
-  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider
+        value={{
+          ...managerContext,
+          state: {
+            ...managerContext.state,
+            status: {
+              [storyId]: {
+                vitest: { status: 'warn', title: '', description: '' },
+                vta: { status: 'error', title: '', description: '' },
+              },
+              'root-1-child-a2--grandchild-a1-2': {
+                vitest: { status: 'warn', title: '', description: '' },
+              },
+            } satisfies API_StatusState,
+          },
+        }}
+      >
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+  ],
 };
 
 /**

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

@@ -20,6 +20,7 @@ import { SearchResults } from './SearchResults';
 import type { CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+import { SidebarBottom } from './SidebarBottom';
 
 export const DEFAULT_REF_ID = 'storybook_internal';
 
@@ -109,7 +110,6 @@ export interface SidebarProps extends API_LoadedRefData {
   status: State['status'];
   menu: any[];
   extra: Addon_SidebarTopType[];
-  bottom?: Addon_SidebarBottomType[];
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;
@@ -128,7 +128,6 @@ export const Sidebar = React.memo(function Sidebar({
   previewInitialized,
   menu,
   extra,
-  bottom = [],
   menuHighlighted = false,
   enableShortcuts = true,
   refs = {},
@@ -194,9 +193,7 @@ export const Sidebar = React.memo(function Sidebar({
       </ScrollArea>
       {isLoading ? null : (
         <Bottom className="sb-bar">
-          {bottom.map(({ id, render: Render }) => (
-            <Render key={id} />
-          ))}
+          <SidebarBottom />
         </Bottom>
       )}
     </Container>

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

@@ -0,0 +1,42 @@
+import { fn } from '@storybook/test';
+
+import { SidebarBottomBase } from './SidebarBottom';
+
+export default {
+  component: SidebarBottomBase,
+  args: {
+    api: {
+      experimental_setFilter: fn(),
+      emit: fn(),
+    },
+  },
+};
+
+export const Changes = {
+  args: {
+    status: {
+      one: { 'sidebar-bottom-filter': { status: 'warn' } },
+      two: { 'sidebar-bottom-filter': { status: 'warn' } },
+    },
+  },
+};
+
+export const Errors = {
+  args: {
+    status: {
+      one: { 'sidebar-bottom-filter': { status: 'error' } },
+      two: { 'sidebar-bottom-filter': { status: 'error' } },
+    },
+  },
+};
+
+export const Both = {
+  args: {
+    status: {
+      one: { 'sidebar-bottom-filter': { status: 'warn' } },
+      two: { 'sidebar-bottom-filter': { status: 'warn' } },
+      three: { 'sidebar-bottom-filter': { status: 'error' } },
+      four: { 'sidebar-bottom-filter': { status: 'error' } },
+    },
+  },
+};