core-components: remove ugly workaround for routing context bug in stories

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-components/src/components/Button/Button.stories.tsx

@@ -15,7 +15,7 @@
  */
 import React, { ComponentType } from 'react';
 import { Button } from './Button';
-import { MemoryRouter, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
 import {
   Divider,
@@ -26,11 +26,7 @@ import {
   Typography,
   Button as MaterialButton,
 } from '@material-ui/core';
-// 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 { wrapInTestApp } from '@backstage/test-utils';
 
 const routeRef = createRouteRef({
   id: 'storybook.test-route',
@@ -45,36 +41,29 @@ export default {
   title: 'Inputs/Button',
   component: Button,
   decorators: [
-    (Story: ComponentType<{}>) => (
-      <>
-        <Typography>
-          A collection of buttons that should be used in the Backstage
-          interface. These leverage the properties inherited from{' '}
-          <Link href="https://material-ui.com/components/buttons/">
-            Material-UI Button
-          </Link>
-          , but include an opinionated set that align to the Backstage design.
-        </Typography>
+    (Story: ComponentType<{}>) =>
+      wrapInTestApp(
+        <>
+          <Typography>
+            A collection of buttons that should be used in the Backstage
+            interface. These leverage the properties inherited from{' '}
+            <Link href="https://material-ui.com/components/buttons/">
+              Material-UI Button
+            </Link>
+            , but include an opinionated set that align to the Backstage design.
+          </Typography>
 
-        <Divider />
+          <Divider />
 
-        <MemoryRouter>
-          <RoutingProvider
-            routeBindings={new Map()}
-            routeObjects={[]}
-            routeParents={new Map()}
-            routePaths={new Map([[routeRef, '/hello']])}
-          >
+          <div>
             <div>
-              <div>
-                <Location />
-              </div>
-              <Story />
+              <Location />
             </div>
-          </RoutingProvider>
-        </MemoryRouter>
-      </>
-    ),
+            <Story />
+          </div>
+        </>,
+        { mountedRoutes: { '/hello': routeRef } },
+      ),
   ],
 };
 

packages/core-components/src/components/Link/Link.stories.tsx

@@ -15,17 +15,9 @@
  */
 import React, { ComponentType } from 'react';
 import { Link } from './Link';
-import {
-  MemoryRouter,
-  Route,
-  useLocation,
-  NavLink as RouterNavLink,
-} from 'react-router-dom';
+import { Route, useLocation, NavLink as RouterNavLink } from 'react-router-dom';
 import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
-// 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.
-// eslint-disable-next-line monorepo/no-internal-import
-import { RoutingProvider } from '@backstage/core-app-api/src/routing/RoutingProvider';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 const routeRef = createRouteRef({
   id: 'storybook.test-route',
@@ -40,23 +32,16 @@ export default {
   title: 'Navigation/Link',
   component: Link,
   decorators: [
-    (Story: ComponentType<{}>) => (
-      <MemoryRouter>
-        <RoutingProvider
-          routeBindings={new Map()}
-          routeObjects={[]}
-          routeParents={new Map()}
-          routePaths={new Map([[routeRef, '/hello']])}
-        >
+    (Story: ComponentType<{}>) =>
+      wrapInTestApp(
+        <div>
           <div>
-            <div>
-              <Location />
-            </div>
-            <Story />
+            <Location />
           </div>
-        </RoutingProvider>
-      </MemoryRouter>
-    ),
+          <Story />
+        </div>,
+        { mountedRoutes: { '/hello': routeRef } },
+      ),
   ],
 };