feat(form-builder): highlight the slug of the question that is curren…

…tly being edited in bold (#2700)

packages/form-builder/addon/components/cfb-form-editor/question-list/item.hbs

@@ -41,7 +41,11 @@
       <a
         data-test-edit-question
         href="#"
-        class="uk-width-auto uk-margin-small-right uk-text-bold"
+        class={{if
+          this.isActive
+          "uk-width-auto uk-margin-small-right uk-text-bold"
+          "uk-width-auto uk-margin-small-right"
+        }}
         {{on "click" (fn this.editQuestion @question)}}
       >
         {{@question.slug}}
@@ -51,7 +55,11 @@
       </a>
     {{else}}
       <span
-        class="uk-width-auto uk-margin-small-right uk-text-bold"
+        class={{if
+          this.isActive
+          "uk-width-auto uk-margin-small-right uk-text-bold"
+          "uk-width-auto uk-margin-small-right"
+        }}
       >{{@question.slug}}</span>
     {{/if}}
 

packages/form-builder/addon/components/cfb-form-editor/question-list/item.js

@@ -1,11 +1,14 @@
 import { action } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
+import { service } from "@ember/service";
 import Component from "@glimmer/component";
 import jexl from "jexl";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 
 export default class CfbFormEditorQuestionListItem extends Component {
+  @service router;
+
   get elementId() {
     return guidFor(this);
   }
@@ -48,6 +51,14 @@ export default class CfbFormEditorQuestionListItem extends Component {
     );
   }
 
+  get isActive() {
+    // we can't access this.router.applicationRouter.currentRoute.queryParams
+    // because it is non-reactive
+    return this.router.currentURL?.endsWith(
+      `/questions/${this.args.question.slug}`,
+    );
+  }
+
   @action
   editQuestion(question, e) {
     e.preventDefault();