Feature/bulk upload

lib/registries/addon/branded/moderation/-components/upload-csv/component.ts

@@ -0,0 +1,92 @@
+import config from 'ember-get-config';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import Intl from 'ember-intl/services/intl';
+import { SafeString } from '@ember/template/-private/handlebars';
+import Toast from 'ember-toastr/services/toast';
+
+const { OSF: { apiUrl } } = config;
+
+interface Args {
+    providerId: string;
+}
+
+interface ErrorMessage {
+    cell: string;
+    title: string;
+    detail: string | SafeString;
+}
+interface ApiErrorDetail {
+    header: string;
+    column_index: string;
+    row_index: string;
+    type: string;
+    invalidHeaders?: string[];
+    missingHeaders?: string[];
+}
+export default class UploadCsvComponent extends Component<Args> {
+    dropzoneOptions = {
+        createImageThumbnails: false,
+        method: 'PUT',
+        withCredentials: true,
+        preventMultipleFiles: true,
+        acceptDirectories: false,
+    };
+
+    @service intl!: Intl;
+    @service toast!: Toast;
+
+    @tracked errorMessages: ErrorMessage[] = [];
+    @tracked shouldShowErrorModal = false;
+    @tracked uploading: any[] = [];
+
+    @action
+    buildUrl(files: any) {
+        return `${apiUrl}/_/registries/${this.args.providerId}/bulk_create/${files[0].name}/`;
+    }
+
+    @action
+    addedFile(_: any, __: any, file: any) {
+        this.uploading.push(file);
+    }
+
+    @action
+    error(_: any, __: any, file: any, { errors }: { errors: ApiErrorDetail[]}) {
+        this.uploading.removeObject(file);
+        this.shouldShowErrorModal = true;
+        for (const error of errors) {
+            this.errorMessages.push(
+                {
+                    cell: error.column_index + error.row_index,
+                    title: this.intl.t(`registries.moderation.settings.${error.type}.title`),
+                    detail: this.intl.t(`registries.moderation.settings.${error.type}.detail`, {
+                        htmlSafe: true,
+                        invalidIds: error.invalidHeaders ? error.invalidHeaders.join(', ') : null,
+                        missingIds: error.missingHeaders ? error.missingHeaders.join(', ') : null,
+                    }),
+                },
+            );
+        }
+    }
+
+    @action
+    success(_: any, __: any, file: any, ___: any) {
+        this.uploading.removeObject(file);
+        this.toast.success(this.intl.t('registries.moderation.settings.uploadSuccess'));
+    }
+
+    @action
+    closeErrorModal() {
+        this.shouldShowErrorModal = false;
+        this.errorMessages = [];
+    }
+
+    @action
+    async copyToClipboard(elementId: string) {
+        const mainElement = document.getElementById(elementId);
+        await navigator.clipboard.writeText(mainElement!.textContent!);
+        this.toast.success(this.intl.t('registries.moderation.settings.copyToClipboardSuccess'));
+    }
+}

lib/registries/addon/branded/moderation/-components/upload-csv/styles.scss

@@ -0,0 +1,9 @@
+.upload-zone-content {
+    text-align: center;
+}
+
+.upload-zone {
+    padding: 50px;
+    background: #f5f5f5;
+    border: 5px dashed #c7c7c7;
+}

lib/registries/addon/branded/moderation/-components/upload-csv/template.hbs

