Improve instructions for deprecated "Web Apps Permissions" feature

corehq/apps/cloudcare/static/cloudcare/js/config.js

@@ -1,4 +1,4 @@
 'use strict';
 hqDefine("cloudcare/js/config", [
     'jquery',
     'underscore',
@@ -45,6 +45,7 @@
             self.restrict = addJsonAccess(ko.observable());
             self.app_groups = ko.observableArray();
             self._lock = ko.observable(false);
+            self.disable_feature_flag = ko.observable(false);
         };
         ApplicationAccess.wrap = function (o) {
             var self = new ApplicationAccess();
@@ -91,6 +92,9 @@
                         data: ko.mapping.toJSON(self.applicationAccess),
                         success: function (data) {
                             self.applicationAccess._rev = data._rev;
+                            if (data.redirect_url) {
+                                window.location.href = data.redirect_url;
+                            }
                         },
                     });
                 },

corehq/apps/cloudcare/templates/cloudcare/config.html

@@ -20,6 +20,38 @@ <h2>{% trans 'Manage Web Apps Permissions' %}</h2>
       Please avoid using <em>both</em> this configuration and Roles & Permissions to manage access.
       Please contact <a href="mailto:{{ SUPPORT_EMAIL }}">CommCare Support</a> if you need assistance
       setting up access via Roles & Permissions.
+      <br/><br/>
+      <h5>Transitioning from the Deprecated Feature to Roles & Permissions</h5>
+
+      <p>For the simplest case where each mobile worker belongs to only one group, follow these steps:</p>
+
+      <ol>
+        <li>
+          <strong>Set up a role for each group</strong><br/>
+          Create a corresponding role in the Roles & Permissions system for every existing group.
+        </li>
+        <li>
+          <strong>Configure permissions for each role</strong><br/>
+          Ensure that each role is granted the same permissions and access to apps that were previously available to the corresponding group.
+        </li>
+        <li>
+          <strong>Assign mobile workers to their new roles</strong><br/>
+          Map each mobile worker to the appropriate role that matches their previous group membership.
+        </li>
+        <li>
+          <strong>Enable Roles & Permissions for Web Apps access</strong><br/>
+          On the settings page, select the option to "Use Roles & Permissions to manage Web Apps access" and click <strong>Save</strong>.
+        </li>
+        <li>
+          <strong>Test access for mobile workers</strong><br/>
+          Verify that all mobile workers can access the apps as expected, based on their assigned roles.
+        </li>
+        <li>
+          <strong>(Optional) Deactivate the deprecated feature</strong><br/>
+          Although not required for the new setup to work, you can disable the deprecated feature for cleaner management.
+          Simply check the box to turn it off and click <strong>Save</strong>.
+        </li>
+      </ol>
     {% endblocktrans %}
   </div>
   <section id="cloudcare-app-settings" style="display: none">
@@ -28,13 +60,22 @@ <h2>{% trans 'Manage Web Apps Permissions' %}</h2>
       <div class="form-check">
         <input class="form-check-input" type="radio" value="false" data-bind="checked: restrict.JSON" id="radioFalse"/>
         <label class="form-check-label" for="radioFalse">
-          {% blocktrans %}Allow all mobile workers to see all Web Apps applications.{% endblocktrans %}
+          {% blocktrans %}Use Roles & Permissions to manage Web Apps access{% endblocktrans %}
+        </label>
+      </div>
+      <div class="form-check ms-3" data-bind="visible: !restrict()">
+        <input type="checkbox" class="form-check-input" data-bind="checked: disable_feature_flag" id="disable_ff"/>
+        <label class="form-check-label" for="disable_ff">
+          {% blocktrans %}
+          Web Apps permissions have been transferred to "Roles & Permissions", and this deprecated feature can be turned off.
+          Please note that once you "save", you will no longer have access to this page.
+          {% endblocktrans %}
         </label>
       </div>
       <div class="form-check">
         <input class="form-check-input" type="radio" value="true" data-bind="checked: restrict.JSON" id="radioTrue"/>
         <label class="form-check-label" for="radioTrue">
-          {% blocktrans %}Customize each mobile worker's access to Web Apps{% endblocktrans %}
+          {% blocktrans %}Manage Web Apps access for each mobile worker based on their group{% endblocktrans %}
         </label>
       </div>
       <div data-bind="visible: restrict">

corehq/apps/cloudcare/views.py

@@ -410,12 +410,21 @@ def put(self, request, *args, **kwargs):
         body = json.loads(request.body.decode('utf-8'))
         access = get_application_access_for_domain(self.domain)
         access.restrict = body['restrict']
+        disable_ff = body['disable_feature_flag']
         access.sqlappgroup_set.all().delete()
         access.sqlappgroup_set.set([
             SQLAppGroup(app_id=app_group['app_id'], group_id=app_group.get('group_id'))
             for app_group in body['app_groups']
         ], bulk=False)
         access.save()
+        if disable_ff and not access.restrict:
+            toggles.WEB_APPS_PERMISSIONS_VIA_GROUPS.set(self.domain, False, namespace=toggles.NAMESPACE_DOMAIN)
+            # This view is not accessible after the FF is disabled
+            redirect_url = reverse('users_default', args=[self.domain])
+            return JsonResponse({
+                'success': 1,
+                'redirect_url': redirect_url,
+            })
         return json_response({'success': 1})
 
 

corehq/apps/users/static/users/js/roles.js

