Upgrade Bootstrap to 5.1.3 with migrating datetimepicker to Flatpickr (#3455)

* Upgrade Bootstrap to 5.1.3

Closes #3083

* Upgrade vendored Bootstrap as well

Also removed old theming functionality, since existing ones are not compatible with Bootstrap 5

* Migrate datetimepicker widget to flatpickr

* Reflect review and minor fix

- Fix inconsistent breakpoint
- Remove debug stuffs

* Apply form-control-sm to make datepicker field have the same size with other inputs

Co-authored-by: Alex Schmitt <codealchemy@users.noreply.github.com>

* Reflect review suggetions

- Prevent `true` showing up as a css class
- form-control-sm must come with form-control: https://getbootstrap.com/docs/5.1/forms/form-control/#sizing
- btn-small didn't have any effect
- Fix action menu having too narrow gap between icon and text

* Fix invalid closing tag </input>

* Update styles in Export and History action

* Fix spec issue, with removing the workaround

https://github.com/railsadminteam/rails_admin/runs/4747523252?check_suite_focus=true

* Add additional datetime format used somewhere in rails-i18n

* ProvidePlugin is no longer necessary

since all JS dependencies are ES module ready now

Co-authored-by: Alex Schmitt <codealchemy@users.noreply.github.com>

Author: mshibuya

Rakefile

@@ -22,3 +22,14 @@ rescue LoadError
 end
 
 task default: %i[spec rubocop]
+
+namespace :vendorize do
+  desc 'Tasks for vendorizing assets'
+
+  task :flatpickr do
+    Dir.chdir(__dir__)
+    flatpickr = File.read('node_modules/flatpickr/dist/flatpickr.js')
+    locales = Dir.glob('node_modules/flatpickr/dist/l10n/*.js').map { |f| File.read(f) }
+    File.write('vendor/assets/javascripts/rails_admin/flatpickr-with-locales.js', ([flatpickr] + locales).join("\n"))
+  end
+end

app/assets/javascripts/rails_admin.js

@@ -5,9 +5,9 @@
 //=  require 'rails_admin/jquery-ui/effect'
 //=  require 'rails_admin/jquery-ui/widgets/sortable'
 //=  require 'rails_admin/jquery-ui/widgets/autocomplete'
-//=  require 'rails_admin/moment-with-locales'
-//=  require 'rails_admin/bootstrap-datetimepicker'
-//=  require 'rails_admin/bootstrap/bootstrap'
+//=  require 'rails_admin/flatpickr-with-locales'
+//=  require 'rails_admin/popper'
+//=  require 'rails_admin/bootstrap'
 
 //=  require 'rails_admin/filter-box'
 //=  require 'rails_admin/filtering-multiselect'

app/assets/stylesheets/rails_admin.scss

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+
+/***  Variables  ***/
+
+@import "rails_admin/custom/variables";
+@import "rails_admin/styles/base/variables";
+
+/***  Mixins  ***/
+
+@import "rails_admin/styles/base/mixins";
+@import "rails_admin/custom/mixins";
+
+/***  Bootstrap ***/
+
+@import "rails_admin/bootstrap/bootstrap";
+
+/***  Libraries  ***/
+
+@import "rails_admin/flatpickr";
+@import "rails_admin/styles/filtering-select";
+@import "rails_admin/styles/filtering-multiselect";
+@import "rails_admin/styles/widgets";
+
+/*** Font-awesome ***/
+
+@import "rails_admin/font-awesome";
+
+/***  RailsAdmin Theming  ***/
+
+@import "rails_admin/styles/base/theming";
+@import "rails_admin/custom/theming";

app/assets/stylesheets/rails_admin.scss.erb

@@ -28,7 +28,7 @@ def edit_user_link
         content_tag(:span, _current_user.email),
       ].compact.join.html_safe
       if (edit_action = RailsAdmin::Config::Actions.find(:edit, controller: controller, abstract_model: abstract_model, object: _current_user)).try(:authorized?)
-        link_to content, rails_admin.url_for(action: edit_action.action_name, model_name: abstract_model.to_param, id: _current_user.id, controller: 'rails_admin/main')
+        link_to content, rails_admin.url_for(action: edit_action.action_name, model_name: abstract_model.to_param, id: _current_user.id, controller: 'rails_admin/main'), class: 'nav-link'
       else
         content_tag :span, content
       end
