From 679fdaebb1a611859a968f22b85c37fbc00b055b Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 31 Jan 2019 14:29:45 +0000
Subject: [PATCH] Bug 22250: Clean up Mana KB integration with serials and
 reports

This patch makes many changes to templates and JavaScript related to the
integration of Mana with serials reports:

 - Many incorrect uses of the raw filter with html
 - Corrections to Bootstrap modal markup
 - Untranslatable strings moved out of JavaScript
 - Removed markup and JavaScript related to reports comments, a feature
   which doesn't exist in this version.

  New include file: mana/mana-comment-status.inc

  This file contains hidden-by-default messages which are shown during
  the process of submitting a comment on a subscription.

  New include file: mana/mana-share-report.inc

  This file contains the "Share report" modal markup formerly in
  guided_reports_start.tt

  New JavaScript file: mana.js

  Previously mana.inc, an include file containing only JavaScript which
  didn't include any template processing.

  Changed: mana/mana-report-search-result.inc

  This include file is now a full template so that jQuery's load()
  function can be used to pull its contents into the reports search
  modal.

  Changed: svc/mana/search

  This script was returning json-encoded HTML. Now it returns regular
  HTML.

To test you must have Mana configured and enabled. Apply the patch and
go to Reports -> Saved reports.

 - Choose New report -> New SQL from Mana. A "Mana search" modal should
   appear.
   - Perform a search which will return results, e.g. "circulation."
   - A "Loading" indicator should appear while the results are being
     retrieved. It should disappear when results appear.
   - Results should appear in the DataTable with sorting, paging, and
     search options.
   - In the "Notes" column, notes longer than 200 characters should be
     truncated with a "Show more" link. Clicking it should expand the
     comment and reveal a "Show less" link in its place.
   - Click the "Import" button (previously "Use"). The button icon
     should change to a loading indicator.
   - When the import is complete you should be redirected to a view of
     your new report.

Go to Serials and click the "Search on Mana" link in the sidebar.

 - Perform a search for a serial
 - Results should appear in a DataTable with sorting, paging, and search
   options.
 - Sorting by title should ignore articles "a," "an," and "the."

Create a new subscription or edit an existing subscription which will
match a record in Mana.

 - On the second step of adding/editing the subscription a message
   should appear at the top of the form, "Searching for subscription in
   Mana Knowledge Base," with a loading icon.
 - When searching has completed a "Show Mana results" link should
   appear.
 - Clicking the link should trigger a modal showing search results which
   match your subscription, displayed in a DataTable with sorting,
   paging, and search options.
 - The last column of the table should contain "Import" and "Report"
   buttons.
   - Clicking the "Report" button should trigger a menu. Any existing
     comments will be listed as well as a "New comment" item.
     - Clicking an existing comment should cause the menu to close and a
       "Submitting comment" message to appear. It should be shortly
       replaced with a "Your comment has been submitted" message.
     - Clicking "New comment" should reveal a comment form.
       - It should not be possible to submit an empty comment.
       - Clicking the "cancel" link should redisplay the search results.
       - Submitting a new comment should trigger a "Submitting comment"
         message followed by a "Your comment has been submitted"
         message.
   - In the table of search results, click the "Import" button
     (previously "Use"). The button icon should change to a loading
     indicator.
     - The modal should close and the data from Mana should be loaded
       into the subscription entry form.

View the detail page of a subscription which has saved with Mana data.

  - There should be a "Report mistake" button in the toolbar. Clicking
    it should reveal a menu of comments like the one you saw previously.
     - Clicking an existing comment should cause the menu to close and a
       "Submitting comment" message to appear. It should be shortly
       replaced with a "Your comment has been submitted" message.
     - Clicking "New comment" should reveal a comment form modal.
       - It should not be possible to submit an empty comment.
       - Clicking the "cancel" link should hide the modal.
       - Submitting a new comment should trigger a "Submitting comment"
         message followed by a "Your comment has been submitted"
         message.

Signed-off-by: Michal Denar <black23@gmail.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
---
 .../intranet-tmpl/prog/en/includes/mana.inc   |  44 ----
 .../en/includes/mana/mana-comment-status.inc  |  10 +
 .../mana/mana-report-search-result.inc        | 190 ++++++++-----
 .../en/includes/mana/mana-share-report.inc    |  95 +++++++
 .../mana/mana-subscription-search-result.inc  | 138 +++++-----
 .../prog/en/includes/reports-toolbar.inc      | 133 +++-------
 .../prog/en/includes/serials-toolbar.inc      | 102 +++----
 .../modules/mana/mana-report-search-result.tt |   2 +-
 .../mana/mana-subscription-search-result.tt   |   2 +-
 .../modules/reports/guided_reports_start.tt   | 213 +++++++--------
 .../prog/en/modules/serials/serials-search.tt |   1 -
 .../en/modules/serials/subscription-add.tt    |  42 ++-
 .../en/modules/serials/subscription-detail.tt |  12 +-
 koha-tmpl/intranet-tmpl/prog/js/mana.js       |  83 ++++++
 .../intranet-tmpl/prog/js/subscription-add.js | 249 ++++++++++--------
 svc/mana/search                               |   5 +-
 16 files changed, 747 insertions(+), 574 deletions(-)
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/mana.inc
 create mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-comment-status.inc
 create mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-share-report.inc
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/mana.js

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/mana.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/mana.inc
deleted file mode 100644
index 2dd7e86c96..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/mana.inc
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-//<![CDATA[
-$(document).ready(function() {
-    function mana_increment(mana_id, resource, fieldvalue, stepvalue = 1) {
-        $.ajax( {
-            type: "POST",
-            url: "/cgi-bin/koha/svc/mana/increment",
-            data: {id: mana_id, resource: resource, field: fieldvalue, step: stepvalue},
-            datatype: "json",
-        })
-    }
-
-    function mana_comment( target_id, manamsg, resource_type ) {
-        $.ajax( {
-            type: "POST",
-            url: "/cgi-bin/koha/svc/mana/share",
-            data: {message: manamsg, resource: resource_type , resource_id: target_id},
-            datatype: "json",
-        })
-    }
-
-    $(document).on('click', 'ul li.mana-comment', function() {
-        id = $(this).attr('data-id');
-        mana_increment(id, 'resource_comment', 'nb');
-    });
-
-    $(document).on('click', 'ul li.mana-other-comment', function() {
-        $('#mana-comment-box').modal('show');
-    });
-
-    $(document).on('click', '#mana-send-comment', function() {
-        var resource_type = $('#mana-resource').val();
-        var resource_id = $('#mana-resource-id').val();
-        var comment = $("#mana-comment").val();
-        mana_comment(resource_id, comment, resource_type);
-        $("#mana-comment-box").modal("hide");
-    });
-
-    $(document).on('click', '#mana-comment-close', function() {
-        $("#mana-comment-box").modal("hide");
-    });
-});
-//]]>
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-comment-status.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-comment-status.inc
new file mode 100644
index 0000000000..edd73008ee
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-comment-status.inc
@@ -0,0 +1,10 @@
+<div id="mana_comment_progress" class="dialog message mana_comment_status" style="display:none">
+    <div id="loading"> <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Submitting comment </div>
+</div>
+<div id="mana_comment_success" class="dialog message mana_comment_status" style="display:none">
+    Your comment has been submitted
+</div>
+<div id="mana_comment_failed" class="dialog alert mana_comment_status" style="display:none">
+    Your comment could not be submitted. Please try again later.
+    <div id="mana_comment_errortext"></div>
+</div>
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-report-search-result.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-report-search-result.inc
index 6257472b52..36cbd1f675 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-report-search-result.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-report-search-result.inc
@@ -1,82 +1,128 @@
+[% USE Asset %]
 [% USE KohaDates %]
 [% USE Koha %]
 [% USE AuthorisedValues %]
 [% USE Branches %]
 [% USE raw %]
 
-<script>
-//<![CDATA[
-$(document).ready(function() {
-    $(document).on('click', 'button.mana-use', function() {
-        id = $(this).attr('id');
-        mana_use(id.substr(9));
-    });
+[% INCLUDE 'doc-head-open.inc' %]
+<title>Koha &rsaquo; Reports &rsaquo; Mana Knowledge Base reports search</title>
+[% INCLUDE 'doc-head-close.inc' %]
+[% Asset.css("css/reports.css") | $raw %]
+[% Asset.css("css/datatables.css") | $raw %]
+</head>
 
-    $(document).on('change', 'select.mana-actions', function() {
-        report_id = $(this).attr('id').substr(13);
-        if ($(this).val() == 'other') {
-            $('input#selected_id').val(report_id);
-            $('#comment_box').modal('show');
-        } else {
-            comment_id = $(this).val();
-            mana_increment(comment_id, 'resource_comment', 'nb');
-        }
-    });
-});
-//]]>
-</script>
-[% INCLUDE 'mana.inc' %]
+<body id="rep_mana_search" class="rep">
+[% INCLUDE 'header.inc' %]
+[% INCLUDE 'circ-search.inc' %]
 
