feat: Add browser info and app version (#1046)

* feat: Add browser info and app version * quick fix * lock file * add build_num * add screenshot e2e test * quick test build_num * revert header * include i18n texts
2019-10-15 14:09:14 -03:00 · 2019-10-15 14:09:14 -03:00 · c217b8bbde
commit c217b8bbde
parent 74f3cbc4b2
13 changed files with 172 additions and 24 deletions
--- a/.webpack/webpack.base.js
+++ b/.webpack/webpack.base.js
@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const PACKAGE = require('../platform/viewer/package.json');
 // ~~ RULES
 const loadShadersRule = require('./rules/loadShaders.js');
 const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
@ -9,6 +10,7 @@ const TerserJSPlugin = require('terser-webpack-plugin');
 // ~~ ENV VARS
 const NODE_ENV = process.env.NODE_ENV;
 const QUICK_BUILD = process.env.QUICK_BUILD;
+const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';

 module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
  if (!process.env.NODE_ENV) {
@ -68,6 +70,8 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
        'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
        'process.env.APP_CONFIG': JSON.stringify(process.env.APP_CONFIG || ''),
        'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
+        'process.env.VERSION_NUMBER': JSON.stringify(PACKAGE.version || ''),
+        'process.env.BUILD_NUM': JSON.stringify(BUILD_NUM),
      }),
    ],
    // Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881
--- a/platform/i18n/src/locales/en-US/AboutModal.json
+++ b/platform/i18n/src/locales/en-US/AboutModal.json
@ -0,0 +1,14 @@
+{
+  "Browser": "Browser",
+  "Build Number": "Build Number",
+  "Latest Master Commits": "Latest Master Commits",
+  "More details": "More details",
+  "Name": "Name",
+  "OHIF Viewer - About": "OHIF Viewer - About",
+  "OS": "OS",
+  "Report an issue": "Report an issue",
+  "Repository URL": "Repository URL",
+  "Value": "Value",
+  "Version Information": "Version Information",
+  "Visit the forum": "Visit the forum"
+}
--- a/platform/i18n/src/locales/en-US/index.js
+++ b/platform/i18n/src/locales/en-US/index.js
@ -1,3 +1,4 @@
+import AboutModal from "./AboutModal.json";
 import Buttons from "./Buttons.json";
 import CineDialog from "./CineDialog.json";
 import Common from "./Common.json";
