[ENG-5263] Add different addon types

app/adapters/citation-service.ts

@@ -0,0 +1,10 @@
+import AddonServiceAdapter from './addon-service';
+
+export default class CitationServiceAdapter extends AddonServiceAdapter {
+}
+
+declare module 'ember-data/types/registries/adapter' {
+    export default interface AdapterRegistry {
+        'citation-service': CitationServiceAdapter;
+    } // eslint-disable-line semi
+}

app/adapters/cloud-computing-service.ts

@@ -0,0 +1,10 @@
+import AddonServiceAdapter from './addon-service';
+
+export default class CloudComputingServiceAdapter extends AddonServiceAdapter {
+}
+
+declare module 'ember-data/types/registries/adapter' {
+    export default interface AdapterRegistry {
+        'cloud-computing-service': CloudComputingServiceAdapter;
+    } // eslint-disable-line semi
+}

app/guid-node/addons/index/styles.scss

@@ -42,6 +42,8 @@
 .addon-cards-wrapper {
     display: flex;
     flex-wrap: wrap;
+    width: 100%;
+    justify-content: center;
 }
 
 .back-button {

app/guid-node/addons/index/template.hbs

@@ -125,11 +125,15 @@
                     {{/each}}
                 </div>
                 <div local-class='addon-cards-wrapper'>
-                    {{#each manager.filteredAddonProviders as |addon|}}
-                        <AddonCard @addon={{addon}} @manager={{manager}} />
+                    {{#if manager.currentListIsLoading}}
+                        <LoadingIndicator @dark={{true}} />
                     {{else}}
-                        {{t 'addons.list.no-results'}}
-                    {{/each}}
+                        {{#each manager.filteredAddonProviders as |addon|}}
+                            <AddonCard @addon={{addon}} @manager={{manager}} />
+                        {{else}}
+                            {{t 'addons.list.no-results'}}
+                        {{/each}}
+                    {{/if}}
                 </div>
             </div>
         {{/if}}

app/models/citation-service.ts

@@ -0,0 +1,16 @@
+import { attr } from '@ember-data/model';
+
+import OsfModel from './osf-model';
+
+export default class CitationServiceModel extends OsfModel {
+    @attr('fixstring') name!: string;
+    @attr('fixstring') iconUri!: string;
+    @attr('fixstring') authUri!: string;
+    // TODO: actually need some attrs here for citation service options
+}
+
+declare module 'ember-data/types/registries/model' {
+    export default interface ModelRegistry {
+        'citation-service': CitationServiceModel;
+    } // eslint-disable-line semi
+}

app/models/cloud-computing-service.ts

@@ -0,0 +1,16 @@
+import { attr } from '@ember-data/model';
+
+import OsfModel from './osf-model';
+
+export default class CloudComputingServiceModel extends OsfModel {
+    @attr('fixstring') name!: string;
+    @attr('string') iconUri!: string;
+    @attr('fixstring') authUri!: string;
+    // TODO: actually need some attrs here for cloud computing options
+}
+
+declare module 'ember-data/types/registries/model' {
+    export default interface ModelRegistry {
+        'cloud-computing-service': CloudComputingServiceModel;
+    } // eslint-disable-line semi
+}

app/serializers/authorized-storage-account.ts

@@ -1,4 +1,5 @@
 import JSONAPISerializer from '@ember-data/serializer/json-api';
+
 export default class AuthorizedStorageAccountSerializer extends JSONAPISerializer {
 }
 

app/serializers/citation-service.ts

@@ -0,0 +1,10 @@
+import JSONAPISerializer from '@ember-data/serializer/json-api';
+
+export default class CitationServiceSerializer extends JSONAPISerializer {
+}
+
+declare module 'ember-data/types/registries/serializer' {
+    export default interface SerializerRegistry {
+        'citation-service': CitationServiceSerializer;
+    } // eslint-disable-line semi
+}

app/serializers/cloud-computing-service.ts

@@ -0,0 +1,10 @@
+import JSONAPISerializer from '@ember-data/serializer/json-api';
+
+export default class CloudComputingServiceSerializer extends JSONAPISerializer {
+}
+
+declare module 'ember-data/types/registries/serializer' {
+    export default interface SerializerRegistry {
+        'cloud-computing-service': CloudComputingServiceSerializer;
+    } // eslint-disable-line semi
+}

lib/osf-components/addon/components/addons-service/manager/component.ts

@@ -1,10 +1,11 @@
+import EmberArray, { A } from '@ember/array';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';
 import Store from '@ember-data/store';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { task } from 'ember-concurrency';
+import { Task, task } from 'ember-concurrency';
 import { taskFor } from 'ember-concurrency-ts';
 import IntlService from 'ember-intl/services/intl';
 
@@ -14,6 +15,12 @@ import Provider from 'ember-osf-web/packages/addons-service/provider';
 import CurrentUserService from 'ember-osf-web/services/current-user';
 import ConfiguredStorageAddonModel from 'ember-osf-web/models/configured-storage-addon';
 
+interface FilterSpecificObject {
+    modelName: string;
+    task: Task<any, any>;
+    list: EmberArray<Provider>;
+}
+
 enum PageMode {
     TERMS = 'terms',
     NEW_OR_EXISTING_ACCOUNT = 'newOrExistingAccount',
@@ -42,36 +49,53 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
     @tracked addonServiceNode?: InternalResourceModel;
 
     possibleFilterTypes = Object.values(FilterTypes);
+    filterTypeMapper: Record<FilterTypes, FilterSpecificObject> = {
+        [FilterTypes.STORAGE]: {
+            modelName: 'external-storage-service',
+            task: taskFor(this.getStorageAddonProviders),
+            list: A([]),
+        },
+        [FilterTypes.CITATION_MANAGER]: {
+            modelName: 'citation-service',
+            task: taskFor(this.getCitationAddonProviders),
+            list: A([]),
+        },
+        [FilterTypes.CLOUD_COMPUTING]: {
+            modelName: 'cloud-computing-service',
+            task: taskFor(this.getCloudComputingProviders),
+            list: A([]),
+        },
+    };
     @tracked filterText = '';
     @tracked activeFilterType: FilterTypes = FilterTypes.STORAGE;
-    @tracked storageProviders: Provider[] = [];
 
     @tracked pageMode?: PageMode;
     @tracked selectedProvider?: Provider;
 
     @action
     filterByAddonType(type: FilterTypes) {
         this.activeFilterType = type;
+        const activeFilterObject = this.filterTypeMapper[type];
+        if (activeFilterObject.list.length === 0) {
+            activeFilterObject.task.perform();
+        }
     }
 
     get filteredAddonProviders() {
-        let possibleProviders: any[] = [];
-        switch (this.activeFilterType) {
-        case FilterTypes.STORAGE:
-            possibleProviders = this.storageProviders;
-            break;
-        case FilterTypes.CITATION_MANAGER:
-        case FilterTypes.CLOUD_COMPUTING:
-            possibleProviders = [];
-            break;
-        }
+        const activeFilterObject = this.filterTypeMapper[this.activeFilterType];
+        const possibleProviders = activeFilterObject.list;
         const textFilteredAddons = possibleProviders.filter(
             (provider: any) => provider.provider.name.toLowerCase().includes(this.filterText.toLowerCase()),
         );
 
         return textFilteredAddons;
     }
 
+    get currentListIsLoading() {
+        const activeFilterObject = this.filterTypeMapper[this.activeFilterType];
+        return activeFilterObject.task.isRunning;
+    }
+
     @action
     configureProvider(provider: Provider) {
         this.cancelSetup();
@@ -131,7 +155,7 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
     constructor(owner: unknown, args: Args) {
         super(owner, args);
         taskFor(this.getStorageServiceNode).perform();
-        taskFor(this.getAddonProviders).perform();
+        taskFor(this.getStorageAddonProviders).perform();
         taskFor(this.getConfiguredAddonProviders).perform();
     }
 
@@ -152,10 +176,29 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
 
     @task
     @waitFor
-    async getAddonProviders() {
-        const serviceStorageProviders: Provider[] = await taskFor(this.serviceStorageProviders).perform();
-        this.storageProviders = serviceStorageProviders.sort(this.providerSorter);
-        // Get other provider types here, eventually
+    async getStorageAddonProviders() {
+        const activeFilterObject = this.filterTypeMapper[FilterTypes.STORAGE];
+        const serviceStorageProviders: Provider[] =
+            await taskFor(this.getExternalProviders).perform(activeFilterObject.modelName);
+        activeFilterObject.list = serviceStorageProviders.sort(this.providerSorter);
+    }
+
+    @task
+    @waitFor
+    async getCloudComputingProviders() {
+        const activeFilterObject = this.filterTypeMapper[FilterTypes.CLOUD_COMPUTING];
+        const cloudComputingProviders: Provider[] =
+            await taskFor(this.getExternalProviders).perform(activeFilterObject.modelName);
+        activeFilterObject.list = cloudComputingProviders.sort(this.providerSorter);
+    }
+
+    @task
+    @waitFor
+    async getCitationAddonProviders() {
+        const activeFilterObject = this.filterTypeMapper[FilterTypes.CITATION_MANAGER];
+        const serviceCloudComputingProviders: Provider[] =
+            await taskFor(this.getExternalProviders).perform(activeFilterObject.modelName);
+        activeFilterObject.list = serviceCloudComputingProviders.sort(this.providerSorter);
     }
 
     providerSorter(a: Provider, b: Provider) {
@@ -166,10 +209,6 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
         return this.serviceProjectEnabledAddons();
     }
 
-    get isLoading() {
-        return taskFor(this.getAddonProviders).isRunning;
-    }
-
     get headingText() {
         const providerName = this.selectedProvider?.provider.name;
         let heading;
@@ -203,10 +242,10 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
 
     @task
     @waitFor
-    async serviceStorageProviders() {
-        const serviceStorageProviders = (await this.store.findAll('external-storage-service')).toArray();
+    async getExternalProviders(providerType: string) {
+        const serviceProviderModels = (await this.store.findAll(providerType)).toArray();
         const serviceProviders = [] as Provider[];
-        for (const provider of serviceStorageProviders) {
+        for (const provider of serviceProviderModels) {
             serviceProviders.addObject(new Provider(provider, this.currentUser, this.node));
         }
         return serviceProviders;

lib/osf-components/addon/components/addons-service/manager/template.hbs

@@ -6,7 +6,7 @@
     filterByAddonType=this.filterByAddonType
     filterText=this.filterText
     filteredAddonProviders=this.filteredAddonProviders
-    isLoading=this.isLoading
+    currentListIsLoading=this.currentListIsLoading
     projectEnabledAddons=this.projectEnabledAddons
     selectedProvider=this.selectedProvider
     configureProvider=this.configureProvider

mirage/config.ts

@@ -519,6 +519,8 @@ export default function(this: Server) {
     this.urlPrefix = addonServiceUrl;
     this.namespace = addonServiceNamespace;
     this.resource('external-storage-services', { only: ['index', 'show'] });
+    this.resource('citation-services', { only: ['index', 'show'] });
+    this.resource('cloud-computing-services', { only: ['index', 'show'] });
     this.resource('internal-users', { only: ['show'] });
     this.get('/internal-users/:userGuid/authorized-storage-accounts/', addons.internalUserAuthorizedStorageAccountList);
     this.resource('internal-resources', { only: ['show'] });

mirage/fixtures/citation-services.ts

@@ -0,0 +1,8 @@
+// TODO: needs iconUri and authUri
+export default [
+    {
+        id: 'zotero',
+        name: 'Zotero',
+        iconUri: 'https://zbib.org/static/favicon.ico',
+    },
+];

mirage/fixtures/cloud-computing-services.ts

@@ -0,0 +1,6 @@
+export default [
+    {
+        id: 'boa',
+        name: 'Boa',
+    },
+];

mirage/scenarios/default.ts

@@ -23,6 +23,8 @@ export default function(server: Server) {
     server.loadFixtures('preprint-providers');
     server.loadFixtures('licenses');
     server.loadFixtures('external-storage-services');
+    server.loadFixtures('cloud-computing-services');
+    server.loadFixtures('citation-services');
     // server.loadFixtures('registration-providers');
 
     // load citations for preprints, registrations, or manyProjectRegistrations

mirage/serializers/addon-service-serializer.ts

@@ -4,14 +4,6 @@ import { JSONAPISerializer, ModelInstance, Request } from 'ember-cli-mirage';
 import { addonServiceAPIUrl } from 'ember-osf-web/adapters/addon-service';
 
 export default class AddonServiceSerializer extends JSONAPISerializer {
-    keyForAttribute(attr: string) {
-        return dasherize(attr);
-    }
-
-    keyForRelationship(key: string) {
-        return dasherize(key);
-    }
-
     buildNormalLinks(model: ModelInstance) {
         return {
             self: `${addonServiceAPIUrl}${model.modelName}/${model.id}/`,

mirage/serializers/citation-service.ts

@@ -0,0 +1,6 @@
+import CitationServiceModel from 'ember-osf-web/models/citation-service';
+
+import ApplicationSerializer from './application';
+
+export default class CitationServiceSerializer extends ApplicationSerializer<CitationServiceModel> {
+}

mirage/serializers/cloud-computing-service.ts

@@ -0,0 +1,6 @@
+import CloudComputingServiceModel from 'ember-osf-web/models/cloud-computing-service';
+
+import ApplicationSerializer from './application';
+
+export default class CloudComputingServiceSerializer extends ApplicationSerializer<CloudComputingServiceModel> {
+}