From 9f648671f46216ff93092c663d4ad8c01d035edd Mon Sep 17 00:00:00 2001
From: Amit Phulera <amitphulera999@gmail.com>
Date: Tue, 17 Sep 2024 09:13:34 +0300
Subject: [PATCH 01/16] update BaseExportView to use b5 templates

---
 corehq/apps/export/views/new.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/corehq/apps/export/views/new.py b/corehq/apps/export/views/new.py
index f92c11ac1a5d..9a1c79e8c710 100644
--- a/corehq/apps/export/views/new.py
+++ b/corehq/apps/export/views/new.py
@@ -15,6 +15,7 @@
 from memoized import memoized
 
 from corehq.apps.accounting.decorators import requires_privilege_with_fallback
+from corehq.apps.hqwebapp.decorators import use_bootstrap5
 from corehq.apps.reports.analytics.esaccessors import get_case_types_for_domain
 from dimagi.utils.web import json_response
 
@@ -61,9 +62,10 @@
 from corehq.apps.data_dictionary.models import CaseProperty
 
 
+@method_decorator(use_bootstrap5, name='dispatch')
 class BaseExportView(BaseProjectDataView):
     """Base class for all create and edit export views"""
-    template_name = 'export/bootstrap3/customize_export_new.html'
+    template_name = 'export/bootstrap5/customize_export_new.html'
     export_type = None
     metric_name = None  # Override
     is_async = True

From a9303ccdf097ee710d6562c5e9320226e82470a3 Mon Sep 17 00:00:00 2001
From: Amit Phulera <amitphulera999@gmail.com>
Date: Tue, 17 Sep 2024 09:16:25 +0300
Subject: [PATCH 02/16] update cutomize_export_new.html as per b5
 recommendations

---
 .../bootstrap5/customize_export_new.html      | 220 ++++++++----------
 1 file changed, 102 insertions(+), 118 deletions(-)

diff --git a/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html b/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
index a2d75ce4cba2..dc251a3c36b4 100644
--- a/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
+++ b/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
@@ -15,10 +15,10 @@
   {% initial_page_data 'export_instance' export_instance %}
   {% initial_page_data 'geo_properties' geo_properties %}
 
