Upgrade ember 5

.github/workflows/frontend.yaml

@@ -22,7 +22,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 16
           cache: yarn
           cache-dependency-path: ember/yarn.lock
       - name: Install Dependencies
@@ -40,7 +40,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 16
           cache: yarn
           cache-dependency-path: ember/yarn.lock
       - name: Install Dependencies

ember/.eslintignore

@@ -1,25 +1,13 @@
 # unconventional js
 /blueprints/*/files/
-/vendor/
 
 # compiled output
 /dist/
-/tmp/
-
-# dependencies
-/bower_components/
-/node_modules/
 
 # misc
 /coverage/
 !.*
 .*/
-.eslintcache
 
 # ember-try
 /.node_modules.ember-try/
-/bower.json.ember-try
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try

ember/.eslintrc.js

@@ -4,5 +4,5 @@ module.exports = {
   settings: {
     'import/internal-regex': '^outdated/',
   },
-  extends: '@adfinis/eslint-config/ember-app',
+  extends: ['@adfinis/eslint-config/ember-app'],
 };

ember/.gitignore

@@ -1,28 +1,20 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # compiled output
 /dist/
-/tmp/
 
 # dependencies
-/bower_components/
 /node_modules/
 
 # misc
 /.env*
 /.pnp*
-/.sass-cache
 /.eslintcache
-/connect.lock
 /coverage/
-/libpeerconnection.log
 /npm-debug.log*
 /testem.log
 /yarn-error.log
 
 # ember-try
 /.node_modules.ember-try/
-/bower.json.ember-try
 /npm-shrinkwrap.json.ember-try
 /package.json.ember-try
 /package-lock.json.ember-try

ember/.prettierignore

@@ -1,25 +1,13 @@
 # unconventional js
 /blueprints/*/files/
-/vendor/
 
 # compiled output
 /dist/
-/tmp/
-
-# dependencies
-/bower_components/
-/node_modules/
 
 # misc
 /coverage/
 !.*
-.eslintcache
-.lint-todo/
+.*/
 
 # ember-try
 /.node_modules.ember-try/
-/bower.json.ember-try
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try

ember/.prettierrc.js

@@ -1,5 +1,12 @@
 'use strict';
 
 module.exports = {
-  singleQuote: true,
+  overrides: [
+    {
+      files: '*.{js,ts}',
+      options: {
+        singleQuote: true,
+      },
+    },
+  ],
 };

ember/.stylelintignore

@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/

ember/.stylelintrc.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = {
+  plugins: ['stylelint-prettier'],
+  extends: ['stylelint-prettier/recommended', 'stylelint-config-standard-scss'],
+  rules: {
+    'scss/at-extend-no-missing-placeholder': null,
+  },
+};

ember/.watchmanconfig

@@ -1,3 +1,3 @@
 {
-  "ignore_dirs": ["tmp", "dist"]
+  "ignore_dirs": ["dist"]
 }

ember/app/components/maintainer-table/component.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+
+export default class MaintainerTableComponent extends Component {
+  get maintainers() {
+    // prevent sort-by helper from using deprecated .toArray
+    return this.args.maintainers?.slice();
+  }
+}

ember/app/components/maintainer-table/template.hbs

@@ -9,7 +9,7 @@
       </tr>
     </thead>
     <tbody>
