Merge pull request #851 from ZmagoD/zd_SCI_1568

adds integration tests for 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

@@ -1,4 +1,5 @@
-import React from "react";
+//  @flow
+import React, { Component } from "react";
 import { FormattedMessage } from "react-intl";
 import { NavDropdown, MenuItem } from "react-bootstrap";
 import {
@@ -8,35 +9,81 @@ import {
   PREMIUM_LINK,
   CONTACT_US_LINK
 } from "../../../config/routes";
+import { getSciNoteInfo } from "../../../services/api/configurations_api";
 
-const InfoDropdown = () =>
-  <NavDropdown
-    noCaret
-    title={
-      <span>
-        <span className="glyphicon glyphicon-info-sign" />&nbsp;
-        <span className="visible-xs-inline visible-sm-inline">
-          <FormattedMessage id="navbar.info_label" />
-        </span>
-      </span>
-    }
-    id="nav-info-dropdown"
-  >
-    <MenuItem href={CUSTOMER_SUPPORT_LINK} target="_blank">
-      <FormattedMessage id="info_dropdown.customer_support" />
-    </MenuItem>
-    <MenuItem href={TUTORIALS_LINK} target="_blank">
-      <FormattedMessage id="info_dropdown.tutorials" />
-    </MenuItem>
-    <MenuItem href={RELEASE_NOTES_LINK} target="_blank">
-      <FormattedMessage id="info_dropdown.release_notes" />
-    </MenuItem>
-    <MenuItem href={PREMIUM_LINK} target="_blank">
-      <FormattedMessage id="info_dropdown.premium" />
-    </MenuItem>
-    <MenuItem href={CONTACT_US_LINK} target="_blank">
-      <FormattedMessage id="info_dropdown.contact_us" />
-    </MenuItem>
-  </NavDropdown>;
+import AboutScinoteModal from "./AboutScinoteModal";
+
+type State = {
+  modalOpen: boolean,
+  scinoteVersion: string,
+  addons: Array<string>
+};
+
+class InfoDropdown extends Component<*, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = { showModal: false, scinoteVersion: "", addons: [] };
+    (this: any).showAboutSciNoteModal = this.showAboutSciNoteModal.bind(this);
+    (this: any).closeModal = this.closeModal.bind(this);
+  }
+
+  showAboutSciNoteModal(): void {
+    getSciNoteInfo().then(response => {
+      const { scinoteVersion, addons } = response;
+      (this: any).setState({
+        scinoteVersion,
+        addons,
+        showModal: true
+      });
+    });
+  }
+
+  closeModal(): void {
+    (this: any).setState({ showModal: false });
+  }
+
+  render() {
+    return (
+      <NavDropdown
+        noCaret
+        title={
+          <span>
+            <span className="glyphicon glyphicon-info-sign" />&nbsp;
+            <span className="visible-xs-inline visible-sm-inline">
+              <FormattedMessage id="navbar.info_label" />
+            </span>
+          </span>
+        }
+        id="nav-info-dropdown"
+      >
+        <MenuItem href={CUSTOMER_SUPPORT_LINK} target="_blank">
+          <FormattedMessage id="info_dropdown.customer_support" />
+        </MenuItem>
+        <MenuItem href={TUTORIALS_LINK} target="_blank">
+          <FormattedMessage id="info_dropdown.tutorials" />
+        </MenuItem>
+        <MenuItem href={RELEASE_NOTES_LINK} target="_blank">
+          <FormattedMessage id="info_dropdown.release_notes" />
+        </MenuItem>
+        <MenuItem href={PREMIUM_LINK} target="_blank">
+          <FormattedMessage id="info_dropdown.premium" />
+        </MenuItem>
+        <MenuItem href={CONTACT_US_LINK} target="_blank">
+          <FormattedMessage id="info_dropdown.contact_us" />
+        </MenuItem>
+        <MenuItem divider />
+        <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>
+    );
+  }
+}
 
 export default InfoDropdown;

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",
@@ -204,7 +207,8 @@ export default {
       tutorials: "Tutorials",
       release_notes: "Release notes",
       premium: "Premium",
-      contact_us: "Contact us"
+      contact_us: "Contact us",
+      about_scinote: "About sciNote"
     },
     user_account_dropdown: {
       greeting: "Hi, {name}",

app/javascript/src/services/api/configurations_api.js

@@ -0,0 +1,6 @@
+// @flow
+import axiosInstance from "./config";
+import { ABOUT_SCINOTE_PATH } from "./endpoints";
+
+export const getSciNoteInfo = (): Promise<*> =>
+  axiosInstance.get(ABOUT_SCINOTE_PATH).then(({ data }) => data);

app/javascript/src/services/api/endpoints.js

@@ -36,3 +36,6 @@ export const INVITE_USERS_PATH = "/client_api/users/invite_users";
 
 // settings
 export const SETTINGS_TEAMS = "/settings/teams";
+
+// scinote configurations
+export const ABOUT_SCINOTE_PATH =  "/client_api/about_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).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'

features/navigation/addons_versions_modal.feature

@@ -0,0 +1,21 @@
+Feature: Addon versions
+  As a sciNote User
+  I want know what addon are activated
+  So that I know what features are enabled
+
+  Background:
+    Given the "BioSistemika Process" team exists
+    Given the following users are registered
+     | email                   | password           | password_confirmation | full_name   | initials  |
+     | admin@myorg.com         | mypassword1234     | mypassword1234        | Karli Novak | KN        |
+    And "admin@myorg.com" is in "BioSistemika Process" team as a "admin"
+    And is signed in with "admin@myorg.com", "mypassword1234"
+
+  @javascript
+  Scenario: Open the sciNote addons modal
+    Given I'm on the profile page
+    And I click "#nav-info-dropdown" icon
+    And I click "About sciNote" link within ".dropdown.open"
+    Then I should see "About sciNote"
+    And I should see "sciNote core version"
+    And I should see "Addon versions"

features/settings_page/profile.feature

@@ -15,7 +15,7 @@ Background:
  Scenario: Successful navigate to profile page
    Given I'm on the home page of "BioSistemika Process" team
    And I click on Avatar
-   And I click "Settings" link within "user-account-dropdown"
+   And I click "Settings" link within "#user-account-dropdown"
    Then I should see "My Profile"
 
 @javascript

features/step_definitions/shared_steps.rb

@@ -15,7 +15,7 @@ Given(/^I click "(.+)" link$/) do |link|
 end
 
 Given(/^I click "(.+)" link within "(.+)"$/) do |link, element|
-  within("##{element}") do
+  within(element) do
     click_link link
   end
 end
@@ -94,6 +94,10 @@ Then(/^I should see "([^"]*)" in "([^"]*)" input field$/) do |text, container_id
   expect(container).to have_xpath("//input[@value='#{text}']")
 end
 
+Given("I click {string} icon") do |id|
+  find(:css, id).click
+end
+
 Then(/^(?:|I )click on "([^"]*)" element$/) do |selector|
   find(selector).click
 end
@@ -116,5 +120,6 @@ Then(/^I change "([^"]*)" with "([^"]*)" in "([^"]*)" textarea field$/) do |old_
 end
 
 Then(/^I should see "([^"]*)" on "([^"]*)" element$/) do |text, element|
+  wait_for_ajax
   expect(find(element)).to have_content(text)
 end

spec/controllers/client_api/configurations_controller_spec.rb

@@ -0,0 +1,10 @@
+require 'rails_helper'
+
+describe ClientApi::ConfigurationsController, type: :controller do
+  login_user
+
+  describe '#about_scinote' do
+    let(:subject) { get :about_scinote, format: :json }
+    it { is_expected.to be_success }
+  end
+end