Replace ember render modifier in learner group instructor manager component

packages/frontend/.lint-todo

@@ -5,8 +5,6 @@ add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|23cd787c79c34a628da
 add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|e5120f87b74c5ae8e4c76b9089e0b4a4504c6e3c|1731542400000|1762646400000|1793750400000|app/components/user-profile-roles.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|1fb0566922ce4f066916e5e2931f650f69d7cfba|1731542400000|1762646400000|1793750400000|app/components/visualizer-program-year-objectives.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|38e65b45b56fdfd4160d3b0884114b6643e3a036|1731542400000|1762646400000|1793750400000|app/components/visualizer-program-year-objectives.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|cb6d7acb9879902b89ad1575846d290a564ffbae|1731542400000|1762646400000|1793750400000|app/components/learner-group/instructor-manager.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|2bdc98d02ac5ea2a4bd5bac6a0f9e880abafdcbe|1731542400000|1762646400000|1793750400000|app/components/learner-group/instructor-manager.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|10|6|10|6|d919d2af254f782c01fe2ba15416673e52e91124|1731542400000|1762646400000|1793750400000|app/components/reports/subject/new/academic-year.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|11|6|11|6|940005188b476a060b0e5d3f05baea24ba178878|1731542400000|1762646400000|1793750400000|app/components/reports/subject/new/academic-year.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|10|6|10|6|d919d2af254f782c01fe2ba15416673e52e91124|1731542400000|1762646400000|1793750400000|app/components/reports/subject/new/competency.hbs

packages/frontend/app/components/learner-group/instructor-manager.hbs

@@ -1,112 +1,76 @@
 <div
   class="learner-group-instructor-manager"
-  {{did-insert (perform this.load) @learnerGroup}}
-  {{did-update (perform this.load) @learnerGroup}}
   data-test-learner-group-instructor-manager
+  ...attributes
 >
