fix: new menu, unfinished header

frontend/packages/manager/src/Manager.jsx

@@ -1,68 +1,38 @@
 import React, {useCallback, useContext, useState} from 'react';
 import { Link, Route, Routes, Switch } from 'react-router-dom';
-import TabLayout from '@splunk/react-ui/TabLayout';
-import ProfilesPage from "./pages/ProfilesPage";
-import InventoryPage from "./pages/InventoryPage";
-import GroupsPage from "./pages/GroupsPage";
+
 import ErrorsModal from "./components/ErrorsModal";
+import Menu from "./components/menu_header/Menu";
+import Header from "./components/menu_header/Header";
+import TabPanels from "./components/menu_header/TabPanels";
+import MenuHeaderContxt from './store/menu-header-contxt';
+
+
+import { ButtonsContextProvider } from "./store/buttons-contx";
+import { ErrorsModalContextProvider } from "./store/errors-modal-contxt";
+import { MenuHeaderContxtProvider } from "./store/menu-header-contxt";
+
 import { ProfileContxtProvider } from "./store/profile-contxt";
 import { InventoryContextProvider } from "./store/inventory-contxt";
 import { GroupContextProvider } from "./store/group-contxt";
-import { ButtonsContextProvider } from "./store/buttons-contx";
-import { InventoryDevicesValidationContxtProvider } from "./store/inventory-devices-validation-contxt";
-import { ProfilesValidationContxtProvider } from "./store/profiles-validation-contxt";
-import { ErrorsModalContextProvider } from "./store/errors-modal-contxt";
-import TabBar from '@splunk/react-ui/TabBar';
-import { StyledTab, StyledMenuBar, StyledMenuBarLeft, StyledMenuBarRight } from './styles/MenuBarStyle';
 
 function Uncontrolled() {
-    const [activeTabId, setActiveTabId] = useState('Profiles');
-
-    const handleChange = useCallback((e, { selectedTabId }) => {
-        setActiveTabId(selectedTabId);
-    }, []);
-
+    const MenuCtx = useContext(MenuHeaderContxt);
     return (
         <ButtonsContextProvider>
             <ErrorsModalContextProvider>
-                 <StyledMenuBar>
-                     <StyledMenuBarLeft>
-                         <StyledTab activeTabId={activeTabId} onChange={handleChange}>
-                            <TabBar.Tab label="Profiles" tabId="Profiles" />
-                            <TabBar.Tab label="Groups" tabId="Groups" />
-                            <TabBar.Tab label="Inventory" tabId="Inventory" />
-                        </StyledTab>
-                     </StyledMenuBarLeft>
-                     <StyledMenuBarRight>
-                        <div>
-                            Splunk Connect for SNMP
-                        </div>
-                     </StyledMenuBarRight>
-                 </StyledMenuBar>
-
-                <TabLayout defaultActivePanelId="one">
-                    <TabLayout.Panel style={{color:"red"}} label="Profiles" panelId="one">
-                        <ProfileContxtProvider>
-                            <ProfilesValidationContxtProvider>
-                                <ProfilesPage />
-                            </ProfilesValidationContxtProvider>
-                        </ProfileContxtProvider>
-                    </TabLayout.Panel>
-                    <TabLayout.Panel style={{color: "#E1E6EB"}} label="Groups" panelId="two">
+                <MenuHeaderContxtProvider>
+                    <ProfileContxtProvider>
                         <GroupContextProvider>
-                            <InventoryDevicesValidationContxtProvider>
-                                <GroupsPage />
-                            </InventoryDevicesValidationContxtProvider>
+                            <InventoryContextProvider>
+                                <Menu/>
+                                <Header/>
+                                <TabPanels/>
+                            </InventoryContextProvider>
                         </GroupContextProvider>
-                    </TabLayout.Panel>
-                    <TabLayout.Panel style={{color: "#E1E6EB"}} label="Inventory" panelId="three">
-                        <InventoryContextProvider>
-                            <InventoryDevicesValidationContxtProvider>
-                                <InventoryPage />
-                            </InventoryDevicesValidationContxtProvider>
-                        </InventoryContextProvider>
-                    </TabLayout.Panel>
-                </TabLayout>
+                    </ProfileContxtProvider>
+
+                </MenuHeaderContxtProvider>
                 <ErrorsModal />
             </ErrorsModalContextProvider>
         </ButtonsContextProvider>

frontend/packages/manager/src/components/menu_header/Header.jsx

@@ -0,0 +1,85 @@
+import React, {useCallback, useContext, useState} from 'react';
+import MenuHeaderContxt from '../../store/menu-header-contxt';
+import ProfileContext from "../../store/profile-contxt";
+import GroupContext from "../../store/group-contxt";
+import InventoryContext from "../../store/inventory-contxt";
+import { StyledHeader, StyledHeaderLeft, StyledHeaderRight } from "../../styles/HeaderStyle";
+import Button from '@splunk/react-ui/Button';
+import Plus from '@splunk/react-icons/Plus';
+import P from '@splunk/react-ui/Paragraph';
+
+function Header(){
+    const MenuCtx = useContext(MenuHeaderContxt);
+    const ProfCtx = useContext(ProfileContext);
+    const GrCtx = useContext(GroupContext);
+    const InvCtx = useContext(InventoryContext);
+
+    const handleRequestOpenProfile = () => {
+        ProfCtx.setProfileName("");
+        ProfCtx.setFrequency(1);
+        ProfCtx.setVarBinds(null);
+        ProfCtx.setConditions(null);
+        ProfCtx.setAddOpen(true);
+        ProfCtx.setIsEdit(false);
+    };
+
+    const handleRequestOpenGroups = () => {
+        GrCtx.setAddGroupOpen(true);
+        GrCtx.setIsGroupEdit(false);
+        GrCtx.setGroupName('');
+        GrCtx.setGroupId(null);
+    };
+
+    const handleRequestOpenInventory = () => {
+        InvCtx.setAddOpen(true);
+        InvCtx.setIsEdit(false);
+        InvCtx.resetFormData();
+    };
+
+    const handleApplyChanges = () => {
+        console.log("Applying changes")
+    };
+
+    const addButtonLabel = {
+        Profiles: "Add new profile",
+        Groups: "Add new group",
+        Inventory: "Add new device"
+    };
+
+    const addButtonHandler = {
+        Profiles: handleRequestOpenProfile,
+        Groups: handleRequestOpenGroups,
+        Inventory: handleRequestOpenInventory
+    };
+
+    return(
+            <StyledHeader>
+                <StyledHeaderLeft>
+                    <div>
+                        <span id="project-title">
+                            <P>
+                                Splunk Connect for SNMP
+                            </P>
+                        </span>
+                        <span id="project-description">
+                            <P>
+                                Collect SNMP data for Splunk Enterprise, Splunk Enterprise Cloud and Splunk
+                                Infrastructure Monitoring. Make any changes to Profiles, Groups and Inventory. Then select
+                                Aply changes to put the changes into effect. Applying changes can only be done every
+                                5 minutes.
+                            </P>
+                        </span>
+                    </div>
+                </StyledHeaderLeft>
+                <StyledHeaderRight>
+                    <div>
+                        <Button icon={<Plus screenReaderText={null} />} appearance="primary"
+                                label={addButtonLabel[MenuCtx.activeTabId]}
+                                onClick={addButtonHandler[MenuCtx.activeTabId]}/>
+                        <Button label="Apply Changes" onClick={handleApplyChanges}/>
+                    </div>
+                </StyledHeaderRight>
+            </StyledHeader>)
+}
+
+export default Header;

frontend/packages/manager/src/components/menu_header/Menu.jsx

@@ -0,0 +1,34 @@
+import React, {useCallback, useContext, useState} from 'react';
+import MenuHeaderContxt from '../../store/menu-header-contxt';
+import { StyledTab, StyledMenuBar, StyledMenuBarLeft, StyledMenuBarRight } from "../../styles/MenuBarStyle";
+import P from '@splunk/react-ui/Paragraph';
+import TabBar from '@splunk/react-ui/TabBar';
+
+function Menu(){
+    const MenuCtx = useContext(MenuHeaderContxt);
+
+    const handleMenuChange = useCallback((e, { selectedTabId }) => {
+        MenuCtx.setActiveTabId(selectedTabId);
+    }, []);
+
+    return(
+            <StyledMenuBar>
+                 <StyledMenuBarLeft>
+                     <StyledTab activeTabId={MenuCtx.activeTabId} onChange={handleMenuChange}>
+                        <TabBar.Tab label="Profiles" tabId="Profiles" />
+                        <TabBar.Tab label="Groups" tabId="Groups" />
+                        <TabBar.Tab label="Inventory" tabId="Inventory" />
+                    </StyledTab>
+                 </StyledMenuBarLeft>
+                 <StyledMenuBarRight>
+                    <div>
+                        <P>
+                            Splunk Connect for SNMP
+                        </P>
+                    </div>
+                 </StyledMenuBarRight>
+             </StyledMenuBar>
+    )
+}
+
+export default Menu;

frontend/packages/manager/src/components/menu_header/TabPanels.jsx

@@ -0,0 +1,41 @@
+import React, {useContext} from 'react';
+import MenuHeaderContxt from '../../store/menu-header-contxt';
+import ProfilesPage from "../../pages/ProfilesPage";
+import InventoryPage from "../../pages/InventoryPage";
+import GroupsPage from "../../pages/GroupsPage";
+
+import { InventoryDevicesValidationContxtProvider } from "../../store/inventory-devices-validation-contxt";
+import { ProfilesValidationContxtProvider } from "../../store/profiles-validation-contxt";
+
+
+function TabPanels(){
+    const MenuCtx = useContext(MenuHeaderContxt);
+
+    return(
+        <div>
+            {
+                MenuCtx.activeTabId == "Profiles" ?
+                    <ProfilesValidationContxtProvider>
+                        <ProfilesPage />
+                    </ProfilesValidationContxtProvider>
+                    : null
+            }
+            {
+                MenuCtx.activeTabId == "Groups" ?
+                        <InventoryDevicesValidationContxtProvider>
+                            <GroupsPage />
+                        </InventoryDevicesValidationContxtProvider>
+                     : null
+            }
+            {
+                MenuCtx.activeTabId == "Inventory" ?
+                        <InventoryDevicesValidationContxtProvider>
+                            <InventoryPage />
+                        </InventoryDevicesValidationContxtProvider>
+                     : null
+            }
+        </div>
+    )
+};
+
+export default TabPanels;

frontend/packages/manager/src/pages/GroupsPage.jsx

@@ -5,19 +5,9 @@ import Button from '@splunk/react-ui/Button';
 import GroupContext from "../store/group-contxt";
 
 function GroupsPage() {
-    const GrCtx = useContext(GroupContext);
-
-    const handleRequestOpen = () => {
-        GrCtx.setAddGroupOpen(true);
-        GrCtx.setIsGroupEdit(false);
-        GrCtx.setGroupName('');
-        GrCtx.setGroupId(null);
-    };
-
 
     return (
         <div>
-            <Button onClick={handleRequestOpen} ref={GrCtx.addGroupModalToggle} label="Add new group" />
             <GroupsList/>
             <AddGroupModal />
         </div>

frontend/packages/manager/src/pages/InventoryPage.jsx

@@ -7,15 +7,8 @@ import Button from '@splunk/react-ui/Button';
 function InventoryPage() {
     const InvCtx = useContext(InventoryContext);
 
-    const handleRequestOpen = () => {
-        InvCtx.setAddOpen(true);
-        InvCtx.setIsEdit(false);
-        InvCtx.resetFormData();
-    };
-
     return (
         <div>
-            <Button onClick={handleRequestOpen} ref={InvCtx.addModalToggle} label="Add new device" />
             <AddInventoryModal />
             <InventoryList inventoryChange={InvCtx.inventoryChange}/>
         </div>

frontend/packages/manager/src/pages/ProfilesPage.jsx

@@ -5,20 +5,9 @@ import Button from '@splunk/react-ui/Button';
 import ProfileContext from "../store/profile-contxt";
 
 function ProfilesPage(){
-    const ProfCtx = useContext(ProfileContext);
-
-    const handleRequestOpen = () => {
-        ProfCtx.setProfileName("");
-        ProfCtx.setFrequency(1);
-        ProfCtx.setVarBinds(null);
-        ProfCtx.setConditions(null);
-        ProfCtx.setAddOpen(true);
-        ProfCtx.setIsEdit(false);
-    };
 
     return (
         <div>
-            <Button onClick={handleRequestOpen} ref={ProfCtx.addModalToggle} label="Add new profile" />
             <AddProfileModal />
             <ProfilePanel />
         </div>

frontend/packages/manager/src/store/menu-header-contxt.jsx

@@ -0,0 +1,20 @@
+import React, {useState, createContext, useRef, useContext} from 'react';
+
+const MenuHeaderContxt = createContext();
+
+export function MenuHeaderContxtProvider(props){
+    const [activeTabId, setActiveTabId] = useState('Profiles');
+
+    const context = {
+        activeTabId: activeTabId,
+        setActiveTabId: setActiveTabId
+    };
+
+    return(
+        <MenuHeaderContxt.Provider value={context}>
+            {props.children}
+        </MenuHeaderContxt.Provider>
+    )
+};
+
+export default MenuHeaderContxt;

frontend/packages/manager/src/styles/HeaderStyle.jsx

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+const StyledHeader = styled.div`
+    height: 188px;
+    width: 100%;
+    display: flex;
+`;
+
+
+const StyledHeaderLeft = styled.div`
+    height: 188px;
+    width: 50%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    & > div{
+        margin-left: 20px;
+        width: 600px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: left;
+        flex-direction: column;
+    }
+
+    & > div > #project-title > P{
+        font-style: normal;
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 24px;
+    }
+
+    & > div > #project-description > P{
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 16px;
+    }
+`;
+
+const StyledHeaderRight = styled.div`
+    height: 188px;
+    width: 50%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    & > div {
+        display: flex;
+        margin-right: 20px;
+    }
+`;
+
+export { StyledHeader, StyledHeaderLeft, StyledHeaderRight }