-[% IF statuscode == "200" AND reports %]
-    <table id="mana_results_datatable" width=100%>
-        <thead>
-            <tr>
-                <th>Report Name</th>
-                <th class="anti-the" width=35%>Notes</th>
-                <th>Type</th>
-                <th title="number of libraries using this pattern"># of users</th>
-                <th class="title-string" title="last time a library used this pattern">Last import</th>
-                <th> Comments </th>
-                [% UNLESS search_only %]
-                  <th class="NoSort">Actions</th>
-                [% END %]
-            </tr>
-        </thead>
-        <tbody>
-            [% FOREACH report IN reports %]
-                [% UNLESS report.cannotdisplay %]
-                    [% IF report.nbofcomment > highWarned %]
-                  <tr id="row[% report.id | $raw %]" class = "high-warned-row">
-                    [% ELSIF report.nbofcomment > warned %]
-                  <tr id="row[% report.id | $raw %]" class = "warned-row">
-                    [% ELSIF report.nbofcomment > lowWarned %]
-                  <tr id="row[% report.id | $raw %]" class = "highlighted-row">
-                    [% END %]
-                    <input hidden class="rowid" value="[% report.id | $raw %]">
-                    <td>[% IF ( report.report_name ) %][% report.report_name | html %][% END %]</td>
-                    <td title="[% report.savedsql | html %]"><div>
-                        [% IF report.notes.length > 200 %]
-                            [% report.notes.substr(0,200) | html %]<a class="showbutton">Show More</a></div><div hidden>
-                        [% END %]
-                            [% report.notes | html %]
-                        [% IF report.notes.length > 200 %]
-                                <a class="hidebutton">Show Less</a></div> </td>
-                        [% END %]
-                    <td> [% report.type | html %] </td>
-                    <td>[% IF ( report.nbofusers ) %][% report.nbofusers | $raw %][% END %]</td>
-                    <td><span title="[% report.lastimport | $KohaDates %]">[% report.lastimport | $KohaDates %]</span></td>
-                    <td>[% FOREACH comment IN report.comments %][% comment.message | html %] ([% comment.nb | $raw %]) <br>[% END %]</td>
+<div id="breadcrumbs">
+    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+    &rsaquo; <a href="/cgi-bin/koha/reports/reports-home.pl">Reports</a>
+    &rsaquo; <a href="/cgi-bin/koha/reports/guided_reports.pl">Guided reports wizard</a>
+    &rsaquo; Mana Knowledge Base report search results
+</div>
+
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
+                <h2>Mana Knowledge Base report search results</h2>
+
+                <div id="mana_results">
+                    [% IF statuscode == "200" AND reports %]
+
+                        <table id="mana_results_datatable">
+                            <thead>
+                                <tr>
+                                    <th>Report name</th>
+                                    <th class="anti-the">Notes</th>
+                                    <th>Type</th>
+                                    <th title="Number of libraries using this pattern"># of users</th>
+                                    <th class="title-string" title="Last time a library used this pattern">Last import</th>
+                                    <th> Comments </th>
+                                    [% UNLESS search_only %]
+                                        <th class="NoSort">Actions</th>
+                                    [% END %]
+                                </tr>
+                            </thead>
+                            <tbody>
+                                [% FOREACH report IN reports %]
+                                    [% UNLESS report.cannotdisplay %]
+                                        [% IF report.nbofcomment > highWarned %]
+                                            <tr id="row[% report.id | html %]" class="high-warned-row">
+                                        [% ELSIF report.nbofcomment > warned %]
+                                            <tr id="row[% report.id | html %]" class="warned-row">
+                                        [% ELSIF report.nbofcomment > lowWarned %]
+                                            <tr id="row[% report.id | html %]" class="highlighted-row">
+                                        [% ELSE %]
+                                            <tr id="row[% report.id | html %]">
+                                        [% END %]
+                                        <td>
+                                            <input type="hidden" class="rowid" value="[% report.id | $raw %]" />
+                                            [% IF ( report.report_name ) %]
+                                                [% report.report_name | html %]
+                                            [% END %]
+                                        </td>
+                                        <td title="[% report.savedsql | html %]">
+                                            [% IF report.notes.length > 200 %]
+                                                <div>
+                                                    [% report.notes.substr(0,200) | html %]... <a href="#" class="btn btn-link btn-sm showbutton"><i class="fa fa-plus-square-o"></i> Show more</a>
+                                                </div>
+                                                <div style="display:none">
+                                                    [% report.notes | html %]
+                                                    <a href="#" class="btn btn-link btn-sm hidebutton"><i class="fa fa-minus-square-o"></i> Show less</a>
+                                                </div>
+                                            [% ELSE %]
+                                                [% report.notes | html %]
+                                            [% END %]
+                                        </td>
+                                        <td> [% report.type | html %] </td>
+                                        <td>
+                                            [% IF ( report.nbofusers ) %]
+                                                [% report.nbofusers | html %]
+                                            [% END %]
+                                        </td>
+                                        <td>
+                                            <span title="[% report.lastimport | html %]">
+                                                [% report.lastimport | $KohaDates %]
+                                            </span>
+                                        </td>
+                                        <td>
+                                            [% FOREACH comment IN report.comments %]
+                                                [% comment.message | html %] ([% comment.nb | html %])<br>
+                                            [% END %]
+                                        </td>
 
-                    [% UNLESS search_only %]
-                        <td>
-                            <button class="mana-use" id="mana-use-[% report.id | $raw %]"><i class="fa fa-inbox"></i> Use</button>
-                        </td>
+                                        [% UNLESS search_only %]
+                                            <td>
+                                                <button type="button" class="btn btn-default btn-xs mana-use" id="mana-use-[% report.id | html %]" data-report_id="[% report.id | html %]"><i class="fa fa-download"></i> Import</button>
+                                            </td>
+                                        [% END %]
+                                      </tr>
+                                    [% END %]
+                                [% END %]
+                            </tbody>
+                        </table>
+                    [% ELSE %]
+                        <h4>
+                            [% IF ( msg ) %]
+                                [% msg | html %] (Statuscode: [% statuscode | html %])
+                            [% ELSE %]
+                                No results found
+                            [% END %]
+                        </h4>
                     [% END %]
-                  </tr>
-                [% END %]
-            [% END %]
-        </tbody>
-    </table>
-[% ELSE %]
-    <h4> [% msg | html %]  statuscode: [% statuscode | $raw %]</h4>
-[% END %]
+                </div>
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'guided-reports-view.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% INCLUDE 'intranet-bottom.inc' %]
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-share-report.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-share-report.inc
new file mode 100644
index 0000000000..a181062892
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-share-report.inc
@@ -0,0 +1,95 @@
+<div id="mana_share_report" class="modal" tabindex="-1" role="dialog" aria-labelledby="mana_share_modal_label">
+    <div class="modal-dialog modal-wide" role="document">
+        <div class="modal-content">
+            <form method="post" id="mana_share_form" action="/cgi-bin/koha/reports/guided_reports.pl">
+                <div class="modal-header">
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h3 id="mana_share_modal_label">Share with Mana</h3>
+                </div>
+                <div class="modal-body">
+                    [% IF (mana_id) %]
+                        <div class="dialog alert">
+                            <p>Your report is already linked with a Mana report. Share it if you have made modifications, otherwise it will do nothing.</p>
+                        </div>
+                    [% END %]
+                    <div id="note-error" class="dialog alert" role="alert">
+                        Please enter a report name and descriptive note before sharing (minimum 20 characters)
+                    </div>
+                    <div class="shared_infos rows">
+                        <ul>
+                            <li><span class="label">Id: </span><div id="shared_id"></div></li>
+                            <li><span class="label">Name: </span><div id="shared_name"></div></li>
+                            <li><span class="label">SQL: </span><div id="shared_sql"></div></li>
+                            <li><span class="label">Group: </span><div id="shared_group"></div></li>
+                            <li><span class="label">Type: </span><div id="shared_type"></div></li>
+                            <li><span class="label">Notes: </span><div id="shared_notes"></div></li>
+                            [% IF (languages_loop) %]
+                                <li>
+                                    <input type="hidden" name="phase" value="Share">
+                                    <label for="mana_language">Language:</label>
+                                    <select id="mana_language" name="mana_language">
+                                        [% FOREACH languages_loo IN languages_loop %]
+                                            [% IF ( languages_loo.group_enabled ) %]
+                                                [% IF ( languages_loo.plural ) %]
+                                                    [% FOREACH sublanguages_loo IN languages_loo.sublanguages_loop %]
+                                                        [% IF ( sublanguages_loo.enabled ) %]
+                                                            [% IF ( sublanguages_loo.sublanguage_current ) %]
+                                                                <option value="[% languages_loo.rfc4646_subtag | html %]" selected="selected">
+                                                                    [% sublanguages_loo.native_description | html %]
+                                                                    [% sublanguages_loo.script_description | html %]
+                                                                    [% sublanguages_loo.region_description | html %]
+
+                                                                    [% sublanguages_loo.variant_description | html %]
+                                                                    ([% sublanguages_loo.rfc4646_subtag | html %])
+                                                                </option>
+                                                            [% ELSE %]
+                                                                <option value="[% languages_loo.rfc4646_subtag | html %]">
+                                                                    [% sublanguages_loo.native_description | html %]
+                                                                    [% sublanguages_loo.script_description | html %]
+                                                                    [% sublanguages_loo.region_description | html %]
+                                                                    [% sublanguages_loo.variant_description | html %]
+                                                                    ([% sublanguages_loo.rfc4646_subtag | html %])
+                                                                </option>
+                                                            [% END %]
+                                                        [% END %]
+                                                    [% END %]
+                                                [% ELSE %]
+                                                    [% IF ( languages_loo.group_enabled ) %]
+                                                        [% IF ( languages_loo.current ) %]
+                                                            <option value="[% languages_loo.rfc4646_subtag | html %]" selected="selected">
+                                                                [% IF ( languages_loo.native_description ) %]
+                                                                    [% languages_loo.native_description | html %]
+                                                                [% ELSE %]
+                                                                    [% languages_loo.rfc4646_subtag | html %]
+                                                                [% END %]
+                                                            </option>
+                                                        [% ELSE %]
+                                                            <option value="[% languages_loo.rfc4646_subtag | html %]">
+                                                                [% IF ( languages_loo.native_description ) %]
+                                                                    [% languages_loo.native_description | html %]
+                                                                [% ELSE %]
+                                                                    [% languages_loo.rfc4646_subtag | html %]
+                                                                [% END %]
+                                                            </option>
+                                                        [% END %]
+                                                    [% END %]
+                                                [% END %]
+                                            [% END %]
+                                        [% END %]
+                                    </select>
+                                </li>
+                            [% ELSE %]
+                                <input type="hidden" name="mana_language" value="[% lang | html %]" />
+                            [% END %]
+                        </ul>
+                    </div> <!-- /.shared_infos rows -->
+                </div> <!-- /.modal-body -->
+                <div class="modal-footer">
+                    <input type="hidden" id="reportid" name="reportid"/>
+                    <button id="ManaShareButton" type="submit" class="btn btn-default shared_infos">Share</button>
+                    <button class="btn btn-default" id="ManaCloseButton" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                </div>
+            </form> <!-- /#mana_share_form -->
+        </div> <!-- /.modal-content -->
+    </div> <!-- /.modal-dialog -->
+</div> <!-- /#mana_share_report -->
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-subscription-search-result.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-subscription-search-result.inc
index c6124aac4e..511ab5b04b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-subscription-search-result.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/mana/mana-subscription-search-result.inc
@@ -3,73 +3,89 @@
 [% USE AuthorisedValues %]
 [% USE Branches %]
 [% USE raw %]
