global nav (#195)

- Added global nav
- Added account dropdown list menu
- Removed old login button
- Added new `--list` modifier to dropdown so styling can be reused
- Testing for `GlobalNav` and `LoginMenu`

closes #144

Authored-by: Lois Wells <lois.wells@raspberrypi.org>

Author: create-issue-branch[bot]

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Functionality for renaming a file (#193)
 - Styling for a secondary button (#193)
 - The web component `runCompleted` event now returns `duration: null` if the host page's tab loses focus during the code run (#192)
+- Global nav on editor site with link to `raspberrypi.org` and account menu
 
 ### Changed
 

src/App.js

@@ -5,6 +5,7 @@ import Routes from './components/Routes'
 import { useCookies } from 'react-cookie';
 import { BrowserRouter } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import GlobalNav from './components/GlobalNav/GlobalNav';
 
 function App() {
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
@@ -15,7 +16,7 @@ function App() {
     id='app'
     className = {`--${cookies.theme || themeDefault } font-size-${cookies.fontSize || 'small' }`}>
       <BrowserRouter>
-        { isEmbedded ? null : <Header /> }
+        { isEmbedded ? null : <><GlobalNav/><Header/></> }
         <Routes />
       </BrowserRouter>
     </div>

public/editor_logo.svg src/assets/editor_logo.svgpublic/editor_logo.svg renamed to src/assets/editor_logo.svg

@@ -21,3 +21,5 @@ $editor-light-turquoise: #B8EBE6;
 $editor-turquoise: #14BCAC;
 $editor-dark-turquoise: #11A99A;
 $editor-turquoise-grey: #72D7CD1A;
+
+$rpf-dark-blue: #2A3E4F;

src/assets/raspberrypi_logo.svg

@@ -0,0 +1,33 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { ChevronDown } from "../../Icons";
+import LoginMenu from "../Login/LoginMenu";
+import Dropdown from "../Menus/Dropdown/Dropdown";
+import './GlobalNav.scss';
+import rpf_logo from '../../assets/raspberrypi_logo.svg'
+import user_logo from '../../assets/unauthenticated_user.svg'
+
+const GlobalNav = () => {
+
+  const user = useSelector((state) => state.auth.user)
+  return (
+    <div className="editor-global-nav-wrapper">
+      <div className='editor-global-nav'>
+        <a className='editor-global-nav__home' href='https://www.raspberrypi.org/'>
+          <img src={rpf_logo} alt="Raspberry Pi Logo" />
+          <span>Raspberry Pi Foundation</span>
+        </a>
+        <div className='editor-global-nav__account'>
+          <Dropdown
+            buttonImage={user ? user.profile.picture : user_logo}
+            buttonImageAltText={user ? `${user.profile.name}'s account` : 'Account menu'}
+            ButtonIcon={ChevronDown}
+            MenuContent={LoginMenu}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default GlobalNav;

src/assets/unauthenticated_user.svg

@@ -0,0 +1,67 @@
+@import '../../colours.scss';
+
+.editor-global-nav-wrapper {
+  z-index: 2;
+}
+
+.editor-global-nav {
+  display: flex;
+  align-items: center;
+  background-color: $rpf-dark-blue;
+  height: 100%;
+  z-index: 2;
+
+  &__account {
+    margin-left: auto;
+    margin-right: var(--spacing-3);
+    height: 100%;
+
+    svg {
+      fill:  $editor-white;
+      margin: 0;
+    }
+
+    img {
+      height: var(--spacing-4);
+      margin: var(--spacing-half) 0;
+    }
+  }
+
+  &__home {
+    display: flex;
+    align-items: center;
+    margin-left: var(--spacing-8);
+    padding: var(--spacing-1) 0;
+    font-weight: var(--font-weight-bold);
+    text-decoration: none;
+    color: $editor-white;
+
+    span {
+      margin-left: var(--spacing-2);
+    }
+
+    &:visited {
+      color: $editor-white;
+    }
+  }
+}
+
+.font-size-medium {
+  .editor-global-nav {
+    &__account {
+      img {
+        margin: var(--spacing-1) var(--spacing-half);
+      }
+    }
+  }
+}
+
+.font-size-large {
+  .editor-global-nav {
+    &__account {
+      img {
+        margin: var(--spacing-1) var(--spacing-1);
+      }
+    }
+  }
+}

src/colours.scss

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, screen } from "@testing-library/react"
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import GlobalNav from "./GlobalNav";
+
+test('Global nav renders', () => {
+  const middlewares = []
+  const mockStore = configureStore(middlewares)
+  const initialState = {
+    auth: {}
+  }
+  const store = mockStore(initialState);
+  render(<Provider store={store}><GlobalNav/></Provider>);
+  expect(screen.queryByText("Raspberry Pi Foundation")).toBeInTheDocument()
+})
+
+test('When not logged in renders generic profile image', () => {
+  const middlewares = []
+  const mockStore = configureStore(middlewares)
+  const initialState = {
+    auth: {}
+  }
+  const store = mockStore(initialState);
+  render(<Provider store={store}><GlobalNav/></Provider>);
+  expect(screen.queryByAltText(`Account menu`)).toHaveAttribute('src', 'unauthenticated_user.svg')
+})
+
+test('When logged in renders user\'s profile image', () => {
+  const name = "Joe Bloggs"
+  const middlewares = []
+  const mockStore = configureStore(middlewares)
+  const initialState = {
+    auth: {
+      user: {
+        profile: {
+          name: name,
+          picture: 'image_url'
+        }
+      }
+    }
+  }
+  const store = mockStore(initialState);
+  render(<Provider store={store}><GlobalNav/></Provider>);
+  expect(screen.queryByAltText(`${name}'s account`)).toHaveAttribute('src', 'image_url')
+})

src/components/GlobalNav/GlobalNav.js

@@ -1,7 +1,6 @@
 import './Header.scss'
 import { useSelector, connect, useDispatch } from 'react-redux'
 import { toast } from 'react-toastify';
-import Login from '../Login/Login'
 import Button from '../Button/Button';
 import { SettingsIcon, SquaresIcon } from '../../Icons';
 import { saveProject, updateProject } from '../../utils/apiCallHandler';
@@ -11,10 +10,11 @@ import Dropdown from '../Menus/Dropdown/Dropdown';
 import SettingsMenu from '../Menus/SettingsMenu/SettingsMenu';
 import ProjectName from './ProjectName';
 
+import editor_logo from '../../assets/editor_logo.svg'
+
 
 const Header = (props) => {
   const { user } = props;
-  const isEmbedded = useSelector((state) => state.editor.isEmbedded);
   const project = useSelector((state) => state.editor.project);
 
   const dispatch = useDispatch();
@@ -41,15 +41,9 @@ const Header = (props) => {
   }
 
   return (
-    <>
-      { isEmbedded === false ? (
-        <div className='main-container'>
-          <Login user={user} />
-        </div>
-      ): null }
     <div className='editor-header-wrapper'>
       <header className='editor-header'>
-        <img className='editor-logo' src='/editor_logo.svg' alt='Editor logo'/>
+        <img className='editor-logo' src={editor_logo} alt='Editor logo'/>
         { user !== null ? (
           <a href='/projects' className='project-gallery-link'>
             {<><SquaresIcon />
@@ -69,7 +63,6 @@ const Header = (props) => {
         </div>
       </header>
     </div>
-    </>
   )
 };