[ENG-4642] Boa Add-on Project PR - Ember Part (#2046)

cslzchen · felliott · futa-ikeda · web-flow · commit 6fce871995f5 · 2023-11-10T14:26:42.000-05:00
* [WIP] first stab at Boa addon ux * make boa modal findable * save WIP on dataset select * futa wisdom attained/accepted * add action; fetch parents properly * enabled addons enabled * cleanups; fix closemodal * Add mirage support for BoA files * Type updates * authenticate addon endpoint request * Add a bit of error handling to mirage * Change logic to populate a node addons * Disable submit to boa if no dataset selected * Add qp to boa upload link * Add placeholder message to dataset select * Update toast messages * CR feedback * Boa bugs (#2047) * Add file size to boa request * Allow checked out boa file to be submitted * Use sizeInt * Circumvent promise-induced bugs (#2049) --------- Co-authored-by: Fitz Elliott <fitz@cos.io> Co-authored-by: Futa Ikeda <futa.ikeda@gmail.com> Co-authored-by: futa-ikeda <51409893+futa-ikeda@users.noreply.github.com>
diff --git a/app/guid-file/route.ts b/app/guid-file/route.ts
@@ -58,6 +58,7 @@ export default class GuidFile extends Route {
         };
         this.set('headTags', this.metaTags.getHeadTags(metaTagsData));
         this.headTagsService.collectHeadTags();
+        await taskFor(model.target.get('getEnabledAddons')).perform();
         blocker.done();
     }
 
diff --git a/app/guid-file/template.hbs b/app/guid-file/template.hbs
@@ -21,7 +21,12 @@
                     ({{t 'general.version'}}: {{this.viewedVersion}})
                 {{/if}}
             </h2>
-            <FileActionsMenu @item={{this.model}} @onDelete={{this.onDelete}} @allowRename={{false}} />
+            <FileActionsMenu
+                @item={{this.model}}
+                @onDelete={{this.onDelete}}
+                @allowRename={{false}}
+                @addonsEnabled={{this.model.fileModel.target.addonsEnabled}}
+            />
         </div>
     </:header>
     <:body>
diff --git a/app/guid-node/files/provider/route.ts b/app/guid-node/files/provider/route.ts
@@ -19,6 +19,7 @@ export default class GuidNodeFilesProviderRoute extends Route.extend({}) {
     @waitFor
     async fileProviderTask(guidRouteModel: GuidRouteModel<NodeModel>, fileProviderId: string) {
         const node = await guidRouteModel.taskInstance;
+        await taskFor(node.getEnabledAddons).perform();
         try {
             const fileProviders = await node.queryHasMany(
                 'files',
diff --git a/app/models/node.ts b/app/models/node.ts
@@ -4,9 +4,14 @@ import { computed } from '@ember/object';
 import { alias, bool, equal, not } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
+import { tracked } from '@glimmer/tracking';
 import { buildValidations, validator } from 'ember-cp-validations';
 import Intl from 'ember-intl/services/intl';
 
+import config from 'ember-osf-web/config/environment';
+import { task } from 'ember-concurrency';
+import { waitFor } from '@ember/test-waiters';
+
 import getRelatedHref from 'ember-osf-web/utils/get-related-href';
 
 import AbstractNodeModel from 'ember-osf-web/models/abstract-node';
@@ -25,6 +30,13 @@ import RegistrationModel from './registration';
 import SubjectModel from './subject';
 import WikiModel from './wiki';
 
+const {
+    OSF: {
+        apiUrl,
+        apiNamespace,
+    },
+} = config;
+
 const Validations = buildValidations({
     title: [
         validator('presence', true),
@@ -108,6 +120,10 @@ export default class NodeModel extends AbstractNodeModel.extend(Validations, Col
     @attr('boolean') currentUserCanComment!: boolean;
     @attr('boolean') wikiEnabled!: boolean;
 
+    // FE-only property to check enabled addons.
+    // null until getEnabledAddons has been called
+    @tracked addonsEnabled?: string[];
+
     @hasMany('contributor', { inverse: 'node' })
     contributors!: AsyncHasMany<ContributorModel> & ContributorModel[];
 
@@ -311,6 +327,26 @@ export default class NodeModel extends AbstractNodeModel.extend(Validations, Col
 
         this.set('nodeLicense', props);
     }
+
+    @task
+    @waitFor
+    async getEnabledAddons() {
+        const endpoint = `${apiUrl}/${apiNamespace}/nodes/${this.id}/addons/`;
+        const response = await this.currentUser.authenticatedAJAX({
+            url: endpoint,
+            type: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            xhrFields: { withCredentials: true },
+        });
+        if (response.data) {
+            const addonList = response.data
+                .filter((addon: any) => addon.attributes.node_has_auth)
+                .map((addon: any) => addon.id);
+            this.set('addonsEnabled', addonList);
+        }
+    }
 }
 
 declare module 'ember-data/types/registries/model' {
diff --git a/app/packages/files/file.ts b/app/packages/files/file.ts
@@ -154,6 +154,14 @@ export default abstract class File {
         );
     }
 
+    get isBoaFile() {
+        return this.fileModel.name.endsWith('.boa');
+    }
+
+    get providerIsOsfstorage() {
+        return this.fileModel.provider === 'osfstorage';
+    }
+
     async createFolder(newFolderName: string) {
         if (this.fileModel.isFolder) {
             await this.fileModel.createFolder(newFolderName);
diff --git a/lib/osf-components/addon/components/file-actions-menu/component.ts b/lib/osf-components/addon/components/file-actions-menu/component.ts
@@ -5,11 +5,13 @@ import { inject as service } from '@ember/service';
 import Media from 'ember-responsive';
 import File from 'ember-osf-web/packages/files/file';
 import StorageManager from 'osf-components/components/storage-provider-manager/storage-manager/component';
+import NodeModel from 'ember-osf-web/models/node';
 
 interface Args {
     item: File;
     onDelete: () => void;
     manager?: StorageManager; // No manager for file-detail page
+    addonsEnabled? : string[];
 }
 
 export default class FileActionsMenu extends Component<Args> {
@@ -19,6 +21,7 @@ export default class FileActionsMenu extends Component<Args> {
     @tracked moveModalOpen = false;
     @tracked useCopyModal = false;
     @tracked renameModalOpen = false;
+    @tracked isSubmitToBoaModalOpen = false;
 
     @action
     closeDeleteModal() {
@@ -34,4 +37,34 @@ export default class FileActionsMenu extends Component<Args> {
     openRenameModal() {
         this.renameModalOpen = true;
     }
+
+    @action
+    closeSubmitToBoaModal() {
+        this.isSubmitToBoaModalOpen = false;
+    }
+
+    @action
+    openSubmitToBoaModal() {
+        this.isSubmitToBoaModalOpen = true;
+    }
+
+    get isBoaEnabled() {
+        return this.args.addonsEnabled?.includes('boa');
+    }
+
+    get showSubmitToBoa() {
+        const { item, manager } = this.args;
+        if (item.providerIsOsfstorage && item.isBoaFile && this.isBoaEnabled) {
+            let userCanUploadToHere;
+            if (manager) {
+                userCanUploadToHere = manager.currentFolder.userCanUploadToHere;
+            } else {
+                const storage = (item.fileModel.target as unknown as NodeModel).get('storage');
+                const writableTarget = item.currentUserPermission === 'write' && !item.targetIsRegistration;
+                userCanUploadToHere = writableTarget && !storage.get('isOverStorageCap');
+            }
+            return userCanUploadToHere;
+        }
+        return false;
+    }
 }
diff --git a/lib/osf-components/addon/components/file-actions-menu/submit-to-boa-modal/component.ts b/lib/osf-components/addon/components/file-actions-menu/submit-to-boa-modal/component.ts
@@ -0,0 +1,102 @@
+import { inject as service } from '@ember/service';
+import { waitFor } from '@ember/test-waiters';
+import Component from '@glimmer/component';
+import { task } from 'ember-concurrency';
+import IntlService from 'ember-intl/services/intl';
+import File from 'ember-osf-web/packages/files/file';
+import captureException, { getApiErrorMessage } from 'ember-osf-web/utils/capture-exception';
+import config from 'ember-osf-web/config/environment';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+interface Args {
+    file: File;
+    isOpen: boolean;
+    closeModal: () => {};
+}
+
+export default class SubmitToBoaModal extends Component<Args> {
+    @service toast!: Toastr;
+    @service intl!: IntlService;
+    @tracked selectedDataset?: string;
+
+    datasets = [
+        '2022 Jan/Java',
+        '2022 Feb/Python',
+        '2021 Method Chains',
+        '2021 Aug/Python',
+        '2021 Aug/Kotlin (small)',
+        '2021 Aug/Kotlin',
+        '2021 Jan/ML-Verse',
+        '2020 August/Python-DS',
+        '2019 October/GitHub (small)',
+        '2019 October/GitHub (medium)',
+        '2019 October/GitHub',
+        '2015 September/GitHub',
+        '2013 September/SF (small)',
+        '2013 September/SF (medium)',
+        '2013 September/SF',
+        '2013 May/SF',
+        '2013 February/SF',
+        '2012 July/SF',
+    ];
+
+    @action
+    onDatasetChange(newDataset: string) {
+        this.selectedDataset = newDataset;
+    }
+
+    @task
+    @waitFor
+    async confirmSubmitToBoa() {
+        try {
+            const file = this.args.file;
+            const fileModel = file.fileModel;
+            const parentFolder = await fileModel.get('parentFolder');
+            const grandparentFolder = await parentFolder.get('parentFolder');
+            const endpoint = config.OSF.url + 'api/v1/project/' + fileModel.target.get('id') + '/boa/submit-job/';
+            const uploadLink = new URL(parentFolder.get('links').upload as string);
+            uploadLink.searchParams.set('kind', 'file');
+            const payload = {
+                data: {
+                    nodeId: fileModel.target.get('id'),
+                    name: file.name,
+                    materialized: fileModel.materializedPath,
+                    sizeInt: fileModel.size,
+                    links: {
+                        download: file.links.download,
+                        upload: file.links.upload,
+                    },
+                },
+                parent: {
+                    links: {
+                        upload: uploadLink.toString(),
+                    },
+                    isAddonRoot: !grandparentFolder,
+                },
+                dataset: this.selectedDataset,
+            };
+            await this.args.file.currentUser.authenticatedAJAX({
+                url: endpoint,
+                type: 'POST',
+                data: JSON.stringify(payload),
+                xhrFields: { withCredentials: true },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            this.args.closeModal();
+        } catch (e) {
+            captureException(e);
+            const errorMessageKey = this.intl.t('osf-components.file-browser.submit_to_boa_fail',
+                { fileName: this.args.file.name, htmlSafe: true }) as string;
+            this.toast.error(getApiErrorMessage(e), errorMessageKey);
+            return;
+        }
+
+        this.toast.success(
+            this.intl.t('osf-components.file-browser.submit_to_boa_success', { fileName: this.args.file.name }),
+        );
+    }
+}
diff --git a/lib/osf-components/addon/components/file-actions-menu/submit-to-boa-modal/styles.scss b/lib/osf-components/addon/components/file-actions-menu/submit-to-boa-modal/styles.scss
diff --git a/lib/osf-components/addon/components/file-actions-menu/submit-to-boa-modal/template.hbs b/lib/osf-components/addon/components/file-actions-menu/submit-to-boa-modal/template.hbs
@@ -0,0 +1,34 @@
+<OsfDialog @isOpen={{@isOpen}} @onClose={{@closeModal}} as |dialog|>
+    <dialog.heading>
+        {{t 'osf-components.file-browser.submit_to_boa'}}
+    </dialog.heading>
+    <dialog.main>
+
+        <p>{{t 'osf-components.file-browser.boa_dataset_spiel'}}</p>
+        <PowerSelect
+            @options={{this.datasets}}
+            @selected={{this.selectedDataset}}
+            @placeholder={{t 'osf-components.file-browser.boa_dataset_select_placeholder'}}
+            @onChange={{this.onDatasetChange}}
+            as |dataset|
+        >
+            {{dataset}}
+        </PowerSelect>
+        <p>{{t 'osf-components.file-browser.confirm_submit_to_boa' fileName=@file.name}}</p>
+
+    </dialog.main>
+    <dialog.footer>
+        <Button
+            {{on 'click' (fn (mut @isOpen) false)}}
+        >
+            {{t 'general.cancel'}}
+        </Button>
+        <Button
+            @type='primary'
+            disabled={{or this.confirmSubmitToBoa.isRunning (not this.selectedDataset)}}
+            {{on 'click' (perform this.confirmSubmitToBoa)}}
+        >
+            {{t 'osf-components.file-browser.confirm_submit_to_boa_yes'}}
+        </Button>
+    </dialog.footer>
+</OsfDialog>
diff --git a/lib/osf-components/addon/components/file-actions-menu/template.hbs b/lib/osf-components/addon/components/file-actions-menu/template.hbs
@@ -110,9 +110,31 @@
                 </Button>
             {{/if}}
         {{/if}}
+        {{#if this.showSubmitToBoa}}
+            <Button
+                @layout='fake-link'
+                data-test-submit-to-boa
+                data-analytics-name='Submit to Boa'
+                local-class='DropdownItem'
+                {{on 'click' (queue
+                    dropdown.close
+                    this.openSubmitToBoaModal
+                )}}
+            >
+                <FaIcon @icon='upload' />
+                {{t 'file_actions_menu.submit_to_boa'}}
+            </Button>
+        {{/if}}
     </dropdown.content>
 </ResponsiveDropdown>
 <FileActionsMenu::DeleteModal @file={{@item}} @isOpen={{this.isDeleteModalOpen}} @closeModal={{this.closeDeleteModal}} @onDelete={{@onDelete}} />
+{{#if this.showSubmitToBoa}}
+    <FileActionsMenu::SubmitToBoaModal
+        @file={{@item}}
+        @isOpen={{this.isSubmitToBoaModalOpen}}
+        @closeModal={{this.closeSubmitToBoaModal}}
+    />
+{{/if}}
 {{#if @manager}}
     <MoveFileModal
         @isOpen={{this.moveModalOpen}}
diff --git a/lib/osf-components/addon/components/file-browser/file-item/template.hbs b/lib/osf-components/addon/components/file-browser/file-item/template.hbs
@@ -84,7 +84,13 @@
             local-class='FileList__item__options'
         >
             {{#unless @manager.selectedFiles}}
-                <FileActionsMenu @item={{@item}} @onDelete={{@manager.reload}} @manager={{@manager}} @allowRename={{true}} />
+                <FileActionsMenu
+                    @item={{@item}}
+                    @onDelete={{@manager.reload}}
+                    @manager={{@manager}}
+                    @allowRename={{true}}
+                    @addonsEnabled={{@manager.targetNode.addonsEnabled}}
+                />
             {{/unless}}
         </div>
     </li>
diff --git a/lib/osf-components/app/components/file-actions-menu/submit-to-boa-modal/component.js b/lib/osf-components/app/components/file-actions-menu/submit-to-boa-modal/component.js
@@ -0,0 +1 @@
+export { default } from 'osf-components/components/file-actions-menu/submit-to-boa-modal/component';
diff --git a/lib/osf-components/app/components/file-actions-menu/submit-to-boa-modal/template.js b/lib/osf-components/app/components/file-actions-menu/submit-to-boa-modal/template.js
@@ -0,0 +1 @@
+export { default } from 'osf-components/components/file-actions-menu/submit-to-boa-modal/template';
diff --git a/mirage/config.ts b/mirage/config.ts
@@ -3,6 +3,7 @@ import config from 'ember-osf-web/config/environment';
 
 import { createReviewAction } from 'ember-osf-web/mirage/views/review-action';
 import { createResource, updateResource } from 'ember-osf-web/mirage/views/resource';
+import { addonsList } from './views/addons';
 import { getCitation } from './views/citation';
 import { createCollectionSubmission, getCollectionSubmissions } from './views/collection-submission';
 import { createSubmissionAction } from './views/collection-submission-action';
@@ -49,7 +50,7 @@ import { updatePassword } from './views/user-password';
 import * as userSettings from './views/user-setting';
 import * as wb from './views/wb';
 
-const { OSF: { apiUrl, shareBaseUrl } } = config;
+const { OSF: { apiUrl, shareBaseUrl, url: osfUrl } } = config;
 
 export default function(this: Server) {
     this.passthrough(); // pass through all requests on currrent domain
@@ -67,6 +68,10 @@ export default function(this: Server) {
     this.get('/index-value-search', valueSearch);
     // this.get('/index-card/:id', Detail);
 
+    this.urlPrefix = osfUrl;
+    this.namespace = '/api/v1/';
+    this.post('project/:id/boa/submit-job/', () => ({})); // submissions to BoA
+
     this.urlPrefix = apiUrl;
     this.namespace = '/v2';
 
@@ -111,6 +116,7 @@ export default function(this: Server) {
         onCreate: createBibliographicContributor,
     });
 
+    this.get('/nodes/:parentID/addons', addonsList);
     this.get('/nodes/:parentID/files', nodeFileProviderList); // Node file providers list
     this.get('/nodes/:parentID/files/:fileProviderId', nodeFilesListForProvider); // Node files list for file provider
     this.get('/nodes/:parentID/files/:fileProviderId/:folderId', folderFilesList); // Node folder detail view
diff --git a/mirage/factories/node.ts b/mirage/factories/node.ts
diff --git a/mirage/scenarios/dashboard.ts b/mirage/scenarios/dashboard.ts
diff --git a/mirage/views/addons.ts b/mirage/views/addons.ts
diff --git a/translations/en-us.yml b/translations/en-us.yml

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ export default class GuidFile extends Route {`
`58`	`58`	`};`
`59`	`59`	`this.set('headTags', this.metaTags.getHeadTags(metaTagsData));`
`60`	`60`	`this.headTagsService.collectHeadTags();`
	`61`	`+ await taskFor(model.target.get('getEnabledAddons')).perform();`
`61`	`62`	`blocker.done();`
`62`	`63`	`}`
`63`	`64`