CLDR-16750 Add box gets stuck open, modernize (#4066)

tools/cldr-apps/js/src/esm/cldrAddValue.mjs

@@ -0,0 +1,96 @@
+/*
+ * cldrAddValue: enable submitting a new value for a path
+ */
+import * as cldrNotify from "./cldrNotify.mjs";
+import * as cldrSurvey from "./cldrSurvey.mjs";
+import * as cldrTable from "./cldrTable.mjs";
+import * as cldrVote from "./cldrVote.mjs";
+import * as cldrVue from "./cldrVue.mjs";
+
+import AddValue from "../views/AddValue.vue";
+
+/**
+ * Is the "Add Value" form currently visible?
+ */
+let formIsVisible = false;
+
+let originalTrClassName = "";
+
+function isFormVisible() {
+  return formIsVisible;
+}
+
+function setFormIsVisible(visible, xpstrid) {
+  formIsVisible = visible;
+  const tr = getTrFromXpathStringId(xpstrid);
+  if (tr) {
+    if (visible) {
+      originalTrClassName = tr.className;
+    }
+    tr.className = visible ? "tr_submit" : originalTrClassName;
+  }
+}
+
+function addButton(containerEl, xpstrid) {
+  try {
+    const AddValueWrapper = cldrVue.mount(AddValue, containerEl);
+    AddValueWrapper.setXpathStringId(xpstrid);
+  } catch (e) {
+    console.error(
+      "Error loading Add Value Button vue " + e.message + " / " + e.name
+    );
+    cldrNotify.exception(e, "while loading AddValue");
+  }
+}
+
+function getEnglish(xpstrid) {
+  const theRow = getTheRowFromXpathStringId(xpstrid);
+  return theRow?.displayName || "";
+}
+
+function getWinning(xpstrid) {
+  const theRow = getTheRowFromXpathStringId(xpstrid);
+  if (!theRow) {
+    return "";
+  }
+  let theValue = cldrTable.getValidWinningValue(theRow);
+  if (theValue === cldrSurvey.INHERITANCE_MARKER || theValue === null) {
+    theValue = theRow.inheritedDisplayValue;
+  }
+  return theValue || "";
+}
+
+function sendRequest(xpstrid, newValue) {
+  const tr = getTrFromXpathStringId(xpstrid);
+  if (!tr) {
+    return;
+  }
+  tr.inputTd = tr.querySelector(".othercell");
+  const protoButton = document.getElementById("proto-button");
+  cldrVote.handleWiredClick(
+    tr,
+    tr.theRow,
+    "",
+    newValue,
+    cldrSurvey.cloneAnon(protoButton)
+  );
+}
+
+function getTheRowFromXpathStringId(xpstrid) {
+  const tr = getTrFromXpathStringId(xpstrid);
+  return tr?.theRow;
+}
+
+function getTrFromXpathStringId(xpstrid) {
+  const rowId = cldrTable.makeRowId(xpstrid);
+  return document.getElementById(rowId);
+}
+
+export {
+  addButton,
+  getEnglish,
+  getWinning,
+  isFormVisible,
+  sendRequest,
+  setFormIsVisible,
+};

tools/cldr-apps/js/src/esm/cldrComponents.mjs

@@ -29,6 +29,7 @@ import {
   Form,
   Input,
   List,
+  Modal,
   Popover,
   Progress,
   Radio,
@@ -71,6 +72,7 @@ function setup(app) {
   app.component("a-list-item-meta", List.Item.Meta);
   app.component("a-list-item", List.Item);
   app.component("a-list", List);
+  app.component("a-modal", Modal);
   app.component("a-popover", Popover);
   app.component("a-progress", Progress);
   app.component("a-radio-group", Radio.Group);

tools/cldr-apps/js/src/esm/cldrNotify.mjs

@@ -14,6 +14,10 @@
  * such as 8 seconds here, 10 seconds there; top-left here and top-right there; ...
  */
 
+import * as cldrVue from "./cldrVue.mjs";
+
+import NotificationPopup from "../views/NotificationPopup.vue";
+
 // Reference: https://www.antdv.com/components/notification
 import { notification } from "ant-design-vue";
 import { datadogLogs } from "@datadog/browser-logs";
@@ -119,4 +123,31 @@ function exception(e, context) {
   });
 }
 
-export { error, errorWithCallback, exception, open, warning };
+/**
+ * Display an error notification, possibly containing HTML, with a custom dialog
+ *
+ * @param {String} message the title, displayed at the top (plain text)
+ * @param {String} description a description of the problem, possibly HTML
+ */
+function openWithHtml(message, description) {
+  if (hasDataDog) {
+    datadogLogs.logger.error(message, { description });
+  }
+  try {
+    const NotificationPopupWrapper = cldrVue.mount(
+      NotificationPopup,
+      document.body
+    );
+    NotificationPopupWrapper.openWithMessageAndDescription(
+      message,
+      description
+    );
+  } catch (e) {
+    console.error(
+      "Error loading Notification Popup vue " + e.message + " / " + e.name
+    );
+    exception(e, "while loading NotificationPopup");
+  }
+}
+
+export { error, errorWithCallback, exception, open, openWithHtml, warning };

tools/cldr-apps/js/src/esm/cldrSurvey.mjs

@@ -1,6 +1,7 @@
 /**
  * cldrSurvey: encapsulate miscellaneous Survey Tool functions
  */
+import * as cldrAddValue from "./cldrAddValue.mjs";
 import * as cldrAjax from "./cldrAjax.mjs";
 import * as cldrCoverage from "./cldrCoverage.mjs";
 import * as cldrCoverageReset from "./cldrCoverageReset.mjs";
@@ -107,18 +108,7 @@ function getXpathMap() {
  * @return true if busy
  */
 function isInputBusy() {
-  if (cldrForum.isFormVisible()) {
-    return true;
-  }
-  const sel = window.getSelection ? window.getSelection() : null;
-  if (sel?.anchorNode?.className) {
-    // "popover-content" identifies the little input window, created using bootstrap, that appears when the
-    // user clicks an add ("+") button.
-    if (sel.anchorNode.className.indexOf("popover-content") != -1) {
-      return true;
-    }
-  }
-  return false;
+  return cldrAddValue.isFormVisible() || cldrForum.isFormVisible();
 }
 
 function createGravatar(user) {