storybook: fix broken stories that lack a router parent (#3273)

packages/core/src/components/ProgressBars/GaugeCard.stories.tsx

@@ -14,19 +14,28 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { GaugeCard } from './GaugeCard';
 import { Grid } from '@material-ui/core';
+import { MemoryRouter } from 'react-router';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
+const Wrapper = ({ children }: PropsWithChildren<{}>) => (
+  <MemoryRouter>
+    <Grid container spacing={2}>
+      {children}
+    </Grid>
+  </MemoryRouter>
+);
+
 export default {
   title: 'Data Display/Progress Card',
   component: GaugeCard,
 };
 
 export const Default = () => (
-  <Grid container spacing={2}>
+  <Wrapper>
     <Grid item>
       <GaugeCard title="Progress" progress={0.3} />
     </Grid>
@@ -36,11 +45,11 @@ export const Default = () => (
     <Grid item>
       <GaugeCard title="Progress" progress={0.89} />
     </Grid>
-  </Grid>
+  </Wrapper>
 );
 
 export const Subhead = () => (
-  <Grid container spacing={2}>
+  <Wrapper>
     <Grid item>
       <GaugeCard title="Progress" subheader="With a subheader" progress={0.3} />
     </Grid>
@@ -58,11 +67,11 @@ export const Subhead = () => (
         progress={0.89}
       />
     </Grid>
-  </Grid>
+  </Wrapper>
 );
 
 export const LinkInFooter = () => (
-  <Grid container spacing={2}>
+  <Wrapper>
     <Grid item>
       <GaugeCard title="Progress" deepLink={linkInfo} progress={0.3} />
     </Grid>
@@ -72,5 +81,5 @@ export const LinkInFooter = () => (
     <Grid item>
       <GaugeCard title="Progress" deepLink={linkInfo} progress={0.89} />
     </Grid>
-  </Grid>
+  </Wrapper>
 );

packages/core/src/layout/InfoCard/InfoCard.stories.tsx

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC } from 'react';
-import { InfoCard } from '.';
 import { Grid, Typography } from '@material-ui/core';
+import React, { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router';
+import { InfoCard } from '.';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
@@ -35,12 +36,14 @@ const text = (
   </Typography>
 );
 
-const Wrapper: FC<{}> = ({ children }) => (
-  <Grid container spacing={4}>
-    <Grid item xs={4}>
-      {children}
+const Wrapper = ({ children }: PropsWithChildren<{}>) => (
+  <MemoryRouter>
+    <Grid container spacing={4}>
+      <Grid item xs={4}>
+        {children}
+      </Grid>
     </Grid>
-  </Grid>
+  </MemoryRouter>
 );
 
 export const Default = () => (

packages/core/src/layout/Page/Page.stories.tsx

@@ -14,25 +14,26 @@
  * limitations under the License.
  */
 
+import { Box, Chip, Grid, Link, Typography } from '@material-ui/core';
 import React, { useState } from 'react';
+import { MemoryRouter } from 'react-router';
 import {
-  Header,
-  Page,
-  HeaderLabel,
-  ContentHeader,
   Content,
-  InfoCard,
+  ContentHeader,
+  Header,
+  HeaderLabel,
   HeaderTabs,
+  InfoCard,
+  Page,
 } from '../';
 import {
+  GaugeCard,
+  StatusOK,
   SupportButton,
   Table,
-  StatusOK,
   TableColumn,
-  GaugeCard,
   TrendLine,
 } from '../../components';
-import { Box, Typography, Link, Chip, Grid } from '@material-ui/core';
 
 export default {
   title: 'Plugins/Examples',
@@ -194,23 +195,25 @@ const ExampleContentHeader = ({ selectedTab }: { selectedTab?: number }) => (
 export const PluginWithData = () => {
   const [selectedTab, setSelectedTab] = useState<number>(2);
   return (
-    <div style={{ border: '1px solid #ddd' }}>
-      <Page themeId="tool">
-        <ExampleHeader />
-        <HeaderTabs
-          selectedIndex={selectedTab}
-          onChange={index => setSelectedTab(index)}
-          tabs={tabs.map(({ label }, index) => ({
-            id: index.toString(),
-            label,
-          }))}
-        />
-        <Content>
-          <ExampleContentHeader selectedTab={selectedTab} />
-          <DataGrid />
-        </Content>
-      </Page>
-    </div>
+    <MemoryRouter>
+      <div style={{ border: '1px solid #ddd' }}>
+        <Page themeId="tool">
+          <ExampleHeader />
+          <HeaderTabs
+            selectedIndex={selectedTab}
+            onChange={index => setSelectedTab(index)}
+            tabs={tabs.map(({ label }, index) => ({
+              id: index.toString(),
+              label,
+            }))}
+          />
+          <Content>
+            <ExampleContentHeader selectedTab={selectedTab} />
+            <DataGrid />
+          </Content>
+        </Page>
+      </div>
+    </MemoryRouter>
   );
 };
 

packages/core/src/layout/TabbedCard/TabbedCard.stories.tsx

@@ -13,12 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
+import React, { useState, PropsWithChildren } from 'react';
 import { TabbedCard, CardTab } from '.';
 import { Grid } from '@material-ui/core';
+import { MemoryRouter } from 'react-router';
 
 const cardContentStyle = { height: 200, width: 500 };
 
+const Wrapper = ({ children }: PropsWithChildren<{}>) => (
+  <MemoryRouter>{children}</MemoryRouter>
+);
+
 export default {
   title: 'Layout/Tabbed Card',
   component: TabbedCard,
@@ -33,20 +38,22 @@ export default {
 
 export const Default = () => {
   return (
-    <TabbedCard title="Default Example Header">
-      <CardTab label="Option 1">
-        <div style={cardContentStyle}>Some content</div>
-      </CardTab>
-      <CardTab label="Option 2">
-        <div style={cardContentStyle}>Some content 2</div>
-      </CardTab>
-      <CardTab label="Option 3">
-        <div style={cardContentStyle}>Some content 3</div>
-      </CardTab>
-      <CardTab label="Option 4">
-        <div style={cardContentStyle}>Some content 4</div>
-      </CardTab>
-    </TabbedCard>
+    <Wrapper>
+      <TabbedCard title="Default Example Header">
+        <CardTab label="Option 1">
+          <div style={cardContentStyle}>Some content</div>
+        </CardTab>
+        <CardTab label="Option 2">
+          <div style={cardContentStyle}>Some content 2</div>
+        </CardTab>
+        <CardTab label="Option 3">
+          <div style={cardContentStyle}>Some content 3</div>
+        </CardTab>
+        <CardTab label="Option 4">
+          <div style={cardContentStyle}>Some content 4</div>
+        </CardTab>
+      </TabbedCard>
+    </Wrapper>
   );
 };
 
@@ -54,20 +61,22 @@ const linkInfo = { title: 'Go to XYZ Location', link: '#' };
 
 export const WithFooterLink = () => {
   return (
-    <TabbedCard title="Footer Link Example Header" deepLink={linkInfo}>
-      <CardTab label="Option 1">
-        <div style={cardContentStyle}>Some content</div>
-      </CardTab>
-      <CardTab label="Option 2">
-        <div style={cardContentStyle}>Some content 2</div>
-      </CardTab>
-      <CardTab label="Option 3">
-        <div style={cardContentStyle}>Some content 3</div>
-      </CardTab>
-      <CardTab label="Option 4">
-        <div style={cardContentStyle}>Some content 4</div>
-      </CardTab>
-    </TabbedCard>
+    <Wrapper>
+      <TabbedCard title="Footer Link Example Header" deepLink={linkInfo}>
+        <CardTab label="Option 1">
+          <div style={cardContentStyle}>Some content</div>
+        </CardTab>
+        <CardTab label="Option 2">
+          <div style={cardContentStyle}>Some content 2</div>
+        </CardTab>
+        <CardTab label="Option 3">
+          <div style={cardContentStyle}>Some content 3</div>
+        </CardTab>
+        <CardTab label="Option 4">
+          <div style={cardContentStyle}>Some content 4</div>
+        </CardTab>
+      </TabbedCard>
+    </Wrapper>
   );
 };
 
@@ -78,7 +87,7 @@ export const WithControlledTabValue = () => {
     setSelectedTab(newSelectedTab);
 
   return (
-    <>
+    <Wrapper>
       <span>Selected tab is {selectedTab}</span>
 
       <TabbedCard
@@ -99,6 +108,6 @@ export const WithControlledTabValue = () => {
           <div style={cardContentStyle}>Some content 4</div>
         </CardTab>
       </TabbedCard>
-    </>
+    </Wrapper>
   );
 };