feat(ember)!: dependency sources

- adjust to backend
- adjust form to include the ability to set maintainers per source

ember/app/components/project-compact.gjs

@@ -19,7 +19,7 @@ function icon(status) {
 }
 
 function version(project) {
-  return project.versionedDependencies[0];
+  return project.sources.at(0)?.versions.at(0);
 }
 
 const Dependency = <template>

ember/app/components/project-detailed.gjs

@@ -24,7 +24,7 @@ export default class ProjectDetailedComponent extends Component {
       const project = await this.fetch.fetch(
         `/api/projects/${this.args.project.id}/sync?${new URLSearchParams({
           include:
-            'versionedDependencies,versionedDependencies.releaseVersion,versionedDependencies.releaseVersion.dependency',
+            'sources,sources.versions,sources.versions.release-version,sources.versions.release-version.dependency,sources.maintainers,sources.maintainers.user',
         })}`,
         {
           method: 'POST',
@@ -60,8 +60,8 @@ export default class ProjectDetailedComponent extends Component {
     }
   });
 
-  get dependencyData() {
-    return this.args.project.versionedDependencies.map((version) => ({
+  sourceData(source) {
+    return source.versions.map((version) => ({
       component: <template>
         <tr class='{{statusToClass version.status}}'>{{yield}}</tr>
       </template>,
@@ -76,21 +76,24 @@ export default class ProjectDetailedComponent extends Component {
     }));
   }
 
-  get maintainerData() {
-    return this.args.project.maintainers.map((m) => ({
-      values: {
-        username: <template>
-          {{#if m.isPrimary}}<UkIcon @icon='star' @ratio={{0.5}} />
-          {{/if}}{{m.user.username}}
-        </template>,
-        email: <template>
-          <a
-            class='uk-link-text'
-            href='mailto:{{m.user.email}}'
-          >{{m.user.email}}</a>
-        </template>,
-      },
-    }));
+  maintainerData(source) {
+    return source.maintainers
+      .slice()
+      .sort((a, b) => (a.isPrimary - b.isPrimary) * -1)
+      .map((m) => ({
+        values: {
+          username: <template>
+            {{#if m.isPrimary}}<UkIcon @icon='star' @ratio={{0.5}} />
+            {{/if}}{{m.user.username}}
+          </template>,
+          email: <template>
+            <a
+              class='uk-link-text'
+              href='mailto:{{m.user.email}}'
+            >{{m.user.email}}</a>
+          </template>,
+        },
+      }));
   }
 
   <template>
@@ -109,19 +112,21 @@ export default class ProjectDetailedComponent extends Component {
       </div>
 
       <hr class='seperator' />
-      <Table @data={{this.maintainerData}} @title='Maintainers' as |t|>
-        <t.head />
-        <t.body />
-      </Table>
-      <Table
-        @data={{this.dependencyData}}
-        @fallback='No dependencies yet'
-        @title='Dependencies'
-        as |t|
-      >
-        <t.head />
-        <t.body />
-      </Table>
+      {{#each @project.sources as |source|}}
+        <Table
+          @data={{this.sourceData source}}
+          @fallback='No dependencies yet'
+          @title={{source.path}}
+          as |t|
+        >
+          <t.head />
+          <t.body />
+        </Table>
+        <Table @data={{this.maintainerData source}} as |t|>
+          <t.head />
+          <t.body />
+        </Table>
+      {{/each}}
       <UkButton
         @label='Sync'
         @loading={{this.syncProject.isRunning}}

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

@@ -1,7 +1,6 @@
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { dropTask } from 'ember-concurrency';
-import { scheduleTask } from 'ember-lifeline';
 import { tracked } from 'tracked-built-ins';
 
 import { emptyChangeset } from 'outdated/utils';
@@ -10,7 +9,6 @@ import ProjectValidations from 'outdated/validations/project';
 export default class ProjectFormComponent extends Component {
   @service store;
   @service router;
-  @tracked maintainers;
 
   @service notification;
 
@@ -19,51 +17,23 @@ export default class ProjectFormComponent extends Component {
     this.args.project ?? this.store.createRecord('project'),
   );
 
-  constructor(...args) {
-    super(...args);
-    if (this.args.project) {
-      scheduleTask(this, 'actions', () => {
-        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;
-      });
-    }
-  }
-
   saveProject = dropTask(async () => {
     try {
       if (this.project.repoType === 'public') {
         this.project.accessToken = '';
       }
 
+      document
+        .querySelectorAll('[data-source-form-submit-button]')
+        .forEach((e) => e.click());
+
       const project = await this.project.save({
         adapterOptions: {
           include:
-            'versionedDependencies,versionedDependencies.releaseVersion,versionedDependencies.releaseVersion.dependency,maintainers,maintainers.user',
+            'sources,sources.versions,sources.versions.release-version,sources.versions.release-version.dependency,sources.maintainers,sources.maintainers.user',
         },
       });
 
-      this.maintainers
-        ?.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.id === user.id);
-        if (maintainer) {
-          maintainer.isPrimary = user.id === this.primaryMaintainer.id;
-          if (maintainer.hasDirtyAttributes) maintainer.save();
-        } else {
-          this.store
-            .createRecord('maintainer', {
-              user,
-              project,
-              isPrimary: user === this.primaryMaintainer,
-            })
-            .save();
-        }
-      });
-
       this.router.transitionTo('projects.detailed', project.id);
       this.project.accessToken = '';
       this.notification.success('Successfully saved!');
@@ -73,19 +43,11 @@ export default class ProjectFormComponent extends Component {
     }
   });
 
-  get primaryMaintainer() {
-    return (
-      this.project.users?.find(
-        (u) => u.id === this.project.primaryMaintainer?.id,
-      ) ?? this.project.users[0]
-    );
+  get repoTypes() {
+    return ['public', 'access-token'];
   }
 
   get users() {
     return this.store.peekAll('user');
   }
-
-  get repoTypes() {
-    return ['public', 'access-token'];
-  }
 }

ember/app/components/project-form/template.hbs

@@ -30,26 +30,8 @@
     autocomplete="off"
     @hidden={{(eq this.project.repoType "public")}}
   />
-
-  <f.input
-    @name="users"
-    @type="select"
-    @label="Maintainers"
-    @multiple={{true}}
-    @value={{this.project.users}}
-    @options={{this.users}}
-    @searchField="searchField"
-    @visibleField="fullName"
-  />
-  {{#if (gt this.project.users.length 1)}}
-    <f.input
-      @name="primaryMaintainer"
-      @type="select"
-      @options={{this.project.users}}
-      @value={{this.primaryMaintainer}}
-      @searchField="searchField"
-      @visibleField="fullName"
-    />
-  {{/if}}
+  {{#each @project.sources as |source|}}
+    <SourceForm @source={{source}} />
+  {{/each}}
   <f.button @loading={{this.saveProject.isRunning}} />
 </Form>

ember/app/components/source-form.gjs

@@ -0,0 +1,106 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { dropTask } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
+import { scheduleTask } from 'ember-lifeline';
+import { lt, or } from 'ember-truth-helpers';
+import { tracked } from 'tracked-built-ins';
+
+import Form from './form';
+
+import { emptyChangeset } from 'outdated/utils';
+import SourceValidations from 'outdated/validations/source';
+
+export default class SourceForm extends Component {
+  @service store;
+  @service notification;
+
+  @tracked source = emptyChangeset(SourceValidations, this.args.source);
+
+  constructor(...args) {
+    super(...args);
+
+    scheduleTask(this, 'actions', () => {
+      const source = this.args.source;
+      source.users = source.maintainers.map((m) => m.user);
+      source.primaryMaintainer = source.maintainers.find(
+        (m) => m.isPrimary,
+      )?.user;
+    });
+  }
+
+  get primaryMaintainer() {
+    return (
+      this.source.users?.find(
+        (u) => u.id === this.source.primaryMaintainer?.id,
+      ) ?? this.source.users[0]
+    );
+  }
+
+  get users() {
+    return this.store.peekAll('user');
+  }
+
+  saveMaintainers = dropTask(async () => {
+    try {
+      this.source.maintainers
+        ?.filter(
+          (m) => !this.source.users?.map((u) => u.id).includes(m.user.id),
+        )
+        .forEach((m) => m.destroyRecord());
+      this.source.users
+        ?.filter(
+          (u) => !this.source.maintainers?.find((m) => m.user.id === u.id),
+        )
+        .forEach((user) => {
+          this.store.createRecord('maintainer', {
+            user,
+            source: this.args.source,
+            isPrimary: user.id === this.primaryMaintainer.id,
+          });
+        });
+      this.source.maintainers.forEach((m) => {
+        m.isPrimary = m.user.id === this.primaryMaintainer.id;
+        if (m.hasDirtyAttributes) m.save();
+      });
+      this.store.findRecord('dependency-source', this.source.id, {
+        include: 'maintainers,maintainers.user',
+      });
+      this.notification.success(
+        `Successfully saved maintainers for ${this.source.path}`,
+      );
+    } catch (e) {
+      this.notification.danger(e);
+      console.error(e);
+    }
+  });
+
+  <template>
+    <Form
+      @onSubmit={{perform this.saveMaintainers}}
+      @model={{this.source}}
+      @name={{@source.path}}
+      as |f|
+    >
+      <f.input
+        @label='Maintainers'
+        @name='users'
+        @type='select'
+        @options={{this.users}}
+        @multiple={{true}}
+        @searchField='searchField'
+        @visibleField='fullName'
+      />
+      <f.input
+        @name='primaryMaintainer'
+        @options={{this.source.users}}
+        @hidden={{lt (or this.source.users.length 0) 2}}
+        @value={{this.primaryMaintainer}}
+        @type='select'
+        @searchField='searchField'
+        @visibleField='fullName'
+      />
+      <f.button class='uk-hidden' data-source-form-submit-button />
+    </Form>
+  </template>
+}

ember/app/models/dependency-source.js

@@ -0,0 +1,20 @@
+import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
+import { tracked } from 'tracked-built-ins';
+
+export default class DependencySourceModel extends Model {
+  @attr status;
+  @attr path;
+
+  @hasMany('version', { inverse: null, async: false }) versions;
+  @hasMany('maintainer', { inverse: 'source', async: false, as: 'source' })
+  maintainers;
+  @belongsTo('project', {
+    inverse: 'sources',
+    async: true,
+    as: 'dependency-source',
+  })
+  project;
+
+  @tracked users;
+  @tracked primaryMaintainer;
+}

ember/app/models/maintainer.js

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

ember/app/models/project.js

@@ -1,5 +1,4 @@
 import Model, { attr, hasMany } from '@ember-data/model';
-import { tracked } from '@glimmer/tracking';
 
 export default class ProjectModel extends Model {
   @attr name;
@@ -8,11 +7,13 @@ export default class ProjectModel extends Model {
   @attr({ defaultValue: 'public' }) repoType;
   @attr accessToken;
 
-  @hasMany('version', { inverse: null, async: false }) versionedDependencies;
-  @hasMany('maintainer', { inverse: 'project', async: false }) maintainers;
-
-  @tracked users;
-  @tracked primaryMaintainer;
+  @hasMany('dependency-source', {
+    inverse: 'project',
+    async: false,
+    as: 'project',
+    polymorphic: true,
+  })
+  sources;
 
   get repoURL() {
     return `https://${this.repo}`;