From 07844b864717e69961adefe9d9d75b4992709682 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Thu, 5 Dec 2024 12:53:53 +0100
Subject: [PATCH] restructured tab construction and migrated to typescript
---
src/views/IOC/IOCDetailsView.jsx | 88 -------------------------
src/views/IOC/IOCDetailsView.tsx | 109 +++++++++++++++++++++++++++++++
2 files changed, 109 insertions(+), 88 deletions(-)
delete mode 100644 src/views/IOC/IOCDetailsView.jsx
create mode 100644 src/views/IOC/IOCDetailsView.tsx
diff --git a/src/views/IOC/IOCDetailsView.jsx b/src/views/IOC/IOCDetailsView.jsx
deleted file mode 100644
index e540a14e..00000000
--- a/src/views/IOC/IOCDetailsView.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Grid, IconButton, Stack } from "@mui/material";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { useContext, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import {
- GlobalAppBarContext,
- useIsCurrentUserPermitted,
- TabPanel
-} from "@ess-ics/ce-ui-common";
-import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
-import { IOCManage } from "../../components/IOC/IOCManage";
-import { IOCAdmin } from "../../components/IOC/IOCAdmin";
-import { applicationTitle } from "../../components/common/Helper";
-
-export function IOCDetailsView({ ioc }) {
- const [tabIndex, setTabIndex] = useState(0);
- const { setTitle } = useContext(GlobalAppBarContext);
- const navigate = useNavigate();
-
- useEffect(() => {
- if (ioc) {
- setTitle(applicationTitle(`IOC Details: ${ioc.namingName}`));
- }
- }, [ioc, setTitle]);
-
- const tabs = [
- {
- label: "Status",
- content: <IOCLiveStatus ioc={ioc} />
- }
- ];
-
- const isPermittedManagement = useIsCurrentUserPermitted({
- allowedRoles: ["DeploymentToolAdmin", "DeploymentToolIntegrator"]
- });
-
- const isPermittedAdmin = useIsCurrentUserPermitted({
- allowedRoles: ["DeploymentToolAdmin"]
- });
-
- if (isPermittedManagement) {
- tabs.push({
- label: "Management",
- content: <IOCManage ioc={ioc} />
- });
- }
- if (isPermittedAdmin) {
- tabs.push({
- label: "Admin",
- content: <IOCAdmin ioc={ioc} />
- });
- }
-
- return (
- <Grid
- container
- spacing={1}
- >
- <Grid
- item
- xs={12}
- style={{ paddingBottom: 0 }}
- >
- <TabPanel
- tabs={tabs}
- initialIndex={tabIndex}
- onTabChange={(index) => setTabIndex(index)}
- TabsProps={{ centered: true, sx: { flex: 1 } }}
- renderTabs={(tabs) => (
- <Stack
- flexDirection="row"
- justifyContent="space-between"
- >
- <IconButton
- color="inherit"
- onClick={() => navigate(-1)}
- size="large"
- >
- <ArrowBackIcon />
- </IconButton>
- {tabs}
- </Stack>
- )}
- />
- </Grid>
- </Grid>
- );
-}
diff --git a/src/views/IOC/IOCDetailsView.tsx b/src/views/IOC/IOCDetailsView.tsx
new file mode 100644
index 00000000..80df78af
--- /dev/null
+++ b/src/views/IOC/IOCDetailsView.tsx
@@ -0,0 +1,109 @@
+import { ReactNode, useEffect, useState } from "react";
+import { Grid, IconButton, Stack } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { useNavigate } from "react-router-dom";
+import {
+ useGlobalAppBarContext,
+ useIsCurrentUserPermitted,
+ TabPanel
+} from "@ess-ics/ce-ui-common";
+import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
+import { IOCManage } from "../../components/IOC/IOCManage";
+import { IOCAdmin } from "../../components/IOC/IOCAdmin";
+import { applicationTitle } from "../../components/common/Helper";
+import { GlobalAppBarContext } from "../../types/common";
+import { IocDetails } from "../../store/deployApi";
+
+interface IOCDetailsViewProps {
+ ioc: IocDetails;
+}
+
+interface Tab {
+ label: string;
+ content: ReactNode;
+}
+
+const getTabs = (ioc: IocDetails): Tab[] => [
+ {
+ label: "Status",
+ content: <IOCLiveStatus ioc={ioc} />
+ },
+ {
+ label: "Management",
+ content: <IOCManage ioc={ioc} />
+ },
+ {
+ label: "Admin",
+ content: <IOCAdmin ioc={ioc} />
+ }
+];
+
+export const IOCDetailsView = ({ ioc }: IOCDetailsViewProps) => {
+ const [tabIndex, setTabIndex] = useState(0);
+ const [tabs, setTabs] = useState<Tab[] | null>(null);
+ const { setTitle }: GlobalAppBarContext = useGlobalAppBarContext();
+ const navigate = useNavigate();
+
+ const isPermittedAdmin = useIsCurrentUserPermitted({
+ allowedRoles: ["DeploymentToolAdmin"]
+ });
+
+ const isPermittedManagement = useIsCurrentUserPermitted({
+ allowedRoles: ["DeploymentToolAdmin", "DeploymentToolIntegrator"]
+ });
+
+ useEffect(() => {
+ if (ioc) {
+ setTitle(applicationTitle(`IOC Details: ${ioc.namingName}`));
+ }
+ }, [ioc, setTitle]);
+
+ useEffect(() => {
+ if (ioc) {
+ if (isPermittedAdmin) {
+ setTabs(getTabs(ioc));
+ } else if (isPermittedManagement) {
+ setTabs(getTabs(ioc).filter((tab) => tab.label !== "Admin"));
+ } else {
+ setTabs(getTabs(ioc).filter((tab) => tab.label === "Status"));
+ }
+ }
+ }, [ioc, isPermittedAdmin, isPermittedManagement]);
+
+ return (
+ <Grid
+ container
+ spacing={1}
+ >
+ <Grid
+ item
+ xs={12}
+ style={{ paddingBottom: 0 }}
+ >
+ {tabs && (
+ <TabPanel
+ tabs={tabs}
+ initialIndex={tabIndex}
+ onTabChange={(index: number) => setTabIndex(index)}
+ TabsProps={{ centered: true, sx: { flex: 1 } }}
+ renderTabs={(tabs: ReactNode) => (
+ <Stack
+ flexDirection="row"
+ justifyContent="space-between"
+ >
+ <IconButton
+ color="inherit"
+ onClick={() => navigate(-1)}
+ size="large"
+ >
+ <ArrowBackIcon />
+ </IconButton>
+ {tabs}
+ </Stack>
+ )}
+ />
+ )}
+ </Grid>
+ </Grid>
+ );
+};
--
GitLab