task/FP-327 - Onboarding welcome messages

client/src/components/Workbench/Workbench.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { Route, Switch, useRouteMatch, Redirect } from 'react-router-dom';
+import { Alert } from 'reactstrap';
 import { useDispatch, useSelector } from 'react-redux';
 import Dashboard from '../Dashboard';
 import Allocations from '../Allocations';
@@ -22,6 +23,7 @@ function Workbench() {
   const showUIPatterns = isDebug;
   // Get systems and any other initial data we need from the backend
   useEffect(() => {
+    dispatch({ type: 'FETCH_WELCOME' });
     dispatch({ type: 'FETCH_SYSTEMS' });
     dispatch({ type: 'FETCH_AUTHENTICATED_USER' });
     dispatch({ type: 'FETCH_WORKBENCH' });
@@ -32,11 +34,78 @@ function Workbench() {
     dispatch({ type: 'FETCH_NOTIFICATIONS' });
   }, []);
 
+  const welcomeMessages = useSelector(state => state.welcomeMessages);
+
+  const onDismissWelcome = section => {
+    const newMessagesState = {
+      ...welcomeMessages,
+      [section]: false
+    };
+    dispatch({ type: 'SAVE_WELCOME', payload: newMessagesState });
+  };
+
   return (
     <div className="workbench-wrapper">
       <NotificationToast />
       <Sidebar />
       <div className="workbench-content">
+        <Switch>
+          <Route path={`${path}${ROUTES.DASHBOARD}`}>
+            <Alert
+              isOpen={welcomeMessages.dashboard}
+              toggle={() => onDismissWelcome('dashboard')}
+              color="secondary"
+              className="welcomeMessage"
+            >
+              This page allows you to monitor your job status, get help with
+              tickets, and view the status of the High Performance Computing
+              (HPC) systems.
+            </Alert>
+          </Route>
+          <Route path={`${path}${ROUTES.DATA}`}>
+            <Alert
+              isOpen={welcomeMessages.datafiles}
+              toggle={() => onDismissWelcome('datafiles')}
+              color="secondary"
+              className="welcomeMessage"
+            >
+              This page allows you to upload and manage your files.
+            </Alert>
+          </Route>
+          <Route path={`${path}${ROUTES.APPLICATIONS}`}>
+            <Alert
+              isOpen={welcomeMessages.applications}
+              toggle={() => onDismissWelcome('applications')}
+              color="secondary"
+              className="welcomeMessage"
+            >
+              This page allows you to submit jobs to the HPC systems or access
+              Cloud services using a variety of applications.
+            </Alert>
+          </Route>
+          <Route path={`${path}${ROUTES.ALLOCATIONS}`}>
+            <Alert
+              isOpen={welcomeMessages.allocations}
+              toggle={() => onDismissWelcome('allocations')}
+              color="secondary"
+              className="welcomeMessage"
+            >
+              This page allows you to monitor the status of allocations on the
+              HPC systems and view a breakdown of team usage.
+            </Alert>
+          </Route>
+          <Route path={`${path}${ROUTES.HISTORY}`}>
+            <Alert
+              isOpen={welcomeMessages.history}
+              toggle={() => onDismissWelcome('history')}
+              color="secondary"
+              className="welcomeMessage"
+            >
+              This page allows you to monitor a log of all previous job
+              submissions.
+            </Alert>
+          </Route>
+        </Switch>
         <Switch>
           <Route path={`${path}${ROUTES.DASHBOARD}`}>
             <Dashboard />

client/src/components/Workbench/Workbench.scss

@@ -18,6 +18,11 @@
     height: 100%;
 }
 
+.workbench-content > :nth-child(2) {
+    flex-grow: 1;
+}
+
+
 .workbench-content .wb-text-primary {
     color: #484848;
 }
@@ -103,3 +108,8 @@
   justify-content: center;
   align-items: center;
 }
+
+.welcomeMessage {
+  margin: 20px 20px 0 20px;
+  flex-grow: 0;
+}

client/src/redux/reducers/index.js

@@ -14,6 +14,7 @@ import authenticatedUser from './authenticated_user.reducer';
 import { pushKeys } from './systems.reducers';
 import notifications from './notifications.reducers';
 import workbench from './workbench.reducers';
+import welcomeMessages from './welcome.reducers';
 
 export default combineReducers({
   jobs,
@@ -31,5 +32,6 @@ export default combineReducers({
   apps,
   pushKeys,
   notifications,
-  workbench
+  workbench,
+  welcomeMessages
 });

client/src/redux/reducers/welcome.reducers.js

@@ -0,0 +1,43 @@
+const initialWelcomeMessages = {
+  dashboard: true,
+  applications: true,
+  datafiles: true,
+  allocations: true,
+  history: true
+};
+
+function welcomeMessages(state = initialWelcomeMessages, action) {
+  switch (action.type) {
+    case 'WELCOME_FETCH_STARTED':
+      return {
+        ...state
+      };
+    case 'WELCOME_FETCH_SUCCESS':
+      return {
+        ...state,
+        ...action.payload
+      };
+    case 'WELCOME_FETCH_ERROR':
+      return {
+        ...state
+      };
+    case 'WELCOME_SAVE_STARTED':
+      return {
+        ...state
+      };
+    case 'WELCOME_SAVE_SUCCESS':
+      return {
+        ...state,
+        ...action.payload
+      };
+    case 'WECOME_SAVE_ERROR':
+      return {
+        ...state,
+        ...action.paylod
+      };
+    default:
+      return state;
+  }
+}
+
+export default welcomeMessages;

client/src/redux/sagas/index.js

@@ -32,6 +32,10 @@ import {
 } from './tickets.sagas';
 import { watchAuthenticatedUser } from './authenticated_user.sagas';
 import { watchWorkbench } from './workbench.sagas';
+import {
+  watchFetchWelcomeMessages,
+  watchSaveWelcomeMessages
+} from './welcome.sagas';
 
 export default function* rootSaga() {
   yield all([
@@ -64,6 +68,8 @@ export default function* rootSaga() {
     watchAuthenticatedUser(),
     watchSocket(),
     watchFetchNotifications(),
-    watchWorkbench()
+    watchWorkbench(),
+    watchFetchWelcomeMessages(),
+    watchSaveWelcomeMessages()
   ]);
 }

client/src/redux/sagas/welcome.sagas.js

@@ -0,0 +1,42 @@
+import { put, takeLatest, takeLeading } from 'redux-saga/effects';
+
+export function* fetchWelcomeMessages() {
+  yield put({ type: 'WELCOME_FETCH_STARTED' });
+  try {
+    const messages = JSON.parse(localStorage.getItem('welcomeMessages')) || {};
+    yield put({
+      type: 'WELCOME_FETCH_SUCCESS',
+      payload: messages
+    });
+  } catch (error) {
+    yield put({
+      type: 'WELCOME_FETCH_ERROR'
+    });
+  }
+}
+
+export function* watchFetchWelcomeMessages() {
+  yield takeLeading('FETCH_WELCOME', fetchWelcomeMessages);
+}
+
+export function* saveWelcomeMessages(action) {
+  yield put({ type: 'WELCOME_SAVE_STARTED' });
+  try {
+    localStorage.setItem('welcomeMessages', JSON.stringify(action.payload));
+    yield put({
+      type: 'WELCOME_SAVE_SUCCESS',
+      payload: action.payload
+    });
+  } catch (error) {
+    // Return the intended state of welcome messages
+    // regardless of save success or failure
+    yield put({
+      type: 'WELCOME_SAVE_ERROR',
+      payload: action.payload
+    });
+  }
+}
+
+export function* watchSaveWelcomeMessages() {
+  yield takeLatest('SAVE_WELCOME', saveWelcomeMessages);
+}