@@ -1,4 +1,4 @@
 'use strict';
 
 hqDefine('users/js/roles',[
     'jquery',
@@ -206,6 +206,7 @@
                 self.preventRoleDelete = data.preventRoleDelete;
                 self.hasUnpermittedLocationRestriction = data.has_unpermitted_location_restriction || false;
 
+
                 self.restrictRoleChecked = ko.computed(function () {
                     return data.manageRoleAssignments.specific.some(role => role.value() && !role.access_all_locations);
                 });
@@ -578,15 +579,16 @@
                         }
                     ),
                 ];
-
-                self.webAppsPermissions = selectPermissionModel(
+                let webAppsPermissions = selectPermissionModel(
                     'access_web_apps',
                     self.accessWebAppsPermission,
                     {
                         permissionText: gettext("Use Web Apps for online data entry"),
                         listHeading: gettext("Select which web apps the role has access to:"),
                     }
                 );
+                webAppsPermissions.hasRestrictedApplicationAccess = root.hasRestrictedApplicationAccess;
+                self.webAppsPermissions = webAppsPermissions;
 
                 // Automatically disable "Access APIs" when "Full Organization Access" is disabled
                 self.permissions.access_all_locations.subscribe(() => {
@@ -666,6 +668,7 @@
         self.attendanceTrackingPrivilege = o.attendanceTrackingPrivilege;
         self.unlockLinkedRoles = ko.observable(false);
         self.canEditLinkedData = o.canEditLinkedData;
+        self.hasRestrictedApplicationAccess = o.hasRestrictedApplicationAccess;
 
         self.userRoles = ko.observableArray(ko.utils.arrayMap(o.userRoles, function (userRole) {
             return UserRole.wrap(userRole);

corehq/apps/users/static/users/js/roles_and_permissions.js

@@ -75,6 +75,7 @@ hqDefine("users/js/roles_and_permissions",[
             dataRegistryChoices: initialPageData.get("data_registry_choices"),
             canEditLinkedData: initialPageData.get("can_edit_linked_data"),
             commcareAnalyticsRoles: initialPageData.get('commcare_analytics_roles'),
+            hasRestrictedApplicationAccess: initialPageData.get('has_restricted_application_access'),
         });
     });
 });

corehq/apps/users/templates/users/partials/edit_role_modal.html

@@ -576,8 +576,19 @@ <h4 class="modal-title" data-bind="text: modalTitle"></h4>
 </div>
 
 <script type="text/html" id="permission_all_selected_none">
-  <div class="form-group">
-    <label class="col-sm-4 control-label" data-bind="text: text"></label>
+  <div class="form-group" data-bind="css: {'has-warning': id === 'access_web_apps' && hasRestrictedApplicationAccess}">
+    <div class="col-sm-4 control-label">
+      <label data-bind="text: text"></label>
+      <!-- ko if: id === 'access_web_apps' && hasRestrictedApplicationAccess -->
+        <span class='help-block'>
+          {% url "cloudcare_app_settings" domain as manage_web_apps_permissions_url %}
+          {% blocktrans %}
+            This permission is already configured via <a target="_blank" href="{{ manage_web_apps_permissions_url }}">Manage Web Apps Permissions</a>.
+            Do not also manage access here.
+          {% endblocktrans %}
+        </span>
+      <!-- /ko -->
+    </div>
     <div class="col-sm-8 controls">
       <select class="form-control" data-bind="
         attr: { 'id': id },
@@ -588,12 +599,8 @@ <h4 class="modal-title" data-bind="text: modalTitle"></h4>
         <option value="none" data-bind="text: accessNoneText"></option>
         <option value="all" data-bind="text: accessAllText"></option>
         <option value="selected" data-bind="text: accessSelectedText"></option>
-    </select>
-    </div>
-  </div>
-  <div class="form-group" data-bind="visible: showItems, css: {'has-error': hasError()}">
-    <div class="col-sm-8 col-sm-offset-4 controls">
-      <div class="panel panel-default">
+      </select>
+      <div class="panel panel-default"data-bind="visible: showItems, css: {'has-error': hasError()}" style="margin-top: 15px;">
         <div class="panel-heading" data-bind="text: listHeading"></div>
         <div class="panel-body">
           <div data-bind="foreach: specific, slideVisible: showItems">

corehq/apps/users/templates/users/roles_and_permissions.html

@@ -24,6 +24,7 @@
   {% initial_page_data "data_registry_choices" data_registry_choices %}
   {% initial_page_data "can_edit_linked_data" can_edit_linked_data %}
   {% initial_page_data "commcare_analytics_roles" commcare_analytics_roles %}
+  {% initial_page_data "has_restricted_application_access" has_restricted_application_access %}
 
   <p class="lead">
     {% if can_edit_roles %}

corehq/apps/users/views/__init__.py

@@ -10,7 +10,7 @@
 from couchdbkit.exceptions import ResourceNotFound
 from crispy_forms.utils import render_crispy_form
 
-from corehq.apps.cloudcare.dbaccessors import get_cloudcare_apps
+from corehq.apps.cloudcare.dbaccessors import get_cloudcare_apps, get_application_access_for_domain
 from corehq.apps.custom_data_fields.edit_entity import CustomDataEditor
 from corehq.apps.custom_data_fields.models import CustomDataFieldsProfile, CustomDataFieldsDefinition
 from corehq.apps.registry.utils import get_data_registry_dropdown_options
@@ -779,6 +779,10 @@ def page_context(self):
             'export_ownership_enabled': domain_has_privilege(self.domain, privileges.EXPORT_OWNERSHIP),
             'data_registry_choices': get_data_registry_dropdown_options(self.domain),
             'commcare_analytics_roles': _commcare_analytics_roles_options(),
+            'has_restricted_application_access': (
+                get_application_access_for_domain(self.domain).restrict
+                and toggles.WEB_APPS_PERMISSIONS_VIA_GROUPS.enabled(self.domain)
+            ),
         }