Merge pull request #2141 from flanksource/fix-failing-stories

tests: fix failing storybook tests

.storybook/preview.tsx

@@ -33,7 +33,7 @@ const preview: Preview = {
     // 👇 Defining the decorator in the preview file applies it to all stories
     (Story, { parameters }) => {
       return (
-        <MemoryRouter>
+        <MemoryRouter initialEntries={["/incidents"]}>
           <QueryClientProvider client={queryClient}>
             <Story />
           </QueryClientProvider>

src/components/Canary/Canary.stories.tsx

@@ -1,23 +1,11 @@
-import { MemoryRouter } from "react-router-dom";
-import { Canary } from "./index";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
-const queryClient = new QueryClient();
+import { Canary } from "./index";
 
 export default {
   title: "Canary",
   component: Canary,
   argTypes: {},
-  decorators: [
-    (Story) => (
-      <QueryClientProvider client={queryClient}>
-        <MemoryRouter>
-          <Story />
-        </MemoryRouter>
-      </QueryClientProvider>
-    )
-  ]
+  decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Canary>;
 
 const Template: ComponentStory<typeof Canary> = (arg) => <Canary {...arg} />;

src/components/Canary/HealthSummary.stories.tsx

@@ -1,17 +1,10 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { MemoryRouter } from "react-router-dom";
 import { HealthSummary } from "./HealthSummary";
 
 export default {
   title: "HealthSummary",
   component: HealthSummary,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    )
-  ]
+  decorators: [(Story) => <Story />]
 } as Meta<typeof HealthSummary>;
 
 const component = {

src/components/Configs/Changes/ConfigChangeTable.stories.tsx

@@ -1,6 +1,4 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { MemoryRouter } from "react-router-dom";
 import { ConfigChange } from "../../../api/types/configs";
 import { ConfigChangeTable } from "./ConfigChangeTable";
 
@@ -9,14 +7,7 @@ export default {
   component: ConfigChangeTable,
   decorators: [
     (Story) => {
-      const queryClient = new QueryClient();
-      return (
-        <MemoryRouter>
-          <QueryClientProvider client={queryClient}>
-            <Story />
-          </QueryClientProvider>
-        </MemoryRouter>
-      );
+      return <Story />;
     }
   ]
 } satisfies Meta<typeof ConfigChangeTable>;

src/components/Configs/ConfigList/ConfigList.stories.tsx

@@ -1,18 +1,11 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { MemoryRouter } from "react-router-dom";
 import sampleConfigList from "../../../data/sampleConfigList";
 import ConfigsTable from "./ConfigsTable";
 
 export default {
   title: "ConfigList",
   component: ConfigsTable,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    )
-  ]
+  decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof ConfigsTable>;
 
 const Template: ComponentStory<typeof ConfigsTable> = (args) => (

src/components/Configs/QueryBuilder/QueryBuilder.stories.tsx

@@ -1,17 +1,10 @@
-import { MemoryRouter } from "react-router-dom";
-import { QueryBuilder } from "./index";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { QueryBuilder } from "./index";
 
 export default {
   title: "QueryBuilder",
   component: QueryBuilder,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    )
-  ]
+  decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof QueryBuilder>;
 
 const Template: ComponentStory<typeof QueryBuilder> = (arg) => (

src/components/Forms/SpecEditorForm.stories.tsx

@@ -1,27 +1,19 @@
 import { Story } from "@storybook/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ComponentProps } from "react";
-import { MemoryRouter } from "react-router-dom";
 import { schemaResourceTypes } from "../SchemaResourcePage/resourceTypes";
 import AWSConfigsFormEditor from "./Configs/AWSConfigsFormEditor";
 import KubernetesConfigsFormEditor from "./Configs/KubernetesConfigsFormEditor";
 import { HTTPHealthFormEditor } from "./Health/HTTPHealthFormEditor";
 import SpecEditorForm from "./SpecEditorForm";
 
-const defaultQueryClient = new QueryClient();
-
 export default {
   title: "SpecEditorForm",
   component: SpecEditorForm,
   decorators: [
     (Story: React.FC) => (
-      <MemoryRouter>
-        <QueryClientProvider client={defaultQueryClient}>
-          <div className="h-screen w-screen overflow-y-auto p-4">
-            <Story />
-          </div>
-        </QueryClientProvider>
-      </MemoryRouter>
+      <div className="h-screen w-screen overflow-y-auto p-4">
+        <Story />
+      </div>
     )
   ]
 };

src/components/Incidents/Hypothesis/EvidenceSection/EvidenceSection.stories.tsx

@@ -1,25 +1,13 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { MemoryRouter } from "react-router-dom";
 import { EvidenceType } from "../../../../api/types/evidence";
 import { sampleIncidentNode } from "../../../../data/sampleIncident";
 import { EvidenceSection } from "./index";
 
-const client = new QueryClient();
-
 export default {
   title: "EvidenceSection",
   component: EvidenceSection,
   parameters: { actions: { argTypesRegex: "^on.*" } },
-  decorators: [
-    (Story) => (
-      <QueryClientProvider client={client}>
-        <MemoryRouter>
-          <Story />
-        </MemoryRouter>
-      </QueryClientProvider>
-    )
-  ]
+  decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof EvidenceSection>;
 
 const Template: ComponentStory<typeof EvidenceSection> = (arg: any) => (

src/components/Incidents/Hypothesis/HypothesisDetails/HypothesisDetails.stories.tsx

@@ -1,23 +1,11 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { MemoryRouter } from "react-router-dom";
 import { sampleIncidentNode } from "../../../../data/sampleIncident";
 import { HypothesisDetails } from "./index";
 
-const defaultQueryClient = new QueryClient();
-
 export default {
   title: "HypothesisDetails",
   component: HypothesisDetails,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <QueryClientProvider client={defaultQueryClient}>
-          <Story />
-        </QueryClientProvider>
-      </MemoryRouter>
-    )
-  ],
+  decorators: [(Story) => <Story />],
   parameters: { actions: { argTypesRegex: "^on.*" } }
 } as ComponentMeta<typeof HypothesisDetails>;
 

src/components/Incidents/Hypothesis/HypothesisNode/HypothesisNode.stories.tsx

@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { MemoryRouter } from "react-router-dom";
 import { sampleIncidentNode } from "../../../../data/sampleIncident";
 import { HypothesisNode } from "./index";
 
@@ -10,13 +9,7 @@ export default {
   title: "HypothesisNode",
   component: HypothesisNode,
   parameters: { actions: { argTypesRegex: "^on.*" } },
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    )
-  ]
+  decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof HypothesisNode>;
 
 const Template: ComponentStory<typeof HypothesisNode> = (arg: any) => (

src/components/Incidents/IncidentDetails/IncidentDetails.stories.tsx

@@ -1,6 +1,4 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { MemoryRouter } from "react-router-dom";
 import { IncidentSeverity, IncidentStatus } from "../../../api/types/incident";
 import { IncidentSidebar } from "./IncidentSidebar";
 
@@ -9,14 +7,7 @@ export default {
   component: IncidentSidebar,
   decorators: [
     (Story) => {
-      const queryClient = new QueryClient();
-      return (
-        <MemoryRouter>
-          <QueryClientProvider client={queryClient}>
-            <Story />
-          </QueryClientProvider>
-        </MemoryRouter>
-      );
+      return <Story />;
     }
   ],
   parameters: { actions: { argTypesRegex: "^on.*" } }

src/components/Incidents/IncidentList/incidenttList.stories.tsx

@@ -1,12 +1,11 @@
-import React from "react";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { ComponentStory } from "@storybook/react";
+import { Route, Routes } from "react-router-dom";
 import {
   IncidentSeverity,
   IncidentStatus,
   IncidentSummary
 } from "../../../api/types/incident";
 import { IncidentList } from "./index";
-import { ComponentStory } from "@storybook/react";
 
 export default {
   title: "IncidentList",
@@ -92,11 +91,9 @@ const incidents: IncidentSummary[] = [
 ];
 
 const Template: ComponentStory<typeof IncidentList> = (arg) => (
-  <MemoryRouter initialEntries={["/incidents"]}>
-    <Routes>
-      <Route element={<IncidentList {...arg} />} path="/incidents" />
-    </Routes>
-  </MemoryRouter>
+  <Routes>
+    <Route element={<IncidentList {...arg} />} path="/incidents" />
+  </Routes>
 );
 
 export const Variant1 = Template.bind({});

src/components/Logs/LogsViewer.stories.tsx

@@ -1,22 +1,10 @@
-import { MemoryRouter } from "react-router-dom";
-import { LogsViewer } from "./index";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
-const client = new QueryClient();
+import { LogsViewer } from "./index";
 
 export default {
   title: "LogsViewer",
   component: LogsViewer,
-  decorators: [
-    (Story) => (
-      <QueryClientProvider client={client}>
-        <MemoryRouter>
-          <Story />
-        </MemoryRouter>
-      </QueryClientProvider>
-    )
-  ]
+  decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof LogsViewer>;
 
 const logsExample = [

src/components/RefreshDropdown/RefreshDropdown.stories.tsx

@@ -1,16 +1,9 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import RefreshDropdown from "./index";
-import { MemoryRouter } from "react-router-dom";
 export default {
   title: "RefreshDropdown",
   component: RefreshDropdown,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    )
-  ],
+  decorators: [(Story) => <Story />],
   args: {
     // eslint-disable-next-line no-alert
     onClick: () => alert("hello!"),

src/components/SchemaResourcePage/SchemaResource.stories.tsx

@@ -1,29 +1,11 @@
-import { MemoryRouter } from "react-router-dom";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { SchemaResource } from "./SchemaResource";
-import {
-  QueryClientProvider,
-  QueryClient,
-  QueryCache
-} from "@tanstack/react-query";
 import { schemaResourceTypes } from "./resourceTypes";
-
-const queryClient = new QueryClient({
-  queryCache: new QueryCache()
-});
+import { SchemaResource } from "./SchemaResource";
 
 export default {
   title: "SchemaResource",
   component: SchemaResource,
-  decorators: [
-    (Story) => (
-      <MemoryRouter>
-        <QueryClientProvider client={queryClient}>
-          <Story />
-        </QueryClientProvider>
-      </MemoryRouter>
-    )
-  ],
+  decorators: [(Story) => <Story />],
   parameters: { actions: { argTypesRegex: "^on.*" } }
 } as ComponentMeta<typeof SchemaResource>;
 

src/components/SchemaResourcePage/SchemaResourceEdit.stories.tsx

@@ -1,24 +1,15 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { QueryClient } from "@tanstack/query-core";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { MemoryRouter } from "react-router-dom";
 import { SchemaResourceEdit } from "./SchemaResourceEdit";
 import { schemaResourceTypes } from "./resourceTypes";
 
-const queryClient = new QueryClient();
-
 export default {
   title: "SchemaResourceEdit",
   component: SchemaResourceEdit,
   parameters: { actions: { argTypesRegex: "^on.*" } }
 } as Meta<typeof SchemaResourceEdit>;
 
 const Template: StoryFn<typeof SchemaResourceEdit> = (arg: any) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter>
-      <SchemaResourceEdit {...arg} />
-    </MemoryRouter>
-  </QueryClientProvider>
+  <SchemaResourceEdit {...arg} />
 );
 
 export const Base = Template.bind({});