@yuneta/gobj-ui 7.26.24 → 7.26.26

package/src/c_g6_nodes_tree.js

@@ -5010,9 +5010,16 @@ function create_form_button_row(parent, buttons)
 {
     let btnRow = document.createElement('div');
     btnRow.style.cssText = 'display:flex;gap:8px;';
-    for(let {text, style, onClick} of buttons) {
+    for(let {i18n, style, onClick} of buttons) {
+        /*  `i18n` is the key (named so that validate-locales sees a literal
+         *  one): the button carries it, and its name  */
         let btn = document.createElement('button');
-        btn.textContent = t(text);
+        btn.textContent = t(i18n);
+        btn.setAttribute('data-i18n', i18n);
+        btn.setAttribute('title', t(i18n));
+        btn.setAttribute('data-i18n-title', i18n);
+        btn.setAttribute('aria-label', t(i18n));
+        btn.setAttribute('data-i18n-aria-label', i18n);
         btn.style.cssText = style + touch_control_css();
         btn.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -5059,12 +5066,12 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
 
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => hide_overlay(gobj, priv_key),
         },
         {
-            text: confirm_text,
+            i18n: confirm_text,
             style: 'flex:1;padding:6px;background:' + confirm_color + ';color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: onConfirm,
@@ -6148,14 +6155,14 @@ function show_port_popover(gobj)
 
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
                 hide_port_popover(gobj);    /*  which undoes the preview  */
             },
         },
         {
-            text: 'apply',
+            i18n: 'apply',
             style: 'flex:1;padding:6px;background:#1890ff;color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: () => {
@@ -7100,14 +7107,14 @@ function show_edge_popover(gobj)
 
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
                 deselect_edge(gobj);        /*  which undoes the preview  */
             },
         },
         {
-            text: 'apply',
+            i18n: 'apply',
             style: 'flex:1;padding:6px;background:#52c41a;color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: () => {
@@ -7349,14 +7356,14 @@ function show_node_popover(gobj)
 
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => {
                 hide_node_popover(gobj);    /*  which undoes the preview  */
             },
         },
         {
-            text: 'apply',
+            i18n: 'apply',
             style: 'flex:1;padding:6px;background:#1890ff;color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: () => {
@@ -8431,15 +8438,24 @@ function show_create_popover(gobj)
     let titleEl = document.createElement('div');
     titleEl.style.cssText = 'margin-bottom:10px;font-weight:600;font-size:14px;';
     titleEl.textContent = t('create node');
+    titleEl.setAttribute('data-i18n', 'create node');
     popover.appendChild(titleEl);
 
-    // Topic selector
+    // Topic selector: the word carries its key, the colon is not translated
     let topicLabel = document.createElement('div');
     topicLabel.style.cssText = 'margin-bottom:4px;font-weight:500;';
-    topicLabel.textContent = t('topic') + ':';
+    let topicWord = document.createElement('span');
+    topicWord.textContent = t('topic');
+    topicWord.setAttribute('data-i18n', 'topic');
+    topicLabel.appendChild(topicWord);
+    topicLabel.appendChild(document.createTextNode(':'));
     popover.appendChild(topicLabel);
 
     let topicSelect = document.createElement('select');
+    topicSelect.setAttribute('title', t('topic'));
+    topicSelect.setAttribute('data-i18n-title', 'topic');
+    topicSelect.setAttribute('aria-label', t('topic'));
+    topicSelect.setAttribute('data-i18n-aria-label', 'topic');
     topicSelect.style.cssText =
         'width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;' +
         'font-size:13px;margin-bottom:8px;' + touch_control_css();
@@ -8483,6 +8499,11 @@ function show_create_popover(gobj)
     let idInput = document.createElement('input');
     idInput.type = 'text';
     idInput.placeholder = t('node id');
+    idInput.setAttribute('data-i18n-placeholder', 'node id');
+    idInput.setAttribute('title', t('node id'));
+    idInput.setAttribute('data-i18n-title', 'node id');
+    idInput.setAttribute('aria-label', t('node id'));
+    idInput.setAttribute('data-i18n-aria-label', 'node id');
     idInput.style.cssText =
         'width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;' +
         'font-size:13px;margin-bottom:10px;box-sizing:border-box;' +
@@ -8499,18 +8520,19 @@ function show_create_popover(gobj)
     let createBtn;  // need reference for Enter key handler
     create_form_button_row(popover, [
         {
-            text: 'cancel',
+            i18n: 'cancel',
             style: BTN_STYLE_CANCEL,
             onClick: () => hide_create_popover(gobj),
         },
         {
-            text: 'create',
+            i18n: 'create',
             style: 'flex:1;padding:6px;background:#1890ff;color:#fff;border:none;' +
                    'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
             onClick: () => {
                 let node_id = idInput.value.trim();
                 if(!node_id) {
-                    errorEl.textContent = t('node id') + ' required';
+                    errorEl.textContent = t('node id required');
+                    errorEl.setAttribute('data-i18n', 'node id required');
                     errorEl.style.display = 'block';
                     idInput.focus();
                     return;

package/src/c_yui_schema_editor.js

@@ -2689,9 +2689,15 @@ function render_import_plan(gobj, plan)
                     let where = conflict.col
                         ? `${conflict.topic}.${conflict.col}`
                         : conflict.topic;
+                    /*  ...and, for a name of a hook map, the hook column it
+                     *  is written in: where to fix it.  */
                     return ["p", {class: "SCHEMA_IMPORT_CONFLICT is-size-7"}, [
                         ["span", {i18n: conflict.code}, t(conflict.code)],
-                        where ? ["code", {class: "SCHEMA_IMPORT_CONFLICT_NAME ml-2"}, text_node(where)] : null
+                        where ? ["code", {class: "SCHEMA_IMPORT_CONFLICT_NAME ml-2"}, text_node(where)] : null,
+                        conflict.hook ? ["span", {class: "SCHEMA_IMPORT_CONFLICT_HOOK ml-2",
+                                                  i18n: "in the hook map of"}, t("in the hook map of")] : null,
+                        conflict.hook ? ["code", {class: "SCHEMA_IMPORT_CONFLICT_HOOK_NAME ml-1"},
+                                         text_node(conflict.hook)] : null
                     ].filter(Boolean)];
                 })]
         ));

package/src/schema_editor_reload.wiring.test.js

@@ -1056,6 +1056,39 @@ describe("the import plan", () => {
     });
 });
 
