Merge pull request #1437 from BlueBrain/feature/org-welcome-page-bg

Customization options for start page's background

README.md

@@ -2,14 +2,13 @@
 
 # Nexus Fusion
 
-> Note: expect this repo to be renamed to https://github.com/BlueBrain/nexus-fusion to match the new application name and Nexus component branding scheme.
+> Note: expect this repo to be renamed to <https://github.com/BlueBrain/nexus-fusion> to match the new application name and Nexus component branding scheme.
 
 <p align="center">
   <img alt="Build Status" src="https://github.com/BlueBrain/nexus-web/workflows/Review/badge.svg">
   <a href="https://codecov.io/gh/BlueBrain/nexus-web">
     <img src="https://codecov.io/gh/BlueBrain/nexus-web/branch/master/graph/badge.svg" alt="Coverage Status">
   </a>
-
   <a href="https://twitter.com/intent/follow?screen_name=bluebrainnexus">
     <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/bluebrainnexus.svg?style=social&label=Follow">
   </a>
@@ -62,13 +61,13 @@ Run end to end tests:
 
 a. To run the tests in headed mode:
 
-```
+```sh
 yarn cy:open
 ```
 
 b. To run the tests in headless mode:
 
-```
+```sh
 yarn cy:run
 ```
 
@@ -99,14 +98,13 @@ docker build . --tag=nexus-web
 - `CLIENT_ID`: The application name used for _OpenID Connect_ authentication (default is `nexus-web`)
 - `API_ENDPOINT`: The URL pointing to Nexus API. Default is '/'
 - `SERVICE_ACCOUNTS_REALM`: The realm that is configured for service accounts that should be hidden for Login. Default is 'serviceaccounts'.
-- `SECURE`: Is Nexus Fusion running in https or not. Default is `false`
 - `GTM_CODE`: The Google Analytics Identifier. GA won't be present unless an ID is specified.
 - `SENTRY_DSN`: The sentry URL Nexus Fusion needs to report errors to. Default is undefined.
 - `STUDIO_VIEW`: The location of the aggregate elastic search view that contains all the projects: `orgLabel/projectLabel/viewId`
 - `LOGO_IMG`: Url for an image to be used as Fusion logo in the Header, for example, `https://drive.boogle.com/jnsjdnsjs`
 - `LOGO_LINK`: Url for the logo, for example, `https://www.epfl.ch`
 - `FORGE_LINK`: Url for the Forge Templates button, for example, `https://some-url.hi`
-- `DATA_MODELS`: The location of the datamodels to be used in Activity lists in Workflow: `orgLabel/projectLabel`
+- `DATA_MODELS`: The location of the data models to be used in Activity lists in Workflow: `orgLabel/projectLabel`
 
 The following concern Plugins. [See how to manage plugin deployments](./docs/plugins.md)
 
@@ -160,7 +158,6 @@ There are several channels provided to address different issues:
 
 ## Funding & Acknowledgment
 
-The development of this software was supported by funding to the Blue Brain Project, a research center of the École polytechnique fédérale de
-Lausanne (EPFL), from the Swiss government's ETH Board of the Swiss Federal Institutes of Technology.
+The development of this software was supported by funding to the Blue Brain Project, a research center of the École polytechnique fédérale de Lausanne (EPFL), from the Swiss government's ETH Board of the Swiss Federal Institutes of Technology.
 
 Copyright © 2015-2023 Blue Brain Project/EPFL

cypress/support/e2e.js

@@ -5,7 +5,7 @@ import { loginPage } from './index';
 Cypress.Commands.add('login', (id, realm, username, password) => {
   return cy.session(id, () => {
     cy.visit(loginPage);
-    cy.findByRole('button', { name: /identity-login/i  }).click();
+    cy.findByRole('button', { name: /Identity connect/i }).click();
     cy.get('ul')
       .contains(realm.name)
       .click();
@@ -17,7 +17,7 @@ Cypress.Commands.add('login', (id, realm, username, password) => {
         cy.get('#password').type(password);
         cy.get('input[name="login"]').click();
       }
-    )
+    );
     cy.wait(500);
   });
 });

package.json

@@ -8,7 +8,7 @@
   "repository": "github:bluebrain/nexus-explorer",
   "url": "https://github.com/BlueBrain/nexus/issues/new?labels=fusion",
   "scripts": {
-    "start": "NODE_ENV=development  DEBUG=* webpack --mode development --config-name server && node dist/server.js",
+    "start": "NODE_ENV=development DEBUG=* webpack --mode development --config-name server && node dist/server.js",
     "build": "NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192  webpack --mode production",
     "test": "jest",
     "test:watch": "jest --watch --maxWorkers=4",

src/client/index.tsx

@@ -24,7 +24,7 @@ import App from '../shared/App';
 import configureStore from '../shared/store';
 import { RootState } from '../shared/store/reducers';
 import { fetchIdentities, fetchRealms } from '../shared/store/actions/auth';
-import { SEARCH_PREFENCE_LOCAL_STORAGE_KEY } from '../shared/store/actions/search';
+import { SEARCH_PREFERENCE_LOCAL_STORAGE_KEY } from '../shared/store/actions/search';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 // The app base URL
@@ -62,7 +62,7 @@ const initialState: RootState = {
   },
   search: {
     ...preloadedState.search,
-    searchPreference: localStorage.getItem(SEARCH_PREFENCE_LOCAL_STORAGE_KEY),
+    searchPreference: localStorage.getItem(SEARCH_PREFERENCE_LOCAL_STORAGE_KEY),
   },
 };
 

