From 12d01d1e7fb08a581df0d41d6e489f59a615f975 Mon Sep 17 00:00:00 2001
From: Jonathan Tang <Jonahtang738@gmail.com>
Date: Thu, 29 Aug 2024 16:48:59 -0700
Subject: [PATCH] feat: visually denote active persistent menu item

---
 .../static/cloudcare/js/formplayer/menus/controller.js   | 9 ++++++---
 .../static/cloudcare/js/formplayer/menus/views.js        | 3 ++-
 .../cloudcare/partials/menu/persistent_menu.html         | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
index f1ef3df801f4..cd79a170e972 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
@@ -159,7 +159,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", [
         if (!appPreview && menuResponse.persistentMenu) {
             FormplayerFrontend.regions.getRegion('persistentMenu').show(
                 views.PersistentMenuView({
-                    collection: _toMenuCommands(menuResponse.persistentMenu, []),
+                    collection: _toMenuCommands(menuResponse.persistentMenu, [], menuResponse.selections),
                 }).render());
         } else {
             FormplayerFrontend.regions.getRegion('persistentMenu').empty();
@@ -170,7 +170,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", [
         }
     };
 
-    var _toMenuCommands = function (menuCommands, priorSelections) {
+    var _toMenuCommands = function (menuCommands, priorSelections, activeSelection) {
         return new Backbone.Collection(_.map(menuCommands, function (menuCommand) {
             const command = _.pick(menuCommand, [
                 'index',
@@ -181,7 +181,10 @@ hqDefine("cloudcare/js/formplayer/menus/controller", [
             ]);
             // Store an array of the commands needed to navigate to each nested menu item
             command.selections = priorSelections.concat([command.index]);
-            command.commands = _toMenuCommands(command.commands, command.selections);
+            if (JSON.stringify(command.selections) === JSON.stringify(activeSelection)) {
+                command.isActiveSelection = true;
+            }
+            command.commands = _toMenuCommands(command.commands, command.selections, activeSelection);
             return new Backbone.Model(command);
         }));
     };
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
index 08c3cab7d221..ac19191b958a 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -1499,10 +1499,11 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
         templateContext: function () {
             const appId = formplayerUtils.currentUrlToObject().appId,
                 imageUri = this.model.get('imageUri'),
-                  icons = {JUMP: 'fa-pencil', NEXT: 'fa-regular fa-folder', ENTITY_SELECT: 'fa-list-ul'};
+                icons = {JUMP: 'fa-pencil', NEXT: 'fa-regular fa-folder', ENTITY_SELECT: 'fa-list-ul'};
             return {
                 imageUri: imageUri ? FormplayerFrontend.getChannel().request('resourceMap', imageUri, appId) : "",
                 iconClass: icons[this.model.get('navigationState')] || 'fa-arrow-up-right-from-square',
+                isActive: this.model.get('isActiveSelection'),
             };
         },
         onRender: function () {
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
index 70625ff8ef99..0fa8eae4ec0a 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
@@ -41,7 +41,7 @@ <h5 class="offcanvas-title position-relative" id="persistent-menu-label">
     <% } else { %>
       <i class="fa <%- iconClass %> persistent-menu-image" aria-hidden="true"></i>
     <% } %>
-    <a class="align-middle stretched-link text-reset" href="#"
+    <a class="align-middle stretched-link text-reset <%= isActive ? 'fw-bold' : '' %>" href="#"
        data-bs-toggle="offcanvas" data-bs-target="#persistent-menu-container">
       <%- displayText %>
     </a>