Fix parse command bug and yamlTemplate state bug in SetPollingSource/…

…SetTransform editors. (#112)

* Fix parse command bug and yamlTemplate state bug.
* Isolated a base class between SetPollingSource and SetTransform editors
* Add unit tests.

src/app/common/app.values.ts

@@ -10,7 +10,8 @@ export default class AppValues {
     public static readonly URL_PATTERN = /^(http:\/\/)|(https:\/\/)/i;
     public static readonly SCHEMA_NAME_PATTERN =
         /^[a-zA-Z0-9]+[a-zA-Z0-9\s(_)]*$/i;
-    public static readonly SPLIT_ARGUMENTS_PATTERN = /\w+|"[^"]+"/g;
+    public static readonly SPLIT_ARGUMENTS_PATTERN =
+        /[^\s"']+|"([^"]*)"+|'([^']*)'/g;
 
     public static readonly DISPLAY_DATE_FORMAT = "DD MMM YYYY";
     public static readonly DISPLAY_TOOLTIP_DATE_FORMAT = "MMM D, YYYY, HH:mm A";

src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.html

@@ -128,7 +128,7 @@
                                 [nextStep]="null"
                                 [validStep]="pollingSourceForm.valid"
                                 (changeStepEmitter)="changeStep($event)"
-                                (saveEventEmitter)="onSubmit()"
+                                (saveEventEmitter)="onSaveEvent()"
                                 (editYamlEmitter)="onEditYaml()"
                             ></app-stepper-navigation>
                         </div>

src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.spec.ts

@@ -19,7 +19,7 @@ import { MonacoEditorModule } from "ngx-monaco-editor";
 import { StepperNavigationComponent } from "../stepper-navigation/stepper-navigation.component";
 import { BaseStepComponent } from "./steps/base-step/base-step.component";
 import { PollingSourceFormComponentsModule } from "../form-components/polling-source-form-components.module";
-import { of } from "rxjs";
+import { of, from } from "rxjs";
 import { mockDatasetHistoryResponse } from "src/app/search/mock.data";
 import {
     DatasetKind,
@@ -116,6 +116,23 @@ describe("AddPollingSourceComponent", () => {
         expect(openModalSpy).toHaveBeenCalledTimes(1);
     });
 
+    it("should check open edit modal after error", () => {
+        const mockError = "Some error";
+        expect(component.errorMessage).toBe("");
+        expect(component.changedEventYamlByHash).toBeUndefined();
+        createDatasetService.errorCommitEventChanges(mockError);
+        expect(component.errorMessage).toBe(mockError);
+
+        component.onEditYaml();
+        const modal = modalService.open(FinalYamlModalComponent, {
+            size: "lg",
+        });
+
+        from(modal.result).subscribe(() => {
+            expect(component.changedEventYamlByHash).toBeDefined();
+        });
+    });
+
     it("should check eventYamlByHash is not null", () => {
         const mockEventYamlByHash = "test_tyaml";
         spyOn(editService, "getEventAsYaml").and.returnValue(
@@ -131,7 +148,7 @@ describe("AddPollingSourceComponent", () => {
             createDatasetService,
             "commitEventToDataset",
         ).and.returnValue(of());
-        component.onSubmit();
+        component.onSaveEvent();
         expect(submitYamlSpy).toHaveBeenCalledTimes(1);
     });
 

src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.ts

@@ -11,17 +11,9 @@ import {
     DatasetKind,
     SetPollingSource,
 } from "./../../../../../api/kamu.graphql.interface";
-import { BaseComponent } from "src/app/common/base.component";
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnInit,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
 import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
-import { AppDatasetCreateService } from "src/app/dataset-create/dataset-create.service";
-import { TemplatesYamlEventsService } from "src/app/services/templates-yaml-events.service";
-import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
+import { NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 import { SetPollingSourceSection } from "src/app/shared/shared.types";
 import {
     FETCH_STEP_RADIO_CONTROLS,
@@ -32,11 +24,11 @@ import { FETCH_FORM_DATA } from "./steps/data/fetch-form-data";
 import { READ_FORM_DATA } from "./steps/data/read-form-data";
 import { MERGE_FORM_DATA } from "./steps/data/merge-form-data";
 import { ProcessFormService } from "./process-form.service";
-import { DatasetHistoryUpdate } from "src/app/dataset-view/dataset.subscriptions.interface";
 import { EditPollingSourceService } from "./edit-polling-source.service";
-import { MaybeNull } from "src/app/common/app.types";
+import { from } from "rxjs";
 import { SupportedEvents } from "src/app/dataset-block/metadata-block/components/event-details/supported.events";
 import { STEPPER_GLOBAL_OPTIONS } from "@angular/cdk/stepper";
+import { BaseMainEventComponent } from "../base-main-event.component";
 
 @Component({
     selector: "app-add-polling-source",
@@ -50,14 +42,13 @@ import { STEPPER_GLOBAL_OPTIONS } from "@angular/cdk/stepper";
         },
     ],
 })
-export class AddPollingSourceComponent extends BaseComponent implements OnInit {
+export class AddPollingSourceComponent
+    extends BaseMainEventComponent
+    implements OnInit
+{
     public currentStep: SetPollingSourceSection = SetPollingSourceSection.FETCH;
     public steps: typeof SetPollingSourceSection = SetPollingSourceSection;
     public showPreprocessStep = false;
-    public errorMessage = "";
-    public history: DatasetHistoryUpdate;
-    public eventYamlByHash: MaybeNull<string>;
-    public datasetKind: DatasetKind;
     public preprocessStepValue: PreprocessStepValue = {
         engine: "",
         queries: [],
@@ -114,10 +105,6 @@ export class AddPollingSourceComponent extends BaseComponent implements OnInit {
 
     constructor(
         private fb: FormBuilder,
-        private createDatasetService: AppDatasetCreateService,
-        private yamlEventService: TemplatesYamlEventsService,
-        private modalService: NgbModal,
-        private cdr: ChangeDetectorRef,
         private processFormService: ProcessFormService,
         private editService: EditPollingSourceService,
     ) {
@@ -139,20 +126,15 @@ export class AddPollingSourceComponent extends BaseComponent implements OnInit {
                     this.history = this.editService.history;
                     this.cdr.detectChanges();
                 }),
-            this.createDatasetService.onErrorCommitEventChanges.subscribe(
-                (message: string) => {
-                    this.errorMessage = message;
-                    this.cdr.detectChanges();
-                },
-            ),
         );
+        this.subsribeErrorMessage();
     }
 
     public changeStep(step: SetPollingSourceSection): void {
         this.currentStep = step;
     }
 
-    public onSubmit(): void {
+    public onSaveEvent(): void {
         this.processFormService.transformForm(this.pollingSourceForm);
         this.trackSubscription(
             this.createDatasetService
@@ -180,15 +162,22 @@ export class AddPollingSourceComponent extends BaseComponent implements OnInit {
         );
         const instance = modalRef.componentInstance as FinalYamlModalComponent;
         this.processFormService.transformForm(this.pollingSourceForm);
-        instance.yamlTemplate =
-            this.yamlEventService.buildYamlSetPollingSourceEvent(
-                this.pollingSourceForm.value as Omit<
-                    SetPollingSource,
-                    "__typename"
-                >,
-                this.showPreprocessStep ? this.preprocessStepValue : null,
-            );
+
+        instance.yamlTemplate = this.errorMessage
+            ? this.changedEventYamlByHash
+            : this.yamlEventService.buildYamlSetPollingSourceEvent(
+                  this.pollingSourceForm.value as Omit<
+                      SetPollingSource,
+                      "__typename"
+                  >,
+                  this.showPreprocessStep ? this.preprocessStepValue : null,
+              );
         instance.datasetInfo = this.getDatasetInfoFromUrl();
+        this.trackSubscription(
+            from(modalRef.result).subscribe((eventYaml: string) => {
+                this.changedEventYamlByHash = eventYaml;
+            }),
+        );
     }
 
     public onShowPreprcessStep(showPreprocessStep: boolean): void {

src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/process-form.service.spec.ts

@@ -2,6 +2,7 @@ import { TestBed } from "@angular/core/testing";
 import { ProcessFormService } from "./process-form.service";
 import { FormArray, FormControl, FormGroup } from "@angular/forms";
 import { SchemaControlType } from "./process-form.service.types";
+import { PrepareKind } from "./add-polling-source-form.types";
 
 describe("ProcessFormService", () => {
     let service: ProcessFormService;
@@ -108,4 +109,48 @@ describe("ProcessFormService", () => {
             expectedResult,
         );
     });
+
+    it("should check parse command correct on the PREPARE step. ", () => {
+        const formGroupFetchContainer = new FormGroup({
+            fetch: new FormGroup({
+                kind: new FormControl("container"),
+                eventTime: new FormGroup({
+                    kind: new FormControl("fromMetadata"),
+                    timestampFormat: new FormControl(""),
+                }),
+            }),
+            prepare: new FormArray([
+                new FormGroup({
+                    kind: new FormControl(PrepareKind.PIPE),
+                    command: new FormControl("i -c '1,/OBSERVATION/d'"),
+                }),
+            ]),
+            read: new FormGroup({
+                kind: new FormControl("csv"),
+                schema: new FormArray([
+                    new FormGroup({
+                        name: new FormControl("id (A.M.)"),
+                        type: new FormControl("BIGINT"),
+                    }),
+                ]),
+            }),
+            merge: new FormGroup({
+                kind: new FormControl("append"),
+            }),
+        });
+
+        const expectedResult = {
+            fetch: { kind: "container" },
+            read: { kind: "csv", schema: ["`id (A.M.)` BIGINT"] },
+            prepare: [
+                { kind: "pipe", command: ["i", "-c", "'1,/OBSERVATION/d'"] },
+            ],
+            merge: { kind: "append" },
+        };
+        service.transformForm(formGroupFetchContainer);
+
+        expect(formGroupFetchContainer.value as SchemaControlType).toEqual(
+            expectedResult,
+        );
+    });
 });

src/app/dataset-view/additional-components/metadata-component/components/base-main-event.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectorRef, inject } from "@angular/core";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { DatasetKind } from "src/app/api/kamu.graphql.interface";
+import { MaybeNull } from "src/app/common/app.types";
+import { BaseComponent } from "src/app/common/base.component";
+import { AppDatasetCreateService } from "src/app/dataset-create/dataset-create.service";
+import { DatasetHistoryUpdate } from "src/app/dataset-view/dataset.subscriptions.interface";
+import { TemplatesYamlEventsService } from "src/app/services/templates-yaml-events.service";
+
+export abstract class BaseMainEventComponent extends BaseComponent {
+    public modalService = inject(NgbModal);
+    public createDatasetService = inject(AppDatasetCreateService);
+    public cdr = inject(ChangeDetectorRef);
+    public yamlEventService = inject(TemplatesYamlEventsService);
+
+    public eventYamlByHash: MaybeNull<string>;
+    public history: DatasetHistoryUpdate;
+    public datasetKind: DatasetKind;
+    public errorMessage = "";
+    public changedEventYamlByHash: string;
+
+    protected subsribeErrorMessage(): void {
+        this.trackSubscription(
+            this.createDatasetService.onErrorCommitEventChanges.subscribe(
+                (message: string) => {
+                    this.errorMessage = message;
+                    this.cdr.detectChanges();
+                },
+            ),
+        );
+    }
+
+    protected abstract onEditYaml(): void;
+    protected abstract onSaveEvent(): void;
+}

src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.ts

@@ -45,6 +45,6 @@ export class FinalYamlModalComponent extends BaseComponent {
                 )
                 .subscribe(),
         );
-        this.activeModal.close("close modal");
+        this.activeModal.close(this.yamlTemplate);
     }
 }

src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.html

@@ -28,6 +28,13 @@
             </div>
         </div>
     </div>
+    <div
+        *ngIf="errorMessage"
+        class="container alert alert-danger mt-2"
+        role="alert"
+    >
+        <p class="text-danger fs-6">Error:<br />{{ errorMessage }}</p>
+    </div>
     <div class="d-flex justify-content-end section-buttons">
         <app-stepper-navigation
             [validStep]="isInputDatasetsExist"