Add tabs to node addons page

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

@@ -35,7 +35,7 @@
     padding: 0 10px;
 
     &.active {
-        background-color: #f0f0f0;
+        background-color: $color-light;
     }
 }
 
@@ -53,3 +53,40 @@
 .account-select {
     margin: 20px 0;
 }
+
+.tab-list {
+    margin-bottom: 10px;
+    border-bottom: 1px solid $color-border-gray;
+    box-sizing: border-box;
+    color: $color-grey;
+    display: block;
+    line-height: 20px;
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+    height: 41px;
+    padding: 0;
+}
+
+.tab-list {
+    li {
+        cursor: pointer;
+        display: block;
+        position: relative;
+        margin-bottom: -1px;
+        float: left;
+        height: 41px;
+        padding: 10px 15px;
+    }
+
+    li:global(.ember-tabs__tab--selected) {
+        background-color: $bg-light;
+        border-bottom: 2px solid $color-blue;
+    }
+
+    li:hover {
+        text-decoration: none;
+        background-color: $bg-light;
+        color: var(--primary-color);
+    }
+}

app/packages/addons-service/provider.ts

@@ -88,7 +88,7 @@ export default class Provider {
     @service store!: Store;
 
     get isConfigured() {
-        return Boolean(this.configuredAddon);
+        return Boolean(this.configuredAddon) || Boolean(this.configuredAddons?.length);
     }
 
     constructor(provider: any, currentUser: CurrentUserService, node?: NodeModel) {

app/serializers/authorized-citation-account.ts

@@ -1,6 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import OsfSerializer from './osf-serializer';
 
-export default class AuthorizedCitationAccountSerializer extends JSONAPISerializer {
+export default class AuthorizedCitationAccountSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/authorized-computing-account.ts

@@ -1,6 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import OsfSerializer from './osf-serializer';
 
-export default class AuthorizedComputingAccountSerializer extends JSONAPISerializer {
+export default class AuthorizedComputingAccountSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/authorized-storage-account.ts

@@ -1,6 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import OsfSerializer from './osf-serializer';
 
-export default class AuthorizedStorageAccountSerializer extends JSONAPISerializer {
+export default class AuthorizedStorageAccountSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/configured-citation-addon.ts

@@ -1,6 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import OsfSerializer from './osf-serializer';
 
-export default class ConfiguredCitationAddonSerializer extends JSONAPISerializer {
+export default class ConfiguredCitationAddonSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/configured-computing-addon.ts

@@ -1,6 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import OsfSerializer from './osf-serializer';
 
-export default class ConfiguredComputingAddonSerializer extends JSONAPISerializer {
+export default class ConfiguredComputingAddonSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/configured-storage-addon.ts

@@ -1,6 +1,5 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
-
-export default class ConfiguredStorageAddonSerializer extends JSONAPISerializer {
+import OsfSerializer from './osf-serializer';
+export default class ConfiguredStorageAddonSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/external-citation-service.ts

@@ -1,10 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
-import { underscore } from '@ember/string';
+import OsfSerializer from './osf-serializer';
 
-export default class ExternalCitationServiceSerializer extends JSONAPISerializer {
-    keyForAttribute(key: string) {
-        return underscore(key);
-    }
+export default class ExternalCitationServiceSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/external-computing-service.ts

@@ -1,10 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
-import { underscore } from '@ember/string';
+import OsfSerializer from './osf-serializer';
 
-export default class ExternalComputingServiceSerializer extends JSONAPISerializer {
-    keyForAttribute(key: string) {
-        return underscore(key);
-    }
+export default class ExternalComputingServiceSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/external-storage-service.ts

@@ -1,10 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
-import { underscore } from '@ember/string';
+import OsfSerializer from './osf-serializer';
 
-export default class ExternalStorageServiceSerializer extends JSONAPISerializer {
-    keyForAttribute(key: string) {
-        return underscore(key);
-    }
+export default class ExternalStorageServiceSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/resource-reference.ts

@@ -1,6 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import OsfSerializer from './osf-serializer';
 
-export default class ResourceReferenceSerializer extends JSONAPISerializer {
+export default class ResourceReferenceSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

app/serializers/user-reference.ts

@@ -1,6 +1,6 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
+import OsfSerializer from './osf-serializer';
 
-export default class UserReferenceSerializer extends JSONAPISerializer {
+export default class UserReferenceSerializer extends OsfSerializer {
 }
 
 declare module 'ember-data/types/registries/serializer' {

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

@@ -34,7 +34,7 @@
         border-top-right-radius: 0;
     }
 
-    .disable {
+    .disconnect {
         color: darken($brand-danger, 10%);
         border-left: 0;
         border-bottom-left-radius: 0;

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

@@ -19,27 +19,27 @@
     <div local-class='buttons-wrapper'>
         {{#if this.addonIsConfigured}}
             <Button
-                data-test-addon-card-configure
-                data-analytics-name='Configure'
+                data-test-addon-card-edit
+                data-analytics-name='Edit'
                 {{on 'click' (fn @manager.configureProvider @addon)}}
             >
-                {{t 'osf-components.addon-card.configure'}}
+                {{t 'general.edit'}}
             </Button>
             <Button
-                data-test-addon-card-disable
-                data-analytics-name='Disable'
-                local-class='disable'
+                data-test-addon-card-disconnect
+                data-analytics-name='Disconnect'
+                local-class='disconnect'
                 {{on 'click' (action (mut this.deleteModalOpen) true)}}
             >
-                {{t 'osf-components.addon-card.disable'}}
+                {{t 'osf-components.addon-card.disconnect'}}
             </Button>
         {{else}}
             <Button
-                data-test-addon-card-enable
-                data-analytics-name='Enable'
+                data-test-addon-card-connect
+                data-analytics-name='Connect'
                 {{on 'click' (fn @manager.beginAccountSetup @addon)}}
             >
-                {{t 'osf-components.addon-card.enable'}}
+                {{t 'osf-components.addon-card.connect'}}
             </Button>
         {{/if}}
     </div>
@@ -51,30 +51,30 @@
         as |dialog|
     >
         <dialog.heading>
-            {{t 'osf-components.addon-card.disable-modal-header'}}
+            {{t 'osf-components.addon-card.disconnect-modal-header'}}
         </dialog.heading>
         <dialog.main>
             <p>
-                {{t 'osf-components.addon-card.disable-modal-body'}}
+                {{t 'osf-components.addon-card.disconnect-modal-body'}}
             </p>
         </dialog.main>
-        <dialog.footer data-analytics-scope='Disable addon modal'>
+        <dialog.footer data-analytics-scope='Disconnect addon modal'>
             <Button
-                data-test-addon-disable-cancel
+                data-test-addon-disconnect-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'
+                data-test-addon-disconnect-modal-confirm
+                data-analytics-name='Confirm Disconnect'
                 @type='destroy'
                 disabled={{this.disableAddon.isRunning}}
                 {{on 'click' (perform this.disableAddon)}}
             >
-                {{t 'osf-components.addon-card.disable'}}
+                {{t 'osf-components.addon-card.disconnect'}}
             </Button>
         </dialog.footer>
     </OsfDialog>

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

@@ -13,8 +13,7 @@ import Toast from 'ember-toastr/services/toast';
 import ResourceReferenceModel from 'ember-osf-web/models/resource-reference';
 import NodeModel from 'ember-osf-web/models/node';
 import Provider, {
-    AllAuthorizedAccountTypes,
-    AllConfiguredAddonTypes,
+    AllAuthorizedAccountTypes, AllConfiguredAddonTypes,
 } 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';
@@ -25,6 +24,7 @@ interface FilterSpecificObject {
     modelName: string;
     task: Task<any, any>;
     list: EmberArray<Provider>;
+    configuredAddons?: EmberArray<AllConfiguredAddonTypes>;
 }
 
 enum PageMode {
@@ -62,16 +62,19 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
             modelName: 'external-storage-service',
             task: taskFor(this.getStorageAddonProviders),
             list: A([]),
+            configuredAddons: A([]),
         },
         [FilterTypes.CITATION_MANAGER]: {
             modelName: 'external-citation-service',
             task: taskFor(this.getCitationAddonProviders),
             list: A([]),
+            configuredAddons: A([]),
         },
         [FilterTypes.CLOUD_COMPUTING]: {
             modelName: 'external-computing-service',
             task: taskFor(this.getCloudComputingProviders),
             list: A([]),
+            configuredAddons: A([]),
         },
     };
     @tracked filterText = '';
@@ -91,6 +94,7 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
         repo: '',
     };
     @tracked connectAccountError = false;
+    @tracked displayName = '';
 
     @action
     filterByAddonType(type: FilterTypes) {
@@ -103,6 +107,17 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
             activeFilterObject.task.perform();
         }
     }
+    get filteredConfiguredProviders() {
+        const activeFilterObject = this.filterTypeMapper[this.activeFilterType];
+        const possibleProviders = activeFilterObject.list;
+        const textFilteredAddons = possibleProviders.filter(
+            (provider: any) => provider.provider.name.toLowerCase().includes(this.filterText.toLowerCase()),
+        );
+
+        const configuredProviders = textFilteredAddons.filter((provider: Provider) => provider.isConfigured);
+
+        return configuredProviders;
+    }
 
     get filteredAddonProviders() {
         const activeFilterObject = this.filterTypeMapper[this.activeFilterType];
@@ -171,7 +186,7 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
     async createAuthorizedAccount() {
         if (this.selectedProvider) {
             const newAccount = await taskFor(this.selectedProvider.providerMap!
-                .createAccountForNodeAddon).perform(this.credentialsObject);
+                .createAccountForNodeAddon).perform(this.credentialsObject, this.displayName);
             return newAccount;
         }
         return undefined;
@@ -250,6 +265,7 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
             secretKey: '',
             repo: '',
         };
+        this.displayName = '';
     }
 
     @action
@@ -276,7 +292,7 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
             filter: {'resource-uri': encodeURI(this.node.links.iri as string)},
         });
         if(references) {
-            this.addonServiceNode = references[0];
+            this.addonServiceNode = references.firstObject;
         }
     }
 
@@ -289,7 +305,8 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
         activeFilterObject.list = A(serviceStorageProviders.sort(this.providerSorter));
 
         if (this.addonServiceNode) {
-            await this.addonServiceNode.get('configuredStorageAddons');
+            const configuredAddons = await this.addonServiceNode.get('configuredStorageAddons');
+            activeFilterObject.configuredAddons = A(configuredAddons.toArray());
         }
     }
 
@@ -302,7 +319,8 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
         activeFilterObject.list = cloudComputingProviders.sort(this.providerSorter);
 
         if (this.addonServiceNode) {
-            await this.addonServiceNode.get('configuredComputingAddons');
+            const configuredAddons = await this.addonServiceNode.get('configuredComputingAddons');
+            activeFilterObject.configuredAddons = A(configuredAddons.toArray());
         }
     }
 
@@ -315,7 +333,8 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
         activeFilterObject.list = serviceCloudComputingProviders.sort(this.providerSorter);
 
         if (this.addonServiceNode) {
-            await this.addonServiceNode.get('configuredCitationAddons');
+            const configuredAddons = await this.addonServiceNode.get('configuredCitationAddons');
+            activeFilterObject.configuredAddons = A(configuredAddons.toArray());
         }
     }
 

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

@@ -5,6 +5,7 @@
     activeFilterType=this.activeFilterType
     filterByAddonType=this.filterByAddonType
     filterText=this.filterText
+    filteredConfiguredProviders=this.filteredConfiguredProviders
     filteredAddonProviders=this.filteredAddonProviders
     currentListIsLoading=this.currentListIsLoading
     projectEnabledAddons=this.projectEnabledAddons
@@ -24,6 +25,7 @@
     connectAccount=this.connectAccount
     connectAccountError=this.connectAccountError
     credentialsObject=this.credentialsObject
+    displayName=this.displayName
     onCredentialsInput=this.onCredentialsInput
     confirmAccountSetup=this.confirmAccountSetup
     cancelSetup=this.cancelSetup

mirage/scenarios/dashboard.ts

@@ -119,7 +119,7 @@ export function dashboardScenario(server: Server, currentUser: ModelInstance<Use
 
     server.create('configured-storage-addon', {
         id: 'box1',
-        name: 'box',
+        name: 'Box',
         displayName: 'Boxed Data',
         rootFolder: '/woot/',
         storageProvider: boxAddon,