♻️ refactor chain of observables to avoid async issues

src/app/admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.ts

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
 import {
   DynamicFormControlModel,
   DynamicFormGroupModel,
@@ -8,20 +14,19 @@ import {
 import { UntypedFormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { take } from 'rxjs/operators';
+import { switchMap, take } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';
 
 @Component({
   selector: 'ds-metadata-schema-form',
-  templateUrl: './metadata-schema-form.component.html'
+  templateUrl: './metadata-schema-form.component.html',
 })
 /**
  * A form used for creating and editing metadata schemas
  */
 export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
-
   /**
    * A unique id used for ds-form
    */
@@ -53,14 +58,14 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
   formLayout: DynamicFormLayout = {
     name: {
       grid: {
-        host: 'col col-sm-6 d-inline-block'
+        host: 'col col-sm-6 d-inline-block',
-      }
+      },
     },
     namespace: {
       grid: {
-        host: 'col col-sm-6 d-inline-block'
+        host: 'col col-sm-6 d-inline-block',
-      }
+      },
-    }
+    },
   };
 
   /**
@@ -73,63 +78,67 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
    */
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
 
-  constructor(public registryService: RegistryService, private formBuilderService: FormBuilderService, private translateService: TranslateService) {
+  constructor(
-  }
+    public registryService: RegistryService,
+    private formBuilderService: FormBuilderService,
+    private translateService: TranslateService
+  ) {}
 
   ngOnInit() {
     combineLatest([
       this.translateService.get(`${this.messagePrefix}.name`),
-      this.translateService.get(`${this.messagePrefix}.namespace`)
+      this.translateService.get(`${this.messagePrefix}.namespace`),
     ]).subscribe(([name, namespace]) => {
       this.name = new DynamicInputModel({
-          id: 'name',
+        id: 'name',
-          label: name,
+        label: name,
-          name: 'name',
+        name: 'name',
-          validators: {
+        validators: {
-            required: null,
+          required: null,
-            pattern: '^[^. ,]*$',
+          pattern: '^[^. ,]*$',
-            maxLength: 32,
+          maxLength: 32,
-          },
+        },
-          required: true,
+        required: true,
-          errorMessages: {
+        errorMessages: {
-            pattern: 'error.validation.metadata.name.invalid-pattern',
+          pattern: 'error.validation.metadata.name.invalid-pattern',
-            maxLength: 'error.validation.metadata.name.max-length',
+          maxLength: 'error.validation.metadata.name.max-length',
-          },
+        },
-        });
+      });
       this.namespace = new DynamicInputModel({
-          id: 'namespace',
+        id: 'namespace',
-          label: namespace,
+        label: namespace,
-          name: 'namespace',
+        name: 'namespace',
-          validators: {
+        validators: {
-            required: null,
+          required: null,
-            maxLength: 256,
+          maxLength: 256,
-          },
+        },
-          required: true,
+        required: true,
-          errorMessages: {
+        errorMessages: {
-            maxLength: 'error.validation.metadata.namespace.max-length',
+          maxLength: 'error.validation.metadata.namespace.max-length',
-          },
+        },
-        });
+      });
       this.formModel = [
-        new DynamicFormGroupModel(
+        new DynamicFormGroupModel({
-          {
+          id: 'metadatadataschemagroup',
-            id: 'metadatadataschemagroup',
+          group: [this.namespace, this.name],
-            group:[this.namespace, this.name]
+        }),
-          })
       ];
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataSchema().subscribe((schema: MetadataSchema) => {
+      this.registryService
-        if (schema == null) {
+        .getActiveMetadataSchema()
-          this.clearFields();
+        .subscribe((schema: MetadataSchema) => {
-        } else {
+          if (schema == null) {
-          this.formGroup.patchValue({
+            this.clearFields();
-            metadatadataschemagroup: {
+          } else {
-              name: schema.prefix,
+            this.formGroup.patchValue({
-              namespace: schema.namespace,
+              metadatadataschemagroup: {
-            },
+                name: schema.prefix,
-          });
+                namespace: schema.namespace,
-          this.name.disabled = true;
+              },
-        }
+            });
-      });
+            this.name.disabled = true;
+          }
+        });
     });
   }
 
@@ -147,30 +156,42 @@ export class MetadataSchemaFormComponent implements OnInit, OnDestroy {
    * Emit the updated/created schema using the EventEmitter submitForm
    */
   onSubmit(): void {
-    this.registryService.clearMetadataSchemaRequests().subscribe();
+    const clearMetadataSchemaRequests$ =
-    this.registryService.getActiveMetadataSchema().pipe(take(1)).subscribe(
+      this.registryService.clearMetadataSchemaRequests();
-      (schema: MetadataSchema) => {
+
-        const values = {
+    clearMetadataSchemaRequests$
-          prefix: this.name.value,
+      .pipe(
-          namespace: this.namespace.value
+        switchMap(() =>
-        };
+          this.registryService.getActiveMetadataSchema().pipe(take(1))
-        if (schema == null) {
+        ),
-          this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), values)).subscribe((newSchema) => {
+        switchMap((schema: MetadataSchema) => {
-            this.submitForm.emit(newSchema);
+          const metadataValues = {
-          });
+            prefix: this.name.value,
-        } else {
+            namespace: this.namespace.value,
-          this.registryService.createOrUpdateMetadataSchema(Object.assign(new MetadataSchema(), schema, {
+          };
-            id: schema.id,
+
-            prefix: schema.prefix,
+          let createOrUpdate$: Observable<MetadataSchema>;
-            namespace: values.namespace,
+
-          })).subscribe((updatedSchema: MetadataSchema) => {
+          if (schema == null) {
-            this.submitForm.emit(updatedSchema);
+            createOrUpdate$ = this.registryService.createOrUpdateMetadataSchema(
-          });
+              Object.assign(new MetadataSchema(), metadataValues)
-        }
+            );
+          } else {
+            const updatedSchema = Object.assign(new MetadataSchema(), schema, {
+              namespace: metadataValues.namespace,
+            });
+            createOrUpdate$ =
+              this.registryService.createOrUpdateMetadataSchema(updatedSchema);
+          }
+
+          return createOrUpdate$;
+        })
+      )
+      .subscribe((updatedOrCreatedSchema: MetadataSchema) => {
+        this.submitForm.emit(updatedOrCreatedSchema);
         this.clearFields();
         this.registryService.cancelEditMetadataSchema();
-      }
+      });
-    );
   }
 
   /**