CE-1950: Replace wrappers with RootPaper

src/views/IOC/IOCDetailsAccessControl.js

 import React from "react";
-import { RootContainer } from "../../components/common/Container/RootContainer";
+import { RootPaper } from "@ess-ics/ce-ui-common";
 import AccessControl from "../../components/auth/AccessControl";
 import { IOCDetailsContainer } from "./IOCDetailsContainer";
 import { useParams } from "react-router-dom";
@@ -8,10 +8,10 @@ export function IOCDetailsAccessControl() {
   const { id } = useParams();
 
   return (
-    <RootContainer>
+    <RootPaper>
       <AccessControl allowedRoles={[]}>
         <IOCDetailsContainer id={id} />
       </AccessControl>
-    </RootContainer>
+    </RootPaper>
   );
 }

src/views/IOC/IOCDetailsView.js

-import { Grid, Paper, Tab, Tabs, IconButton } from "@mui/material";
+import { Grid, Tab, Tabs, IconButton } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import React, {
   useCallback,
@@ -201,89 +201,85 @@ export function IOCDetailsView({ ioc, getIOC, loading }) {
   };
 
   return (
-    <Paper>
+    <Grid
+      container
+      spacing={1}
+    >
       <Grid
-        container
-        spacing={1}
+        item
+        xs={1}
       >
-        <Grid
-          item
-          xs={1}
-        >
-          <IconButton
-            color="inherit"
-            onClick={handleClick}
-            size="large"
-          >
-            <ArrowBackIcon />
-          </IconButton>
-        </Grid>
-        <Grid
-          item
-          xs={11}
+        <IconButton
+          color="inherit"
+          onClick={handleClick}
+          size="large"
         >
-          <Grid
-            container
-            justifyContent="center"
-          >
-            {ioc && (
-              <CustomTabs>
-                {statusTab}
-                <AccessControl
-                  allowedRoles={[
-                    "DeploymentToolAdmin",
-                    "DeploymentToolIntegrator"
-                  ]}
-                  renderNoAccess={() => <></>}
-                >
-                  <CustomTabs>{manageDeploymentTab}</CustomTabs>
-                </AccessControl>
-                <AccessControl
-                  allowedRoles={["DeploymentToolAdmin"]}
-                  renderNoAccess={() => <></>}
-                >
-                  <CustomTabs>{iocAdminTab}</CustomTabs>
-                </AccessControl>
-              </CustomTabs>
-            )}
-          </Grid>
-        </Grid>
+          <ArrowBackIcon />
+        </IconButton>
+      </Grid>
+      <Grid
+        item
+        xs={11}
+      >
         <Grid
-          item
-          xs={12}
-          style={{ paddingBottom: 0 }}
+          container
+          justifyContent="center"
         >
-          {deserialize(urlState.tab) === "Status" && (
-            <IOCLiveStatus ioc={ioc} />
-          )}
-          {deserialize(urlState.tab) === "Management" && (
-            <IOCManage
-              ioc={ioc}
-              getIOC={getIOC}
-              buttonDisabled={buttonDisabled}
-              currentCommand={
-                ongoingCommand?.operations?.length > 0
-                  ? ongoingCommand.operations[0]
-                  : null
-              }
-              operations={operations?.operations}
-              operationsLoading={operationsLoading || !operationsDataReady}
-              getOperations={getOperations}
-              setButtonDisabled={setButtonDisabledAndUpdate}
-              pagination={jobPagination}
-              onPage={onPage}
-            />
-          )}
-          {deserialize(urlState.tab) === "Admin" && (
-            <IOCAdmin
-              ioc={ioc}
-              getIOC={getIOC}
-              resetTab={resetTab}
-              buttonDisabled={buttonDisabled}
-            />
+          {ioc && (
+            <CustomTabs>
+              {statusTab}
+              <AccessControl
+                allowedRoles={[
+                  "DeploymentToolAdmin",
+                  "DeploymentToolIntegrator"
+                ]}
+                renderNoAccess={() => <></>}
+              >
+                <CustomTabs>{manageDeploymentTab}</CustomTabs>
+              </AccessControl>
+              <AccessControl
+                allowedRoles={["DeploymentToolAdmin"]}
+                renderNoAccess={() => <></>}
+              >
+                <CustomTabs>{iocAdminTab}</CustomTabs>
+              </AccessControl>
+            </CustomTabs>
           )}
         </Grid>
       </Grid>
-    </Paper>
+      <Grid
+        item
+        xs={12}
+        style={{ paddingBottom: 0 }}
+      >
+        {deserialize(urlState.tab) === "Status" && <IOCLiveStatus ioc={ioc} />}
+        {deserialize(urlState.tab) === "Management" && (
+          <IOCManage
+            ioc={ioc}
+            getIOC={getIOC}
+            buttonDisabled={buttonDisabled}
+            currentCommand={
+              ongoingCommand?.operations?.length > 0
+                ? ongoingCommand.operations[0]
+                : null
+            }
+            operations={operations?.operations}
+            operationsLoading={operationsLoading || !operationsDataReady}
+            getOperations={getOperations}
+            setButtonDisabled={setButtonDisabledAndUpdate}
+            pagination={jobPagination}
+            onPage={onPage}
+          />
+        )}
+        {deserialize(urlState.tab) === "Admin" && (
+          <IOCAdmin
+            ioc={ioc}
+            getIOC={getIOC}
+            resetTab={resetTab}
+            buttonDisabled={buttonDisabled}
+          />
+        )}
+      </Grid>
+    </Grid>
   );
 }

src/views/host/HostDetailsAccessControl.js

 import React from "react";
-import { RootContainer } from "../../components/common/Container/RootContainer";
+import { RootPaper } from "@ess-ics/ce-ui-common";
 import AccessControl from "../../components/auth/AccessControl";
 import { HostDetailsContainer } from "./HostDetailsContainer";
 import { useParams } from "react-router-dom";
@@ -8,10 +8,10 @@ export function HostDetailsAccessControl() {
   const { id } = useParams();
 
   return (
-    <RootContainer data-testid="host-details-container">
+    <RootPaper data-testid="host-details-container">
       <AccessControl allowedRoles={[]}>
         <HostDetailsContainer id={id} />
       </AccessControl>
-    </RootContainer>
+    </RootPaper>
   );
 }

src/views/host/HostDetailsView.js

@@ -15,7 +15,6 @@ import {
   KeyValueTable,
   SimpleAccordion,
   GlobalAppBarContext,
-  RootPaper,
   useAPIMethod
 } from "@ess-ics/ce-ui-common";
 import { LokiPanel } from "../../components/common/Loki/LokiPanel";
@@ -180,7 +179,7 @@ export function HostDetailsView({ id, host }) {
   };
 
   return (
-    <RootPaper>
+    <>
       <IconButton
         color="inherit"
         onClick={handleClick}
@@ -286,6 +285,6 @@ export function HostDetailsView({ id, host }) {
           </Container>
         </CardContent>
       </Card>
-    </RootPaper>
+    </>
   );
 }

src/views/jobs/JobDetailsAccessControl.js

 import React from "react";
-import { RootContainer } from "../../components/common/Container/RootContainer";
+import { RootPaper } from "@ess-ics/ce-ui-common";
 import AccessControl from "../../components/auth/AccessControl";
 import { JobDetailsContainer } from "./JobDetailsContainer";
 import { useParams } from "react-router-dom";
@@ -8,10 +8,10 @@ export function JobDetailsAccessControl() {
   const { id } = useParams();
 
   return (
-    <RootContainer>
+    <RootPaper>
       <AccessControl allowedRoles={[]}>
         <JobDetailsContainer id={id} />
       </AccessControl>
-    </RootContainer>
+    </RootPaper>
   );
 }

src/views/jobs/JobDetailsView.js

 import React, { useContext, useEffect } from "react";
-import { IconButton, Paper } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { JobDetails } from "../../components/Job/JobDetails";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useNavigate } from "react-router-dom";
@@ -22,7 +22,7 @@ export function JobDetailsView({ operation, job }) {
   );
 
   return (
-    <Paper>
+    <>
       <IconButton
         color="inherit"
         onClick={handleClick}
@@ -36,6 +36,6 @@ export function JobDetailsView({ operation, job }) {
           job={job}
         />
       )}
-    </Paper>
+    </>
   );
 }

src/views/records/RecordDetailsView.js

@@ -6,16 +6,15 @@ import React, {
   useMemo
 } from "react";
 import {
-  Paper,
   IconButton,
   Typography,
   LinearProgress,
   Link as MuiLink
 } from "@mui/material";
 import { Link as ReactRouterLink } from "react-router-dom";
-import { RootContainer } from "../../components/common/Container/RootContainer";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import {
+  RootPaper,
   KeyValueTable,
   SimpleAccordion,
   GlobalAppBarContext
@@ -138,13 +137,13 @@ export function RecordDetailsView() {
   }, []);
 
   return (
-    <RootContainer>
+    <RootPaper>
       {error ? (
         <NotFoundView />
       ) : recordLoading || !dataReady ? (
         <LinearProgress color="primary" />
       ) : (
-        <Paper>
+        <>
           <IconButton
             color="inherit"
             onClick={handleClick}
@@ -165,8 +164,8 @@ export function RecordDetailsView() {
               />
             </SimpleAccordion>
           )}
-        </Paper>
+        </>
       )}
-    </RootContainer>
+    </RootPaper>
   );
 }