Update jQuery / Bootstrap, replace Fluid Infusion

gradle.properties

@@ -34,7 +34,7 @@ romeVersion=2.1.0
 servletApiVersion=2.5
 slf4jVersion=2.0.16
 springfoxVersion=2.9.2
-uPortalVersion=5.16.1
+uPortalVersion=6.0.0-SNAPSHOT-BS
 annotationApiVersion=1.3.2
 jaxbApiVersion=2.3.1
 

notification-portlet-webapp/src/main/java/org/jasig/portlet/notice/controller/emergency/EmergencyAlertController.java

@@ -40,7 +40,6 @@ public final class EmergencyAlertController {
 
     public static final String VIEW_SHOW_ALERTS = "show-alerts";
 
-    private static final String USE_PPORTAL_JS_LIBS_PREFERENCE = "EmergencyAlertController.usePortalJsLibs";
     private static final String PPORTAL_JS_NAMESPACE_PREFERENCE = "portalJsNamespace";
     private static final String AUTO_ADVANCE_PREFERENCE = "EmergencyAlertController.autoAdvance";
 
@@ -58,18 +57,14 @@ public ModelAndView showAlert(PortletRequest req) {
         final Map<String,Object> model = new HashMap<>();
         final PortletPreferences prefs = req.getPreferences();   
 
-        final boolean usePortalJsLibs = Boolean.valueOf(prefs.getValue(USE_PPORTAL_JS_LIBS_PREFERENCE, "true"));  // default is true
-        model.put("usePortalJsLibs", usePortalJsLibs);
-
         final String portalJsNamespace = prefs.getValue(PPORTAL_JS_NAMESPACE_PREFERENCE, "up");  // Matches the current convention in uPortal
         model.put("portalJsNamespace", portalJsNamespace);
 
         final boolean autoAdvance = Boolean.valueOf(prefs.getValue(AUTO_ADVANCE_PREFERENCE, null));  // default is false
         model.put("autoAdvance", autoAdvance);
 
         if (log.isTraceEnabled()) {
-            log.trace("Showing alerts, usePortalJsLibs=" + usePortalJsLibs 
-                            + ", portalJsNamespace=" + portalJsNamespace 
+            log.trace("Showing alerts, portalJsNamespace=" + portalJsNamespace
                             + ", autoAdvance=" + autoAdvance);
         }
 

notification-portlet-webapp/src/main/java/org/jasig/portlet/notice/controller/notification/NotificationIconController.java

@@ -39,7 +39,6 @@
 @RequestMapping("VIEW")
 public final class NotificationIconController {
 
-    private static final String USE_PPORTAL_JS_LIBS_PREFERENCE = "usePortalJsLibs";
     private static final String PPORTAL_JS_NAMESPACE_PREFERENCE = "portalJsNamespace";
     private static final String ICON_PREFERENCE = "NotificationIconController.faIcon";
     private static final String ICON_DEFAULT = "fa-bell";
@@ -55,9 +54,6 @@ public ModelAndView display(RenderRequest req) {
         final Map<String,Object> model = new HashMap<String,Object>();
         final PortletPreferences prefs = req.getPreferences();
 
-        final boolean usePortalJsLibs = Boolean.valueOf(prefs.getValue(USE_PPORTAL_JS_LIBS_PREFERENCE, "true"));  // default is true
-        model.put("usePortalJsLibs", usePortalJsLibs);
-
         final String portalJsNamespace = prefs.getValue(PPORTAL_JS_NAMESPACE_PREFERENCE, "up");  // Matches the current convention in uPortal
         model.put("portalJsNamespace", portalJsNamespace);
 

notification-portlet-webapp/src/main/webapp/WEB-INF/jsp/accordion.jsp

@@ -35,9 +35,6 @@
     <portlet:param name="actionId" value="ACTIONID"/>
 </portlet:actionURL>
 
-<c:if test="${portletPreferencesValues['usePortalJsLibs'][0] != 'true'}">
-    <rs:aggregatedResources path="/accordianResources.xml"/>
-</c:if>
 <rs:aggregatedResources path="/accordianLocalResources.xml"/>
 
 <div id="${n}container" class="notification-portlet">
@@ -75,16 +72,8 @@
 <!-- call ajax on dynamic portlet id -->
 <script type="text/javascript">
     var ${n} = ${n} || {};
-<c:choose>
-    <c:when test="${portletPreferencesValues['usePortalJsLibs'][0] != 'true'}">
-        ${n}.jQuery = jQuery.noConflict(true);
-        ${n}.underscore = _.noConflict();
-    </c:when>
-    <c:otherwise>
-        ${n}.jQuery = up.jQuery;
-        ${n}.underscore = up._;
-    </c:otherwise>
-</c:choose>
+    ${n}.jQuery = (typeof up !== 'undefined' && up.jQuery) ? up.jQuery : jQuery;
+    ${n}.underscore = (typeof up !== 'undefined' && up._) ? up._ : _;
     ${n}.jQuery(document).ready(
         notificationsPortletView(${n}.jQuery, "#${n}container", ${n}.underscore, {
             invokeNotificationServiceUrl: '${invokeNotificationServiceUrl}',

notification-portlet-webapp/src/main/webapp/WEB-INF/jsp/icon.jsp

@@ -27,9 +27,6 @@
     <portlet:param name="action" value="invokeNotificationService"/>
 </portlet:actionURL>
 
-<c:if test="${!usePortalJsLibs}">
-    <rs:aggregatedResources path="/jQueryResources.xml"/>
-</c:if>
 <rs:aggregatedResources path="/simpleListLocalResources.xml"/>
 
 <style>
@@ -52,15 +49,8 @@
 
 <script type="text/javascript">
     var ${n} = ${n} || {};
-    <c:choose>
-        <c:when test="${!usePortalJsLibs}">
-            ${n}.jQuery = jQuery.noConflict(true);
-        </c:when>
-        <c:otherwise>
-            <c:set var="ns"><c:if test="${ not empty portalJsNamespace }">${ portalJsNamespace }.</c:if></c:set>
-            ${n}.jQuery = ${ ns }jQuery;
-        </c:otherwise>
-    </c:choose>
+    <c:set var="ns"><c:if test="${ not empty portalJsNamespace }">${ portalJsNamespace }.</c:if></c:set>
+    ${n}.jQuery = ${ ns }jQuery;
 
     ${n}.jQuery(function(){
         var $ = ${n}.jQuery;

notification-portlet-webapp/src/main/webapp/WEB-INF/jsp/jobPostings.jsp

@@ -19,7 +19,6 @@
 
 --%>
 <jsp:directive.include file="/WEB-INF/jsp/include.jsp"/>
-<%@taglib prefix="joda" uri="http://www.joda.org/joda/time/tags" %>
 <%@taglib prefix="date" uri="http://org.jasig.portlet/NotificationPortlet/date" %>
 
 <c:set var="n"><portlet:namespace/></c:set>
@@ -39,40 +38,10 @@
     <portlet:param name="actionId" value="ACTIONID"/>
 </portlet:actionURL>
 
-<link rel="stylesheet" href="<rs:resourceURL value='/rs/bootstrap-namespaced/3.1.1/css/bootstrap.min.css'/>" type="text/css" />
+<!-- Bootstrap 5 CSS and JS are provided by the portal skin via resource-server webjars -->
 <link rel="stylesheet" href="<c:url value="/css/job-postings.css"/>" type="text/css"></link>
-<!--[if lt IE 10]>
-<style>
-    .job-postings .searchControls ul li {
-        width: 50%;
-        float: left
-    }
-</style>
-<![endif]-->
-
-<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-<script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
-
-<script type="text/javascript">
-    // Bootstrap javascript fails if included multiple times on a page.
-    // uPortal Bootstrap best practice: include bootstrap if and only if it is not present and save it to
-    // portlets object. Bootstrap functions could be manually invoked via portlets.bootstrapjQuery variable.
-    // All portlets using Bootstrap Javascript must use this approach.  Portlet's jQuery should be included
-    // prior to this code block.
-
-    var portlets = portlets || {};
-    // If bootstrap is not present at uPortal jQuery nor a community bootstrap, dynamically load it.
-    up.jQuery().carousel || portlets.bootstrapjQuery || document.write('<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"><\/script>');
 
-</script>
-<script type="text/javascript">
-    // Must be in separate script tag to insure bootstrap was dynamically loaded.
-    portlets["${n}"] = {};
-    portlets["${n}"].jQuery = jQuery.noConflict(true);
-    // If bootstrap JS global variable was not defined, set it to the jQuery that has bootstrap attached to.
-    portlets.bootstrapjQuery = portlets.bootstrapjQuery || (up.jQuery().carousel ? up.jQuery : portlets["${n}"].jQuery);
-</script>
+<!-- DataTables 2.x with Bootstrap 5 integration loaded by portal skin via resource-server webjars -->
 <script src='<c:url value="/scripts/job-postings.js"/>'></script>
 
 <div class="job-postings bootstrap-styles" id="${n}">
@@ -90,15 +59,13 @@
     </div>
 
     <div id="jobView">
-        <nav class="navbar navbar-default" role="navigation">
+        <nav class="navbar navbar-expand-md" data-bs-theme="light" role="navigation">
           <div class="container-fluid">
             <!-- Brand and toggle get grouped for better mobile display -->
             <div class="navbar-header">
-              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
+              <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1">
+                <span class="visually-hidden">Toggle navigation</span>
+                <span class="navbar-toggler-icon"></span>
               </button>
             </div>
 
@@ -108,7 +75,7 @@
                 <li class="active"><a href="" data-action="all" id="navSearch">Search</a></li>
                 <li><a href="" data-action="saved" id="navSaved">Saved Jobs</a></li>
               </ul>
-              <ul class="nav navbar-nav navbar-right secondary-nav">
+              <ul class="nav navbar-nav ms-auto secondary-nav">
                 <li><a href="${portletPreferencesValues['notifications-external-saved-searches-url'][0]}" target="_blank">Saved Searches</a></li>
                 <li><a href="${portletPreferencesValues['notification-career-tools-url'][0]}" target="_blank">Career Tools</a></li>
               </ul>
@@ -117,36 +84,34 @@
         </nav>
 
         <div class="container-fluid" style="margin-top: 10px">
-            <div class="row">
+            <div class="row justify-content-between">
                 <div class="searchControls search-form col-md-5">
                     <h3>Search</h3>
                     <form role="form">
-                      <div class="form-group">
-                        <label for="${n}searchTerms" class="sr-only">Search Terms:</label>
-                        <input type="text" class="form-control input-sm searchTerms" id="${n}searchTerms" placeholder="Enter keyword, Job Id, etc">
+                      <div class="mb-3">
+                        <label for="${n}searchTerms" class="visually-hidden">Search Terms:</label>
+                        <input type="text" class="form-control form-control-sm searchTerms" id="${n}searchTerms" placeholder="Enter keyword, Job Id, etc">
                       </div>
-                      <div class="form-group">
-                        <label for="${n}date-range" class="sr-only">Date Range:</label>
-                        <select class="form-control input-sm date-range" id="${n}date-range">
+                      <div class="mb-3">
+                        <label for="${n}date-range" class="visually-hidden">Date Range:</label>
+                        <select class="form-select form-select-sm date-range" id="${n}date-range">
                             <option value="">Show All Dates</option>
                             <option value="${date:todayMinusDays(7, 'MM/dd/yyyy')}">Past Week</option>
                             <option value="${date:todayMinusMonths(1, 'MM/dd/yyyy')}">Past Month</option>
                             <option value="${date:todayMinusMonths(6, 'MM/dd/yyyy')}">Past 6 Months</option>
                             <option value="${date:todayMinusMonths(12, 'MM/dd/yyyy')}">Past Year</option>
                         </select>
                       </div>
-                      <div class="form-group">
-                        <label for="${n}hiringCenters" class="sr-only">Hiring Center:</label>
-                        <select class="hiring-center form-control input-sm hiringCenters" id="${n}hiringCenters">
+                      <div class="mb-3">
+                        <label for="${n}hiringCenters" class="visually-hidden">Hiring Center:</label>
+                        <select class="hiring-center form-select form-select-sm hiringCenters" id="${n}hiringCenters">
                         </select>
                       </div>
                       <%--
                       <button type="button" class="btn btn-primary btn-sm" id="searchButton">Search</button>
                       --%>
                     </form>
                 </div>
-    <%--            <div class="search-separator col-md-1">- or -</div>--%>
-                <div class="search-separator col-md-2"></div>
                 <div class="searchControls search-filter col-md-5">
                     <h3>Filter</h3>
                     <form role="form">
@@ -180,7 +145,7 @@
                                     <th></th>
                                     <th>Job Title</th>
                                     <th>Date</th>
-                                    <th class="hidden-xs">Job ID</th>
+                                    <th class="d-none d-sm-table-cell">Job ID</th>
                                     <th>Department</th>
                                 </tr>
                             </thead>
@@ -233,19 +198,19 @@
 <div id="modal-overlay">
     <div class="container-fluid">
         <form id="emailFriendForm" role="form">
-          <div class="form-group">
+          <div class="mb-3">
             <label for="emailAddress"><h4>Enter Email Address:</h4></label>
-            <input type="text" class="form-control input-sm" id="emailAddress" name="emailAddress" />
+            <input type="text" class="form-control form-control-sm" id="emailAddress" name="emailAddress" />
             <input type="hidden" name="jobId" value="{{= id }}">
           </div>
-          <button type="button" class="btn btn-default cancelEmailButton" id="${n}cancelEmailButton">Cancel</button>
+          <button type="button" class="btn btn-secondary cancelEmailButton" id="${n}cancelEmailButton">Cancel</button>
           <button type="button" class="btn btn-primary sendEmailButton" id="${n}sendEmailButton">Send</button>
         </form>
     </div>
 </div>
 {{ } }}
 <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     <h4 class="modal-title" id="myModalLabel">{{=title}}</h4>
 </div>
 <div class="modal-body container-fluid">
@@ -255,23 +220,23 @@
                 <div class="col-sm-12">
                     <h4>Description</h4>
                 </div>
-                <div class="col-md-10 col-md-offset-1">
+                <div class="col-md-10 offset-md-1">
                     {{=attributes.description}}
                 </div>
             </div>
             <div class="row">
                 <div class="col-sm-12">
                     <h4>Qualifications</h4>
                 </div>
-                <div class="col-md-10 col-md-offset-1">
+                <div class="col-md-10 offset-md-1">
                     {{=attributes.qualifications}}
                 </div>
             </div>
             <div class="row">
                 <div class="col-sm-12">
                     <h4>Application Instructions</h4>
                 </div>
-                <div class="col-md-10 col-md-offset-1">
+                <div class="col-md-10 offset-md-1">
                     {{=attributes.instructions}}
                 </div>
             </div>
@@ -326,13 +291,13 @@
     <div class="row">
         <div class="col-sm-6 text-left">
         {{ if (emailFriend) { }}
-            <button type="button" class="btn btn-default emailFriendButton" id="${n}emailFriendButton">Email to Friend</button>
+            <button type="button" class="btn btn-secondary emailFriendButton" id="${n}emailFriendButton">Email to Friend</button>
         {{ } }}
         </div>
         <div class="col-sm-6">
-            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             {{ if (attributes.status[0].toLowerCase() === 'open') { }}
-            <a href="{{= url }}" target="_blank" class="btn btn-primary" id="applyButton" data-dismiss="modal">Apply</a>
+            <a href="{{= url }}" target="_blank" class="btn btn-primary" id="applyButton" data-bs-dismiss="modal">Apply</a>
             {{ } else { }}
             <button type="button" class="btn btn-primary disabled">Apply in Person</button>
             {{ } }}
@@ -343,7 +308,7 @@
 </script>
 
 <script type="text/javascript">
-    var jp_ = _.noConflict();
+    var jp_ = (typeof up !== 'undefined' && up._) ? up._ : _;
 
     var urls = {
         // Prime the pump with this URL
@@ -365,7 +330,8 @@
       escape      : /\{\{-([\s\S]+?)\}\}/g
     };
 
-    portlets.bootstrapjQuery(document).ready(function() {
-        jobPostings.init(portlets.bootstrapjQuery, jp_, urls, '${n}');
+    var jp$ = (typeof up !== 'undefined' && up.jQuery) ? up.jQuery : jQuery;
+    jp$(document).ready(function() {
+        jobPostings.init(jp$, jp_, urls, '${n}');
     });
 </script>

notification-portlet-webapp/src/main/webapp/WEB-INF/jsp/modal.jsp

@@ -44,24 +44,27 @@ recommended and more common approach).
 <script src="<c:url value="/scripts/modal-notice.js"/>" type="text/javascript"></script>
 
 <style>
-/* Prevent the dialog from becoming longer than some displays, which would make it difficult to use. */
 #${n} .modal-body {
     max-height: 40rem;
     overflow-y: scroll;
 }
+#${n} .btn-close {
+    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+}
+#${n}.modal {
+    z-index: 1055;
+}
 </style>
 
 <%-- HTML Fragment --%>
 
-<div id="${n}" class="modal fade" role="dialog" data-backdrop="static" tabindex="-1">
+<div id="${n}" class="modal fade" role="dialog" data-bs-backdrop="static" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content np-content">
             <div class="modal-header">
-                <!-- Default method of closing the  dialog, in case the notice doesn't define one -->
-                <button type="button" class="close np-close" data-dismiss="modal" aria-label="Close" style="display: none;">
-                    <span aria-hidden="true">&times;</span>
-                </button>
                 <h2 class="np-title text-center" role="heading"></h2>
+                <!-- Default method of closing the  dialog, in case the notice doesn't define one -->
+                <button type="button" class="btn-close np-close" data-bs-dismiss="modal" aria-label="Close" style="display: none;"></button>
             </div>
             <div class="modal-body" role="main">
                 <!-- Use an HTML from in case the body of the notice contains form fields -->
@@ -70,7 +73,7 @@ recommended and more common approach).
                     <a class="np-link" href=""></a>
                     <ul class="np-actions list-inline text-center">
                         <!-- Template HTML for actions defined on the notice -->
-                        <li class="np-action-template hidden">
+                        <li class="np-action-template d-none">
                             <a class="btn" href="javascript:void(0);"></a>
                         </li>
                     </ul>