feat: switch from angular/AJAX+Boostrap to HTMX+PicoCSS

.editorconfig

@@ -17,7 +17,7 @@ trim_trailing_whitespace = false
 indent_style = space
 indent_size = 4
 
-[*.{xml,html,js,yml,css}]
+[*.{xml,html,js,yml,css,jsp}]
 indent_style = space
 indent_size = 2
 

src/server-rm/src/main/java/co/oslc/refimpl/rm/gen/services/RequirementsService.java

@@ -266,42 +266,54 @@ public void queryRequirementsAsHtml(
     )
     @GET
     @Path("selector")
-    @Consumes({ MediaType.TEXT_HTML, MediaType.WILDCARD })
+    @Consumes({MediaType.TEXT_HTML, MediaType.WILDCARD})
     public Response RequirementSelector(
         @QueryParam("terms") final String terms
         , @PathParam("serviceProviderId") final String serviceProviderId
-        ) throws ServletException, IOException, JSONException
-    {
+    ) throws ServletException, IOException, JSONException {
         // Start of user code RequirementSelector_init
-            // End of user code
-
-        httpServletRequest.setAttribute("selectionUri",UriBuilder.fromUri(OSLC4JUtils.getServletURI()).path(uriInfo.getPath()).build().toString());
+        // End of user code
+
+        httpServletRequest.setAttribute("selectionUri",
+            UriBuilder.fromUri(OSLC4JUtils.getServletURI()).path(uriInfo.getPath()).build().toString());
         // Start of user code RequirementSelector_setAttributes
-            // End of user code
-
-        if (terms != null ) {
+        // End of user code
+        
+        if (terms != null) {
             httpServletRequest.setAttribute("terms", terms);
-            final List<Requirement> resources = delegate.RequirementSelector(httpServletRequest, serviceProviderId, terms);
-            if (resources!= null) {
-                JSONArray resourceArray = new JSONArray();
-                for (Requirement resource : resources) {
-                    JSONObject r = new JSONObject();
-                    r.put("oslc:label", resource.toString());
-                    r.put("rdf:resource", resource.getAbout().toString());
-                    r.put("Label", resource.toString());
-                    // Start of user code RequirementSelector_setResponse
-                    // End of user code
-                    resourceArray.add(r);
+            final List<Requirement> resources = delegate.RequirementSelector(httpServletRequest,
+                serviceProviderId, terms);
+            if (resources != null) {
+                if ("true".equalsIgnoreCase(httpServletRequest.getHeader("hx-request"))) {
+                    // we need to return HTML fragment
+                    RequestDispatcher rd = httpServletRequest.getRequestDispatcher("/co/oslc/refimpl/rm" +
+                        "/gen/requirementselector-results.jsp");
+                        httpServletRequest.setAttribute("resources", resources);
+                    rd.forward(httpServletRequest, httpServletResponse);
+                } else {
+                    // this is really bad, we should not be mixing HTML and JSON without content 
+                    // negotiation
+                    JSONArray resourceArray = new JSONArray();
+                    for (Requirement resource : resources) {
+                        JSONObject r = new JSONObject();
+                        r.put("oslc:label", resource.toString());
+                        r.put("rdf:resource", resource.getAbout().toString());
+                        r.put("Label", resource.toString());
+                        // Start of user code RequirementSelector_setResponse
+                        // End of user code
+                        resourceArray.add(r);
+                    }
+                    JSONObject response = new JSONObject();
+                    response.put("oslc:results", resourceArray);
+                    return Response.ok(response.write()).build();
                 }
-                JSONObject response = new JSONObject();
-                response.put("oslc:results", resourceArray);
-                return Response.ok(response.write()).build();
+
             }
             log.error("A empty search should return an empty list and not NULL!");
-            throw new WebApplicationException(Status.INTERNAL_SERVER_ERROR);
-
+            return Response.noContent().build();
         } else {
-            RequestDispatcher rd = httpServletRequest.getRequestDispatcher("/co/oslc/refimpl/rm/gen/requirementselector.jsp");
+            RequestDispatcher rd = httpServletRequest.getRequestDispatcher("/co/oslc/refimpl/rm" +
+                "/gen/requirementselector.jsp");
             rd.forward(httpServletRequest, httpServletResponse);
             return null;
         }

src/server-rm/src/main/webapp/co/oslc/refimpl/rm/gen/requirementselector-results.jsp

@@ -0,0 +1,34 @@
+<%--
+ Copyright (c) 2025 Contributors to the Eclipse Foundation
+
+ See the NOTICE file(s) distributed with this work for additional
+ information regarding copyright ownership.
+
+ This program and the accompanying materials are made available under the
+ terms of the Eclipse Distribution License 1.0 which is available at
+ http://www.eclipse.org/org/documents/edl-v10.php.
+
+ SPDX-License-Identifier: BSD-3-Simple
+
+ This file is generated by Lyo Designer (https://www.eclipse.org/lyo/)
+--%>
+
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
+<%@page import="org.eclipse.lyo.oslc.domains.rm.Requirement"%>
+
+<%@ page contentType="text/html" language="java" pageEncoding="UTF-8" %>
+
+<aside>
+  <nav>
+    <ul>
+    <c:forEach var="requirement" items="${resources}">
+      <li>
+        <a href="${requirement.about}"
+          onclick="sendOslcSelectionPostMessage(this, event)"
+          >${requirement.title}</a>
+      </li>
+    </c:forEach>
+    </ul>
+  </nav>
+</aside>

src/server-rm/src/main/webapp/co/oslc/refimpl/rm/gen/requirementselector.jsp

@@ -1,7 +1,7 @@
 <%--To avoid the overriding of any manual code changes upon subsequent code generations, disable "Generate JSP Files" option in the Adaptor model.--%>
 <!DOCTYPE html>
 <%--
- Copyright (c) 2020 Contributors to the Eclipse Foundation
+ Copyright (c) 2025 Contributors to the Eclipse Foundation
 
  See the NOTICE file(s) distributed with this work for additional
  information regarding copyright ownership.
@@ -27,38 +27,55 @@
 
 <%
   String selectionUri = (String) request.getAttribute("selectionUri");
-
 %>
 
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RequirementSD</title>
-    <script src="<c:url value="/static/js/delegated-ui.js"/>"></script>
-  </head>
-  <body style="padding: 10px;">
-    <div id="selector-body">
-      <p id="searchMessage">Find a specific resource through a free-text search.</p>
-
-      <p id="loadingMessage" style="display: none;">Pondering your search. Please stand by ...</p>
-
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
+    <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+</head>
+<body>
+  <main class="container">
+      <p id="searchMessage">Find a specific OSLC resource through a free-text search.</p>
       <div>
-        <input type="search" style="width: 335px" id="searchTerms" placeholder="Enter search terms" autofocus>
-        <button type="button" onclick="search( '<%= selectionUri %>' )">Search</button>
+          <input type="search" id="searchTerms" name="terms" placeholder="Begin typing to search" 
+              autofocus autocomplete="off"
+              hx-trigger="input changed delay:120ms, keyup[key=='Enter'], load" 
+              hx-get="<%= selectionUri %>" hx-target="#search-results"
+              hx-ext="aria-busy">
       </div>
+      <div id="search-results" class="grid"></div>
+  </main>
 
-      <div style="margin-top: 5px;">
-        <select id="results" size="10" style="width: 400px" multiple="multiple"></select>
-      </div>
-
-      <div style="width: 400px; margin-top: 5px;">
-        <button style="float: right;" type="button"
-          onclick="javascript: cancel()">Cancel</button>
-        <button style="float: right;" type="button"
-          onclick="javascript: select();">OK</button>
-      </div>
-      <div style="clear: both;"></div>
-    </div>
+  <script>
+  function sendOslcSelectionPostMessage(target, event) {
+    const message = {
+      "oslc:results": [
+        {
+          "oslc:label": target.text,
+          "rdf:resource": target.href
+        }
+      ]
+    }
+    window.parent.postMessage("oslc-response:" + JSON.stringify(message), '*')
+    event.preventDefault()
+  }
 
+  // use accessible busy indicators
+  htmx.defineExtension('aria-busy', {
+    onEvent : function(name, evt) {
+      var elt = evt.detail.elt;
+      if(name === "htmx:beforeRequest") {
+         elt.setAttribute("aria-busy", "true")
+       } else if(name === "htmx:afterRequest" ) {
+         elt.removeAttribute("aria-busy")
+       }
+    }
+  })
+  </script>
   </body>
 </html>