diff --git a/src/views/IOC/IOCDetailsAccessControl.jsx b/src/views/IOC/IOCDetailsAccessControl.jsx
index cc22e3a04ebab75c8ee7ba7afbf87f80265d8fe1..b6b6939aac259f47af9cb7bd1d8127294a085b3e 100644
--- a/src/views/IOC/IOCDetailsAccessControl.jsx
+++ b/src/views/IOC/IOCDetailsAccessControl.jsx
@@ -1,4 +1,3 @@
-import { RootPaper } from "@ess-ics/ce-ui-common";
import { useParams } from "react-router-dom";
import { IOCDetailsContainer } from "./IOCDetailsContainer";
import { AccessControl } from "../../components/auth/AccessControl";
@@ -7,10 +6,8 @@ export function IOCDetailsAccessControl() {
const { id } = useParams();
return (
- <RootPaper>
- <AccessControl allowedRoles={[]}>
- <IOCDetailsContainer id={id} />
- </AccessControl>
- </RootPaper>
+ <AccessControl allowedRoles={[]}>
+ <IOCDetailsContainer id={id} />
+ </AccessControl>
);
}
diff --git a/src/views/IOC/IOCDetailsContainer.jsx b/src/views/IOC/IOCDetailsContainer.jsx
index 0cbda486d8b30981bbfd5008656812272b672fde..638b6cd06cb281fac03e015780950b3a4b839ef6 100644
--- a/src/views/IOC/IOCDetailsContainer.jsx
+++ b/src/views/IOC/IOCDetailsContainer.jsx
@@ -1,4 +1,6 @@
import { LinearProgress } from "@mui/material";
+import { RootPaper } from "@ess-ics/ce-ui-common";
+
import { IOCDetailsView } from "./IOCDetailsView";
import { NotFoundView } from "../../components/navigation/NotFoundView/NotFoundView";
import { useGetIocQuery } from "../../store/enhancedApi";
@@ -7,10 +9,11 @@ import { ApiAlertError } from "../../components/common/Alerts/ApiAlertError";
const IOC_POLL_INTERVAL = 5000;
export function IOCDetailsContainer({ id }) {
- const { data: ioc, error } = useGetIocQuery(
- { iocId: id },
- { pollingInterval: IOC_POLL_INTERVAL }
- );
+ const {
+ data: ioc,
+ isLoading,
+ error
+ } = useGetIocQuery({ iocId: id }, { pollingInterval: IOC_POLL_INTERVAL });
if (error && "status" in error && error.status === 404) {
return <NotFoundView />;
@@ -20,9 +23,17 @@ export function IOCDetailsContainer({ id }) {
return <ApiAlertError error={error} />;
}
+ if (isLoading || !ioc) {
+ return (
+ <RootPaper>
+ <LinearProgress color="primary" />
+ </RootPaper>
+ );
+ }
+
return (
- <>
+ <RootPaper>
{ioc ? <IOCDetailsView ioc={ioc} /> : <LinearProgress color="primary" />}
- </>
+ </RootPaper>
);
}
diff --git a/src/views/UserPage/UserDetailsAccessControl.jsx b/src/views/UserPage/UserDetailsAccessControl.jsx
index fa64a39fee66775e263d309b4497642beea7972a..f14bc9cc1647cd8de8051236005063cf71453eff 100644
--- a/src/views/UserPage/UserDetailsAccessControl.jsx
+++ b/src/views/UserPage/UserDetailsAccessControl.jsx
@@ -1,13 +1,10 @@
-import { RootPaper } from "@ess-ics/ce-ui-common";
import { UserDetailsContainer } from "./UserDetailsContainer";
import { AccessControl } from "../../components/auth/AccessControl";
export function UserDetailsAccessControl() {
return (
- <RootPaper>
- <AccessControl allowedRoles={[]}>
- <UserDetailsContainer />
- </AccessControl>
- </RootPaper>
+ <AccessControl allowedRoles={[]}>
+ <UserDetailsContainer />
+ </AccessControl>
);
}
diff --git a/src/views/UserPage/UserDetailsContainer.jsx b/src/views/UserPage/UserDetailsContainer.jsx
index 9fdaf9e9617496dfa2ee5c58387f1267ec7a3af7..40b2b575158aed237a9df7b92660d291302c97a0 100644
--- a/src/views/UserPage/UserDetailsContainer.jsx
+++ b/src/views/UserPage/UserDetailsContainer.jsx
@@ -1,20 +1,21 @@
import { useContext, useEffect, useState } from "react";
import { LinearProgress } from "@mui/material";
import { useParams } from "react-router-dom";
-import { userContext } from "@ess-ics/ce-ui-common";
+import { userContext, RootPaper } from "@ess-ics/ce-ui-common";
import { UserPageView } from "./UserPageView";
import { NotFoundView } from "../../components/navigation/NotFoundView/NotFoundView";
-import { useLazyInfoFromUserNameQuery } from "../../store/deployApi";
+import { useInfoFromUserNameQuery } from "../../store/deployApi";
export function UserDetailsContainer() {
const { userName } = useParams();
const { user } = useContext(userContext);
const [error, setError] = useState(null);
- const [
- getUserInfo,
- { data: userInfo, isLoading, error: userInfoResponseError }
- ] = useLazyInfoFromUserNameQuery();
+ const {
+ data: userInfo,
+ isLoading,
+ error: userInfoResponseError
+ } = useInfoFromUserNameQuery({ userName });
useEffect(() => {
if (userInfoResponseError) {
@@ -30,18 +31,6 @@ export function UserDetailsContainer() {
}
}, [userInfoResponseError]);
- useEffect(() => {
- // user logs in => clear error message, and try to re-request userInfo
- if (user) {
- setError(null);
- getUserInfo({ userName });
- }
- }, [user, userName, getUserInfo]);
-
- if (isLoading || !userInfo) {
- return <LinearProgress color="primary" />;
- }
-
// If there is an error, show it; highest priority
if (error) {
return (
@@ -52,15 +41,25 @@ export function UserDetailsContainer() {
);
}
+ if (isLoading || !userInfo) {
+ return (
+ <RootPaper>
+ <LinearProgress color="primary" />
+ </RootPaper>
+ );
+ }
+
// If the user is logged in and the userInfo is available
// Then show the user page
if (user && userInfo) {
return (
- <UserPageView
- userName={userName}
- user={user}
- userInfo={userInfo}
- />
+ <RootPaper>
+ <UserPageView
+ userName={userName}
+ user={user}
+ userInfo={userInfo}
+ />
+ </RootPaper>
);
}
}
diff --git a/src/views/host/details/HostDetailsAccessControl.jsx b/src/views/host/details/HostDetailsAccessControl.jsx
index 8750fda74748bc58e6d3021bf2f2e8415feee11e..12c4c86e17044e490d6f2dbb509ae103c2536b92 100644
--- a/src/views/host/details/HostDetailsAccessControl.jsx
+++ b/src/views/host/details/HostDetailsAccessControl.jsx
@@ -1,4 +1,3 @@
-import { RootPaper } from "@ess-ics/ce-ui-common";
import { useParams } from "react-router-dom";
import { HostDetailsContainer } from "./HostDetailsContainer";
import { AccessControl } from "../../../components/auth/AccessControl";
@@ -7,10 +6,8 @@ export function HostDetailsAccessControl() {
const { id } = useParams();
return (
- <RootPaper data-testid="host-details-container">
- <AccessControl allowedRoles={[]}>
- <HostDetailsContainer hostId={id} />
- </AccessControl>
- </RootPaper>
+ <AccessControl allowedRoles={[]}>
+ <HostDetailsContainer hostId={id} />
+ </AccessControl>
);
}
diff --git a/src/views/host/details/HostDetailsContainer.jsx b/src/views/host/details/HostDetailsContainer.jsx
index 98b45b61c436a5798b014b37cb86eeafdc679865..0ee394937cd2db5e44ea6087bf65a97cc7355602 100644
--- a/src/views/host/details/HostDetailsContainer.jsx
+++ b/src/views/host/details/HostDetailsContainer.jsx
@@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import { LinearProgress } from "@mui/material";
+import { RootPaper } from "@ess-ics/ce-ui-common";
import { HostDetailsView } from "./HostDetailsView";
import { onFetchEntityError } from "../../../components/common/Helper";
import { NotFoundView } from "../../../components/navigation/NotFoundView/NotFoundView";
@@ -35,14 +36,20 @@ export function HostDetailsContainer({ hostId }) {
}
if (!host || !alert) {
- return <LinearProgress color="primary" />;
+ return (
+ <RootPaper>
+ <LinearProgress color="primary" />
+ </RootPaper>
+ );
}
return (
- <HostDetailsView
- host={host}
- alert={alert}
- hostId={hostId}
- />
+ <RootPaper data-testid="host-details-container">
+ <HostDetailsView
+ host={host}
+ alert={alert}
+ hostId={hostId}
+ />
+ </RootPaper>
);
}
diff --git a/src/views/jobs/JobDetailsAccessControl.jsx b/src/views/jobs/JobDetailsAccessControl.jsx
index 71692ad10f0f7f9702d552ed7ebae6797850d7e9..0b970f4f1509aa605770a060cb7eb4f0bcf0cb7c 100644
--- a/src/views/jobs/JobDetailsAccessControl.jsx
+++ b/src/views/jobs/JobDetailsAccessControl.jsx
@@ -1,4 +1,3 @@
-import { RootPaper } from "@ess-ics/ce-ui-common";
import { useParams } from "react-router-dom";
import { JobDetailsContainer } from "./JobDetailsContainer";
import { AccessControl } from "../../components/auth/AccessControl";
@@ -7,10 +6,8 @@ export function JobDetailsAccessControl() {
const { id } = useParams();
return (
- <RootPaper>
- <AccessControl allowedRoles={[]}>
- <JobDetailsContainer id={id} />
- </AccessControl>
- </RootPaper>
+ <AccessControl allowedRoles={[]}>
+ <JobDetailsContainer id={id} />
+ </AccessControl>
);
}
diff --git a/src/views/jobs/JobDetailsContainer.jsx b/src/views/jobs/JobDetailsContainer.jsx
index 6953ade83f21129b79656b7ff5457c13652f3c60..b137f869ec7144feec8d4edcc9bdfb00bbb8b5c2 100644
--- a/src/views/jobs/JobDetailsContainer.jsx
+++ b/src/views/jobs/JobDetailsContainer.jsx
@@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import { LinearProgress } from "@mui/material";
+import { RootPaper } from "@ess-ics/ce-ui-common";
import { JobDetailsView } from "./JobDetailsView";
import { NotFoundView } from "../../components/navigation/NotFoundView/NotFoundView";
import { onFetchEntityError } from "../../components/common/Helper";
@@ -47,8 +48,16 @@ export function JobDetailsContainer({ id }) {
}
if (isLoading || !job) {
- return <LinearProgress color="primary" />;
+ return (
+ <RootPaper>
+ <LinearProgress color="primary" />
+ </RootPaper>
+ );
}
- return <JobDetailsView job={job} />;
+ return (
+ <RootPaper>
+ <JobDetailsView job={job} />;
+ </RootPaper>
+ );
}