src/pages/HomePage/HomePage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { HomeSeachByPresets, HomeSearchByApps } from '../../shared/organisms';
+import { HomeSearchByPresets, HomeSearchByApps } from '../../shared/organisms';
 import { MyData } from '../../shared/canvas';
 import { RootState } from '../../shared/store/reducers';
 import IdentityPage from '../../pages/IdentityPage/IdentityPage';
@@ -14,7 +14,7 @@ const Home: React.FunctionComponent = () => {
 
   return (
     <div className="home-view view-container">
-      <HomeSeachByPresets />
+      <HomeSearchByPresets />
       <HomeSearchByApps />
       <MyData />
     </div>

src/pages/IdentityPage/IdentityPage.tsx

@@ -1,14 +1,14 @@
-import React, { useRef, useState } from 'react';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { Realm } from '@bbp/nexus-sdk';
 import { Button, Divider } from 'antd';
+import { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router';
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
-import { Realm } from '@bbp/nexus-sdk';
+import useClickOutside from '../../shared/hooks/useClickOutside';
+import { performLogin } from '../../shared/store/actions/auth';
+import { setPreferredRealm } from '../../shared/store/actions/config';
 import { updateAboutModalVisibility } from '../../shared/store/actions/modals';
 import { RootState } from '../../shared/store/reducers';
-import useClickOutside from '../../shared/hooks/useClickOutside';
-import * as authActions from '../../shared/store/actions/auth';
-import * as configActions from '../../shared/store/actions/config';
 
 import './styles.less';
 
@@ -18,13 +18,17 @@ const LandingVideo = ({ videoUrl }: { videoUrl: string }) => (
     muted
     autoPlay
     className="home-authentication-fusion"
-    poster={require('../../shared/images/BrainRegionsNexusPage.jpg')}
     preload="auto"
     controls={false}
   >
     <source
       type="video/mp4"
-      src={videoUrl || require('../../shared/images/BrainRegionsNexusPage.mp4')}
+      src={videoUrl || require('../../shared/videos/BrainRegionsNexusPage.mp4')}
+    />
+    {/* Load an image as a Fallback */}
+    <img
+      alt="Landing page image"
+      src={require('../../shared/images/BrainRegionsNexusPage.jpg')}
     />
   </video>
 );
@@ -57,28 +61,24 @@ const IdentityPage: React.FC<{}> = () => {
   );
   const openAboutModal = () => dispatch(updateAboutModalVisibility(true));
   useClickOutside(popoverRef, () => onPopoverVisibleChange(false));
+
   return (
     <div
       className="home-authentication"
       style={{ backgroundColor: layoutSettings.mainColor }}
     >
-      <img
-        src={
-          layoutSettings.landingPosterImg ||
-          require('../../shared/images/EPFL_BBP_logo.png')
-        }
-        className="home-authentication-epfl"
-      />
-      <LandingVideo videoUrl={layoutSettings.landingVideo} />
       <div className="home-authentication-content">
-        <div className="title">Nexus.Fusion</div>
-        <div className="actions">
+        <h1 className="title">Nexus.Fusion</h1>
+        <nav
+          className="actions"
+          title="Main navigation"
+          aria-label="Main navigation"
+        >
           <div className="home-authentication-content-connect">
             {!realmsFilter.length ? (
               <Button
                 key="no-realms"
-                disabled
-                role="button"
+                title="No realms available, please contact your administrator."
                 size="large"
                 className="no-realms-btn"
               >
@@ -88,8 +88,8 @@ const IdentityPage: React.FC<{}> = () => {
               <Button
                 key="realm-selector"
                 size="large"
-                role="button"
-                aria-label="identity-login"
+                title="Select a realm to connect to"
+                aria-label="Identity connect"
                 onClick={() => onPopoverVisibleChange(true)}
               >
                 Connect
@@ -113,17 +113,16 @@ const IdentityPage: React.FC<{}> = () => {
                     <Button
                       onClick={e => {
                         e.preventDefault();
-                        dispatch(configActions.setPreferredRealm(item.name));
+                        dispatch(setPreferredRealm(item.name));
                         dispatch(
-                          authActions.performLogin(
-                            location.state as TLocationState
-                          )
+                          performLogin(location.state as TLocationState)
                         );
                       }}
                       className="connect-btn"
                       size="large"
                       type="link"
-                      role="button"
+                      title={`Connect via ${item.name}`}
+                      aria-label={`Connect via ${item.name}`}
                     >
                       {item.name}
                     </Button>
@@ -136,6 +135,7 @@ const IdentityPage: React.FC<{}> = () => {
           <Button
             className="nav-btn"
             size="large"
+            title="View all available studios"
             onClick={() => history.push('/studios')}
           >
             View Studios
@@ -145,16 +145,40 @@ const IdentityPage: React.FC<{}> = () => {
             size="large"
             rel="noopener noreferrer"
             target="_blank"
+            title="View the documentation for Nexus Fusion"
             href="https://bluebrainnexus.io/docs/index.html"
             className="nav-btn"
           >
             Documentation
           </Button>
-          <Button className="nav-btn" size="large" onClick={openAboutModal}>
+          <Button
+            className="nav-btn"
+            size="large"
+            onClick={openAboutModal}
+            title="About Nexus Fusion"
+          >
             About
           </Button>
-        </div>
+        </nav>
       </div>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={
+          layoutSettings.logoImgLink ||
+          'https://www.epfl.ch/research/domains/bluebrain'
+        }
+      >
+        <img
+          alt="Landing page logo"
+          src={
+            layoutSettings.landingPosterImg ||
+            require('../../shared/images/EPFL_BBP_logo.svg')
+          }
+          className="home-authentication-epfl"
+        />
+      </a>
+      <LandingVideo videoUrl={layoutSettings.landingVideo} />
     </div>
   );
 };