[B5] Exports: list and download pages

corehq/apps/export/forms.py

@@ -932,9 +932,6 @@ def __init__(self, domain_object, *args, **kwargs):
         self.domain_object = domain_object
         super(EmwfFilterFormExport, self).__init__(domain_object, *args, **kwargs)
 
-        self.helper.label_class = 'col-sm-3 col-md-2 col-lg-2'
-        self.helper.field_class = 'col-sm-9 col-md-8 col-lg-3'
-
     def get_model_filter(self, mobile_user_and_group_slugs, can_access_all_locations, accessible_location_ids):
         """
         :param mobile_user_and_group_slugs: slug from request like
@@ -988,8 +985,6 @@ def __init__(self, domain_object, timezone, *args, **kwargs):
         self.timezone = timezone
         super(FilterCaseESExportDownloadForm, self).__init__(domain_object, *args, **kwargs)
 
-        self.helper.label_class = 'col-sm-3 col-md-2 col-lg-2'
-        self.helper.field_class = 'col-sm-9 col-md-8 col-lg-3'
         # update date_range filter's initial values to span the entirety of
         # the domain's submission range
         default_datespan = datespan_from_beginning(self.domain_object, self.timezone)
@@ -1046,8 +1041,6 @@ def __init__(self, domain_object, timezone, *args, **kwargs):
         self.timezone = timezone
         super(FilterSmsESExportDownloadForm, self).__init__(domain_object, *args, **kwargs)
 
-        self.helper.label_class = 'col-sm-3 col-md-2 col-lg-2'
-        self.helper.field_class = 'col-sm-9 col-md-8 col-lg-3'
         # update date_range filter's initial values to span the entirety of
         # the domain's submission range
         default_datespan = datespan_from_beginning(self.domain_object, self.timezone)

corehq/apps/export/static/export/js/bootstrap5/download_export.js

@@ -13,26 +13,27 @@
     'underscore',
     'hqwebapp/js/assert_properties',
     'hqwebapp/js/initial_page_data',
+    'hqwebapp/js/tempus_dominus',
     'analytix/js/google',
     'analytix/js/kissmetrix',
     'reports/js/filters/bootstrap5/main',
     'reports/js/reports.util',
     'export/js/utils',
-    'hqwebapp/js/daterangepicker.config',   // createDateRangePicker
     'jquery.cookie/jquery.cookie',      // for resuming export downloads on refresh
 ], function (
     $,
     ko,
     _,
     assertProperties,
     initialPageData,
+    hqTempusDominus,
     googleAnalytics,
     kissmetricsAnalytics,
     reportFilters,
     reportUtils,
     exportUtils
 ) {
     'use strict';
 
     var downloadFormModel = function (options) {
         assertProperties.assert(options, [
@@ -435,12 +436,7 @@
 
         $(".hqwebapp-datespan").each(function () {
             var $el = $(this).find("input");
-            $el.createDateRangePicker(  /* todo B5: plugin:createDateRangePicker */
-                $el.data("labels"),
-                $el.data("separator"),
-                $el.data('startDate'),
-                $el.data('endDate')
-            );
+            hqTempusDominus.createDateRangePicker($el.get(0), $el.data("separator"));
         });
     });
 });

corehq/apps/export/static/export/js/bootstrap5/export_list.js

@@ -16,6 +16,7 @@
     'knockout',
     'underscore',
     'hqwebapp/js/assert_properties',
+    'es6!hqwebapp/js/bootstrap5_loader',
     'clipboard/dist/clipboard',
     'analytix/js/google',
     'analytix/js/kissmetrix',
@@ -28,6 +29,7 @@
     ko,
     _,
     assertProperties,
+    bootstrap,
     Clipboard,
     googleAnalytics,
     kissmetricsAnalytics,
@@ -181,7 +183,8 @@
                         self.isAutoRebuildEnabled(data.isAutoRebuildEnabled);
                     }
                     $button.enableButton();
-                    $('#modalEnableDisableAutoRefresh-' + self.id() + '-' + self.emailedExport.groupId()).modal('hide');  /* todo B5: plugin:modal */
+                    const modalId = 'modalEnableDisableAutoRefresh-' + self.id() + '-' + self.emailedExport.groupId();
+                    bootstrap.Modal.getInstance('#' + modalId).hide();
                 },
             });
         };
@@ -261,7 +264,9 @@
         };
 
         self.updateData = function () {
-            $('#modalRefreshExportConfirm-' + exportId + '-' + self.groupId()).modal('hide');  /* todo B5: plugin:modal */
+            const modalId = 'modalRefreshExportConfirm-' + exportId + '-' + self.groupId();
+            bootstrap.Modal.getInstance('#' + modalId).hide();
+
             self.updatingData(true);
             $.ajax({
                 method: 'POST',
@@ -396,7 +401,7 @@
             'isOData',
             'modelType',
             'urls',
             'exportOwnershipEnabled'
         ]);
 
         var self = {};
@@ -462,29 +467,12 @@
             return true;
         };
 
-        var tooltipText = "";
-        if (self.isOData || self.isFeed) {
-            tooltipText = gettext("All of the selected feeds will be deleted.");
-        } else {
-            tooltipText = gettext("All of the selected exports will be deleted.");
-        }
-
-        $(function () {
-            $('[data-toggle="tooltip-bulkExport"]').attr('title',
-                gettext("All of the selected exports will be collected for download to a " +
-                "single Excel file, with each export as a separate sheet.")).tooltip();  /* todo B5: plugin:tooltip */
-        });
-
-        $(function () {
-            $('[data-toggle="tooltip-bulkDelete"]').attr('title', tooltipText).tooltip({trigger: 'hover'});  /* todo B5: plugin:tooltip */
-        });
-
         self.isMultiple = ko.computed(function () {
             if (self.bulkDeleteList().length > 1) { return true; }
             return false;
         });
 
-        self.BulkExportDelete = function (observable, event) {
+        self.BulkExportDelete = function () {
             var count = self.bulkExportDownloadCount;
             self.panels().forEach(panel => panel.isBulkDeleting(true));
             var bulkDelete = function () {
@@ -680,7 +668,7 @@
                         if (export_.hasEmailedExport) {
                             export_.emailedExport.pollProgressBar();
                         }
-                        self.$filterModal.modal('hide');  /* todo B5: plugin:modal */
+                        bootstrap.Modal.getInstance(self.$filterModal.get(0)).hide();
                     } else {
                         self.formSubmitErrorMessage(data.error);
                     }

corehq/apps/export/templates/export/bootstrap5/download_export.html

@@ -4,36 +4,6 @@
 {% load hq_shared_tags %}
 {% load compress %}
 
-{% block stylesheets %}
-  <style type="text/css">
-    .form-notice-container {
-      position: relative;
-    }
-    .form-notice {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(255, 255, 255, 0.6);
-      /*The z-index is set to cover date input text-box with class .input-group .form-control */
-      /*Its z-index is set to 2 by bootstrap, so making this 3 */
-      z-index: 3;
-
-    }
-    .form-notice .label {
-      display: block;
-    }
-    .progress-exports {
-      margin-bottom: 2px;
-      margin-top: 6px;
-    }
-    .form-actions-exports {
-      margin-bottom: 30px;
-    }
-  </style>
-{% endblock stylesheets %}
-
 {% requirejs_main_b5 'export/js/bootstrap5/download_export' %}
 
 {% block page_title %}

corehq/apps/export/templates/export/bootstrap5/export_list.html

@@ -1,4 +1,4 @@
-{%  extends 'hqwebapp/bootstrap3/base_section.html' %}
+{%  extends 'hqwebapp/bootstrap5/base_section.html' %}
 {% load crispy_forms_tags %}
 {% load i18n %}
 {% load hq_shared_tags %}

corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html

@@ -3,8 +3,7 @@
 <div data-bind="attr: {id: 'bulk-delete-export-modal'}" class="modal fade">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header" style="color:black;">  {# todo B5: css:modal-header, inline style #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  {# todo B5: css:close #}
+      <div class="modal-header">
         <h4 class="modal-title">
           <!-- ko if: isOData || isFeed -->
             <!-- ko if: isMultiple -->
@@ -27,8 +26,9 @@ <h4 class="modal-title">
             <!-- /ko -->
           <!-- /ko -->
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
-      <div class="modal-body" style="color:black;">  {# todo B5: inline style #}
+      <div class="modal-body">
         <p>
           <!-- ko if: isOData || isFeed -->
             <!-- ko if: isMultiple -->

corehq/apps/export/templates/export/dialogs/bootstrap5/delete_custom_export_dialog.html

@@ -3,8 +3,7 @@
 <div data-bind="attr: {id: 'delete-export-modal-' + id()}" class="modal fade">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header">  {# todo B5: css:modal-header #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  {# todo B5: css:close #}
+      <div class="modal-header">
         <h4 class="modal-title">
           <!-- ko if: isOData() -->
             {% blocktrans %}
@@ -17,6 +16,7 @@ <h4 class="modal-title">
             {% endblocktrans %}
           <!-- /ko -->
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <form name="drop_report" data-bind="attr: {action: deleteUrl}" method="post">
         {% csrf_token %}

corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html

@@ -3,17 +3,15 @@
 <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deleted-applications">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <div class="modal-header">  {# todo B5: css:modal-header #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  {# todo B5: css:close #}
-          <span aria-hidden="true">&times;</span>
-        </button>
+      <div class="modal-header">
         <h4 class="modal-title">
           {% if export_instance.type == 'form' %}
             {% trans "Show Deleted Questions" %}
           {% else %}
             {% trans "Show Deleted Properties" %}
           {% endif %}
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <div class="modal-body">
         <p>

corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html

@@ -3,13 +3,11 @@
 <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deprecated-properties">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <div class="modal-header">  {# todo B5: css:modal-header #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  {# todo B5: css:close #}
-          <span aria-hidden="true">&times;</span>
-        </button>
+      <div class="modal-header">
         <h4 class="modal-title">
           {% trans "Show Deprecated Properties" %}
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <div class="modal-body">
         <p>

corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html

@@ -1,31 +1,27 @@
 {% load i18n %}
-<div data-bind="visible: bulkExportDownloadCount()">
-  <div class="float-end" data-bs-toggle="tooltip-bulkDelete" data-placement="top">
-    <input name="delete_list" type="hidden"/>
-    <p style="float:right">  {# todo B5: inline style #}
-      <a class="btn btn-outline-danger btn-primary"
-         data-bs-toggle="modal"
-         data-bind="attr: {
-                      href: '#bulk-delete-export-modal'
-                    }">
-        <!-- ko if: isOData || isFeed -->
-          <!-- ko if: isMultiple -->
-            {% trans "Delete Selected Feeds" %}
-          <!-- /ko -->
-          <!-- ko if: !isMultiple() -->
-            {% trans "Delete Selected Feed" %}
-          <!-- /ko -->
-        <!-- /ko -->
-        <!-- ko if: !isOData && !isFeed -->
-          <!-- ko if: isMultiple -->
-            {% trans "Delete Selected Exports" %}
-          <!-- /ko -->
-          <!-- ko if: !isMultiple() -->
-            {% trans "Delete Selected Export" %}
-          <!-- /ko -->
-        <!-- /ko -->
-      </a>
-      {% include "export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html" %}
-    </p>
-  </div>
-</div>
+<span data-bind="visible: bulkExportDownloadCount()">
+  <input name="delete_list" type="hidden"/>
+  <a class="btn btn-outline-danger"
+     data-bs-toggle="modal"
+     data-bind="attr: {
+                  href: '#bulk-delete-export-modal'
+                }">
+    <!-- ko if: isOData || isFeed -->
+      <!-- ko if: isMultiple -->
+        {% trans "Delete Selected Feeds" %}
+      <!-- /ko -->
+      <!-- ko if: !isMultiple() -->
+        {% trans "Delete Selected Feed" %}
+      <!-- /ko -->
+    <!-- /ko -->
+    <!-- ko if: !isOData && !isFeed -->
+      <!-- ko if: isMultiple -->
+        {% trans "Delete Selected Exports" %}
+      <!-- /ko -->
+      <!-- ko if: !isMultiple() -->
+        {% trans "Delete Selected Export" %}
+      <!-- /ko -->
+    <!-- /ko -->
+  </a>
+  {% include "export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html" %}
+</span>

corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html

@@ -1,24 +1,19 @@
 {% load i18n %}
-<div data-bind="visible: bulkExportDownloadCount()"
-     style="float:right; margin-left:8px; margin-bottom:8px">  {# todo B5: inline style #}
-  <form class="form form-inline" method="post"  {# todo B5: css:form-inline #}
+<span class="d-inline-block ms-2" data-bind="visible: bulkExportDownloadCount()">
+  <form class="form d-inline" method="post"
         data-bind="submit: submitBulkExportDownload"
         action="{{ bulk_download_url }}">
     {% csrf_token %}
-    <div style="min-width:110px;" data-bs-toggle="tooltip-bulkExport" data-container=".tooltip-bulk-export" data-placement="top">  {# todo B5: inline style #}
-      <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
-      <button type="submit"
-              class="btn btn-primary tooltip-bulk-export"
-              style="width: 100%;">  {# todo B5: inline style #}
-        {% trans 'Bulk Export' %}
-        (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
-      </button>
-    </div>
+    <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
+    <button type="submit"
+            class="btn btn-primary">
+      {% trans 'Bulk Export' %}
+      (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
+    </button>
+    <span class="hq-help-template"
+          data-title="{% trans "Bulk Export" %}"
+          data-content="{% trans "All of the selected exports will be collected for download to a single Excel file, with each export as a separate sheet." %}"
+          data-placement="left"
+    ></span>
   </form>
-</div>
-
-<style>
-.tooltip-bulk-export .tooltip .tooltip-inner {
-  margin-right: 10px;
-}
-</style>
+</span>

corehq/apps/export/templates/export/partials/bootstrap5/export_download_prepare.html

@@ -2,28 +2,28 @@
 {% load i18n %}
 {% load hq_shared_tags %}
 
-<form class="form form-horizontal form-notice-container" name="exportFiltersForm" data-bind="submit: prepareExport">
-  <div class="form-notice-container">
+<form class="form form-horizontal" name="exportFiltersForm" data-bind="submit: prepareExport">
+  <div class="position-relative">
     {% if dynamic_filters %}
-      <div class="form-group"  {# todo B5: css:form-group #}
-           data-bind="allowDescendantBindings: false"> {# IMPORTANT: needed because some of the dynamic_filters have their own ko bindings #}
+      <div class="mb-3" data-bind="allowDescendantBindings: false"> {# IMPORTANT: needed because some of the dynamic_filters have their own ko bindings #}
         {{ dynamic_filters }}
       </div>
     {% endif %}
-    {% crispy download_export_form %}  {# todo B5: check crispy #}
-    <div class="form-notice" data-bind="visible: downloadInProgress()">
+    {% crispy download_export_form %}
+    <div class="form-notice position-absolute top-0 start-0 bottom-0 end-0 opacity-75 bg-white"
+         data-bind="visible: downloadInProgress()">
       <div class="row">
-        <div class="col-md-9 col-xl-5 offset-md-3">
-          <div class="badge text-bg-secondary label-lg">
+        <div class="col-md-9 col-xl-5">
+          <div class="badge text-bg-secondary label-lg bg-secondary">
             <i class="fa fa-info-circle"></i>
             {% trans "Filters inactive while download in progress. " %}
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div class="form-actions form-actions-exports" data-bind="visible: !downloadInProgress()">
-    <div class="col-md-9 offset-md-3">
+  <div data-bind="visible: !downloadInProgress()">
+    <div class="col-md-9">
       <div class="alert alert-warning" data-bind="visible: prepareExportError()">
         <i class="fa-solid fa-triangle-exclamation"></i>
         <span data-bind="text: prepareExportError"></span>