From e166863915689e4173eb334457a20976b3a22dc6 Mon Sep 17 00:00:00 2001
From: Alexander Madsen <alexander.madsen@ess.eu>
Date: Mon, 14 Aug 2023 12:19:15 +0000
Subject: [PATCH] CE-426: Move new ioc button form HomeView to NavigationMenu
---
.../NavigationMenu/CreateIOCButton.js | 43 +++++++++++++++++
.../NavigationMenu/NavigationMenu.js | 2 +
src/views/home/HomeView.js | 47 +------------------
3 files changed, 47 insertions(+), 45 deletions(-)
create mode 100644 src/components/navigation/NavigationMenu/CreateIOCButton.js
diff --git a/src/components/navigation/NavigationMenu/CreateIOCButton.js b/src/components/navigation/NavigationMenu/CreateIOCButton.js
new file mode 100644
index 00000000..d30462f5
--- /dev/null
+++ b/src/components/navigation/NavigationMenu/CreateIOCButton.js
@@ -0,0 +1,43 @@
+import React, { useContext, useState } from "react";
+import { userContext, IconMenuButton } from "@ess-ics/ce-ui-common";
+import { CreateIOC } from "../../../components/IOC/CreateIOC";
+import { SimpleModal } from "../../../components/common/SimpleModal/SimpleModal";
+import { useCreateIOC } from "../../../api/SwaggerApi";
+
+export function CreateIOCButton() {
+ const { user } = useContext(userContext);
+ const [iocFormOpen, setIOCFormOpen] = useState(false);
+
+ const iconMenuButtonProps = {
+ menuItems: [
+ {
+ text: "New IOC",
+ action: () => setIOCFormOpen(true)
+ }
+ ]
+ };
+
+ const closeModal = () => {
+ setIOCFormOpen(false);
+ };
+
+ return user ? (
+ <>
+ <IconMenuButton {...iconMenuButtonProps} />
+ <SimpleModal
+ open={iocFormOpen}
+ setOpen={setIOCFormOpen}
+ >
+ <CreateIOC
+ open={iocFormOpen}
+ setOpen={setIOCFormOpen}
+ isUpdateIoc={false}
+ submitCallback={closeModal}
+ hook={useCreateIOC}
+ title="Create new IOC"
+ buttonText="Create"
+ />
+ </SimpleModal>
+ </>
+ ) : null;
+}
diff --git a/src/components/navigation/NavigationMenu/NavigationMenu.js b/src/components/navigation/NavigationMenu/NavigationMenu.js
index 02d98a7f..1d164ba4 100644
--- a/src/components/navigation/NavigationMenu/NavigationMenu.js
+++ b/src/components/navigation/NavigationMenu/NavigationMenu.js
@@ -22,6 +22,7 @@ import { applicationTitle } from "../../common/Helper";
import { LoginControls } from "./LoginControls";
import { Link } from "react-router-dom";
import { CCCEControlSymbol } from "../../../icons/CCCEControlSymbol";
+import { CreateIOCButton } from "./CreateIOCButton";
function MenuListItem({ url, icon, text, tooltip }) {
const currentUrl = `${window.location}`;
@@ -108,6 +109,7 @@ const NavigationMenu = ({ children }) => {
defaultOpen: false,
widthOpen: "240px",
widthClosed: "57px",
+ defaultIconMenuButton: <CreateIOCButton />,
defaultHelpButton: <IconMenuButton {...helpButtonProps} />
};
diff --git a/src/views/home/HomeView.js b/src/views/home/HomeView.js
index 2670db51..3fa0481b 100644
--- a/src/views/home/HomeView.js
+++ b/src/views/home/HomeView.js
@@ -1,13 +1,10 @@
-import { Container, Grid, Paper, Button, Box, Typography } from "@mui/material";
+import { Container, Grid, Paper, Box, Typography } from "@mui/material";
import { styled } from "@mui/material/styles";
import React, { useContext, useEffect, useState } from "react";
-import { CreateIOC } from "../../components/IOC/CreateIOC";
import { KeyValueTable } from "../../components/common/KeyValueTable/KeyValueTable";
-import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
import { IOCAsyncList } from "../../components/IOC/IOCAsyncList";
import { SimpleAccordion } from "../../components/common/Accordion/SimpleAccordion";
import {
- useCreateIOC,
useAnnouncements,
usePersonalStatistics,
useOwnIocsWithAlarms
@@ -34,7 +31,6 @@ const StyledContainer = styled(Container)(({ theme }) => ({
}));
export function HomeView() {
- const [iocFormOpen, setIOCFormOpen] = useState(false);
const [announcements] = useAnnouncements();
const [statistics] = usePersonalStatistics();
const [
@@ -52,10 +48,6 @@ export function HomeView() {
const { setTitle } = useContext(GlobalAppBarContext);
useEffect(() => setTitle(applicationTitle("Home")), [setTitle]);
- const closeModal = () => {
- setIOCFormOpen(false);
- };
-
return (
<StyledContainer>
<Paper className={classes.root}>
@@ -66,7 +58,7 @@ export function HomeView() {
>
<Grid
item
- xs={10}
+ xs={12}
>
<Box
display="flex"
@@ -77,27 +69,6 @@ export function HomeView() {
<Typography variant="h2">Account overview</Typography>
</Box>
</Grid>
- <Grid
- item
- xs={2}
- >
- <Box
- display="flex"
- flexDirection="row-reverse"
- p={2}
- m={1}
- >
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- setIOCFormOpen(true);
- }}
- >
- New IOC
- </Button>
- </Box>
- </Grid>
{statistics && (
<Grid
item
@@ -147,20 +118,6 @@ export function HomeView() {
</Grid>
</Grid>
)}
- <SimpleModal
- open={iocFormOpen}
- setOpen={setIOCFormOpen}
- >
- <CreateIOC
- open={iocFormOpen}
- setOpen={setIOCFormOpen}
- isUpdateIoc={false}
- submitCallback={closeModal}
- hook={useCreateIOC}
- title="Create new IOC"
- buttonText="Create"
- />
- </SimpleModal>
</Paper>
</StyledContainer>
);
--
GitLab