From f9761b5b0cf6d3f28c07393cc8e57850ac4b6aaa Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 2 Nov 2018 14:40:14 +0000
Subject: [PATCH] Bug 10662: (follow-up) Template corrections and improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This patch makes a number of corrections and improvements to the OAI
harvester templates:

 - Add missing DataTables CSS include
 - Replace YUI grid with Bootstrap
 - Correct style of inline dialogs (.dialog.alert, .dialog.message)
 - Correct class of form hint and error messages
 - Format dates in saved and submitted requests tables
   - Add title-string sorting to DataTables configuration
 - Add delete confirmation to saved and submitted tables
 - Disable sorting on action columns
 - Style action links inside tables as buttons
 - Removed commented markup
 - Add missing JavaScript include (tools-menu.js) to highlight active
   section in sidebar menu
 - Add CodeMirror styling to record view page (CodeMirror XML mode file
   is added to enable this)
 - Remove invalid <script> "type" attribute

To test, apply the patch and clear your cache if necessary.

 - Go to Tools -> OAI-PMH harvester
   - "Saved," "Submitted," and "Import history" table should look
      correct and work correctly: Sorting, column visibility,
      pagination, etc.
   - In the "Saved" and "Submitted" tables, dates should be formatted
     according to the dateformat preference and sorting of these dates
     should work correctly.
   - In the "Import history" table the "View record" and "View in
     catalog" links should be styled as Bootstrap buttons.
     - Click the "View record" button.
       - The view of the downloaded record should have XML syntax
         highlighting.
   - When you perform actions like submitting requests, starting
     requests, etc, corresponding dialogs should be styled correctly.
     Informational/successful information should be "message" style
     dialogs. Error dialogs should be "alert" style.
   - Click "New request"
     - Form hints in the new request form should be styled correctly.
     - Submit the form without filling in any fields. Field-specific
       error messages should be styled italic red.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Andreas Hedström Mace <andreas.hedstrom.mace@sub.su.se>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
---
 koha-tmpl/intranet-tmpl/lib/codemirror/xml.min.js  |   2 +-
 .../modules/tools/oai-pmh-harvester/dashboard.tt   | 401 ++++++++++-----------
 .../en/modules/tools/oai-pmh-harvester/record.tt   |  54 ++-
 .../en/modules/tools/oai-pmh-harvester/request.tt  | 389 +++++++++++---------
 koha-tmpl/intranet-tmpl/prog/js/tools-menu.js      |   2 +
 5 files changed, 450 insertions(+), 398 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/lib/codemirror/xml.min.js b/koha-tmpl/intranet-tmpl/lib/codemirror/xml.min.js