-  <div id="customize-export" style="display: none;" data-bind="visible: true">  {# todo B5: inline style #}
+  <div id="customize-export" class="d-none" data-bind="css: { 'd-none': false }">
     {# content for multi-select help popover #}
     {% if export_instance.type == 'case' %}
-      <div id="popover_content_wrapper" style="display: none">  {# todo B5: inline style #}
+      <div id="popover_content_wrapper" class="d-none">
         {% blocktrans %}
           These options allow you to configure how CommCare exports data from multi-select questions.
           If you do not want to split the options into multiple columns select the 'plain' option.
@@ -40,16 +40,15 @@
           method="post">
       {% csrf_token %}
       <fieldset>
-        <div class="form-group">  {# todo B5: css:form-group #}
-          <label for="export-type"
-                 class="col-md-3 col-lg-2 form-label">
+        <div class="mb-3">  {# Updated from form-group to mb-3 #}
+          <label for="export-type" class="form-label">
             {% if export_instance.type == 'case' %}
               {% trans "Case Type" %}
             {% else %}
               {% trans "Form" %}
             {% endif %}
           </label>
-          <div class="col-md-9 col-lg-8 col-xl-6">
+
             <p class="form-control-static">
               {% if export_instance.type == 'case' %}
                 {{ export_instance.case_type }}
@@ -57,68 +56,58 @@
                 {{ export_instance.formname }}
               {% endif %}
             </p>
-          </div>
+
         </div>
-        <div class="form-group">  {# todo B5: css:form-group #}
-          <label for="export-name"
-                 class="col-md-3 col-lg-2 form-label">
+        <div class="mb-3">  {# Updated from form-group to mb-3 #}
+          <label for="export-name" class="form-label">
             {{ terminology.name_label }}
           </label>
-          <div class="col-md-9 col-lg-8 col-xl-6">
-            <input type="text"
-                   class="form-control"
-                   id="export-name"
-                   data-bind="value: name" />
-          </div>
+          <input type="text"
+                 class="form-control"
+                 id="export-name"
+                 data-bind="value: name" />
         </div>
-        <div class="form-group">  {# todo B5: css:form-group #}
-          <label for="export-description"
-                 class="col-md-3 col-lg-2 form-label">
+        <div class="mb-3">  {# Updated from form-group to mb-3 #}
+          <label for="export-description" class="form-label">
             {% trans "Description" %}
           </label>
-          <div class="col-md-9 col-lg-8 col-xl-6">
-            <textarea data-bind="value: description"
-                      id="export-description"
-                      class="form-control vertical-resize"
-                      rows="3">
-            </textarea>
-          </div>
+          <textarea data-bind="value: description"
+                    id="export-description"
+                    class="form-control vertical-resize"
+                    rows="3">
+          </textarea>
         </div>
-        <div class="form-group"  {# todo B5: css:form-group #}
+        <div class="mb-3"  {# Updated from form-group to mb-3 #}
              data-bind="css: {
-                          'has-error': hasDisallowedHtmlFormat  {# todo B5: css:has-error #}
-                        },
-                        visible: formatOptions.length > 1">
-          <label for="format-select"
-                 class="col-md-3 col-lg-2 form-label">
+                            'has-error': hasDisallowedHtmlFormat {# todo B5: css:has-error #}
+                          },
+                          visible: formatOptions.length > 1">
+          <label for="format-select" class="form-label">
             {% trans "Default file type" %}
           </label>
-          <div class="col-md-9 col-lg-8 col-xl-6">
-            <select class="form-control"
-                    id="format-select"
-                    data-bind="options: getFormatOptionValues(),
-                               optionsText: getFormatOptionText,
-                               value: export_format">
-            </select>
-            <div class="help-block"
-                 data-bind="visible: hasDisallowedHtmlFormat">
-              {% url "domain_subscription_view" domain as software_plan_url %}
-              {% blocktrans %}
-                Excel Dashboard Integration is only available on the Standard Plan or higher.
-                Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
-              {% endblocktrans %}
-            </div>
+          <select class="form-control"
+                  id="format-select"
+                  data-bind="options: getFormatOptionValues(),
+                             optionsText: getFormatOptionText,
+                             value: export_format">
+          </select>
+          <div class="help-block"
+               data-bind="visible: hasDisallowedHtmlFormat">
+            {% url "domain_subscription_view" domain as software_plan_url %}
+            {% blocktrans %}
+              Excel Dashboard Integration is only available on the Standard Plan or higher.
+              Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
+            {% endblocktrans %}
           </div>
-
         </div>
-        <div class="form-group">  {# todo B5: css:form-group #}
+        <div class="mb-3">  {# Updated from form-group to mb-3 #}
           <div class="offset-md-4 offset-lg-3 offset-xl-2 col-md-6">
             {% if not export_instance.is_odata_config %}
-              <div class="checkbox">  {# todo B5: css:checkbox #}
-                <label>
-                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                         id="transform-dates-checkbox"
-                         data-bind="checked: transform_dates" />
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input"
+                       id="transform-dates-checkbox"
+                       data-bind="checked: transform_dates" />
+                <label class="form-check-label" for="transform-dates-checkbox">
                   <strong>{% trans "Automatically convert dates and multimedia links for Excel" %}</strong><br/>
                   {% blocktrans %}
                     Leaving this checked will ensure dates appear in excel format.
@@ -129,11 +118,11 @@
               </div>
 
               {% if export_instance.type == 'form' and export_instance.export_format != 'html' %}
-              <div class="checkbox">  {# todo B5: css:checkbox #}
-                <label>
-                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                         id="format-data-in-excel-checkbox"
-                         data-bind="checked: format_data_in_excel" />
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input"
+                       id="format-data-in-excel-checkbox"
+                       data-bind="checked: format_data_in_excel" />
+                <label class="form-check-label" for="format-data-in-excel-checkbox">
                   <strong>{% trans "Automatically format cells for Excel 2007+" %}</strong><br/>
                   {% blocktrans %}
                     If this setting is not selected, your export will be in Excel’s general format.
@@ -144,12 +133,12 @@
               </div>
               {% endif %}
 
-              <div class="checkbox">  {# todo B5: css:checkbox #}
-                <label>
-                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                         id="daily-saved-export-checkbox"
-                         data-bind="checked: is_daily_saved_export,
-                                    attr: { disabled: hasHtmlFormat() || !{{ has_daily_saved_export_access|JSON }}}"/>
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input"
+                       id="daily-saved-export-checkbox"
+                       data-bind="checked: is_daily_saved_export,
+                                  attr: { disabled: hasHtmlFormat() || !{{ has_daily_saved_export_access|JSON }}}"/>
+                <label class="form-check-label" for="daily-saved-export-checkbox">
                   {% trans "Create a Daily Saved Export" %}
                 </label>
                 {% if not has_daily_saved_export_access %}
@@ -162,12 +151,12 @@
                 {% endif %}
               </div>
             {% endif %}
-            <div class="checkbox">  {# todo B5: css:checkbox #}
-              <label>
-                <input type="checkbox"  {# todo B5: css:checkbox #}
-                       id="det-config-checkbox"
-                       data-bind="checked: show_det_config_download,
-                                  attr: { disabled: !{{ has_api_access|JSON }} || {{ is_all_case_types_export|JSON }}}" />
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input"
+                     id="det-config-checkbox"
+                     data-bind="checked: show_det_config_download,
+                                attr: { disabled: !{{ has_api_access|JSON }} || {{ is_all_case_types_export|JSON }}}" />
+              <label class="form-check-label" for="det-config-checkbox">
                 {% trans "Generate a Data Export Tool config file" %}
               </label>
               {% trans "Download a Data Export Tool configuration file for this export" as det_help %}
@@ -186,21 +175,21 @@
                 ></span>
             </div>
             {% if export_instance.type == 'form' %}
-              <div class="checkbox"  {# todo B5: css:checkbox #}
+              <div class="form-check"
                    {% if not request|toggle_enabled:'SUPPORT' %}data-bind="visible: initiallyIncludeErrors"{% endif %}>
-                <label>
-                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                         id="include-errors-checkbox"
-                         data-bind="checked: include_errors" />
+                <input type="checkbox" class="form-check-input"
+                       id="include-errors-checkbox"
+                       data-bind="checked: include_errors" />
+                <label class="form-check-label" for="include-errors-checkbox">
                   {% trans "Include duplicates and other unprocessed forms" %}
                 </label>
               </div>
 
-              <div id="split-multiselects-checkbox-div" class="checkbox">  {# todo B5: css:checkbox #}
-                <label>
-                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                         id="split-multiselects-checkbox"
-                         data-bind="checked: split_multiselects" />
+              <div id="split-multiselects-checkbox-div" class="form-check">
+                <input type="checkbox" class="form-check-input"
+                       id="split-multiselects-checkbox"
+                       data-bind="checked: split_multiselects" />
+                <label class="form-check-label" for="split-multiselects-checkbox">
                   {% trans "Expand Checkbox Questions" %}
                 </label>
               </div>
@@ -208,37 +197,34 @@
           </div>
         </div>
         {% if request|request_has_privilege:"EXPORT_OWNERSHIP" %}
-          <div class="form-group"  {# todo B5: css:form-group #}
+          <div class="mb-3"
                data-bind="css: { 'has-warning': hasOtherOwner && sharing() != initialSharing }">
-            <label for="sharing-select"
-                   class="col-md-3 col-lg-2 form-label">
+            <label for="sharing-select" class="form-label">
               {% trans "Sharing" %}
               <span data-bind="makeHqHelp: {description: getSharingHelpText}"></span>
             </label>
-            <div class="col-md-9 col-lg-8 col-xl-6">
-              <select class="form-control" id="sharing-select"
-                      data-bind="options: getSharingOptionValues(),
-                                 optionsText: getSharingOptionText,
-                                 value: sharing">
-              </select>
-              <div class="help-block"
-                   data-bind="visible: hasOtherOwner && sharing() != initialSharing">
-                <div data-bind="visible: sharing() == 'private'">
-                  {% blocktrans %}
-                    This export was created by <strong>{{ owner_name }}</strong>.
-                    If you change the sharing settings for this export you will lose the ability
-                    to view and edit the export.
-                    Only <strong>{{ owner_name }}</strong> will have access to it.
-                  {% endblocktrans %}
-                </div>
-                <div data-bind="visible: sharing() == 'export_only'">
-                  {% blocktrans %}
-                    This export was created by <strong>{{ owner_name }}</strong>.
-                    If you change the sharing settings for this export you will lose the ability
-                    to edit the export.
-                    Only <strong>{{ owner_name }}</strong> will be able to edit it.
-                  {% endblocktrans %}
-                </div>
+            <select class="form-control" id="sharing-select"
+                    data-bind="options: getSharingOptionValues(),
+                               optionsText: getSharingOptionText,
+                               value: sharing">
+            </select>
+            <div class="help-block"
+                 data-bind="visible: hasOtherOwner && sharing() != initialSharing">
+              <div data-bind="visible: sharing() == 'private'">
+                {% blocktrans %}
+                  This export was created by <strong>{{ owner_name }}</strong>.
+                  If you change the sharing settings for this export you will lose the ability
+                  to view and edit the export.
+                  Only <strong>{{ owner_name }}</strong> will have access to it.
+                {% endblocktrans %}
+              </div>
+              <div data-bind="visible: sharing() == 'export_only'">
+                {% blocktrans %}
+                  This export was created by <strong>{{ owner_name }}</strong>.
+                  If you change the sharing settings for this export you will lose the ability
+                  to edit the export.
+                  Only <strong>{{ owner_name }}</strong> will be able to edit it.
+                {% endblocktrans %}
               </div>
             </div>
           </div>
@@ -268,16 +254,14 @@
           <legend>
             {% trans "Privacy Settings" %}
           </legend>
-          <div class="form-group">  {# todo B5: css:form-group #}
-            <label for="is_safe"
-                   class="col-md-3 col-lg-2 form-label"></label>
-            <div class="col-md-9 col-lg-8 col-xl-6 deid-column">
+          <div class="mb-3">
+            <div class="offset-md-4 offset-lg-3 offset-xl-2 col-md-6">
               <div data-bind="visible: isDeidColumnVisible()">
-                <div class="checkbox">  {# todo B5: css:checkbox #}
-                  <label>
-                    <input type="checkbox"  {# todo B5: css:checkbox #}
-                           id="is_deidentified"
-                           data-bind="checked: is_deidentified" />
+                <div class="form-check">
+                  <input type="checkbox" class="form-check-input"
+                         id="is_deidentified"
+                         data-bind="checked: is_deidentified" />
+                  <label class="form-check-label" for="is_deidentified">
                     {% trans "Publish as De-Identified" %}
                   </label>
                 </div>
@@ -331,7 +315,7 @@
           {% endif %}
 
           {% if export_instance.is_odata_config %}
-            <div style="display: d-inline-block"  {# todo B5: inline style #}
+            <div class="d-inline-block"
                  data-bind="if: hasDuplicateColumnLabels">
               <div class="alert alert-danger">
                 {% blocktrans %}

From b6cd9fb42a2b166632d5886a08e5a54e0abe0f57 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 13:59:47 -0400
Subject: [PATCH 03/16] Migrated tooltip usage

---
 .../static/export/js/bootstrap5/customize_export_new.js     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/corehq/apps/export/static/export/js/bootstrap5/customize_export_new.js b/corehq/apps/export/static/export/js/bootstrap5/customize_export_new.js
index 5a0691ef04d5..f340605bef46 100644
--- a/corehq/apps/export/static/export/js/bootstrap5/customize_export_new.js
+++ b/corehq/apps/export/static/export/js/bootstrap5/customize_export_new.js
@@ -1,6 +1,7 @@
 hqDefine('export/js/bootstrap5/customize_export_new', [
     'jquery',
     'knockout',
+    'es6!hqwebapp/js/bootstrap5_loader',
     'hqwebapp/js/initial_page_data',
     'export/js/bootstrap5/models',
     'hqwebapp/js/toggles',
@@ -8,6 +9,7 @@ hqDefine('export/js/bootstrap5/customize_export_new', [
 ], function (
     $,
     ko,
+    bootstrap,
     initialPageData,
     models,
     toggles,
@@ -31,7 +33,9 @@ hqDefine('export/js/bootstrap5/customize_export_new', [
             "build_schema", "/a/---/data/export/build_full_schema/"
         );
         $('#customize-export').koApplyBindings(customExportView);
-        $('.export-tooltip').tooltip();  /* todo B5: plugin:tooltip */
+        $('.export-tooltip').each(function (index, trigger) {
+            new bootstrap.Tooltip(trigger);
+        });
 
         if (toggles.toggleEnabled('SUPPORT_GEO_JSON_EXPORT')) {
             const exportFormat = initialPageData.get('export_instance').export_format;

From e973590add0faab165b484b13a73389ce59e164f Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 15:04:31 -0400
Subject: [PATCH 04/16] Replaced .has-error with B5 classes

---
 .../export/bootstrap5/customize_export_new.html        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html b/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
index dc251a3c36b4..a067d380a1dd 100644
--- a/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
+++ b/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
@@ -78,10 +78,7 @@
           </textarea>
         </div>
         <div class="mb-3"  {# Updated from form-group to mb-3 #}
-             data-bind="css: {
-                            'has-error': hasDisallowedHtmlFormat {# todo B5: css:has-error #}
-                          },
-                          visible: formatOptions.length > 1">
+             data-bind="visible: formatOptions.length > 1">
           <label for="format-select" class="form-label">
             {% trans "Default file type" %}
           </label>
@@ -89,9 +86,10 @@
                   id="format-select"
                   data-bind="options: getFormatOptionValues(),
                              optionsText: getFormatOptionText,
-                             value: export_format">
+                             value: export_format,
+                             css: {'is-invalid': hasDisallowedHtmlFormat}">
           </select>
-          <div class="help-block"
+          <div class="invalid-feedback"
                data-bind="visible: hasDisallowedHtmlFormat">
             {% url "domain_subscription_view" domain as software_plan_url %}
             {% blocktrans %}

From b99322e78a9780671d7a8da2ea3ae9f42cab6e2d Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 17:24:02 -0400
Subject: [PATCH 05/16] Updated docs for has-success and has-error

---
 .../hqwebapp/utils/bootstrap/changes_guide/css-has-error.md     | 2 ++
 .../hqwebapp/utils/bootstrap/changes_guide/css-has-success.md   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-error.md b/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-error.md
index 01fd78028d76..2863565f0e6b 100644
--- a/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-error.md
+++ b/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-error.md
@@ -1,5 +1,7 @@
 Form validation markup has been reworked, which includes dropping `has-error`.
 In general, replace `has-error` and `help-block` with `is-invalid` and `invalid-feedback`.
+Note that `invalid-feedback` must be a **sibling** of an input with `is_invalid`, or it will be hidden.
+This is a change from `has-error`, which was used on containers and would apply to all descendants.
 
 An EXAMPLE for how to apply this change is provided below.
 Please see docs for further details.
diff --git a/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-success.md b/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-success.md
index 2f0c9debec38..2750b719c6ea 100644
--- a/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-success.md
+++ b/corehq/apps/hqwebapp/utils/bootstrap/changes_guide/css-has-success.md
@@ -1,5 +1,7 @@
 Form validation markup has been reworked, which includes dropping `has-success`.
 In general, replace `has-success` and `help-block` with `is-valid` and `valid-feedback`.
+Note that `valid-feedback` must be a **sibling** of an input with `is_valid`, or it will be hidden.
+This is a change from `has-success`, which was used on containers and would apply to all descendants.
 
 An EXAMPLE for how to apply this change is provided below.
 Please see docs for further details.

From fe1e5fd32d1a06e875688b9acddb162676ab3557 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 17:45:16 -0400
Subject: [PATCH 06/16] Updated modals

---
 .../dialogs/bootstrap5/process_deleted_questions.html  | 10 ++++------
 .../bootstrap5/process_deprecated_properties.html      |  6 ++----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html b/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html
index 3ec569aca543..d3a7f3a01a84 100644
--- a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html
+++ b/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html
@@ -3,10 +3,7 @@
 <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" %}
@@ -14,6 +11,7 @@ <h4 class="modal-title">
             {% 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>
@@ -34,8 +32,8 @@ <h4 class="modal-title">
           {% trans "Unable to process applications. Please report an issue if this persists" %}
         </p>
         <div class="spacer"></div>
-        <div class="progress " data-bind="visible: showBuildSchemaProgressBar">  {# todo B5: css:progress #}
-          <div class="progress-bar" role="progressbar" data-bind="
+        <div class="progress" role="progressbar" data-bind="visible: showBuildSchemaProgressBar">
+          <div class="progress-bar" data-bind="
               style: {
                   width: buildSchemaProgress() + '%'
               }
diff --git a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html b/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html
index 2788b8c249b8..96ff213304ab 100644
--- a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html
+++ b/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>

From 175cae13a36748c2f1fe933a9f7064f10b0cb13c Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 17:45:34 -0400
Subject: [PATCH 07/16] Updated CSS classes in JS

---
 corehq/apps/export/static/export/js/utils.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/corehq/apps/export/static/export/js/utils.js b/corehq/apps/export/static/export/js/utils.js
index f9914d37e54c..6efad48bc6e2 100644
--- a/corehq/apps/export/static/export/js/utils.js
+++ b/corehq/apps/export/static/export/js/utils.js
@@ -10,11 +10,11 @@ hqDefine('export/js/utils', [
     constants
 ) {
     var getTagCSSClass = function (tag) {
-        var cls = 'label';
+        var cls = 'badge';
         if (tag === constants.TAG_DELETED) {
-            return cls + ' label-warning';
+            return cls + ' text-bg-warning';
         } else {
-            return cls + ' label-default';
+            return cls + ' text-bg-secondary';
         }
     };
 

From d5b439c610373a0e0a5d9dd538ef39b5b607702f Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 17:46:17 -0400
Subject: [PATCH 08/16] Removed offsets that don't align with the vertical form
 layout (w=1)

---
 .../bootstrap5/customize_export_new.html      | 312 +++++++++---------
 1 file changed, 151 insertions(+), 161 deletions(-)

diff --git a/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html b/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
index a067d380a1dd..65c43e6d10a4 100644
--- a/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
+++ b/corehq/apps/export/templates/export/bootstrap5/customize_export_new.html
@@ -49,13 +49,13 @@
             {% endif %}
           </label>
 
-            <p class="form-control-static">
+            <h4>
               {% if export_instance.type == 'case' %}
                 {{ export_instance.case_type }}
               {% else %}
                 {{ export_instance.formname }}
               {% endif %}
-            </p>
+            </h4>
 
         </div>
         <div class="mb-3">  {# Updated from form-group to mb-3 #}
@@ -99,100 +99,98 @@
           </div>
         </div>
         <div class="mb-3">  {# Updated from form-group to mb-3 #}
-          <div class="offset-md-4 offset-lg-3 offset-xl-2 col-md-6">
-            {% if not export_instance.is_odata_config %}
-              <div class="form-check">
-                <input type="checkbox" class="form-check-input"
-                       id="transform-dates-checkbox"
-                       data-bind="checked: transform_dates" />
-                <label class="form-check-label" for="transform-dates-checkbox">
-                  <strong>{% trans "Automatically convert dates and multimedia links for Excel" %}</strong><br/>
-                  {% blocktrans %}
-                    Leaving this checked will ensure dates appear in excel format.
-                    Otherwise they will appear as a normal text format. This also allows for
-                    hyperlinks to the multimedia captured by your form submission.
-                  {% endblocktrans %}
-                </label>
-              </div>
-
-              {% if export_instance.type == 'form' and export_instance.export_format != 'html' %}
-              <div class="form-check">
-                <input type="checkbox" class="form-check-input"
-                       id="format-data-in-excel-checkbox"
-                       data-bind="checked: format_data_in_excel" />
-                <label class="form-check-label" for="format-data-in-excel-checkbox">
-                  <strong>{% trans "Automatically format cells for Excel 2007+" %}</strong><br/>
-                  {% blocktrans %}
-                    If this setting is not selected, your export will be in Excel’s general format.
-                    If you enable this setting, Excel will format dates, integers, decimals,
-                    Boolean values (True/False) and currencies.
-                  {% endblocktrans %}
-                </label>
-              </div>
-              {% endif %}
+          {% if not export_instance.is_odata_config %}
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input"
+                     id="transform-dates-checkbox"
+                     data-bind="checked: transform_dates" />
+              <label class="form-check-label" for="transform-dates-checkbox">
+                <strong>{% trans "Automatically convert dates and multimedia links for Excel" %}</strong><br/>
+                {% blocktrans %}
+                  Leaving this checked will ensure dates appear in excel format.
+                  Otherwise they will appear as a normal text format. This also allows for
+                  hyperlinks to the multimedia captured by your form submission.
+                {% endblocktrans %}
+              </label>
+            </div>
 
-              <div class="form-check">
-                <input type="checkbox" class="form-check-input"
-                       id="daily-saved-export-checkbox"
-                       data-bind="checked: is_daily_saved_export,
-                                  attr: { disabled: hasHtmlFormat() || !{{ has_daily_saved_export_access|JSON }}}"/>
-                <label class="form-check-label" for="daily-saved-export-checkbox">
-                  {% trans "Create a Daily Saved Export" %}
-                </label>
-                {% if not has_daily_saved_export_access %}
-                  <span class="hq-help-template"
-                        data-content='{% blocktrans %}
-                                        Daily saved exports are only available on the Standard Plan or higher.
-                                        Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
-                                      {% endblocktrans %}'
-                  ></span>
-                {% endif %}
-              </div>
+            {% if export_instance.type == 'form' and export_instance.export_format != 'html' %}
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input"
+                     id="format-data-in-excel-checkbox"
+                     data-bind="checked: format_data_in_excel" />
+              <label class="form-check-label" for="format-data-in-excel-checkbox">
+                <strong>{% trans "Automatically format cells for Excel 2007+" %}</strong><br/>
+                {% blocktrans %}
+                  If this setting is not selected, your export will be in Excel’s general format.
+                  If you enable this setting, Excel will format dates, integers, decimals,
+                  Boolean values (True/False) and currencies.
+                {% endblocktrans %}
+              </label>
+            </div>
             {% endif %}
+
             <div class="form-check">
               <input type="checkbox" class="form-check-input"
-                     id="det-config-checkbox"
-                     data-bind="checked: show_det_config_download,
-                                attr: { disabled: !{{ has_api_access|JSON }} || {{ is_all_case_types_export|JSON }}}" />
-              <label class="form-check-label" for="det-config-checkbox">
-                {% trans "Generate a Data Export Tool config file" %}
+                     id="daily-saved-export-checkbox"
+                     data-bind="checked: is_daily_saved_export,
+                                attr: { disabled: hasHtmlFormat() || !{{ has_daily_saved_export_access|JSON }}}"/>
+              <label class="form-check-label" for="daily-saved-export-checkbox">
+                {% trans "Create a Daily Saved Export" %}
               </label>
-              {% trans "Download a Data Export Tool configuration file for this export" as det_help %}
-              <span class="hq-help-template"
-                    data-content='{% blocktrans %}
-                                    <p>Checking this will add a button to download a configuration file
-                                       for the <a href="https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143955952/CommCare+Data+Export+Tool+DET" target="_blank">
-                                       CommCare Data Export Tool</a> for the export.</p>
-                                   {% endblocktrans %}
-                                   {% if not has_api_access %}
-                                   {% blocktrans %}
-                                    <p>The Data Export Tool requires API access, which is only available on the Pro Plan or higher.
-                                       Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.</p>
-                                  {% endblocktrans %}
-                                  {% endif %}'
+              {% if not has_daily_saved_export_access %}
+                <span class="hq-help-template"
+                      data-content='{% blocktrans %}
+                                      Daily saved exports are only available on the Standard Plan or higher.
+                                      Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
+                                    {% endblocktrans %}'
                 ></span>
+              {% endif %}
             </div>
-            {% if export_instance.type == 'form' %}
-              <div class="form-check"
-                   {% if not request|toggle_enabled:'SUPPORT' %}data-bind="visible: initiallyIncludeErrors"{% endif %}>
-                <input type="checkbox" class="form-check-input"
-                       id="include-errors-checkbox"
-                       data-bind="checked: include_errors" />
-                <label class="form-check-label" for="include-errors-checkbox">
-                  {% trans "Include duplicates and other unprocessed forms" %}
-                </label>
-              </div>
-
-              <div id="split-multiselects-checkbox-div" class="form-check">
-                <input type="checkbox" class="form-check-input"
-                       id="split-multiselects-checkbox"
-                       data-bind="checked: split_multiselects" />
-                <label class="form-check-label" for="split-multiselects-checkbox">
-                  {% trans "Expand Checkbox Questions" %}
-                </label>
-              </div>
-            {% endif %}
+          {% endif %}
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input"
+                   id="det-config-checkbox"
+                   data-bind="checked: show_det_config_download,
+                              attr: { disabled: !{{ has_api_access|JSON }} || {{ is_all_case_types_export|JSON }}}" />
+            <label class="form-check-label" for="det-config-checkbox">
+              {% trans "Generate a Data Export Tool config file" %}
+            </label>
+            {% trans "Download a Data Export Tool configuration file for this export" as det_help %}
+            <span class="hq-help-template"
+                  data-content='{% blocktrans %}
+                                  <p>Checking this will add a button to download a configuration file
+                                     for the <a href="https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143955952/CommCare+Data+Export+Tool+DET" target="_blank">
+                                     CommCare Data Export Tool</a> for the export.</p>
+                                 {% endblocktrans %}
+                                 {% if not has_api_access %}
+                                 {% blocktrans %}
+                                  <p>The Data Export Tool requires API access, which is only available on the Pro Plan or higher.
+                                     Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.</p>
+                                {% endblocktrans %}
+                                {% endif %}'
+              ></span>
           </div>
+          {% if export_instance.type == 'form' %}
+            <div class="form-check"
+                 {% if not request|toggle_enabled:'SUPPORT' %}data-bind="visible: initiallyIncludeErrors"{% endif %}>
+              <input type="checkbox" class="form-check-input"
+                     id="include-errors-checkbox"
+                     data-bind="checked: include_errors" />
+              <label class="form-check-label" for="include-errors-checkbox">
+                {% trans "Include duplicates and other unprocessed forms" %}
+              </label>
+            </div>
+
+            <div id="split-multiselects-checkbox-div" class="form-check">
+              <input type="checkbox" class="form-check-input"
+                     id="split-multiselects-checkbox"
+                     data-bind="checked: split_multiselects" />
+              <label class="form-check-label" for="split-multiselects-checkbox">
+                {% trans "Expand Checkbox Questions" %}
+              </label>
+            </div>
+          {% endif %}
         </div>
         {% if request|request_has_privilege:"EXPORT_OWNERSHIP" %}
           <div class="mb-3"
@@ -248,90 +246,82 @@
       {% endif %}
 
       {% if allow_deid %}
-        <fieldset>
+        <fieldset class="mb-3">
           <legend>
             {% trans "Privacy Settings" %}
           </legend>
-          <div class="mb-3">
-            <div class="offset-md-4 offset-lg-3 offset-xl-2 col-md-6">
-              <div data-bind="visible: isDeidColumnVisible()">
-                <div class="form-check">
-                  <input type="checkbox" class="form-check-input"
-                         id="is_deidentified"
-                         data-bind="checked: is_deidentified" />
-                  <label class="form-check-label" for="is_deidentified">
-                    {% trans "Publish as De-Identified" %}
-                  </label>
-                </div>
-                <span class="help-inline">
-                  {% trans "Check only if this export has been fully and safely de-identified." %}
-                </span>
-              </div>
-              <button class="btn btn-outline-primary"
-                      data-bind="visible: !isDeidColumnVisible() && !{{ is_all_case_types_export|JSON }},
-                                 click: showDeidColumn">
-                {% trans "Allow me to mark sensitive data" %}
-              </button>
+          <div class="mb-3" data-bind="visible: isDeidColumnVisible()">
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input"
+                     id="is_deidentified"
+                     data-bind="checked: is_deidentified" />
+              <label class="form-check-label" for="is_deidentified">
+                {% trans "Publish as De-Identified" %}
+              </label>
             </div>
+            <span class="help-inline">
+              {% trans "Check only if this export has been fully and safely de-identified." %}
+            </span>
           </div>
+          <button class="btn btn-outline-primary"
+                  data-bind="visible: !isDeidColumnVisible() && !{{ is_all_case_types_export|JSON }},
+                             click: showDeidColumn">
+            {% trans "Allow me to mark sensitive data" %}
+          </button>
         </fieldset>
       {% endif %}
-      <div class="form-actions">
-        <div class="offset-md-4 offset-lg-3 offset-xl-2 col-md-8 col-lg-9 col-xl-10 controls">
-          {% if can_edit %}
-            <button type="submit"
-                    class="btn btn-lg btn-primary"
-                    data-bind="click: save,
-                               disable: saveStateSaving() || saveStateSuccess() || !isValid()">
-              <span data-bind="visible: saveStateReady(),
-                               text: getSaveText()"></span>
-              <span data-bind="visible: saveStateSaving()">
-                <i class="fa fa-refresh fa-spin"></i>
-                {% trans "Saving" %}
-              </span>
-              <span data-bind="visible: saveStateError()">
-                {% trans "Try Again" %}
-              </span>
-              <span data-bind="visible: saveStateSuccess()">
-                {% trans "Saved!" %}
-              </span>
-            </button>
-          {% endif %}
-          <a class="btn btn-outline-primary btn-lg" href="{{ export_home_url }}">
-            {% if can_edit %}
-              {% trans "Cancel" %}
-            {% else %}
-              {% trans "Back" %}
-            {% endif %}
-          </a>
-          {% if export_instance.get_id and can_edit %}
-            <a class="btn btn-lg btn-outline-primary float-end"
-               href="{% url 'copy_export' domain export_instance.get_id %}?next={{ export_home_url }}">
-              <i class="fa fa-copy fa-white"></i>
-              {% trans "Copy this Export" %}
-            </a>
-          {% endif %}
-
-          {% if export_instance.is_odata_config %}
-            <div class="d-inline-block"
-                 data-bind="if: hasDuplicateColumnLabels">
-              <div class="alert alert-danger">
-                {% blocktrans %}
-                  Column labels must be unique. '<span data-bind="text: duplicateLabel"></span>'
-                  has been used more than once.
-                {% endblocktrans %}
-              </div>
-            </div>
-          {% endif %}
+      {% if can_edit %}
+        <button type="submit"
+                class="btn btn-lg btn-primary"
+                data-bind="click: save,
+                           disable: saveStateSaving() || saveStateSuccess() || !isValid()">
+          <span data-bind="visible: saveStateReady(),
+                           text: getSaveText()"></span>
+          <span data-bind="visible: saveStateSaving()">
+            <i class="fa fa-refresh fa-spin"></i>
+            {% trans "Saving" %}
+          </span>
+          <span data-bind="visible: saveStateError()">
+            {% trans "Try Again" %}
+          </span>
+          <span data-bind="visible: saveStateSuccess()">
+            {% trans "Saved!" %}
+          </span>
+        </button>
+      {% endif %}
+      <a class="btn btn-outline-primary btn-lg" href="{{ export_home_url }}">
+        {% if can_edit %}
+          {% trans "Cancel" %}
+        {% else %}
+          {% trans "Back" %}
+        {% endif %}
+      </a>
+      {% if export_instance.get_id and can_edit %}
+        <a class="btn btn-lg btn-outline-primary float-end"
+           href="{% url 'copy_export' domain export_instance.get_id %}?next={{ export_home_url }}">
+          <i class="fa fa-copy fa-white"></i>
+          {% trans "Copy this Export" %}
+        </a>
+      {% endif %}
 
-          <div class="text-danger"
-               data-bind="if: !isValid(){% if export_instance.is_odata_config %} && !hasDuplicateColumnLabels(){% endif %}">
-            {% trans "There are errors with your configuration. Please fix them before creating the export." %}
+      {% if export_instance.is_odata_config %}
+        <div class="d-inline-block"
+             data-bind="if: hasDuplicateColumnLabels">
+          <div class="alert alert-danger">
+            {% blocktrans %}
+              Column labels must be unique. '<span data-bind="text: duplicateLabel"></span>'
+              has been used more than once.
+            {% endblocktrans %}
           </div>
         </div>
-        {% include "export/dialogs/bootstrap5/process_deleted_questions.html" %}
-        {% include "export/dialogs/bootstrap5/process_deprecated_properties.html" %}
+      {% endif %}
+
+      <div class="text-danger"
+           data-bind="if: !isValid(){% if export_instance.is_odata_config %} && !hasDuplicateColumnLabels(){% endif %}">
+        {% trans "There are errors with your configuration. Please fix them before creating the export." %}
       </div>
+    {% include "export/dialogs/bootstrap5/process_deleted_questions.html" %}
+    {% include "export/dialogs/bootstrap5/process_deprecated_properties.html" %}
     </form>
   </div>
   {% include "export/partials/bootstrap5/new_customize_export_templates.html" %}

From 2bb9804a56cce8610e4571a2aca70d01a3bc8a63 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 20:30:13 -0400
Subject: [PATCH 09/16] Updated new_customize_export_templates.html

---
 .../new_customize_export_templates.html       | 128 ++++++++----------
 1 file changed, 56 insertions(+), 72 deletions(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/new_customize_export_templates.html b/corehq/apps/export/templates/export/partials/bootstrap5/new_customize_export_templates.html
index e2504697cee8..a5ffc2c99202 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/new_customize_export_templates.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/new_customize_export_templates.html
@@ -7,7 +7,7 @@
     <legend data-bind="visible: table.isVisible(),
                        visible: table.label() !== 'Case History'">
       <span>
-        <input type="checkbox"  {# todo B5: css:checkbox #}
+        <input type="checkbox"
                data-bind="checked: table.selected, attr: { disabled: {{ disable_table_checkbox|JSON }} }" />
       </span>
       <span>
@@ -34,43 +34,36 @@
     <div class="col-md-12"
          data-bind="slideVisible: table.selected">
       {% if not export_instance.is_odata_config %}
-        <div class="form-group">  {# todo B5: css:form-group #}
-          <label class="col-md-4 col-lg-3 col-xl-2 form-label">
+        <div class="mb-3">
+          <label class="form-label">
             {% trans "Sheet Name" %}
           </label>
-          <div class="col-md-9 col-lg-8 col-xl-6">
-            <input type="text"
-                   class="form-control"
-                   data-bind="value: table.label" />
-          </div>
+          <input type="text"
+                 class="form-control"
+                 data-bind="value: table.label" />
         </div>
       {% endif %}
       <!-- ko if: table.is_user_defined -->
-      <div class="form-group">  {# todo B5: css:form-group #}
-        <label class="col-md-4 col-lg-3 col-xl-2 form-label">
+      <div class="mb-3">
+        <label class="form-label">
           {% trans "Custom Path" %}
         </label>
-        <div class="col-md-4 col-lg-3 col-xl-2">
-          <input type="text"
-                 class="form-control"
-                 data-bind="value: table.customPathString" />
-        </div>
+        <input type="text"
+               class="form-control"
+               data-bind="value: table.customPathString" />
       </div>
       <!-- /ko -->
 
       {% if request|toggle_enabled:"SUPPORT_GEO_JSON_EXPORT" %}
-      <div id="select-geo-property" class="form-group" hidden>  {# todo B5: css:form-group #}
-        <label class="col-md-4 col-lg-3 col-xl-2 form-label" for="geo-property-select">
+      <div id="select-geo-property" class="mb-3" hidden>
+        <label class="form-label" for="geo-property-select">
           {% trans 'Select geo property' %}
         </label>
-        <div class="col-md-9 col-lg-8 col-xl-6">
-          <select
-            id="geo-property-select"
-            class="control form-control"
-            data-bind="options: $parent.geoProperties,
-              value: table.selected_geo_property">
-          </select>
-        </div>
+        <select
+          id="geo-property-select"
+          class="control form-control"
+          data-bind="options: $parent.geoProperties, value: table.selected_geo_property">
+        </select>
       </div>
       {% endif %}
 
@@ -277,25 +270,25 @@ <h4>{{ terminology.choose_fields_label }}</h4>
                            success: column.selectedForSort,
                            'selected-for-sort': column.selectedForSort
                          }"
-              {% if request|request_has_privilege:"EXPORT_MULTISORT" %}style="cursor:pointer"{% endif %}>  {# todo B5: inline style #}
+              {% if request|request_has_privilege:"EXPORT_MULTISORT" %}class="clickable"{% endif %}>
             <td class="text-center">
               <span class="sortable-handle">
                 <i class="fa-solid fa-up-down"></i>
               </span>
               &nbsp;&nbsp;&nbsp;
               <!--ko if: ($root.is_deidentified() && column.item.isCaseName()) -->
-              <input type="checkbox"  {# todo B5: css:checkbox #}
+              <input type="checkbox"
                      class="field-include"
-                     disabled="disabled" />
+                     disabled="disabled" />aaa
               <!--/ko-->
               <!--ko if: $root.isReservedOdataColumn(column, $parentContext.$index()) -->
-              <input type="checkbox"  {# todo B5: css:checkbox #}
+              <input type="checkbox"
                      class="field-include"
                      checked="checked"
-                     disabled="disabled" />
+                     disabled="disabled" />bbb
               <!--/ko-->
               <!--ko ifnot: ($root.is_deidentified() && column.item.isCaseName()) || $root.isReservedOdataColumn(column, $parentContext.$index()) -->
-              <input type="checkbox"  {# todo B5: css:checkbox #}
+              <input type="checkbox"
                      class="field-include export-table-checkbox"
                      data-bind="checked: column.selected" />
               <!--/ko-->
@@ -337,11 +330,11 @@ <h4>{{ terminology.choose_fields_label }}</h4>
               <span
                 data-bind="text: column.item.case_property_group_name"
                 class="badge text-bg-secondary"
-                style="background-color: #495057"  {# todo B5: inline style #}
               ></span>
               <!-- ko if: !column.isEditable() -->
-              <code data-bs-toggle="tooltip"
+              <span data-bs-toggle="tooltip"
                     data-placement="top"
+                    class="font-monospace"
                     data-bind="text: column.formatProperty(),
                                attr: {
                                  'data-original-title': column.help_text,
@@ -350,7 +343,7 @@ <h4>{{ terminology.choose_fields_label }}</h4>
                                css: {
                                  'export-tooltip': column.translatedHelp(),
                                  'break-all-words': 1,
-                               }"></code>
+                               }"></span>
               <!-- /ko -->
               <!-- ko if: column.isEditable() -->
               <input type="text"
@@ -374,54 +367,45 @@ <h4>{{ terminology.choose_fields_label }}</h4>
               <div class="form-horizontal col-sm-12"
                     data-bind="if: column.doc_type() === 'SplitUserDefinedExportColumn',
                                submit: column.addUserDefinedOption">
-                <div class="form-group">  {# todo B5: css:form-group #}
-                  <select style="width:200px"  {# todo B5: inline style #}
-                          class="form-control"
-                          data-bind="options: $root.splitTypes.userDefined,
-                                     value: column.split_type"></select>
-                </div>
+                <select style="width:200px"
+                        class="form-select"
+                        data-bind="options: $root.splitTypes.userDefined,
+                                   value: column.split_type"></select>
                 <!-- ko if: column.split_type() === $root.splitTypes.multiselect -->
-                <div class="form-group">  {# todo B5: css:form-group #}
-                  <button class="btn btn-outline-primary btn-sm"
-                          data-bind="visible: !column.showOptions(),
-                                     click: function() {
-                                       column.showOptions(true);
-                                     }">
-                    {% trans "Show Options" %}
-                  </button>
+                <button class="btn btn-outline-primary btn-sm my-2"
+                        data-bind="visible: !column.showOptions(),
+                                   click: function() {
+                                     column.showOptions(true);
+                                   }">
+                  {% trans "Show Options" %}
+                </button>
 
-                  <button class="btn btn-outline-primary btn-sm"
-                          data-bind="visible: column.showOptions(),
-                                     click: function() {
-                                       column.showOptions(false);
-                                     }">
-                    {% trans "Hide Options" %}
-                  </button>
-                </div>
+                <button class="btn btn-outline-primary btn-sm"
+                        data-bind="visible: column.showOptions(),
+                                   click: function() {
+                                     column.showOptions(false);
+                                   }">
+                  {% trans "Hide Options" %}
+                </button>
                 <div data-bind="visible: column.showOptions()">
                   <ul class="list-group"
                       data-bind="foreach: column.user_defined_options">
                     <li class="list-group-item">
                       <span data-bind="text: $data"></span>
-                      <i style="cursor: pointer"  {# todo B5: inline style #}
-                         class="text-danger fa-regular fa-trash-can float-end"
+                      <i class="clickable text-danger fa-regular fa-trash-can float-end"
                          data-bind="click: column.removeUserDefinedOption.bind(column)"></i>
                     </li>
                   </ul>
-                  <div class="form-group">  {# todo B5: css:form-group #}
-                    <div style="max-width: 200px"  {# todo B5: inline style #}
-                         class="input-group">
-                      <input class="form-control input-sm"
-                             type="text"
-                             data-bind="value: column.userDefinedOptionToAdd"/>
-                      <span class="input-group-btn">  {# todo B5: css:input-group-btn #}
-                        <button type="submit"
-                                class="btn btn-outline-primary btn-sm"
-                                data-bind="click: column.addUserDefinedOption">
-                          {% trans "Add" %}
-                        </button>
-                      </span>
-                    </div>
+                  <div style="max-width: 200px"
+                       class="input-group">
+                    <input class="form-control input-sm"
+                           type="text"
+                           data-bind="value: column.userDefinedOptionToAdd"/>
+                    <button type="submit"
+                            class="btn btn-outline-primary btn-sm"
+                            data-bind="click: column.addUserDefinedOption">
+                      {% trans "Add" %}
+                    </button>
                   </div>
                 </div>
                 <!-- /ko -->

From 78bf5fbf7e3f41d476e30600a30fde6404bd08a7 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 3 Oct 2024 07:08:51 -0400
Subject: [PATCH 10/16] Updated modals

---
 corehq/apps/export/static/export/js/bootstrap5/models.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/corehq/apps/export/static/export/js/bootstrap5/models.js b/corehq/apps/export/static/export/js/bootstrap5/models.js
index fe4d21588458..486292a8466a 100644
--- a/corehq/apps/export/static/export/js/bootstrap5/models.js
+++ b/corehq/apps/export/static/export/js/bootstrap5/models.js
@@ -8,6 +8,7 @@ hqDefine('export/js/bootstrap5/models', [
     'jquery',
     'knockout',
     'underscore',
+    'es6!hqwebapp/js/bootstrap5_loader',
     'hqwebapp/js/initial_page_data',
     'hqwebapp/js/toggles',
     'analytix/js/google',
@@ -20,6 +21,7 @@ hqDefine('export/js/bootstrap5/models', [
     $,
     ko,
     _,
+    bootstrap,
     initialPageData,
     toggles,
     googleAnalytics,
@@ -451,7 +453,7 @@ hqDefine('export/js/bootstrap5/models', [
         table.showDeleted(!table.showDeleted());
 
         if (this.numberOfAppsToProcess > 0 && table.showDeleted()) {
-            $('#export-process-deleted-applications').modal('show');  /* todo B5: plugin:modal */
+            bootstrap.Modal.getOrCreateInstance('#export-process-deleted-applications').show();
         }
     };
 
@@ -576,7 +578,7 @@ hqDefine('export/js/bootstrap5/models', [
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
         if (urlParams.get('load_deprecated') !== 'True' && table.showDeprecated()) {
-            $('#export-process-deprecated-properties').modal('show');  /* todo B5: plugin:modal */
+            bootstrap.Modal.getOrCreateInstance('#export-process-deprecated-properties').show();
         }
     };
 

From 41d643543822a10b5d731c1e56f78f26ac367afb Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 3 Oct 2024 07:29:37 -0400
Subject: [PATCH 11/16] Updated dropdown class

---
 .../filters/bootstrap5/sensitive_columns.html    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/corehq/apps/reports/templates/reports/filters/bootstrap5/sensitive_columns.html b/corehq/apps/reports/templates/reports/filters/bootstrap5/sensitive_columns.html
index 825423852d38..49017dfb2cc5 100644
--- a/corehq/apps/reports/templates/reports/filters/bootstrap5/sensitive_columns.html
+++ b/corehq/apps/reports/templates/reports/filters/bootstrap5/sensitive_columns.html
@@ -38,8 +38,8 @@ <h4 class="card-title">
               <td>
                 <div class="has-feedback">
                   <input type="text" class="form-control" data-bind="
-                                                     value: name,
-                                                     explorerColumnsAutocomplete: $parent.suggestedProperties()"
+                    value: name,
+                    explorerColumnsAutocomplete: $parent.suggestedProperties()"
                   />
                   <span class="form-control-feedback" data-bind="visible: meta_type">
                     <span class="badge text-bg-primary" data-bind="text: meta_type"></span>
@@ -48,12 +48,12 @@ <h4 class="card-title">
               </td>
               <td>
                 <div class="has-feedback">
-                  <select class="form-control" data-bind="
-                                                options: {{ property_label_options }},
-                                                optionsText: 'name',
-                                                optionsValue: 'type',
-                                                value: label,
-                                                "/>
+                  <select class="form-select" data-bind="
+                    options: {{ property_label_options }},
+                    optionsText: 'name',
+                    optionsValue: 'type',
+                    value: label,
+                  "></select>
                 </div>
               </td>
               <td>

From aa0d0f61347332e244ae44c6908d7da041b70226 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 3 Oct 2024 07:36:46 -0400
Subject: [PATCH 12/16] Updated help link

The old one goes to a redirection page, which is a worse experience.
---
 corehq/apps/export/views/new.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/corehq/apps/export/views/new.py b/corehq/apps/export/views/new.py
index 9a1c79e8c710..d16a59a6592e 100644
--- a/corehq/apps/export/views/new.py
+++ b/corehq/apps/export/views/new.py
@@ -103,7 +103,7 @@ def terminology(self):
             'help_text': mark_safe(  # nosec: no user input
                 _("""
                 Learn more about exports on our <a
-                href="https://help.commcarehq.org/display/commcarepublic/Data+Export+Overview"
+                href="https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143954661/Data+Exports"
                 target="_blank">Help Site</a>.
             """)),
             'name_label': _("Export Name"),

From 0d634354f68d5dc9ac8cbab94c398ae43041f495 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 22 Oct 2024 12:59:12 +0000
Subject: [PATCH 13/16] "Bootstrap 5 Migration - Rebuilt diffs"

---
 .../export/customize_export_new.html.diff.txt | 622 +++++++++++++-----
 .../process_deleted_questions.html.diff.txt   |  31 +-
 ...rocess_deprecated_properties.html.diff.txt |  19 +-
 ...w_customize_export_templates.html.diff.txt | 225 ++++---
 .../js/customize_export_new.js.diff.txt       |  15 +-
 .../javascript/export/js/models.js.diff.txt   |  20 +-
 .../filters/sensitive_columns.html.diff.txt   |  25 +-
 7 files changed, 664 insertions(+), 293 deletions(-)

diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/customize_export_new.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/customize_export_new.html.diff.txt
index 92643cc96984..3a783dba8619 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/customize_export_new.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/customize_export_new.html.diff.txt
@@ -16,23 +16,23 @@
    {% initial_page_data 'geo_properties' geo_properties %}
  
 -  <div id="customize-export" style="display: none;" data-bind="visible: true">
-+  <div id="customize-export" style="display: none;" data-bind="visible: true">  {# todo B5: inline style #}
++  <div id="customize-export" class="d-none" data-bind="css: { 'd-none': false }">
      {# content for multi-select help popover #}
      {% if export_instance.type == 'case' %}
 -      <div id="popover_content_wrapper" style="display: none">
-+      <div id="popover_content_wrapper" style="display: none">  {# todo B5: inline style #}
++      <div id="popover_content_wrapper" class="d-none">
          {% blocktrans %}
            These options allow you to configure how CommCare exports data from multi-select questions.
            If you do not want to split the options into multiple columns select the 'plain' option.
-@@ -40,16 +40,16 @@
+@@ -40,205 +40,187 @@
            method="post">
        {% csrf_token %}
        <fieldset>
 -        <div class="form-group">
-+        <div class="form-group">  {# todo B5: css:form-group #}
-           <label for="export-type"
+-          <label for="export-type"
 -                 class="col-sm-3 col-md-2 control-label">
-+                 class="col-md-3 col-lg-2 form-label">
++        <div class="mb-3">  {# Updated from form-group to mb-3 #}
++          <label for="export-type" class="form-label">
              {% if export_instance.type == 'case' %}
                {% trans "Case Type" %}
              {% else %}
@@ -40,162 +40,354 @@
              {% endif %}
            </label>
 -          <div class="col-sm-9 col-md-8 col-lg-6">
-+          <div class="col-md-9 col-lg-8 col-xl-6">
-             <p class="form-control-static">
+-            <p class="form-control-static">
++
++            <h4>
                {% if export_instance.type == 'case' %}
                  {{ export_instance.case_type }}
-@@ -59,24 +59,24 @@
-             </p>
-           </div>
-         </div>
+               {% else %}
+                 {{ export_instance.formname }}
+               {% endif %}
+-            </p>
+-          </div>
+-        </div>
 -        <div class="form-group">
-+        <div class="form-group">  {# todo B5: css:form-group #}
-           <label for="export-name"
+-          <label for="export-name"
 -                 class="col-sm-3 col-md-2 control-label">
-+                 class="col-md-3 col-lg-2 form-label">
++            </h4>
++
++        </div>
++        <div class="mb-3">  {# Updated from form-group to mb-3 #}
++          <label for="export-name" class="form-label">
              {{ terminology.name_label }}
            </label>
 -          <div class="col-sm-9 col-md-8 col-lg-6">
-+          <div class="col-md-9 col-lg-8 col-xl-6">
-             <input type="text"
-                    class="form-control"
-                    id="export-name"
-                    data-bind="value: name" />
-           </div>
-         </div>
+-            <input type="text"
+-                   class="form-control"
+-                   id="export-name"
+-                   data-bind="value: name" />
+-          </div>
+-        </div>
 -        <div class="form-group">
-+        <div class="form-group">  {# todo B5: css:form-group #}
-           <label for="export-description"
+-          <label for="export-description"
 -                 class="col-sm-3 col-md-2 control-label">
-+                 class="col-md-3 col-lg-2 form-label">
++          <input type="text"
++                 class="form-control"
++                 id="export-name"
++                 data-bind="value: name" />
++        </div>
++        <div class="mb-3">  {# Updated from form-group to mb-3 #}
++          <label for="export-description" class="form-label">
              {% trans "Description" %}
            </label>
 -          <div class="col-sm-9 col-md-8 col-lg-6">
-+          <div class="col-md-9 col-lg-8 col-xl-6">
-             <textarea data-bind="value: description"
-                       id="export-description"
-                       class="form-control vertical-resize"
-@@ -84,16 +84,16 @@
-             </textarea>
-           </div>
-         </div>
+-            <textarea data-bind="value: description"
+-                      id="export-description"
+-                      class="form-control vertical-resize"
+-                      rows="3">
+-            </textarea>
+-          </div>
+-        </div>
 -        <div class="form-group"
-+        <div class="form-group"  {# todo B5: css:form-group #}
-              data-bind="css: {
+-             data-bind="css: {
 -                          'has-error': hasDisallowedHtmlFormat
-+                          'has-error': hasDisallowedHtmlFormat  {# todo B5: css:has-error #}
-                         },
-                         visible: formatOptions.length > 1">
-           <label for="format-select"
+-                        },
+-                        visible: formatOptions.length > 1">
+-          <label for="format-select"
 -                 class="col-sm-3 col-md-2 control-label">
-+                 class="col-md-3 col-lg-2 form-label">
++          <textarea data-bind="value: description"
++                    id="export-description"
++                    class="form-control vertical-resize"
++                    rows="3">
++          </textarea>
++        </div>
++        <div class="mb-3"  {# Updated from form-group to mb-3 #}
++             data-bind="visible: formatOptions.length > 1">
++          <label for="format-select" class="form-label">
              {% trans "Default file type" %}
            </label>
 -          <div class="col-sm-9 col-md-8 col-lg-6">
-+          <div class="col-md-9 col-lg-8 col-xl-6">
-             <select class="form-control"
-                     id="format-select"
-                     data-bind="options: getFormatOptionValues(),
-@@ -111,12 +111,12 @@
-           </div>
- 
-         </div>
+-            <select class="form-control"
+-                    id="format-select"
+-                    data-bind="options: getFormatOptionValues(),
+-                               optionsText: getFormatOptionText,
+-                               value: export_format">
+-            </select>
+-            <div class="help-block"
+-                 data-bind="visible: hasDisallowedHtmlFormat">
+-              {% url "domain_subscription_view" domain as software_plan_url %}
+-              {% blocktrans %}
+-                Excel Dashboard Integration is only available on the Standard Plan or higher.
+-                Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
+-              {% endblocktrans %}
+-            </div>
+-          </div>
+-
+-        </div>
 -        <div class="form-group">
 -          <div class="col-sm-offset-4 col-md-offset-3 col-lg-offset-2 col-sm-6">
-+        <div class="form-group">  {# todo B5: css:form-group #}
-+          <div class="offset-md-4 offset-lg-3 offset-xl-2 col-md-6">
-             {% if not export_instance.is_odata_config %}
+-            {% if not export_instance.is_odata_config %}
 -              <div class="checkbox">
 -                <label>
 -                  <input type="checkbox"
-+              <div class="checkbox">  {# todo B5: css:checkbox #}
-+                <label>
-+                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                          id="transform-dates-checkbox"
-                          data-bind="checked: transform_dates" />
-                   <strong>{% trans "Automatically convert dates and multimedia links for Excel" %}</strong><br/>
-@@ -129,9 +129,9 @@
-               </div>
- 
-               {% if export_instance.type == 'form' and export_instance.export_format != 'html' %}
+-                         id="transform-dates-checkbox"
+-                         data-bind="checked: transform_dates" />
+-                  <strong>{% trans "Automatically convert dates and multimedia links for Excel" %}</strong><br/>
+-                  {% blocktrans %}
+-                    Leaving this checked will ensure dates appear in excel format.
+-                    Otherwise they will appear as a normal text format. This also allows for
+-                    hyperlinks to the multimedia captured by your form submission.
+-                  {% endblocktrans %}
+-                </label>
+-              </div>
+-
+-              {% if export_instance.type == 'form' and export_instance.export_format != 'html' %}
 -              <div class="checkbox">
 -                <label>
 -                  <input type="checkbox"
-+              <div class="checkbox">  {# todo B5: css:checkbox #}
-+                <label>
-+                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                          id="format-data-in-excel-checkbox"
-                          data-bind="checked: format_data_in_excel" />
-                   <strong>{% trans "Automatically format cells for Excel 2007+" %}</strong><br/>
-@@ -144,9 +144,9 @@
-               </div>
+-                         id="format-data-in-excel-checkbox"
+-                         data-bind="checked: format_data_in_excel" />
+-                  <strong>{% trans "Automatically format cells for Excel 2007+" %}</strong><br/>
+-                  {% blocktrans %}
+-                    If this setting is not selected, your export will be in Excel’s general format.
+-                    If you enable this setting, Excel will format dates, integers, decimals,
+-                    Boolean values (True/False) and currencies.
+-                  {% endblocktrans %}
+-                </label>
+-              </div>
++          <select class="form-control"
++                  id="format-select"
++                  data-bind="options: getFormatOptionValues(),
++                             optionsText: getFormatOptionText,
++                             value: export_format,
++                             css: {'is-invalid': hasDisallowedHtmlFormat}">
++          </select>
++          <div class="invalid-feedback"
++               data-bind="visible: hasDisallowedHtmlFormat">
++            {% url "domain_subscription_view" domain as software_plan_url %}
++            {% blocktrans %}
++              Excel Dashboard Integration is only available on the Standard Plan or higher.
++              Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
++            {% endblocktrans %}
++          </div>
++        </div>
++        <div class="mb-3">  {# Updated from form-group to mb-3 #}
++          {% if not export_instance.is_odata_config %}
++            <div class="form-check">
++              <input type="checkbox" class="form-check-input"
++                     id="transform-dates-checkbox"
++                     data-bind="checked: transform_dates" />
++              <label class="form-check-label" for="transform-dates-checkbox">
++                <strong>{% trans "Automatically convert dates and multimedia links for Excel" %}</strong><br/>
++                {% blocktrans %}
++                  Leaving this checked will ensure dates appear in excel format.
++                  Otherwise they will appear as a normal text format. This also allows for
++                  hyperlinks to the multimedia captured by your form submission.
++                {% endblocktrans %}
++              </label>
++            </div>
++
++            {% if export_instance.type == 'form' and export_instance.export_format != 'html' %}
++            <div class="form-check">
++              <input type="checkbox" class="form-check-input"
++                     id="format-data-in-excel-checkbox"
++                     data-bind="checked: format_data_in_excel" />
++              <label class="form-check-label" for="format-data-in-excel-checkbox">
++                <strong>{% trans "Automatically format cells for Excel 2007+" %}</strong><br/>
++                {% blocktrans %}
++                  If this setting is not selected, your export will be in Excel’s general format.
++                  If you enable this setting, Excel will format dates, integers, decimals,
++                  Boolean values (True/False) and currencies.
++                {% endblocktrans %}
++              </label>
++            </div>
++            {% endif %}
++
++            <div class="form-check">
++              <input type="checkbox" class="form-check-input"
++                     id="daily-saved-export-checkbox"
++                     data-bind="checked: is_daily_saved_export,
++                                attr: { disabled: hasHtmlFormat() || !{{ has_daily_saved_export_access|JSON }}}"/>
++              <label class="form-check-label" for="daily-saved-export-checkbox">
++                {% trans "Create a Daily Saved Export" %}
++              </label>
++              {% if not has_daily_saved_export_access %}
++                <span class="hq-help-template"
++                      data-content='{% blocktrans %}
++                                      Daily saved exports are only available on the Standard Plan or higher.
++                                      Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
++                                    {% endblocktrans %}'
++                ></span>
                {% endif %}
- 
+-
 -              <div class="checkbox">
 -                <label>
 -                  <input type="checkbox"
-+              <div class="checkbox">  {# todo B5: css:checkbox #}
-+                <label>
-+                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                          id="daily-saved-export-checkbox"
-                          data-bind="checked: is_daily_saved_export,
-                                     attr: { disabled: hasHtmlFormat() || !{{ has_daily_saved_export_access|JSON }}}"/>
-@@ -162,9 +162,9 @@
-                 {% endif %}
-               </div>
-             {% endif %}
+-                         id="daily-saved-export-checkbox"
+-                         data-bind="checked: is_daily_saved_export,
+-                                    attr: { disabled: hasHtmlFormat() || !{{ has_daily_saved_export_access|JSON }}}"/>
+-                  {% trans "Create a Daily Saved Export" %}
+-                </label>
+-                {% if not has_daily_saved_export_access %}
+-                  <span class="hq-help-template"
+-                        data-content='{% blocktrans %}
+-                                        Daily saved exports are only available on the Standard Plan or higher.
+-                                        Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.
+-                                      {% endblocktrans %}'
+-                  ></span>
+-                {% endif %}
+-              </div>
+-            {% endif %}
 -            <div class="checkbox">
-+            <div class="checkbox">  {# todo B5: css:checkbox #}
-               <label>
+-              <label>
 -                <input type="checkbox"
-+                <input type="checkbox"  {# todo B5: css:checkbox #}
-                        id="det-config-checkbox"
-                        data-bind="checked: show_det_config_download,
-                                   attr: { disabled: !{{ has_api_access|JSON }} || {{ is_all_case_types_export|JSON }}}" />
-@@ -186,19 +186,19 @@
-                 ></span>
-             </div>
-             {% if export_instance.type == 'form' %}
+-                       id="det-config-checkbox"
+-                       data-bind="checked: show_det_config_download,
+-                                  attr: { disabled: !{{ has_api_access|JSON }} || {{ is_all_case_types_export|JSON }}}" />
+-                {% trans "Generate a Data Export Tool config file" %}
+-              </label>
+-              {% trans "Download a Data Export Tool configuration file for this export" as det_help %}
+-              <span class="hq-help-template"
+-                    data-content='{% blocktrans %}
+-                                    <p>Checking this will add a button to download a configuration file
+-                                       for the <a href="https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143955952/CommCare+Data+Export+Tool+DET" target="_blank">
+-                                       CommCare Data Export Tool</a> for the export.</p>
+-                                   {% endblocktrans %}
+-                                   {% if not has_api_access %}
+-                                   {% blocktrans %}
+-                                    <p>The Data Export Tool requires API access, which is only available on the Pro Plan or higher.
+-                                       Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.</p>
+-                                  {% endblocktrans %}
+-                                  {% endif %}'
+-                ></span>
+-            </div>
+-            {% if export_instance.type == 'form' %}
 -              <div class="checkbox"
-+              <div class="checkbox"  {# todo B5: css:checkbox #}
-                    {% if not request|toggle_enabled:'SUPPORT' %}data-bind="visible: initiallyIncludeErrors"{% endif %}>
-                 <label>
+-                   {% if not request|toggle_enabled:'SUPPORT' %}data-bind="visible: initiallyIncludeErrors"{% endif %}>
+-                <label>
 -                  <input type="checkbox"
-+                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                          id="include-errors-checkbox"
-                          data-bind="checked: include_errors" />
-                   {% trans "Include duplicates and other unprocessed forms" %}
-                 </label>
-               </div>
- 
+-                         id="include-errors-checkbox"
+-                         data-bind="checked: include_errors" />
+-                  {% trans "Include duplicates and other unprocessed forms" %}
+-                </label>
+-              </div>
+-
 -              <div id="split-multiselects-checkbox-div" class="checkbox">
 -                <label>
 -                  <input type="checkbox"
-+              <div id="split-multiselects-checkbox-div" class="checkbox">  {# todo B5: css:checkbox #}
-+                <label>
-+                  <input type="checkbox"  {# todo B5: css:checkbox #}
-                          id="split-multiselects-checkbox"
-                          data-bind="checked: split_multiselects" />
-                   {% trans "Expand Checkbox Questions" %}
-@@ -208,14 +208,14 @@
-           </div>
+-                         id="split-multiselects-checkbox"
+-                         data-bind="checked: split_multiselects" />
+-                  {% trans "Expand Checkbox Questions" %}
+-                </label>
+-              </div>
+-            {% endif %}
+-          </div>
++            </div>
++          {% endif %}
++          <div class="form-check">
++            <input type="checkbox" class="form-check-input"
++                   id="det-config-checkbox"
++                   data-bind="checked: show_det_config_download,
++                              attr: { disabled: !{{ has_api_access|JSON }} || {{ is_all_case_types_export|JSON }}}" />
++            <label class="form-check-label" for="det-config-checkbox">
++              {% trans "Generate a Data Export Tool config file" %}
++            </label>
++            {% trans "Download a Data Export Tool configuration file for this export" as det_help %}
++            <span class="hq-help-template"
++                  data-content='{% blocktrans %}
++                                  <p>Checking this will add a button to download a configuration file
++                                     for the <a href="https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143955952/CommCare+Data+Export+Tool+DET" target="_blank">
++                                     CommCare Data Export Tool</a> for the export.</p>
++                                 {% endblocktrans %}
++                                 {% if not has_api_access %}
++                                 {% blocktrans %}
++                                  <p>The Data Export Tool requires API access, which is only available on the Pro Plan or higher.
++                                     Click <a href="{{ software_plan_url }}">here</a> to manage the software plan for your project.</p>
++                                {% endblocktrans %}
++                                {% endif %}'
++              ></span>
++          </div>
++          {% if export_instance.type == 'form' %}
++            <div class="form-check"
++                 {% if not request|toggle_enabled:'SUPPORT' %}data-bind="visible: initiallyIncludeErrors"{% endif %}>
++              <input type="checkbox" class="form-check-input"
++                     id="include-errors-checkbox"
++                     data-bind="checked: include_errors" />
++              <label class="form-check-label" for="include-errors-checkbox">
++                {% trans "Include duplicates and other unprocessed forms" %}
++              </label>
++            </div>
++
++            <div id="split-multiselects-checkbox-div" class="form-check">
++              <input type="checkbox" class="form-check-input"
++                     id="split-multiselects-checkbox"
++                     data-bind="checked: split_multiselects" />
++              <label class="form-check-label" for="split-multiselects-checkbox">
++                {% trans "Expand Checkbox Questions" %}
++              </label>
++            </div>
++          {% endif %}
          </div>
          {% if request|request_has_privilege:"EXPORT_OWNERSHIP" %}
 -          <div class="form-group"
-+          <div class="form-group"  {# todo B5: css:form-group #}
++          <div class="mb-3"
                 data-bind="css: { 'has-warning': hasOtherOwner && sharing() != initialSharing }">
-             <label for="sharing-select"
+-            <label for="sharing-select"
 -                   class="col-sm-3 col-md-2 control-label">
-+                   class="col-md-3 col-lg-2 form-label">
++            <label for="sharing-select" class="form-label">
                {% trans "Sharing" %}
                <span data-bind="makeHqHelp: {description: getSharingHelpText}"></span>
              </label>
 -            <div class="col-sm-9 col-md-8 col-lg-6">
-+            <div class="col-md-9 col-lg-8 col-xl-6">
-               <select class="form-control" id="sharing-select"
-                       data-bind="options: getSharingOptionValues(),
-                                  optionsText: getSharingOptionText,
-@@ -254,8 +254,8 @@
+-              <select class="form-control" id="sharing-select"
+-                      data-bind="options: getSharingOptionValues(),
+-                                 optionsText: getSharingOptionText,
+-                                 value: sharing">
+-              </select>
+-              <div class="help-block"
+-                   data-bind="visible: hasOtherOwner && sharing() != initialSharing">
+-                <div data-bind="visible: sharing() == 'private'">
+-                  {% blocktrans %}
+-                    This export was created by <strong>{{ owner_name }}</strong>.
+-                    If you change the sharing settings for this export you will lose the ability
+-                    to view and edit the export.
+-                    Only <strong>{{ owner_name }}</strong> will have access to it.
+-                  {% endblocktrans %}
+-                </div>
+-                <div data-bind="visible: sharing() == 'export_only'">
+-                  {% blocktrans %}
+-                    This export was created by <strong>{{ owner_name }}</strong>.
+-                    If you change the sharing settings for this export you will lose the ability
+-                    to edit the export.
+-                    Only <strong>{{ owner_name }}</strong> will be able to edit it.
+-                  {% endblocktrans %}
+-                </div>
++            <select class="form-control" id="sharing-select"
++                    data-bind="options: getSharingOptionValues(),
++                               optionsText: getSharingOptionText,
++                               value: sharing">
++            </select>
++            <div class="help-block"
++                 data-bind="visible: hasOtherOwner && sharing() != initialSharing">
++              <div data-bind="visible: sharing() == 'private'">
++                {% blocktrans %}
++                  This export was created by <strong>{{ owner_name }}</strong>.
++                  If you change the sharing settings for this export you will lose the ability
++                  to view and edit the export.
++                  Only <strong>{{ owner_name }}</strong> will have access to it.
++                {% endblocktrans %}
++              </div>
++              <div data-bind="visible: sharing() == 'export_only'">
++                {% blocktrans %}
++                  This export was created by <strong>{{ owner_name }}</strong>.
++                  If you change the sharing settings for this export you will lose the ability
++                  to edit the export.
++                  Only <strong>{{ owner_name }}</strong> will be able to edit it.
++                {% endblocktrans %}
+               </div>
+             </div>
+           </div>
+@@ -254,8 +236,8 @@
  
        {% if request|toggle_enabled:"ALLOW_USER_DEFINED_EXPORT_COLUMNS" %}
          <fieldset>
@@ -206,80 +398,166 @@
                      data-bind="click: addUserDefinedTableConfiguration">
                {% trans "Add custom table configuration " %}
              </button>
-@@ -268,14 +268,14 @@
+@@ -264,93 +246,83 @@
+       {% endif %}
+ 
+       {% if allow_deid %}
+-        <fieldset>
++        <fieldset class="mb-3">
            <legend>
              {% trans "Privacy Settings" %}
            </legend>
 -          <div class="form-group">
-+          <div class="form-group">  {# todo B5: css:form-group #}
-             <label for="is_safe"
+-            <label for="is_safe"
 -                   class="col-sm-3 col-md-2 control-label"></label>
 -            <div class="col-sm-9 col-md-8 col-lg-6 deid-column">
-+                   class="col-md-3 col-lg-2 form-label"></label>
-+            <div class="col-md-9 col-lg-8 col-xl-6 deid-column">
-               <div data-bind="visible: isDeidColumnVisible()">
+-              <div data-bind="visible: isDeidColumnVisible()">
 -                <div class="checkbox">
-+                <div class="checkbox">  {# todo B5: css:checkbox #}
-                   <label>
+-                  <label>
 -                    <input type="checkbox"
-+                    <input type="checkbox"  {# todo B5: css:checkbox #}
-                            id="is_deidentified"
-                            data-bind="checked: is_deidentified" />
-                     {% trans "Publish as De-Identified" %}
-@@ -285,7 +285,7 @@
-                   {% trans "Check only if this export has been fully and safely de-identified." %}
-                 </span>
-               </div>
+-                           id="is_deidentified"
+-                           data-bind="checked: is_deidentified" />
+-                    {% trans "Publish as De-Identified" %}
+-                  </label>
+-                </div>
+-                <span class="help-inline">
+-                  {% trans "Check only if this export has been fully and safely de-identified." %}
+-                </span>
+-              </div>
 -              <button class="btn btn-default"
-+              <button class="btn btn-outline-primary"
-                       data-bind="visible: !isDeidColumnVisible() && !{{ is_all_case_types_export|JSON }},
-                                  click: showDeidColumn">
-                 {% trans "Allow me to mark sensitive data" %}
-@@ -295,7 +295,7 @@
+-                      data-bind="visible: !isDeidColumnVisible() && !{{ is_all_case_types_export|JSON }},
+-                                 click: showDeidColumn">
+-                {% trans "Allow me to mark sensitive data" %}
+-              </button>
+-            </div>
+-          </div>
++          <div class="mb-3" data-bind="visible: isDeidColumnVisible()">
++            <div class="form-check">
++              <input type="checkbox" class="form-check-input"
++                     id="is_deidentified"
++                     data-bind="checked: is_deidentified" />
++              <label class="form-check-label" for="is_deidentified">
++                {% trans "Publish as De-Identified" %}
++              </label>
++            </div>
++            <span class="help-inline">
++              {% trans "Check only if this export has been fully and safely de-identified." %}
++            </span>
++          </div>
++          <button class="btn btn-outline-primary"
++                  data-bind="visible: !isDeidColumnVisible() && !{{ is_all_case_types_export|JSON }},
++                             click: showDeidColumn">
++            {% trans "Allow me to mark sensitive data" %}
++          </button>
          </fieldset>
        {% endif %}
-       <div class="form-actions">
+-      <div class="form-actions">
 -        <div class="col-sm-offset-4 col-md-offset-3 col-lg-offset-2 col-sm-8 col-md-9 col-lg-10 controls">
-+        <div class="offset-md-4 offset-lg-3 offset-xl-2 col-md-8 col-lg-9 col-xl-10 controls">
-           {% if can_edit %}
-             <button type="submit"
-                     class="btn btn-lg btn-primary"
-@@ -315,7 +315,7 @@
-               </span>
-             </button>
-           {% endif %}
+-          {% if can_edit %}
+-            <button type="submit"
+-                    class="btn btn-lg btn-primary"
+-                    data-bind="click: save,
+-                               disable: saveStateSaving() || saveStateSuccess() || !isValid()">
+-              <span data-bind="visible: saveStateReady(),
+-                               text: getSaveText()"></span>
+-              <span data-bind="visible: saveStateSaving()">
+-                <i class="fa fa-refresh fa-spin"></i>
+-                {% trans "Saving" %}
+-              </span>
+-              <span data-bind="visible: saveStateError()">
+-                {% trans "Try Again" %}
+-              </span>
+-              <span data-bind="visible: saveStateSuccess()">
+-                {% trans "Saved!" %}
+-              </span>
+-            </button>
+-          {% endif %}
 -          <a class="btn btn-default btn-lg" href="{{ export_home_url }}">
-+          <a class="btn btn-outline-primary btn-lg" href="{{ export_home_url }}">
-             {% if can_edit %}
-               {% trans "Cancel" %}
-             {% else %}
-@@ -323,7 +323,7 @@
-             {% endif %}
-           </a>
-           {% if export_instance.get_id and can_edit %}
+-            {% if can_edit %}
+-              {% trans "Cancel" %}
+-            {% else %}
+-              {% trans "Back" %}
+-            {% endif %}
+-          </a>
+-          {% if export_instance.get_id and can_edit %}
 -            <a class="btn btn-lg btn-default pull-right"
-+            <a class="btn btn-lg btn-outline-primary float-end"
-                href="{% url 'copy_export' domain export_instance.get_id %}?next={{ export_home_url }}">
-               <i class="fa fa-copy fa-white"></i>
-               {% trans "Copy this Export" %}
-@@ -331,7 +331,7 @@
-           {% endif %}
- 
-           {% if export_instance.is_odata_config %}
+-               href="{% url 'copy_export' domain export_instance.get_id %}?next={{ export_home_url }}">
+-              <i class="fa fa-copy fa-white"></i>
+-              {% trans "Copy this Export" %}
+-            </a>
+-          {% endif %}
+-
+-          {% if export_instance.is_odata_config %}
 -            <div style="display: inline-block"
-+            <div style="display: d-inline-block"  {# todo B5: inline style #}
-                  data-bind="if: hasDuplicateColumnLabels">
-               <div class="alert alert-danger">
-                 {% blocktrans %}
-@@ -347,10 +347,10 @@
-             {% trans "There are errors with your configuration. Please fix them before creating the export." %}
-           </div>
-         </div>
+-                 data-bind="if: hasDuplicateColumnLabels">
+-              <div class="alert alert-danger">
+-                {% blocktrans %}
+-                  Column labels must be unique. '<span data-bind="text: duplicateLabel"></span>'
+-                  has been used more than once.
+-                {% endblocktrans %}
+-              </div>
+-            </div>
+-          {% endif %}
+-
+-          <div class="text-danger"
+-               data-bind="if: !isValid(){% if export_instance.is_odata_config %} && !hasDuplicateColumnLabels(){% endif %}">
+-            {% trans "There are errors with your configuration. Please fix them before creating the export." %}
+-          </div>
+-        </div>
 -        {% include "export/dialogs/bootstrap3/process_deleted_questions.html" %}
 -        {% include "export/dialogs/bootstrap3/process_deprecated_properties.html" %}
-+        {% include "export/dialogs/bootstrap5/process_deleted_questions.html" %}
-+        {% include "export/dialogs/bootstrap5/process_deprecated_properties.html" %}
++      {% if can_edit %}
++        <button type="submit"
++                class="btn btn-lg btn-primary"
++                data-bind="click: save,
++                           disable: saveStateSaving() || saveStateSuccess() || !isValid()">
++          <span data-bind="visible: saveStateReady(),
++                           text: getSaveText()"></span>
++          <span data-bind="visible: saveStateSaving()">
++            <i class="fa fa-refresh fa-spin"></i>
++            {% trans "Saving" %}
++          </span>
++          <span data-bind="visible: saveStateError()">
++            {% trans "Try Again" %}
++          </span>
++          <span data-bind="visible: saveStateSuccess()">
++            {% trans "Saved!" %}
++          </span>
++        </button>
++      {% endif %}
++      <a class="btn btn-outline-primary btn-lg" href="{{ export_home_url }}">
++        {% if can_edit %}
++          {% trans "Cancel" %}
++        {% else %}
++          {% trans "Back" %}
++        {% endif %}
++      </a>
++      {% if export_instance.get_id and can_edit %}
++        <a class="btn btn-lg btn-outline-primary float-end"
++           href="{% url 'copy_export' domain export_instance.get_id %}?next={{ export_home_url }}">
++          <i class="fa fa-copy fa-white"></i>
++          {% trans "Copy this Export" %}
++        </a>
++      {% endif %}
++
++      {% if export_instance.is_odata_config %}
++        <div class="d-inline-block"
++             data-bind="if: hasDuplicateColumnLabels">
++          <div class="alert alert-danger">
++            {% blocktrans %}
++              Column labels must be unique. '<span data-bind="text: duplicateLabel"></span>'
++              has been used more than once.
++            {% endblocktrans %}
++          </div>
++        </div>
++      {% endif %}
++
++      <div class="text-danger"
++           data-bind="if: !isValid(){% if export_instance.is_odata_config %} && !hasDuplicateColumnLabels(){% endif %}">
++        {% trans "There are errors with your configuration. Please fix them before creating the export." %}
        </div>
++    {% include "export/dialogs/bootstrap5/process_deleted_questions.html" %}
++    {% include "export/dialogs/bootstrap5/process_deprecated_properties.html" %}
      </form>
    </div>
 -  {% include "export/partials/bootstrap3/new_customize_export_templates.html" %}
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
index b42a5dc63f42..48add89c71f7 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
@@ -1,26 +1,35 @@
 --- 
 +++ 
-@@ -3,8 +3,8 @@
- <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deleted-applications">
+@@ -4,9 +4,6 @@
    <div class="modal-dialog" role="document">
      <div class="modal-content">
--      <div class="modal-header">
+       <div class="modal-header">
 -        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-+      <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>
+-          <span aria-hidden="true">&times;</span>
+-        </button>
          <h4 class="modal-title">
-@@ -34,7 +34,7 @@
+           {% if export_instance.type == 'form' %}
+             {% trans "Show Deleted Questions" %}
+@@ -14,6 +11,7 @@
+             {% 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>
+@@ -34,8 +32,8 @@
            {% trans "Unable to process applications. Please report an issue if this persists" %}
          </p>
          <div class="spacer"></div>
 -        <div class="progress " data-bind="visible: showBuildSchemaProgressBar">
-+        <div class="progress " data-bind="visible: showBuildSchemaProgressBar">  {# todo B5: css:progress #}
-           <div class="progress-bar" role="progressbar" data-bind="
+-          <div class="progress-bar" role="progressbar" data-bind="
++        <div class="progress" role="progressbar" data-bind="visible: showBuildSchemaProgressBar">
++          <div class="progress-bar" data-bind="
                style: {
                    width: buildSchemaProgress() + '%'
-@@ -43,7 +43,7 @@
+               }
+@@ -43,7 +41,7 @@
          </div>
        </div>
        <div class="modal-footer">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt
index f664db38079b..72d053b1cceb 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt
@@ -1,17 +1,20 @@
 --- 
 +++ 
-@@ -3,8 +3,8 @@
- <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deprecated-properties">
+@@ -4,12 +4,10 @@
    <div class="modal-dialog" role="document">
      <div class="modal-content">
--      <div class="modal-header">
+       <div class="modal-header">
 -        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-+      <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>
+-          <span aria-hidden="true">&times;</span>
+-        </button>
          <h4 class="modal-title">
-@@ -21,7 +21,7 @@
+           {% 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>
+@@ -21,7 +19,7 @@
          <div class="spacer"></div>
        </div>
        <div class="modal-footer">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/new_customize_export_templates.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/new_customize_export_templates.html.diff.txt
index 978204e302e6..f7ffe9e9804a 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/new_customize_export_templates.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/new_customize_export_templates.html.diff.txt
@@ -1,14 +1,6 @@
 --- 
 +++ 
-@@ -7,22 +7,22 @@
-     <legend data-bind="visible: table.isVisible(),
-                        visible: table.label() !== 'Case History'">
-       <span>
--        <input type="checkbox"
-+        <input type="checkbox"  {# todo B5: css:checkbox #}
-                data-bind="checked: table.selected, attr: { disabled: {{ disable_table_checkbox|JSON }} }" />
-       </span>
-       <span>
+@@ -14,15 +14,15 @@
          <span data-bind="text: table.label()" />
        </span>
        <span>
@@ -27,7 +19,7 @@
                  data-bind="click: function() {
                               $parent.tables.remove(table)
                             }">
-@@ -31,14 +31,14 @@
+@@ -31,46 +31,39 @@
        </div>
        <!-- /ko -->
      </legend>
@@ -37,46 +29,62 @@
        {% if not export_instance.is_odata_config %}
 -        <div class="form-group">
 -          <label class="col-sm-4 col-md-3 col-lg-2 control-label">
-+        <div class="form-group">  {# todo B5: css:form-group #}
-+          <label class="col-md-4 col-lg-3 col-xl-2 form-label">
++        <div class="mb-3">
++          <label class="form-label">
              {% trans "Sheet Name" %}
            </label>
 -          <div class="col-sm-9 col-md-8 col-lg-6">
-+          <div class="col-md-9 col-lg-8 col-xl-6">
-             <input type="text"
-                    class="form-control"
-                    data-bind="value: table.label" />
-@@ -46,11 +46,11 @@
+-            <input type="text"
+-                   class="form-control"
+-                   data-bind="value: table.label" />
+-          </div>
++          <input type="text"
++                 class="form-control"
++                 data-bind="value: table.label" />
          </div>
        {% endif %}
        <!-- ko if: table.is_user_defined -->
 -      <div class="form-group">
 -        <label class="col-sm-4 col-md-3 col-lg-2 control-label">
-+      <div class="form-group">  {# todo B5: css:form-group #}
-+        <label class="col-md-4 col-lg-3 col-xl-2 form-label">
++      <div class="mb-3">
++        <label class="form-label">
            {% trans "Custom Path" %}
          </label>
 -        <div class="col-sm-4 col-md-3 col-lg-2">
-+        <div class="col-md-4 col-lg-3 col-xl-2">
-           <input type="text"
-                  class="form-control"
-                  data-bind="value: table.customPathString" />
-@@ -59,11 +59,11 @@
+-          <input type="text"
+-                 class="form-control"
+-                 data-bind="value: table.customPathString" />
+-        </div>
++        <input type="text"
++               class="form-control"
++               data-bind="value: table.customPathString" />
+       </div>
        <!-- /ko -->
  
        {% if request|toggle_enabled:"SUPPORT_GEO_JSON_EXPORT" %}
 -      <div id="select-geo-property" class="form-group" hidden>
 -        <label class="col-sm-4 col-md-3 col-lg-2 control-label" for="geo-property-select">
-+      <div id="select-geo-property" class="form-group" hidden>  {# todo B5: css:form-group #}
-+        <label class="col-md-4 col-lg-3 col-xl-2 form-label" for="geo-property-select">
++      <div id="select-geo-property" class="mb-3" hidden>
++        <label class="form-label" for="geo-property-select">
            {% trans 'Select geo property' %}
          </label>
 -        <div class="col-sm-9 col-md-8 col-lg-6">
-+        <div class="col-md-9 col-lg-8 col-xl-6">
-           <select
-             id="geo-property-select"
-             class="control form-control"
-@@ -128,13 +128,13 @@
+-          <select
+-            id="geo-property-select"
+-            class="control form-control"
+-            data-bind="options: $parent.geoProperties,
+-              value: table.selected_geo_property">
+-          </select>
+-        </div>
++        <select
++          id="geo-property-select"
++          class="control form-control"
++          data-bind="options: $parent.geoProperties, value: table.selected_geo_property">
++        </select>
+       </div>
+       {% endif %}
+ 
+@@ -128,13 +121,13 @@
               id="field-select">
          <thead>
            <tr class="nodrag nodrop">
@@ -93,7 +101,7 @@
                   data-bind="click: table.selectNone">
                  {% trans "Select None" %}
                </a>
-@@ -159,7 +159,7 @@
+@@ -159,7 +152,7 @@
  
                <!-- Advanced Button -->
                <button type="button"
@@ -102,7 +110,7 @@
                        data-bind="click: table.toggleShowAdvanced,
                                   css: {
                                     active: table.showAdvanced
-@@ -173,7 +173,7 @@
+@@ -173,7 +166,7 @@
                </button>
  
                <!-- Deleted Button -->
@@ -111,7 +119,7 @@
                        data-bind="click: $root.toggleShowDeleted.bind($root),
                                   css: {
                                     active: table.showDeleted
-@@ -198,7 +198,7 @@
+@@ -198,7 +191,7 @@
                <!-- Deprecated Button -->
                {% if show_deprecated_filter %}
                  <button type="button"
@@ -120,7 +128,7 @@
                          data-bind="click: table.toggleShowDeprecated,
                                    css: {
                                      active: table.showDeprecated
-@@ -215,18 +215,18 @@
+@@ -215,18 +208,18 @@
              <th data-bind="attr: { 'class': $root.displayColumnClass }">
                {% trans "Display" %}<br />
                {% if export_instance.type == 'form' %}
@@ -142,7 +150,7 @@
                  {% trans "Type" %}
                  <span data-bind="makeHqHelp: {
                                     name: '{% trans "Split multi-select data" %}',
-@@ -235,7 +235,7 @@
+@@ -235,7 +228,7 @@
                </th>
              {% endif %}
              {% if allow_deid %}
@@ -151,7 +159,7 @@
                    data-bind="visible: $root.isDeidColumnVisible()">
                  {% trans "Sensitivity" %}
                </th>
-@@ -247,7 +247,7 @@
+@@ -247,7 +240,7 @@
            <tfoot>
              <tr>
                <td colspan="100%">
@@ -160,34 +168,32 @@
                          data-bind="click: table.addUserDefinedExportColumn">
                    {% trans "Add custom export property" %}
                  </button>
-@@ -277,31 +277,31 @@
+@@ -277,7 +270,7 @@
                             success: column.selectedForSort,
                             'selected-for-sort': column.selectedForSort
                           }"
 -              {% if request|request_has_privilege:"EXPORT_MULTISORT" %}style="cursor:pointer"{% endif %}>
-+              {% if request|request_has_privilege:"EXPORT_MULTISORT" %}style="cursor:pointer"{% endif %}>  {# todo B5: inline style #}
++              {% if request|request_has_privilege:"EXPORT_MULTISORT" %}class="clickable"{% endif %}>
              <td class="text-center">
                <span class="sortable-handle">
                  <i class="fa-solid fa-up-down"></i>
-               </span>
-               &nbsp;&nbsp;&nbsp;
+@@ -286,13 +279,13 @@
                <!--ko if: ($root.is_deidentified() && column.item.isCaseName()) -->
--              <input type="checkbox"
-+              <input type="checkbox"  {# todo B5: css:checkbox #}
+               <input type="checkbox"
                       class="field-include"
-                      disabled="disabled" />
+-                     disabled="disabled" />
++                     disabled="disabled" />aaa
                <!--/ko-->
                <!--ko if: $root.isReservedOdataColumn(column, $parentContext.$index()) -->
--              <input type="checkbox"
-+              <input type="checkbox"  {# todo B5: css:checkbox #}
+               <input type="checkbox"
                       class="field-include"
                       checked="checked"
-                      disabled="disabled" />
+-                     disabled="disabled" />
++                     disabled="disabled" />bbb
                <!--/ko-->
                <!--ko ifnot: ($root.is_deidentified() && column.item.isCaseName()) || $root.isReservedOdataColumn(column, $parentContext.$index()) -->
--              <input type="checkbox"
-+              <input type="checkbox"  {# todo B5: css:checkbox #}
-                      class="field-include export-table-checkbox"
+               <input type="checkbox"
+@@ -300,8 +293,8 @@
                       data-bind="checked: column.selected" />
                <!--/ko-->
                <!-- ko if: column.isEditable() -->
@@ -198,7 +204,7 @@
                          data-bind="click: function() {
                                       $parent.columns.remove(column)
                                     }">
-@@ -313,14 +313,14 @@
+@@ -313,14 +306,14 @@
            {% if request|request_has_privilege:"EXPORT_MULTISORT" %}
              <td class="text-center">
                <span class="send-to-bottom">
@@ -215,22 +221,32 @@
                    <i class="fa fa-angle-double-up"></i>
                  </button>
                </span>
-@@ -336,11 +336,11 @@
+@@ -336,12 +329,12 @@
                </span>
                <span
                  data-bind="text: column.item.case_property_group_name"
 -                class="label label-default"
 -                style="background-color: #495057"
 +                class="badge text-bg-secondary"
-+                style="background-color: #495057"  {# todo B5: inline style #}
                ></span>
                <!-- ko if: !column.isEditable() -->
 -              <code data-toggle="tooltip"
-+              <code data-bs-toggle="tooltip"
++              <span data-bs-toggle="tooltip"
                      data-placement="top"
++                    class="font-monospace"
                      data-bind="text: column.formatProperty(),
                                 attr: {
-@@ -358,7 +358,7 @@
+                                  'data-original-title': column.help_text,
+@@ -350,7 +343,7 @@
+                                css: {
+                                  'export-tooltip': column.translatedHelp(),
+                                  'break-all-words': 1,
+-                               }"></code>
++                               }"></span>
+               <!-- /ko -->
+               <!-- ko if: column.isEditable() -->
+               <input type="text"
+@@ -358,7 +351,7 @@
                       data-bind="value: column.customPathString"/>
                <!-- /ko -->
                <!-- ko if: $root.isReservedOdataColumn(column, $parentContext.$index()) -->
@@ -239,7 +255,7 @@
                  {% trans "Required for OData" %}
                </span>
                <!-- /ko -->
-@@ -371,18 +371,18 @@
+@@ -371,57 +364,48 @@
              </td>
            {% if export_instance.type == 'case' and request|feature_preview_enabled:"SPLIT_MULTISELECT_CASE_EXPORT"%}
              <td>
@@ -249,53 +265,82 @@
                                 submit: column.addUserDefinedOption">
 -                <div class="form-group">
 -                  <select style="width:200px"
-+                <div class="form-group">  {# todo B5: css:form-group #}
-+                  <select style="width:200px"  {# todo B5: inline style #}
-                           class="form-control"
-                           data-bind="options: $root.splitTypes.userDefined,
-                                      value: column.split_type"></select>
-                 </div>
+-                          class="form-control"
+-                          data-bind="options: $root.splitTypes.userDefined,
+-                                     value: column.split_type"></select>
+-                </div>
++                <select style="width:200px"
++                        class="form-select"
++                        data-bind="options: $root.splitTypes.userDefined,
++                                   value: column.split_type"></select>
                  <!-- ko if: column.split_type() === $root.splitTypes.multiselect -->
 -                <div class="form-group">
 -                  <button class="btn btn-default btn-xs"
-+                <div class="form-group">  {# todo B5: css:form-group #}
-+                  <button class="btn btn-outline-primary btn-sm"
-                           data-bind="visible: !column.showOptions(),
-                                      click: function() {
-                                        column.showOptions(true);
-@@ -390,7 +390,7 @@
-                     {% trans "Show Options" %}
-                   </button>
- 
+-                          data-bind="visible: !column.showOptions(),
+-                                     click: function() {
+-                                       column.showOptions(true);
+-                                     }">
+-                    {% trans "Show Options" %}
+-                  </button>
+-
 -                  <button class="btn btn-default btn-xs"
-+                  <button class="btn btn-outline-primary btn-sm"
-                           data-bind="visible: column.showOptions(),
-                                      click: function() {
-                                        column.showOptions(false);
-@@ -403,20 +403,20 @@
+-                          data-bind="visible: column.showOptions(),
+-                                     click: function() {
+-                                       column.showOptions(false);
+-                                     }">
+-                    {% trans "Hide Options" %}
+-                  </button>
+-                </div>
++                <button class="btn btn-outline-primary btn-sm my-2"
++                        data-bind="visible: !column.showOptions(),
++                                   click: function() {
++                                     column.showOptions(true);
++                                   }">
++                  {% trans "Show Options" %}
++                </button>
++
++                <button class="btn btn-outline-primary btn-sm"
++                        data-bind="visible: column.showOptions(),
++                                   click: function() {
++                                     column.showOptions(false);
++                                   }">
++                  {% trans "Hide Options" %}
++                </button>
+                 <div data-bind="visible: column.showOptions()">
+                   <ul class="list-group"
                        data-bind="foreach: column.user_defined_options">
                      <li class="list-group-item">
                        <span data-bind="text: $data"></span>
 -                      <i style="cursor: pointer"
 -                         class="text-danger fa-regular fa-trash-can pull-right"
-+                      <i style="cursor: pointer"  {# todo B5: inline style #}
-+                         class="text-danger fa-regular fa-trash-can float-end"
++                      <i class="clickable text-danger fa-regular fa-trash-can float-end"
                           data-bind="click: column.removeUserDefinedOption.bind(column)"></i>
                      </li>
                    </ul>
 -                  <div class="form-group">
 -                    <div style="max-width: 200px"
-+                  <div class="form-group">  {# todo B5: css:form-group #}
-+                    <div style="max-width: 200px"  {# todo B5: inline style #}
-                          class="input-group">
-                       <input class="form-control input-sm"
-                              type="text"
-                              data-bind="value: column.userDefinedOptionToAdd"/>
+-                         class="input-group">
+-                      <input class="form-control input-sm"
+-                             type="text"
+-                             data-bind="value: column.userDefinedOptionToAdd"/>
 -                      <span class="input-group-btn">
-+                      <span class="input-group-btn">  {# todo B5: css:input-group-btn #}
-                         <button type="submit"
+-                        <button type="submit"
 -                                class="btn btn-default btn-sm"
-+                                class="btn btn-outline-primary btn-sm"
-                                 data-bind="click: column.addUserDefinedOption">
-                           {% trans "Add" %}
-                         </button>
+-                                data-bind="click: column.addUserDefinedOption">
+-                          {% trans "Add" %}
+-                        </button>
+-                      </span>
+-                    </div>
++                  <div style="max-width: 200px"
++                       class="input-group">
++                    <input class="form-control input-sm"
++                           type="text"
++                           data-bind="value: column.userDefinedOptionToAdd"/>
++                    <button type="submit"
++                            class="btn btn-outline-primary btn-sm"
++                            data-bind="click: column.addUserDefinedOption">
++                      {% trans "Add" %}
++                    </button>
+                   </div>
+                 </div>
+                 <!-- /ko -->
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/customize_export_new.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/customize_export_new.js.diff.txt
index c3cf4a8c797f..a9da212386c2 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/customize_export_new.js.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/customize_export_new.js.diff.txt
@@ -1,22 +1,31 @@
 --- 
 +++ 
-@@ -1,8 +1,8 @@
+@@ -1,13 +1,15 @@
 -hqDefine('export/js/bootstrap3/customize_export_new', [
 +hqDefine('export/js/bootstrap5/customize_export_new', [
      'jquery',
      'knockout',
++    'es6!hqwebapp/js/bootstrap5_loader',
      'hqwebapp/js/initial_page_data',
 -    'export/js/bootstrap3/models',
 +    'export/js/bootstrap5/models',
      'hqwebapp/js/toggles',
      'export/js/const',
  ], function (
-@@ -31,7 +31,7 @@
+     $,
+     ko,
++    bootstrap,
+     initialPageData,
+     models,
+     toggles,
+@@ -31,7 +33,9 @@
              "build_schema", "/a/---/data/export/build_full_schema/"
          );
          $('#customize-export').koApplyBindings(customExportView);
 -        $('.export-tooltip').tooltip();
-+        $('.export-tooltip').tooltip();  /* todo B5: plugin:tooltip */
++        $('.export-tooltip').each(function (index, trigger) {
++            new bootstrap.Tooltip(trigger);
++        });
  
          if (toggles.toggleEnabled('SUPPORT_GEO_JSON_EXPORT')) {
              const exportFormat = initialPageData.get('export_instance').export_format;
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/models.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/models.js.diff.txt
index b61c4275995a..55ccb1cc668f 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/models.js.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/models.js.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -4,7 +4,7 @@
+@@ -4,22 +4,24 @@
   *
   */
  
@@ -9,7 +9,10 @@
      'jquery',
      'knockout',
      'underscore',
-@@ -14,8 +14,8 @@
++    'es6!hqwebapp/js/bootstrap5_loader',
+     'hqwebapp/js/initial_page_data',
+     'hqwebapp/js/toggles',
+     'analytix/js/google',
      'analytix/js/kissmetrix',
      'export/js/const',
      'export/js/utils',
@@ -20,21 +23,26 @@
  ], function (
      $,
      ko,
-@@ -451,7 +451,7 @@
+     _,
++    bootstrap,
+     initialPageData,
+     toggles,
+     googleAnalytics,
+@@ -451,7 +453,7 @@
          table.showDeleted(!table.showDeleted());
  
          if (this.numberOfAppsToProcess > 0 && table.showDeleted()) {
 -            $('#export-process-deleted-applications').modal('show');
-+            $('#export-process-deleted-applications').modal('show');  /* todo B5: plugin:modal */
++            bootstrap.Modal.getOrCreateInstance('#export-process-deleted-applications').show();
          }
      };
  
-@@ -576,7 +576,7 @@
+@@ -576,7 +578,7 @@
          const queryString = window.location.search;
          const urlParams = new URLSearchParams(queryString);
          if (urlParams.get('load_deprecated') !== 'True' && table.showDeprecated()) {
 -            $('#export-process-deprecated-properties').modal('show');
-+            $('#export-process-deprecated-properties').modal('show');  /* todo B5: plugin:modal */
++            bootstrap.Modal.getOrCreateInstance('#export-process-deprecated-properties').show();
          }
      };
  
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/filters/sensitive_columns.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/filters/sensitive_columns.html.diff.txt
index ade3e959b8dd..e0ab207e8621 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/filters/sensitive_columns.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/filters/sensitive_columns.html.diff.txt
@@ -30,8 +30,14 @@
            <table class="table table-condensed">
              <thead>
              <th>&nbsp;</th>
-@@ -42,7 +42,7 @@
-                                                      explorerColumnsAutocomplete: $parent.suggestedProperties()"
+@@ -38,33 +38,33 @@
+               <td>
+                 <div class="has-feedback">
+                   <input type="text" class="form-control" data-bind="
+-                                                     value: name,
+-                                                     explorerColumnsAutocomplete: $parent.suggestedProperties()"
++                    value: name,
++                    explorerColumnsAutocomplete: $parent.suggestedProperties()"
                    />
                    <span class="form-control-feedback" data-bind="visible: meta_type">
 -                    <span class="label label-primary" data-bind="text: meta_type"></span>
@@ -39,7 +45,20 @@
                    </span>
                  </div>
                </td>
-@@ -57,14 +57,14 @@
+               <td>
+                 <div class="has-feedback">
+-                  <select class="form-control" data-bind="
+-                                                options: {{ property_label_options }},
+-                                                optionsText: 'name',
+-                                                optionsValue: 'type',
+-                                                value: label,
+-                                                "/>
++                  <select class="form-select" data-bind="
++                    options: {{ property_label_options }},
++                    optionsText: 'name',
++                    optionsValue: 'type',
++                    value: label,
++                  "></select>
                  </div>
                </td>
                <td>

From 48790bd3079596562aa43b320f57117bc3d2ea43 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 22 Oct 2024 13:01:07 +0000
Subject: [PATCH 14/16] "Bootstrap 5 Migration - Rebuilt diffs"

---
 .../export/dialogs/process_deleted_questions.html.diff.txt     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
index 254d8824fc22..48add89c71f7 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
@@ -18,7 +18,7 @@
        </div>
        <div class="modal-body">
          <p>
-@@ -34,7 +32,7 @@
+@@ -34,8 +32,8 @@
            {% trans "Unable to process applications. Please report an issue if this persists" %}
          </p>
          <div class="spacer"></div>
@@ -28,6 +28,7 @@
 +          <div class="progress-bar" data-bind="
                style: {
                    width: buildSchemaProgress() + '%'
+               }
 @@ -43,7 +41,7 @@
          </div>
        </div>

From 6e1b5d3170c38a6d850d0413757276bc707515be Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 22 Oct 2024 13:49:41 -0400
Subject: [PATCH 15/16] Updated tests to pass in both B3 and B5

---
 corehq/apps/export/static/export/js/utils.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/corehq/apps/export/static/export/js/utils.js b/corehq/apps/export/static/export/js/utils.js
index 6efad48bc6e2..bb631d566aa4 100644
--- a/corehq/apps/export/static/export/js/utils.js
+++ b/corehq/apps/export/static/export/js/utils.js
@@ -10,11 +10,11 @@ hqDefine('export/js/utils', [
     constants
 ) {
     var getTagCSSClass = function (tag) {
-        var cls = 'badge';
+        var cls = window.USE_BOOTRAP5 ? 'badge' : 'label';
         if (tag === constants.TAG_DELETED) {
-            return cls + ' text-bg-warning';
+            return cls + (window.USE_BOOTRAP5 ? ' text-bg-warning' : ' label-warning');
         } else {
-            return cls + ' text-bg-secondary';
+            return cls + (window.USE_BOOTRAP5 ? ' text-bg-secondary' : ' label-default');
         }
     };
 

From d3e0ea131b970ad7c2522fcd4c9e03c22cda38d2 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 22 Oct 2024 14:34:14 -0400
Subject: [PATCH 16/16] Fixed tests for real

---
 corehq/apps/export/static/export/js/utils.js      |  6 +++---
 .../export/spec/bootstrap5/Exports.Utils.spec.js  |  4 ++--
 .../export/spec/Exports.Utils.spec.js.diff.txt    | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/corehq/apps/export/static/export/js/utils.js b/corehq/apps/export/static/export/js/utils.js
index bb631d566aa4..477c2579ff35 100644
--- a/corehq/apps/export/static/export/js/utils.js
+++ b/corehq/apps/export/static/export/js/utils.js
@@ -10,11 +10,11 @@ hqDefine('export/js/utils', [
     constants
 ) {
     var getTagCSSClass = function (tag) {
-        var cls = window.USE_BOOTRAP5 ? 'badge' : 'label';
+        var cls = window.USE_BOOTSTRAP5 ? 'badge' : 'label';
         if (tag === constants.TAG_DELETED) {
-            return cls + (window.USE_BOOTRAP5 ? ' text-bg-warning' : ' label-warning');
+            return cls + (window.USE_BOOTSTRAP5 ? ' text-bg-warning' : ' label-warning');
         } else {
-            return cls + (window.USE_BOOTRAP5 ? ' text-bg-secondary' : ' label-default');
+            return cls + (window.USE_BOOTSTRAP5 ? ' text-bg-secondary' : ' label-default');
         }
     };
 
diff --git a/corehq/apps/export/static/export/spec/bootstrap5/Exports.Utils.spec.js b/corehq/apps/export/static/export/spec/bootstrap5/Exports.Utils.spec.js
index 8a9d0174c4a2..8f69741a3c1b 100644
--- a/corehq/apps/export/static/export/spec/bootstrap5/Exports.Utils.spec.js
+++ b/corehq/apps/export/static/export/spec/bootstrap5/Exports.Utils.spec.js
@@ -14,12 +14,12 @@ hqDefine("export/spec/bootstrap5/Exports.Utils.spec", [
         describe('#getTagCSSClass', function () {
             it('Should get regular tag class', function () {
                 var cls = utils.getTagCSSClass('random-tag');
-                assert.equal(cls, 'label label-default');
+                assert.equal(cls, 'badge text-bg-secondary');
             });
 
             it('Should get warning tag class', function () {
                 var cls = utils.getTagCSSClass(constants.TAG_DELETED);
-                assert.equal(cls, 'label label-warning');
+                assert.equal(cls, 'badge text-bg-warning');
             });
         });
 
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/spec/Exports.Utils.spec.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/spec/Exports.Utils.spec.js.diff.txt
index 81d8d4b92a3d..55ffef810a9a 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/spec/Exports.Utils.spec.js.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/spec/Exports.Utils.spec.js.diff.txt
@@ -11,3 +11,18 @@
      'export/js/utils',
  ], function (
      _,
+@@ -14,12 +14,12 @@
+         describe('#getTagCSSClass', function () {
+             it('Should get regular tag class', function () {
+                 var cls = utils.getTagCSSClass('random-tag');
+-                assert.equal(cls, 'label label-default');
++                assert.equal(cls, 'badge text-bg-secondary');
+             });
+ 
+             it('Should get warning tag class', function () {
+                 var cls = utils.getTagCSSClass(constants.TAG_DELETED);
+-                assert.equal(cls, 'label label-warning');
++                assert.equal(cls, 'badge text-bg-warning');
+             });
+         });
+