+describe("the import panel says what each conflict is about (REV-CLOUD V17.3.5)", () => {
+
+    test("the bad name of a hook map is printed, and the hook column it is written in", () => {
+        const {editor, host} = build("i3", "db");
+        gobj_send_event(editor, "EV_IMPORT", {}, host);
+        const dialog = modals[modals.length - 1];
+        gobj_send_event(editor, "EV_PREVIEW_IMPORT", {prune: false, model_gen: editor.priv.model_gen,
+            text: JSON.stringify({id: "db", topics: [{id: "p", pkey: "id", cols: {
+                "id": {id: "id", type: "string"},
+                "kids": {id: "kids", type: "dict", flag: ["hook"], hook: {"a/b": "x`y"}},
+                "good": {id: "go`od", type: "string"}
+            }}]})}, editor);
+
+        const lines = [...dialog.$content.querySelectorAll(".SCHEMA_IMPORT_CONFLICT")];
+        const said = lines.map((p) => {
+            const name = p.querySelector(".SCHEMA_IMPORT_CONFLICT_NAME");
+            const hook = p.querySelector(".SCHEMA_IMPORT_CONFLICT_HOOK_NAME");
+            return `${p.querySelector("span").textContent}|${name ? name.textContent : ""}|${hook ? hook.textContent : ""}`;
+        });
+        expect(said).toContain("topic name breaks the name rule|a/b|p.kids");
+        expect(said).toContain("column name breaks the name rule|a/b.x`y|p.kids");
+        /*  Not from a hook map: no hook column said  */
+        expect(said).toContain("column name breaks the name rule|p.go`od|");
+        /*  The names are DATA, text and not translated: no key on them  */
+        for(const code of dialog.$content.querySelectorAll(".SCHEMA_IMPORT_CONFLICT_NAME, .SCHEMA_IMPORT_CONFLICT_HOOK_NAME")) {
+            expect(code.getAttribute("i18n")).toBe(null);
+            expect(code.getAttribute("data-i18n")).toBe(null);
+        }
+        expect(dialog.$content.querySelector(".SCHEMA_IMPORT_RUN").disabled).toBe(true);
+        expect(errors()).toEqual([]);
+    });
+});
+
 describe("a confirmation answered where no treedb is open", () => {
 
     test("after a reload that landed on zero treedbs: refused as stale, not NOT DEFINED", () => {

package/src/schema_import.js

@@ -245,16 +245,20 @@ function plan_import(treedb, incoming, options)
              *  the treedb refuses too, even when no column declares them.  */
             let hook = (in_col.col || {}).hook;
             if(hook && typeof hook === "object" && !Array.isArray(hook)) {
+                /*  The parent's hook column the bad name comes from: a
+                 *  conflict that said only `child.fkey` did not say where
+                 *  to fix it (REV-CLOUD V17.3.5).  */
+                let from_hook = `${name || ""}.${in_col.name}`;
                 for(let [child_topic, fkey_col] of Object.entries(hook)) {
                     /*  The conflict names the BAD name (the child topic, its
-                     *  fkey), not the hook column that maps to it.  */
+                     *  fkey), and `hook` the column that maps to it.  */
                     if(topic_name_breaks_the_rule(child_topic)) {
                         conflicts.push({code: "topic name breaks the name rule",
-                                        topic: child_topic, col: ""});
+                                        topic: child_topic, col: "", hook: from_hook});
                     }
                     if(col_name_breaks_the_rule(fkey_col)) {
                         conflicts.push({code: "column name breaks the name rule",
-                                        topic: child_topic, col: String(fkey_col)});
+                                        topic: child_topic, col: String(fkey_col), hook: from_hook});
                     }
                 }
             }

