message: Improve Sidebar Storybook
diff: * limitations under the License.
  */
  +// We don't want to export RoutingProvider from core-app-api, but it's way easier to
  +// use here. This hack only works in storybook stories.
  +// TODO: Export a nicer to user routing provider, perhaps from test-utils
  +// eslint-disable-next-line monorepo/no-internal-import
  +import { RoutingProvider } from '@backstage/core-app-api/src/routing/RoutingProvider';
  +import { createRouteRef } from '@backstage/core-plugin-api';
  import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
  +import ExtensionIcon from '@material-ui/icons/Extension';
  import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
  import MenuIcon from '@material-ui/icons/Menu';
  -import React from 'react';
  -import { MemoryRouter } from 'react-router-dom';
  +import React, { ComponentType } from 'react';
  +import { MemoryRouter, useLocation } from 'react-router-dom';
  import {
  Sidebar,
  SidebarDivider,
  @@ -28,28 +35,50 @@ import {
  SidebarSearchField,
  SidebarSpace,
  } from '.';
  +import { SidebarPage } from './Page';
  +
  +const routeRef = createRouteRef({
  + id: 'storybook.test-route',
  +});
  +
  +const Location = () => {
  + const location = useLocation();
  + return <pre>Current location: {location.pathname}</pre>;
  +};
  export default {
  title: 'Layout/Sidebar',
  component: Sidebar,
  decorators: [
  - (storyFn: () => JSX.Element) => (
  - <MemoryRouter initialEntries={['/']}>{storyFn()}</MemoryRouter>
  + (Story: ComponentType<{}>) => (
  + <MemoryRouter>
  + <RoutingProvider
  + routeBindings={new Map()}
  + routeObjects={[]}
  + routeParents={new Map()}
  + routePaths={new Map([[routeRef, '/']])}
  + >
  + <Story />
  + </RoutingProvider>
  + </MemoryRouter>
  ),
  ],
  };
  export const SampleSidebar = () => (
  + <SidebarPage>
  <Sidebar>
  <SidebarGroup label="Menu" icon={MenuIcon}>
  - <SidebarSearchField onSearch={() => {}} to="/search" />
  + <SidebarSearchField onSearch={() => {}} />
  <SidebarDivider />
  - <SidebarItem icon={HomeOutlinedIcon} to="#" text="Home" />
  - <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
  - <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
  + <SidebarItem icon={HomeOutlinedIcon} to="/" text="Home" />
  + <SidebarItem icon={ExtensionIcon} to="/one" text="Plugins" />
  + <SidebarItem icon={AddCircleOutlineIcon} to="/two" text="Create..." />
  <SidebarDivider />
  <SidebarIntro />
  <SidebarSpace />
  </SidebarGroup>
  </Sidebar>
  + <Location />
  + </SidebarPage>
  );
  