diff --git a/src/components/navigation/NavigationMenu/CreateIOCButton.js b/src/components/navigation/NavigationMenu/CreateIOCButton.js new file mode 100644 index 0000000000000000000000000000000000000000..d30462f541094430a93541cbb972bc5f68d4c8d0 --- /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 02d98a7fa8bf1a0c2f19c9703690f423303dd09c..1d164ba404bb5e24fa644eb88d62a8fc181edfbd 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 2670db516556021ccac14a4fb1f2dc8fb4e2bb0c..3fa0481bc8142dc28f8aac5c50bbd9aed0e066f9 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> );