synchronize Course/Session objective description/parentObjectives FadeText status

packages/frontend/app/components/program-year/objective-list-item.hbs

@@ -27,6 +27,8 @@
         @isSaveDisabled={{this.hasErrorForTitle}}
         @save={{perform this.saveTitleChanges}}
         @close={{this.revertTitleChanges}}
+        @fadeTextExpanded={{this.fadeTextExpanded}}
+        @onExpandAllFadeText={{this.expandAllFadeText}}
       >
         <HtmlEditor @content={{this.title}} @update={{this.changeTitle}} @autofocus={{true}} />
         <ValidationError @validatable={{this}} @property="title" />

packages/frontend/app/components/program-year/objective-list-item.js

@@ -20,6 +20,7 @@ export default class ProgramYearObjectiveListItemComponent extends Component {
   @tracked isManagingTerms;
   @tracked termsBuffer = [];
   @tracked selectedVocabulary;
+  @tracked fadeTextExpanded = false;
 
   constructor() {
     super(...arguments);
@@ -155,6 +156,10 @@ export default class ProgramYearObjectiveListItemComponent extends Component {
     this.highlightSave.perform();
   });
 
+  @action
+  expandAllFadeText(isExpanded) {
+    this.fadeTextExpanded = isExpanded;
+  }
   @action
   revertTitleChanges() {
     this.title = this.args.programYearObjective.title;

packages/frontend/tests/acceptance/course/competencies-test.js

@@ -69,7 +69,7 @@ module('Acceptance | Course - Competencies', function (hooks) {
       details: true,
       courseObjectiveDetails: true,
     });
-    await page.details.objectives.objectiveList.objectives[1].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[1].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[1].parentManager;
     await m.competencies[1].objectives[0].add();
     assert.ok(m.competencies[0].objectives[0].notSelected);

packages/frontend/tests/acceptance/course/objectiveparents-allow-multiple-test.js

@@ -5,7 +5,7 @@ import { setupApplicationTest } from 'frontend/tests/helpers';
 import page from 'ilios-common/page-objects/course';
 import percySnapshot from '@percy/ember';
 
-module('Acceptance | Course - Multiple Objective  Parents', function (hooks) {
+module('Acceptance | Course - Multiple Objective Parents', function (hooks) {
   setupApplicationTest(hooks);
   hooks.beforeEach(async function () {
     this.user = await setupAuthentication({}, true);
@@ -65,7 +65,7 @@ module('Acceptance | Course - Multiple Objective  Parents', function (hooks) {
       'program-year objective 1',
     );
 
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
 
     assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0');
@@ -92,7 +92,7 @@ module('Acceptance | Course - Multiple Objective  Parents', function (hooks) {
       page.details.objectives.objectiveList.objectives[0].description.text,
       'course objective 0',
     );
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
 
     await m.competencies[0].objectives[2].add();

packages/frontend/tests/acceptance/course/objectiveparents-inactive-test.js

@@ -64,7 +64,7 @@ module('Acceptance | Course - Objective Inactive Parents', function (hooks) {
     assert.strictEqual(objectives[0].parents.list.length, 1);
     assert.strictEqual(objectives[0].parents.list[0].text, 'inactive selected');
 
-    await objectives[0].parents.list[0].manage();
+    await objectives[0].parents.manage();
     const m = objectives[0].parentManager;
 
     assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0');

packages/frontend/tests/acceptance/course/objectiveparents-multiplecohorts-test.js

@@ -75,7 +75,7 @@ module('Acceptance | Course with multiple Cohorts - Objective Parents', function
       page.details.objectives.objectiveList.objectives[0].parents.list[1].text,
       'program-year objective 3',
     );
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
 
     await m.selectCohort(1);
@@ -135,7 +135,7 @@ module('Acceptance | Course with multiple Cohorts - Objective Parents', function
       page.details.objectives.objectiveList.objectives[0].parents.list[1].text,
       'program-year objective 3',
     );
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
 
     await m.selectCohort(1);
@@ -185,7 +185,7 @@ module('Acceptance | Course with multiple Cohorts - Objective Parents', function
       page.details.objectives.objectiveList.objectives[0].parents.list[1].text,
       'program-year objective 3',
     );
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
 
     await m.selectCohort(1);

packages/frontend/tests/acceptance/course/objectiveparents-nocohorts-test.js

@@ -41,7 +41,7 @@ module('Acceptance | Course with no cohorts - Objective Parents', function (hook
 
     assert.strictEqual(firstObjective.description.text, 'course objective 0');
     assert.ok(firstObjective.parents.empty);
-    await firstObjective.parents.list[0].manage();
+    await firstObjective.parents.manage();
     const m = firstObjective.parentManager;
 
     assert.ok(m.hasNoCohortWarning);
@@ -50,7 +50,7 @@ module('Acceptance | Course with no cohorts - Objective Parents', function (hook
     await page.details.cohorts.selectable[0].add();
     await page.details.cohorts.save();
     assert.strictEqual(page.details.cohorts.current.length, 1);
-    await firstObjective.parents.list[0].manage();
+    await firstObjective.parents.manage();
 
     assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0');
     assert.strictEqual(m.competencies.length, 1);
@@ -64,7 +64,7 @@ module('Acceptance | Course with no cohorts - Objective Parents', function (hook
     await page.details.cohorts.selected[0].remove();
     await page.details.cohorts.save();
     assert.strictEqual(page.details.cohorts.current.length, 0);
-    await firstObjective.parents.list[0].manage();
+    await firstObjective.parents.manage();
     assert.ok(m.hasNoCohortWarning);
   });
 });

packages/frontend/tests/acceptance/course/objectiveparents-test.js

@@ -66,7 +66,7 @@ module('Acceptance | Course - Objective Parents', function (hooks) {
       'program-year objective 0',
     );
 
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
 
     assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0');
@@ -108,7 +108,7 @@ module('Acceptance | Course - Objective Parents', function (hooks) {
     );
 
     await percySnapshot(getUniqueName(assert, 'default background color'));
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     await percySnapshot(getUniqueName(assert, 'default background color'));
 
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
@@ -152,7 +152,7 @@ module('Acceptance | Course - Objective Parents', function (hooks) {
     );
 
     await percySnapshot(getUniqueName(assert, 'default background color'));
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     await percySnapshot(getUniqueName(assert, 'managed background color'));
 
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;

packages/frontend/tests/acceptance/course/publishall-test.js

@@ -168,7 +168,7 @@ module('Acceptance | Course - Publish All Sessions', function (hooks) {
     assert.ok(page.publishAll.isVisible);
     assert.ok(page.publishAll.hasUnlinkedWarning);
 
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
     await m.competencies[0].objectives[0].add();
     await page.details.objectives.objectiveList.objectives[0].parents.save();

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

@@ -51,7 +51,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) {
     );
 
     await percySnapshot(getUniqueName(assert, 'default background color'));
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     await percySnapshot(getUniqueName(assert, 'managed background color'));
 
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
@@ -90,7 +90,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) {
     );
 
     await percySnapshot(getUniqueName(assert, 'default background color'));
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     await percySnapshot(getUniqueName(assert, 'managed background color'));
 
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
@@ -142,7 +142,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) {
     );
 
     await percySnapshot(getUniqueName(assert, 'default background color'));
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     await percySnapshot(getUniqueName(assert, 'managed background color'));
 
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;
@@ -194,7 +194,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) {
     );
 
     await percySnapshot(getUniqueName(assert, 'default background color'));
-    await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage();
+    await page.details.objectives.objectiveList.objectives[0].parents.manage();
     await percySnapshot(getUniqueName(assert, 'managed background color'));
 
     const m = page.details.objectives.objectiveList.objectives[0].parentManager;

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item-parents.js

@@ -2,9 +2,8 @@ import { clickable, create, collection, isHidden, isPresent } from 'ember-cli-pa
 
 const definition = {
   scope: '[data-test-objective-list-item-parents]',
-  list: collection('li', {
-    manage: clickable('[data-test-manage]'),
-  }),
+  list: collection('li'),
+  manage: clickable('[data-test-manage]'),
   empty: isHidden('[data-test-parent]'),
   saveParents: clickable('[data-test-save]'),
   cancelParents: clickable('[data-test-cancel]'),

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item-parents.js

@@ -2,9 +2,8 @@ import { clickable, create, collection, isHidden, isPresent } from 'ember-cli-pa
 
 const definition = {
   scope: '[data-test-objective-list-item-parents]',
-  list: collection('li', {
-    manage: clickable('[data-test-manage]'),
-  }),
+  list: collection('li'),
+  manage: clickable('[data-test-manage]'),
   empty: isHidden('[data-test-parent]'),
   saveParents: clickable('[data-test-save]'),
   cancelParents: clickable('[data-test-cancel]'),

packages/ilios-common/addon/components/course/objective-list-item-parents.hbs

@@ -24,86 +24,80 @@
       <FaIcon @icon="arrow-rotate-left" />
     </button>
   {{else}}
-    <ul>
-      {{#each (sort-by "title" @parents) as |parent|}}
+    {{#if @parents}}
+      <FadeText
+        @text={{this.parents}}
+        @expanded={{@fadeTextExpanded}}
+        @onExpandAll={{@onExpandAllFadeText}}
+        as |displayText expand collapse updateTextDims shouldFade expanded|
+      >
         {{#if @editable}}
-          <li data-test-parent>
-            <FadeText
-              @text={{html-safe (remove-html-tags parent.title)}}
-              as |displayText expand collapse updateTextDims isFaded expanded|
-            >
-              <button
-                type="button"
-                class="link-button"
-                {{on "click" @manage}}
-                data-test-manage
-              >
-                <div class="display-text-wrapper{{if isFaded ' is-faded'}}">
-                  <div
-                    class="display-text"
-                    {{on-resize updateTextDims}}
-                  >
-                    {{displayText}}
-                  </div>
-                </div>
-                {{#if @showIcon}}
-                  <FaIcon
-                    data-test-edit-icon
-                    @icon="pen-to-square"
-                    class="enabled"
-                  />
-                {{/if}}
-              </button>
-              {{#if isFaded}}
-                <div
-                  class="fade-text-control"
-                  data-test-fade-text-control
-                  {{! template-lint-disable no-invalid-interactive}}
-                  {{on "click" @manage}}
-                >
-                  <button
-                    class="expand-text-button"
-                    type="button"
-                    aria-label={{t "general.expand"}}
-                    title={{t "general.expand"}}
-                    data-test-expand
-                    {{on "click" expand}}
-                  >
-                    <FaIcon @icon="angles-down" />
-                  </button>
+          <span data-test-parent>
+            <button type="button" class="link-button" {{on "click" @manage}} data-test-manage>
+              <div class="display-text-wrapper{{if shouldFade ' faded'}}">
+                <div class="display-text" {{on-resize updateTextDims}}>
+                  {{displayText}}
                 </div>
-              {{else}}
-                {{#if expanded}}
-                  <button
-                    class="expand-text-button"
-                    aria-label={{t "general.collapse"}}
-                    title={{t "general.collapse"}}
-                    type="button"
-                    data-test-collapse
-                    {{on "click" collapse}}
-                  >
-                    <FaIcon @icon="angles-up" />
-                  </button>
-                {{/if}}
+              </div>
+              {{#if @showIcon}}
+                <FaIcon
+                  data-test-edit-icon
+                  @icon="pen-to-square"
+                  class="enabled"
+                />
               {{/if}}
-            </FadeText>
-          </li>
+            </button>
+          </span>
         {{else}}
-          <li data-test-parent>
-            <FadeText @text={{html-safe (remove-html-tags parent.title)}} />
-          </li>
+          <span data-test-parent>
+            <div class="display-text-wrapper{{if shouldFade ' faded'}}">
+              <div class="display-text" {{on-resize updateTextDims}}>
+                {{displayText}}
+              </div>
+            </div>
+          </span>
         {{/if}}
-      {{else}}
-        <li>
-          {{#if @editable}}
-            <button type="button" {{on "click" @manage}} data-test-manage>
-              {{t "general.addNew"}}
+        {{#if shouldFade}}
+          <div
+            class="fade-text-control"
+            data-test-fade-text-control
+            {{! template-lint-disable no-invalid-interactive}}
+            {{on "click" @manage}}
+          >
+            <button
+              class="expand-text-button"
+              type="button"
+              aria-label={{t "general.expand"}}
+              title={{t "general.expand"}}
+              data-test-expand
+              {{on "click" expand}}
+            >
+              <FaIcon @icon="angles-down" />
+            </button>
+          </div>
+        {{else}}
+          {{#if expanded}}
+            <button
+              class="expand-text-button"
+              aria-label={{t "general.collapse"}}
+              title={{t "general.collapse"}}
+              type="button"
+              data-test-collapse
+              {{on "click" collapse}}
+            >
+              <FaIcon @icon="angles-up" />
             </button>
-          {{else}}
-            {{t "general.none"}}
           {{/if}}
-        </li>
-      {{/each}}
-    </ul>
+        {{/if}}
+      </FadeText>
+    {{else}}
+      {{#if @editable}}
+        <button type="button" {{on "click" @manage}} data-test-manage>
+          {{t "general.addNew"}}
+        </button>
+      {{else}}
+        {{t "general.none"}}
+      {{/if}}
+    {{/if}}
   {{/if}}
 </div>

packages/ilios-common/addon/components/course/objective-list-item-parents.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import sortableByPosition from 'ilios-common/utils/sortable-by-position';
+
+export default class CourseObjectiveListItemParentsComponent extends Component {
+  get parents() {
+    return this.args.parents
+      .slice()
+      .sort(sortableByPosition)
+      .map((t) => t.title);
+  }
+}