[#38: Enhance new repertory release available notification - partial] [Added FocusTrap to modals]

src/components/DependencyList/Dependency/Dependency.js

@@ -22,9 +22,9 @@ export default connect(mapStateToProps)(props => {
             </td>
             <td>
               {props.AllowDownload ?
-                <a href={void(0)}
-                  className={'DependencyLink'}
-                  onClick={()=>{props.onDownload(); return false;}}><u>Install</u></a> :
+                <a href={'#'}
+                   className={'DependencyLink'}
+                   onClick={()=>{props.onDownload(); return false;}}><u>Install</u></a> :
                 'Installing...'}
             </td>
           </tr>
@@ -32,4 +32,4 @@ export default connect(mapStateToProps)(props => {
       </table>
     </div>
   );
-});
+});

src/components/NewReleases/NewRelease/NewRelease.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import * as Constants from '../../../constants';
+import Button from '../../UI/Button/Button';
+
+export default ({release}) => {
+  return (
+    <div>
+      <h3>{'[' + Constants.RELEASE_TYPES[release.Release].toUpperCase() + '] ' + release.Display }</h3>
+      <table cellSpacing={0} cellPadding={0} width="97%">
+        <tbody>
+        <tr style={{height: '4px'}}/>
+        <tr>
+          <td width="50%">
+            <Button buttonStyles={{width: '100%'}}>Changes</Button>
+          </td>
+          <td>
+            <div style={{width: 'var(--default_spacing)'}}/>
+          </td>
+          <td width="50%">
+            <Button buttonStyles={{width: '100%'}}>Install</Button>
+          </td>
+        </tr>
+        <tr style={{height: 'var(--default_spacing)'}}/>
+        </tbody>
+      </table>
+    </div>
+  );
+};

src/components/NewReleases/NewReleases.css

@@ -0,0 +1,11 @@
+.NewReleasesHeading {
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+.NewReleasesContent {
+  max-height: 60vh;
+  min-width: 50vw;
+  overflow-y: auto;
+  margin-bottom: var(--default_spacing);
+}

src/components/NewReleases/NewReleases.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import Box from '../UI/Box/Box';
+import Button from '../UI/Button/Button';
+import NewRelease from './NewRelease/NewRelease';
+import './NewReleases.css';
+import {setDismissNewReleasesAvailable} from '../../redux/actions/release_version_actions';
+
+const mapStateToProps = state => {
+  return {
+    NewReleasesAvailable: state.relver.NewReleasesAvailable,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    dismissNewReleasesAvailable: () => dispatch(setDismissNewReleasesAvailable(true)),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(props => {
+  const newReleases = props.NewReleasesAvailable.map(i => {
+    return <NewRelease key={'new_release_' + i.Release + '_' + i.Version} release={i} />;
+  });
+
+  return (
+    <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
+      <h1 className={'NewReleasesHeading'}>New Repertory Versions Available</h1>
+      <div className={'NewReleasesContent'}>
+        {newReleases}
+      </div>
+      <Button clicked={props.dismissNewReleasesAvailable}>Dismiss</Button>
+    </Box>
+  );
+});

src/components/UI/Button/Button.js

@@ -4,6 +4,7 @@ import './Button.css';
 export default props => {
   return (
     <button disabled={props.disabled}
+            autoFocus={props.autoFocus}
             className={'Button'}
             style={props.buttonStyles}
             onClick={props.clicked}>{props.children}</button>

src/components/UI/CheckBox/CheckBox.js

@@ -6,6 +6,7 @@ export default props => {
     <div className={'CheckBoxOwner'}>
       <label className='CheckBoxLabel'>{props.label}
         <input checked={JSON.parse(props.checked)}
+               autoFocus={props.autoFocus}
                disabled={props.disabled}
                onChange={props.changed}
                type='checkbox'/>
@@ -13,4 +14,4 @@ export default props => {
       </label>
     </div>
   );
-};
+};

src/components/UI/DropDown/DropDown.js

@@ -11,6 +11,7 @@ export default props => {
   return (
     <div className={'DropDown'}>
       <select className={'DropDownSelect' + (props.auto ? ' Auto ' : '') + (props.alt ? ' Alt ' : '') }
+              autoFocus={props.autoFocus}
               disabled={props.disabled}
               onChange={props.changed}
               value={props.selected}>
@@ -19,4 +20,4 @@ export default props => {
     </div>
   );
 
-};
+};

src/components/UI/Modal/Modal.js

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import './Modal.css'
+import FocusTrap from 'focus-trap-react';
 
 export default props => {
   let modalStyles = [];
@@ -12,11 +14,14 @@ export default props => {
   }
 
   return (
-    <div
-      className={modalStyles.join(' ')}
-      onClick={props.clicked}>
-      <div className={contentStyles.join(' ')}>
-        {props.children}
+    <FocusTrap active={!props.disableFocusTrap}>
+      <div
+        className={modalStyles.join(' ')}
+        onClick={props.clicked}>
+        <div className={contentStyles.join(' ')}>
+          {props.children}
+        </div>
       </div>
-    </div>);
-};
+    </FocusTrap>
+  );
+};