Improve Sidebar Storybook

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx

@@ -14,11 +14,18 @@
  * 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 = () => (
-  <Sidebar>
-    <SidebarGroup label="Menu" icon={MenuIcon}>
-      <SidebarSearchField onSearch={() => {}} to="/search" />
-      <SidebarDivider />
-      <SidebarItem icon={HomeOutlinedIcon} to="#" text="Home" />
-      <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
-      <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
-      <SidebarDivider />
-      <SidebarIntro />
-      <SidebarSpace />
-    </SidebarGroup>
-  </Sidebar>
+  <SidebarPage>
+    <Sidebar>
+      <SidebarGroup label="Menu" icon={MenuIcon}>
+        <SidebarSearchField onSearch={() => {}} />
+        <SidebarDivider />
+        <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>
 );