@@ -87,7 +87,7 @@ def root_navigation
           url = rails_admin.url_for(action: node.action_name, controller: 'rails_admin/main')
           nav_icon = node.link_icon ? %(<i class="#{node.link_icon}"></i>).html_safe : ''
           content_tag :li do
-            link_to nav_icon + " " + wording_for(:menu, node), url, class: "pjax"
+            link_to nav_icon + " " + wording_for(:menu, node), url, class: "nav-link pjax"
           end
         end.join.html_safe
         label ||= t('admin.misc.root_navigation')
@@ -98,7 +98,7 @@ def root_navigation
 
     def static_navigation
       li_stack = RailsAdmin::Config.navigation_static_links.collect do |title, url|
-        content_tag(:li, link_to(title.to_s, url, target: '_blank', rel: 'noopener noreferrer'))
+        content_tag(:li, link_to(title.to_s, url, target: '_blank', rel: 'noopener noreferrer', class: 'nav-link'))
       end.join
 
       label = RailsAdmin::Config.navigation_static_label || t('admin.misc.navigation_static_label')
@@ -114,7 +114,7 @@ def navigation(parent_groups, nodes, level = 0)
         level_class = " nav-level-#{level}" if level > 0
         nav_icon = node.navigation_icon ? %(<i class="#{node.navigation_icon}"></i>).html_safe : ''
         li = content_tag :li, data: {model: model_param} do
-          link_to nav_icon + node.label_plural, url, class: "pjax#{level_class}"
+          link_to nav_icon + node.label_plural, url, class: "nav-link pjax#{level_class}"
         end
         child_nodes = parent_groups[abstract_model.model_name]
         child_nodes ? li + navigation(parent_groups, child_nodes, level + 1) : li
@@ -130,7 +130,7 @@ def breadcrumb(action = @action, _acc = [])
         parent_actions.collect do |a|
           am = a.send(:eval, 'bindings[:abstract_model]')
           o = a.send(:eval, 'bindings[:object]')
-          content_tag(:li, class: current_action?(a, am, o) && 'active') do
+          content_tag(:li, class: ['breadcrumb-item', current_action?(a, am, o) && 'active']) do
             if current_action?(a, am, o)
               wording_for(:breadcrumb, a, am, o)
             elsif a.http_methods.include?(:get)
@@ -151,19 +151,18 @@ def menu_for(parent, abstract_model = nil, object = nil, only_icon = false)
       actions = actions(parent, abstract_model, object).select { |a| a.http_methods.include?(:get) && a.show_in_menu }
       actions.collect do |action|
         wording = wording_for(:menu, action)
-        li_class = ['icon', "#{action.key}_#{parent}_link"].
-                   concat(current_action?(action) ? ['active'] : []).
+        li_class = ['nav-item', 'icon', "#{action.key}_#{parent}_link"].
                    concat(action.enabled? ? [] : ['disabled'])
         content_tag(:li, {class: li_class}.merge(only_icon ? {title: wording, rel: 'tooltip'} : {})) do
-          label = content_tag(:i, '', {class: action.link_icon}) + content_tag(:span, wording, (only_icon ? {style: 'display:none'} : {}))
+          label = content_tag(:i, '', {class: action.link_icon}) + ' ' + content_tag(:span, wording, (only_icon ? {style: 'display:none'} : {}))
           if action.enabled? || !only_icon
             href =
               if action.enabled?
                 rails_admin.url_for(action: action.action_name, controller: 'rails_admin/main', model_name: abstract_model.try(:to_param), id: (object.try(:persisted?) && object.try(:id) || nil))
               else
                 'javascript:void(0)'
               end
-            content_tag(:a, label, {href: href, target: action.link_target}.merge(action.pjax? ? {class: ['pjax']} : {}))
+            content_tag(:a, label, {href: href, target: action.link_target, class: ['nav-link', action.pjax? && 'pjax', current_action?(action) && 'active', !action.enabled? && 'disabled'].compact})
           else
             content_tag(:span, label)
           end
@@ -175,12 +174,12 @@ def bulk_menu(abstract_model = @abstract_model)
       actions = actions(:bulkable, abstract_model)
       return '' if actions.empty?
 
