Choose account workflow for addons

CenterForOpenScience · Feb 7, 2024 · 12a06af · 12a06af
1 parent 1db72d7
commit 12a06af
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 21 deletions.
diff --git a/app/guid-node/addons/index/styles.scss b/app/guid-node/addons/index/styles.scss
@@ -49,3 +49,7 @@
 .back-button {
     float: right;
 }
+
+.account-select {
+    margin: 20px 0;
+}
diff --git a/app/guid-node/addons/index/template.hbs b/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)}}
+                            >
+                                {{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

diff --git a/app/packages/addons-service/provider.ts b/app/packages/addons-service/provider.ts
@@ -110,6 +110,23 @@ export default class Provider {
         return account;
     }
 
+    @task
+    @waitFor
+    async createConfiguredStorageAddon() {
+        if (!this.configuredStorageAddon) {
+            const configuredStorageAddon = this.store.createRecord('configured-storage-addon', {
+                externalUserId: this.currentUser.user?.id,
+                externalUserDisplayName: this.currentUser.user?.fullName,
+                rootFolder: '',
+                storageProvider: this.provider,
+                accountOwner: this.userReference,
+                authorizedResource: this.serviceNode,
+            });
+            await configuredStorageAddon.save();
+            this.configuredStorageAddon = configuredStorageAddon;
+        }
+    }
+
     @task
     @waitFor
     async setNodeAddonCredentials(account: AuthorizedStorageAccountModel) {

diff --git a/lib/osf-components/addon/components/addons-service/manager/component.ts b/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() {
+        if (this.selectedProvider && this.selectedAccount) {
+            await taskFor(this.selectedProvider.createConfiguredStorageAddon).perform();
+        }
         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();

diff --git a/lib/osf-components/addon/components/addons-service/manager/template.hbs b/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

diff --git a/mirage/config.ts b/mirage/config.ts
@@ -528,7 +528,7 @@ export default function(this: Server) {
     this.get('/resource-references/:nodeGuid/configured-storage-addons',
         addons.resourceReferenceConfiguredStorageAddonList);
     this.resource('authorized-storage-accounts', { only: ['show', 'update', 'create'] });
-    this.resource('configured-storage-addons', { only: ['show', 'update', 'delete'] });
+    this.resource('configured-storage-addons', { only: ['show', 'update', 'delete', 'create'] });
 
     // Reset API url and namespace to use v2 endpoints for tests
     this.urlPrefix = apiUrl;

diff --git a/translations/en-us.yml b/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}'