Disable ILM toggle if content exists

packages/frontend/tests/acceptance/course/session/ilm-test.js

@@ -599,6 +599,34 @@ module('Acceptance | Session - Independent Learning', function (hooks) {
     assert.ok(page.details.overview.ilm.ilmDueDateAndTime.isHidden);
   });
 
+  test('ilm toggle disabled if ilm-only subcomponents have values', async function (assert) {
+    this.user.update({ administeredSchools: [this.school] });
+    await page.visit({
+      courseId: 1,
+      sessionId: 1,
+      sessionLearnergroupDetails: true,
+    });
+    assert.strictEqual(currentRouteName(), 'session.index');
+
+    // due to hooks.beforeEach(), we have instructors and instructorGroups, so ilm toggle is disabled until we remove them
+    assert.ok(page.details.instructors.selectedInstructors.instructors.length);
+    assert.ok(page.details.instructors.selectedInstructorGroups.instructorGroups.length);
+    assert.ok(page.details.overview.ilm.toggleIlm.yesNoToggle.disabled);
+
+    await page.details.instructors.manage();
+    const { manager } = page.details.instructors;
+
+    while (manager.selectedInstructors.instructors.length) {
+      await manager.selectedInstructors.instructors[0].remove();
+    }
+    while (manager.selectedInstructorGroups.instructorGroups.length) {
+      await manager.selectedInstructorGroups.instructorGroups[0].remove();
+    }
+    await page.details.instructors.save();
+
+    assert.notOk(page.details.overview.ilm.toggleIlm.yesNoToggle.disabled);
+  });
+
   test('ilm-only subcomponents disappear/reappear if ilm gets toggled off/on', async function (assert) {
     this.user.update({ administeredSchools: [this.school] });
     await page.visit({
@@ -608,8 +636,26 @@ module('Acceptance | Session - Independent Learning', function (hooks) {
     });
     assert.strictEqual(currentRouteName(), 'session.index');
 
-    assert.ok(page.details.learnersAreVisible);
-    assert.ok(page.details.instructorsAreVisible);
+    // due to hooks.beforeEach(), we have instructors and instructorGroups, so ilm toggle is disabled until we remove them
+    assert.ok(page.details.instructors.selectedInstructors.instructors.length);
+    assert.ok(page.details.instructors.selectedInstructorGroups.instructorGroups.length);
+    assert.ok(page.details.overview.ilm.toggleIlm.yesNoToggle.disabled);
+
+    await page.details.instructors.manage();
+    const { manager } = page.details.instructors;
+
+    while (manager.selectedInstructors.instructors.length) {
+      await manager.selectedInstructors.instructors[0].remove();
+      assert.ok(page.details.overview.ilm.toggleIlm.yesNoToggle.disabled);
+    }
+    while (manager.selectedInstructorGroups.instructorGroups.length) {
+      await manager.selectedInstructorGroups.instructorGroups[0].remove();
+      assert.ok(page.details.overview.ilm.toggleIlm.yesNoToggle.disabled);
+    }
+
+    await page.details.instructors.save();
+
+    assert.notOk(page.details.overview.ilm.toggleIlm.yesNoToggle.disabled);
 
     await page.details.overview.ilm.toggleIlm.yesNoToggle.click();
 

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/toggle-yesno.js

@@ -6,6 +6,7 @@ const definition = {
     scope: '[data-test-handle]',
   },
   checked: attribute('aria-checked'),
+  disabled: attribute('disabled'),
 };
 
 export default definition;

packages/ilios-common/addon/components/session/ilm.gjs

@@ -12,6 +12,7 @@ import ToggleYesno from 'ilios-common/components/toggle-yesno';
 import perform from 'ember-concurrency/helpers/perform';
 import EditableField from 'ilios-common/components/editable-field';
 import { on } from '@ember/modifier';
+import and from 'ember-truth-helpers/helpers/and';
 import pick from 'ilios-common/helpers/pick';
 import set from 'ember-set-helper/helpers/set';
 import YupValidationMessage from 'ilios-common/components/yup-validation-message';
@@ -50,6 +51,15 @@ export default class SessionIlmComponent extends Component {
     return this.ilmSession !== null;
   }
 
+  get hasGroups() {
+    return (
+      this.ilmSession.instructors.length ||
+      this.ilmSession.instructorGroups.length ||
+      this.ilmSession.learners.length ||
+      this.ilmSession.learnerGroups.length
+    );
+  }
+
   saveIndependentLearning = dropTask(async (value) => {
     if (!value) {
       const ilmSession = await this.args.session.ilmSession;
@@ -98,6 +108,7 @@ export default class SessionIlmComponent extends Component {
           <ToggleYesno
             @yes={{this.isIndependentLearning}}
             @toggle={{perform this.saveIndependentLearning}}
+            @disabled={{if (and this.isIndependentLearning this.hasGroups) "true"}}
             data-test-ilm-toggle
           />
         {{else}}

packages/ilios-common/addon/components/toggle-yesno.gjs

@@ -21,6 +21,7 @@ export default class ToggleYesno extends Component {
       data-test-toggle-yesno
       role="switch"
       type="button"
+      disabled={{@disabled}}
       {{on "click" this.click}}
     >
       <span class="switch-handle" data-test-handle>

packages/ilios-common/app/styles/ilios-common/colors.scss

@@ -7,6 +7,7 @@ $orange: hsl(30, 100%, 40%);
 $sepia: hsl(30, 100%, 20%);
 
 $fernGreen: hsl(103, 23%, 36%);
+$fernGreenDisabled: hsla(103, 23%, 36%, 50%);
 
 $gold: hsl(48, 93%, 44%);
 

packages/ilios-common/app/styles/ilios-common/components/toggle-yesno.scss

@@ -18,6 +18,10 @@
     background-color: c.$fernGreen;
   }
 
+  &:disabled {
+    background-color: c.$fernGreenDisabled;
+  }
+
   .switch-handle {
     background: c.$white;
     border-radius: 10px;