-[% INCLUDE 'mana.inc' %]
-<script>
-//<![CDATA[
-$(document).ready(function() {
-    $(document).on('click', 'button.mana-use', function() {
-        id = $(this).attr('id');
-        mana_use(id.substr(9));
-    });
-});
-//]]>
-</script>
 
 [% IF statuscode == "200" %]
-    <table id="mana_results_datatable" width=100%>
-        <thead>
-            <tr>
-                <th>ISSN</th>
-                <th class="anti-the" width=50%>Title</th>
-                <th> Published by </th>
-                <th>Frequency</th>
-                <th>Numbering pattern</th>
-                <th title="number of libraries using this pattern"># of users</th>
-                <th class="title-string" title="last time a library used this pattern">Last import</th>
-                <th> Comments </th>
-                [% UNLESS search_only %]
-                  <th class="NoSort">Actions</th>
-                [% END %]
-            </tr>
-        </thead>
-        <tbody>
-            [% FOREACH subscription IN subscriptions %]
-                [% UNLESS subscription.cannotdisplay %]
-                    [% IF subscription.nbofcomment > highWarned  %]
-                    <tr id="row[% subscription.subscriptionid | $raw %]" class = "high-warned-row" title="this resource has been reported more than [% highWarned | html %] times, take care!">
-                    [% ELSIF subscription.nbofcomment > warned  %]
-                    <tr id="row[% subscription.subscriptionid | $raw %]" class = "warned-row" title="this resource has been reported more than [% warned | html %] times, take care!">
-                    [% ELSIF subscription.nbofcomment > lowWarned  %]
-                    <tr id="row[% subscription.subscriptionid | $raw %]" class = "highlighted-row" title="this resource has been reported more than [% lowWarned | html %] times, take care!">
+    [% INCLUDE 'mana/mana-comment-status.inc' %]
+    <div id="mana_results">
+        <table id="mana_results_datatable">
+            <thead>
+                <tr>
+                    <th>ISSN</th>
+                    <th class="anti-the">Title</th>
+                    <th> Published by </th>
+                    <th>Frequency</th>
+                    <th>Numbering pattern</th>
+                    <th title="Number of libraries using this pattern"># of users</th>
+                    <th class="title-string" title="Last time a library used this pattern">Last import</th>
+                    <th> Comments </th>
+                    [% UNLESS search_only %]
+                      <th class="NoSort">Actions</th>
                     [% END %]
-                    <input hidden class="rowid" value="[% subscription.id | $raw %]">
-                        <td>[% IF ( subscription.issn ) %][% subscription.issn | html %][% END %]</td>
-                        <td>[% subscription.title | html %]</a></td>
-                        <td>[% IF ( subscription.publishercode ) %][% subscription.publishercode | html %][% END %]</td>
-                        <td>[% IF ( subscription.sfdescription ) %][% subscription.sfdescription | html %][% END %]</td>
-                        <td>[% IF ( subscription.numberingmethod ) %][% subscription.numberingmethod | html %][% END %]</td>
-                        <td>[% IF ( subscription.nbofusers ) %][% subscription.nbofusers | $raw %][% END %]</td>
-                        <td><span title="[% subscription.lastimport | $KohaDates %]">[% subscription.lastimport | $KohaDates %]</span></td>
-                        <td>[% FOREACH comment IN subscription.comments %][% comment.message | html %] ([% comment.nb | $raw %]) <br>[% END %]</td>
-
-                        [% UNLESS search_only %]
+                </tr>
+            </thead>
+            <tbody>
+                [% FOREACH subscription IN subscriptions %]
+                    [% UNLESS subscription.cannotdisplay %]
+                        [% IF subscription.nbofcomment > highWarned  %]
+                            <tr id="row[% subscription.id | html %]" class="high-warned-row" title="This resource has been reported more than [% highWarned | html %] times, take care!">
+                        [% ELSIF subscription.nbofcomment > warned  %]
+                            <tr id="row[% subscription.id | html %]" class="warned-row" title="This resource has been reported more than [% warned | html %] times, take care!">
+                        [% ELSIF subscription.nbofcomment > lowWarned  %]
+                            <tr id="row[% subscription.id | html %]" class="highlighted-row" title="This resource has been reported more than [% lowWarned | html %] times, take care!">
+                        [% ELSE %]
+                            <tr id="row[% subscription.id | html %]">
+                        [% END %]
+                        <input type="hidden" hidden class="rowid" value="[% subscription.id | html %]" />
+                            <td>[% IF ( subscription.issn ) %][% subscription.issn | html %][% END %]</td>
+                            <td>[% subscription.title | html %]</td>
+                            <td>[% IF ( subscription.publishercode ) %][% subscription.publishercode | html %][% END %]</td>
+                            <td>[% IF ( subscription.sfdescription ) %][% subscription.sfdescription | html %][% END %]</td>
+                            <td>[% IF ( subscription.numberingmethod ) %][% subscription.numberingmethod | html %][% END %]</td>
+                            <td>[% IF ( subscription.nbofusers ) %][% subscription.nbofusers | html %][% END %]</td>
+                            <td><span title="[% subscription.lastimport | html %]">[% subscription.lastimport | $KohaDates %]</span></td>
                             <td>
-                                <button class="mana-use" id="mana-use-[% subscription.id | $raw %]"><i class="fa fa-inbox"></i> Use</button>
-                                <select class="mana-actions" id="mana-actions-[% subscription.id | $raw %]">
-                                    <option selected disabled>Report mistake</option>
-                                    [% FOREACH comment IN subscription.comments %]
-                                        <option value="[% comment.id | $raw %]"> [% comment.message | html %] ([% comment.nb | $raw %])</option>
-                                    [% END %]
-                                        <option>other</option>
-                                </select>
-                                <button hidden class="actionreport2" hidden> Cancel</button>
+                                [% FOREACH comment IN subscription.comments %]
+                                    [% comment.message | html %] ([% comment.nb | html %])<br />
+                                [% END %]
                             </td>
-                        [% END %]
-                    </tr>
+                            [% UNLESS search_only %]
+                                <td class="actions">
+                                    <button class="btn btn-default btn-xs mana-use" data-subscription_id="[% subscription.id | html %]" id="mana-use-[% subscription.id | html %]"><i class="fa fa-download"></i> Import</button>
+                                    <div class="dropup">
+                                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                            Report <span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu pull-right mana-actions" id="mana-actions-[% subscription.id | html %]">
+                                            [% IF ( subscription.comments.size ) %]
+                                                [% FOREACH comment IN subscription.comments %]
+                                                    <li><a data-commentid="[% comment.id | html %]" data-resourceid="[% subscription.id | html %]" href="#">[% comment.message | html %] ([% comment.nb | html %])</a></li>
+                                                [% END %]
+                                                <li role="separator" class="divider"></li>
+                                            [% END %]
+                                            <li><a data-commentid="other" data-resourceid="[% subscription.id | html %]" href="#">New comment</a></li>
+                                        </ul>
+                                    </div>
+                                </td>
+                            [% END %]
+                        </tr>
+                    [% END %]
                 [% END %]
-            [% END %]
-        </tbody>
-    </table>
+            </tbody>
+        </table>
+    </div>
+    <div id="new_mana_comment" style="display:none">
+        <h4 id="mana_submit_comment"> Please enter a new comment (max 35 caracters)</h4>
+        <form id="mana_comment_form" action="/cgi-bin/koha/serials/subscription-detail.pl" method="get">
+            <input type="hidden" id="mana-resource" value="subscription" />
+            <input type="hidden" id="mana-resource-id" value="[% mana_id | html %]" />
+            <input type="text" maxlength="35" size="35" id="mana-comment" required="required" />
+            <input type="hidden" id="selected_id" value="" />
+            <div class="action">
+                <button id="mana-send-comment">Submit</button>
+                <a href="#" class="cancel" id="mana-comment-close">Cancel</a>
+            </div>
+        </form>
+    </div>
 [% ELSE %]
     <h4>Mana search fails with the code: [% statuscode | html %] </h4>
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc
index 7e9b49ab20..0f5cf013bf 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc
@@ -7,7 +7,7 @@
                 <li id="newmenuc"><a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Build%20new">New guided report</a> </li>
                 <li id="newsql"><a href="/cgi-bin/koha/reports/guided_reports.pl?phase=Create%20report%20from%20SQL">New SQL report</a> </li>
                 [% IF Koha.Preference('Mana')==1 %]
-                <li id="newsql"><a href="" data-toggle="modal" data-target="#mana_search_result">New SQL from Mana</a> </li>
+                    <li id="new_mana_sql"><a href="#" data-toggle="modal" data-target="#mana_search_result">New SQL from Mana</a> </li>
                 [% END %]
             </ul>
         </div>
@@ -64,12 +64,12 @@
                 </ul>
             </div>
 
-            <div id="mana-comment-box" class="modal" tabindex="-1" role="dialog" aria-labelledby="mana_search_result_label" style="display: none;">
-                <div class="modal-dialog modal-lg" style="width: 30%">
-                    <div class="modal-content" style="">
+            <div id="mana-comment-box" class="modal" tabindex="-1" role="dialog" aria-labelledby="mana_search_result_label">
+                <div class="modal-dialog modal-lg" role="document">
+                    <div class="modal-content">
                         <div class="modal-header">
-                            <button type="button" id="mana-comment-close" class="closebtn"  aria-hidden="true">×</button>
-                            <h3 id="mana_submit_comment"> Please enter a new comment (max 35 characters)</h3>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                            <h3 id="mana_submit_comment">Enter a new commment (max 35 caracters)</h3>
                         </div>
                         <div class="modal-body">
                             <input hidden id="mana-resource" value="report">