-  {{#unless this.load.isRunning}}
-    <div class="detail-header">
-      <div class="title" data-test-title>
-        {{#if this.isManaging}}
-          {{t "general.manageDefaultInstructors"}}
-        {{else}}
-          {{t "general.defaultInstructors"}}
-          ({{@learnerGroup.allInstructors.length}})
-        {{/if}}
-      </div>
-      {{#if this.isManaging}}
-        <div class="actions">
-          <button
-            type="button"
-            class="bigadd"
-            {{on "click" (perform this.saveChanges)}}
-            data-test-save
-          >
-            <FaIcon
-              @icon={{if this.saveChanges.isRunning "spinner" "check"}}
-              @spin={{if this.saveChanges.isRunning true false}}
-            />
-          </button>
-          <button
-            type="button"
-            class="bigcancel"
-            {{on "click" (set this "isManaging" false)}}
-            data-test-cancel
-          >
-            <FaIcon @icon="arrow-rotate-left" />
-          </button>
-        </div>
-      {{else}}
-        {{#if @canUpdate}}
-          <button type="button" {{on "click" (set this "isManaging" true)}} data-test-manage>
-            {{t "general.instructorsManageTitle"}}
-          </button>
-        {{/if}}
-      {{/if}}
+  <div class="detail-header">
+    <div class="title" data-test-title>
+      {{t "general.manageDefaultInstructors"}}
     </div>
-    <div class="detail-content">
-      {{#if this.isManaging}}
-        {{#if this.instructors.length}}
-          <h4>
-            {{t "general.instructors"}}
-          </h4>
-          <ul class="removable-instructors">
-            {{#each (sort-by "fullName" this.instructors) as |user|}}
-              <li>
-                <button
-                  class="link-button"
-                  type="button"
-                  {{on "click" (fn this.removeInstructor user)}}
-                  data-test-selected-instructor
-                >
-                  <UserNameInfo @user={{user}} />
-                  <FaIcon @icon="xmark" class="remove" />
-                </button>
-              </li>
-            {{/each}}
-          </ul>
-        {{/if}}
-        {{#if this.instructorGroups.length}}
-          <h4>
-            {{t "general.instructorGroups"}}
-          </h4>
-          <div class="removable-instructor-groups">
-            {{#each (sort-by "title" this.instructorGroups) as |instructorGroup|}}
-              <div class="removable-instructor-group" data-test-selected-instructor-group>
-                <button
-                  class="link-button"
-                  type="button"
-                  data-test-instructor-group-title
-                  {{on "click" (fn this.removeInstructorGroup instructorGroup)}}
-                >
-                  <FaIcon @icon="users" />
-                  {{instructorGroup.title}}
-                  <FaIcon @icon="xmark" class="remove" />
-                </button>
-                <br />
-                <LearnerGroup::InstructorGroupMembersList @instructorGroup={{instructorGroup}} />
-              </div>
-            {{/each}}
-          </div>
-        {{/if}}
-        <UserSearch
-          @addUser={{this.addInstructor}}
-          @addInstructorGroup={{this.addInstructorGroup}}
-          @currentlyActiveUsers={{this.instructors}}
-          @availableInstructorGroups={{this.availableInstructorGroups}}
-          @currentlyActiveInstructorGroups={{this.instructorGroups}}
-        />
-      {{else}}
-        {{#if @learnerGroup.allInstructors.length}}
-          <ul class="assigned-instructors">
-            {{#each (sort-by "fullName" @learnerGroup.allInstructors) as |instructor|}}
-              <li data-test-assigned-instructor>
-                <UserNameInfo @user={{instructor}} />
-              </li>
-            {{/each}}
-          </ul>
-        {{/if}}
-      {{/if}}
+    <div class="actions">
+      <button
+        type="button"
+        class="bigadd"
+        {{on "click" (fn @save this.instructors this.instructorGroups)}}
+        data-test-save
+      >
+        <FaIcon @icon="check" />
+      </button>
+      <button type="button" class="bigcancel" {{on "click" @cancel}} data-test-cancel>
+        <FaIcon @icon="arrow-rotate-left" />
+      </button>
     </div>
-  {{/unless}}
+  </div>
+  <div class="detail-content">
+    {{#if this.instructors.length}}
+      <h4>
+        {{t "general.instructors"}}
+      </h4>
+      <ul class="removable-instructors">
+        {{#each (sort-by "fullName" this.instructors) as |user|}}
+          <li>
+            <button
+              class="link-button"
+              type="button"
+              {{on "click" (fn this.removeInstructor user)}}
+              data-test-selected-instructor
+            >
+              <UserNameInfo @user={{user}} />
+              <FaIcon @icon="xmark" class="remove" />
+            </button>
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+    {{#if this.instructorGroups.length}}
+      <h4>
+        {{t "general.instructorGroups"}}
+      </h4>
+      <div class="removable-instructor-groups">
+        {{#each (sort-by "title" this.instructorGroups) as |instructorGroup|}}
+          <div class="removable-instructor-group" data-test-selected-instructor-group>
+            <button
+              class="link-button"
+              type="button"
+              data-test-instructor-group-title
+              {{on "click" (fn this.removeInstructorGroup instructorGroup)}}
+            >
+              <FaIcon @icon="users" />
+              {{instructorGroup.title}}
+              <FaIcon @icon="xmark" class="remove" />
+            </button>
+            <br />
+            <LearnerGroup::InstructorGroupMembersList @instructorGroup={{instructorGroup}} />
+          </div>
+        {{/each}}
+      </div>
+    {{/if}}
+    <UserSearch
+      @addUser={{this.addInstructor}}
+      @addInstructorGroup={{this.addInstructorGroup}}
+      @currentlyActiveUsers={{this.instructors}}
+      @availableInstructorGroups={{@availableInstructorGroups}}
+      @currentlyActiveInstructorGroups={{this.instructorGroups}}
+    />
+  </div>
 </div>

packages/frontend/app/components/learner-group/instructor-manager.js

@@ -1,30 +1,16 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { isPresent } from '@ember/utils';
-import { dropTask, restartableTask } from 'ember-concurrency';
 
 export default class LearnerGroupInstructorManagerComponent extends Component {
-  @tracked availableInstructorGroups = [];
   @tracked instructors = [];
   @tracked instructorGroups = [];
-  @tracked isManaging = false;
 
-  load = restartableTask(async (element, [learnerGroup]) => {
-    if (isPresent(learnerGroup)) {
-      const instructors = await learnerGroup.get('instructors');
-      const instructorGroups = await learnerGroup.get('instructorGroups');
-      const cohort = await learnerGroup.get('cohort');
-      const programYear = await cohort.get('programYear');
-      const program = await programYear.get('program');
-      const school = await program.get('school');
-      const availableInstructorGroups = await school.get('instructorGroups');
-
-      this.instructors = instructors;
-      this.instructorGroups = instructorGroups;
-      this.availableInstructorGroups = availableInstructorGroups;
-    }
-  });
+  constructor() {
+    super(...arguments);
+    this.instructors = this.args.instructors;
+    this.instructorGroups = this.args.instructorGroups;
+  }
 
   @action
   addInstructor(user) {
@@ -45,9 +31,4 @@ export default class LearnerGroupInstructorManagerComponent extends Component {
   removeInstructorGroup(instructorGroup) {
     this.instructorGroups = this.instructorGroups.filter((group) => group !== instructorGroup);
   }
-
-  saveChanges = dropTask(async () => {
-    await this.args.save(this.instructors, this.instructorGroups);
-    this.isManaging = false;
-  });
 }

packages/frontend/app/components/learner-group/instructors-list.hbs

@@ -0,0 +1,24 @@
+<div class="learner-group-instructors-list" data-test-learner-group-instructors-list ...attributes>
+  <div class="detail-header">
+    <div class="title" data-test-title>
+      {{t "general.defaultInstructors"}}
+      ({{@learnerGroup.allInstructors.length}})
+    </div>
+    {{#if @canUpdate}}
+      <button type="button" {{on "click" @manage}} data-test-manage>
+        {{t "general.instructorsManageTitle"}}
+      </button>
+    {{/if}}
+  </div>
+  <div class="detail-content">
+    {{#if @learnerGroup.allInstructors.length}}
+      <ul class="assigned-instructors">
+        {{#each (sort-by "fullName" @learnerGroup.allInstructors) as |instructor|}}
+          <li data-test-assigned-instructor>
+            <UserNameInfo @user={{instructor}} />
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+  </div>
+</div>

packages/frontend/app/components/learner-group/root.hbs

@@ -118,11 +118,22 @@
           {{/each}}
         </ul>
       </div>
-      <LearnerGroup::InstructorManager
-        @learnerGroup={{@learnerGroup}}
-        @save={{this.saveInstructors}}
-        @canUpdate={{@canUpdate}}
-      />
+      {{#if (and this.dataForInstructorGroupManagerLoaded this.isManagingInstructors)}}
+        <LearnerGroup::InstructorManager
+          @learnerGroup={{@learnerGroup}}
+          @instructors={{this.instructors}}
+          @instructorGroups={{this.instructorGroups}}
+          @availableInstructorGroups={{this.availableInstructorGroups}}
+          @save={{perform this.saveInstructors}}
+          @cancel={{set this "isManagingInstructors" false}}
+        />
+      {{else}}
+        <LearnerGroup::InstructorsList
+          @learnerGroup={{@learnerGroup}}
+          @canUpdate={{@canUpdate}}
+          @manage={{set this "isManagingInstructors" true}}
+        />
+      {{/if}}
       <div class="learner-group-overview-actions" data-test-overview-actions>
         <div class="title" data-test-title>
           {{#if @isEditing}}

packages/frontend/app/components/learner-group/root.js

@@ -29,6 +29,7 @@ export default class LearnerGroupRootComponent extends Component {
   @tracked showNewLearnerGroupForm = false;
   @tracked currentGroupsSaved = 0;
   @tracked totalGroupsToSave = 0;
+  @tracked isManagingInstructors = false;
 
   constructor() {
     super(...arguments);
@@ -64,6 +65,70 @@ export default class LearnerGroupRootComponent extends Component {
     return this.cohortData.isResolved ? this.cohortData.value : null;
   }
 
+  @cached
+  get programYearData() {
+    return new TrackedAsyncData(this.cohort?.programYear);
+  }
+
+  get programYear() {
+    return this.programYearData.isResolved ? this.programYearData.value : null;
+  }
+
+  @cached
+  get programData() {
+    return new TrackedAsyncData(this.programYear?.program);
+  }
+
+  get program() {
+    return this.programData.isResolved ? this.programData.value : null;
+  }
+
+  @cached
+  get schoolData() {
+    return new TrackedAsyncData(this.program?.school);
+  }
+
+  get school() {
+    return this.schoolData.isResolved ? this.schoolData.value : null;
+  }
+
+  @cached
+  get availableInstructorGroupsData() {
+    return new TrackedAsyncData(this.school?.instructorGroups);
+  }
+
+  get availableInstructorGroups() {
+    return this.availableInstructorGroupsData.isResolved
+      ? this.availableInstructorGroupsData.value
+      : [];
+  }
+
+  @cached
+  get instructorsData() {
+    return new TrackedAsyncData(this.args.learnerGroup.instructors);
+  }
+
+  get instructors() {
+    return this.instructorsData.isResolved ? this.instructorsData.value : [];
+  }
+
+  @cached
+  get instructorGroupsData() {
+    return new TrackedAsyncData(this.args.learnerGroup.instructorGroups);
+  }
+
+  get instructorGroups() {
+    return this.instructorGroupsData.isResolved ? this.instructorGroupsData.value : [];
+  }
+
+  get dataForInstructorGroupManagerLoaded() {
+    return (
+      this.availableInstructorGroupsData.isResolved &&
+      this.instructorGroupsData.isResolved &&
+      this.instructorsData.isResolved
+    );
+  }
+
   get cohortTitle() {
     return this.cohort?.title;
   }
@@ -207,12 +272,12 @@ export default class LearnerGroupRootComponent extends Component {
     this.urlChanged = true;
   }
 
-  @action
-  saveInstructors(newInstructors, newInstructorGroups) {
+  saveInstructors = restartableTask(async (newInstructors, newInstructorGroups) => {
     this.args.learnerGroup.set('instructors', newInstructors);
     this.args.learnerGroup.set('instructorGroups', newInstructorGroups);
-    return this.args.learnerGroup.save();
-  }
+    await this.args.learnerGroup.save();
+    this.isManagingInstructors = false;
+  });
 
   @cached
   get usersForMembersListData() {

packages/frontend/app/styles/components.scss

@@ -75,6 +75,7 @@
 @forward "components/learner-group/header";
 @forward "components/learner-group/instructor-group-members-list";
 @forward "components/learner-group/instructor-manager";
+@forward "components/learner-group/instructors-list";
 @forward "components/learner-group/new";
 @forward "components/learner-group/root";
 @forward "components/learner-group/user-manager";