(core) Form kanban tasks

Summary:
- Open all links in a new tab
- Excluding not filled columns (to fix trigger formulas)
- Fixed Ref/RefList submission
- Removing redundant type definitions for Box
- Adding header menu item
- Default empty values in select control

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D4166

static/forms/README.md

@@ -0,0 +1,19 @@
+## grist-form-submit.js
+
+File is taken from https://github.com/gristlabs/grist-form-submit. But it is modified to work with
+forms, especially for:
+- Ref and RefList columns, as by default it sends numbers as strings (FormData issue), and Grist
+  doesn't know how to convert them back to numbers.
+- Empty strings are not sent at all - otherwise Grist won't be able to fire trigger formulas
+  correctly and provide default values for columns.
+- By default it requires a redirect URL, now it is optional.
+
+
+## purify.min.js
+
+File taken from https://www.npmjs.com/package/dompurify. It is used to sanitize HTML. It wasn't
+modified at all.
+
+## form.html
+
+This is handlebars template filled by DocApi.ts

static/forms/form.html

@@ -9,6 +9,15 @@
   </style>
   <script src="forms/grist-form-submit.js"></script>
   <script src="forms/purify.min.js"></script>
+  <script>
+    // Make all links open in a new tab.
+    DOMPurify.addHook('uponSanitizeAttribute', (node) => {
+      if (!('target' in node)) { return; }
+      node.setAttribute('target', '_blank');
+      // Make sure that this is set explicitly, as it's often set by the browser.
+      node.setAttribute('rel', 'noopener');
+    });
+  </script>
   <link rel="stylesheet" href="forms/form.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -43,7 +52,7 @@
     document.querySelector('.grist-form input[type="submit"]').addEventListener('click', function(event) {
       // When submit is pressed make sure that all choice lists that are required
       // have at least one option selected
-      const choiceLists = document.querySelectorAll('.grist-choice-list.required:not(:has(input:checked))');
+      const choiceLists = document.querySelectorAll('.grist-checkbox-list.required:not(:has(input:checked))');
       Array.from(choiceLists).forEach(function(choiceList) {
         // If the form has at least one checkbox make it required
         const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');
@@ -51,7 +60,7 @@
       });
 
       // All other required choice lists with at least one option selected are no longer required
-      const choiceListsRequired = document.querySelectorAll('.grist-choice-list.required:has(input:checked)');
+      const choiceListsRequired = document.querySelectorAll('.grist-checkbox-list.required:has(input:checked)');
       Array.from(choiceListsRequired).forEach(function(choiceList) {
         // If the form has at least one checkbox make it required
         const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');

static/forms/grist-form-submit.js

@@ -69,7 +69,19 @@ class TypedFormData {
     this._formData = formData ?? new FormData(formElement);
     this._formElement = formElement;
   }
-  keys() { return this._formData.keys(); }
+  keys() {
+    const keys = Array.from(this._formData.keys());
+
+    // Don't return keys for scalar values which just return empty string.
+    // Otherwise Grist won't fire trigger formulas.
+    return keys.filter(key => {
+      // If there are multiple values, return this key as it is.
+      if (this._formData.getAll(key).length !== 1) { return true; }
+      // If the value is empty string or null, don't return the key.
+      const value = this._formData.get(key);
+      return value !== '' && value !== null;
+    });
+  }
   type(key) {
     return this._formElement?.querySelector(`[name="${key}"]`)?.getAttribute('data-grist-type');
   }