@@ -116,108 +116,39 @@
 </div>
 
 [% IF Koha.Preference('Mana')==1 %]
-    <div id="mana_search_result" class="modal fade container-fluid" tabindex="-1" role="dialog" aria-labelledby="mana_search_result_label" style="width: 100%; left:0%; margin-left: auto; display: none;">
+    <div id="mana_search_result" class="modal" tabindex="-1" role="dialog" aria-labelledby="mana_search_result_label">
         <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
-                    <h3 id="mana_search_result_label"> Mana Search</h3>
-                </div>
-                <div>
+            <form id="mana_search_form">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h3 id="mana_search_result_label">Mana search</h3>
+                    </div>
                     <div class="modal-body">
+                        <div id="mana_search_failed" class="dialog alert mana_search_status" style="display:none">
+                            Your search could not be completed. Please try again later.
+                            <div id="mana_search_errortext"></div>
+                        </div>
+                        <div id="mana_use_failed" class="dialog alert mana_search_status" style="display:none">
+                            This report could not be imported. Please try again later.
+                            <div id="mana_use_errortext"></div>
+                        </div>
                         <fieldset>
-                            <form id="mana_search_form" style="margin-left: 5%">
-                                Please enter a few key words:
-                                <input type="text" id="mana_search_field">
-                                <input type="submit" class="mana_search_button" value="Search">
-                            </form>
+                            <p>
+                                Search reports by keyword:
+                                <input type="text" id="mana_search_field" />
+                                <input type="submit" class="mana_search_button" value="Search" />
+                                <span id="mana-loading" style="display:none"> <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Loading </span>
+                            </p>
                         </fieldset>
-                        <div class="mana_result_content">
+                        <div id="mana_result_content">
                         </div>
                     </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    </div>
                 </div>
-            </div>
+            </form>
         </div>
     </div>
 [% END %]
