[B5] Migrate first reports to bootstrap 5!

corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/filters/multi_option.html.diff.txt

@@ -1,8 +1,55 @@
 --- 
 +++ 
-@@ -1,4 +1,4 @@
+@@ -1,26 +1,37 @@
 -{% extends 'reports/filters/bootstrap3/base.html' %}
 +{% extends 'reports/filters/bootstrap5/base.html' %}
  {% load hq_shared_tags %}
  {% block filter_content %}
    {% if not endpoint %}
+-    <select class="{{ css_class }} form-control report-filter-multi-option"
+-            multiple="true"
+-            data-bind="options: select_params, optionsText: 'text', optionsValue: 'val', selectedOptions: current_selection"
+-            data-options="{% html_attr select.options %}"
+-            data-selected="{% html_attr select.selected %}"
+-            placeholder="{{ select.placeholder }}"
+-            name="{{ slug }}"></select>
++    <select
++      class="{{ css_class }} form-control report-filter-multi-option"
++      name="{{ slug }}"
++      multiple="true"
++      placeholder="{{ select.placeholder }}"
++      data-bind="
++        ptions: select_params,
++        optionsText: 'text',
++        optionsValue: 'val',
++        selectedOptions: current_selection
++      "
++      data-options="{% html_attr select.options %}"
++      data-selected="{% html_attr select.selected %}"
++    ></select>
+   {% else %}
+-    <select data-endpoint="{% html_attr endpoint %}"
+-            data-options="{% html_attr select.options %}"
+-            data-selected="{% html_attr select.selected %}"
+-            class="{{ css_class }} form-control report-filter-multi-option"
+-            placeholder="{{ select.placeholder }}"
+-            name="{{ slug }}"></select>
++    <select
++      class="{{ css_class }} form-control report-filter-multi-option"
++      name="{{ slug }}"
++      placeholder="{{ select.placeholder }}"
++      data-endpoint="{% html_attr endpoint %}"
++      data-options="{% html_attr select.options %}"
++      data-selected="{% html_attr select.selected %}"
++    ></select>
+   {% endif %}
+   {% if filter_help_inline or search_help_inline %}
+     <span class="help-block">
+       {{ filter_help_inline }}
+-      {% if filter_help_inline and search_help_inline %}<br>{% endif %}
++      {% if filter_help_inline and search_help_inline %}
++        <br />
++      {% endif %}
+       {{ search_help_inline }}
+     </span>
+   {% endif %}

corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/filters/simple.html.diff.txt

@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,9 +1,9 @@
+@@ -1,29 +1,33 @@
 -{% extends 'reports/filters/bootstrap3/base.html' %}
 +{% extends 'reports/filters/bootstrap5/base.html' %}
  {% load hq_shared_tags %}
@@ -10,14 +10,46 @@
 -      <div class="col-xs-11">
 +      <div class="col-sm-11">
    {% endif %}
-       <input id="{{ css_id }}"
-              name="{{ slug }}"
-@@ -18,7 +18,7 @@
-       {% endif %}
+-      <input id="{{ css_id }}"
+-             name="{{ slug }}"
+-             type="text"
+-             {% if required %}required{% endif %}
+-             class="form-control {% block input_css_class %}{% endblock %}" value="{{ default }}">
+-      {% if help_inline %}
+-        <p class="help-block">
+-          <i class="fa fa-info-circle"></i>
+-          {{ help_inline }}
+-        </p>
+-      {% endif %}
++        <input
++          id="{{ css_id }}"
++          class="form-control {% block input_css_class %}{% endblock %}"
++          name="{{ slug }}"
++          value="{{ default }}"
++          type="text"
++          {% if required %}required{% endif %}
++        />
++        {% if help_inline %}
++          <p class="help-block">
++            <i class="fa fa-info-circle"></i>
++            {{ help_inline }}
++          </p>
++        {% endif %}
    {% if help_title and help_content %}
        </div>
 -      <div class="col-xs-1">
