[ENG-4964] Addon cards

app/adapters/addon-service.ts

@@ -1,7 +1,7 @@
 import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import config from 'ember-osf-web/config/environment';
 
-const addonServiceUrl = config.OSF.url;
+const { addonServiceUrl } = config.OSF;
 
 export const addonServiceNamespace = 'v1';
 export const addonServiceAPIUrl = `${addonServiceUrl}${addonServiceNamespace}/`;

app/adapters/external-storage-service.ts

@@ -1,9 +1,6 @@
 import AddonServiceAdapter from './addon-service';
 
 export default class ExternalStorageServiceAdapter extends AddonServiceAdapter {
-    pathForType() {
-        return 'storage_providers';
-    }
 }
 
 declare module 'ember-data/types/registries/adapter' {

app/guid-node/addons/route.ts

@@ -1,4 +1,11 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import Store from '@ember-data/store';
 
 export default class GuidNodeAddons extends Route {
+    @service store: Store;
+
+    async model() {
+        return await this.modelFor('guid-node').taskInstance;
+    }
 }

app/guid-node/addons/styles.scss

@@ -0,0 +1,4 @@
+.addon-cards-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+}

app/guid-node/addons/template.hbs

@@ -1 +1,10 @@
-{{!-- List all providers to choose from here --}}
+<AddonsService::Manager
+    @node={{this.model}}
+    as |manager|
+>
+    <div local-class='addon-cards-wrapper'>
+        {{#each manager.addonProviders as |addon|}}
+            <AddonCard @addon={{addon}} @manager={{manager}} />
+        {{/each}}
+    </div>
+</AddonsService::Manager>

lib/osf-components/addon/components/addon-card/component.ts

@@ -0,0 +1,58 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import LegacyProvider from 'ember-osf-web/packages/addons-service/legacy-provider';
+import Provider from 'ember-osf-web/packages/addons-service/provider';
+import AddonsServiceManagerComponent from 'osf-components/components/addons-service/manager/component';
+
+interface Args {
+    addon: LegacyProvider | Provider;
+    manager: AddonsServiceManagerComponent;
+}
+
+const addonLogoMap: Record<string, string> = {
+    aws: '/assets/images/addons/logos/aws.png',
+    bitbucket: '/assets/images/addons/logos/bitbucket.png',
+    boa: '/assets/images/addons/logos/boa_color.png',
+    box: '/assets/images/addons/logos/box.png',
+    dataverse: '/assets/images/addons/logos/dataverse.png',
+    dropbox: '/assets/images/addons/logos/dropbox.png',
+    figshare: '/assets/images/addons/logos/figshare.png',
+    github: '/assets/images/addons/logos/github.png',
+    gitlab: '/assets/images/addons/logos/gitlab.png',
+    googledrive: '/assets/images/addons/logos/google.png',
+    mendeley: '/assets/images/addons/logos/mendeley.png',
+    onedrive: '/assets/images/addons/logos/onedrive.png',
+    owncloud: '/assets/images/addons/logos/owncloud.png',
+    zotero: '/assets/images/addons/logos/zotero.png',
+};
+
+export default class AddonsCardComponent extends Component<Args> {
+    @tracked deleteModalOpen = false;
+
+    @action
+    toggleDeleteModal() {
+        this.deleteModalOpen = !this.deleteModalOpen;
+    }
+
+    @action
+    closeDeleteModal() {
+        this.deleteModalOpen = false;
+    }
+
+    @action
+    disableAddon() {
+        const { addon } = this.args;
+        addon.disableProjectAddon();
+    }
+
+    get assetLogo() {
+        return addonLogoMap[this.args.addon.provider.id];
+    }
+
+    get addonIsConfigured() {
+        const { addon, manager } = this.args;
+        return manager.projectEnabledAddons.includes(addon);
+    }
+}

lib/osf-components/addon/components/addon-card/styles.scss

@@ -0,0 +1,47 @@
+.card-wrapper {
+    min-width: 208px;
+    border: solid 1px $color-border-gray;
+    margin: 5px 3px;
+    padding: 20px;
+    text-align: center;
+}
+
+.addon-card-logo {
+    height: 36px;
+}
+
+.provider-name {
+    font-weight: bold;
+    margin: 15px 0;
+}
+
+.button-looking-links {
+    composes: Button from '../button/styles.scss';
+    composes: MediumButton from '../button/styles.scss';
+    composes: SecondaryButton from '../button/styles.scss';
+}
+
+.buttons-wrapper {
+    display: flex;
+    justify-content: center;
+
+    .enable {
+        color: darken($brand-success, 10%);
+    }
+
+    .configure {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    .disable {
+        color: darken($brand-danger, 10%);
+        border-left: 0;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}

lib/osf-components/addon/components/addon-card/template.hbs

@@ -0,0 +1,85 @@
+<div
+    local-class='card-wrapper'
+    data-test-addon-card={{@addon.provider.name}}
+    data-analytics-scope={{concat 'Addon card' @addon.provider.name}}
+>
+    <img
+        data-test-addon-card-logo
+        src={{this.assetLogo}}
+        alt={{t 'osf-components.addon-card.provider-logo-alt' [email protected]}}
+        local-class='addon-card-logo'
+    />
+    <div
+        data-test-addon-card-title
+        local-class='provider-name'
+    >
+        {{@addon.provider.name}}
+    </div>
+
+    <div local-class='buttons-wrapper'>
+        {{#if this.addonIsConfigured}}
+            <OsfLink
+                data-test-addon-card-configure
+                data-analytics-name='Configure'
+                local-class='button-looking-links configure'
+                @route='guid-node.addons.addon.configure'
+                @models={{array @manager.node.id @addon.provider.id}}
+            >
+                {{t 'osf-components.addon-card.configure'}}
+            </OsfLink>
+            <Button
+                data-test-addon-card-disable
+                data-analytics-name='Disable'
+                local-class='disable'
+                {{on 'click' this.toggleDeleteModal}}
+            >
+                {{t 'osf-components.addon-card.disable'}}
+            </Button>
+        {{else}}
+            <OsfLink
+                data-test-addon-card-enable
+                data-analytics-name='Enable'
+                local-class='button-looking-links enable'
+                @route='guid-node.addons.addon.terms'
+                @models={{array @manager.node.id @addon.provider.id}}
+            >
+                {{t 'osf-components.addon-card.enable'}}
+            </OsfLink>
+        {{/if}}
+    </div>
+</div>
+{{#if this.addonIsConfigured}}
+    <OsfDialog
+        @isOpen={{this.deleteModalOpen}}
+        @onClose={{action this.closeDeleteModal}}
+        as |dialog|
+    >
+        <dialog.heading>
+            {{t 'osf-components.addon-card.disable-modal-header'}}
+        </dialog.heading>
+        <dialog.main>
+            <p>
+                {{t 'osf-components.addon-card.disable-modal-body'}}
+            </p>
+        </dialog.main>
+        <dialog.footer data-analytics-scope='Verify email modal'>
+            <Button
+                data-test-addon-disable-cancel
+                data-analytics-name='Cancel'
+                @type='secondary'
+                {{on 'click' dialog.close}}
+            >
+                {{t 'general.cancel'}}
+            </Button>
+            <Button
+                data-test-addon-disable-modal-disable
+                data-analytics-name='Disable'
+                @type='destroy'
+                {{on 'click' (queue this.disableAddon dialog.close)}}
+            >
+                {{t 'osf-components.addon-card.disable'}}
+            </Button>
+        </dialog.footer>
+    </OsfDialog>
+{{/if}}
+

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

@@ -2,7 +2,9 @@ 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 { taskFor } from 'ember-concurrency-ts';
 
 import NodeModel from 'ember-osf-web/models/node';
 import LegacyProvider from 'ember-osf-web/packages/addons-service/legacy-provider';
@@ -19,31 +21,49 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
 
     node = this.args.node;
 
+    @tracked addonProviders: Array<LegacyProvider | Provider> = [];
+
+    constructor(owner: unknown, args: Args) {
+        super(owner, args);
+        taskFor(this.getAddonProviders).perform();
+    }
+
     @task
     @waitFor
-    async addonProviders(): Promise<(Array<LegacyProvider | Provider>)> {
-        const legacyProviders: LegacyProvider[] = await this.legacyProviders();
+    async getAddonProviders() {
+        const legacyProviders: LegacyProvider[] = await taskFor(this.legacyProviders).perform();
         const serviceStorageProviders: Provider[] = this.serviceStorageProviders();
 
-        return [...legacyProviders, ...serviceStorageProviders]
+        const providers = [...legacyProviders, ...serviceStorageProviders]
             .sort(this.providerSorter);
+        this.addonProviders = providers;
     }
 
     providerSorter(a: Provider, b: Provider) {
         return a.provider.name.localeCompare(b.provider.name);
     }
 
+    get projectEnabledAddons(): Array<LegacyProvider | Provider> {
+        const legacyAddons = this.legacyProjectEnabledAddons();
+        const serviceAddons = this.serviceProjectEnabledAddons();
+        return [...legacyAddons, ...serviceAddons];
+    }
+
     // V2 API Methods
 
     @task
     @waitFor
     async legacyProviders() {
-        const addons = await this.store.findAll('addon');
+        const addons = (await this.store.findAll('addon')).toArray();
         const legacyAddons = [] as LegacyProvider[];
         for (const addon of addons) {
             legacyAddons.addObject(new LegacyProvider(addon, this.currentUser, this.node));
         }
-        return addons;
+        return legacyAddons;
+    }
+
+    get isLoading() {
+        return taskFor(this.getAddonProviders).isRunning;
     }
 
     legacyProjectEnabledAddons() {
@@ -58,6 +78,6 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
     }
 
     serviceProjectEnabledAddons() {
-        return;
+        return [];
     }
 }

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

@@ -0,0 +1,6 @@
+{{yield (hash
+    node=this.node
+    addonProviders=this.addonProviders
+    loading=this.loading
+    projectEnabledAddons=this.projectEnabledAddons
+)}}

lib/osf-components/app/components/addon-card/component.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/addon-card/component';

lib/osf-components/app/components/addon-card/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/addon-card/template';

lib/osf-components/app/components/addons-service/manager/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/addons-service/manager/template';

mirage/config.ts

@@ -427,12 +427,12 @@ export default function(this: Server) {
     // Addon service
     this.urlPrefix = addonServiceUrl;
     this.namespace = addonServiceNamespace;
-    this.resource('external_storage_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'] });
-    this.resource('authorized_storage_accounts', { only: ['show', 'update'] });
-    this.resource('configured_storage_addons', { only: ['show', 'update'] });
+    this.resource('external-storage-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'] });
+    this.resource('authorized-storage-accounts', { only: ['show', 'update'] });
+    this.resource('configured-storage-addons', { only: ['show', 'update'] });
 
     // Reset API url and namespace to use v2 endpoints for tests
     this.urlPrefix = apiUrl;