feat: alternative js as modules

Author: Jumas

.gitignore

@@ -35,3 +35,7 @@ replay_pid*
 target/
 *.iml
 dependency-reduced-pom.xml
+
+app/node/
+app/node_modules/
+app/package-lock.json

app/package.json

@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+  },
+  "devDependencies": {
+    "jsdom": "^24.0.0",
+    "chai": "^4.3.4",
+    "mocha": "10.1.0"
+  },
+  "name": "maven-js-project",
+  "scripts": {
+    "test": "mocha src/test/js/**/*.js"
+  },
+  "type": "module",
+  "version": "1.0.0"
+}

app/pom.xml

@@ -11,6 +11,12 @@
     <name>Versatile extension for developing additional extensions within Polarion ALM: common code and resources</name>
     <artifactId>ch.sbb.polarion.extension.generic.app</artifactId>
 
+    <properties>
+        <frontend-maven-plugin.version>1.15.0</frontend-maven-plugin.version>
+        <frontend-maven-plugin.nodeVersion>v20.17.0</frontend-maven-plugin.nodeVersion>
+        <frontend-maven-plugin.npmVersion>10.8.3</frontend-maven-plugin.npmVersion>
+    </properties>
+
     <profiles>
         <profile>
             <id>gpg-sign</id>
@@ -70,6 +76,46 @@
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-source-plugin</artifactId>
             </plugin>
+
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>${frontend-maven-plugin.version}</version>
+                <executions>
+                    <execution>
+                        <id>install-node-and-npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <configuration>
+                            <nodeVersion>${frontend-maven-plugin.nodeVersion}</nodeVersion>
+                            <npmVersion>${frontend-maven-plugin.npmVersion}</npmVersion>
+                        </configuration>
+                    </execution>
+
+                    <!-- Install JavaScript dependencies using npm -->
+                    <execution>
+                        <id>npm-install</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>install</arguments>
+                        </configuration>
+                    </execution>
+
+                    <!-- Run JavaScript tests -->
+                    <execution>
+                        <id>npm-test</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>run test</arguments>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
         </plugins>
     </build>
 </project>

app/src/main/resources/META-INF/resources/common/jsp/configurations.jsp

@@ -7,13 +7,13 @@
         <label id="configurations-label"><span class="configuration-label-capitalized">Configuration</span>:</label>
         <div id="configurations-select"></div>
         <div class="action-buttons">
-            <button class="toolbar-button" onclick="Configurations.editConfiguration()">
+            <button id="configurations-button-edit" class="toolbar-button" onclick="Configurations.editConfiguration()">
                 <img class="button-image" src="/polarion/ria/images/actions/edit.gif?bundle=<%= bundleTimestamp %>">Rename
             </button>
-            <button class="toolbar-button" onclick="Configurations.deleteConfiguration()">
+            <button id="configurations-button-delete" class="toolbar-button" onclick="Configurations.deleteConfiguration()">
                 <img class="button-image" src="/polarion/ria/images/actions/delete.gif?bundle=<%= bundleTimestamp %>">Delete
             </button>
-            <button class="new-configuration toolbar-button" style="display: inline-block" onclick="Configurations.newConfiguration()">
+            <button id="configurations-button-create" class="new-configuration toolbar-button" style="display: inline-block" onclick="Configurations.newConfiguration()">
                 <img class="button-image" src="/polarion/ria/images/control/tablePlus.png?bundle=<%= bundleTimestamp %>">Add new
             </button>
         </div>
@@ -29,13 +29,13 @@
         <label for="edit-configuration-input" class="edit-configuration">Edit <span class="configuration-label-capitalized">Configuration</span>:</label>
         <input type="text" id="edit-configuration-input" class="edit-configuration" maxlength="40" />
         <div class="action-buttons">
-            <button class="toolbar-button" onclick="Configurations.cancelEditConfiguration()">
+            <button id="configurations-button-cancel-edit" class="toolbar-button" onclick="Configurations.cancelEditConfiguration()">
                 <img class="button-image" src="/polarion/ria/images/actions/cancel.gif?bundle=<%= bundleTimestamp %>">Cancel
             </button>
-            <button class="new-configuration toolbar-button" onclick="Configurations.saveConfiguration()">
+            <button id="configurations-button-save" class="new-configuration toolbar-button" onclick="Configurations.saveConfiguration()">
                 <img class="button-image" src="/polarion/ria/images/actions/save.gif?bundle=<%= bundleTimestamp %>">Save
             </button>
-            <button class="edit-configuration toolbar-button" onclick="Configurations.updateConfiguration()">
+            <button id="configurations-button-update" class="edit-configuration toolbar-button" onclick="Configurations.updateConfiguration()">
                 <img class="button-image" src="/polarion/ria/images/actions/save.gif?bundle=<%= bundleTimestamp %>">Update
             </button>
         </div>