Add redirect ui in in nodes#edit and apply some minor cleanup

Also give search inputs a magnifier and a clear control: input_group
wraps a field with an icon and, where clearing is meaningful, a
button that empties it and any hidden companion named by data-clears.

Clean up some inconistency between field hints presented as p and as
span.

Remove stray console.log.

3 files changed, 80 insertions, 6 deletions

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 994d3698..ffebb694 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -63,7 +63,6 @@ $(document).ready(function () {
     search_toggle.addEventListener('click', function (e) {
       admin_search.display_toggle();
       e.preventDefault();
-      console.log("Toggle");
     });
   }
 
@@ -124,6 +123,32 @@ $(document).ready(function () {
     });
   }
 
+  document.querySelectorAll('.field_clear').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var wrap = btn.closest('.input_group');
+      wrap.querySelector('input[type=text]').value = '';
+      var hidden = wrap.dataset.clears;
+      if (hidden) { document.getElementById(hidden).value = ''; }
+    });
+  });
+
+  if (document.getElementById('redirect_search_term')) {
+    redirect_search.initialize_search();
+
+    var mode = document.getElementById('page_redirect');
+    var field = document.getElementById('redirect_target_field');
+    mode.addEventListener('change', function () {
+      field.style.display = mode.checked ? '' : 'none';
+    });
+
+    var term = document.getElementById('redirect_search_term');
+    term.addEventListener('input', function () {
+      if (term.value === '') {
+        document.getElementById('page_redirect_node_id').value = '';
+      }
+    });
+  }
+
   var metadata_details = document.getElementById('metadata_details');
   if (metadata_details) {
     var desktop_mq = window.matchMedia('(min-width: 1016px)');
diff --git a/public/javascripts/admin_search.js b/public/javascripts/admin_search.js
index e20e511a..746cecc1 100644
--- a/public/javascripts/admin_search.js
+++ b/public/javascripts/admin_search.js
@@ -263,6 +263,20 @@ move_to_search = {
   }
 };
 
+redirect_search = {
+  initialize_search : function() {
+    initSearchPicker({
+      inputSelector: "#redirect_search_term",
+      resultsSelector: "#redirect_search_results",
+      showRestricted: true,
+      onSelect: function(node) {
+        $("#redirect_search_term").val(node.title);
+        $("#page_redirect_node_id").val(node.node_id);
+      }
+    });
+  }
+};
+
 restore_search = {
   initialize_search : function() {
     initSearchPicker({
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 923cac4b..63333d93 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -446,11 +446,8 @@ form.button_to.computation button[type="submit"]:disabled {
   pointer-events: none;
 }
 
-/* Native (non-button_to) submit buttons -- Create/Save/Publish forms.
-   Lower specificity than form.button_to's own rule, so button_to forms
-   are correctly unaffected. If a button_to output ever loses its class
-   wrapper, it will silently fall through to this bordered style instead
-   of rendering as a plain link -- worth knowing, not necessarily fixing. */
+/* Native (non-button_to) submit buttons used for Create/Save/Publish
+   forms. */
 input[type="submit"] {
   -webkit-appearance: none;
   appearance: none;
@@ -470,6 +467,44 @@ input[type="submit"]:hover {
   background-color: var(--text);
 }
 
+.input_group {
+  width: 100%;
+  position: relative;
+  display: inline-block;
+}
+
+.input_group .field_search_icon {
+  position: absolute;
+  left: 0.5rem;
+  top: 55%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.input_group .field_search_icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.input_group input[type="text"].clearable_input {
+  padding-left: 2rem;
+  padding-right: 1.75rem;
+}
+
+.field_clear {
+  position: absolute;
+  right: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  appearance: none;
+  background: none;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  line-height: 1;
+}
+
 /* ============================================================
    Admin dashboard
    ============================================================ */