@ -8,6 +9,7 @@ import UserPreferencesModal from "./UserPreferencesModal.json";

 export default { 
  'en-US': {
+    AboutModal,
    Buttons,
    CineDialog,
    Common,
--- a/platform/i18n/src/locales/pt-BR/AboutModal.json
+++ b/platform/i18n/src/locales/pt-BR/AboutModal.json
@ -0,0 +1,14 @@
+{
+  "Browser": "Navegador",
+  "Build Number": "Número da compilação",
+  "Latest Master Commits": "Últimos Commits na Master",
+  "More details": "Mais detalhes",
+  "Name": "Nome",
+  "OHIF Viewer - About": "OHIF Viewer - Sobre",
+  "OS": "SO",
+  "Report an issue": "Informar um problema",
+  "Repository URL": "URL do Repositório",
+  "Value": "Valor",
+  "Version Information": "Informação da Versão",
+  "Visit the forum": "Visite o fórum"
+}
--- a/platform/i18n/src/locales/pt-BR/index.js
+++ b/platform/i18n/src/locales/pt-BR/index.js
@ -1,3 +1,4 @@
+import AboutModal from "./AboutModal.json";
 import Buttons from "./Buttons.json";
 import CineDialog from "./CineDialog.json";
 import Common from "./Common.json";
@ -6,6 +7,7 @@ import UserPreferencesModal from "./UserPreferencesModal.json";

 export default { 
  'pt-BR': {
+    AboutModal,
    Buttons,
    CineDialog,
    Common,
--- a/platform/ui/package.json
+++ b/platform/ui/package.json
@ -39,6 +39,7 @@
  "dependencies": {
    "@babel/runtime": "^7.5.5",
    "@ohif/i18n": "^0.2.3",
+    "browser-detect": "^0.2.28",
    "classnames": "2.2.6",
    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
--- a/platform/ui/src/components/userPreferencesModal/AboutModal.js
+++ b/platform/ui/src/components/userPreferencesModal/AboutModal.js
@ -1,14 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'react-bootstrap-modal';
+import detect from 'browser-detect';
 import './AboutModal.styl';
+import { withTranslation } from '../../utils/LanguageProvider';

 import 'react-bootstrap-modal/lib/css/rbm-patch.css';

 // TODO: Is this the only component importing these?
 import './../../design/styles/common/modal.styl';

-export class AboutModal extends Component {
+class AboutModal extends Component {
  constructor(props) {
    super(props);
  }
@ -18,16 +20,41 @@ export class AboutModal extends Component {
    onCancel: PropTypes.func,
  };

-  static itemsPreset = [
-    {
-      name: 'Repository URL',
-      value: 'https://github.com/OHIF/Viewers/',
-    },
-    {
-      name: 'Latest Master Commits',
-      value: 'https://github.com/OHIF/Viewers/commits/master',
-    },
-  ];
+  itemsPreset() {
+    const { t } = this.props;
+    const browser = detect();
+    const capitalize = s =>
+      s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase();
+
+    return [
+      {
+        name: t('Repository URL'),
+        value: 'https://github.com/OHIF/Viewers/',
+        link: 'https://github.com/OHIF/Viewers/',
+      },
+      {
+        name: t('Latest Master Commits'),
+        value: 'https://github.com/OHIF/Viewers/commits/master',
+        link: 'https://github.com/OHIF/Viewers/commits/master',
+      },
+      {
+        name: 'Version Number',
+        value: process.env.VERSION_NUMBER,
+      },
+      {
+        name: t('Build Number'),
+        value: process.env.BUILD_NUM,
+      },
+      {
+        name: t('Browser'),
+        value: `${capitalize(browser.name)} ${browser.version}`,
+      },
+      {
+        name: t('OS'),
+        value: browser.os,
+      },
+    ];
+  }

  static defaultProps = {
    isOpen: false,
@ -38,15 +65,20 @@ export class AboutModal extends Component {
      <tr key={item.name}>
        <td>{item.name}</td>
        <td>
-          <a target="_blank" href={item.value}>
-            {item.value}
-          </a>
+          {item.link ? (
+            <a target="_blank" href={item.link}>
+              {item.value}
+            </a>
+          ) : (
+            item.value
+          )}
        </td>
      </tr>
    );
  }

  render() {
+    const { t } = this.props;
    return (
      <Modal
        show={this.props.isOpen}
@ -58,7 +90,7 @@ export class AboutModal extends Component {
        keyboard={false}
      >
        <Modal.Header closeButton>
-          <Modal.Title>About</Modal.Title>
+          <Modal.Title>{t('OHIF Viewer - About')}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="btn-group">
@ -67,34 +99,36 @@ export class AboutModal extends Component {
              target="_blank"
              href="https://groups.google.com/forum/#!forum/cornerstone-platform"
            >
-              Visit the forum
+              {t('Visit the forum')}
            </a>
+            {` `}
            <a
              className="btn btn-default"
              target="_blank"
-              href="https://github.com/OHIF/Viewers/issues"
+              href="https://github.com/OHIF/Viewers/issues/new/choose"
            >
-              Report an issue
+              {t('Report an issue')}
            </a>
+            {` `}
            <a
              className="btn btn-default"
              target="_blank"
              href="http://ohif.org"
            >
-              More details
+              {t('More details')}
            </a>
          </div>
          <div>
-            <h3>Version Information</h3>
+            <h3>{t('Version Information')}</h3>
            <table className="table table-responsive">
              <thead>
                <tr>
-                  <th>Name</th>
-                  <th>Value</th>
+                  <th>{t('Name')}</th>
+                  <th>{t('Value')}</th>
                </tr>
              </thead>
              <tbody>
-                {AboutModal.itemsPreset.map(item => this.renderTableRow(item))}
+                {this.itemsPreset().map(item => this.renderTableRow(item))}
              </tbody>
            </table>
          </div>
@ -103,3 +137,7 @@ export class AboutModal extends Component {
    );
  }
 }
+
+const connectedComponent = withTranslation('AboutModal')(AboutModal);
+export { connectedComponent as AboutModal };
+export default connectedComponent;
--- a/platform/ui/src/design/styles/common/modal.styl
+++ b/platform/ui/src/design/styles/common/modal.styl
@ -12,6 +12,7 @@
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
+  background: rgba(0,0,0,0.5);

  .modal-dialog

--- a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js
+++ b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js
@ -4,6 +4,7 @@ describe('OHIFStandaloneViewer', () => {
  });

  it('loads route with at least 2 rows', () => {
+    cy.screenshot();
    cy.get('#studyListData tr')
      .its('length')
      .should('be.gt', 2);
--- a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js
+++ b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js
@ -11,6 +11,7 @@ describe('OHIF Study Viewer Page', () => {
  });

  it('checks if series thumbnails are being displayed', () => {
+    cy.screenshot();
    cy.get('.ThumbnailEntryContainer')
      .its('length')
      .should('be.gt', 1);
--- a/platform/viewer/src/components/Header/Header.css
+++ b/platform/viewer/src/components/Header/Header.css
@ -96,3 +96,27 @@
  color: #91b9cd;
  margin-right: 1rem;
 }
+
+.header-versionInfo {
+  display: inline-block;
+  color: black;
+  background: #9ccef9;
+  padding: 0px 8px;
+  border-radius: 16px;
+  font-size: 12px;
+  margin-left: 10px;
+  font-weight: bold;
+}
+
+.header-versionInfoHome {
+  display: block;
+  color: black;
+  position: absolute;
+  bottom: 16px;
+  right: 0;
+  background: #9ccef9;
+  padding: 0px 8px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: bold;
+}
--- a/platform/viewer/src/components/Header/Header.js
+++ b/platform/viewer/src/components/Header/Header.js
@ -101,6 +101,14 @@ class Header extends Component {
            </Link>
          )}

+          <span
+            className={`${
+              this.props.home ? 'header-versionInfoHome' : 'header-versionInfo'
+            }`}
+          >
+            v{process.env.VERSION_NUMBER}
+          </span>
+
          {this.props.children}

          {showStudyList && !this.props.home && (
--- a/yarn.lock
+++ b/yarn.lock
@ -1100,13 +1100,34 @@
    pirates "^4.0.0"
    source-map-support "^0.5.9"

-"@babel/runtime@7.1.2", "@babel/runtime@7.5.5", "@babel/runtime@7.6.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0":
+"@babel/runtime@7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.2.tgz#81c89935f4647706fc54541145e6b4ecfef4b8e3"
+  integrity sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
+"@babel/runtime@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
+  integrity sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
  version "7.5.5"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
  integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
  dependencies:
    regenerator-runtime "^0.13.2"

+"@babel/runtime@^7.6.0":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
+  integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
  version "7.6.0"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@ -3998,6 +4019,13 @@ brorand@^1.0.1:
  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=

+browser-detect@^0.2.28:
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/browser-detect/-/browser-detect-0.2.28.tgz#5688fc22f638390614ebea4646483403fb20ebfb"
+  integrity sha512-KeWGHqYQmHDkCFG2dIiX/2wFUgqevbw/rd6wNi9N6rZbaSJFtG5kel0HtprRwCGp8sqpQP79LzDJXf/WCx4WAw==
+  dependencies:
+    core-js "^2.5.7"
+
 browser-process-hrtime@^0.1.2:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
@ -6134,6 +6162,11 @@ detab@2.0.2, detab@^2.0.0:
  dependencies:
    repeat-string "^1.5.4"

+detect-browser@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-4.7.0.tgz#982429971b68cffcdfa03267e91e3de7e194a9f0"
+  integrity sha512-x+7zkRxwEiQ8qLKKfln9pTa4n87fbPHVpHyImmpEQn5lAmKurWBVbg0tb99ruAHqSA0ejrXMp0MahKEulE7LqA==
+
 detect-file@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
@ -15448,6 +15481,11 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==

+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+
 regenerator-runtime@^0.13.2:
  version "0.13.3"
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"