-
-<script>
-    function mana_use( mana_id ){
-        $.ajax( {
-            type:"POST",
-            url: "/cgi-bin/koha/svc/mana/use",
-            data: {id:mana_id, resource: 'report', saveinbase: 1},
-            dataType: "json",
-        })
-        .done( function (result){
-            if ( result.errmsg ){
-                alert( result.errmsg );
-            }
-            else{
-                window.location = ("/cgi-bin/koha/reports/guided_reports.pl?reports=").concat(result.id).concat("&amp;phase=Show%20SQL&mana_success=1&phase=Edit%20SQL");
-            }
-        })
-        .fail( function ( foo, msg, longmsg, bla ){
-        });
-    }
-
-    function mana_search( textquery ){
-        $(document.body).css({'cursor' : 'wait'});
-        $.ajax({
-            type: "POST",
-            url: "/cgi-bin/koha/svc/mana/search",
-            data: {biblionumber: $("#biblionumber").val(), resource: 'report', id: textquery, usecomments: 1},
-            dataType: "html",
-        })
-        .done( function( result ) {
-            $(document.body).css({'cursor' : 'default'});
-            $("#mana_search_result .modal-body .mana_result_content").html(result);
-            $("#mana_search_result_label").text(_("Results from Mana Knowledge Base"));
-            $("#mana_results_datatable").dataTable($.extend(true, {}, dataTablesDefaults,{
-                "sPaginationType":"four_button",
-                "autoWidth": false,
-                "columnDefs": [
-                    { "width": "35%", "targets": 1 }
-                ],
-                "aoColumnDefs": [
-                    { 'bSortable': false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
-                    { "sType": "title-string", "aTargets" : [ "title-string" ] },
-                    { 'sType': "anti-the", 'aTargets' : [ 'anti-the'] }
-                ]
-            }));
-            if($("td.dataTables_empty").length == 0){
-                 $("#mana_search").show();
-            }
-
-            $( "select[class='actionreport1']" ).show();
-            $( "button[class='actionreport2']" ).hide();
-
-            $(".showbutton").on("click", function(){
-                $(this).parent().hide();
-                $(this).parent().next().show();
-            });
-
-            $("a[class='hidebutton']").on("click", function(){
-                $(this).parent().hide();
-                $(this).parent().prev().show();
-            });
-
-            $("#commentCloseButton").on("click", function(){
-                $("#comment_box").modal("hide");
-            });
-
-            $(".actionreport1").on("click", function(){
-                $("#selectedcomment").val($(this).val());
-                $(this).parent("select").hide();
-                $(this).parent("select").next().show();
-            });
-
-            $(".actionreport2").on("click", function(){
-                $(this).hide();
-                $(this).prev().show();
-                mana_increment($("#selectedcomment").val(), 'resource_comment', 'nb', -1);
-            });
-        }).fail( function( result ){
-        });
-    }
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc
index 902543dd65..69999d86a0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-toolbar.inc
@@ -8,13 +8,6 @@
             [% ELSE %]
                 <div class="btn-group"><a id="newsubscription" class="btn btn-default" href="/cgi-bin/koha/serials/subscription-add.pl"><i class="fa fa-plus"></i> New subscription</a></div>
             [% END %]
-            [% IF Koha.Preference('Mana') == 1 and Koha.Preference('AutoShareWithMana').grep('subscription').size == 0 %]
-                [% IF one_language_enabled==0 or mana_id %]
-                    <div class="btn-group"><a data-toggle="modal" data-toggle="tooltip" title="Share the subscription with other librairies. Your email address will be associated to your sharing." data-target="#mana_share_modal" class="btn btn-default btn-sm"><i class="fa fa-share-alt"></i> Share</a></div>
-                [% ELSE %]
-                    <div class="btn-group" id="mana-subscription-share" data-toggle="tooltip" title="Share the subscription with other libraries. Your email address will be associated to your sharing."><a class="btn btn-default btn-sm"><i class="fa fa-share-alt"></i> Share</a></div>
-                [% END %]
-            [% END %]
         [% END %]
 
         [% IF ( CAN_user_serials_edit_subscription || CAN_user_serials_create_subscription || CAN_user_serials_delete_subscription ) %]
@@ -72,38 +65,29 @@
             [% END %]
         [% END %]
 
+        [% IF Koha.Preference('Mana') == 1 and Koha.Preference('AutoShareWithMana').grep('subscription').size == 0 %]
+            [% IF one_language_enabled==0 or mana_id %]
+                <div class="btn-group"><a data-toggle="modal" data-toggle="tooltip" title="Share the subscription with other librairies. Your email address will be associated to your sharing." data-target="#mana_share_modal" class="btn btn-default"><i class="fa fa-share-alt"></i> Share</a></div>
+            [% ELSE %]
+                <div class="btn-group" id="mana-subscription-share" data-toggle="tooltip" title="Share the subscription with other libraries. Your email address will be associated to your sharing."><a class="btn btn-default"><i class="fa fa-share-alt"></i> Share</a></div>
+            [% END %]
+        [% END %]
+
         [% IF ( mana_id && Koha.Preference('Mana') == 1 ) %]
             <div class="btn-group">
                 <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> Report mistake <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                    [% FOREACH c IN mana_comments %]
-                        <li class="mana-comment" data-id="[% c.id | $raw %]">
-                            <a href="#">[% c.message | html %] ([% c.nb | html %])</a>
-                        </li>
+                <ul class="dropdown-menu mana-actions">
+                    [% IF ( mana_comments ) %]
+                        [% FOREACH c IN mana_comments %]
+                            <li>
+                                <a data-commentid="[% c.id | html %]" data-resourceid="[% mana_id | html %]" href="#">[% c.message | html %] ([% c.nb | html %])</a>
+                            </li>
+                        [% END %]
+                        <li role="separator" class="divider"></li>
                     [% END %]
-                    <li role="separator" class="divider"></li>
-                    <li class="mana-other-comment"><a href="#">Other</a> </li>
+                    <li><a data-commentid="other" data-resourceid="[% mana_id | html %]" href="#">New comment</a></li>
                 </ul>
             </div>
-
-            <div id="mana-comment-box" class="modal" tabindex="-1" role="dialog" aria-labelledby="mana_search_result_label" style="display: none;">
-                <div class="modal-dialog modal-lg" style="width: 30%">
-                    <div class="modal-content" style="">
-                        <div class="modal-header">
-                            <button type="button" id="mana-comment-close" class="closebtn"  aria-hidden="true">×</button>
-                            <h3 id="mana_submit_comment"> Please enter a new comment (max 35 characters)</h3>
-                        </div>
-                        <div class="modal-body">
-                            <input hidden id="mana-resource" value="subscription">
-                            <input hidden id="mana-resource-id" value="[% mana_id | $raw %]">
-                            <div>
-                                <input type="text" maxlength="35" size="35" id="mana-comment">
-                            </div>
-                            <button id="mana-send-comment"> Comment </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
         [% END %]
     </div>
 [% ELSIF CAN_user_serials_create_subscription %]
@@ -116,22 +100,46 @@
     </div>
 [% END %]
 
-<div id="mana_share_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mana_share_modal_label" style="display: none;">
-    <div class="modal-dialog">
+<div class="modal" id="mana-comment-box" tabindex="-1" role="dialog" aria-labelledby="mana_submit_comment">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <form id="mana_comment_form" action="/cgi-bin/koha/serials/subscription-detail.pl" method="get">
+                <div class="modal-header">
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="mana_submit_comment">Please enter a new comment (max 35 characters)</h4>
+                </div>
+                <div class="modal-body">
+                    <input type="hidden" id="mana-resource" value="subscription" />
+                    <input type="hidden" id="mana-resource-id" value="[% mana_id | html %]" />
+                    <input type="text" maxlength="35" size="35" id="mana-comment" required="required" />
+                    <button id="mana-send-comment">Submit</button>
+                    <a href="#" class="cancel" id="mana-comment-close">Cancel</a>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </form>
+        </div> <!-- /.modal-content -->
+    </div> <!-- /.modal-dialog -->
+</div> <!-- /#mana-comment-box -->
+
+<div id="mana_share_modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="mana_share_modal_label">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h3 id="mana_share_modal_label">Share [% bibliotitle | html %] to Mana</h3>
+                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 id="mana_share_modal_label">Share [% bibliotitle | html %] to Mana</h4>
             </div>
             <div class="modal-body">
                 [% IF (mana_id) %]
                     <div class="alert">
-<h1>[% mana_id | $raw %]</h1>
                         <p>Your subscription is already linked with a Mana subscription model. Share it if you have made modifications, otherwise it will do nothing.</p>
                     </div>
                 [% END %]
                 [% IF ( languages_loop ) %]
                     [% UNLESS ( one_language_enabled ) %]
                         <div class="rows">
+                            <ol>
                                 <li><span class="label">Frequency: </span>
                                         [% frequency.description | html %]
                                 </li>
@@ -194,21 +202,17 @@
                                         [% END %]
                                     </select>
                                     <input type="hidden" id="op" name="op" value="share"/>
-                                    <input type="hidden" id="subscriptionid" name="subscriptionid" value="[% subscriptionid | $raw %]"/>
+                                    <input type="hidden" id="subscriptionid" name="subscriptionid" value="[% subscriptionid | html %]"/>
                                 </fieldset>
                             </form>
-                        </div>
+                        </div> <!-- /.rows -->
                     [% END %]
                 [% END %]
-            </div>
+            </div> <!-- /.modal-body -->
             <div class="modal-footer">
-                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-                [% IF one_language_enabled==0 %]
-                    <button type="submit" form="mana_share_form" class="btn btn-primary">Share</button>
-                [% ELSE %]
-                    <div class="btn-group" id="mana-subscription-share"><a class="btn btn-primary">Share</a></div>
-                [% END %]
+                <button type="submit" form="mana_share_form" class="btn btn-default">Share</button>
+                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
             </div>
-        </div>
-    </div>
-</div>
+        </div> <!-- /.modal-content -->
+    </div> <!-- /.modal-dialog -->
+</div> <!-- /#mana-share-modal -->
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-report-search-result.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-report-search-result.tt
index a2a929857a..93d95f5ea6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-report-search-result.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-report-search-result.tt
@@ -1 +1 @@
-[% INCLUDE 'mana/mana-report-search-result.inc' %]
+[% INCLUDE 'mana/mana-report-search-result.inc' %]
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-subscription-search-result.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-subscription-search-result.tt
index 0c44f7ad85..9863be7ed7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-subscription-search-result.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/mana/mana-subscription-search-result.tt
@@ -1 +1 @@
-[% INCLUDE 'mana/mana-subscription-search-result.inc' %]
+[% INCLUDE 'mana/mana-subscription-search-result.inc' %]
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
index 431e0ba7a0..646bbed78c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
@@ -39,6 +39,7 @@
 .CodeMirror {
     resize:  vertical;
 }
+#mana_search_errortext { font-family: monospace; font-weight: bold; }
 </style>
 [% Asset.css("css/reports.css") | $raw %]
 [% Asset.css("lib/d3c3/c3.min.css") | $raw %]
@@ -173,14 +174,14 @@ canned reports and writing custom SQL reports.</p>
                 <option value="">All</option>
             </select>
         </div>
-<div style="display:inline-block">
-    [% IF manamsg %]
-     <div id="mana_search" class="dialog message">
-        <p> [% manamsg | html %] </p>
-    </div>
-    [% END %]
 
-</script>
+        [% IF (Koha.Preference('Mana') == 1) %]
+            [% IF manamsg %]
+                <div id="mana_search_message" class="dialog message">
+                    <p> [% manamsg | html %] </p>
+                </div>
+            [% END %]
+        [% END %]
 
 <form action="/cgi-bin/koha/reports/guided_reports.pl" id="reports_form" method="post">
 <input type="hidden" name="phase" value="Delete Multiple" />
@@ -221,7 +222,7 @@ canned reports and writing custom SQL reports.</p>
                             [% IF ( CAN_user_reports_delete_reports ) %] <!-- not break CSS -->
                                 <input type="checkbox" name="ids" value="[% savedreport.id | html %]" />
                             [% END %]
-                        <input hidden class="report_sql" value="[% savedreport.savedsql |html %]">
+                            <input type="hidden" class="report_sql" value="[% savedreport.savedsql |html %]">
                         </td>
                         <td class="report_id"><label for="ids">[% savedreport.id | html %]</label></td>
                         <td class="report_name">
@@ -296,7 +297,7 @@ canned reports and writing custom SQL reports.</p>
                 [% END %]
             </tbody>
         </table>
-</div>
+
         [% IF ( CAN_user_reports_delete_reports ) %]
         <fieldset class="action">
             <input type="submit" value="Delete selected" />
@@ -337,106 +338,7 @@ canned reports and writing custom SQL reports.</p>
 [% END %]
 [% END %]
 
-<div id="mana_share_report" class="modal fade" tabindex="-1" role="dialog" arialabelledby="mana_share_modal_label" style="display: none;">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3 id="mana_share_modal_label">Share with Mana</h3>
-            </div>
-            <div class="modal-body">
-                [% IF (mana_id) %]
-                    <div class="alert">
-                        <p>Your subscription is already linked with a Mana subscription model. Share it if you have made modifications, otherwise it will do nothing.</p>
-                    </div>
-                [% END %]
-                <div id="note-error" class="alert alert-danger" role="alert">
-                    Please enter a report name and descriptive note before sharing (minimum 20 characters)
-                </div>
-                <div class="shared_infos rows">
-                    <li><span class="label">Id: </span><div id="shared_id"></div></li>
-                    <li><span class="label">Name: </span><div id="shared_name"></div></li>
-                    <li><span class="label">SQL: </span><div id="shared_sql"></div></li>
-                    <li><span class="label">Group: </span><div id="shared_group"></div></li>
-                    <li><span class="label">Type: </span><div id="shared_type"></div></li>
-                    <li><span class="label">Notes: </span><div id="shared_notes"></div></li>
-                </div>
-                <div class="rows">
-                    <form method="post" id="mana_share_form" action="/cgi-bin/koha/reports/guided_reports.pl" class="validated" >
-                        <input type="hidden" name="phase" value="Share">
-
-                        [% IF (languages_loop) %]
-                            <fieldset class="shared_infos">
-                                <label for="mana_language">Language:</label>
-                                <select id="mana_language" name="mana_language">
-                                    [% FOREACH languages_loo IN languages_loop %]
-                                        [% IF ( languages_loo.group_enabled ) %]
-                                            [% IF ( languages_loo.plural ) %]
-                                                [% FOREACH sublanguages_loo IN languages_loo.sublanguages_loop %]
-                                                    [% IF ( sublanguages_loo.enabled ) %]
-                                                        [% IF ( sublanguages_loo.sublanguage_current ) %]
-                                                            <option value="[% languages_loo.rfc4646_subtag | html %]" selected>
-                                                                [% sublanguages_loo.native_description | html %]
-                                                                [% sublanguages_loo.script_description | html %]
-                                                                [% sublanguages_loo.region_description | html %]
-
-                                                                [% sublanguages_loo.variant_description | html %]
-                                                                ([% sublanguages_loo.rfc4646_subtag | html %])
-                                                            </option>
-                                                        [% ELSE %]
-                                                            <option value="[% languages_loo.rfc4646_subtag | html %]">
-                                                                [% sublanguages_loo.native_description | html %]
-                                                                [% sublanguages_loo.script_description | html %]
-                                                                [% sublanguages_loo.region_description | html %]
-                                                                [% sublanguages_loo.variant_description | html %]
-                                                                ([% sublanguages_loo.rfc4646_subtag | html %])
-                                                            </option>
-                                                        [% END %]
-                                                    [% END %]
-                                                [% END %]
-                                            [% ELSE %]
-                                                [% IF ( languages_loo.group_enabled ) %]
-                                                    [% IF ( languages_loo.current ) %]
-                                                        <option value="[% languages_loo.rfc4646_subtag | html %]" selected>
-                                                            [% IF ( languages_loo.native_description ) %]
-                                                                [% languages_loo.native_description | html %]
-                                                            [% ELSE %]
-                                                                [% languages_loo.rfc4646_subtag | html %]
-                                                            [% END %]
-                                                        </option>
-                                                    [% ELSE %]
-                                                        <option value="[% languages_loo.rfc4646_subtag | html %]">
-                                                            [% IF ( languages_loo.native_description ) %]
-                                                                [% languages_loo.native_description | html %]
-                                                            [% ELSE %]
-                                                                [% languages_loo.rfc4646_subtag | html %]
-                                                            [% END %]
-                                                        </option>
-                                                    [% END %]
-                                                [% END %]
-                                            [% END %]
-                                        [% END %]
-                                    [% END %]
-                                </select>
-                            </fieldset>
-                        [% ELSE %]
-                            <input type="hidden" name="mana_language" value="[% lang | html %]">
-                        [% END %]
-                        <input type="hidden" id="reportid" name="reportid"/>
-                    </form>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn" id="ManaCloseButton" data-dismiss="modal" aria-hidden="true">Close</button>
-                [% IF one_language_enabled==0 %]
-                    <button id="ManaShareButton" type="submit" form="mana_share_form" class="btn btn-primary shared_infos">Share</button>
-                [% ELSE %]
-                    <div id="ManaShareButton" class="btn-group"><a class="btn btn-primary shared_infos">Share</a></div>
-                [% END %]
-            </div>
-        </div>
-    </div>
-</div>
-
+[% INCLUDE 'mana/mana-share-report.inc' %]
 
 [% IF ( build1 ) %]
 [% IF ( cache_error) %]
@@ -1058,7 +960,7 @@ canned reports and writing custom SQL reports.</p>
 [% END %]
 
 
-[% INCLUDE 'guided-reports-view.inc' %]
+                [% INCLUDE 'guided-reports-view.inc' %]
             </aside>
         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
      </div> <!-- /.row -->
@@ -1069,13 +971,13 @@ canned reports and writing custom SQL reports.</p>
     [% Asset.js("lib/d3c3/d3.min.js") | $raw %]
     [% Asset.js("lib/d3c3/c3.min.js") | $raw %]
     [% INCLUDE 'calendar.inc' %]
-    [% INCLUDE 'mana.inc' %]
+    [% INCLUDE 'datatables.inc' %]
     [% IF ( saved1 ) %]
-        [% INCLUDE 'datatables.inc' %]
         [% INCLUDE 'columns_settings.inc' %]
     [% END %]
     [% Asset.js( "lib/codemirror/codemirror-compressed.js" ) | $raw %]
     [% Asset.js( "lib/codemirror/sql.min.js" ) | $raw %]
+    [% Asset.js( "js/mana.js" ) | $raw %]
     <script>
 
         function hide_bar_element() {
@@ -1273,7 +1175,8 @@ canned reports and writing custom SQL reports.</p>
                 window.history.back();
             });
 
