Merge pull request #2017 from maxberger/master

Implement Share by map, improve share by token, added test action for javascript errors.

Author: pbiering

.github/workflows/test.yml

@@ -186,6 +186,29 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: coveralls --service=github --finish
 
+  js-test:
+    name: JS Type Check
+    runs-on: ubuntu-latest
+    needs: test-ubuntu-python-newest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+      - name: JS Type Check
+        run: |
+          set -o pipefail
+          npx -p typescript tsc -p radicale/web/jsconfig.json | npx typescript-xunit-xml > tsc-results.xml
+      - uses: mikepenz/action-junit-report@v6
+        if: ${{ failure() &&  (github.event.pull_request.head.repo.full_name != github.repository) }}
+        with:
+          report_paths: 'tsc-results.xml'
+          annotate_only: true # forked repo cannot write to checks so just do annotations
+      - uses: mikepenz/action-junit-report@v6
+        if: ${{ always() && github.event.pull_request.head.repo.full_name == github.repository }}
+        with:
+          report_paths: 'tsc-results.xml'
+
   lint:
     name: Lint
     runs-on: ubuntu-latest
@@ -220,6 +243,6 @@ jobs:
           report_paths: 'pytest-results.xml'
           annotate_only: true # forked repo cannot write to checks so just do annotations
       - uses: mikepenz/action-junit-report@v6
-        if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+        if: ${{ always() && github.event.pull_request.head.repo.full_name == github.repository }}
         with:
           report_paths: 'pytest-results.xml'

integ_tests/common.py

@@ -45,6 +45,8 @@ def start_radicale_server(tmp_path: pathlib.Path) -> Generator[str, Any, None]:
     with open(user_path, "w") as f:
         f.write(
             """admin:adminpassword
+max:maxpassword
+
 """
         )
 

integ_tests/test_sharing.py

@@ -22,7 +22,8 @@ def test_create_and_delete_share_by_key(page: Page, radicale_server: str) -> Non
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(0)
 
-    page.click('button[data-name="sharebytoken_ro"]')
+    page.click('button[data-name="sharebytoken"]')
+    page.click('#newshare button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -34,7 +35,9 @@ def test_create_and_delete_share_by_key(page: Page, radicale_server: str) -> Non
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(0)
-    page.click('button[data-name="sharebytoken_rw"]')
+    page.click('button[data-name="sharebytoken"]')
+    page.click('label[for="newshare_attr_permissions_rw"]')
+    page.click('#newshare button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -46,3 +49,46 @@ def test_create_and_delete_share_by_key(page: Page, radicale_server: str) -> Non
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(0)
+
+
+def test_create_and_delete_share_by_map(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True)
+
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
+    ).to_have_count(0)
+
+    page.click('button[data-name="sharebymap"]')
+    page.locator('input[data-name="shareuser"]').fill("max")
+    page.locator('input[data-name="sharehref"]').fill("1234")
+    page.click('#newshare button[data-name="submit"]')
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
+    ).to_have_count(1)
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RO']")
+    ).to_be_visible()
+    page.once("dialog", lambda dialog: dialog.accept())
+    page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
+    ).to_have_count(0)
+    page.click('button[data-name="sharebymap"]')
+    page.click('label[for="newshare_attr_permissions_rw"]')
+    page.locator('input[data-name="shareuser"]').fill("max")
+    page.locator('input[data-name="sharehref"]').fill("1234")
+    page.click('#newshare button[data-name="submit"]')
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
+    ).to_have_count(1)
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RW']")
+    ).to_be_visible()
+    page.once("dialog", lambda dialog: dialog.accept())
+    page.click('tr:not(.hidden) button[data-name="delete"]', strict=True)
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
+    ).to_have_count(0)

radicale/web/README.md

@@ -0,0 +1,8 @@
+# Built-in web UI
+
+If you have tsc installed, you can type-check all JavaScript using
+
+``` lang=shell
+tsc -p radicale/web/jsconfig.json --noEmit --pretty
+```
+

radicale/web/internal_data/CollectionsScene.js

@@ -21,7 +21,7 @@
 import { CreateEditCollectionScene } from "./CreateEditCollectionScene.js";
 import { DeleteCollectionScene } from "./DeleteCollectionScene.js";
 import { LoadingScene } from "./LoadingScene.js";