-      content_tag :li, class: 'dropdown', style: 'float:right' do
-        content_tag(:a, class: 'dropdown-toggle', data: {toggle: 'dropdown'}, href: '#') { t('admin.misc.bulk_menu_title').html_safe + ' ' + '<b class="caret"></b>'.html_safe } +
+      content_tag :li, class: 'nav-item dropdown dropdown-menu-end' do
+        content_tag(:a, class: 'nav-link dropdown-toggle', data: {'bs-toggle': 'dropdown'}, href: '#') { t('admin.misc.bulk_menu_title').html_safe + ' ' + '<b class="caret"></b>'.html_safe } +
           content_tag(:ul, class: 'dropdown-menu', style: 'left:auto; right:0;') do
             actions.collect do |action|
               content_tag :li do
-                link_to wording_for(:bulk_link, action, abstract_model), '#', class: 'bulk-link', data: {action: action.action_name}
+                link_to wording_for(:bulk_link, action, abstract_model), '#', class: 'dropdown-item bulk-link', data: {action: action.action_name}
               end
             end.join.html_safe
           end

app/helpers/rails_admin/application_helper.rb

@@ -43,9 +43,9 @@ def field_wrapper_for(field, nested_in)
       # do not show nested field if the target is the origin
       return if nested_field_association?(field, nested_in)
 
-      @template.content_tag(:div, class: "form-group control-group #{field.type_css_class} #{field.css_class} #{'error' if field.errors.present?}", id: "#{dom_id(field)}_field") do
+      @template.content_tag(:div, class: "control-group row mb-3 #{field.type_css_class} #{field.css_class} #{'error' if field.errors.present?}", id: "#{dom_id(field)}_field") do
         if field.label
-          label(field.method_name, field.label, class: 'col-sm-2 control-label') +
+          label(field.method_name, field.label, class: 'col-sm-2 col-form-label text-md-end') +
             (field.nested_form ? field_for(field) : input_for(field))
         else
           field.nested_form ? field_for(field) : input_for(field)
@@ -68,7 +68,7 @@ def errors_for(field)
     end
 
     def help_for(field)
-      field.help.present? ? @template.content_tag(:span, field.help, class: 'help-block') : ''.html_safe
+      field.help.present? ? @template.content_tag(:div, field.help, class: 'form-text') : ''.html_safe
     end
 
     def field_for(field)

app/helpers/rails_admin/form_builder.rb

@@ -52,7 +52,7 @@ def ordered_filter_options
           when :enum
             options[:select_options] = options_for_select(field.with(object: @abstract_model.model.new).enum, filter_hash['v'])
           when :date, :datetime, :time
-            options[:datetimepicker_format] = field.momentjs_format
+            options[:datetimepicker_options] = field.datepicker_options
           end
           options[:label] = field.label
           options[:name]  = field.name

app/helpers/rails_admin/main_helper.rb

@@ -1,5 +1,5 @@
-<li class="disabled">
-  <a href="#">
+<li class="page-item disabled">
+  <a href="#" class="page-link">
     <%= raw(t 'admin.pagination.truncate') %>
   </a>
 </li>

app/views/kaminari/ra-twitter-bootstrap/_gap.html.erb

@@ -1,9 +1,9 @@
 <% if current_page.last? %>
-  <li class="next disabled">
-    <%= link_to raw(t 'admin.pagination.next'), '#' %>
+  <li class="page-item next disabled">
+    <%= link_to raw(t 'admin.pagination.next'), '#', class: 'page-link' %>
   </li>
 <% else %>
-  <li class="next">
-    <%= link_to raw(t 'admin.pagination.next'), url, class: (remote ? 'pjax' : '') %>
+  <li class="page-item next">
+    <%= link_to raw(t 'admin.pagination.next'), url, class: ['page-link', ('pjax' if remote)].compact %>
   </li>
 <% end %>

app/views/kaminari/ra-twitter-bootstrap/_next_page.html.erb

@@ -1,9 +1,9 @@
 <% if page.current? %>
-  <li class="active">
-    <%= link_to page, url, class: (remote ? 'pjax' : '') %>
+  <li class="page-item active">
+    <%= link_to page, url, class: ['page-link', ('pjax' if remote)].compact %>
   </li>
 <% else %>
-  <li>
-    <%= link_to page, url, class: (remote ? 'pjax' : '') %>
+  <li class="page-item">
+    <%= link_to page, url, class: ['page-link', ('pjax' if remote)].compact %>
   </li>
 <% end %>