render all buttons as active if no user context is selected.

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/dashboard/user-context-filter.js

@@ -1,21 +1,24 @@
-import { clickable, create, property, text } from 'ember-cli-page-object';
+import { clickable, create, hasClass, property, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-dashboard-user-context-filter]',
   instructing: {
     isChecked: property('checked', '[data-test-instructing-input]'),
     label: text('[data-test-instructing-label]'),
     toggle: clickable('[data-test-instructing-label]'),
+    isActive: hasClass('active', '[data-test-instructing-label]'),
   },
   learning: {
     isChecked: property('checked', '[data-test-learning-input]'),
     label: text('[data-test-learning-label]'),
     toggle: clickable('[data-test-learning-label]'),
+    isActive: hasClass('active', '[data-test-learning-label]'),
   },
   admin: {
     isChecked: property('checked', '[data-test-admin-input]'),
     label: text('[data-test-admin-label]'),
     toggle: clickable('[data-test-admin-label]'),
+    isActive: hasClass('active', '[data-test-admin-label]'),
   },
 };
 

packages/ilios-common/addon/components/dashboard/user-context-filter.hbs

@@ -9,6 +9,7 @@
   <label
     for={{concat "instructing-toggle-" this.uniqueId}}
     data-test-instructing-label
+    class={{if (or (not @userContext) (eq @userContext "instructor")) "active"}}
   >
     {{t "general.instructing"}}
   </label>
@@ -22,6 +23,7 @@
   <label
     for={{concat "learning-toggle-" this.uniqueId}}
     data-test-learning-label
+    class={{if (or (not @userContext) (eq @userContext "learner")) "active"}}
   >
     {{t "general.learning"}}
   </label>
@@ -35,6 +37,7 @@
   <label
     for={{concat "admin-toggle-" this.uniqueId}}
     data-test-admin-label
+    class={{if (or (not @userContext) (eq @userContext "administrator")) "active"}}
   >
     {{t "general.admin"}}
   </label>

packages/ilios-common/app/styles/ilios-common/components/dashboard/user-context-filter.scss

@@ -1,5 +1,11 @@
 @use "../../mixins" as m;
+@use "../../colors" as c;
 
 .dashboard-user-context-filter {
   @include m.multi-button;
+
+  label.active {
+    background-color: c.$tealBlue;
+    color: c.$white;
+  }
 }

packages/test-app/tests/integration/components/dashboard/user-context-filter-test.js

@@ -13,10 +13,13 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
     await render(hbs`<Dashboard::UserContextFilter />`);
     assert.strictEqual(component.instructing.label, 'Instructing');
     assert.notOk(component.instructing.isChecked);
+    assert.ok(component.instructing.isActive);
     assert.strictEqual(component.learning.label, 'Learning');
     assert.notOk(component.learning.isChecked);
+    assert.ok(component.learning.isActive);
     assert.strictEqual(component.admin.label, 'Admin');
     assert.notOk(component.admin.isChecked);
+    assert.ok(component.admin.isActive);
   });
 
   test('selecting learning filter', async function (assert) {
@@ -30,7 +33,7 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
   });
 
   test('de-selecting learning filter', async function (assert) {
-    assert.expect(2);
+    assert.expect(5);
     this.set('userContext', 'learner');
     this.set('setUserContext', (context) => {
       assert.strictEqual(context, null);
@@ -39,6 +42,9 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
       hbs`<Dashboard::UserContextFilter @setUserContext={{this.setUserContext}} @userContext={{this.userContext}}/>`,
     );
     assert.ok(component.learning.isChecked);
+    assert.notOk(component.instructing.isActive);
+    assert.ok(component.learning.isActive);
+    assert.notOk(component.admin.isActive);
     await component.learning.toggle();
   });
 
@@ -53,7 +59,7 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
   });
 
   test('de-selecting instructing filter', async function (assert) {
-    assert.expect(2);
+    assert.expect(5);
     this.set('userContext', 'instructor');
     this.set('setUserContext', (context) => {
       assert.strictEqual(context, null);
@@ -62,6 +68,9 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
       hbs`<Dashboard::UserContextFilter @setUserContext={{this.setUserContext}} @userContext={{this.userContext}}/>`,
     );
     assert.ok(component.instructing.isChecked);
+    assert.ok(component.instructing.isActive);
+    assert.notOk(component.learning.isActive);
+    assert.notOk(component.admin.isActive);
     await component.instructing.toggle();
   });
 
@@ -76,7 +85,7 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
   });
 
   test('de-selecting admin filter', async function (assert) {
-    assert.expect(2);
+    assert.expect(5);
     this.set('userContext', 'administrator');
     this.set('setUserContext', (context) => {
       assert.strictEqual(context, null);
@@ -85,6 +94,9 @@ module('Integration | Component | dashboard/user-context-filter', function (hook
       hbs`<Dashboard::UserContextFilter @setUserContext={{this.setUserContext}} @userContext={{this.userContext}}/>`,
     );
     assert.ok(component.admin.isChecked);
+    assert.notOk(component.instructing.isActive);
+    assert.notOk(component.learning.isActive);
+    assert.ok(component.admin.isActive);
     await component.admin.toggle();
   });
 });