+-                <span class="hq-help-template"
+-                      data-title="{{ help_title }}"
+-                      data-content="{{ help_content }}"
+-                      data-placement="left"
+-                ></span>
 +      <div class="col-sm-1">
-                 <span class="hq-help-template"
-                       data-title="{{ help_title }}"
-                       data-content="{{ help_content }}"
++        <span
++          class="hq-help-template"
++          data-title="{{ help_title }}"
++          data-content="{{ help_content }}"
++          data-placement="left"
++        ></span>
+       </div>
+     </div>
+   {% endif %}

corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/filters/single_option.html.diff.txt

@@ -1,26 +1,53 @@
 --- 
 +++ 
-@@ -1,4 +1,4 @@
+@@ -1,23 +1,33 @@
 -{% extends 'reports/filters/bootstrap3/base.html' %}
 +{% extends 'reports/filters/bootstrap5/base.html' %}
  {% load hq_shared_tags %}
  {% block filter_content %}
    {% if pagination.enabled %}
-@@ -7,7 +7,7 @@
-             data-handler="{{ pagination.handler }}"
-             data-url="{{ pagination.url }}"
-             data-action="{{ pagination.action }}"
+-    <select id="{{ css_id }}"
+-            class="input form-control report-filter-single-option-paginated"
+-            data-handler="{{ pagination.handler }}"
+-            data-url="{{ pagination.url }}"
+-            data-action="{{ pagination.action }}"
 -            style="width: 100%"
