71713: restyle dropzone & rewrite antipattern nested subscribes

src/app/+admin/admin-import-metadata-page/metadata-import-page.component.html

@@ -17,14 +17,18 @@
     </div>
   </div>
   <div class="well ds-base-drop-zone mt-1 mb-3 text-muted">
-    <label for="file-upload" class="d-flex align-items-center m-0">
+    <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center"
-      <span class="btn btn-light">
+       *ngIf="fileObject!=null">  {{ fileObject.name }} </p>
-          {{'process.new.parameter.file.upload-button' | translate}}
+    <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center">
-      </span>
+      <span><i class="fas fa-cloud-upload"
-      <span class="file-name ml-1">{{fileObject?.name}}</span>
+               aria-hidden="true"></i> {{ (fileObject == null ? 'admin.metadata-import.page.dropMsg' : 'admin.metadata-import.page.dropMsgReplace') | translate}} {{'uploader.or' | translate}}</span>
-    </label>
+      <label class="btn btn-link m-0 p-0 ml-1">
-    <input requireFile #file="ngModel" type="file" name="file-upload" id="file-upload" class="form-control-file d-none"
+        <input class="form-control-file d-none" requireFile #file="ngModel" type="file" name="file-upload"
-           [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
+               id="file-upload"
+               [ngModel]="fileObject" (ngModelChange)="setFile($event)">
+        {{'uploader.browse' | translate}}
+      </label>
+    </p>
   </div>
 
   <button class="btn btn-secondary" id="backButton"

src/app/+admin/admin-import-metadata-page/metadata-import-page.component.ts

@@ -5,13 +5,13 @@ import { TranslateService } from '@ngx-translate/core';
 import { uniqueId } from 'lodash';
 import { FileUploader } from 'ng2-file-upload';
 import { Observable } from 'rxjs/internal/Observable';
-import { filter, map, take } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
 import { METADATA_IMPORT_SCRIPT_NAME, ScriptDataService } from '../../core/data/processes/script-data.service';
 import { RequestEntry } from '../../core/data/request.reducer';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { ProcessParameter } from '../../process-page/processes/process-parameter.model';
-import { hasValue, isNotEmpty } from '../../shared/empty.util';
+import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { of as observableOf } from 'rxjs';
 import { UploaderOptions } from '../../shared/uploader/uploader-options.model';
@@ -117,32 +117,35 @@ export class MetadataImportPageComponent implements OnInit {
       this.notificationsService.error(this.translate.get('admin.metadata-import.page.error.addFile'));
     } else {
       this.currentUserEmail$.pipe(
-        filter((email: string) => hasValue(email)),
+        switchMap((email: string) => {
+          if (isNotEmpty(email)) {
+            const parameterValues: ProcessParameter[] = [
+              Object.assign(new ProcessParameter(), { name: '-e', value: email }),
+              Object.assign(new ProcessParameter(), { name: '-f', value: this.fileObject.name }),
+            ];
+            return this.scriptDataService.invoke(METADATA_IMPORT_SCRIPT_NAME, parameterValues, [this.fileObject])
+              .pipe(
+                take(1),
+                map((requestEntry: RequestEntry) => {
+                  if (requestEntry.response.isSuccessful) {
+                    const title = this.translate.get('process.new.notification.success.title');
+                    const content = this.translate.get('process.new.notification.success.content');
+                    this.notificationsService.success(title, content);
+                    const response: any = requestEntry.response;
+                    if (isNotEmpty(response.resourceSelfLinks)) {
+                      const processNumber = response.resourceSelfLinks[0].split('/').pop();
+                      this.router.navigateByUrl('/processes/' + processNumber);
+                    }
+                  } else {
+                    const title = this.translate.get('process.new.notification.error.title');
+                    const content = this.translate.get('process.new.notification.error.content');
+                    this.notificationsService.error(title, content);
+                  }
+                }));
+          }
+        }),
         take(1)
-      ).subscribe((email: string) => {
+      ).subscribe();
-        const parameterValues: ProcessParameter[] = [
-          Object.assign(new ProcessParameter(), { name: '-e', value: email }),
-          Object.assign(new ProcessParameter(), { name: '-f', value: this.fileObject.name }),
-        ];
-        this.scriptDataService.invoke(METADATA_IMPORT_SCRIPT_NAME, parameterValues, [this.fileObject])
-          .pipe(take(1))
-          .subscribe((requestEntry: RequestEntry) => {
-            if (requestEntry.response.isSuccessful) {
-              const title = this.translate.get('process.new.notification.success.title');
-              const content = this.translate.get('process.new.notification.success.content');
-              this.notificationsService.success(title, content);
-              const response: any = requestEntry.response;
-              if (isNotEmpty(response.resourceSelfLinks)) {
-                const processNumber = response.resourceSelfLinks[0].split('/').pop();
-                this.router.navigateByUrl('/processes/' + processNumber);
-              }
-            } else {
-              const title = this.translate.get('process.new.notification.error.title');
-              const content = this.translate.get('process.new.notification.error.content');
-              this.notificationsService.error(title, content);
-            }
-          });
-      });
     }
   }
 }

src/assets/i18n/en.json5

@@ -450,7 +450,9 @@
 
   "admin.metadata-import.page.help": "You can drop or browse CSV files that contain batch metadata operations on files here",
 
-  "admin.metadata-import.page.dropMsg": "Drop a metadata CSV to upload",
+  "admin.metadata-import.page.dropMsg": "Drop a metadata CSV to import",
+
+  "admin.metadata-import.page.dropMsgReplace": "Drop to replace the metadata CSV to import",
 
   "admin.metadata-import.page.button.return": "Return",