Develop

.gitattributes

@@ -6,8 +6,11 @@
 *.c text
 *.h text
 
+# Declare files that will always have LF line endings on checkout.
+*.sh text eol=lf
+
 # Declare files that will always have CRLF line endings on checkout.
-*.sln text eol=lf
+*.sln text eol=crlf
 
 # Denote all files that are truly binary and should not be modified.
 *.png binary

frontend/.eslintrc

@@ -8,7 +8,9 @@
   "globals": {
     "__DEV__": true,
     "FILES_API_HOST": true,
-    "SOCKET_HOST": true
+    "SOCKET_HOST": true,
+    "VERSION": true,
+    "COMMIT": true
   },
   "parser": "babel-eslint",
   "rules": {

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "requests-app",
-  "version": "1.0.0",
+  "version": "0.8.0",
   "main": "src/index.js",
   "license": "MIT",
   "scripts": {

frontend/server/app.js

@@ -13,10 +13,11 @@ const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotMiddleware = require('webpack-hot-middleware');
 
 require('./auth');
-const { parseApiHost, parseWsHost } = require('./utils');
+const { parseApiHost, parseWsHost, storeUrl } = require('./utils');
 const proxy = require('./proxy');
 const authRoute = require('./routes/auth');
 const filesRoute = require('./routes/files');
+const versionsRoute = require('./routes/versions');
 const webpackConfig = require('../webpack.dev');
 
 // Main constants and setup
@@ -78,12 +79,13 @@ app.get('/login', passport.authenticate('openidconnect'));
 app.use('/api/v1/forums', proxy.forum);
 app.use('/api/v1/requests', proxy.request);
 app.use('/api/v1/files', filesRoute);
+app.use('/versions', versionsRoute);
 
 app.get('/hello', (req, res) => {
   res.status(200).send('hi');
 });
 
-app.get(/^((?!.json|__webpack_hmr).)*$/, (req, res) => {
+app.get('*', storeUrl, (req, res) => {
   res.render('index', {
     isDevelopment,
     title: 'OCWA [Development Version]',

frontend/server/routes/auth.js

@@ -35,13 +35,18 @@ router.get(
     // Clean up the token on first successful sign in
     const jwtSecret = config.get('jwtSecret');
     const jwtClaims = get(req, 'user.claims');
+    const { redirectTo } = req.session;
+
+    if (redirectTo) {
+      delete req.session.redirectTo;
+    }
 
     if (jwtClaims) {
       // Passport/KeyCloak doesn't sign the token correctly, sign here
       req.user.accessToken = jwt.sign(jwtClaims, jwtSecret);
     }
 
-    res.redirect('/');
+    res.redirect(redirectTo || '/');
   }
 );
 

frontend/server/routes/versions.js

@@ -0,0 +1,38 @@
+const config = require('config');
+const express = require('express');
+const request = require('request');
+const { parseApiHost } = require('../utils');
+
+const router = express.Router();
+
+const forumApiHost = config.get('forumApiHost');
+const requestApiHost = config.get('requestApiHost');
+
+function versionRequest(url) {
+  return new Promise((resolve, reject) => {
+    request.get(`${parseApiHost(url)}/version`, (err, resp, body) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(JSON.parse(body));
+      }
+    });
+  });
+}
+
+router.get('/', (req, res) => {
+  Promise.all([versionRequest(forumApiHost), versionRequest(requestApiHost)])
+    .then(json =>
+      res.json({
+        versions: json,
+      })
+    )
+    .catch(err => {
+      res.status(500);
+      res.json({
+        error: err.message,
+      });
+    });
+});
+
+module.exports = router;

frontend/server/utils.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 const pathRewrite = path => path.replace(/\/api\/v1\/\w+/, '');
 
 const parseApiHost = url => {
@@ -16,8 +18,24 @@ const parseWsHost = url => {
   return url;
 };
 
+// Middleware to store a URL when unauthenticated so you can be returned to it
+// after sign in is completed
+const storeUrl = (req, res, done) => {
+  if (!req.user || !req.isAuthenticated || !req.isAuthenticated()) {
+    const { originalUrl } = req;
+    const testForExt = path.extname(originalUrl);
+
+    if (testForExt.length < 1) {
+      req.session.redirectTo = req.originalUrl;
+    }
+  }
+
+  done();
+};
+
 module.exports = {
   pathRewrite,
   parseApiHost,
   parseWsHost,
+  storeUrl,
 };

frontend/src/components/app-bar/index.jsx

@@ -1,16 +1,21 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import Tooltip from '@atlaskit/tooltip';
+import { commit, version } from '@src/services/config';
 
 import * as styles from './styles.css';
 
 function AppBar({ children, icon, title }) {
   return (
     <div className={styles.container}>
-      <Link id="app-bar-brand" to="/" className={styles.brand}>
-        {icon}
-        {title}
-      </Link>
+      <Tooltip content={`OCWA Version ${version} - ${commit}`}>
+        <Link id="app-bar-brand" to="/" className={styles.brand}>
+          {icon}
+          {title}
+          <small>{`v${version}`}</small>
+        </Link>
+      </Tooltip>
       <div className={styles.actions}>{children}</div>
     </div>
   );

frontend/src/components/app-bar/menu.jsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@atlaskit/avatar';
+import Dropdown, { DropdownItem } from '@atlaskit/dropdown-menu';
+import aboutButton from '@src/modules/app/containers/about-button';
+
+const AboutDropdownItem = props => (
+  <DropdownItem {...props}>About this App</DropdownItem>
+);
+const AboutButton = aboutButton(AboutDropdownItem);
+
+function AppBarMenu({ children, user }) {
+  return (
+    <Dropdown
+      position="bottom right"
+      trigger={<Avatar borderColor="#0052CC" name={user.displayName} />}
+    >
+      <DropdownItem>{`Howdy, ${user.displayName}`}</DropdownItem>
+      {children}
+      <AboutButton />
+      <DropdownItem href="/auth/logout">Logout</DropdownItem>
+    </Dropdown>
+  );
+}
+
+AppBarMenu.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.instanceOf(DropdownItem)),
+  user: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+AppBarMenu.defaultProps = {
+  children: null,
+};
+
+export default AppBarMenu;

frontend/src/components/app-bar/styles.css

@@ -26,6 +26,12 @@
   margin-right: 15px;
 }
 
+.brand small {
+  margin: 11px 0 0 10px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.25);
+}
+
 .actions {
   display: flex;
   align-items: center;

frontend/src/components/app/index.jsx

@@ -4,22 +4,20 @@ import { Switch, Route } from 'react-router-dom';
 import Requests from '@src/modules/requests/containers/requests-list';
 import '@atlaskit/css-reset';
 
-class App extends React.Component {
-  render() {
-    return (
-      <main>
-        <AppBar />
-        <Switch>
-          <Route exact path="/" component={Requests} />
-          <Route
-            exact
-            path="/requests/:requestId"
-            render={() => 'Request Page'}
-          />
-        </Switch>
-      </main>
-    );
-  }
+function App() {
+  return (
+    <main>
+      <AppBar />
+      <Switch>
+        <Route exact path="/" component={Requests} />
+        <Route
+          exact
+          path="/requests/:requestId"
+          render={() => 'Request Page'}
+        />
+      </Switch>
+    </main>
+  );
 }
 
 export default App;

frontend/src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { commit, version } from '@src/services/config';
 
 import App from 'modules/app/containers/app';
 import createStore from './services/store';
@@ -10,7 +11,16 @@ import sagas from './sagas';
 
 const containerEl = document.getElementById('main');
 
+/* eslint-disable no-console */
+console.log('-------------------------');
+console.log('OCWA');
+console.log(`Version: ${version}`);
+console.log(`Commit: ${commit}`);
+console.log('-------------------------');
+/* eslint-enable no-console */
+
 const store = createStore(reducers, sagas);
+/* eslint-disable react/jsx-filename-extension */
 const renderApp = () =>
   render(
     <Provider store={store}>
@@ -20,6 +30,7 @@ const renderApp = () =>
     </Provider>,
     containerEl
   );
+/* eslint-enable react/jsx-filename-extension */
 
 renderApp();
 

frontend/src/modules/app/actions.js

@@ -2,6 +2,29 @@ export const fetchToken = () => ({
   type: 'app/get/token',
 });
 
+export const toggleAbout = () => ({
+  type: 'app/about/toggle',
+});
+
+export const versionsRequested = () => ({
+  type: 'app/versions/requested',
+});
+
+export const versionsSuccess = payload => ({
+  type: 'app/versions/success',
+  payload,
+});
+
+export const versionsFailed = payload => ({
+  type: 'app/versions/failed',
+  error: true,
+  payload,
+});
+
 export default {
   fetchToken,
+  toggleAbout,
+  versionsFailed,
+  versionsRequested,
+  versionsSuccess,
 };

frontend/src/modules/app/components/app/about.jsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+import Spinner from '@atlaskit/spinner';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { commit, version } from '@src/services/config';
+import { uid } from 'react-uid';
+
+import * as styles from './styles.css';
+
+const makeVersionString = (v, hash) => [v, hash].join(' - ');
+
+function About({ data, fetchStatus, open, onToggle }) {
+  return (
+    <ModalTransition>
+      {open && (
+        <Modal
+          actions={[{ text: 'Done', onClick: onToggle }]}
+          heading="About this App"
+        >
+          {fetchStatus === 'loading' && (
+            <div className={styles.aboutLoading}>
+              <Spinner size="large" />
+            </div>
+          )}
+          {fetchStatus === 'failed' && (
+            <div className={styles.aboutErrorText}>
+              <WarningIcon primaryColor="red" size="large" />
+              <h5>Unable to load version data at this moment</h5>
+            </div>
+          )}
+          {fetchStatus === 'loaded' && (
+            <dl className={styles.aboutList}>
+              <dt>User Interface Version</dt>
+              <dd>{`${version} - ${commit}`}</dd>
+              {data.map(d => (
+                <React.Fragment key={uid(d)}>
+                  <dt>{d.name}</dt>
+                  <dd>{makeVersionString(d.v, d.hash)}</dd>
+                </React.Fragment>
+              ))}
+            </dl>
+          )}
+        </Modal>
+      )}
+    </ModalTransition>
+  );
+}
+
+About.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      v: PropTypes.string.isRequired,
+      hash: PropTypes.string.isRequired,
+      version: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  fetchStatus: PropTypes.oneOf(['idle', 'loading', 'loaded', 'failed']),
+  open: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default About;