adds integration tests for about sciNote 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,68 @@ 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>;
+type State = {
+  modalOpen: boolean,
+  scinoteVersion: string,
+  addons: Array<string>
+};
+
+class InfoDropdown extends Component<*, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = { modalOpen: false, scinoteVersion: "", addons: [] };
+    (this: any).showAboutUsModal = this.showAboutUsModal.bind(this);
+  }
+
+  showAboutUsModal(): void {
+    getSciNoteInfo().then(response => {
+      const { scinoteVersion, addons } = response;
+      (this: any).setState({
+        scinoteVersion,
+        addons,
+        modalOpen: true
+      });
+    });
+  }
+
+  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>
+          <FormattedMessage id="info_dropdown.about_scinote" />
+        </MenuItem>
+      </NavDropdown>
+    );
+  }
+}
 
 export default InfoDropdown;

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

@@ -204,7 +204,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

@@ -42,3 +42,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 confirmations).each do |path|
         draw path
       end
     end

config/routes/confirmations.rb

@@ -0,0 +1,2 @@
+# scinote configurations routes
+get '/about_scinote', to: 'configurations_controller#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
@@ -92,3 +92,7 @@ Then(/^I should see "([^"]*)" in "([^"]*)" input field$/) do |text, container_id
   container = page.find_by_id(container_id)
   expect(container).to have_xpath("//input[@value='#{text}']")
 end
+
+Given("I click {string} icon") do |id|
+  find(:css, id).click
+end

yarn.lock

@@ -4865,7 +4865,7 @@ prop-types-extra@^1.0.1:
   dependencies:
     warning "^3.0.0"
 
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.5.6:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies: