#8: Add tooltips to settings [partial]

src/App.js

@@ -7,6 +7,7 @@ import DependencyList from './components/DependencyList/DependencyList';
 import DownloadProgress from './components/DownloadProgress/DownloadProgress';
 import ErrorDetails from './components/ErrorDetails/ErrorDetails';
 import Grid from './components/UI/Grid/Grid';
+import InfoDetails from './components/InfoDetails/InfoDetails';
 import IPCContainer from './containers/IPCContainer/IPCContainer';
 import Loading from './components/UI/Loading/Loading';
 import Modal from './components/UI/Modal/Modal';
@@ -121,6 +122,7 @@ class App extends IPCContainer {
       !this.props.DismissDependencies &&
       this.props.AllowMount;
 
+    const infoDisplay = this.createModalConditionally(this.props.DisplayInfo, <InfoDetails/>, true);
     const rebootDisplay = this.createModalConditionally(this.props.RebootRequired, <Reboot />);
     const configDisplay = this.createModalConditionally(showConfig, <Configuration version={selectedVersion} />);
     const dependencyDisplay = this.createModalConditionally(showDependencies, <DependencyList/>);
@@ -156,12 +158,13 @@ class App extends IPCContainer {
     return (
       <div className={'App'}>
         {selectAppPlatformDisplay}
-        {errorDisplay}
         {dependencyDisplay}
         {upgradeDisplay}
-        {downloadDisplay}
         {configDisplay}
+        {infoDisplay}
+        {downloadDisplay}
         {rebootDisplay}
+        {errorDisplay}
         <div className={'AppContainer'}>
           <div className={'AppHeader'}>
             <Box>
@@ -203,6 +206,7 @@ const mapStateToProps = state => {
     DismissDependencies: state.install.DismissDependencies,
     DisplayConfiguration: state.mounts.DisplayConfiguration,
     DisplayError: state.error.DisplayError,
+    DisplayInfo: state.error.DisplayInfo,
     DisplaySelectAppPlatform: state.common.DisplaySelectAppPlatform,
     DownloadActive: state.download.DownloadActive,
     InstallActive: state.install.InstallActive,

src/components/ConfigurationItem/ConfigurationItem.js

@@ -3,8 +3,16 @@ import './ConfigurationItem.css';
 import settings from '../../assets/settings';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
+import {connect} from 'react-redux';
+import {notifyInfo} from '../../redux/actions/error_actions';
 
-export default props => {
+const mapDispatchToProps = dispatch => {
+  return {
+    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg))
+  }
+};
+
+export default connect(null, mapDispatchToProps)(props => {
   const handleChanged = (e) => {
     const target = e.target;
     if (target.type === 'checkbox') {
@@ -17,7 +25,7 @@ export default props => {
   if (settings[props.grouping] && settings[props.grouping][props.label]) {
     const displayInfo = () => {
       const description = settings[props.grouping][props.label];
-      alert(description);
+      props.notifyInfo(props.label, description);
     };
 
     infoDisplay = <a href={void(0)}
@@ -120,4 +128,4 @@ export default props => {
       </table>
     </div>
   );
-};
+});

src/components/InfoDetails/InfoDetails.css

@@ -0,0 +1,11 @@
+.InfoDetailsHeading {
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+.InfoDetailsContent {
+  max-height: 70vh;
+  min-width: 80vw;
+  overflow-y: auto;
+  margin-bottom: 8px;
+}

src/components/InfoDetails/InfoDetails.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {dismissInfo} from '../../redux/actions/error_actions';
+import {connect} from 'react-redux';
+import Box from '../UI/Box/Box';
+import Button from '../UI/Button/Button';
+import './InfoDetails.css';
+
+const mapStateToProps = state => {
+  return {
+    InfoMessage: state.error.InfoStack.length > 0 ? state.error.InfoStack[0] : '',
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    dismissInfo: () => dispatch(dismissInfo()),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(props => {
+  return (
+    <Box dxDark dxStyle={{padding: '8px'}}>
+      <h1 className={'InfoDetailsHeading'}>{props.InfoMessage.title}</h1>
+      <div className={'InfoDetailsContent'}>
+        <p style={{textAlign: 'left'}}>{props.InfoMessage.message}</p>
+      </div>
+      <Button clicked={props.dismissInfo}>Dismiss</Button>
+    </Box>
+  );
+});

src/redux/actions/error_actions.js

@@ -13,6 +13,14 @@ export const clearError = () => {
   };
 };
 
+export const CLEAR_INFO = 'error/clearInfo';
+export const clearInfo = () => {
+  return {
+    type: CLEAR_INFO,
+    payload: null,
+  };
+};
+
 export const dismissError = () => {
   return (dispatch, getState) => {
     dispatch(clearError());
@@ -27,6 +35,12 @@ export const dismissError = () => {
   };
 };
 
+export const dismissInfo = () => {
+  return dispatch => {
+    dispatch(clearInfo());
+  };
+};
+
 export const notifyError = (msg, critical, callback) => {
   return dispatch => {
     ErrorActions = [callback, ...ErrorActions];
@@ -36,6 +50,14 @@ export const notifyError = (msg, critical, callback) => {
   };
 };
 
+export const notifyInfo = (title, msg) => {
+  return dispatch => {
+    title = title ? title.toString() : 'Information';
+    msg = msg ? msg.toString() : '';
+    dispatch(setInfo(title, msg));
+  };
+};
+
 export const SET_ERROR_INFO = 'error/setErrorInfo';
 export const setErrorInfo = (msg, critical) => {
   return {
@@ -45,4 +67,16 @@ export const setErrorInfo = (msg, critical) => {
       critical
     }
   }
+};
+
+
+export const SET_INFO = 'error/setInfo';
+export const setInfo = (title, msg) => {
+  return {
+    type: SET_INFO,
+    payload: {
+      title,
+      msg
+    }
+  }
 };

src/redux/reducers/error_reducer.js

@@ -1,13 +1,17 @@
 import {createReducer} from 'redux-starter-kit';
 import {
   CLEAR_ERROR,
-  SET_ERROR_INFO
+  CLEAR_INFO,
+  SET_ERROR_INFO,
+  SET_INFO
 } from '../actions/error_actions';
 
 export const errorReducer = createReducer({
   DisplayError: false,
+  DisplayInfo: false,
   ErrorCritical: false,
   ErrorStack: [],
+  InfoStack: [],
 }, {
   [CLEAR_ERROR]: state => {
     const errorStack = (state.ErrorStack.length > 0) ? state.ErrorStack.slice(1) : [];
@@ -17,6 +21,14 @@ export const errorReducer = createReducer({
       ErrorStack: errorStack,
     }
   },
+  [CLEAR_INFO]: state => {
+    const infoStack = (state.InfoStack.length > 0) ? state.InfoStack.slice(1) : [];
+    return {
+      ...state,
+      DisplayInfo: (infoStack.length > 0),
+      InfoStack: infoStack,
+    }
+  },
   [SET_ERROR_INFO]: (state, action) => {
     const errorStack = [action.payload.msg, ...state.ErrorStack];
     return {
@@ -25,5 +37,16 @@ export const errorReducer = createReducer({
       ErrorCritical: state.ErrorCritical || action.payload.critical,
       ErrorStack: errorStack,
     }
+  },
+  [SET_INFO]: (state, action) => {
+    const infoStack = [{
+      title: action.payload.title,
+      message: action.payload.msg
+    }, ...state.InfoStack];
+    return {
+      ...state,
+      DisplayInfo: true,
+      InfoStack: infoStack,
+    }
   }
 });