fix: prevent the user from moving on until a mapping file is produced (1.6.x)

app/ui/src/app/integration/api-provider/editor-page/integration-api-provider-editor-toolbar.component.html

@@ -105,6 +105,7 @@
               <button
                 class="btn btn-primary"
                 (click)="flowPageService.done()"
+                [disabled]="flowPageService.doneDisabled"
                 *ngIf="flowPageService.showDone"
               >
                 Done

app/ui/src/app/integration/edit-page/edit-page.models.ts

@@ -44,3 +44,6 @@ export const INTEGRATION_DONE_CLICKED = 'integration-done-clicked';
 export const INTEGRATION_DELETE_PROMPT = 'integration-delete-prompt';
 export const INTEGRATION_SIDEBAR_EXPAND = 'integration-sidebar-expand';
 export const INTEGRATION_SIDEBAR_COLLAPSE = 'integration-sidebar-collapse';
+export const INTEGRATION_BUTTON_DISABLE_DONE =
+  'integration-button-disable-done';
+export const INTEGRATION_BUTTON_ENABLE_DONE = 'integration-button-enable-done';

app/ui/src/app/integration/edit-page/flow-page.service.ts

@@ -10,6 +10,8 @@ import {
   INTEGRATION_DONE_CLICKED,
   INTEGRATION_UPDATED,
   INTEGRATION_SAVED,
+  INTEGRATION_BUTTON_DISABLE_DONE,
+  INTEGRATION_BUTTON_ENABLE_DONE,
 } from './edit-page.models';
 
 @Injectable()
@@ -20,6 +22,7 @@ export class FlowPageService {
   publishInProgress = false;
   showDone = false;
   showCancel = true;
+  doneDisabled = false;
 
   constructor(
     public currentFlowService: CurrentFlowService,
@@ -32,6 +35,12 @@ export class FlowPageService {
         case INTEGRATION_SAVED:
           this.initialize();
           break;
+        case INTEGRATION_BUTTON_DISABLE_DONE:
+          this.doneDisabled = true;
+          break;
+        case INTEGRATION_BUTTON_ENABLE_DONE:
+          this.doneDisabled = false;
+          break;
         default:
       }
     });

app/ui/src/app/integration/edit-page/flow-toolbar/flow-toolbar.component.html

@@ -30,6 +30,7 @@
               <button
                 class="btn btn-primary"
                 (click)="flowPageService.done()"
+                [disabled]="flowPageService.doneDisabled"
                 *ngIf="flowPageService.showDone"
               >
                 Done

app/ui/src/app/integration/edit-page/step-configure/data-mapper/data-mapper-host.component.ts

@@ -43,6 +43,7 @@ import {
   IndexedStep,
 } from '../../edit-page.models';
 import { SPLIT, AGGREGATE } from '@syndesis/ui/store';
+import { debounceTime } from 'rxjs/operators';
 /*
  * Example host component:
  *
@@ -378,13 +379,13 @@ export class DataMapperHostComponent implements OnInit, OnDestroy {
 
   private registerSaveMappingHandler(): Subscription {
     //subscribe to mapping save callback from data mapper
-    return this.cfg.mappingService.saveMappingOutput$.subscribe(
-      (saveHandler: Function) => {
+    return this.cfg.mappingService.saveMappingOutput$
+      .pipe(debounceTime(500))
+      .subscribe((saveHandler: Function) => {
         const json = this.cfg.mappingService.serializeMappingsToJSON();
         this.mappings.emit(JSON.stringify(json));
         this.cfg.mappingService.handleMappingSaveSuccess(saveHandler);
-      }
-    );
+      });
   }
 
   private isSupportedDataShape(dataShape: DataShape): boolean {

app/ui/src/app/integration/edit-page/step-configure/step-configure.component.ts

@@ -19,6 +19,10 @@ import {
   INTEGRATION_CANCEL_CLICKED,
   INTEGRATION_DONE_CLICKED,
 } from '@syndesis/ui/integration/edit-page';
+import {
+  INTEGRATION_BUTTON_ENABLE_DONE,
+  INTEGRATION_BUTTON_DISABLE_DONE,
+} from '../edit-page.models';
 
 @Component({
   selector: 'syndesis-integration-step-configure',
@@ -71,20 +75,24 @@ export class IntegrationStepConfigureComponent implements OnInit, OnDestroy {
 
   continue(data: any = {}) {
     const step = this.step;
-    if (step.stepKind === DATA_MAPPER) {
-      this.customProperties = {
-        atlasmapping: this.mappings,
-      };
-    }
     if (this.stepStore.isCustomStep(step)) {
+      if (step.stepKind === DATA_MAPPER) {
+        this.customProperties = {
+          atlasmapping: this.mappings,
+        };
+      }
       data = this.customProperties;
     } else {
       data = this.formGroup ? this.formGroup.value : {};
     }
+    const properties = this.formFactory.sanitizeValues(
+      { ...data },
+      this.formConfig
+    );
     this.currentFlowService.events.emit({
       kind: INTEGRATION_SET_PROPERTIES,
       position: this.position,
-      properties: this.formFactory.sanitizeValues({ ...data }, this.formConfig),
+      properties,
       onSave: () => {
         // flag that this step is configured too for consistency
         // with how connections are configured
@@ -105,6 +113,15 @@ export class IntegrationStepConfigureComponent implements OnInit, OnDestroy {
 
   setMappings(mappings: string) {
     this.mappings = mappings;
+    if (typeof this.mappings !== 'undefined') {
+      this.currentFlowService.events.emit({
+        kind: INTEGRATION_BUTTON_ENABLE_DONE,
+      });
+    } else {
+      this.currentFlowService.events.emit({
+        kind: INTEGRATION_BUTTON_DISABLE_DONE,
+      });
+    }
   }
 
   getToolbarClass() {