adds about sciNote modal

app/controllers/client_api/configurations_controller.rb

@@ -0,0 +1,23 @@
+module ClientApi
+  class ConfigurationsController < ApplicationController
+
+    def about_scinote
+      respond_to do |format|
+        format.json do
+          render json: {
+            scinoteVersion: Scinote::Application::VERSION,
+            addons: list_all_addons
+          }, status: :ok
+        end
+      end
+    end
+
+    private
+
+    def list_all_addons
+      Rails::Engine.subclasses
+                   .select { |c| c.name.start_with?('Scinote') }
+                   .map(&:parent)
+    end
+  end
+end

app/javascript/src/components/Navigation/components/AboutScinoteModal.jsx

@@ -0,0 +1,35 @@
+// @flow
+import React from "react";
+import type { Node } from "react";
+import { FormattedMessage } from "react-intl";
+import { Modal } from "react-bootstrap";
+
+type Props = {
+  showModal: boolean,
+  scinoteVersion: string,
+  addons: Array<string>,
+  onModalClose: Function
+};
+
+export default (props: Props): Node => {
+  const { showModal, scinoteVersion, addons, onModalClose } = props;
+  return (
+    <Modal show={showModal} onHide={onModalClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>
+          <FormattedMessage id="general.about_scinote" />
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <strong>
+          <FormattedMessage id="general.core_version" />
+        </strong>
+        <p>{scinoteVersion}</p>
+        <strong>
+          <FormattedMessage id="general.addon_versions" />
+        </strong>
+        {addons.map((addon: string): Node => <p>{addon}</p>)}
+      </Modal.Body>
+    </Modal>
+  );
+};

app/javascript/src/components/Navigation/components/InfoDropdown.jsx

@@ -11,6 +11,8 @@ import {
 } from "../../../config/routes";
 import { getSciNoteInfo } from "../../../services/api/configurations_api";
 
+import AboutScinoteModal from "./AboutScinoteModal";
+
 type State = {
   modalOpen: boolean,
   scinoteVersion: string,
@@ -20,21 +22,26 @@ type State = {
 class InfoDropdown extends Component<*, State> {
   constructor(props: any) {
     super(props);
-    this.state = { modalOpen: false, scinoteVersion: "", addons: [] };
-    (this: any).showAboutUsModal = this.showAboutUsModal.bind(this);
+    this.state = { showModal: false, scinoteVersion: "", addons: [] };
+    (this: any).showAboutSciNoteModal = this.showAboutSciNoteModal.bind(this);
+    (this: any).closeModal = this.closeModal.bind(this);
   }
 
-  showAboutUsModal(): void {
+  showAboutSciNoteModal(): void {
     getSciNoteInfo().then(response => {
       const { scinoteVersion, addons } = response;
       (this: any).setState({
         scinoteVersion,
         addons,
-        modalOpen: true
+        showModal: true
       });
     });
   }
 
+  closeModal(): void {
+    (this: any).setState({ showModal: false });
+  }
+
   render() {
     return (
       <NavDropdown
@@ -65,8 +72,14 @@ class InfoDropdown extends Component<*, State> {
           <FormattedMessage id="info_dropdown.contact_us" />
         </MenuItem>
         <MenuItem divider />
-        <MenuItem>
+        <MenuItem onClick={this.showAboutSciNoteModal}>
           <FormattedMessage id="info_dropdown.about_scinote" />
+          <AboutScinoteModal
+            showModal={this.state.showModal}
+            scinoteVersion={this.state.scinoteVersion}
+            addons={this.state.addons}
+            onModalClose={this.closeModal}
+          />
         </MenuItem>
       </NavDropdown>
     );

app/javascript/src/config/locales/messages.js

@@ -6,7 +6,10 @@ export default {
       update: "Update",
       edit: "Edit",
       loading: "Loading ...",
-      upload: "Upload"
+      upload: "Upload",
+      about_scinote: "About sciNote",
+      core_version: "sciNote core version",
+      addon_versions: "Addon versions"
     },
     page_title: {
       root: "SciNote",

config/routes.rb

@@ -18,7 +18,7 @@ Rails.application.routes.draw do
     get '/settings/*all', to: 'client_api/settings#index'
 
     namespace :client_api, defaults: { format: 'json' } do
-      %i(activities teams notifications users confirmations).each do |path|
+      %i(activities teams notifications users configurations).each do |path|
         draw path
       end
     end

config/routes/configurations.rb

@@ -0,0 +1,2 @@
+# scinote configurations routes
+get '/about_scinote', to: 'configurations#about_scinote'

config/routes/confirmations.rb

@@ -1,2 +0,0 @@
-# scinote configurations routes
-get '/about_scinote', to: 'configurations_controller#about_scinote'