package/src/schema_import.test.js

@@ -323,9 +323,9 @@ describe("a conflict names the bad name (REV-CLOUD V16.5)", () => {
             }}]
         });
         expect(plan.writes).toEqual([]);
-        let named = plan.conflicts.map((c) => `${c.code}|${c.topic}|${c.col}`);
-        expect(named).toContain("topic name breaks the name rule|a/b|");
-        expect(named).toContain("column name breaks the name rule|a/b|x`y");
-        expect(named).toContain("column name breaks the name rule|p|go`od");
+        let named = plan.conflicts.map((c) => `${c.code}|${c.topic}|${c.col}|${c.hook || ""}`);
+        expect(named).toContain("topic name breaks the name rule|a/b||p.kids");
+        expect(named).toContain("column name breaks the name rule|a/b|x`y|p.kids");
+        expect(named).toContain("column name breaks the name rule|p|go`od|");
     });
 });

package/src/yui_file_field.js

@@ -328,11 +328,11 @@ function yui_file_control(gobj, {name, value, readonly, accept, on_pick})
         if(picked) {
             $state.classList.add("is-picked");
             $state.setAttribute("data-i18n", "not saved yet");
-            $state.textContent = "not saved yet";
+            $state.textContent = t("not saved yet");
         } else if(!kept) {
             $state.classList.add("is-empty");
             $state.setAttribute("data-i18n", "no file");
-            $state.textContent = "no file";
+            $state.textContent = t("no file");
         }
 
         $clear.hidden = readonly || (!picked && !kept);