Add typing /stories

src/stories/components/common/IOC/IOCLiveStatus.stories.tsx

+import { Meta } from "@storybook/react";
 import { IOCLiveStatus } from "../../../../components/IOC/IOCLiveStatus";
 import { AppHarness } from "../../../../mocks/AppHarness";
 import { userImpersonatorArgs } from "../../../utils/common-args";
 import iocs from "../../../../mocks/fixtures/PagedIOCResponse.json";
+import { IocDetails } from "../../../../store/deployApi";
+import { User } from "../../../../types/common";
 
 export default {
   title: "IOC/IOCLiveStatus"
-};
+} as Meta<typeof IOCLiveStatus>;
+
+interface Args {
+  ioc: IocDetails;
+  isLoggedIn: boolean;
+  user?: User;
+  userRoles?: string[];
+}
 
-const Template = (args) => {
+const Template = (args: Args) => {
   return (
     <AppHarness
       useTestUser={args.isLoggedIn}
@@ -18,13 +28,13 @@ const Template = (args) => {
   );
 };
 
-export const Default = (args) => <Template {...args} />;
+export const Default = (args: Args) => <Template {...args} />;
 Default.args = {
   ioc: iocs.iocList.find((ioc) => ioc.id === 15),
   isLoggedIn: false
 };
 
-export const LoggedIn = (args) => <Template {...args} />;
+export const LoggedIn = (args: Args) => <Template {...args} />;
 LoggedIn.args = {
   ...userImpersonatorArgs,
   ...Default.args,

src/stories/components/common/host/HostTable.stories.tsx

+import { Meta, StoryFn } from "@storybook/react";
 import { Container } from "@mui/material";
-import { http } from "msw";
+import { http, delay } from "msw";
 import hosts from "../../../../mocks/fixtures/Hosts.json";
 import { HostTable } from "../../../../components/host/HostTable";
 import { RouterHarness } from "../../../../mocks/AppHarness";
@@ -19,9 +20,11 @@ export default {
     setLazyParams: hideStorybookControls,
     setColumnSort: hideStorybookControls
   }
-};
+} as Meta<typeof HostTable>;
+
+type HostTableStory = StoryFn<typeof HostTable>;
 
-const Template = (args) => (
+const Template: HostTableStory = (args) => (
   <RouterHarness>
     <Container>
       <HostTable {...args} />
@@ -29,27 +32,21 @@ const Template = (args) => (
   </RouterHarness>
 );
 
-export const Empty = (args) => <Template {...args} />;
+export const Empty: HostTableStory = (args) => <Template {...args} />;
 
 Empty.args = {
   loading: false,
-  hosts: [],
-  totalCount: 0,
-  rowsPerPage: [5, 10, 20, 50, 100],
-  lazyParams: { rows: 10, page: 0 },
-  columnSort: { sortField: null, sortOrder: null },
-  setLazyParams: () => {},
-  setColumnSort: () => {}
+  hosts: []
 };
 
-export const EmptyLoading = (args) => <Template {...args} />;
+export const EmptyLoading: HostTableStory = (args) => <Template {...args} />;
 
 EmptyLoading.args = {
   ...Empty.args,
   loading: true
 };
 
-export const BeforeAsync = (args) => <Template {...args} />;
+export const BeforeAsync: HostTableStory = (args) => <Template {...args} />;
 
 BeforeAsync.args = {
   ...Empty.args,
@@ -62,18 +59,13 @@ BeforeAsync.argTypes = {
 BeforeAsync.parameters = {
   msw: {
     handlers: [
-      http.get("*/hosts/*", (req, res, ctx) => res(ctx.delay("infinite"))),
-      http.get("*/hosts/:host_id/status", (req, res, ctx) => {
-        const { host_id } = req.params; // eslint-disable-line
-        res(ctx.delay("infinite"));
-      }),
-      http.get("*/hosts/:host_id/alerts", (req, res, ctx) => {
-        res(ctx.delay("infinite"));
-      })
+      http.get("*/hosts/*", async () => await delay("infinite")),
+      http.get("*/hosts/:host_id/status", async () => await delay("infinite")),
+      http.get("*/hosts/:host_id/alerts", async () => delay("infinite"))
     ]
   }
 };
 
-export const AfterAsync = (args) => <Template {...args} />;
+export const AfterAsync: HostTableStory = (args) => <Template {...args} />;
 AfterAsync.args = { ...BeforeAsync.args };
 AfterAsync.argTypes = { ...BeforeAsync.argTypes };

src/stories/components/common/job/JobTable.stories.tsx

 import { Box } from "@mui/material";
 import { RouterHarness } from "../../../../mocks/AppHarness";
 import { JobTable } from "../../../../components/Job/JobTable";
+import { type BaseJob } from "../../../../store/deployApi";
+import operationList from "../../../../mocks/fixtures/Jobs.json";
 import {
   hideStorybookControls,
   paginationNoResults
 } from "../../../utils/common-args";
-import operationList from "../../../../mocks/fixtures/Jobs.json";
+import type { Meta, StoryFn } from "@storybook/react";
 
 export default {
   title: "Jobs/JobTable",
@@ -18,9 +20,11 @@ export default {
     pagination: hideStorybookControls,
     onPage: hideStorybookControls
   }
-};
+} as Meta<typeof JobTable>;
+
+type JobTableStory = StoryFn<typeof JobTable>;
 
-const Template = (args) => (
+const Template: JobTableStory = (args) => (
   <RouterHarness>
     <Box height="90vh">
       <JobTable {...args} />
@@ -28,28 +32,27 @@ const Template = (args) => (
   </RouterHarness>
 );
 
-export const Empty = (args) => <Template {...args} />;
+export const Empty: JobTableStory = (args) => <Template {...args} />;
 
 Empty.args = {
-  rowType: "jobLog",
   loading: false,
   jobs: [],
   pagination: paginationNoResults,
   onPage: () => {}
 };
 
-export const EmptyLoading = (args) => <Template {...args} />;
+export const EmptyLoading: JobTableStory = (args) => <Template {...args} />;
 
 EmptyLoading.args = {
   ...Empty.args,
   loading: true
 };
 
-export const Populated = (args) => <Template {...args} />;
+export const Populated: JobTableStory = (args) => <Template {...args} />;
 
 Populated.args = {
   ...Empty.args,
-  jobs: operationList.jobs,
+  jobs: operationList?.jobs as BaseJob[],
   pagination: { ...paginationNoResults, totalCount: operationList.totalCount }
 };
 

src/stories/views/Host/HostDetailsView.stories.tsx

 import { AppHarness } from "../../../mocks/AppHarness";
+import { User } from "../../../types/common";
 import { HostDetailsContainer } from "../../../views/host/details/HostDetailsContainer";
 import { userImpersonatorArgs } from "../../utils/common-args";
 
@@ -6,42 +7,41 @@ export default {
   title: "Views/Host/HostDetailsView"
 };
 
-const Template = (args) => (
+interface Args {
+  user: User;
+  userRoles: string[];
+  hostId: string;
+}
+
+const Template = (args: Args) => (
   <AppHarness
     useTestUser
     {...args}
   >
-    <HostDetailsContainer
-      hostId={args.hostId}
-      hostFqdn={args.hostFqdn}
-    />
+    <HostDetailsContainer hostId={args.hostId} />
   </AppHarness>
 );
 
-export const Active = (args) => <Template {...args} />;
+export const Active = (args: Args) => <Template {...args} />;
 Active.args = {
   ...userImpersonatorArgs,
-  hostId: "MjE5MV9mYWxzZQ",
-  hostFqdn: "mebt-vm-ioc01.tn.esss.lu.se"
+  hostId: "MjE5MV9mYWxzZQ"
 };
 
-export const InActive = (args) => <Template {...args} />;
+export const InActive = (args: Args) => <Template {...args} />;
 InActive.args = {
   ...userImpersonatorArgs,
-  hostId: "MjEwOF9mYWxzZQ",
-  hostFqdn: "mebt-vm-ioc02.tn.esss.lu.se"
+  hostId: "MjEwOF9mYWxzZQ"
 };
 
-export const ActiveWithError = (args) => <Template {...args} />;
+export const ActiveWithError = (args: Args) => <Template {...args} />;
 ActiveWithError.args = {
   ...userImpersonatorArgs,
-  hostId: "NDkzN190cnVl",
-  hostFqdn: "mebt-ifc1410-03.tn.esss.lu.se"
+  hostId: "NDkzN190cnVl"
 };
 
-export const InActiveWithError = (args) => <Template {...args} />;
+export const InActiveWithError = (args: Args) => <Template {...args} />;
 InActiveWithError.args = {
   ...userImpersonatorArgs,
-  hostId: "NTU4MF90cnVl",
-  hostFqdn: "mebt-llrf3-mtca-ioc.tn.esss.lu.se"
+  hostId: "NTU4MF90cnVl"
 };

src/stories/views/IOC/CreateIocView.stories.tsx

-import { http } from "msw";
+import { http, delay, HttpResponse } from "msw";
 import { AppHarness } from "../../../mocks/AppHarness";
 import { CreateIOCView } from "../../../views/IOC/CreateIOCView";
 import { handlers } from "../../../mocks/handlers";
 import { userImpersonatorArgs } from "../../utils/common-args";
 import general_exception from "../../../mocks/fixtures/GeneralException.json";
+import { User } from "../../../types/common";
 
 export default {
   title: "Views/IOC/CreateIOCView"
 };
 
-const Template = (args) => (
+interface Args {
+  user: User;
+  userRoles: string[];
+}
+
+const Template = (args: Args) => (
   <AppHarness
     useTestUser
     {...args}
@@ -18,33 +24,33 @@ const Template = (args) => (
   </AppHarness>
 );
 
-export const Default = (args) => <Template {...args} />;
+export const Default = (args: Args) => <Template {...args} />;
 Default.args = {
   ...userImpersonatorArgs
 };
 
-export const CreateLoading = (args) => <Template {...args} />;
+export const CreateLoading = (args: Args) => <Template {...args} />;
 CreateLoading.args = {
   ...Default.args
 };
 CreateLoading.parameters = {
   msw: {
     handlers: [
-      http.post("*/iocs", (req, res, ctx) => res(ctx.delay("infinite"))),
+      http.post("*/iocs", async () => await delay("infinite")),
       ...handlers
     ]
   }
 };
 
-export const CreateWithError = (args) => <Template {...args} />;
+export const CreateWithError = (args: Args) => <Template {...args} />;
 CreateWithError.args = {
   ...Default.args
 };
 CreateWithError.parameters = {
   msw: {
     handlers: [
-      http.post("*/iocs", (req, res, ctx) =>
-        res(ctx.status(400), ctx.json(general_exception))
+      http.post("*/iocs", () =>
+        HttpResponse.json({ message: general_exception }, { status: 400 })
       ),
       ...handlers
     ]

src/stories/views/IOC/IocDetailsView.stories.tsx

@@ -6,7 +6,11 @@ export default {
   title: "Views/IOC/IOCDetailsView"
 };
 
-const Template = (args) => (
+interface Args {
+  id: string;
+}
+
+const Template = (args: Args) => (
   <AppHarness
     useTestUser
     {...args}
@@ -20,20 +24,20 @@ const config = {
   ...userImpersonatorArgs
 };
 
-export const NotDeployed = (args) => <Template {...args} />;
+export const NotDeployed = (args: Args) => <Template {...args} />;
 NotDeployed.args = {
   ...config,
-  id: 18
+  id: "18"
 };
 
-export const Deployed = (args) => <Template {...args} />;
+export const Deployed = (args: Args) => <Template {...args} />;
 Deployed.args = {
   ...config,
-  id: 14
+  id: "14"
 };
 
-export const DeployedErrors = (args) => <Template {...args} />;
+export const DeployedErrors = (args: Args) => <Template {...args} />;
 DeployedErrors.args = {
   ...config,
-  id: 39
+  id: "39"
 };

src/stories/views/IOC/IocListView.stories.tsx

-import { http } from "msw";
+import { http, delay } from "msw";
 import { AppHarness } from "../../../mocks/AppHarness";
 import { handlers } from "../../../mocks/handlers";
 import { IOCListView } from "../../../views/IOC/IOCListView";
@@ -19,7 +19,7 @@ export const LoadingAsyncCells = () => <Template />;
 LoadingAsyncCells.parameters = {
   msw: {
     handlers: [
-      http.get("*/iocs/*", (req, res, ctx) => res(ctx.delay("infinite"))),
+      http.get("*/iocs/*", async () => await delay("infinite")),
       ...handlers
     ]
   }

src/stories/views/Job/JobDetailsView.stories.tsx

 import { JobsDetails } from "../../../components/Job/JobDetails";
 import { AppHarness } from "../../../mocks/AppHarness";
 import jobs from "../../../mocks/fixtures/Jobs.json";
+import { JobDetails } from "../../../store/deployApi";
 
 const STATUS_OPTIONS = ["SUCCESSFUL", "FAILED", "QUEUED", "RUNNING", "UNKNOWN"];
 const JOB_ACTION_OPTIONS = [
@@ -26,7 +27,12 @@ export default {
   }
 };
 
-const Template = (args) => {
+interface Args {
+  actionType: JobDetails["action"];
+  status: JobDetails["status"];
+}
+
+const Template = (args: Args) => {
   const currentJob = jobs.jobs.find((job) => job.action === args.actionType);
   return (
     <AppHarness>
@@ -35,13 +41,12 @@ const Template = (args) => {
           action: args.actionType,
           status: args.status
         })}
-        awxJob={args.operation}
       />
     </AppHarness>
   );
 };
 
-export const Default = (args) => <Template {...args} />;
+export const Default = (args: Args) => <Template {...args} />;
 
 Default.args = {
   actionType: JOB_ACTION_OPTIONS[0],

src/stories/views/Login/LoginView.stories.tsx

@@ -9,7 +9,6 @@ export const Default = () => (
   <AppHarness
     initialHistory={["/login"]}
     useTestUser
-    user={null}
   >
     <LoginView />
   </AppHarness>

src/stories/views/UserPage/UserPageView.stories.tsx

 import { UserDetailsContainer } from "../../../views/UserPage";
 import { AppHarness } from "../../../mocks/AppHarness";
 import { userImpersonatorArgs } from "../../utils/common-args";
+import { User } from "../../../types/common";
 
 export default {
   title: "Views/UserPage/UserPageView"
 };
 
-const Template = (args) => (
+interface Args {
+  user: User;
+  userRoles: string[];
+}
+
+const Template = (args: Args) => (
   <AppHarness
     useTestUser
     {...args}
@@ -15,7 +21,7 @@ const Template = (args) => (
   </AppHarness>
 );
 
-export const Default = (args) => <Template {...args} />;
+export const Default = (args: Args) => <Template {...args} />;
 Default.args = {
   ...userImpersonatorArgs
 };