-      {{#each (sort-by "isPrimary:desc" @maintainers) as |maintainer|}}
+      {{#each (sort-by "isPrimary:desc" this.maintainers) as |maintainer|}}
       <tr>
         <td>
           {{#if maintainer.isPrimary}}

ember/app/components/project-compact/component.js

@@ -11,6 +11,6 @@ export default class ProjectCompactComponent extends Component {
     return stateIconDict[this.args.project.status];
   }
   get version() {
-    return this.args.project.versionedDependencies.slice()[0];
+    return this.args.project.versionedDependencies[0];
   }
 }

ember/app/components/project-detailed/component.js

@@ -14,7 +14,7 @@ export default class ProjectDetailedComponent extends Component {
         `/api/projects/${this.args.project.id}/sync`,
         {
           method: 'POST',
-        }
+        },
       );
       if (request.ok) {
         this.notification.success('Project synced successfully');

ember/app/components/project-form/component.js

@@ -16,7 +16,7 @@ export default class ProjectFormComponent extends Component {
 
   @tracked project = emptyChangeset(
     ProjectValidations,
-    this.args.project ?? this.store.createRecord('project')
+    this.args.project ?? this.store.createRecord('project'),
   );
 
   constructor(...args) {
@@ -26,14 +26,11 @@ export default class ProjectFormComponent extends Component {
     }
   }
 
-  async initUsers() {
-    this.maintainers = await this.project.maintainers.slice();
-    this.project.users = await Promise.all(
-      this.project.maintainers.map((m) => m.user)
-    );
-
-    this.project.primaryMaintainer = this.maintainers.find(
-      (m) => m.isPrimary
+  initUsers() {
+    this.maintainers = this.project.maintainers;
+    this.project.users = this.project.maintainers.map((m) => m.user);
+    this.project.primaryMaintainer = this.maintainers?.find(
+      (m) => m.isPrimary,
     )?.user;
   }
 
@@ -42,17 +39,13 @@ export default class ProjectFormComponent extends Component {
       const project = await this.project.save();
 
       this.maintainers
-        ?.filter(
-          (m) => !this.project.users.map((u) => u.id).includes(m.user.get('id'))
-        )
+        ?.filter((m) => !this.project.users.includes(m.user))
         .forEach((m) => m.destroyRecord());
       this.project.users.forEach((user) => {
-        const maintainer = this.maintainers?.find(
-          (m) => m.user.get('id') === user.id
-        );
+        const maintainer = this.maintainers?.find((m) => m.user.id === user.id);
         if (maintainer) {
-          maintainer.isPrimary = user === this.primaryMaintainer;
-          maintainer.save();
+          maintainer.isPrimary = user.id === this.primaryMaintainer.id;
+          if (maintainer.hasDirtyAttributes) maintainer.save();
         } else {
           this.store
             .createRecord('maintainer', {
@@ -74,8 +67,9 @@ export default class ProjectFormComponent extends Component {
 
   get primaryMaintainer() {
     return (
-      this.project.users.find((u) => u === this.project.primaryMaintainer) ??
-      this.project.users[0]
+      this.project.users.find(
+        (u) => u.id === this.project.primaryMaintainer?.id,
+      ) ?? this.project.users[0]
     );
   }
 

ember/app/components/validated-input/render/component.js

@@ -1,12 +1,11 @@
-import { ensureSafeComponent } from '@embroider/util';
 import Component from '@glimmer/component';
 import getMessages from 'ember-changeset-validations/utils/get-messages';
+import PowerSelect from 'ember-power-select/components/power-select';
+import PowerSelectMultiple from 'ember-power-select/components/power-select-multiple';
+
 export default class RenderComponent extends Component {
   get selectComponent() {
-    return ensureSafeComponent(
-      this.args.multiple ? 'power-select-multiple' : 'power-select',
-      this
-    );
+    return this.args.multiple ? PowerSelectMultiple : PowerSelect;
   }
   get name() {
     return getMessages().getDescriptionFor(this.args.name);

ember/app/models/maintainer.js

@@ -2,6 +2,6 @@ import Model, { attr, belongsTo } from '@ember-data/model';
 
 export default class MaintainerModel extends Model {
   @attr isPrimary;
-  @belongsTo('project') project;
-  @belongsTo('user') user;
+  @belongsTo('project', { inverse: 'maintainers', async: true }) project;
+  @belongsTo('user', { inverse: null, async: false }) user;
 }

ember/app/models/project.js

@@ -5,8 +5,8 @@ export default class ProjectModel extends Model {
   @attr name;
   @attr status;
   @attr repo;
-  @hasMany('version') versionedDependencies;
-  @hasMany('maintainer') maintainers;
+  @hasMany('version', { inverse: null, async: false }) versionedDependencies;
+  @hasMany('maintainer', { inverse: 'project', async: false }) maintainers;
 
   @tracked users;
   @tracked primaryMaintainer;

ember/app/models/release-version.js

@@ -6,7 +6,7 @@ export default class ReleaseVersionModel extends Model {
   @attr status;
   @attr latestPatchVersion;
   @attr('django-date') endOfLife;
-  @belongsTo('dependency') dependency;
+  @belongsTo('dependency', { inverse: null, async: false }) dependency;
 
   get releaseVersion() {
     return `${this.majorVersion}.${this.minorVersion}`;

ember/app/models/version.js

@@ -3,7 +3,7 @@ import Model, { attr, belongsTo } from '@ember-data/model';
 export default class VersionModel extends Model {
   @attr patchVersion;
   @attr('django-date') releaseDate;
-  @belongsTo('releaseVersion') releaseVersion;
+  @belongsTo('releaseVersion', { inverse: null, async: false }) releaseVersion;
 
   get name() {
     return this.releaseVersion.get('dependency.name');

ember/app/services/fetch.js

@@ -8,7 +8,7 @@ const CONTENT_TYPE = 'application/vnd.api+json';
 const cleanObject = (obj) =>
   Object.fromEntries(
     // eslint-disable-next-line no-unused-vars
-    Object.entries(obj).filter(([key, value]) => !isEmpty(value))
+    Object.entries(obj).filter(([key, value]) => !isEmpty(value)),
   );
 
 export default class FetchService extends Service {
@@ -42,7 +42,7 @@ export default class FetchService extends Service {
 
       // throw an error containing a human readable message
       throw new Error(
-        `Fetch request to URL ${response.url} returned ${response.status} ${response.statusText}:\n\n${body}`
+        `Fetch request to URL ${response.url} returned ${response.status} ${response.statusText}:\n\n${body}`,
       );
     }
 

ember/app/styles/_responsive.scss

@@ -9,6 +9,7 @@
     --button-nav-button-padding: 0 10px;
   }
 }
+
 @media only screen and (min-width: $breakpoint-small) {
   :root {
     --seperator-margin-bottom: 3px;
@@ -22,6 +23,7 @@
     --detailed-heading-font-size: 1.9rem;
   }
 }
+
 @media only screen and (min-width: $breakpoint-medium) {
   :root {
     --navbar-height: 70px;
@@ -35,6 +37,7 @@
     --detailed-heading-font-size: 2.5rem;
   }
 }
+
 @media only screen and (min-width: $breakpoint-large) {
   :root {
     --navbar-height: 80px;
@@ -43,6 +46,7 @@
     --title-compact-font-size: 1.3rem;
   }
 }
+
 /* Content Contaier */
 .content-container {
   @extend .uk-container;

ember/app/styles/_variables.scss

@@ -1,14 +1,14 @@
 $breakpoint-xsmall: 419px;
 
 // uikit-colors
-$colors: 'primary', 'danger', 'warning', 'success';
+$colors: "primary", "danger", "warning", "success";
 
 // Backgrounds
 $ember-power-select-background-color: $form-background;
 $ember-power-select-disabled-background-color: $form-disabled-background;
 $ember-power-select-multiple-selection-background-color: $form-background;
 $ember-power-select-highlighted-background: #5897fb;
-$ember-power-select-selected-background: #dddddd;
+$ember-power-select-selected-background: #ddd;
 
 // Texts
 $ember-power-select-text-color: $form-color;
@@ -20,7 +20,6 @@ $ember-power-select-focus-border-color: $form-focus-border;
 $ember-power-select-default-border: $form-border-width solid $form-border;
 $ember-power-select-default-focus-border: $form-border-width solid
   $form-focus-border;
-
 $ember-power-select-trigger-border: $ember-power-select-default-border;
 $ember-power-select-active-trigger-border: $ember-power-select-default-border;
 $ember-power-select-dropdown-border: $ember-power-select-default-border;

ember/app/styles/app.css

@@ -0,0 +1 @@
+/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */