F 344 extern linkify absorbs commas etc into link adress

Summary

The cosmetics.linkify module has been changed to be more robust when detecting URLs. This addresses in particular issue #344 (closed), but now also correctly handles ports.

This merge request also adds some more info on running the unit tests, in particular adding dependencies and info on WSL (#346 (closed)).

Focus

All important changes are in caosdb-webui/src/core/js/ext_cosmetics.js and the corresponding unit tests in coasdb-webui/test/core/js/modules/ext_cosmetics.js.js.

Test Environment

How to set up a test environment for manual testing?

See README_SETUP.md (updated in this branch).

Check List for the Author

Please, prepare your MR for a review. Be sure to write a summary and a focus and create gitlab comments for the reviewer. They should guide the reviewer through the changes, explain your changes and also point out open questions. For further good practices have a look at our review guidelines

• All automated tests pass
• Reference related issues
• Up-to-date CHANGELOG.md (or not necessary)
• Up-to-date JSON schema (or not necessary)
• Appropriate user and developer documentation (or not necessary)
  • How do I use the software? Assume "stupid" users.
  • How do I develop or debug the software? Assume novice developers.
• Annotations in code (Gitlab comments)
  • Intent of new code
  • Problems with old code
  • Why this implementation?

Check List for the Reviewer

• I understand the intent of this MR
• All automated tests pass
• Up-to-date CHANGELOG.md (or not necessary)
• Appropriate user and developer documentation (or not necessary)
• The test environment setup works and the intended behavior is reproducible in the test environment
• In-code documentation and comments are up-to-date.
• Check: Are there specifications? Are they satisfied?

For further good practices have a look at our review guidelines.

src/core/js/ext_cosmetics.js

 /*
  * This file is a part of the LinkAhead Project.
  *
- * Copyright (C) 2021-2023 IndiScale GmbH <info@indiscale.com>
+ * Copyright (C) 2021-2024 IndiScale GmbH <info@indiscale.com>
  * Copyright (C) 2021 Timm Fitschen <t.fitschen@indiscale.com>
  * Copyright (C) 2023 Florian Spreckelsen <f.spreckelsen@indiscale.com>
  * Copyright (C) 2023 Daniel Hornung <d.hornung@indiscale.com>
+ * Copyright (C) 2024 Joscha Schmiedt <joscha@schmiedt.dev>
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -51,66 +52,81 @@ var cosmetics = new function () {
         });
     }
 
-  /**
-   * Remove all the custom datetime elements again, for example when entering the edit mode.
-   */
-  var _custom_datetime_clear = function() {
-    $('.caosdb-v-property-datetime-customized-newvalue').each(function () {
-      $(this).remove();
+    /**
+     * Remove all the custom datetime elements again, for example when entering the edit mode.
+     */
+    var _custom_datetime_clear = function () {
+        $('.caosdb-v-property-datetime-customized-newvalue').each(function () {
+            $(this).remove();
+        }
+        )
     }
-                                                             )
-  }
 
-    var _linkify = function () {
-        $('.caosdb-f-property-text-value').each(function (index) {
-            if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) {
-                var result = this.innerText.replace(/https?:\/\/[^\s]*/g, function (href, index) {
-                    var link_text = href;
-                    if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) {
-                        link_text = link_text.substring(0, _link_cut_off_length - 5) + "[...]";
-                    }
+    /**
+     * Return a string with all occurences of a http(s) url in a given string replaced by <a> elements
+     * @param {string} text - The text to be searched for URLs
+     * @returns {string} text with <a> elements instead of raw links
+     */
+    function linkify_string(text) {
+        // const match_url_regex = /https?:\/\/[^\s]*/g // original
+        // https://regexr.com helps you design regex
+        const match_url_regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.?[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g
+
+        return text.replace(match_url_regex, function (href) {
+            var link_text = href;
+            if (_link_cut_off_length > 4 && link_text.length > _link_cut_off_length) {
+                link_text = link_text.substring(0, _link_cut_off_length - 5) + "[...]";
+            }
 
-                    return `<a title="Open ${href} in a new tab." target="_blank" class="caosdb-v-property-href-value" href="${href}">${link_text} <i class="bi bi-box-arrow-up-right"></i></a>`;
-                });
+            return `<a title="Open ${href} in a new tab." target="_blank" class="caosdb-v-property-href-value" href="${href}">${link_text} <i class="bi bi-box-arrow-up-right"></i></a>`;
+        });
+    }
 
+    /**
+     * Turn all URLs in .caosdb-f-property-text-value DOM elements into actual links
+     */
+    var _linkify_all_text_values = function () {
+        $('.caosdb-f-property-text-value').each(function (index) {
+            if (!($(this).hasClass("caosdb-v-property-linkified")) && (/https?:\/\//.test(this.innerText))) {
+                var linkified_text_value = linkify_string(this.innerText);
                 // add class to highlight that this has been linkified already
                 // (see https://gitlab.com/caosdb/caosdb-webui/-/issues/199).
                 $(this).addClass("caosdb-v-property-linkified")
                 $(this).hide();
-                $(this).after(result);
+                $(this).after(linkified_text_value);
             }
         });
     }
 
     /**
-     * Customize datetime formatting.
+     * Convert any substring of a text-value beginning with 'http(s)://' into a
+     * link.
      *
      * A listener detects edit-mode changes and previews
      */
-    var custom_datetime = function () {
-        _custom_datetime();
+    var linkify = function () {
+        _linkify_all_text_values();
 
-        // edit-mode-listener to delete replacement
-        document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true);
-        // edit-mode-listener to recreate
-        document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true);
+        // edit-mode-listener
+        document.body.addEventListener(edit_mode.end_edit.type, _linkify_all_text_values, true);
         // preview listener
-        document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true);
+        document.body.addEventListener(preview.previewReadyEvent.type, _linkify_all_text_values, true);
     }
 
     /**
-     * Convert any substring of a text-value beginning with 'http(s)://' into a
-     * link.
+     * Customize datetime formatting.
      *
      * A listener detects edit-mode changes and previews
      */
-    var linkify = function () {
-        _linkify();
+    var custom_datetime = function () {
+        _custom_datetime();
 
-        // edit-mode-listener
-        document.body.addEventListener(edit_mode.end_edit.type, _linkify, true);
+        // edit-mode-listener to delete replacement
+        document.body.addEventListener(edit_mode.start_edit.type, _custom_datetime_clear, true);
+        // edit-mode-listener to recreate
+        document.body.addEventListener(edit_mode.end_edit.type, _custom_datetime, true);
         // preview listener
-        document.body.addEventListener(preview.previewReadyEvent.type, _linkify, true);
+        document.body.addEventListener(preview.previewReadyEvent.type, _custom_datetime, true);
     }
 
     this.init = function () {
@@ -123,7 +139,6 @@ var cosmetics = new function () {
             linkify();
         }
     }
-
 }