UI: Add an experimental API for adding sidebar top toolbar

code/lib/manager-api/src/lib/addons.ts

@@ -14,6 +14,7 @@ import type {
   Addon_TypesMapping,
   Addon_WrapperType,
   Addon_SidebarBottomType,
+  Addon_SidebarTopType,
 } from '@storybook/types';
 import { Addon_TypesEnum } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
@@ -103,6 +104,7 @@ export class AddonStore {
       | Addon_Types
       | Addon_TypesEnum.experimental_PAGE
       | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+      | Addon_TypesEnum.experimental_SIDEBAR_TOP
   >(type: T): Addon_Collection<Addon_TypesMapping[T]> {
     if (!this.elements[type]) {
       this.elements[type] = {};
@@ -145,6 +147,7 @@ export class AddonStore {
     id: string,
     addon:
       | Addon_BaseType
+      | (Omit<Addon_SidebarTopType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_SidebarBottomType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_PageType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_WrapperType, 'id'> & DeprecatedAddonWithId)

code/lib/manager-api/src/modules/addons.ts

@@ -27,7 +27,8 @@ export interface SubAPI {
     T extends
       | Addon_Types
       | Addon_TypesEnum.experimental_PAGE
-      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM = Addon_Types
+      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+      | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types
   >(
     type: T
   ) => Addon_Collection<Addon_TypesMapping[T]>;

code/lib/types/src/modules/addons.ts

@@ -31,8 +31,11 @@ import type { IndexEntry } from './indexer';
 
 export type Addon_Types = Exclude<
   Addon_TypesEnum,
-  Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  | Addon_TypesEnum.experimental_PAGE
+  | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  | Addon_TypesEnum.experimental_SIDEBAR_TOP
 >;
+
 export interface Addon_ArgType<TArg = unknown> extends InputType {
   defaultValue?: TArg;
 }
@@ -330,7 +333,8 @@ export type Addon_Type =
   | Addon_BaseType
   | Addon_PageType
   | Addon_WrapperType
-  | Addon_SidebarBottomType;
+  | Addon_SidebarBottomType
+  | Addon_SidebarTopType;
 export interface Addon_BaseType {
   /**
    * The title of the addon.
@@ -346,6 +350,7 @@ export interface Addon_BaseType {
     | Addon_TypesEnum.PREVIEW
     | Addon_TypesEnum.experimental_PAGE
     | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+    | Addon_TypesEnum.experimental_SIDEBAR_TOP
   >;
   /**
    * The unique id of the addon.
@@ -471,17 +476,31 @@ export interface Addon_SidebarBottomType {
   render: FCWithoutChildren;
 }
 
+export interface Addon_SidebarTopType {
+  type: Addon_TypesEnum.experimental_SIDEBAR_TOP;
+  /**
+   * The unique id of the tool.
+   */
+  id: string;
+  /**
+   * A React.FunctionComponent.
+   */
+  render: FCWithoutChildren;
+}
+
 type Addon_TypeBaseNames = Exclude<
   Addon_TypesEnum,
   | Addon_TypesEnum.PREVIEW
   | Addon_TypesEnum.experimental_PAGE
   | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  | Addon_TypesEnum.experimental_SIDEBAR_TOP
 >;
 
 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
   [Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
   [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
   [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_SidebarBottomType;
+  [Addon_TypesEnum.experimental_SIDEBAR_TOP]: Addon_SidebarTopType;
 }
 
 export type Addon_Loader<API> = (api: API) => void;
@@ -540,6 +559,11 @@ export enum Addon_TypesEnum {
    * @unstable
    */
   experimental_SIDEBAR_BOTTOM = 'sidebar-bottom',
+  /**
+   * This adds items in the top of the sidebar.
+   * @unstable This will get replaced with a new API in 8.0, use at your own risk.
+   */
+  experimental_SIDEBAR_TOP = 'sidebar-top',
 
   /**
    * @deprecated This property does nothing, and will be removed in Storybook 8.0.

code/ui/manager/src/components/layout/app.mockdata.tsx

@@ -57,6 +57,7 @@ const realSidebarProps: SidebarProps = {
   refs: {},
   status: {},
   previewInitialized: true,
+  extra: [],
 };
 
 const PlaceholderBlock = styled.div(({ color }) => ({

code/ui/manager/src/components/sidebar/Heading.stories.tsx

@@ -27,7 +27,9 @@ const menuItems = [
   { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
 ];
 
-export const MenuHighlighted: Story = () => <Heading menuHighlighted menu={menuItems} />;
+export const MenuHighlighted: Story = () => (
+  <Heading menuHighlighted menu={menuItems} isLoading={false} extra={[]} />
+);
 
 export const standardData = { menu: menuItems };
 
@@ -45,7 +47,7 @@ export const Standard: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -64,7 +66,7 @@ export const StandardNoLink: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -83,7 +85,7 @@ export const LinkAndText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -102,7 +104,7 @@ export const OnlyText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -121,7 +123,7 @@ export const LongText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -140,7 +142,7 @@ export const CustomTitle: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -159,7 +161,7 @@ export const CustomBrandImage: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -178,7 +180,7 @@ export const CustomBrandImageTall: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -197,7 +199,7 @@ export const CustomBrandImageUnsizedSVG: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -216,13 +218,18 @@ export const NoBrand: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
 
 export const SkipToCanvasLinkFocused: ComponentStoryObj<typeof Heading> = {
-  args: { menu: menuItems, skipLinkHref: '#storybook-preview-wrapper' },
+  args: {
+    menu: menuItems,
+    skipLinkHref: '#storybook-preview-wrapper',
+    extra: [],
+    isLoading: false,
+  },
   parameters: { layout: 'padded', chromatic: { delay: 300 } },
   play: () => {
     // focus each instance for chromatic/storybook's stacked theme

code/ui/manager/src/components/sidebar/Heading.tsx

@@ -3,14 +3,17 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Button } from '@storybook/components';
 
+import type { Addon_SidebarTopType } from '@storybook/types';
 import { Brand } from './Brand';
 import type { MenuList } from './Menu';
 import { SidebarMenu } from './Menu';
 
 export interface HeadingProps {
   menuHighlighted?: boolean;
   menu: MenuList;
+  extra: Addon_SidebarTopType[];
   skipLinkHref?: string;
+  isLoading: boolean;
 }
 
 const BrandArea = styled.div(({ theme }) => ({
@@ -23,6 +26,9 @@ const BrandArea = styled.div(({ theme }) => ({
   alignItems: 'center',
   minHeight: 22,
 
+  '& > * > *': {
+    maxWidth: '100%',
+  },
   '& > *': {
     maxWidth: '100%',
     height: 'auto',
@@ -73,6 +79,8 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
   menuHighlighted = false,
   menu,
   skipLinkHref,
+  extra,
+  isLoading,
   ...props
 }) => {
   return (
@@ -87,6 +95,7 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
         <Brand />
       </BrandArea>
 
+      {isLoading ? null : extra.map(({ id, render: Render }) => <Render key={id} />)}
       <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
     </HeadingWrapper>
   );

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

@@ -62,6 +62,7 @@ export const Simple: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -74,7 +75,15 @@ export const Simple: Story = {
 export const Loading: Story = {
   args: { previewInitialized: false },
   render: (args) => (
-    <Sidebar {...args} menu={menu} storyId={storyId} refId={DEFAULT_REF_ID} refs={{}} status={{}} />
+    <Sidebar
+      {...args}
+      menu={menu}
+      extra={[]}
+      storyId={storyId}
+      refId={DEFAULT_REF_ID}
+      refs={{}}
+      status={{}}
+    />
   ),
 };
 
@@ -86,6 +95,7 @@ export const Empty: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={{}}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -103,6 +113,7 @@ export const IndexError: Story = {
     <Sidebar
       {...args}
       indexError={indexError}
+      extra={[]}
       menu={menu}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -120,6 +131,7 @@ export const WithRefs: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -137,6 +149,7 @@ export const LoadingWithRefs: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
       refs={refs}
@@ -153,6 +166,7 @@ export const LoadingWithRefError: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
       refs={refsError}
@@ -185,6 +199,7 @@ export const StatusesCollapsed: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -234,6 +249,7 @@ export const Bottom: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}

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

@@ -4,7 +4,11 @@ import { styled } from '@storybook/theming';
 import { ScrollArea, Spaced } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 
-import type { Addon_SidebarBottomType, API_LoadedRefData } from '@storybook/types';
+import type {
+  Addon_SidebarBottomType,
+  Addon_SidebarTopType,
+  API_LoadedRefData,
+} from '@storybook/types';
 import { Heading } from './Heading';
 
 // eslint-disable-next-line import/no-cycle
@@ -97,6 +101,7 @@ export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
   menu: any[];
+  extra: Addon_SidebarTopType[];
   bottom?: Addon_SidebarBottomType[];
   storyId?: string;
   refId?: string;
@@ -112,6 +117,7 @@ export const Sidebar = React.memo(function Sidebar({
   status,
   previewInitialized,
   menu,
+  extra,
   bottom = [],
   menuHighlighted = false,
   enableShortcuts = true,
@@ -130,7 +136,9 @@ export const Sidebar = React.memo(function Sidebar({
             className="sidebar-header"
             menuHighlighted={menuHighlighted}
             menu={menu}
+            extra={extra}
             skipLinkHref="#storybook-preview-wrapper"
+            isLoading={isLoading}
           />
 
           <Search