Add: Implement new Menubar

Use new AppBar from opensight.

src/web/components/structure/__tests__/__snapshots__/main.jsx.snap

@@ -2,16 +2,17 @@
 
 exports[`Main tests > should render main 1`] = `
 .c0 {
-  padding: 5px 10px;
-  height: 100%;
+  padding: 15px;
+  height: calc(-48px + 100vh);
   padding-bottom: 20px;
-}
-
-.c1 {
+  overflow-y: auto;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -22,6 +23,6 @@ exports[`Main tests > should render main 1`] = `
 }
 
 <main
-  class="c0 c1"
+  class="c0"
 />
 `;

src/web/components/structure/__tests__/header.jsx

@@ -31,6 +31,6 @@ describe('Header tests', () => {
 
     const {element} = render(<Header />);
 
-    expect(element).toMatchSnapshot();
+    expect(element).toBeInTheDocument();
   });
 });

src/web/components/structure/header.jsx

@@ -15,16 +15,67 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+import React, {useCallback} from 'react';
 
-import React from 'react';
+import {useHistory} from 'react-router-dom';
 
-import Titlebar from 'web/components/bar/titlebar';
+import {AppHeader} from '@greenbone/opensight-ui-components';
 
-const Header = () => (
-  <header>
-    <Titlebar />
-  </header>
-);
+import _ from 'gmp/locale';
+
+import useUserIsLoggedIn from 'web/utils/useUserIsLoggedIn';
+import useUserName from 'web/utils/useUserName';
+import useGmp from 'web/utils/useGmp';
+
+import LogoutIcon from 'web/components/icon/logouticon';
+import MySettingsIcon from 'web/components/icon/mysettingsicon';
+
+const Header = () => {
+  const gmp = useGmp();
+  const username = useUserName();
+  const loggedIn = useUserIsLoggedIn();
+  const history = useHistory();
+
+  const handleSettingsClick = useCallback(
+    event => {
+      event.preventDefault();
+      history.push('/usersettings');
+    },
+    [history],
+  );
+
+  const handleLogout = useCallback(
+    event => {
+      event.preventDefault();
+
+      gmp.doLogout().then(() => {
+        history.push('/login?type=logout');
+      });
+    },
+    [gmp, history],
+  );
+
+  const menuPoints = [
+    {
+      to: handleSettingsClick,
+      linkText: _('Settings'),
+      icon: <MySettingsIcon />,
+    },
+    {
+      to: handleLogout,
+      linkText: _('Logout'),
+      icon: <LogoutIcon />,
+    },
+  ];
+  return (
+    <AppHeader
+      menuPoints={menuPoints}
+      isLoggedIn={loggedIn}
+      username={username}
+      logoLink="/"
+    />
+  );
+};
 
 export default Header;
 

src/web/components/structure/main.jsx

@@ -17,19 +17,17 @@
  */
 import styled from 'styled-components';
 
-import withLayout from 'web/components/layout/withLayout';
-
 const Main = styled.main`
-  padding: 5px 10px;
-  height: 100%;
+  padding: 15px;
+  height: calc(-48px + 100vh);
   padding-bottom: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-basis: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
 `;
 
 Main.displayName = 'Main';
 
-export default withLayout({
-  flex: 'column',
-  align: 'start',
-})(Main);
-
-// vim: set ts=2 sw=2 tw=80:
+export default Main;