-import { CreateShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
+import { ShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
 import { UploadCollectionScene } from "./UploadCollectionScene.js";
 import { discover_server_features, get_collections } from "./api.js";
 import { SERVER } from "./constants.js";
@@ -30,15 +30,16 @@ import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 import { bytesToHumanReadable } from "./utils.js";
 
 /**
- * @constructor
  * @implements {Scene}
- * @param {string} user
- * @param {string} password
- * @param {Collection} collection The principal collection.
- * @param {function(string):void} onerror Called when an error occurs, before the
- *                                   scene is popped.
  */
 export class CollectionsScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {Collection} collection The collection to show sharing options for.
+     * @param {function(string):void} onerror Called when an error occurs, before the
+     *                                   scene is popped.
+     */
     constructor(user, password, collection, onerror) {
         /** @type {HTMLElement} */ let html_scene = document.getElementById("collectionsscene");
         /** @type {HTMLElement} */ let template = html_scene.querySelector("[data-name=collectiontemplate]");
@@ -82,7 +83,7 @@ export class CollectionsScene {
 
         function onshare(collection) {
             try {
-                let share_collection_scene = new CreateShareCollectionScene(user, password, collection);
+                let share_collection_scene = new ShareCollectionScene(user, password, collection);
                 push_scene(share_collection_scene, false);
             } catch (err) {
                 console.error(err);
@@ -189,7 +190,7 @@ export class CollectionsScene {
             upload_btn.onclick = onupload;
             if (collections === null) {
                 update();
-                discover_server_features(user, password, maybe_enable_sharing_options);            
+                discover_server_features(user, password, maybe_enable_sharing_options);
             } else {
                 // from update loading scene
                 show_collections(collections);

radicale/web/internal_data/CreateEditCollectionScene.js

@@ -23,35 +23,31 @@ import { create_collection, edit_collection } from "./api.js";
 import { COLOR_RE } from "./constants.js";
 import { Collection, CollectionType } from "./models.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
-import { cleanHREFinput, isValidHREF, random_hex, random_uuid } from "./utils.js";
+import { cleanHREFinput, isValidHREF, onCleanHREFinput, random_hex, random_uuid } from "./utils.js";
 
 /**
- * @constructor
  * @implements {Scene}
- * @param {string} user
- * @param {string} password
- * @param {Collection} collection if it's a principal collection, a new
- *                                collection will be created inside of it.
- *                                Otherwise the collection will be edited.
  */
 export class CreateEditCollectionScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {Collection} collection if it's a principal collection, a new
+     *                                collection will be created inside of it.
+     *                                Otherwise the collection will be edited.
+     */
     constructor(user, password, collection) {
         let edit = collection.type !== CollectionType.PRINCIPAL;
         let html_scene = document.getElementById(edit ? "editcollectionscene" : "createcollectionscene");
         /** @type {HTMLElement} */ let title_form = edit ? html_scene.querySelector("[data-name=title]") : null;
         /** @type {HTMLElement} */ let error_form = html_scene.querySelector("[data-name=error]");
         /** @type {HTMLInputElement} */ let href_form = html_scene.querySelector("[data-name=href]");
-        /** @type {HTMLElement} */ let href_label = html_scene.querySelector("label[for=href]");
         /** @type {HTMLInputElement} */ let displayname_form = html_scene.querySelector("[data-name=displayname]");
-        /** @type {HTMLElement} */ let displayname_label = html_scene.querySelector("label[for=displayname]");
         /** @type {HTMLInputElement} */ let description_form = html_scene.querySelector("[data-name=description]");
-        /** @type {HTMLElement} */ let description_label = html_scene.querySelector("label[for=description]");
         /** @type {HTMLInputElement} */ let source_form = html_scene.querySelector("[data-name=source]");
         /** @type {HTMLElement} */ let source_label = html_scene.querySelector("label[for=source]");
         /** @type {HTMLSelectElement} */ let type_form = html_scene.querySelector("[data-name=type]");
-        /** @type {HTMLElement} */ let type_label = html_scene.querySelector("label[for=type]");
         /** @type {HTMLInputElement} */ let color_form = html_scene.querySelector("[data-name=color]");
-        /** @type {HTMLElement} */ let color_label = html_scene.querySelector("label[for=color]");
         /** @type {HTMLElement} */ let submit_btn = html_scene.querySelector("[data-name=submit]");
         /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
 
@@ -69,7 +65,7 @@ export class CreateEditCollectionScene {
         let color = edit && collection.color ? collection.color : "#" + random_hex(6);
 
         if (!edit) {
-            href_form.addEventListener("keydown", cleanHREFinput);
+            href_form.addEventListener("input", onCleanHREFinput);
         }
 
         function remove_invalid_types() {
@@ -118,7 +114,7 @@ export class CreateEditCollectionScene {
                 error_form.classList.remove("hidden");
             }
             error_form.classList.add("hidden");
-            onTypeChange();
+            onTypeChange(null);
             type_form.addEventListener("change", onTypeChange);
         }
 
@@ -172,8 +168,10 @@ export class CreateEditCollectionScene {
             return false;
         }
 
-
-        function onTypeChange(e) {
+        /** 
+         * @param {Event} _e
+         */
+        function onTypeChange(_e) {
             if (type_form.value == CollectionType.WEBCAL) {
                 source_label.classList.remove("hidden");
                 source_form.classList.remove("hidden");

radicale/web/internal_data/LoadingScene.js

@@ -21,16 +21,17 @@
 import { Scene } from "./scene_manager.js";
 
 /**
- * @constructor
  * @implements {Scene}
  */
-export function LoadingScene() {
-    let html_scene = document.getElementById("loadingscene");
-    this.show = function() {
-        html_scene.classList.remove("hidden");
-    };
-    this.hide = function() {
-        html_scene.classList.add("hidden");
-    };
-    this.release = function() {};
+export class LoadingScene {
+    constructor() {
+        let html_scene = document.getElementById("loadingscene");
+        this.show = function () {
+            html_scene.classList.remove("hidden");
+        };
+        this.hide = function () {
+            html_scene.classList.add("hidden");
+        };
+        this.release = function () { };
+    }
 }