diff --git a/src/stories/components/common/IOC/IOCLiveStatus.stories.tsx b/src/stories/components/common/IOC/IOCLiveStatus.stories.tsx index e530d63abd9818a1f1929efba4a4271afdd97cc2..d0f8856afb2991964d09377c20c48e114c4f38c9 100644 --- a/src/stories/components/common/IOC/IOCLiveStatus.stories.tsx +++ b/src/stories/components/common/IOC/IOCLiveStatus.stories.tsx @@ -1,13 +1,23 @@ +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, diff --git a/src/stories/components/common/host/HostTable.stories.tsx b/src/stories/components/common/host/HostTable.stories.tsx index 3d39d1ed39a589cf5a9166fc54e62be503c2a4a8..fed1268407a5fbbda36c1825b85359bea0986eeb 100644 --- a/src/stories/components/common/host/HostTable.stories.tsx +++ b/src/stories/components/common/host/HostTable.stories.tsx @@ -1,5 +1,6 @@ +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 }; diff --git a/src/stories/components/common/job/JobTable.stories.tsx b/src/stories/components/common/job/JobTable.stories.tsx index 6b0dc2d83e66c8b844b577a2a058ecd573615c8c..cb601ac9cf31c91cb0525fb945c7b1e1d806d9ba 100644 --- a/src/stories/components/common/job/JobTable.stories.tsx +++ b/src/stories/components/common/job/JobTable.stories.tsx @@ -1,11 +1,13 @@ 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 } }; diff --git a/src/stories/views/Host/HostDetailsView.stories.tsx b/src/stories/views/Host/HostDetailsView.stories.tsx index 6db057af94efc68a544b627f73944dcfa67d0320..b430793bf9247bd394764343b2b35deeb899af10 100644 --- a/src/stories/views/Host/HostDetailsView.stories.tsx +++ b/src/stories/views/Host/HostDetailsView.stories.tsx @@ -1,4 +1,5 @@ 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" }; diff --git a/src/stories/views/IOC/CreateIocView.stories.tsx b/src/stories/views/IOC/CreateIocView.stories.tsx index 3b4aa6707592a99a7adf26e069488d1160878cd2..90b56fb9a7967755dc05bf4d8817e631f1cc29c0 100644 --- a/src/stories/views/IOC/CreateIocView.stories.tsx +++ b/src/stories/views/IOC/CreateIocView.stories.tsx @@ -1,15 +1,21 @@ -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 ] diff --git a/src/stories/views/IOC/IocDetailsView.stories.tsx b/src/stories/views/IOC/IocDetailsView.stories.tsx index b206af67f0159cb126ef59d86d34c5bd7a4bdce2..38147b5e0ce50052ab5253bb439e62ebea5f430c 100644 --- a/src/stories/views/IOC/IocDetailsView.stories.tsx +++ b/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" }; diff --git a/src/stories/views/IOC/IocListView.stories.tsx b/src/stories/views/IOC/IocListView.stories.tsx index 63b5307f17ad724bed2f77150aa61d10fe31161c..5f922405f1939d49f3b77b68d846987cf1207657 100644 --- a/src/stories/views/IOC/IocListView.stories.tsx +++ b/src/stories/views/IOC/IocListView.stories.tsx @@ -1,4 +1,4 @@ -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 ] } diff --git a/src/stories/views/Job/JobDetailsView.stories.tsx b/src/stories/views/Job/JobDetailsView.stories.tsx index 27e6f28173304a8079a1a70dcf6f4a0f51eb7e54..20ee91de0198389e9f90f91b4b5f1f73f1e40932 100644 --- a/src/stories/views/Job/JobDetailsView.stories.tsx +++ b/src/stories/views/Job/JobDetailsView.stories.tsx @@ -1,6 +1,7 @@ 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], diff --git a/src/stories/views/Login/LoginView.stories.tsx b/src/stories/views/Login/LoginView.stories.tsx index 799a5206ee75782d525a24f275ce32f161eb5668..b8126a332a10ef3cab7ed5723c4264cd30be0e4e 100644 --- a/src/stories/views/Login/LoginView.stories.tsx +++ b/src/stories/views/Login/LoginView.stories.tsx @@ -9,7 +9,6 @@ export const Default = () => ( <AppHarness initialHistory={["/login"]} useTestUser - user={null} > <LoginView /> </AppHarness> diff --git a/src/stories/views/UserPage/UserPageView.stories.tsx b/src/stories/views/UserPage/UserPageView.stories.tsx index 24a8d043d9e5fe4db384c1b117395e2db168e8d1..489d60546d24ec8d4071fd6fa216f4a86b7885c9 100644 --- a/src/stories/views/UserPage/UserPageView.stories.tsx +++ b/src/stories/views/UserPage/UserPageView.stories.tsx @@ -1,12 +1,18 @@ 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 };