Upgrade/to4.4

README.md

@@ -76,7 +76,7 @@ If you run into the following error while running tests:
 
 ## Client `/app`
 
-EnCOMPASS uses Ember for the client and was recently migrated to Ember Octane from v2.14. Portions are not fully migrated.
+EnCOMPASS uses Ember for the client and was recently migrated to Ember Octane from v2.14. Portions are not fully migrated. See [UPGRADE_NOTES](./UPGRADE_NOTES.md) for more information.
 
 ### workflow
 
@@ -90,9 +90,6 @@ EnCOMPASS uses Ember for the client and was recently migrated to Ember Octane fr
 
 Ember is switching to Glimmer for its component engine. Components that have their templates (.hbs files) in `app/components` have been migrated. Their classes (.js files) will look like native JS classes. Components with templates in `app/templates/components` have not been migrated and still use Classic Ember component classes. I tried to combine similar components when possible.
 
-- `admin-problem-filter` and `admin-workspace-filter` could be comined
-- `problem-filter` and `workspace-filter` could be combined
-
 ### mixins
 
 usage of mixins (found in `app/mixins`) are deprecated - they still work for classic components but should be refactored away
@@ -122,9 +119,7 @@ Each route has a corresponding template that gets rendered. It should be in the
 
 Libraries that are not managed by npm are added in the `/vendor` directory and configured into the bundle in `/ember-cli-build.js` including:
 
-1. selectize input library (see `app/components/selectize-input.js`)
-2. typeahead library (see `app/components/twitter-typeahead.js`)
-3. selection libraries (`vendor/image-tagging.js` and `vendor/selection-highlighting.js`) that are used in `app/components/workspace-submission.js`
+- selection libraries (`vendor/image-tagging.js` and `vendor/selection-highlighting.js`) that are used in `app/components/workspace-submission.js`
 
 ### `/helpers`
 

app/components/admin-filter.hbs

@@ -1,4 +1,4 @@
-<div id='admin-workspace-filter'>
+<div id='admin-filter'>
   <!-- Main Dropdown -->
   <div class='choose-filter-admin'>
     <span class='filter-text'>Find by</span>

app/components/admin-filter.js

