Merge branch 'ce-426-modify-new-ioc-button-and-dialogue' into 'develop'

CE-426: Move new ioc button form HomeView to NavigationMenu

See merge request !319

src/components/navigation/NavigationMenu/CreateIOCButton.js

+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;
+}

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} />
   };
 

src/views/home/HomeView.js

-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>
   );