Merge pull request #33958 from dimagi/ze/improve-dd-deprecate-ui

Improve UI for Deprecating Case Types in Data Dictionary

corehq/apps/data_dictionary/static/data_dictionary/js/data_dictionary.js

@@ -176,6 +176,14 @@ hqDefine("data_dictionary/js/data_dictionary", [
         self.showAll = ko.observable(false);
         self.availableDataTypes = typeChoices;
         self.fhirResourceTypes = ko.observableArray(fhirResourceTypes);
+
+        const params = new URLSearchParams(document.location.search);
+        self.showDeprecatedCaseTypes = ko.observable(params.get("load_deprecated_case_types") !== null);
+
+        // Elements with this class have a hidden class to hide them on page load. If we don't do this, then the elements
+        // will flash on the page for a bit while the KO bindings are being applied.
+        $(".deprecate-case-type").removeClass('hidden');
+
         self.saveButton = hqMain.initSaveButton({
             unsavedMessage: gettext("You have unsaved changes to your data dictionary."),
             save: function () {
@@ -241,7 +249,7 @@ hqDefine("data_dictionary/js/data_dictionary", [
         };
 
         self.init = function (callback) {
-            $.getJSON(dataUrl)
+            $.getJSON(dataUrl, {load_deprecated_case_types: self.showDeprecatedCaseTypes()})
                 .done(function (data) {
                     _.each(data.case_types, function (caseTypeData) {
                         var caseTypeObj = caseType(
@@ -440,6 +448,17 @@ hqDefine("data_dictionary/js/data_dictionary", [
             self.removefhirResourceType(false);
         };
 
+        self.toggleShowDeprecatedCaseTypes = function () {
+            self.showDeprecatedCaseTypes(!self.showDeprecatedCaseTypes());
+            const pageUrl = new URL(window.location.href);
+            if (self.showDeprecatedCaseTypes()) {
+                pageUrl.searchParams.append('load_deprecated_case_types', true);
+            } else {
+                pageUrl.searchParams.delete('load_deprecated_case_types');
+            }
+            window.location.href = pageUrl;
+        };
+
         // CREATE workflow
         self.name = ko.observable("").extend({
             rateLimit: { method: "notifyWhenChangesStop", timeout: 400 },

corehq/apps/data_dictionary/templates/data_dictionary/base.html

@@ -22,7 +22,7 @@ <h2 class="text-hq-nav-header">{% trans "Data Dictionary" %}</h2>
       {# navigation handle by URL hash #}
       <a data-bind="attr: {href: $data.url}">
         <span data-bind="text: $data.name" style="display: inline-block"></span>
-        <span data-bind="visible: $data.deprecated" class="label label-warning">{% trans "deprecated" %}</span>
+        <span data-bind="visible: $data.deprecated" class="hidden deprecate-case-type label label-warning">{% trans "deprecated" %}</span>
       </a>
     </li>
     <!-- /ko -->
@@ -33,6 +33,17 @@ <h2 class="text-hq-nav-header">{% trans "Data Dictionary" %}</h2>
           {% trans "Add Case Type" %}
         </a>
       </li>
+      <li>
+        <a class="hidden deprecate-case-type" data-bind="click: $root.toggleShowDeprecatedCaseTypes">
+            <i class="fa fa-archive"></i>
+            <span data-bind="hidden: $root.showDeprecatedCaseTypes">
+              {% trans 'Show Deprecated Case Types' %}
+            </span>
+            <span data-bind="visible: $root.showDeprecatedCaseTypes">
+              {% trans 'Hide Deprecated Case Types' %}
+            </span>
+        </a>
+      </li>
     {% endif %}
   </ul>
 
@@ -134,7 +145,7 @@ <h4 class="modal-title">{% trans "Create a new Case Type" %}</h4>
     <div class="col-md-12">
       <div>
         <h3 data-bind="text: $root.activeCaseType()" style="display: inline-block;"></h3>
-        <span data-bind="visible: $root.isActiveCaseTypeDeprecated()" class="label label-warning" style="display: inline-block;">{% trans "deprecated" %}</span>
+        <span data-bind="visible: $root.isActiveCaseTypeDeprecated()" class="deprecate-case-type hidden label label-warning" style="display: inline-block;">{% trans "deprecated" %}</span>
       </div>
       {% if fhir_integration_enabled %}
         <div id="fhir-resource-type-form" class="form-inline" data-bind="visible: fhirResourceTypes().length">

corehq/apps/data_dictionary/tests/test_view.py

@@ -339,28 +339,24 @@ def setUpClass(cls):
             group=cls.case_prop_group
         )
         cls.case_prop_obj.save()
+        cls.deprecated_case_type_obj = CaseType(name='depCaseType', domain=cls.domain_name, is_deprecated=True)
+        cls.deprecated_case_type_obj.save()
         cls.client = Client()
 
     @classmethod
     def tearDownClass(cls):
         cls.case_type_obj.delete()
+        cls.deprecated_case_type_obj.delete()
         cls.couch_user.delete(cls.domain_name, deleted_by=None)
         cls.domain.delete()
         super(DataDictionaryJsonTest, cls).tearDownClass()
 
     def setUp(self):
         self.endpoint = reverse('data_dictionary_json', args=[self.domain_name])
 
-    def test_no_access(self):
-        response = self.client.get(self.endpoint)
-        self.assertEqual(response.status_code, 302)
-
-    @patch('corehq.apps.data_dictionary.views.get_case_type_app_module_count', return_value={})
-    def test_get_json_success(self, *args):
-        self.client.login(username='test', password='foobar')
-        response = self.client.get(self.endpoint)
-        self.assertEqual(response.status_code, 200)
-        expected_response = {
+    @classmethod
+    def _get_case_type_json(self, with_deprecated=False):
+        expected_output = {
             "case_types": [
                 {
                     "name": "caseType",
@@ -388,8 +384,43 @@ def test_get_json_success(self, *args):
                     "is_deprecated": False,
                     "module_count": 0,
                     "properties": [],
-                }
+                },
             ],
             "geo_case_property": GPS_POINT_CASE_PROPERTY,
         }
+        if with_deprecated:
+            expected_output['case_types'].append(
+                {
+                    "name": "depCaseType",
+                    "fhir_resource_type": None,
+                    "groups": [
+                        {
+                            "name": '',
+                            "properties": []
+                        },
+                    ],
+                    "is_deprecated": True,
+                    "module_count": 0,
+                    "properties": [],
+                }
+            )
+        return expected_output
+
+    def test_no_access(self):
+        response = self.client.get(self.endpoint)
+        self.assertEqual(response.status_code, 302)
+
+    @patch('corehq.apps.data_dictionary.views.get_case_type_app_module_count', return_value={})
+    def test_get_json_success(self, *args):
+        self.client.login(username='test', password='foobar')
+        response = self.client.get(self.endpoint)
+        self.assertEqual(response.status_code, 200)
+        expected_response = self._get_case_type_json()
+        self.assertEqual(response.json(), expected_response)
+
+    @patch('corehq.apps.data_dictionary.views.get_case_type_app_module_count', return_value={})
+    def test_get_json_success_with_deprecated_case_types(self, *args):
+        self.client.login(username='test', password='foobar')
+        response = self.client.get(self.endpoint, data={'load_deprecated_case_types': 'true'})
+        expected_response = self._get_case_type_json(with_deprecated=True)
         self.assertEqual(response.json(), expected_response)

corehq/apps/data_dictionary/views.py

@@ -58,7 +58,10 @@ def data_dictionary_json(request, domain, case_type_name=None):
     props = []
     fhir_resource_type_name_by_case_type = {}
     fhir_resource_prop_by_case_prop = {}
-    queryset = CaseType.objects.filter(domain=domain).prefetch_related(
+    queryset = CaseType.objects.filter(domain=domain)
+    if not request.GET.get('load_deprecated_case_types', False) == 'true':
+        queryset = queryset.filter(is_deprecated=False)
+    queryset = queryset.prefetch_related(
         Prefetch('groups', queryset=CasePropertyGroup.objects.order_by('index')),
         Prefetch('properties', queryset=CaseProperty.objects.order_by('group_id', 'index')),
         Prefetch('properties__allowed_values', queryset=CasePropertyAllowedValue.objects.order_by('allowed_value'))