-+            style="width: 100%"  {# todo B5: inline style #}
-             data-placeholder="{{ select.default_text }}"
-             data-selected="{{ select.selected|default:'' }}"
-             name="{{ slug }}"></select>
-@@ -16,7 +16,7 @@
-             data-select-options="{% html_attr select.options %}"
-             data-selected="{{ select.selected|default:'' }}"
-             class="report-filter-single-option"
+-            data-placeholder="{{ select.default_text }}"
+-            data-selected="{{ select.selected|default:'' }}"
+-            name="{{ slug }}"></select>
++    <select
++      id="{{ css_id }}"
++      class="input form-control report-filter-single-option-paginated w-100"
++      name="{{ slug }}"
++      data-handler="{{ pagination.handler }}"
++      data-url="{{ pagination.url }}"
++      data-action="{{ pagination.action }}"
++      data-placeholder="{{ select.default_text }}"
++      data-selected="{{ select.selected|default:'' }}"
++    ></select>
+   {% else %}
+-    <select id="{{ css_id }}"
+-            data-select-options="{% html_attr select.options %}"
+-            data-selected="{{ select.selected|default:'' }}"
+-            class="report-filter-single-option"
 -            style="width: 100%"
-+            style="width: 100%"  {# todo B5: inline style #}
-             data-bind="options: select_params, optionsText: 'text', optionsValue: 'val', {% if select.default_text %}optionsCaption: '{{ select.default_text|escapejs }}', {% endif %}value: current_selection"
-             name="{{ slug }}"></select>
+-            data-bind="options: select_params, optionsText: 'text', optionsValue: 'val', {% if select.default_text %}optionsCaption: '{{ select.default_text|escapejs }}', {% endif %}value: current_selection"
+-            name="{{ slug }}"></select>
++    <select
++      id="{{ css_id }}"
++      class="report-filter-single-option w-100"
++      name="{{ slug }}"
++      data-select-options="{% html_attr select.options %}"
++      data-selected="{{ select.selected|default:'' }}"
++      data-bind="
++        options: select_params,
++        optionsText: 'text',
++        optionsValue: 'val',
++        {% if select.default_text %}
++          optionsCaption: '{{ select.default_text|escapejs }}',
++        {% endif %}
++        value: current_selection
++      "
++    ></select>
    {% endif %}
+ {% endblock %}

corehq/apps/hqwebapp/utils/bootstrap/reports/progress/bootstrap3_to_5.json

@@ -1,5 +1,19 @@
 {
-  "reports": [],
-  "filters": [],
-  "filter_templates": []
+  "reports": [
+    "ApplicationStatusReport",
+    "CaseListReport"
+  ],
+  "filters": [
+    "corehq.apps.reports.filters.case_list.CaseListFilter",
+    "corehq.apps.reports.filters.select.CaseTypeFilter",
+    "corehq.apps.reports.filters.select.SelectApplicationFilter",
+    "corehq.apps.reports.filters.select.SelectOpenCloseFilter",
+    "corehq.apps.reports.filters.users.ExpandedMobileWorkerFilter",
+    "corehq.apps.reports.standard.cases.filters.CaseSearchFilter"
+  ],
+  "filter_templates": [
+    "reports/filters/bootstrap5/multi_option.html",
+    "reports/filters/bootstrap5/simple.html",
+    "reports/filters/bootstrap5/single_option.html"
+  ]
 }

corehq/apps/reports/standard/cases/basic.py

@@ -155,6 +155,7 @@ class CaseListReport(CaseListMixin, ProjectReport, ReportDataSource):
 
     name = gettext_lazy('Case List')
     slug = 'case_list'
+    use_bootstrap5 = True
 
     @classmethod
     def get_subpages(cls):
@@ -201,13 +202,20 @@ def slugs(self):
     @property
     def headers(self):
         headers = DataTablesHeader(
-            DataTablesColumn(_("Case Type"), prop_name="type.exact"),
-            DataTablesColumn(_("Name"), prop_name="name.exact", css_class="case-name-link"),
-            DataTablesColumn(_("Owner"), prop_name="owner_display", sortable=False),
-            DataTablesColumn(_("Created Date"), prop_name="opened_on"),
-            DataTablesColumn(_("Created By"), prop_name="opened_by_display", sortable=False),
-            DataTablesColumn(_("Modified Date"), prop_name="modified_on"),
-            DataTablesColumn(_("Status"), prop_name="get_status_display", sortable=False)
+            DataTablesColumn(_("Case Type"), prop_name="type.exact",
+                             use_bootstrap5=self.use_bootstrap5),
+            DataTablesColumn(_("Name"), prop_name="name.exact", css_class="case-name-link",
+                             use_bootstrap5=self.use_bootstrap5),
+            DataTablesColumn(_("Owner"), prop_name="owner_display", sortable=False,
+                             use_bootstrap5=self.use_bootstrap5),
+            DataTablesColumn(_("Created Date"), prop_name="opened_on",
+                             use_bootstrap5=self.use_bootstrap5),
+            DataTablesColumn(_("Created By"), prop_name="opened_by_display", sortable=False,
+                             use_bootstrap5=self.use_bootstrap5),
+            DataTablesColumn(_("Modified Date"), prop_name="modified_on",
+                             use_bootstrap5=self.use_bootstrap5),
+            DataTablesColumn(_("Status"), prop_name="get_status_display", sortable=False,
+                             use_bootstrap5=self.use_bootstrap5)
         )
         headers.custom_sort = [[5, 'desc']]
         return headers

corehq/apps/reports/standard/cases/case_list_explorer.py

@@ -59,6 +59,7 @@ class CaseListExplorer(CaseListReport, XpathCaseSearchFilterMixin):
     search_class = CaseSearchES
     description = _("Use Case List Explorer to run deep searches on your cases by case properties.  ")
     documentation_link = DOCS_LINK_CASE_LIST_EXPLORER
+    use_bootstrap5 = False
 
     exportable = True
     exportable_all = True

corehq/apps/reports/standard/cases/duplicate_cases.py

@@ -20,6 +20,7 @@ class DuplicateCasesExplorer(CaseListExplorer):
     name = _("Duplicate Cases")
     slug = 'duplicate_cases'
     description = _("Identify and manage duplicate cases")
+    use_bootstrap5 = False
 
     fields = [
         DuplicateCaseRuleFilter,