@@ -16,7 +16,7 @@ Admin filter expects the subOptions to be an object with the following structure
     val2: {type: 'checkbox', options: [{value, icon, label}, {value, icon, label, etc...]}
  */
 
-export default class AdminWorkspaceFilterComponent extends Component {
+export default class AdminFilterComponent extends Component {
   @service('utility-methods') utils;
   @service inputState;
   @tracked dropdownSelections = [];

app/components/answer-new.hbs

@@ -24,7 +24,7 @@
           <Input id='answer' required='true' @type='hidden' @value={{answer}} />
         </div>
         {{#each this.briefSummaryErrors as |error|}}
-          <ErrorBox
+          <Ui::ErrorBox
             @error={{error}}
             @resetError={{action (mut this.briefSummaryErrors) null}}
             @showDismiss={{true}}
@@ -42,7 +42,7 @@
           />
         </div>
         {{#each this.explanationErrors as |error|}}
-          <ErrorBox
+          <Ui::ErrorBox
             @error={{error}}
             @resetError={{action (mut this.explanationErrors) null}}
             @showDismiss={{true}}
@@ -119,21 +119,21 @@
         {{/if}}
       </fieldset>
       {{#if this.isMissingRequiredFields}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error='Please provide all required fields.'
           @showDismiss={{true}}
           @resetError={{action (mut this.isMissingRequiredFields) null}}
         />
       {{/if}}
       {{#if this.overSizedFileError}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error={{this.overSizedFileError}}
           @showDismiss={{true}}
           @resetError={{action (mut this.overSizedFileError) null}}
         />
       {{/if}}
       {{#if this.isExplanationTooLarge}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error={{this.tooLargeExplanationMsg}}
           @showDismiss={{true}}
           @resetError={{action (mut this.isExplanationTooLarge) null}}

app/components/assignment-info-student.hbs

@@ -48,7 +48,7 @@
     {{/if}}
   </section>
   {{#each this.loadAnswerErrors as |error|}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{error}}
       @showDismiss={{true}}
       @resetError={{action 'removeErrorFromArray' 'loadAnswerErrors' error}}
@@ -80,12 +80,17 @@
   {{/if}}
   {{#if this.showReviseButton}}
     <button
-      class='edit-assignment-button' type="button" {{action 'reviseAssignmentResponse'}}
+      class='edit-assignment-button'
+      type='button'
+      {{action 'reviseAssignmentResponse'}}
     >Revise <i class='fas fa-edit'></i></button>
   {{/if}}
   {{#if this.showRespondButton}}
-    <button class='save-assign-btn' type="button" {{action 'beginAssignmentResponse'}}>Share
-      Your Ideas
+    <button
+      class='save-assign-btn'
+      type='button'
+      {{action 'beginAssignmentResponse'}}
+    >Share Your Ideas
       <i class='fas fa-lightbulb'></i></button>
   {{/if}}
 

app/components/assignment-info-teacher.hbs

@@ -24,7 +24,8 @@
         name='daterange'
         id='assignedDate'
         @type='date'
-        @value={{(format-date @assignment.assignedDate 'YYYY-MM-DD')}} {{on "change" (action 'updateAssignedDate')}}
+        @value={{(format-date @assignment.assignedDate 'YYYY-MM-DD')}}
+        {{on 'change' (action 'updateAssignedDate')}}
       />
     {{else}}
       <p class='label'>
@@ -41,7 +42,8 @@
         id='dueDate'
         name='daterange'
         @type='date'
-        @value={{(format-date @assignment.dueDate 'YYYY-MM-DD')}} {{on "change" (action 'updateDueDate')}}
+        @value={{(format-date @assignment.dueDate 'YYYY-MM-DD')}}
+        {{on 'change' (action 'updateDueDate')}}
       />
     {{else}}
       <p class='label'>
@@ -54,16 +56,12 @@
   </div>
   {{! Class, Problem }}
   <div class='section-details'>
-    {{!-- {{#if this.showSectionInput}}
-      <SelectizeInput @inputId="assn-new-section-select" @initialOptions={{this.sectionOptions}} @initialItems={{this.initialSectionItem}} @onItemAdd={{action "updateSelectizeSingle"}} @onItemRemove={{action "updateSelectizeSingle"}} @maxItems={{1}} @labelField="name" @valueField="id" @searchField="name" @propToUpdate="section" @placeholder="Search for a section by name" @model="section" @store={{this.store}} />
-    {{else}} --}}
     <p>
       Class:
       <LinkTo @route='sections.section' @model={{@section.id}}>
         <span>{{@section.name}}</span>
       </LinkTo>
     </p>
-    {{!-- {{/if}} --}}
   </div>
   <div class='section-details'>
     <p>
@@ -72,10 +70,6 @@
         <span>{{@problem.title}}</span>
       </LinkTo>
     </p>
-    {{!-- {{#if this.showProblemInput}}
-      <SelectizeInput @store={{this.store}} @inputId="assn-new-problem-select" @initialOptions={{this.problemOptions}} @initialItems={{this.initialProblemItem}} @onItemAdd={{action "updateSelectizeSingle"}} @onItemRemove={{action "updateSelectizeSingle"}} @maxItems={{1}} @labelField="title" @valueField="id" @searchField="title" @propToUpdate="problem" @placeholder="Search for a problem by title" @isAsync={{true}} @model="problem" @queryParamsKey="query" @searchCriterion="title" @topLevelQueryParams="searchBy" @preload={{this.problemsPreloadValue}} />
-    {{else}} --}}
-    {{!-- {{/if}} --}}
   </div>
   <div class='workspace-details'>
     <p class='labelP'>
@@ -109,14 +103,15 @@
         @section={{@section}}
         @problem={{@problem}}
         @onCancel={{action (mut showLinkedWsForm) false}}
-        @store={{this.store}}
         @handleResults={{action 'handleCreatedLinkedWs'}}
       />
     {{/if}}
     {{#if this.showAddLinkedWsBtn}}
       <button
         data-test='add-linked-ws'
-        class='add-linkedworkspaces-btn' type="button" {{action (mut showLinkedWsForm) true}}
+        class='add-linkedworkspaces-btn'
+        type='button'
+        {{action (mut showLinkedWsForm) true}}
       >
         Add Linked Workspaces
         <i class='fas fa-plus-circle'></i>
@@ -152,14 +147,15 @@
         @section={{@section}}
         @problem={{@problem}}
         @onCancel={{action (mut showParentWsForm) false}}
-        @store={{this.store}}
         @handleResults={{action 'handleCreatedParentWs'}}
       />
     {{/if}}
     {{#if this.showAddParentWsBtn}}
       <button
         data-test='add-parent-ws'
-        class='add-parent-workspace-btn' type="button" {{action (mut showParentWsForm) true}}
+        class='add-parent-workspace-btn'
+        type='button'
+        {{action (mut showParentWsForm) true}}
       >Add Parent Workspace <i class='fas fa-plus-circle'></i></button>
     {{/if}}
     {{#if this.showNoParentWsMsg}}
@@ -188,7 +184,9 @@
     {{#if this.showEditButton}}
       <button
         data-test='edit-assignment'
-        class='edit-assignment-button' type="button" {{action 'editAssignment'}}
+        class='edit-assignment-button'
+        type='button'
+        {{action 'editAssignment'}}
       >
         Edit Assignment
         <i class='fas fa-edit'></i>
@@ -197,19 +195,28 @@
     {{#if this.isEditing}}
       <button
         class='save-assign-btn'
-        data-test='assn-save' type="button" {{action 'updateAssignment'}}
+        data-test='assn-save'
+        type='button'
+        {{action 'updateAssignment'}}
       >
         Save Assignment
         <i class='fas fa-save'></i>
       </button>
       <button
         class='cancelEditBtn'
-        data-test='assn-cancel' type="button" {{action 'stopEditing'}}
+        data-test='assn-cancel'
+        type='button'
+        {{action 'stopEditing'}}
       >
         Cancel
         <i class='fas fa-times'></i>
       </button>
-      <button data-test='trash-assn' class='right' type="button" {{action 'showDeleteModal'}}>
+      <button
+        data-test='trash-assn'
+        class='right'
+        type='button'
+        {{action 'showDeleteModal'}}
+      >
         <i class='fa fa-trash' aria-hidden='true'></i>
       </button>
     {{/if}}

app/components/assignment-info-teacher.js

@@ -6,6 +6,12 @@ import $ from 'jquery';
 import moment from 'moment';
 
 export default class AssignmentInfoTeacherComponent extends ErrorHandlingComponent {
+  @service store;
+  @service router;
+  @service currentUser;
+  @service('sweet-alert') alert;
+  @service('assignment-permissions') permissions;
+  @service('utility-methods') utils;
   @tracked formattedDueDate = null;
   @tracked formattedAssignedDate = null;
   @tracked isEditing = false;
@@ -21,6 +27,11 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   @tracked showLinkedWsForm = false;
   @tracked areSubmissionsExpanded = true;
   @tracked cachedProblem = [];
+
+  get user() {
+    return this.currentUser.user;
+  }
+
   get showProblemInput() {
     return this.isEditing && this.canEditProblem;
   }
@@ -45,11 +56,6 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   get allGroupsHaveWs() {
     return this.groupsWithoutWorkspaces.length === 0;
   }
-  @service store;
-  @service router;
-  @service('sweet-alert') alert;
-  @service('assignment-permissions') permissions;
-  @service('utility-methods') utils;
 
   get hasLinkedWorkspaces() {
     return this.args.assignment.linkedWorkspaces.length > 0;
@@ -86,7 +92,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
       this.args.assignment,
       'createdBy'
     );
-    return this.args.currentUser.id === creatorId;
+    return this.user.id === creatorId;
   }
 
   get isDirty() {
@@ -103,7 +109,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   }
 
   get canEdit() {
-    const isAdmin = this.args.currentUser.isAdmin;
+    const isAdmin = this.user.isAdmin;
     const isClean = this.isClean;
     const isYourOwn = this.isYourOwn;
 
@@ -140,7 +146,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   }
 
   get canEditDate() {
-    const isAdmin = this.args.currentUser.isAdmin;
+    const isAdmin = this.user.isAdmin;
     const canEdit = this.canEdit;
     const isBeforeAssignedDate = this.isBeforeAssignedDate;
     return isAdmin || (canEdit && isBeforeAssignedDate);

app/components/assignment-info.hbs

@@ -1,18 +1,22 @@
- <h2 class="info-header">Assignment Details</h2>
-  <div class="clear"></div>
-{{#each this.initialLoadErrors as |error|}}
-    <p class="error-message">{{error}}</p>
-{{/each}}
-{{#if @currentUser.isStudent}}
-  <AssignmentInfoStudent @assignment={{@assignment}} @problem={{this.currentProblem}} @section={{this.currentSection}} @answerList={{@assignment.answers.content}} />
+<h2 class='info-header'>Assignment Details</h2>
+<div class='clear'></div>
+{{#if @isStudent}}
+  <AssignmentInfoStudent
+    @assignment={{@assignment}}
+    @problem={{@currentProblem}}
+    @section={{@currentSection}}
+    @answerList={{@answers}}
+    @onAnswerCreated={{@onAnswerCreated}}
+  />
 {{else}}
-  <AssignmentInfoTeacher @groups={{@groups}} @sections={{@sections}} @assignment={{@assignment}} @currentUser={{@currentUser}} @studentList={{@assignmentStudents}} @section={{this.currentSection}} @problem={{this.currentProblem}} @linkedWorkspaces={{@assignment.linkedWorkspaces.content}} @parentWorkspace={{@assignment.parentWorkspace.content}} />
-{{/if}}
-
-
-
-
-
-
-
-
+  <AssignmentInfoTeacher
+    @groups={{@groups}}
+    @sections={{@sections}}
+    @assignment={{@assignment}}
+    @studentList={{@assignmentStudents}}
+    @section={{@currentSection}}
+    @problem={{@currentProblem}}
+    @linkedWorkspaces={{@linkedWorkspaces}}
+    @parentWorkspace={{@parentWorkspace}}
+  />
+{{/if}}