index 939abbd7a3..2f3bde3f73 100644
--- a/koha-tmpl/intranet-tmpl/lib/codemirror/xml.min.js
+++ b/koha-tmpl/intranet-tmpl/lib/codemirror/xml.min.js
@@ -1 +1 @@
-!function(t){"object"==typeof exports&&"object"==typeof module?t(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],t):t(CodeMirror)}(function(y){"use strict";var N={autoSelfClosers:{area:!0,base:!0,br:!0,col:!0,command:!0,embed:!0,frame:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0,menuitem:!0},implicitlyClosed:{dd:!0,li:!0,optgroup:!0,option:!0,p:!0,rp:!0,rt:!0,tbody:!0,td:!0,tfoot:!0,th:!0,tr:!0},contextGrabbers:{dd:{dd:!0,dt:!0},dt:{dd:!0,dt:!0},li:{li:!0},option:{option:!0,optgroup:!0},optgroup:{optgroup:!0},p:{address:!0,article:!0,aside:!0,blockquote:!0,dir:!0,div:!0,dl:!0,fieldset:!0,footer:!0,form:!0,h1:!0,h2:!0,h3:!0,h4:!0,h5:!0,h6:!0,header:!0,hgroup:!0,hr:!0,menu:!0,nav:!0,ol:!0,p:!0,pre:!0,section:!0,table:!0,ul:!0},rp:{rp:!0,rt:!0},rt:{rp:!0,rt:!0},tbody:{tbody:!0,tfoot:!0},td:{td:!0,th:!0},tfoot:{tbody:!0},th:{td:!0,th:!0},thead:{tbody:!0,tfoot:!0},tr:{tr:!0}},doNotIndent:{pre:!0},allowUnquoted:!0,allowMissing:!0,caseFold:!0},z={autoSelfClosers:{},implicitlyClosed:{},contextGrabbers:{},doNotIndent:{},allowUnquoted:!1,allowMissing:!1,allowMissingTagName:!1,caseFold:!1};y.defineMode("xml",function(t,e){var i,a,l=t.indentUnit,u={},n=e.htmlMode?N:z;for(var r in n)u[r]=n[r];for(var r in e)u[r]=e[r];function d(e,n){function t(t){return(n.tokenize=t)(e,n)}var r=e.next();return"<"==r?e.eat("!")?e.eat("[")?e.match("CDATA[")?t(o("atom","]]>")):null:e.match("--")?t(o("comment","--\x3e")):e.match("DOCTYPE",!0,!0)?(e.eatWhile(/[\w\._\-]/),t(function r(o){return function(t,e){for(var n;null!=(n=t.next());){if("<"==n)return e.tokenize=r(o+1),e.tokenize(t,e);if(">"==n){if(1!=o)return e.tokenize=r(o-1),e.tokenize(t,e);e.tokenize=d;break}}return"meta"}}(1))):null:e.eat("?")?(e.eatWhile(/[\w\._\-]/),n.tokenize=o("meta","?>"),"meta"):(i=e.eat("/")?"closeTag":"openTag",n.tokenize=c,"tag bracket"):"&"!=r?(e.eatWhile(/[^&<]/),null):(e.eat("#")?e.eat("x")?e.eatWhile(/[a-fA-F\d]/)&&e.eat(";"):e.eatWhile(/[\d]/)&&e.eat(";"):e.eatWhile(/[\w\.\-:]/)&&e.eat(";"))?"atom":"error"}function c(t,e){var n=t.next();if(">"==n||"/"==n&&t.eat(">"))return e.tokenize=d,i=">"==n?"endTag":"selfcloseTag","tag bracket";if("="==n)return i="equals",null;if("<"!=n)return/[\'\"]/.test(n)?(e.tokenize=(r=n,(o=function(t,e){for(;!t.eol();)if(t.next()==r){e.tokenize=c;break}return"string"}).isInAttribute=!0,o),e.stringStartCol=t.column(),e.tokenize(t,e)):(t.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/),"word");e.tokenize=d,e.state=g,e.tagName=e.tagStart=null;var r,o,a=e.tokenize(t,e);return a?a+" tag error":"tag error"}function o(n,r){return function(t,e){for(;!t.eol();){if(t.match(r)){e.tokenize=d;break}t.next()}return n}}function s(t,e,n){this.prev=t.context,this.tagName=e,this.indent=t.indented,this.startOfLine=n,(u.doNotIndent.hasOwnProperty(e)||t.context&&t.context.noIndent)&&(this.noIndent=!0)}function f(t){t.context&&(t.context=t.context.prev)}function m(t,e){for(var n;;){if(!t.context)return;if(n=t.context.tagName,!u.contextGrabbers.hasOwnProperty(n)||!u.contextGrabbers[n].hasOwnProperty(e))return;f(t)}}function g(t,e,n){return"openTag"==t?(n.tagStart=e.column(),p):"closeTag"==t?h:g}function p(t,e,n){return"word"==t?(n.tagName=e.current(),a="tag",k):u.allowMissingTagName&&"endTag"==t?(a="tag bracket",k(t,e,n)):(a="error",p)}function h(t,e,n){if("word"!=t)return u.allowMissingTagName&&"endTag"==t?(a="tag bracket",x(t,e,n)):(a="error",b);var r=e.current();return n.context&&n.context.tagName!=r&&u.implicitlyClosed.hasOwnProperty(n.context.tagName)&&f(n),n.context&&n.context.tagName==r||!1===u.matchClosing?(a="tag",x):(a="tag error",b)}function x(t,e,n){return"endTag"!=t?(a="error",x):(f(n),g)}function b(t,e,n){return a="error",x(t,0,n)}function k(t,e,n){if("word"==t)return a="attribute",w;if("endTag"!=t&&"selfcloseTag"!=t)return a="error",k;var r=n.tagName,o=n.tagStart;return n.tagName=n.tagStart=null,"selfcloseTag"==t||u.autoSelfClosers.hasOwnProperty(r)?m(n,r):(m(n,r),n.context=new s(n,r,o==n.indented)),g}function w(t,e,n){return"equals"==t?v:(u.allowMissing||(a="error"),k(t,0,n))}function v(t,e,n){return"string"==t?T:"word"==t&&u.allowUnquoted?(a="string",k):(a="error",k(t,0,n))}function T(t,e,n){return"string"==t?T:k(t,0,n)}return d.isInText=!0,{startState:function(t){var e={tokenize:d,state:g,indented:t||0,tagName:null,tagStart:null,context:null};return null!=t&&(e.baseIndent=t),e},token:function(t,e){if(!e.tagName&&t.sol()&&(e.indented=t.indentation()),t.eatSpace())return null;i=null;var n=e.tokenize(t,e);return(n||i)&&"comment"!=n&&(a=null,e.state=e.state(i||n,t,e),a&&(n="error"==a?n+" error":a)),n},indent:function(t,e,n){var r=t.context;if(t.tokenize.isInAttribute)return t.tagStart==t.indented?t.stringStartCol+1:t.indented+l;if(r&&r.noIndent)return y.Pass;if(t.tokenize!=c&&t.tokenize!=d)return n?n.match(/^(\s*)/)[0].length:0;if(t.tagName)return!1!==u.multilineTagIndentPastTag?t.tagStart+t.tagName.length+2:t.tagStart+l*(u.multilineTagIndentFactor||1);if(u.alignCDATA&&/<!\[CDATA\[/.test(e))return 0;var o=e&&/^<(\/)?([\w_:\.-]*)/.exec(e);if(o&&o[1])for(;r;){if(r.tagName==o[2]){r=r.prev;break}if(!u.implicitlyClosed.hasOwnProperty(r.tagName))break;r=r.prev}else if(o)for(;r;){var a=u.contextGrabbers[r.tagName];if(!a||!a.hasOwnProperty(o[2]))break;r=r.prev}for(;r&&r.prev&&!r.startOfLine;)r=r.prev;return r?r.indent+l:t.baseIndent||0},electricInput:/<\/[\s\w:]+>$/,blockCommentStart:"\x3c!--",blockCommentEnd:"--\x3e",configuration:u.htmlMode?"html":"xml",helperType:u.htmlMode?"html":"xml",skipAttribute:function(t){t.state==v&&(t.state=k)}}}),y.defineMIME("text/xml","xml"),y.defineMIME("application/xml","xml"),y.mimeModes.hasOwnProperty("text/html")||y.defineMIME("text/html",{name:"xml",htmlMode:!0})});
\ No newline at end of file
+!function(t){"object"==typeof exports&&"object"==typeof module?t(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],t):t(CodeMirror)}(function(y){"use strict";var N={autoSelfClosers:{area:!0,base:!0,br:!0,col:!0,command:!0,embed:!0,frame:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0,menuitem:!0},implicitlyClosed:{dd:!0,li:!0,optgroup:!0,option:!0,p:!0,rp:!0,rt:!0,tbody:!0,td:!0,tfoot:!0,th:!0,tr:!0},contextGrabbers:{dd:{dd:!0,dt:!0},dt:{dd:!0,dt:!0},li:{li:!0},option:{option:!0,optgroup:!0},optgroup:{optgroup:!0},p:{address:!0,article:!0,aside:!0,blockquote:!0,dir:!0,div:!0,dl:!0,fieldset:!0,footer:!0,form:!0,h1:!0,h2:!0,h3:!0,h4:!0,h5:!0,h6:!0,header:!0,hgroup:!0,hr:!0,menu:!0,nav:!0,ol:!0,p:!0,pre:!0,section:!0,table:!0,ul:!0},rp:{rp:!0,rt:!0},rt:{rp:!0,rt:!0},tbody:{tbody:!0,tfoot:!0},td:{td:!0,th:!0},tfoot:{tbody:!0},th:{td:!0,th:!0},thead:{tbody:!0,tfoot:!0},tr:{tr:!0}},doNotIndent:{pre:!0},allowUnquoted:!0,allowMissing:!0,caseFold:!0},z={autoSelfClosers:{},implicitlyClosed:{},contextGrabbers:{},doNotIndent:{},allowUnquoted:!1,allowMissing:!1,allowMissingTagName:!1,caseFold:!1};y.defineMode("xml",function(t,e){var i,a,l=t.indentUnit,u={},n=e.htmlMode?N:z;for(var r in n)u[r]=n[r];for(var r in e)u[r]=e[r];function d(e,n){function t(t){return(n.tokenize=t)(e,n)}var r=e.next();return"<"==r?e.eat("!")?e.eat("[")?e.match("CDATA[")?t(o("atom","]]>")):null:e.match("--")?t(o("comment","--\x3e")):e.match("DOCTYPE",!0,!0)?(e.eatWhile(/[\w\._\-]/),t(function r(o){return function(t,e){for(var n;null!=(n=t.next());){if("<"==n)return e.tokenize=r(o+1),e.tokenize(t,e);if(">"==n){if(1!=o)return e.tokenize=r(o-1),e.tokenize(t,e);e.tokenize=d;break}}return"meta"}}(1))):null:e.eat("?")?(e.eatWhile(/[\w\._\-]/),n.tokenize=o("meta","?>"),"meta"):(i=e.eat("/")?"closeTag":"openTag",n.tokenize=c,"tag bracket"):"&"!=r?(e.eatWhile(/[^&<]/),null):(e.eat("#")?e.eat("x")?e.eatWhile(/[a-fA-F\d]/)&&e.eat(";"):e.eatWhile(/[\d]/)&&e.eat(";"):e.eatWhile(/[\w\.\-:]/)&&e.eat(";"))?"atom":"error"}function c(t,e){var n=t.next();if(">"==n||"/"==n&&t.eat(">"))return e.tokenize=d,i=">"==n?"endTag":"selfcloseTag","tag bracket";if("="==n)return i="equals",null;if("<"!=n)return/[\'\"]/.test(n)?(e.tokenize=(r=n,(o=function(t,e){for(;!t.eol();)if(t.next()==r){e.tokenize=c;break}return"string"}).isInAttribute=!0,o),e.stringStartCol=t.column(),e.tokenize(t,e)):(t.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/),"word");e.tokenize=d,e.state=g,e.tagName=e.tagStart=null;var r,o,a=e.tokenize(t,e);return a?a+" tag error":"tag error"}function o(n,r){return function(t,e){for(;!t.eol();){if(t.match(r)){e.tokenize=d;break}t.next()}return n}}function s(t,e,n){this.prev=t.context,this.tagName=e,this.indent=t.indented,this.startOfLine=n,(u.doNotIndent.hasOwnProperty(e)||t.context&&t.context.noIndent)&&(this.noIndent=!0)}function f(t){t.context&&(t.context=t.context.prev)}function m(t,e){for(var n;;){if(!t.context)return;if(n=t.context.tagName,!u.contextGrabbers.hasOwnProperty(n)||!u.contextGrabbers[n].hasOwnProperty(e))return;f(t)}}function g(t,e,n){return"openTag"==t?(n.tagStart=e.column(),p):"closeTag"==t?h:g}function p(t,e,n){return"word"==t?(n.tagName=e.current(),a="tag",k):u.allowMissingTagName&&"endTag"==t?(a="tag bracket",k(t,e,n)):(a="error",p)}function h(t,e,n){if("word"!=t)return u.allowMissingTagName&&"endTag"==t?(a="tag bracket",x(t,e,n)):(a="error",b);var r=e.current();return n.context&&n.context.tagName!=r&&u.implicitlyClosed.hasOwnProperty(n.context.tagName)&&f(n),n.context&&n.context.tagName==r||!1===u.matchClosing?(a="tag",x):(a="tag error",b)}function x(t,e,n){return"endTag"!=t?(a="error",x):(f(n),g)}function b(t,e,n){return a="error",x(t,0,n)}function k(t,e,n){if("word"==t)return a="attribute",w;if("endTag"!=t&&"selfcloseTag"!=t)return a="error",k;var r=n.tagName,o=n.tagStart;return n.tagName=n.tagStart=null,"selfcloseTag"==t||u.autoSelfClosers.hasOwnProperty(r)?m(n,r):(m(n,r),n.context=new s(n,r,o==n.indented)),g}function w(t,e,n){return"equals"==t?v:(u.allowMissing||(a="error"),k(t,0,n))}function v(t,e,n){return"string"==t?T:"word"==t&&u.allowUnquoted?(a="string",k):(a="error",k(t,0,n))}function T(t,e,n){return"string"==t?T:k(t,0,n)}return d.isInText=!0,{startState:function(t){var e={tokenize:d,state:g,indented:t||0,tagName:null,tagStart:null,context:null};return null!=t&&(e.baseIndent=t),e},token:function(t,e){if(!e.tagName&&t.sol()&&(e.indented=t.indentation()),t.eatSpace())return null;i=null;var n=e.tokenize(t,e);return(n||i)&&"comment"!=n&&(a=null,e.state=e.state(i||n,t,e),a&&(n="error"==a?n+" error":a)),n},indent:function(t,e,n){var r=t.context;if(t.tokenize.isInAttribute)return t.tagStart==t.indented?t.stringStartCol+1:t.indented+l;if(r&&r.noIndent)return y.Pass;if(t.tokenize!=c&&t.tokenize!=d)return n?n.match(/^(\s*)/)[0].length:0;if(t.tagName)return!1!==u.multilineTagIndentPastTag?t.tagStart+t.tagName.length+2:t.tagStart+l*(u.multilineTagIndentFactor||1);if(u.alignCDATA&&/<!\[CDATA\[/.test(e))return 0;var o=e&&/^<(\/)?([\w_:\.-]*)/.exec(e);if(o&&o[1])for(;r;){if(r.tagName==o[2]){r=r.prev;break}if(!u.implicitlyClosed.hasOwnProperty(r.tagName))break;r=r.prev}else if(o)for(;r;){var a=u.contextGrabbers[r.tagName];if(!a||!a.hasOwnProperty(o[2]))break;r=r.prev}for(;r&&r.prev&&!r.startOfLine;)r=r.prev;return r?r.indent+l:t.baseIndent||0},electricInput:/<\/[\s\w:]+>$/,blockCommentStart:"\x3c!--",blockCommentEnd:"--\x3e",configuration:u.htmlMode?"html":"xml",helperType:u.htmlMode?"html":"xml",skipAttribute:function(t){t.state==v&&(t.state=k)}}}),y.defineMIME("text/xml","xml"),y.defineMIME("application/xml","xml"),y.mimeModes.hasOwnProperty("text/html")||y.defineMIME("text/html",{name:"xml",htmlMode:!0})});
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/dashboard.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/dashboard.tt
index 4a4097f7fc..dceeecad34 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/dashboard.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/dashboard.tt
@@ -1,100 +1,107 @@
+[% USE raw %]
+[% USE Asset %]
 [% USE ColumnsSettings %]
+[% USE KohaDates %]
 [% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Tools &rsaquo; OAI-PMH harvester</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% dashboard_page = '/cgi-bin/koha/tools/oai-pmh-harvester/dashboard.pl' %]
 [% request_page = '/cgi-bin/koha/tools/oai-pmh-harvester/request.pl' %]
-<style type="text/css">
-    a.paginate_button {
-        padding: 2px;
-    }
-</style>
+[% Asset.css("css/datatables.css") | $raw %]
 </head>
 <body id="tools_oai-pmh-harvester" class="tools">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
     <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; OAI-PMH harvester</div>
-    <div id="doc3" class="yui-t2">
-        <div id="bd">
-            <div id="yui-main">
-                <div class="yui-b">
-                    <h1>OAI-PMH harvester</h1>
-                    <div id="toolbar" class="btn-toolbar">
-                        <a id="new-request" class="btn btn-default btn-sm" href="[% request_page | url %]?op=new"><i class="fa fa-plus"></i> New request</a>
+
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
+
+                <h1>OAI-PMH harvester</h1>
+                <div id="toolbar" class="btn-toolbar">
+                    <a id="new-request" class="btn btn-default btn-sm" href="[% request_page | url %]?op=new"><i class="fa fa-plus"></i> New request</a>
+                </div>
+                [% IF ( harvester.offline ) %]
+                    <div class="dialog alert">
+                        <span>OAI-PMH harvester offline</span>
                     </div>
-                    [% IF ( harvester.offline ) %]
-                        <div class="alert">
-                            <span>OAI-PMH harvester offline</span>
-                        </div>
-                    [% END %]
-                    <div id="dashboard-items" class="toptabs">
-                        <ul>
-                            <li>
-                                <a href="#saved_requests">Saved requests <span id="saved_count">([% saved_requests.size | html %])</span></a>
-                            </li>
-                            <li>
-                                <a href="#submitted_requests">Submitted requests <span id="submitted_count">([% submitted_requests.size | html %])</span></a>
-                            </li>
-                            <li>
-                                <a href="#imports">Import history <span id="import_count">(0)</span></a>
-                            </li>
-                        </ul>
-                        <div id="submitted_requests">
-                            [% IF ( result.defined("start") ) %]
-                                <div class="alert">
-                                    [% IF ( result.start ) %]
-                                        <span>Start succeeded</span>
-                                    [% ELSE %]
-                                        <span>Start failed</span>
-                                    [% END %]
+                [% END %]
+                <div id="dashboard-items" class="toptabs">
+                    <ul>
+                        <li>
+                            <a href="#saved_requests">Saved requests <span id="saved_count">([% saved_requests.size | html %])</span></a>
+                        </li>
+                        <li>
+                            <a href="#submitted_requests">Submitted requests <span id="submitted_count">([% submitted_requests.size | html %])</span></a>
+                        </li>
+                        <li>
+                            <a href="#imports">Import history <span id="import_count">(0)</span></a>
+                        </li>
+                    </ul>
+                    <div id="submitted_requests">
+                        [% IF ( result.defined("start") ) %]
+                            [% IF ( result.start ) %]
+                                <div class="dialog message">
+                                    <span>Start succeeded</span>
                                 </div>
-                            [% ELSIF ( result.defined("stop") ) %]
-                                 <div class="alert">
-                                    [% IF ( result.stop ) %]
+                            [% ELSE %]
+                                <div class="dialog alert">
+                                    <span>Start failed</span>
+                                </div>
+                            [% END %]
+                        [% ELSIF ( result.defined("stop") ) %]
+                                [% IF ( result.stop ) %]
+                                    <div class="dialog message">
                                         <span>Stop succeeded</span>
-                                    [% ELSE %]
+                                    </div>
+                                [% ELSE %]
+                                    <div class="dialog alert">
                                         <span>Stop failed</span>
-                                    [% END %]
-                                </div>
-                            [% ELSIF ( result.defined("delete") ) %]
-                                 <div class="alert">
-                                    [% IF ( result.delete ) %]
+                                    </div>
+                                [% END %]
+                        [% ELSIF ( result.defined("delete") ) %]
+                                [% IF ( result.delete ) %]
+                                    <div class="dialog message">
                                         <span>Delete succeeded</span>
-                                    [% ELSE %]
+                                    </div>
+                                [% ELSE %]
+                                    <div class="dialog alert">
                                         <span>Delete failed</span>
-                                    [% END %]
-                                </div>
-                            [% END %]
-                            <table id="submitted-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>URL</th>
-                                        <th>Set</th>
-                                        <th>From</th>
-                                        <th>Until</th>
-                                        <th>Interval</th>
-                                        <th>Effective from</th>
-                                        <th>Effective until</th>
-                                        <th>Pending imports</th>
-                                        <th>Status</th>
-                                        <th>Error</th>
-                                        <th></th>
-                                    </tr>
-                                </thead>
-                                <tbody>
+                                    </div>
+                                [% END %]
+                        [% END %]
+                        <table id="submitted-table">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>URL</th>
+                                    <th>Set</th>
+                                    <th class="title-string">From</th>
+                                    <th class="title-string">Until</th>
+                                    <th>Interval</th>
+                                    <th class="title-string">Effective from</th>
+                                    <th class="title-string">Effective until</th>
+                                    <th>Pending imports</th>
+                                    <th>Status</th>
+                                    <th>Error</th>
+                                    <th class="NoSort"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
                                 [% IF ( submitted_requests ) %]
                                     [% FOREACH submitted_request IN submitted_requests %]
                                         <tr>
                                             <td>[% submitted_request.name | html %]</td>
                                             <td>[% submitted_request.parameters.oai_pmh.baseURL | html %]</td>
                                             <td>[% submitted_request.parameters.oai_pmh.set | html %]</td>
-                                            <td>[% submitted_request.parameters.oai_pmh.from | html %]</td>
-                                            <td>[% submitted_request.parameters.oai_pmh.until | html %]</td>
+                                            <td><span title="[% submitted_request.parameters.oai_pmh.from | html %]">[% submitted_request.parameters.oai_pmh.from | $KohaDates with_hours = 1 %]</span></td>
+                                            <td><span title="[% submitted_request.parameters.oai_pmh.until | html %]">[% submitted_request.parameters.oai_pmh.until | $KohaDates with_hours = 1 %]</span></td>
                                             <td>[% submitted_request.interval | html %]</td>
-                                            <td>[% submitted_request.effective_from | html %]</td>
-                                            <td>[% submitted_request.effective_until | html %]</td>
+                                            <td><span title="[% submitted_request.effective_from | html %]">[% submitted_request.effective_from | $KohaDates with_hours = 1 %]</span></td>
+                                            <td><span title="[% submitted_request.effective_until | html %]">[% submitted_request.effective_until | $KohaDates with_hours = 1 %]</span></td>
                                             <td>[% submitted_request.pending_imports |html %]</td>
                                             <td>
                                                 [% IF ( submitted_status = submitted_request.status ) %]
@@ -123,7 +130,7 @@
                                                               <a href="[% dashboard_page | url %]?op=stop&uuid=[% submitted_request.uuid | url %]"><i class="fa fa-stop"></i> Stop</a>
                                                           </li>
                                                           <li>
-                                                              <a href="[% dashboard_page | url %]?op=delete&uuid=[% submitted_request.uuid | url %]"><i class="fa fa-trash"></i> Delete</a>
+                                                              <a class="confirmdelete" href="[% dashboard_page | url %]?op=delete&uuid=[% submitted_request.uuid | url %]"><i class="fa fa-trash"></i> Delete</a>
                                                           </li>
                                                     </ul>
                                                 </div>
@@ -131,149 +138,102 @@
                                         </tr>
                                     [% END %]
                                 [% END %]
-                                </tbody>
-                            </table>
-                        </div>
-                        <div id="saved_requests">
-                            [% IF ( result.send.defined ) %]
-                                <div class="alert">
-                                    [% IF ( result.send ) %]
+                            </tbody>
+                        </table>
+                    </div>
+                    <div id="saved_requests">
+                        [% IF ( result.send.defined ) %]
+                                [% IF ( result.send ) %]
+                                    <div class="dialog message">
                                         <span>Submit succeeded</span>
-                                    [% ELSE %]
+                                    </div>
+                                [% ELSE %]
+                                    <div class="dialog alert">
                                         <span>Submit failed</span>
-                                    [% END %]
-                                </div>
-                            [% END %]
-                            <table id="saved-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>URL</th>
-                                   <!-- <th>Verb</th>
-                                        <th>Metadata prefix</th>
-                                        <th>Identifier</th> -->
-                                        <th>Set</th>
-                                        <th>From</th>
-                                        <th>Until</th>
-                                        <th>Interval</th>
-                                   <!-- <th>Filter</th>
-                                        <th>Framework code</th>
-                                        <th>Record type</th>
-                                        <th>Matcher code</th> -->
-                                        <th></th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                [% IF ( saved_requests ) %]
-                                    [% FOREACH saved_request IN saved_requests %]
-                                        <tr>
-                                            <td>[% saved_request.name | html %]</td>
-                                            <td>[% saved_request.http_url | html %]</td>
-                                       <!-- <td>[% saved_request.oai_verb | html %]</td>
-                                            <td>[% saved_request.oai_metadataPrefix | html %]</td>
-                                            <td>[% saved_request.oai_identifier | html %]</td> -->
-                                            <td>[% saved_request.oai_set | html %]</td>
-                                            <td>[% saved_request.oai_from | html %]</td>
-                                            <td>[% saved_request.oai_until | html %]</td>
-                                            <td>[% saved_request.interval | html %]</td>
-                                       <!-- <td>
-                                                [% IF ( saved_request.import_filter == "default" ) %]
-                                                    <span>Default</span>
-                                                [% ELSE %]
-                                                    [% saved_request.import_filter | html %]
-                                                [% END %]
-                                            </td>
-                                            <td>
-                                                [% display_framework = "" %]
-                                                [% FOREACH framework IN frameworks %]
-                                                    [% IF ( framework.frameworkcode == saved_request.import_framework_code ) %]
-                                                        [% display_framework = framework %]
-                                                    [% END %]
-                                                [% END %]
-                                                [% IF ( display_framework ) %]
-                                                    [% display_framework.frameworktext | html %]
-                                                [% ELSE %]
-                                                    [% saved_request.import_framework_code | html %]
-                                                [% END %]
-                                            </td>
-                                            <td>
-                                                [% IF ( saved_request.import_record_type == "biblio" ) %]
-                                                    <span>Bibliographic</span>
-                                                [% ELSE %]
-                                                    [% saved_request.import_record_type | html %]
-                                                [% END %]
-                                            </td>
-                                            <td>
-                                                [% display_matcher = "" %]
-                                                [% FOREACH matcher IN matchers %]
-                                                    [% IF ( matcher.code == saved_request.import_matcher_code ) %]
-                                                        [% display_matcher = matcher %]
-                                                    [% END %]
-                                                [% END %]
-                                                [% IF ( display_matcher ) %]
-                                                    [% display_matcher.description | html %]
-                                                [% ELSE %]
-                                                    [% saved_request.import_matcher_code | html %]
-                                                [% END %]
-                                            </td> -->
-                                            <td>
-                                                <div class="dropdown">
-                                                    <a class="btn btn-default btn-xs dropdown-toggle" role="button" data-toggle="dropdown" href="#">Actions <span class="caret"></span></a>
-                                                    <ul class="dropdown-menu pull-right" role="menu">
-                                                          <li>
-                                                              <a href="[% request_page | url %]?op=edit&id=[% saved_request.id | url %]"><i class="fa fa-pencil"></i> Edit</a>
-                                                          </li>
-                                                          <li>
-                                                              <a href="[% request_page | url %]?op=new&id=[% saved_request.id | url %]"><i class="fa fa-copy"></i> Copy</a>
-                                                          </li>
-                                                          <li>
-                                                              <a href="[% dashboard_page | url %]?op=send&id=[% saved_request.id | url %]"><i class="fa fa-send"></i> Submit</a>
-                                                          </li>
-                                                          <li>
-                                                            <a href="[% request_page | url %]?op=delete&id=[% saved_request.id | url %]"><i class="fa fa-trash"></i> Delete</a>
-                                                          </li>
-                                                    </ul>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    [% END %]
+                                    </div>
                                 [% END %]
-                                </tbody>
-                            </table>
-                        </div>
-                        <div id="imports">
-                            <div class="btn-toolbar">
-                                <button id="refresh-button" type="button" class="btn btn-default btn-sm">Refresh import history</button>
-                            </div>
-                            <table id="history-table">
-                                <thead>
+                        [% END %]
+                        <table id="saved-table">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>URL</th>
+                                    <th>Set</th>
+                                    <th class="title-string">From</th>
+                                    <th class="title-string">Until</th>
+                                    <th>Interval</th>
+                                    <th class="NoSort"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            [% IF ( saved_requests ) %]
+                                [% FOREACH saved_request IN saved_requests %]
                                     <tr>
-                                        <th>Id</th>
-                                        <th>Repository</th>
-                                        <th>Identifier</th>
-                                        <th>Datestamp</th>
-                                        <th>Upstream status</th>
-                                        <th>Import status</th>
-                                        <th>Import timestamp</th>
-                                        <th>Imported record</th>
-                                        <th>Downloaded record</th>
+                                        <td>[% saved_request.name | html %]</td>
+                                        <td>[% saved_request.http_url | html %]</td>
+                                        <td>[% saved_request.oai_set | html %]</td>
+                                        <td><span title="[% saved_request.oai_from | html %]">[% saved_request.oai_from | $KohaDates with_hours = 1 %]</span></td>
+                                        <td><span title="[% saved_request.oai_until | html %]">[% saved_request.oai_until | $KohaDates with_hours = 1 %]</span></td>
+                                        <td>[% saved_request.interval | html %]</td>
+                                        <td>
+                                            <div class="dropdown">
+                                                <a class="btn btn-default btn-xs dropdown-toggle" role="button" data-toggle="dropdown" href="#">Actions <span class="caret"></span></a>
+                                                <ul class="dropdown-menu pull-right" role="menu">
+                                                      <li>
+                                                          <a href="[% request_page | url %]?op=edit&id=[% saved_request.id | url %]"><i class="fa fa-pencil"></i> Edit</a>
+                                                      </li>
+                                                      <li>
+                                                          <a href="[% request_page | url %]?op=new&id=[% saved_request.id | url %]"><i class="fa fa-copy"></i> Copy</a>
+                                                      </li>
+                                                      <li>
+                                                          <a href="[% dashboard_page | url %]?op=send&id=[% saved_request.id | url %]"><i class="fa fa-send"></i> Submit</a>
+                                                      </li>
+                                                      <li>
+                                                        <a class="confirmdelete" href="[% request_page | url %]?op=delete&id=[% saved_request.id | url %]"><i class="fa fa-trash"></i> Delete</a>
+                                                      </li>
+                                                </ul>
+                                            </div>
+                                        </td>
                                     </tr>
-                                </thead>
-                            </table>
-
-                        </div>
+                                [% END %]
+                            [% END %]
+                            </tbody>
+                        </table>
+                    </div>
+                    <div id="imports">
+                        <button id="refresh-button" type="button" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i> Refresh import history</button>
+                        <table id="history-table">
+                            <thead>
+                                <tr>
+                                    <th>Id</th>
+                                    <th>Repository</th>
+                                    <th>Identifier</th>
+                                    <th>Datestamp</th>
+                                    <th>Upstream status</th>
+                                    <th>Import status</th>
+                                    <th>Import timestamp</th>
+                                    <th class="NoSort">Imported record</th>
+                                    <th class="NoSort">Downloaded record</th>
+                                </tr>
+                            </thead>
+                        </table>
                     </div>
                 </div>
-            </div>
-            <div class="yui-b">
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
                 [% INCLUDE 'tools-menu.inc' %]
-            </div>
-        </div>
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+    </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'datatables.inc' %]
     [% INCLUDE 'columns_settings.inc' %]
-    <script type="text/javascript">
+    [% Asset.js("js/tools-menu.js") | $raw %]
+    <script>
         $(document).ready(function() {
             $('#dashboard-items').tabs();
             [% IF ( result.start.defined || result.stop.defined || result.delete.defined ) %]
@@ -281,13 +241,33 @@
             [% END %]
 
             var saved_table_columns_settings = [% ColumnsSettings.GetColumns( 'tools','oai-pmh-harvester-dashboard', 'saved-table', 'json' ) | $raw %];
-            var saved_table = KohaTable("saved-table",{},saved_table_columns_settings);
+            var saved_table = KohaTable("saved-table",{
+                "autoWidth": false,
+                "aoColumnDefs": [
+                    { "bSortable": false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
+                    { "sType": "title-string", "aTargets" : [ "title-string" ] }
+                ],
+                "sPaginationType": "four_button"
+            },saved_table_columns_settings);
 
             var submitted_table_columns_settings = [% ColumnsSettings.GetColumns( 'tools','oai-pmh-harvester-dashboard', 'submitted-table', 'json' ) | $raw %];
-            var submitted_table = KohaTable("submitted-table",{},submitted_table_columns_settings);
+            var submitted_table = KohaTable("submitted-table",{
+                "autoWidth": false,
+                "aoColumnDefs": [
+                    { "bSortable": false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
+                    { "sType": "title-string", "aTargets" : [ "title-string" ] }
+                ],
+                "sPaginationType": "four_button"
+            },submitted_table_columns_settings);
 
             var history_table_columns_settings = [% ColumnsSettings.GetColumns( 'tools','oai-pmh-harvester-dashboard', 'history-table', 'json' ) | $raw %];
             var history_table = KohaTable("history-table",{
+                "autoWidth": false,
+                "aoColumnDefs": [
+                    { "bSortable": false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
+                    { "sType": "title-string", "aTargets" : [ "title-string" ] }
+                ],
+                "sPaginationType": "four_button",
                 serverSide: true,
                 searching: true,
                 processing: true,
@@ -344,8 +324,8 @@
                             var display_string = data;
                             var record_type = (full.record_type) ? full.record_type : 'biblio';
                             if (data && record_type == 'biblio'){
-                                var link_text = _("View biblio record");
-                                var link = '<a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber='+data+'">'+link_text+'</a>';
+                                var link_text = _("View in catalog");
+                                var link = '<a class=\"btn btn-default btn-xs\" href="/cgi-bin/koha/catalogue/detail.pl?biblionumber='+data+'"><i class=\"fa fa-eye\"></i> '+link_text+'</a>';
                                 display_string = link;
                             }
                             return display_string;
@@ -356,7 +336,7 @@
                         data: 'import_oai_id', render: function (data, type, full, meta){
                             var display_string = data;
                             var link_text = _("View record");
-                            var link = '<a href="/cgi-bin/koha/tools/oai-pmh-harvester/record.pl?import_oai_id='+data+'">'+link_text+'</a>';
+                            var link = '<a class=\"btn btn-default btn-xs\" href="/cgi-bin/koha/tools/oai-pmh-harvester/record.pl?import_oai_id='+data+'"><i class=\"fa fa-code\"></i> '+link_text+'</a>';
                             display_string = link;
                             return display_string;
                         }, searchable: false
@@ -372,6 +352,9 @@
             $('#refresh-button').click(function(){
                 history_table.dataTable().api().ajax.reload( null, false );
             });
+            $(".confirmdelete").on("click", function(){
+                return confirmDelete(_("Are you sure you want to delete this request?"));
+            })
         });
     </script>
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/record.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/record.tt
index 4b2d217356..19a4d46927 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/record.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/record.tt
@@ -1,23 +1,55 @@
+[% USE raw %]
+[% USE Asset %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Tools &rsaquo; OAI-PMH harvester &rsaquo; Downloaded record</title>
 [% INCLUDE 'doc-head-close.inc' %]
+[% Asset.css("lib/codemirror/codemirror.css") | $raw %]
+<style>
+.CodeMirror {
+    height: 100%
+}
+</style>
 </head>
 <body id="tools_oai-pmh-harvester_request" class="tools">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
     <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; <a href="/cgi-bin/koha/tools/oai-pmh-harvester/dashboard.pl">OAI-PMH harvester</a> &rsaquo; Downloaded record</div>
-    <div id="doc3" class="yui-t2">
-        <div id="bd">
-            <div id="yui-main">
-                <div class="yui-b">
+
+    <div class="main container-fluid">
+        <div class="row">
+            <div class="col-sm-10 col-sm-push-2">
+                <main>
+
                     <h1>Downloaded record</h1>
                     [% IF ( record ) %]
-                        <div style="white-space:pre">[% record | xml %]</div>
+                        <textarea id="record">[% record | html %]</textarea>
                     [% END %]
-                </div>
-            </div>
-            <div class="yui-b">
-                [% INCLUDE 'tools-menu.inc' %]
-            </div>
-        </div>
+
+                </main>
+            </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+            <div class="col-sm-2 col-sm-pull-10">
+                <aside>
+                    [% INCLUDE 'tools-menu.inc' %]
+                </aside>
+            </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+        </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") | $raw %]
+    [% Asset.js("lib/codemirror/codemirror-compressed.js") | $raw %]
+    [% Asset.js( "lib/codemirror/xml.min.js" ) | $raw %]
+    <script>
+        $(document).ready(function() {
+            var editor = CodeMirror.fromTextArea( record, {
+                lineNumbers: false,
+                mode: "application/xml",
+                lineWrapping: true,
+                readOnly: true
+            });
+        });
+    </script>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/request.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/request.tt
index 78a878d6a6..676ed9b7d0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/request.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/oai-pmh-harvester/request.tt
@@ -4,7 +4,7 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Tools &rsaquo; OAI-PMH harvester &rsaquo; Request</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<style type="text/css">
+<style>
     /* Override staff-global.css which hides second, millisecond, and microsecond sliders */
     .ui_tpicker_second {
         display: block;
@@ -15,195 +15,230 @@
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
     <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; <a href="/cgi-bin/koha/tools/oai-pmh-harvester/dashboard.pl">OAI-PMH harvester</a> &rsaquo; Request</div>
-    <div id="doc3" class="yui-t2">
-        <div id="bd">
-            <div id="yui-main">
-                <div class="yui-b">
-                    [% IF ( op == "edit" ) %]
-                        <h1>Edit OAI-PMH request</h1>
+
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
+
+                [% IF ( op == "edit" ) %]
+                    <h1>Edit OAI-PMH request</h1>
+                [% ELSE %]
+                    <h1>New OAI-PMH request</h1>
+                [% END %]
+                [% IF ( test_parameters ) %]
+                    [% IF ( errors.size ) %]
+                        <div class="dialog alert">Tests failed!</div>
                     [% ELSE %]
-                        <h1>New OAI-PMH request</h1>
+                        <div class="dialog message">Tests succeeded!</div>
                     [% END %]
-                    [% IF ( test_parameters ) %]
-                        [% IF ( errors.size ) %]
-                            <div class="dialog message"><span class="text-danger">Tests failed!</span></div>
-                        [% ELSE %]
-                            <div class="dialog message"><span class="text-success">Tests succeeded!</span></div>
-                        [% END %]
+                [% END %]
+                <form action="/cgi-bin/koha/tools/oai-pmh-harvester/request.pl" method="post" name="entry-form">
+                    [% IF ( op == "new" ) %]
+                        <input type="hidden" name="op" value="create" />
+                    [% ELSIF ( op == "edit" ) %]
+                         <input type="hidden" name="op" value="update" />
+                    [% ELSE %]
+                        <input type="hidden" name="op" value="[% op | html %]" />
+                    [% END %]
+                    [% IF ( id ) %]
+                        <input type="hidden" name="id" value="[% id | html %]" />
                     [% END %]
-                    <form action="/cgi-bin/koha/tools/oai-pmh-harvester/request.pl" method="post" name="entry-form">
-                        [% IF ( op == "new" ) %]
-                            <input type="hidden" name="op" value="create" />
-                        [% ELSIF ( op == "edit" ) %]
-                             <input type="hidden" name="op" value="update" />
-                        [% ELSE %]
-                            <input type="hidden" name="op" value="[% op | html %]" />
-                        [% END %]
-                        [% IF ( id ) %]
-                            <input type="hidden" name="id" value="[% id | html %]" />
-                        [% END %]
-                        <fieldset class="rows">
-                            <ol>
-                                <li>
-                                    <label for="name">Name:</label>
-                                    <input type="text" size="30" id="name" name="name" value="[% oai_pmh_request.name | html %]"/>
-                                    <span class="help">This is just a short name to help in managing requests.</span>
-                                </li>
-                            </ol>
-                        </fieldset>
-                        <fieldset class="rows">
-                            <legend>HTTP parameters:</legend>
-                            <ol>
-                                <li>
-                                    <label for="http_url">URL:</label>
-                                    <input type="text" size="30" id="http_url" name="http_url" value="[% oai_pmh_request.http_url | html %]">
-                                    [% IF (errors.http_url.malformed) %]<span class="error">[This must be a properly formatted HTTP or HTTPS URL.]</span>[% END %]
-                                    [% IF (errors.http.404) %]<span class="error">[Cannot find address specified by this URL.]</span>[% END %]
-                                    [% IF (errors.http.401) %]<span class="error">[Permission denied to access this URL.]</span>[% END %]
-                                    [% IF (errors.http.generic) %]<span class="error">[Unable to access this URL.]</span>[% END %]
-                                </li>
-                            </ol>
-                            <span class="help">The following parameters are not required by all OAI-PMH repositories, so they may be optional for this task.</span>
-                            <ol>
-                                <li>
-                                    <label for="http_username">Username:</label>
-                                    <input type="text" size="30" id="http_username" name="http_username" value="[% oai_pmh_request.http_username | html %]">
-                                </li>
-                                <li>
-                                    <label for="http_password">Password:</label>
-                                    <input type="text" size="30" id="http_password" name="http_password" value="[% oai_pmh_request.http_password | html %]">
-                                </li>
-                                <li>
-                                    <label for="http_realm">Realm:</label>
-                                    <input type="text" size="30" id="http_realm" name="http_realm" value="[% oai_pmh_request.http_realm | html %]">
-                                </li>
-                            </ol>
-                        </fieldset>
-                        <fieldset class="rows">
-                            <legend>OAI-PMH parameters:</legend>
-                            <ol>
-                                <li>
-                                    <label for="oai_verb">Verb:</label>
-                                    <select id="oai_verb" name="oai_verb">
-                                        [% IF ( oai_pmh_request.oai_verb == "ListRecords" ) %]
-                                        <option value="ListRecords" selected="selected">ListRecords</option>
+                    <fieldset class="rows">
+                        <ol>
+                            <li>
+                                <label for="name">Name:</label>
+                                <input type="text" size="30" id="name" name="name" value="[% oai_pmh_request.name | html %]"/>
+                                <span class="hint">This is a short name to help in managing requests.</span>
+                            </li>
+                        </ol>
+                    </fieldset>
+                    <fieldset class="rows">
+                        <legend>HTTP parameters:</legend>
+                        <ol>
+                            <li>
+                                <label for="http_url">URL:</label>
+                                <input type="text" size="30" id="http_url" name="http_url" value="[% oai_pmh_request.http_url | html %]">
+                                [% IF (errors.http_url.malformed) %]
+                                    <span class="required">This must be a properly formatted HTTP or HTTPS URL.</span>
+                                [% END %]
+                                [% IF (errors.http.404) %]
+                                    <span class="required">Cannot find address specified by this URL.</span>
+                                [% END %]
+                                [% IF (errors.http.401) %]
+                                    <span class="required">Permission denied to access this URL.</span>
+                                [% END %]
+                                [% IF (errors.http.generic) %]
+                                    <span class="required">Unable to access this URL.</span>
+                                [% END %]
+                            </li>
+                        </ol>
+                        <div class="hint">The following parameters are not required by all OAI-PMH repositories, so they may be optional for this task.</div>
+                        <ol>
+                            <li>
+                                <label for="http_username">Username:</label>
+                                <input type="text" size="30" id="http_username" name="http_username" value="[% oai_pmh_request.http_username | html %]">
+                            </li>
+                            <li>
+                                <label for="http_password">Password:</label>
+                                <input type="text" size="30" id="http_password" name="http_password" value="[% oai_pmh_request.http_password | html %]">
+                            </li>
+                            <li>
+                                <label for="http_realm">Realm:</label>
+                                <input type="text" size="30" id="http_realm" name="http_realm" value="[% oai_pmh_request.http_realm | html %]">
+                            </li>
+                        </ol>
+                    </fieldset>
+                    <fieldset class="rows">
+                        <legend>OAI-PMH parameters:</legend>
+                        <ol>
+                            <li>
+                                <label for="oai_verb">Verb:</label>
+                                <select id="oai_verb" name="oai_verb">
+                                    [% IF ( oai_pmh_request.oai_verb == "ListRecords" ) %]
+                                    <option value="ListRecords" selected="selected">ListRecords</option>
+                                    [% ELSE %]
+                                    <option value="ListRecords">ListRecords</option>
+                                    [% END %]
+                                    [% IF ( oai_pmh_request.oai_verb == "GetRecord" ) %]
+                                    <option value="GetRecord" selected="selected">GetRecord</option>
+                                    [% ELSE %]
+                                    <option value="GetRecord">GetRecord</option>
+                                    [% END %]
+                                </select>
+                            </li>
+                            <li>
+                                <label for="oai_metadataPrefix">Metadata prefix:</label>
+                                <input type="text" size="30" id="oai_metadataPrefix" name="oai_metadataPrefix" value="[% oai_pmh_request.oai_metadataPrefix | html %]">
+                                [% IF (errors.oai_metadataPrefix.unavailable) %]
+                                    <span class="required">This metadataPrefix is unavailable from this OAI-PMH provider.</span>
+                                [% END %]
+                                [% IF (errors.oai_metadataPrefix.missing) %]
+                                    <span class="required">metadataPrefix is a required field for an OAI-PMH request.</span>
+                                [% END %]
+                            </li>
+                            <li>
+                                <label for="oai_identifier">Identifier:</label>
+                                <input type="text" size="30" id="oai_identifier" name="oai_identifier" value="[% oai_pmh_request.oai_identifier | html %]">
+                                [% IF (errors.oai_identifier.missing) %]
+                                    <span class="required">Identifier is a required field when using GetRecord for an OAI-PMH request.</span>
+                                [% END %]
+                            </li>
+                            <li>
+                                <label for="oai_set">Set:</label>
+                                <input type="text" size="30" id="oai_set" name="oai_set" value="[% oai_pmh_request.oai_set | html %]">
+                                [% IF (errors.oai_set.unavailable) %]
+                                    <span class="required">This set is unavailable from this OAI-PMH provider.</span>
+                                [% END %]
+                            </li>
+                            [% IF (errors.oai.granularity_mismatch) %]
+                                <span class="required">You must specify the same granularity for both From and Until.</span>
+                            [% END %]
+                            <li>
+                                <label for="oai_from">From:</label>
+                                <input type="text" size="30" class="datetime_utc" id="oai_from" name="oai_from" value="[% oai_pmh_request.oai_from | html %]">
+                                <span class="hint">This value will be treated as UTC time. Note that some repositories only support YYYY-MM-DD datestamps.</span>
+                                [% IF (errors.oai_from.malformed) %]
+                                    <span class="required">This must be in YYYY-MM-DD or YYYY-MM-DDThh:mm:ssZ format.</span>
+                                [% END %]
+                                [% IF (errors.oai_from.unavailable) %]
+                                    <span class="required">This granularity is unsupported by this OAI-PMH provider.</span>
+                                [% END %]
+                            </li>
+                            <li>
+                                <label for="oai_until">Until:</label>
+                                <input type="text" size="30" class="datetime_utc" id="oai_until" name="oai_until" value="[% oai_pmh_request.oai_until | html %]">
+                                <span class="hint">This value will be treated as UTC time. Note that some repositories only support YYYY-MM-DD datestamps.</span>
+                                [% IF (errors.oai_until.malformed) %]
+                                    <span class="required">This must be in YYYY-MM-DD or YYYY-MM-DDThh:mm:ssZ format.</span>
+                                [% END %]
+                                [% IF (errors.oai_until.unavailable) %]
+                                    <span class="required">This granularity is unsupported by this OAI-PMH provider.</span>
+                                [% END %]
+                            </li>
+                        </ol>
+                    </fieldset>
+                    <fieldset class="rows">
+                        <legend>Import parameters:</legend>
+                        <ol>
+                            <li>
+                                <label for="import_filter">Filter:</label>
+                                [% IF ( oai_pmh_request.import_filter == "default" ) %]
+                                    <input type="text" size="30" id="import_filter" name="import_filter" value="default">
+                                [% ELSE %]
+                                    <input type="text" size="30" id="import_filter" name="import_filter" value="[% oai_pmh_request.import_filter | html %]">
+                                [% END %]
+                                <span class="hint">If no filter is entered, the default filter will be used.</span>
+                            </li>
+                            <li>
+                                <label for="import_framework_code">Framework code:</label>
+                                <select id="import_framework_code" name="import_framework_code">
+                                    <option value="">Default framework</option>
+                                    [% FOREACH framework IN frameworks %]
+                                        [% IF ( oai_pmh_request.import_framework_code == framework.frameworkcode ) %]
+                                            <option selected="selected" value="[% framework.frameworkcode | html %]">[% framework.frameworktext | html %]</option>
                                         [% ELSE %]
-                                        <option value="ListRecords">ListRecords</option>
+                                            <option value="[% framework.frameworkcode | html %]">[% framework.frameworktext | html %]</option>
                                         [% END %]
-                                        [% IF ( oai_pmh_request.oai_verb == "GetRecord" ) %]
-                                        <option value="GetRecord" selected="selected">GetRecord</option>
+                                    [% END %]
+                                </select>
+                            </li>
+                            <li>
+                                <label for="import_record_type">Record type:</label>
+                                <select id="import_record_type" name="import_record_type">
+                                    <option value="biblio">Bibliographic</option>
+                                </select>
+                            </li>
+                            <li>
+                                <label for="import_matcher_code">Record matcher:</label>
+                                <select id="import_matcher_code" name="import_matcher_code">
+                                    <option value="">None</option>
+                                    [% FOREACH matcher IN matchers %]
+                                        [% IF ( oai_pmh_request.import_matcher_code == matcher.code ) %]
+                                            <option value="[% matcher.code | html %]" selected="selected">[% matcher.code | html %] ([% matcher.description | html %])</option>
                                         [% ELSE %]
-                                        <option value="GetRecord">GetRecord</option>
+                                            <option value="[% matcher.code | html %]">[% matcher.code | html %] ([% matcher.description | html %])</option>
                                         [% END %]
-                                    </select>
-                                </li>
-                                <li>
-                                    <label for="oai_metadataPrefix">Metadata prefix:</label>
-                                    <input type="text" size="30" id="oai_metadataPrefix" name="oai_metadataPrefix" value="[% oai_pmh_request.oai_metadataPrefix | html %]">
-                                    [% IF (errors.oai_metadataPrefix.unavailable) %]<span class="error">[This metadataPrefix is unavailable from this OAI-PMH provider.]</span>[% END %]
-                                    [% IF (errors.oai_metadataPrefix.missing) %]<span class="error">[metadataPrefix is a required field for an OAI-PMH request.]</span>[% END %]
-                                </li>
-                                <li>
-                                    <label for="oai_identifier">Identifier:</label>
-                                    <input type="text" size="30" id="oai_identifier" name="oai_identifier" value="[% oai_pmh_request.oai_identifier | html %]">
-                                    [% IF (errors.oai_identifier.missing) %]<span class="error">[Identifier is a required field when using GetRecord for an OAI-PMH request.]</span>[% END %]
-                                </li>
-                                <li>
-                                    <label for="oai_set">Set:</label>
-                                    <input type="text" size="30" id="oai_set" name="oai_set" value="[% oai_pmh_request.oai_set | html %]">
-                                    [% IF (errors.oai_set.unavailable) %]<span class="error">[This set is unavailable from this OAI-PMH provider.]</span>[% END %]
-                                </li>
-                                [% IF (errors.oai.granularity_mismatch) %]<span class="error">[You must specify the same granularity for both From and Until.]</span>[% END %]
-                                <li>
-                                    <label for="oai_from">From:</label>
-                                    <input type="text" size="30" class="datetime_utc" id="oai_from" name="oai_from" value="[% oai_pmh_request.oai_from | html %]">
-                                    <span class="help">This value will be treated as UTC time. Note that some repositories only support YYYY-MM-DD datestamps.</span>
-                                    [% IF (errors.oai_from.malformed) %]<span class="error">[This must be in YYYY-MM-DD or YYYY-MM-DDThh:mm:ssZ format.]</span>[% END %]
-                                    [% IF (errors.oai_from.unavailable) %]<span class="error">[This granularity is unsupported by this OAI-PMH provider.]</span>[% END %]
-                                </li>
-                                <li>
-                                    <label for="oai_until">Until:</label>
-                                    <input type="text" size="30" class="datetime_utc" id="oai_until" name="oai_until" value="[% oai_pmh_request.oai_until | html %]">
-                                    <span class="help">This value will be treated as UTC time. Note that some repositories only support YYYY-MM-DD datestamps.</span>
-                                    [% IF (errors.oai_until.malformed) %]<span class="error">[This must be in YYYY-MM-DD or YYYY-MM-DDThh:mm:ssZ format.]</span>[% END %]
-                                    [% IF (errors.oai_until.unavailable) %]<span class="error">[This granularity is unsupported by this OAI-PMH provider.]</span>[% END %]
-                                </li>
-                            </ol>
-                        </fieldset>
-                        <fieldset class="rows">
-                            <legend>Import parameters:</legend>
-                            <ol>
-                                <li>
-                                    <label for="import_filter">Filter:</label>
-                                    [% IF ( oai_pmh_request.import_filter == "default" ) %]
-                                        <input type="text" size="30" id="import_filter" name="import_filter" value="default">
-                                    [% ELSE %]
-                                        <input type="text" size="30" id="import_filter" name="import_filter" value="[% oai_pmh_request.import_filter | html %]">
                                     [% END %]
-                                    <span class="help">If no filter is entered, the default filter will be used.</span>
-                                </li>
-                                <li>
-                                    <label for="import_framework_code">Framework code:</label>
-                                    <select id="import_framework_code" name="import_framework_code">
-                                        <option value="">Default framework</option>
-                                        [% FOREACH framework IN frameworks %]
-                                            [% IF ( oai_pmh_request.import_framework_code == framework.frameworkcode ) %]
-                                                <option selected="selected" value="[% framework.frameworkcode | html %]">[% framework.frameworktext | html %]</option>
-                                            [% ELSE %]
-                                                <option value="[% framework.frameworkcode | html %]">[% framework.frameworktext | html %]</option>
-                                            [% END %]
-                                        [% END %]
-                                    </select>
-                                </li>
-                                <li>
-                                    <label for="import_record_type">Record type:</label>
-                                    <select id="import_record_type" name="import_record_type">
-                                        <option value="biblio">Bibliographic</option>
-                                    </select>
-                                </li>
-                                <li>
-                                    <label for="import_matcher_code">Record matcher:</label>
-                                    <select id="import_matcher_code" name="import_matcher_code">
-                                        <option value="">None</option>
-                                        [% FOREACH matcher IN matchers %]
-                                            [% IF ( oai_pmh_request.import_matcher_code == matcher.code ) %]
-                                                <option value="[% matcher.code | html %]" selected="selected">[% matcher.code | html %] ([% matcher.description | html %])</option>
-                                            [% ELSE %]
-                                                <option value="[% matcher.code | html %]">[% matcher.code | html %] ([% matcher.description | html %])</option>
-                                            [% END %]
-                                        [% END %]
-                                    </select>
-                                    <span class="help">See <a href="/cgi-bin/koha/admin/matching-rules.pl">record matching rules</a> to add or edit rules.</span>
-                                </li>
-                            </ol>
-                        </fieldset>
-                        <fieldset class="rows">
-                            <legend>Download parameters:</legend>
-                            <ol>
-                                <li>
-                                    <label for="interval">Interval (seconds): </label>
-                                    <input type="text" id="interval" name="interval" value="[% oai_pmh_request.interval | html %]" size="4">
-                                    <span class="help">The download request will be repeated in intervals of this many seconds. Enter "0" if you want the task to only happen once.</span>
-                                </li>
-                            </ol>
-                        </fieldset>
-                        <fieldset class="action">
-                            <input type="submit" name="test_parameters" value="Test parameters">
-                            <input type="submit" name="save" value="Save">
-                            <a class="cancel" href="/cgi-bin/koha/tools/oai-pmh-harvester/dashboard.pl">Cancel</a>
-                        </fieldset>
-                    </form>
-                </div>
-            </div>
-            <div class="yui-b">
+                                </select>
+                                <span class="hint">See <a href="/cgi-bin/koha/admin/matching-rules.pl">record matching rules</a> to add or edit rules.</span>
+                            </li>
+                        </ol>
+                    </fieldset>
+                    <fieldset class="rows">
+                        <legend>Download parameters:</legend>
+                        <ol>
+                            <li>
+                                <label for="interval">Interval (seconds): </label>
+                                <input type="text" id="interval" name="interval" value="[% oai_pmh_request.interval | html %]" size="4">
+                                <span class="hint">The download request will be repeated in intervals of this many seconds. Enter "0" if you want the task to only happen once.</span>
+                            </li>
+                        </ol>
+                    </fieldset>
+                    <fieldset class="action">
+                        <input type="submit" name="test_parameters" value="Test parameters">
+                        <input type="submit" name="save" value="Save">
+                        <a class="cancel" href="/cgi-bin/koha/tools/oai-pmh-harvester/dashboard.pl">Cancel</a>
+                    </fieldset>
+                </form>
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
                 [% INCLUDE 'tools-menu.inc' %]
-            </div>
-        </div>
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+    </div> <!-- /.row -->
+
+
 [% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") | $raw %]
     [% INCLUDE 'calendar.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
     [% INCLUDE 'timepicker.inc' %]
-    <script type="text/javascript">
+    <script>
         $(document).ready(function() {
             toggle_identifier();
             $("#oai_verb").on("click",toggle_identifier);
diff --git a/koha-tmpl/intranet-tmpl/prog/js/tools-menu.js b/koha-tmpl/intranet-tmpl/prog/js/tools-menu.js
index 14325b6f9d..781757e035 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/tools-menu.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/tools-menu.js
@@ -18,5 +18,7 @@
           $('#navmenulist a[href$="/cgi-bin/koha/tools/stockrotation.pl"]').addClass("current");
       } else if (path.indexOf("plugins") >= 0 ) {
           $('#navmenulist a[href$="/cgi-bin/koha/plugins/plugins-home.pl?method=tool"]').addClass("current");
+      } else if (path.indexOf("oai-pmh-harvester") >= 0 ) {
+          $('#navmenulist a[href$="/cgi-bin/koha/tools/oai-pmh-harvester/dashboard.pl"]').addClass("current");
       }
   });
-- 
2.11.0