rails_admin 3.3.0 → 4.0.0.beta

data/src/rails_admin/filtering-select.js

@@ -1,7 +1,7 @@
 import jQuery from "jquery";
 import "jquery-ui/ui/widget.js";
 import "jquery-ui/ui/widgets/autocomplete.js";
-import I18n from "./i18n";
+import I18n from "./i18n.js";
 
 (function ($) {
   "use strict";
@@ -30,7 +30,7 @@ import I18n from "./i18n";
       // to be generated.
       if (this.filtering_select.length > 0) {
         this.input = this.filtering_select.children("input");
-        this.button = this.filtering_select.children(".input-group-btn");
+        this.button = this.filtering_select.children(".btn");
       } else {
         this.element.hide();
         this.filtering_select = this._inputGroup(this.element.attr("id"));
@@ -106,7 +106,7 @@ import I18n from "./i18n";
       var self = this;
       var requestIndex = 0;
 
-      if ($.isArray(source)) {
+      if (Array.isArray(source)) {
         return function (request, response) {
           response(self._getResultSet(request, source, false));
         };
@@ -152,11 +152,9 @@ import I18n from "./i18n";
     },
 
     _buttonField: function () {
+      // A direct child of .input-group, so Bootstrap joins it to the input.
       return $(
-        '<span class="input-group-btn">' +
-          '<label class="btn btn-info dropdown-toggle" title="Show All Items" role="button">' +
-          "</label>" +
-          "</span>"
+        '<label class="btn btn-info dropdown-toggle" title="Show All Items" role="button"></label>'
       );
     },
 
@@ -212,6 +210,8 @@ import I18n from "./i18n";
         delay: this.options.searchDelay,
         minLength: this.options.minLength,
         source: this._getSourceFunction(this.options.source),
+        // Render the menu as a Bootstrap dropdown, so it follows the app's theme.
+        classes: { "ui-autocomplete": "ui-front dropdown-menu" },
         select: function (event, ui) {
           var option = self.element.find(
             `option[value="${CSS.escape(ui.item.id)}"]`
@@ -289,7 +289,7 @@ import I18n from "./i18n";
       this.input.data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
           .data("ui-autocomplete-item", item)
-          .append($("<a></a>").html(item.html || item.id))
+          .append($('<a class="dropdown-item"></a>').html(item.html || item.id))
           .appendTo(ul);
       };
     },

data/src/rails_admin/flatpickr.js

@@ -0,0 +1,14 @@
+// flatpickr with every locale registered onto its shared `l10ns` singleton, so the
+// date/time widgets can honour `locale: I18n.locale`. This is the equivalent of the
+// Sprockets manifest's old `flatpickr-with-locales` require. Import this instead of
+// "flatpickr" directly.
+//
+// flatpickr assigns itself to `window.flatpickr` on load, and the l10n bundle
+// self-registers onto that global - so the "flatpickr" import has to come first to
+// win the evaluation-order race. Assigning the locales by hand instead does not
+// work: esbuild's Node interop hands back the wrapped module namespace, which
+// clobbers `l10ns.default` and breaks every picker.
+import flatpickr from "flatpickr";
+import "flatpickr/dist/l10n/index.js";
+
+export default flatpickr;

data/src/rails_admin/remote-form.js

@@ -1,4 +1,3 @@
-import Rails from "@rails/ujs";
 import jQuery from "jquery";
 import "jquery-ui/ui/widget.js";
 import * as bootstrap from "bootstrap";
@@ -79,7 +78,13 @@ import * as bootstrap from "bootstrap";
         cancelButtonText = dialog.find(":submit[name=_continue]").html();
       dialog.find(".form-actions").remove();
 
-      form.attr("data-remote", true).attr("data-type", "json");
+      // We submit this form ourselves (see _submitForm) and want the JSON back,
+      // not a Turbo navigation - catch both the save button and an Enter keypress.
+      form.attr("data-turbo", "false");
+      form.off("submit.raRemoteForm").on("submit.raRemoteForm", function (e) {
+        e.preventDefault();
+        widget._submitForm(form);
+      });
       dialog.find(".modal-header-title").text(form.data("title"));
       dialog
         .find(".cancel-action")
@@ -96,63 +101,84 @@ import * as bootstrap from "bootstrap";
         .find(".save-action")
         .unbind()
         .click(function () {
-          Rails.fire(form[0], "submit");
+          form.trigger("submit.raRemoteForm");
           return false;
         })
         .html(saveButtonText);
 
       const event = new CustomEvent("rails_admin.dom_ready", { detail: form });
       document.dispatchEvent(event);
+    },
+
+    _submitForm: function (form) {
+      var widget = this;
+      var csrf = document.querySelector('meta[name="csrf-token"]');
+      // We read the form without submitting it, so let widgets write back first.
+      form[0].dispatchEvent(
+        new CustomEvent("rails_admin.before_remote_submit")
+      );
+      jQuery.ajax({
+        url: form.attr("action"),
+        method: (form.attr("method") || "post").toUpperCase(),
+        data: new FormData(form[0]),
+        processData: false,
+        contentType: false,
+        headers: {
+          "X-CSRF-Token": csrf ? csrf.content : "",
+          // JSON on success, the modal HTML (format.js) on validation errors.
+          Accept: "application/json, text/javascript",
+        },
+        complete: function (xhr) {
+          widget._handleFormResponse(xhr);
+        },
+      });
+    },
 
-      form.bind("ajax:complete", function (event) {
-        var data = event.detail[0];
-        if (data.status == 200) {
-          var json = $.parseJSON(data.responseText);
-          var option =
-            '<option value="' +
-            json.id +
-            '" selected>' +
-            json.label +
-            "</option>";
-          var select = widget.element.find("select").filter(":hidden");
+    _handleFormResponse: function (xhr) {
+      var widget = this,
+        dialog = this._getModal();
+      if (xhr.status == 200) {
+        var json = JSON.parse(xhr.responseText);
+        var option =
+          '<option value="' +
+          json.id +
+          '" selected>' +
+          json.label +
+          "</option>";
+        var select = widget.element.find("select").filter(":hidden");
 
-          if (widget.element.find(".filtering-select").length) {
-            // select input
-            var input = widget.element
-              .find(".filtering-select")
-              .children(".ra-filtering-select-input");
-            input.val(json.label);
-            if (!select.find("option[value=" + json.id + "]").length) {
-              // not a replace
-              select.html(option).val(json.id);
-              widget.element.find(".update").removeClass("disabled");
-            }
-          } else {
-            // multi-select input
-            var multiselect = widget.element.find(".ra-multiselect");
-            if (multiselect.find("option[value=" + json.id + "]").length) {
-              // replace
-              select.find("option[value=" + json.id + "]").text(json.label);
-              multiselect
-                .find("option[value= " + json.id + "]")
-                .text(json.label);
-            } else {
-              // add
-              select.append(option);
-              multiselect
-                .find("select.ra-multiselect-selection")
-                .append(option);
-            }
+        if (widget.element.find(".filtering-select").length) {
+          // select input
+          var input = widget.element
+            .find(".filtering-select")
+            .children(".ra-filtering-select-input");
+          input.val(json.label);
+          if (!select.find("option[value=" + json.id + "]").length) {
+            // not a replace
+            select.html(option).val(json.id);
+            widget.element.find(".update").removeClass("disabled");
           }
-          widget._trigger("success");
-          dialog.each(function (index, element) {
-            bootstrap.Modal.getInstance(element).hide();
-          });
         } else {
-          dialog.find(".modal-body").html(data.responseText);
-          widget._bindFormEvents();
+          // multi-select input
+          var multiselect = widget.element.find(".ra-multiselect");
+          if (multiselect.find("option[value=" + json.id + "]").length) {
+            // replace
+            select.find("option[value=" + json.id + "]").text(json.label);
+            multiselect.find("option[value= " + json.id + "]").text(json.label);
+          } else {
+            // add
+            select.append(option);
+            multiselect.find("select.ra-multiselect-selection").append(option);
+          }
         }
-      });
+        widget._trigger("success");
+        dialog.each(function (index, element) {
+          bootstrap.Modal.getInstance(element).hide();
+        });
+      } else {
+        dialog.find(".modal-body").html(xhr.responseText);
+        widget._bindFormEvents();
+      }
     },
 
     _getModal: function () {

data/src/rails_admin/styles/base/theming.scss

@@ -3,9 +3,38 @@
   Keep it clean, people
 */
 
-$avatar-size: 30px;
-
 body.rails_admin {
+  /*
+    Theming custom properties. Override these from the host app (an
+    app/views/layouts/rails_admin/_head_custom.html.erb <style> block, or a
+    stylesheet targeting `body.rails_admin`) to retheme RailsAdmin without
+    rebuilding its CSS. Defaults reproduce the compiled-in Bootstrap theme.
+  */
+  --ra-avatar-size: 30px;
+  --ra-nav-link-active-bg: #{map-get($theme-colors, primary)};
+  --ra-nav-link-active-color: #{color-contrast(map-get($theme-colors, primary))};
+  --ra-nav-toggle-color: #{$gray-600};
+  --ra-nav-toggle-active-color: #{$gray-700};
+  --ra-nested-form-border-color: #{map-get($theme-colors, primary)};
+  --ra-nested-form-border-color-2: #{lighten(map-get($theme-colors, info), 20%)};
+  --ra-nested-form-border-color-3: #{lighten(
+      map-get($theme-colors, warning),
+      30%
+    )};
+  --ra-nested-form-border-color-4: #{lighten(
+      map-get($theme-colors, success),
+      40%
+    )};
+  --ra-table-sort-caret-color: #{$dark};
+  --ra-table-sort-active-bg: #{rgba($info, 0.25)};
+  --ra-table-sticky-bg: #{if(
+      $table-bg == transparent,
+      if($body-bg == transparent, #fff, $body-bg),
+      $table-bg
+    )};
+  --ra-table-sort-sticky-bg: #e2eff6;
+  --ra-autocomplete-font-size: #{$font-size-base * 1.1};
+
   .thumbnail {
     display: inline-block;
   }
@@ -19,10 +48,10 @@ body.rails_admin {
 
       img {
         position: absolute;
-        top: calc((40px - $avatar-size) / 2);
+        top: calc((40px - var(--ra-avatar-size)) / 2);
 
         & + span {
-          margin-left: ($avatar-size + 5px);
+          margin-left: calc(var(--ra-avatar-size) + 5px);
         }
       }
     }
@@ -36,24 +65,24 @@ body.rails_admin {
       margin-top: calc(#{$grid-gutter-width} / 2);
       padding: 3px calc(#{$grid-gutter-width} / 2);
       font-weight: bold;
-      color: $gray-600;
+      color: var(--ra-nav-toggle-color);
     }
 
     .btn-toggle[aria-expanded="true"] {
-      color: $gray-700;
+      color: var(--ra-nav-toggle-active-color);
     }
 
     .btn-toggle-nav > li > a {
       padding: calc(#{$navbar-padding-y} / 2) calc(#{$grid-gutter-width} / 2);
 
       &.active {
-        background-color: map-get($theme-colors, primary);
-        color: color-contrast(map-get($theme-colors, primary));
+        background-color: var(--ra-nav-link-active-bg);
+        color: var(--ra-nav-link-active-color);
       }
 
       &:hover {
-        background-color: map-get($theme-colors, primary);
-        color: color-contrast(map-get($theme-colors, primary));
+        background-color: var(--ra-nav-link-active-bg);
+        color: var(--ra-nav-link-active-color);
       }
 
       &.nav-level-1 {
@@ -80,7 +109,7 @@ body.rails_admin {
     /* nested forms */
     .tab-content {
       .tab-pane {
-        border-left: 5px solid map-get($theme-colors, primary);
+        border-left: 5px solid var(--ra-nested-form-border-color);
         position: relative;
 
         fieldset {
@@ -111,7 +140,7 @@ body.rails_admin {
 
     /* double nesting, guys. Easy. */
     .tab-content .tab-content .tab-pane {
-      border-color: lighten(map-get($theme-colors, info), 20%);
+      border-color: var(--ra-nested-form-border-color-2);
       margin-left: 10px;
 
       .form-group {
@@ -121,7 +150,7 @@ body.rails_admin {
 
     /* triple nesting!*/
     .tab-content .tab-content .tab-content .tab-pane {
-      border-color: lighten(map-get($theme-colors, warning), 30%);
+      border-color: var(--ra-nested-form-border-color-3);
       margin-left: 20px;
 
       .form-group {
@@ -131,7 +160,7 @@ body.rails_admin {
 
     /* totally awesome! nesting on 4 levels! */
     .tab-content .tab-content .tab-content .tab-content .tab-pane {
-      border-color: lighten(map-get($theme-colors, success), 40%);
+      border-color: var(--ra-nested-form-border-color-4);
       margin-left: 30px;
 
       .form-group {
@@ -183,13 +212,13 @@ body.rails_admin {
         margin-right: -16px;
         border-width: 0 4px 4px;
         border-style: solid;
-        border-color: $dark transparent;
+        border-color: var(--ra-table-sort-caret-color) transparent;
         visibility: hidden;
       }
     }
     .headerSortUp,
     .headerSortDown {
-      background-color: rgba($info, 0.25);
+      background-color: var(--ra-table-sort-active-bg);
       text-shadow: 0 1px 1px rgba($light, 0.75);
     }
     .header:hover {
@@ -209,7 +238,7 @@ body.rails_admin {
         border-bottom: none;
         border-left: 4px solid transparent;
         border-right: 4px solid transparent;
-        border-top: 4px solid $dark;
+        border-top: 4px solid var(--ra-table-sort-caret-color);
         visibility: visible;
         @include box-shadow(none);
         opacity: 60;
@@ -299,21 +328,15 @@ body.rails_admin {
     }
 
     // Remove transparency on sticky cells.
-    $table-bg-default: if(
-      $table-bg == transparent,
-      if($body-bg == transparent, #fff, $body-bg),
-      $table-bg
-    ) !default;
     .table-striped > tbody > tr > td,
     .table-striped > thead > tr > th {
-      background-color: $table-bg-default;
+      background-color: var(--ra-table-sticky-bg);
     }
-    $table-bg-header-sort: #e2eff6 !default;
     .table .sticky,
     .table .last {
       &.headerSortUp,
       &.headerSortDown {
-        background-color: $table-bg-header-sort;
+        background-color: var(--ra-table-sort-sticky-bg);
       }
     }
   }

data/src/rails_admin/styles/base.scss

@@ -12,7 +12,31 @@
 /*** Font-awesome ***/
 
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default;
-@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/functions";
+@import "@fortawesome/fontawesome-free/scss/variables";
+
+// Font Awesome's scss/solid, inlined so we can ship the woff2 face without the
+// .ttf fallback (388 KB of dead weight - every browser that can run RailsAdmin
+// supports woff2). Keep in sync with node_modules/@fortawesome/fontawesome-free/scss/solid.scss.
+:root,
+:host {
+  --#{$fa-css-prefix}-style-family-classic: "#{$fa-style-family}";
+  --#{$fa-css-prefix}-font-solid: normal 900 1em/1 "#{$fa-style-family}";
+}
+
+@font-face {
+  font-family: "Font Awesome 6 Free";
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2");
+}
+
+.fas,
+.#{$fa-css-prefix}-solid {
+  font-weight: 900;
+}
+
 @import "@fortawesome/fontawesome-free/scss/fontawesome";
 
 /***  Bootstrap  ***/

data/src/rails_admin/styles/filtering-select.scss

@@ -1,68 +1,29 @@
-.ui-widget {
-  font-family: Arial, sans-serif;
-  font-size: 1.1em;
-}
-.ui-widget .ui-widget {
-  font-size: 1em;
-}
-.ui-widget input,
-.ui-widget select,
-.ui-widget textarea,
-.ui-widget button {
-  font-family: Arial, sans-serif;
-  font-size: 1em;
-}
-.ui-widget-content {
-  border: 1px solid #b6b6b6;
-  background: #ffffff;
-  color: #4f4f4f;
-}
-.ui-widget-content a {
-  color: #4f4f4f;
-}
-
-.ui-menu {
-  list-style: none;
-  padding: 2px;
-  margin: 0;
-  display: block;
-  float: left;
-}
-.ui-menu .ui-menu {
-  margin-top: -3px;
-}
-.ui-menu .ui-menu-item {
-  margin: 0;
-  padding: 0;
-  zoom: 1;
-  float: left;
-  clear: left;
-  width: 100%;
-}
-.ui-menu .ui-menu-item a {
-  text-decoration: none;
-  display: block;
-  padding: 0.2em 0.4em;
-  line-height: 1.5;
-  zoom: 1;
-}
-.ui-menu .ui-menu-item a.ui-state-hover,
-.ui-menu .ui-menu-item a.ui-state-active {
-  font-weight: normal;
-  margin: -1px;
-  background: #5f83b9;
-  color: #ffffff;
-  text-shadow: 0px 1px 1px #234386;
-  border-color: #466086;
-  border-radius: 0;
-}
-
+/*
+  The jQuery UI autocomplete menu. filtering-select.js renders it with Bootstrap's
+  .dropdown-menu / .dropdown-item classes, so only what Bootstrap does not cover
+  belongs here.
+*/
 .ui-autocomplete {
-  position: absolute;
   cursor: default;
+
+  /* A touch larger than the surrounding form, as the pre-Bootstrap menu was. */
+  --bs-dropdown-font-size: var(--ra-autocomplete-font-size);
+
+  /* Above .modal (1055), so the menu is usable in the nested-form modal. */
   z-index: 1056 !important;
-  border-radius: 0;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+
+  /* Bootstrap only emits this with $enable-shadows; the menu floats over the form. */
+  box-shadow: var(--bs-dropdown-box-shadow);
+
+  /*
+    jQuery UI marks the focused item - by keyboard or by pointer - as
+    .ui-state-active rather than leaving it to :hover, so it takes the styling
+    Bootstrap gives .dropdown-item.active.
+  */
+  .dropdown-item.ui-state-active {
+    color: var(--bs-dropdown-link-active-color);
+    background-color: var(--bs-dropdown-link-active-bg);
+  }
 }
 
 .ui-helper-hidden-accessible {

data/src/rails_admin/ui.js

@@ -1,6 +1,6 @@
 import jQuery from "jquery";
 import "jquery-ui/ui/effect.js";
-import I18n from "./i18n";
+import I18n from "./i18n.js";
 
 (function ($) {
   $(document).on("click", "#list input.toggle", function () {

data/src/rails_admin/vendor/jquery_nested_form.js

@@ -48,7 +48,7 @@ import jQuery from 'jquery';
       // Make a unique ID for the new child
       var regexp  = new RegExp('new_' + assoc, 'g');
       var new_id  = this.newId();
-      content     = $.trim(content.replace(regexp, new_id));
+      content     = content.replace(regexp, new_id).trim();
 
       var field = this.insertFields(content, assoc, link);
       // bubble up event upto document (through form)
@@ -71,13 +71,13 @@ import jQuery from 'jquery';
     removeFields: function(e) {
       var $link = $(e.currentTarget),
           assoc = $link.data('association'); // Name of child to be removed
-      
+
       var hiddenField = $link.prev('input[type=hidden]');
       hiddenField.val('1');
-      
+
       var field = $link.closest('.fields');
       field.hide();
-      
+
       field
         .trigger({ type: 'nested:fieldRemoved', field: field })
         .trigger({ type: 'nested:fieldRemoved:' + assoc, field: field });

data/src/rails_admin/widgets.js

@@ -1,10 +1,18 @@
 import jQuery from "jquery";
 import "jquery-ui/ui/widgets/sortable.js";
 import * as bootstrap from "bootstrap";
-import flatpickr from "flatpickr";
-import I18n from "./i18n";
+import flatpickr from "./flatpickr.js";
+import I18n from "./i18n.js";
 
 (function ($) {
+  // Editors write back to their textarea on native submit, which modals skip.
+  function flushBeforeRemoteSubmit(element, flush) {
+    var form = element.closest("form");
+    if (form) {
+      form.addEventListener("rails_admin.before_remote_submit", flush);
+    }
+  }
+
   document.addEventListener("rails_admin.dom_ready", function (event) {
     var $editors,
       array,
@@ -267,10 +275,10 @@ import I18n from "./i18n";
           .find("[data-richtext=simplemde]")
           .not(".simplemded")
           .each(function (index, domEle) {
-            var instance_config, options;
+            var instance_config, options, editor;
             options = $(this).data("options");
             instance_config = options.instance_config;
-            new window.SimpleMDE(
+            editor = new window.SimpleMDE(
               $.extend(
                 true,
                 {
@@ -282,7 +290,14 @@ import I18n from "./i18n";
                 instance_config
               )
             );
+            flushBeforeRemoteSubmit(this, function () {
+              editor.codemirror.save();
+            });
             $(this).addClass("simplemded");
+            // CodeMirror mismeasures itself while hidden; refresh() once it's actually laid out.
+            new ResizeObserver(function () {
+              editor.codemirror.refresh();
+            }).observe(editor.codemirror.getWrapperElement());
           });
       };
       $editors = content.find("[data-richtext=simplemde]").not(".simplemded");
@@ -315,7 +330,13 @@ import I18n from "./i18n";
                 instance.destroy(true);
               }
             } catch (error1) {}
-            window.CKEDITOR.replace(this, $(this).data("options").options);
+            var editor = window.CKEDITOR.replace(
+              this,
+              $(this).data("options").options
+            );
+            flushBeforeRemoteSubmit(this, function () {
+              editor.updateElement();
+            });
             $(this).addClass("ckeditored");
           });
       };
@@ -351,7 +372,13 @@ import I18n from "./i18n";
                     options["locations"]["theme"] +
                     '" rel="stylesheet" media="all" type="text/css">'
                 );
-                CodeMirror.fromTextArea(textarea, options["options"]);
+                var editor = CodeMirror.fromTextArea(
+                  textarea,
+                  options["options"]
+                );
+                flushBeforeRemoteSubmit(textarea, function () {
+                  editor.save();
+                });
                 return $(textarea).addClass("codemirrored");
               }
             );
@@ -385,7 +412,10 @@ import I18n from "./i18n";
           return array.each(function () {
             $(this).addClass("bootstrap-wysihtml5ed");
             $(this).closest(".controls").addClass("well");
-            $(this).wysihtml5(config_options);
+            var $textarea = $(this).wysihtml5(config_options);
+            flushBeforeRemoteSubmit(this, function () {
+              $textarea.val($textarea.data("wysihtml5").editor.getValue());
+            });
           });
         };
       })(this);
@@ -395,7 +425,7 @@ import I18n from "./i18n";
       if (array.length) {
         this.array = array;
         options = $(array[0]).data("options");
-        config_options = $.parseJSON(options["config_options"]);
+        config_options = JSON.parse(options["config_options"]);
         if (!window.wysihtml5) {
           $("head").append(
             '<link href="' +
@@ -419,7 +449,7 @@ import I18n from "./i18n";
           return array.each(function () {
             var uploadEnabled;
             options = $(this).data("options");
-            config_options = $.parseJSON(options["config_options"]);
+            config_options = JSON.parse(options["config_options"]);
             if (config_options) {
               if (!config_options["inlineMode"]) {
                 config_options["inlineMode"] = false;
@@ -437,7 +467,10 @@ import I18n from "./i18n";
                 })
               : void 0;
             $(this).addClass("froala-wysiwyged");
-            $(this).froalaEditor(config_options);
+            var $textarea = $(this).froalaEditor(config_options);
+            flushBeforeRemoteSubmit(this, function () {
+              $textarea.val($textarea.froalaEditor("html.get"));
+            });
             if (uploadEnabled) {
               $(this)
                 .on("froalaEditor.image.error", function (e, editor, error) {
@@ -468,7 +501,7 @@ import I18n from "./i18n";
         .not(".froala-wysiwyged");
       if (array.length) {
         options = $(array[0]).data("options");
-        if (!$.isFunction($.fn.editable)) {
+        if (typeof $.fn.editable !== "function") {
           $("head").append(
             '<link href="' +
               options["csspath"] +