-            $(".mana_search_button").on("click",function(){
+            $("body").on("click", ".mana_search_button", function(){
+                $("#mana-loading").show();
                 mana_search($("#mana_search_field").val());
             });
 
@@ -1487,10 +1390,6 @@ canned reports and writing custom SQL reports.</p>
                 return confirmDelete(MSG_CONFIRM_DELETE);
             });
 
-            $('div#ManaShareButton').click(function() {
-                $("#mana_share_form").submit();
-            });
-
             $("#mana_search_form").submit(function(e){
                 e.preventDefault();
             });
@@ -1503,6 +1402,18 @@ canned reports and writing custom SQL reports.</p>
                 $("#selectedColumns option").attr("selected", "selected");  // Select everything still in #selectedColumns
                 return true;
             });
+
+            // Mana KB
+            $("body").on("click", ".mana-use", function(e) {
+                e.preventDefault();
+                $(this).find("i").attr("class","fa fa-refresh fa-spin");
+                mana_use( $(this).data("report_id") );
+            });
+
+            $("#mana_search_result").on("hide.bs.modal", function(){
+                $("#mana_result_content").html("");
+                $("#mana_search_field").val("");
+            });
         });
 
         function addColumn() {
@@ -1511,6 +1422,74 @@ canned reports and writing custom SQL reports.</p>
         function delColumn() {
             $("#selectedColumns option:selected").remove();
         }
+
+        // Mana KB
+        function mana_use( mana_id ){
+            $.ajax( {
+                type:"POST",
+                url: "/cgi-bin/koha/svc/mana/use",
+                data: {id:mana_id, resource: 'report', saveinbase: 1},
+                dataType: "json",
+            })
+            .done( function (result){
+                if ( result.errmsg ){
+                    alert( result.errmsg );
+                }
+                else{
+                    window.location = ("/cgi-bin/koha/reports/guided_reports.pl?reports=").concat(result.id).concat("&phase=Show%20SQL&mana_success=1");
+                }
+            })
+            .fail(function( error ) {
+                $(".mana_use_status").hide();
+                $("#mana_use_errortext").html( error.status + " " + error.statusText );
+                $("#mana_use_failed").show();
+                $(".mana-use i").attr("class","fa fa-download");
+            });
+        }
+
+        function mana_search( textquery ){
+            $(".mana_search_status").hide();
+            $("#mana_result_content").load("/cgi-bin/koha/svc/mana/search #mana_results", { resource: 'report', id: textquery, usecomments: 1 }, function( response, status, xhr ) {
+
+                    if ( status == "error" ) {
+                        $("#mana_search_errortext").html( xhr.status + " " + xhr.statusText );
+                        $("#mana_search_failed").show();
+                        $("#mana-loading").hide();
+                    } else {
+                        $(".mana_search_status").hide();
+                        $("#mana_search_result_label").text(_("Results from Mana Knowledge Base"));
+                        $("#mana-loading").hide();
+                        $("#mana_results_datatable").dataTable($.extend(true, {}, dataTablesDefaults,{
+                            "sPaginationType":"four_button",
+                            "autoWidth": false,
+                            "columnDefs": [
+                                { "width": "35%", "targets": 1 }
+                            ],
+                            "aoColumnDefs": [
+                                { 'bSortable': false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
+                                { "sType": "title-string", "aTargets" : [ "title-string" ] },
+                                { 'sType': "anti-the", 'aTargets' : [ 'anti-the'] }
+                            ]
+                        }));
+
+                        $(".showbutton").on("click", function(e){
+                            e.preventDefault();
+                            $(this).parent().hide();
+                            $(this).parent().next().show();
+                        });
+
+                        $(".hidebutton").on("click", function(e){
+                            e.preventDefault();
+                            $(this).parent().hide();
+                            $(this).parent().prev().show();
+                        });
+
+                        if($("td.dataTables_empty").length == 0){
+                            $("#mana_search_message").show();
+                        }
+                    }
+                });
+        }
     </script>
 [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-search.tt
index 2e2c3420c0..6ea103367b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-search.tt
@@ -406,7 +406,6 @@
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
     [% INCLUDE 'datatables.inc' %]
-    [% INCLUDE 'mana.inc' %]
     <script>
         var subscriptionid = "[% subscriptionid | html %]";
         var MSG_CLOSE_SUBSCRIPTION = _("Are you sure you want to close this subscription?");
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt
index 7e76c8dbe8..0f056f0bd1 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt
@@ -7,8 +7,13 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Serials &rsaquo; [% IF ( modify ) %][% bibliotitle | html %] &rsaquo; Modify subscription[% ELSE %]New subscription[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
+[% Asset.css("css/datatables.css") | $raw %]
 <style>
 fieldset.rows li.radio { width: 100%; } /* override staff-global.css */
+#mana_comment_errortext { font-weight: bold; font-family: monospace;}
+/* Prevents Bootstrap menus from being hidden inside modal */
+#mana_search_result .modal { overflow: visible; }
+#mana_search_result .modal-body { overflow-y: visible; }
 </style>
 </head>
 
@@ -27,8 +32,9 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */
 
 <div class="main container-fluid">
     <div class="row">
-
-            <h1>[% IF ( modify ) %] Modify subscription for <i>[% bibliotitle | html %]</i>[% ELSE %]Add a new subscription[% END %] (<span id="page_number">1/2</span>)</h1>
+            <div class="col-sm-12">
+                <h1>[% IF ( modify ) %] Modify subscription for <i>[% bibliotitle | html %]</i>[% ELSE %]Add a new subscription[% END %] (<span id="page_number">1/2</span>)</h1>
+            </div>
             <form method="post" id="subscription_add_form" name="f" action="/cgi-bin/koha/serials/subscription-add.pl" class="validated">
                 [% IF ( modify ) %]
                     <input type="hidden" name="op" value="modsubscription" />
@@ -475,25 +481,35 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */
                 </div>
             </form>
         </div>
-        <div id="mana_search_result" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mana_search_result_label" style="width: 100%; left:0%; margin-left: auto; display: none;">
-            <div class="modal-dialog modal-lg">
+
+        <!-- Mana Search Result Modal -->
+        <div class="modal" id="mana_search_result" tabindex="-1" role="dialog" aria-labelledby="mana_search_result_label">
+            <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 id="mana_search_result_label"></h3>
+                        <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title" id="mana_search_result_label">Modal title</h4>
                     </div>
                     <div class="modal-body">
-            </div>
-        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+             </div>
+         </div>
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
     [% INCLUDE 'datatables.inc' %]
+    [% Asset.js("js/mana.js") | $raw %]
     <script>
         var subscriptionid = "[% subscriptionid | html %]";
         var irregularity = "[% irregularity | html %]";
         var more_than_one_serial = "[% more_than_one_serial | html %]";
         var tags = [];
+        var interface = "[% interface | html %]";
+        var theme = "[% theme | html %]";
         [% FOREACH field IN dont_export_field_loop %]
             tags.push("[% field.fieldid | html %]");
         [% END %]
@@ -503,16 +519,22 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */
         var MSG_REQUIRED_SUB_LENGTH = _("You must choose a subscription length or an end date.");
         var MSG_TEST_PREDICTION = _("Please click on 'Test prediction pattern' before saving subscription.");
         var MSG_REQUIRED_PUB_DATE = _("You must choose a first publication date");
-        var MSG = _("You have modified the advanced prediction pattern. Please save your work or cancel modifications.");
+        var MSG_SAVE_PREDICTION_PATTERN = _("You have modified the advanced prediction pattern. Please save your work or cancel modifications.");
         var MSG_PATTERN_IRREG = _("Warning! Present pattern has planned irregularities. Click on 'Test prediction pattern' to check if it's still valid")
         var MSG_PATTERN_NAME = _("Please enter a name for this pattern");
         var MSG_PATTERN_NAME_EXISTS = _("This pattern name already exists. Do you want to modify it?");
-        var MSG_OVERWRITE_PATTERNS = _("Warning: it will modify the pattern for all subscriptions that are using it.");
+        var MSG_OVERWRITE_PATTERNS = _("Warning: This will modify the pattern for all subscriptions that are using it.");
         var MSG_PATTERN_CREATE_FAILED = _("Something went wrong. Unable to create a new numbering pattern.");
         var MSG_PATTERN_TEST_FAILED = _("Cannot test prediction pattern for the following reason(s): %s");
         var MSG_FREQUENCY_UNDEFINED = _("Frequency is not defined");
         var MSG_PUB_DATE_UNDEFINED = _("First publication date is not defined");
         var MSG_NEXT_ISSUE_UNDEFINED = _("Next issue publication date is not defined");
+        var MSG_MANA_SEARCHING = _("Searching for subscription in Mana Knowledge Base");
+        var MSG_MANA_RESULTS = _("Results from Mana Knowledge Base");
+        var MSG_MANA_SUBSCRIPTION_FOUND = _("Subscription found on Mana Knowledge Base:");
+        var MSG_MANA_SHOW_DETAILS = _("Show Mana results");
+        var MSG_MANA_NO_SUBSCRIPTION_FOUND = _("No subscription found on Mana Knowledge Base");
+        var MSG_MANA_SHARE_PATTERN = _("Please feel free to share your pattern with all others librarians once you are done");
     </script>
     [% Asset.js("js/subscription-add.js") | $raw %]
     [% Asset.js("js/showpredictionpattern.js") | $raw %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-detail.tt
index 0c07bf86fc..a30270abf7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-detail.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-detail.tt
@@ -29,6 +29,7 @@
             <main>
 
     [% INCLUDE 'serials-toolbar.inc' %]
+    [% INCLUDE 'mana/mana-comment-status.inc' %]
 
     <h1>Subscription for [% bibliotitle | html %] [% IF closed %](closed)[% END %]</h1>
     [% IF ( abouttoexpire ) %]
@@ -466,8 +467,8 @@
         var MSG_REOPEN_SUBSCRIPTION = _("Are you sure you want to reopen this subscription?");
         var CONFIRM_DELETE_SUBSCRIPTION = _("Are you sure you want to delete this subscription?");
     </script>
-    [% INCLUDE 'mana.inc' %]
     [% Asset.js("js/serials-toolbar.js") | $raw %]
+    [% Asset.js("js/mana.js") | $raw %]
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/treetable/jquery.treetable.js") | $raw %]
     [% INCLUDE 'columns_settings.inc' %]
@@ -511,9 +512,14 @@
                 table.fnFilter( '', 4 ); // Not filter, display all columns
             });
             $("#show_all_orders").click();
-
-
         });
+
+        function mana_comment_close(){
+            $("#selected_id").val("");
+            $("#mana-resource-id").val("");
+            $("#mana-comment").val("");
+            $("#mana-comment-box").modal("hide");
+        }
     </script>
 [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/mana.js b/koha-tmpl/intranet-tmpl/prog/js/mana.js
new file mode 100644
index 0000000000..c36faec82a
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/mana.js
@@ -0,0 +1,83 @@
+/* global mana_comment_close */
+
+function mana_increment(mana_id, resource, fieldvalue, stepvalue ) {
+    $("#mana_comment_progress").show();
+    if( !stepvalue ){ stepvalue = 1; }
+    $.ajax({
+        type: "POST",
+        url: "/cgi-bin/koha/svc/mana/increment",
+        data: {id: mana_id, resource: resource, field: fieldvalue, step: stepvalue},
+        datatype: "json",
+    })
+        .done(function() {
+            $(".mana_comment_status").hide();
+            $("#mana_comment_success").show();
+        })
+        .fail(function( error ) {
+            $(".mana_comment_status").hide();
+            $("#mana_comment_errortext").html( error.status + " " + error.statusText );
+            $("#mana_comment_failed").show();
+        })
+        .always(function() {
+            mana_comment_close();
+        });
+}
+
+function mana_comment( target_id, manamsg, resource_type ) {
+    $("#mana_comment_progress").show();
+    $.ajax( {
+        type: "POST",
+        url: "/cgi-bin/koha/svc/mana/share",
+        data: { message: manamsg, resource: resource_type, resource_id: target_id },
+        datatype: "json",
+    })
+        .done(function() {
+            $(".mana_comment_status").hide();
+            $("#mana_comment_success").show();
+        })
+        .fail(function( error ) {
+            $(".mana_comment_status").hide();
+            $("#mana_comment_errortext").html( error.status + " " + error.statusText );
+            $("#mana_comment_failed").show();
+        })
+        .always(function() {
+            $("#selected_id").val("");
+            $("#mana-resource-id").val("");
+            $("#mana-comment").val("");
+            mana_comment_close();
+        });
+}
+
+$(document).ready(function() {
+
+    $("body").on("submit", "#mana_comment_form", function( e ) {
+        e.preventDefault();
+        var resource_type = $('#mana-resource').val();
+        var resource_id = $('#mana-resource-id').val();
+        var comment = $("#mana-comment").val();
+        mana_comment(resource_id, comment, resource_type);
+    });
+
+    $("body").on("click", '#mana-comment-close', function( e ) {
+        e.preventDefault();
+        mana_comment_close();
+    });
+
+    $("body").on("click", ".mana-actions a", function( e ) {
+        e.preventDefault();
+        $(".mana_comment_status").hide();
+        var commentid = $(this).data("commentid");
+        var resourceid = $(this).data("resourceid");
+        $("#mana-resource-id").val( resourceid );
+        if ( commentid == "other") {
+            if( $("#new_mana_comment").length ){
+                $("#selected_id").val( commentid );
+                $("#mana_results, #new_mana_comment").toggle();
+            } else {
+                $("#mana-comment-box").modal("show");
+            }
+        } else {
+            mana_increment( commentid, "resource_comment", "nb");
+        }
+    });
+});
diff --git a/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js b/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js
index 776c9fd92e..d82b875dbf 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js
@@ -1,4 +1,4 @@
-/* global irregularity more_than_one_serial subscriptionid tags */
+/* global _ irregularity more_than_one_serial subscriptionid tags interface theme mana_enabled MSG_FREQUENCY_LENGTH_ERROR */
 
 var globalnumpatterndata;
 var globalfreqdata;
@@ -47,13 +47,13 @@ function Clear(id) {
 
 function Check_page1() {
     if ( $("#aqbooksellerid").val().length == 0) {
-        input_box = confirm(_("If you wish to claim late or missing issues you must link this subscription to a vendor. Click OK to ignore or Cancel to return and enter a vendor"));
+        input_box = confirm( MSG_LINK_TO_VENDOR );
         if (input_box==false) {
             return false;
         }
     }
     if ($("#biblionumber").val().length == 0) {
-        alert(_("You must choose or create a biblio"));
+        alert( MSG_LINK_BIBLIO );
         return false;
     }
 
@@ -63,23 +63,23 @@ function Check_page1() {
 function Check_page2(){
     if( more_than_one_serial == "" ){
         if($("#acqui_date").val().length == 0){
-            alert(_("You must choose a first publication date"));
+            alert( MSG_REQUIRED_PUB_DATE );
             return false;
         }
     }
     if($("#sublength").val().length == 0 && $("input[name='enddate']").val().length == 0){
-        alert(_("You must choose a subscription length or an end date."));
+        alert( MSG_REQUIRED_SUB_LENGTH );
         return false;
     }
     if(advancedpatternlocked == 0){
-        alert(_("You have modified the advanced prediction pattern. Please save your work or cancel modifications."));
+        alert( MSG_SAVE_PREDICTION_PATTERN );
         return false;
     }
     if(patternneedtobetested){
         if( irregularity !== "" ){
-           alert(_("Warning! Present pattern has planned irregularities. Click on 'Test prediction pattern' to check if it's still valid"));
+            alert( MSG_PATTERN_IRREG );
         } else {
-            alert(_("Please click on 'Test prediction pattern' before saving subscription."));
+            alert( MSG_TEST_PREDICTION );
         }
         return false;
     }
@@ -95,7 +95,7 @@ function frequencyload(){
         $("input[name='unitsperissue']").val(manafreqdata.unitsperissue);
         $("input[name='issuesperunit']").val(manafreqdata.issuesperunit);
         if ($( "#numberpattern option:selected" ).val() === "mana" ) {
-            $("input[name='mana_id']").val(manaid);
+            $("#mana_id").val(manaid);
         }
     } else {
         $.getJSON("subscription-frequency.pl",{"frequency_id":document.f.frequency.value,ajax:'true'},
@@ -110,7 +110,7 @@ function frequencyload(){
                 }
             }
         );
-        $("input[name='mana_id']").val("");
+        $("#mana_id").val("");
     }
 }
 
@@ -119,7 +119,7 @@ function numberpatternload(){
         globalnumpatterndata=mananumpatterndata;
         $("input[name='sndescription']").val(mananumpatterndata.description);
         if($("#frequency option:selected" ).val() === "mana"){
-            $("input[name='mana_id']").val(manaid);
+            $("#mana_id").val(manaid);
         }
         if (globalnumpatterndata==undefined){
             return false;
@@ -137,7 +137,7 @@ function numberpatternload(){
                 restoreAdvancedPattern();
             }
         );
-        $("input[name='mana_id']").val("");
+        $("#mana_id").val("");
     }
 }
 
@@ -260,24 +260,24 @@ function testPredictionPattern() {
     var error = 0;
     var error_msg = "";
     if(frequencyid == undefined || frequencyid == ""){
-        error_msg += _("- Frequency is not defined") + "\n";
+        error_msg += "- " + MSG_FREQUENCY_UNDEFINED + "\n";
         error ++;
     }
     acquidate = $("#acqui_date").val();
     if(acquidate == undefined || acquidate == ""){
-        error_msg += _("- First publication date is not defined") + "\n";
+        error_msg += "-" + MSG_PUB_DATE_UNDEFINED + "\n";
         error ++;
     }
     if( more_than_one_serial !== "" ){
         var nextacquidate = $("#nextacquidate").val();
         if(nextacquidate == undefined || nextacquidate == ""){
-            error_msg += _("- Next issue publication date is not defined") + "\n";
+            error_msg += "-" + MSG_NEXT_ISSUE_UNDEFINED + "\n";
             error ++;
         }
     }
 
     if(error){
-        alert(_("Cannot test prediction pattern for the following reason(s): %s").format(error_msg));
+        alert( MSG_PATTERN_TEST_FAILED.format(error_msg) );
         return false;
     }
 
@@ -326,7 +326,7 @@ function testPredictionPattern() {
 
 function saveAdvancedPattern() {
     if ($("#patternname").val().length == 0) {
-        alert(_("Please enter a name for this pattern"));
+        alert( MSG_PATTERN_NAME );
         return false;
     }
 
@@ -341,8 +341,8 @@ function saveAdvancedPattern() {
     });
     var cnfrm = 1;
     if(found){
-        var msg = _("This pattern name already exists. Do you want to modify it?")
-            + "\n" + _("Warning: it will modify the pattern for all subscriptions that are using it.");
+        var msg = MSG_PATTERN_NAME_EXISTS
+            + "\n" + MSG_OVERWRITE_PATTERNS;
         cnfrm = confirm(msg);
     }
 
@@ -372,7 +372,7 @@ function saveAdvancedPattern() {
                     $("#numberpattern").val(data.numberpatternid);
                     numberpatternload();
                 } else {
-                    alert(_("Something went wrong. Unable to create a new numbering pattern."));
+                    alert( MSG_PATTERN_CREATE_FAILED );
                 }
             }
         );
@@ -393,7 +393,7 @@ function show_page_2() {
 }
 
 function mana_search() {
-    $("#mana_search").html("<p>" + _("Mana kb is being asked for your subscription..") + "</p>");
+    $("#mana_search").html("<p>" + MSG_MANA_SEARCHING + "... <img src='" + interface + "/" + theme + "/img/spinner-small.gif' /></p>");
     $("#mana_search").show();
 
     $.ajax({
@@ -402,33 +402,33 @@ function mana_search() {
         data: {id: $("#biblionumber").val(), resource: 'subscription', usecomments: 1},
         dataType: "html",
     })
-    .done( function( result ) {
-        $("#mana_search_result .modal-body").html(result);
-        $("#mana_search_result_label").text(_("Results from Mana Knowledge Base"));
-        $("#mana_results_datatable").dataTable($.extend(true, {}, dataTablesDefaults, {
-            "sPaginationType": "four_button",
-            "order":[[4, "desc"], [5, "desc"]],
-            "autoWidth": false,
-            "columnDefs": [
-                { "width": "35%", "targets": 1 }
-            ],
-            "aoColumnDefs": [
-                { 'bSortable': false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
-                { "sType": "title-string", "aTargets" : [ "title-string" ] },
-                { 'sType': "anti-the", 'aTargets' : [ 'anti-the'] }
-            ]
-        }));
-        if( $("#mana_results_datatable").length && $("td.dataTables_empty").length == 0){
-            $("#mana_search").html("<p>" + _("Subscription found on Mana Knowledge Base:") + "</p><p> <a style='cursor:pointer' data-toggle='modal' data-target='#mana_search_result'>" + _("Quick fill") + "</a></p>");
-        }
-        else if ( $("#mana_results_datatable").length ){
-            $("#mana_search").html("<p>" + _("No subscription found on Mana Knowledge Base :(") + "</p><p>" + _(" Please feel free to share you pattern with all others librarians once you are done") + "</p>");
-        }
-        else{
-            $("#mana_search").html( result );
-        }
-        $("#mana_search").show();
-    })
+        .done( function( result ) {
+            $("#mana_search_result .modal-body").html(result);
+            $("#mana_search_result_label").text( MSG_MANA_RESULTS );
+            $("#mana_results_datatable").dataTable($.extend(true, {}, dataTablesDefaults, {
+                "sPaginationType": "four_button",
+                "order":[[4, "desc"], [5, "desc"]],
+                "autoWidth": false,
+                "columnDefs": [
+                    { "width": "35%", "targets": 1 }
+                ],
+                "aoColumnDefs": [
+                    { 'bSortable': false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
+                    { "sType": "title-string", "aTargets" : [ "title-string" ] },
+                    { 'sType': "anti-the", 'aTargets' : [ 'anti-the'] }
+                ]
+            }));
+            if( $("#mana_results_datatable").length && $("td.dataTables_empty").length == 0){
+                $("#mana_search").html("<p>" + MSG_MANA_SUBSCRIPTION_FOUND + "</p><p> <a href=\"#\" data-toggle=\"modal\" data-target=\"#mana_search_result\"><i class=\"fa fa-window-maximize\"></i> " + MSG_MANA_SHOW_DETAILS + "</a></p>");
+            }
+            else if ( $("#mana_results_datatable").length ){
+                $("#mana_search").html("<p>" + MSG_MANA_NO_SUBSCRIPTION_FOUND + "</p><p>" + MSG_MANA_SHARE_PATTERN + "</p>");
+            }
+            else{
+                $("#mana_search").html( result );
+            }
+            $("#mana_search").show();
+        });
 }
 
 function mana_use(mana_id){
@@ -440,70 +440,83 @@ function mana_use(mana_id){
         data: {id: mana_id, resource: 'subscription'},
         dataType: "json",
     })
-    .done(function(result){
-        var select = document.getElementById('numberpattern');
-        for(i = 0; i < select.length; i++){
-            if(select[i].value === "mana"){
-                select.remove(i);
+        .done(function(result){
+            var select = document.getElementById('numberpattern');
+            for(i = 0; i < select.length; i++){
+                if(select[i].value === "mana"){
+                    select.remove(i);
+                }
             }
-        }
-        var optionnumpattern = document.createElement("option");
-        optionnumpattern.text = result.label + " (mana)";
-        optionnumpattern.selected = true;
-        optionnumpattern.value="mana";
-        select.add(optionnumpattern);
-
-        mananumpatterndata = {
-            id:"mana",
-            add1:result.add1,
-            add2:result.add2,
-            add3:result.add3,
-            description:result.sndescription,
-            displayorder:result.displayorder,
-            every1:result.every1,
-            every2:result.every2,
-            every3:result.every3,
-            label:result.label,
-            label1:result.label1,
-            label2:result.label2,
-            label3:result.label3,
-            numbering1:result.numbering1,
-            numbering2:result.numbering2,
-            numbering3:result.numbering3,
-            numberingmethod:result.numberingmethod,
-            setto1:result.setto1,
-            setto2:result.setto2,
-            setto3:result.setto3,
-            whenmorethan1:result.whenmorethan1,
-            whenmorethan2:result.whenmorethan2,
-            whenmorethan3:result.whenmorethan3,
-        };
-        select = document.getElementById("frequency");
-        for(i = 0; i < select.length; i++){
-            if(select[i].value === "mana"){
-                select.remove(i);
+            var optionnumpattern = document.createElement("option");
+            optionnumpattern.text = result.label + " (mana)";
+            optionnumpattern.selected = true;
+            optionnumpattern.value="mana";
+            select.add(optionnumpattern);
+
+            mananumpatterndata = {
+                id:"mana",
+                add1:result.add1,
+                add2:result.add2,
+                add3:result.add3,
+                description:result.sndescription,
+                displayorder:result.displayorder,
+                every1:result.every1,
+                every2:result.every2,
+                every3:result.every3,
+                label:result.label,
+                label1:result.label1,
+                label2:result.label2,
+                label3:result.label3,
+                numbering1:result.numbering1,
+                numbering2:result.numbering2,
+                numbering3:result.numbering3,
+                numberingmethod:result.numberingmethod,
+                setto1:result.setto1,
+                setto2:result.setto2,
+                setto3:result.setto3,
+                whenmorethan1:result.whenmorethan1,
+                whenmorethan2:result.whenmorethan2,
+                whenmorethan3:result.whenmorethan3,
+            };
+            select = document.getElementById("frequency");
+            for(i = 0; i < select.length; i++){
+                if(select[i].value === "mana"){
+                    select.remove(i);
+                }
             }
-        }
-        var optionfreq = document.createElement("option");
-        optionfreq.text = result.sfdescription + " (mana)";
-        optionfreq.selected = true;
-        optionfreq.value="mana";
-        select.add(optionfreq);
-        manafreqdata = {
-            id:"mana",
-            description:result.sfdescription,
-            displayorder:result.displayorder,
-            issuesperunit:result.issuesperunit,
-            unit:result.unit,
-            unitsperissue:result.unitsperissue,
-        };
-        manaid = result.id;
-        $("input[name='mana_id']").val(manaid);
-        $("#mana_search_result").modal("hide");
-        frequencyload();
-        numberpatternload();
-    }).fail( function( result ){
-    });
+            var optionfreq = document.createElement("option");
+            optionfreq.text = result.sfdescription + " (mana)";
+            optionfreq.selected = true;
+            optionfreq.value="mana";
+            select.add(optionfreq);
+            manafreqdata = {
+                id:"mana",
+                description:result.sfdescription,
+                displayorder:result.displayorder,
+                issuesperunit:result.issuesperunit,
+                unit:result.unit,
+                unitsperissue:result.unitsperissue,
+            };
+            manaid = result.id;
+            $("#mana_id").val(manaid);
+            $("#mana_search_result").modal("hide");
+            frequencyload();
+            numberpatternload();
+        })
+        .done( function(){
+            $("tr").removeClass("selected");
+            $(".mana-use i").attr("class","fa fa-download");
+        })
+        .fail( function( result ){
+        });
+}
+
+function mana_comment_close(){
+    $("#selected_id").val("");
+    $("#mana-resource-id").val("");
+    $("#mana-comment").val("");
+    $("#mana_results").show();
+    $("#new_mana_comment").hide();
 }
 
 $(document).ready(function() {
@@ -511,7 +524,14 @@ $(document).ready(function() {
         mana_search();
     }
     $("#displayexample").hide();
-    $("#mana_search_result").modal("hide");
+
+    // When Mana search results modal is hidden, hide comment form and any status messages
+    $("#mana_search_result").on("hide.bs.modal", function(){
+        $("#mana_results").show();
+        $("#new_mana_comment").hide();
+        $(".mana_comment_status").hide();
+    });
+
     $("#aqbooksellerid").on('keypress', function(e) {
         if (e.keyCode == 13) {
             e.preventDefault();
@@ -652,4 +672,11 @@ $(document).ready(function() {
     $('#save-subscription').on("click", function(e){
         $('select:disabled').removeAttr('disabled');
     });
+
+    $("body").on("click", ".mana-use", function(e) {
+        e.preventDefault();
+        $(this).find("i").attr("class","fa fa-refresh fa-spin");
+        var subscription_id = $(this).data("subscription_id");
+        mana_use( subscription_id );
+    });
 });
diff --git a/svc/mana/search b/svc/mana/search
index a89e54c562..836e6b2adb 100755
--- a/svc/mana/search
+++ b/svc/mana/search
@@ -23,10 +23,9 @@ use Modern::Perl;
 use Koha::SharedContent;
 use Koha::Subscription;
 use C4::Auth qw(check_cookie_auth), qw(get_template_and_user);
-use C4::Output qw( output_with_http_headers );
+use C4::Output qw( output_html_with_http_headers );
 
 use CGI;
-use JSON;
 
 my $input = new CGI;
 
@@ -80,4 +79,4 @@ $template->param( $input->param('resource')."s" => $result->{data} );
 $template->param( statuscode => $result->{code} );
 $template->param( msg => $result->{msg} );
 
-output_with_http_headers $input, $cookie, $template->output, 'json';
+output_html_with_http_headers $input, $cookie, $template->output;
\ No newline at end of file
-- 
2.39.5