[ENG-5149] Choose account workflow for addons

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

@@ -49,3 +49,7 @@
 .back-button {
     float: right;
 }
+
+.account-select {
+    margin: 20px 0;
+}

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

@@ -22,13 +22,6 @@
                             {{t 'general.back'}}
                         </Button>
                     </div>
-                    <Button
-                        data-test-addon-cancel-button
-                        data-analytics-name='Cancel'
-                        {{on 'click' manager.cancelSetup}}
-                    >
-                        {{t 'general.cancel'}}
-                    </Button>
                     {{#if (eq manager.pageMode 'terms')}}
                         <Button
                             data-test-addon-accept-terms-button
@@ -58,20 +51,33 @@
                             {{t 'addons.accountSelect.new-account'}}
                         </Button>
                     {{else if (eq manager.pageMode 'accountSelect')}}
-                        <ul>
+                        <fieldset>
                             {{#each provider.authorizedStorageAccounts as |account| }}
-                                <li>{{account.externalUserDisplayName}}</li>
+                                <div local-class='account-select'>
+                                    <label>
+                                        <Input
+                                            name='account-select'
+                                            @value={{account.id}}
+                                            @type='radio'
+                                            @checked={{eq manager.selectedAccount.id account.id}}
+                                            {{on 'change' (fn manager.selectAccount account)}}
+                                        />
+                                        {{account.externalUserDisplayName}}
+                                    </label>
+                                </div>
+                            {{else}}
+                                {{t 'addons.accountSelect.no-accounts'}}
                             {{/each}}
-                        </ul>
+                        </fieldset>
                         <Button
                             data-test-addon-authorize-button
                             data-analytics-name='Authorize'
+                            disabled={{not manager.selectedAccount.id}}
                             {{on 'click' manager.authorizeSelectedAccount}}
                         >
                             {{t 'general.authorize'}}
                         </Button>
                     {{else if (eq manager.pageMode 'accountCreate')}}
-
                         <Button
                             data-test-addon-authorize-button
                             data-analytics-name='Authorize'
@@ -80,13 +86,18 @@
                             {{t 'general.authorize'}}
                         </Button>
                     {{else if (eq manager.pageMode 'confirm')}}
-                        <Button
-                            data-test-addon-confirm-setup-button
-                            data-analytics-name='Confirm Setup'
-                            {{on 'click' manager.confirmAccountSetup}}
-                        >
-                            {{t 'general.confirm'}}
-                        </Button>
+                        {{t 'addons.confirm.verify'}}
+                        {{manager.selectedAccount.externalUserDisplayName}}
+                        <div>
+                            <Button
+                                data-test-addon-confirm-setup-button
+                                data-analytics-name='Confirm Setup'
+                                disabled={{manager.confirmAccountSetup.isRunning}}
+                                {{on 'click' (perform manager.confirmAccountSetup manager.selectedAccount)}}
+                            >
+                                {{if manager.confirmAccountSetup.isRunning (t 'addons.confirm.authorizing') (t 'general.confirm')}}
+                            </Button>
+                        </div>
                     {{else if (eq manager.pageMode 'configure')}}
                         <Button
                             data-test-addon-save-button

app/packages/addons-service/provider.ts

@@ -110,6 +110,22 @@ export default class Provider {
         return account;
     }
 
+    @task
+    @waitFor
+    async createConfiguredStorageAddon(account: AuthorizedStorageAccountModel) {
+        if (!this.configuredStorageAddon) {
+            const configuredStorageAddon = this.store.createRecord('configured-storage-addon', {
+                rootFolder: '',
+                storageProvider: this.provider,
+                accountOwner: this.userReference,
+                authorizedResource: this.serviceNode,
+                baseAccount: account,
+            });
+            await configuredStorageAddon.save();
+            this.configuredStorageAddon = configuredStorageAddon;
+        }
+    }
+
     @task
     @waitFor
     async setNodeAddonCredentials(account: AuthorizedStorageAccountModel) {

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

@@ -14,6 +14,7 @@ import NodeModel from 'ember-osf-web/models/node';
 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';
+import AuthorizedStorageAccountModel from 'ember-osf-web/models/authorized-storage-account';
 
 interface FilterSpecificObject {
     modelName: string;
@@ -71,6 +72,7 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
 
     @tracked pageMode?: PageMode;
     @tracked selectedProvider?: Provider;
+    @tracked selectedAccount?: AuthorizedStorageAccountModel;
 
     @action
     filterByAddonType(type: FilterTypes) {
@@ -135,15 +137,20 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
         this.pageMode = PageMode.CONFIRM;
     }
 
-    @action
-    confirmAccountSetup() {
+    @task
+    @waitFor
+    async confirmAccountSetup(account: AuthorizedStorageAccountModel) {
+        if (this.selectedProvider && this.selectedAccount) {
+            await taskFor(this.selectedProvider.createConfiguredStorageAddon).perform(account);
+        }
         this.pageMode = PageMode.CONFIGURE;
     }
 
     @action
     cancelSetup() {
         this.pageMode = undefined;
         this.selectedProvider = undefined;
+        this.selectedAccount = undefined;
     }
 
     @action
@@ -152,6 +159,11 @@ export default class AddonsServiceManagerComponent extends Component<Args> {
         // TODO: Actually save the provider
     }
 
+    @action
+    selectAccount(account: AuthorizedStorageAccountModel) {
+        this.selectedAccount = account;
+    }
+
     constructor(owner: unknown, args: Args) {
         super(owner, args);
         taskFor(this.getStorageServiceNode).perform();

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

@@ -12,6 +12,8 @@
     configureProvider=this.configureProvider
     beginAccountSetup=this.beginAccountSetup
     acceptTerms=this.acceptTerms
+    selectedAccount=this.selectedAccount
+    selectAccount=this.selectAccount
     authorizeSelectedAccount=this.authorizeSelectedAccount
     chooseExistingAccount=this.chooseExistingAccount
     createNewAccount=this.createNewAccount

mirage/config.ts

@@ -529,6 +529,7 @@ export default function(this: Server) {
         addons.resourceReferenceConfiguredStorageAddonList);
     this.resource('authorized-storage-accounts', { only: ['show', 'update', 'create'] });
     this.resource('configured-storage-addons', { only: ['show', 'update', 'delete'] });
+    this.post('configured-storage-addons', addons.createConfiguredStorageAddon);
 
     // Reset API url and namespace to use v2 endpoints for tests
     this.urlPrefix = apiUrl;

mirage/serializers/configured-storage-addon.ts

@@ -5,7 +5,7 @@ import ConfiguredStorageAddonModel from 'ember-osf-web/models/configured-storage
 
 import AddonServiceSerializer from './addon-service-serializer';
 
-interface MirageConfiguredStorageAddon extends ConfiguredStorageAddonModel {
+export interface MirageConfiguredStorageAddon extends ConfiguredStorageAddonModel {
     accountOwnerId: string;
     authorizedResourceId: string;
     baseAccountId: string;

mirage/views/addons.ts

@@ -1,7 +1,9 @@
-import { HandlerContext, ModelInstance, Request, Schema } from 'ember-cli-mirage';
+import { HandlerContext, ModelInstance, NormalizedRequestAttrs, Request, Response, Schema } from 'ember-cli-mirage';
 
+import AuthorizedStorageAccountModel from 'ember-osf-web/models/authorized-storage-account';
 import FileProviderModel from 'ember-osf-web/models/file-provider';
 
+import { MirageConfiguredStorageAddon } from '../serializers/configured-storage-addon';
 import { filter, process } from './utils';
 
 // This is the handler for the unofficial node/addons endpoint
@@ -67,3 +69,18 @@ export function resourceReferenceConfiguredStorageAddonList(this: HandlerContext
     const processed = process(schema, request, this, data);
     return processed;
 }
+
+export function createConfiguredStorageAddon(this: HandlerContext, schema: Schema) {
+    const attrs =
+        this.normalizedRequestAttrs('configured-storage-addon') as NormalizedRequestAttrs<MirageConfiguredStorageAddon>;
+    const configuredStorageAddon = schema.configuredStorageAddons.create(attrs);
+
+    const baseAccount = schema.authorizedStorageAccounts
+        .find(attrs.baseAccountId) as ModelInstance<AuthorizedStorageAccountModel>;
+    configuredStorageAddon.update({
+        externalUserId: baseAccount.externalUserId,
+        externalUserDisplayName: baseAccount.externalUserDisplayName,
+    });
+
+    return configuredStorageAddon;
+}

translations/en-us.yml

@@ -232,10 +232,13 @@ addons:
         accepting: 'Accepting terms…'
     accountSelect:
         heading: 'Log in to {providerName} or select an account'
+        no-accounts: 'No accounts available'
         new-account: 'Setup new account'
         existing-account: 'Choose existing account'
     confirm:
         heading: 'Confirm {providerName} Account'
+        verify: 'Authorize the following account:'
+        authorizing: 'Authorizing…'
     configure:
         heading: 'Configure {providerName}'