@@ -0,0 +1,70 @@
+{{#let (unique-id 'upload-csv-dropzone') as |id|}}
+    <DropzoneWidget
+        @buildUrl={{this.buildUrl}}
+        @options={{this.dropzoneOptions}}
+        @dropzone={{false}}
+        @addedfile={{this.addedFile}}
+        @success={{this.success}}
+        @error={{this.error}}
+        @dragenter={{fn (mut this.dropping) true}}
+        @dragover={{fn (mut this.dropping) true}}
+        @drop={{fn (mut this.dropping) false}}
+        @dragleave={{fn (mut this.dropping) false}}
+        @enable={{true}}
+        @id={{id}}
+        @clickable={{array 
+            (concat '.' (local-class 'upload-zone'))
+        }}
+        data-test-bulk-upload-widget
+    >
+        <div local-class='upload-zone'>
+            <div local-class='upload-zone-content'>
+                <FaIcon @icon='upload' @size='5x' />
+                <div 
+                    local-class='file-placeholder-text'
+                >
+                    {{t 'registries.moderation.settings.dropCsvHere'}}
+                </div>
+            </div>
+        </div>
+    </DropzoneWidget>
+{{/let}}
+
+{{#let (unique-id 'main-content') as |id|}}
+    <OsfDialog
+        @isOpen={{this.shouldShowErrorModal}}
+        @onClose={{this.closeErrorModal}}
+        as |dialog|
+    >
+        <dialog.heading data-test-error-modal-heading>
+            {{t 'registries.moderation.settings.uploadError'}}
+        </dialog.heading>
+        <dialog.main id={{id}} data-test-error-modal-main>
+            <div data-test-error-modal-general-message>
+                <p>{{t 'registries.moderation.settings.generalErrorMessage' htmlSafe=true}}</p>
+            </div>
+
+            <dl data-test-error-modal-message-list>
+                {{#each this.errorMessages as |msg|}}
+                    <p>
+                        {{#if msg.cell}}
+                            <dt data-test-error-modal-cell-identifier>{{t 'registries.moderation.settings.cell'}} {{msg.cell}}</dt>
+                        {{/if}}
+                        <dt data-test-error-modal-message-title>{{msg.title}}</dt>
+                        <dd data-test-error-modal-message-detail>{{msg.detail}}</dd>
+                    </p>
+                {{/each}}
+            </dl>
+        </dialog.main>
+        <dialog.footer>
+            <BsButton
+                data-test-copy-to-clipboard
+                data-analytics-name='Copy error messages to clipboard'
+                @type='primary'
+                {{on 'click' (fn this.copyToClipboard id)}}
+            >
+                {{t 'registries.moderation.settings.copyToClipboard'}}
+            </BsButton>
+        </dialog.footer>
+    </OsfDialog>
+{{/let}}

lib/registries/addon/branded/moderation/notifications/controller.ts → lib/registries/addon/branded/moderation/settings/controller.ts

@@ -3,11 +3,16 @@ import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import config from 'ember-get-config';
 import pathJoin from 'ember-osf-web/utils/path-join';
+import { ReviewPermissions } from 'ember-osf-web/models/provider';
 
-export default class BrandedModerationNotificationsController extends Controller {
+export default class BrandedModerationSettingsController extends Controller {
     userSettingsLink = pathJoin(config.OSF.url, 'settings', 'notifications');
     @alias('model.id') providerId?: string;
 
+    get shouldShowBulkUploadWidget() {
+        return this.model.permissions.includes(ReviewPermissions.AddModerator);
+    }
+
     @computed('providerId')
     get subscriptionIds() {
         return this.providerId

lib/registries/addon/branded/moderation/notifications/route.ts → lib/registries/addon/branded/moderation/settings/route.ts

@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 
 import Analytics from 'ember-osf-web/services/analytics';
 
-export default class BrandedModerationNotificationsRoute extends Route {
+export default class BrandedModerationSettingsRoute extends Route {
     @service analytics!: Analytics;
 
     @action

lib/registries/addon/branded/moderation/settings/template.hbs

@@ -0,0 +1,27 @@
+{{page-title (t 'registries.moderation.settings.title') prepend=false}}
+
+<h2>
+    {{t 'registries.moderation.settings.heading'}}
+</h2>
+<p>
+    {{t 'registries.moderation.settings.paragraph' link=this.userSettingsLink htmlSafe=true}}
+</p>
+
+<Subscriptions::Manager
+    @subscriptionIds={{this.subscriptionIds}}
+    as |manager|
+>
+    <Subscriptions::List
+        @manager={{manager}}
+    />
+</Subscriptions::Manager>
+
+{{#if this.shouldShowBulkUploadWidget}}
+    <h2>
+        {{t 'registries.moderation.settings.bulkUpload'}}
+    </h2>
+    <p>
+        {{t 'registries.moderation.settings.bulkUploadHelpText'}}
+    </p>
+    <Branded::Moderation::-Components::UploadCsv @providerId={{this.model.id}} />
+{{/if}}

lib/registries/addon/branded/moderation/template.hbs

@@ -36,13 +36,13 @@
                         </OsfLink>
                     </nav.item>
                 {{/let}}
-                {{#let 'registries.branded.moderation.notifications' as |notificationsRoute|}}
-                    <nav.item @active={{eq this.target.currentRouteName notificationsRoute}}>
+                {{#let 'registries.branded.moderation.settings' as |settingsRoute|}}
+                    <nav.item @active={{eq this.target.currentRouteName settingsRoute}}>
                         <OsfLink
-                            @route={{notificationsRoute}}
+                            @route={{settingsRoute}}
                             @models={{array this.model.id}}
                         >
-                            {{t 'registries.moderation.notifications.title'}}
+                            {{t 'registries.moderation.settings.title'}}
                         </OsfLink>
                     </nav.item>
                 {{/let}}

lib/registries/addon/routes.ts

@@ -9,7 +9,7 @@ export default buildRoutes(function() {
         this.route('moderation', function() {
             this.route('submissions');
             this.route('moderators');
-            this.route('notifications');
+            this.route('settings');
         });
     });