[APM-815] Decision table new editor (#81)

* [APM-815] Decision table new editor * change request * e2e fix * build fix
Activiti · Mar 20, 2019 · 44e4ba8 · 44e4ba8
1 parent d32c0de
commit 44e4ba8
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 34 deletions.
diff --git a/e2e/pages/connector-content.page.ts b/e2e/pages/connector-content.page.ts
@@ -26,6 +26,7 @@ export class ConnectorContentPage extends GenericPage {
     readonly connectorEditorContextMenu = element(by.css(`[data-automation-id="connector-editor-menu-button"]`));
     readonly connectorEditorDeleteButton = element(by.css(`[data-automation-id="connector-editor-delete-button"]`));
     readonly connectorEditorSaveButton = element(by.css(`[data-automation-id="connector-editor-save-button"]`));
+    readonly disabledSaveButton = element(by.css(`[data-automation-id="connector-editor-save-button"]:disabled`));
     readonly connectorEditorDownloadButton = element(by.css(`[data-automation-id="connector-editor-download-button"]`));
     readonly codeEditorTabButton = element.all(by.css(`div.mat-tab-label`)).get(1);
 
@@ -57,6 +58,7 @@ export class ConnectorContentPage extends GenericPage {
     }
 
     async save() {
+        await super.waitForElementToBeInVisible(this.disabledSaveButton);
         browser.actions().mouseMove(this.connectorEditorSaveButton).perform();
         await super.click(this.connectorEditorSaveButton);
     }

diff --git a/e2e/tests/connector/update-connector.e2e.ts b/e2e/tests/connector/update-connector.e2e.ts
@@ -25,6 +25,7 @@ import { AuthenticatedPage } from '../../pages/authenticated.page';
 import { CodeEditorWidget } from '../../pages/code-editor.widget';
 import { ProjectContentPage } from '../../pages/project-content.page';
 import { ConnectorContentPage } from '../../pages/connector-content.page';
+import { browser } from 'protractor';
 
 describe('Update connector', async () => {
     const adminUser = {
@@ -68,12 +69,14 @@ describe('Update connector', async () => {
 
     it('1. [C289327] Update connector in JSON editor', async () => {
         const newModel = {
-            name: 'Modifiedname'
+            name: 'Modifiedname',
+            description: 'new description'
         };
 
         await codeEditorWidget.isTextEditorPresent();
 
         await codeEditorWidget.updateCodeEditorContent(JSON.stringify(newModel));
+        await browser.sleep(1000);
         await connectorContentPage.save();
 
         expect(await snackBar.isUpdatedSuccessfully('connector')).toBe(true, 'Update snackbar was not displayed properly.');

diff --git a/...sdk/src/lib/api-implementations/acm-api/model-variations/decision-table-api-variations.ts b/...sdk/src/lib/api-implementations/acm-api/model-variations/decision-table-api-variations.ts
@@ -18,30 +18,26 @@
 import { Injectable, InjectionToken } from '@angular/core';
 import { DecisionTableContent, DecisionTable } from '../../../api/types';
 import { ContentType } from '../content-types';
-import { formatUuid } from '../../../helpers/utils/create-entries-names';
 import { ModelApiVariation, ModelApi } from '../model-api';
+import { getEmptyDecisionTable } from '../../../helpers/public_api';
 
 export const DECISION_TABLE_API = new InjectionToken<ModelApi<DecisionTable, DecisionTableContent>>('connector-api');
 
 @Injectable()
 export class DecisionTableApiVariation<M extends DecisionTable, C extends DecisionTableContent> implements ModelApiVariation<M, C> {
     readonly contentType = ContentType.DecisionTable;
-    readonly fileType = 'application/json';
+    readonly fileType = 'text/plain';
 
     public serialize(content: C): string {
-        return JSON.stringify(content);
+        return content;
     }
 
     public createInitialContent(model: M): C {
-        return <C>{
-            id: formatUuid(this.contentType, model.id),
-            name: model.name,
-            description: model.description
-        };
+        return <C>getEmptyDecisionTable(model);
     }
 
     public createSummaryPatch(model: Partial<M>, modelContent: C) {
-        const { name, description } = modelContent;
+        const { name, description } = model;
         return {
             name,
             description,

diff --git a/projects/ama-sdk/src/lib/api/types.ts b/projects/ama-sdk/src/lib/api/types.ts
@@ -211,11 +211,7 @@ export interface DataContent {
     description?: string;
 }
 
-export interface DecisionTableContent {
-    id: string;
-    name: string;
-    description?: string;
-}
+export type DecisionTableContent = string;
 
 export interface Data extends Model {
     type: DATA_TYPE;

diff --git a/projects/ama-sdk/src/lib/code-editor/components/code-editor/code-editor.component.ts b/projects/ama-sdk/src/lib/code-editor/components/code-editor/code-editor.component.ts
@@ -66,7 +66,11 @@ export class CodeEditorComponent implements OnDestroy, OnInit {
 
     onEditorInit(editor: monaco.editor.ICodeEditor): void {
         this.editor = editor;
-        editor.onKeyUp(this.onEditorChange.bind(this));
+        let timer = null;
+        editor.onKeyUp(() => {
+            clearTimeout(timer);
+            timer = window.setTimeout(() => this.onEditorChange(), 1000);
+        });
     }
 
     onEditorChange(): void {

diff --git a/projects/ama-sdk/src/lib/helpers/public_api.ts b/projects/ama-sdk/src/lib/helpers/public_api.ts
@@ -20,6 +20,7 @@ export * from './unsaved-page.guard';
 export * from './utils/create-entries-names';
 export * from './shared.module';
 export * from './utils/empty-diagram';
+export * from './utils/empty-decision-table';
 export * from './primitive-types';
 export * from './utils/blob2json';
 export { EntityDialogComponent } from './components/entity-dialog/entity-dialog.component';

diff --git a/projects/ama-sdk/src/lib/helpers/utils/create-entries-names.ts b/projects/ama-sdk/src/lib/helpers/utils/create-entries-names.ts
@@ -20,7 +20,7 @@ export const CONNECTOR_FILE_FORMAT = '.json';
 export const FORM_FILE_FORMAT = '.json';
 export const UI_FILE_FORMAT = '.json';
 export const DATA_FILE_FORMAT = '.json';
-export const DECISION_TABLE_FILE_FORMAT = '.json';
+export const DECISION_TABLE_FILE_FORMAT = '.dmn';
 export const MODEL_NAME_CHARACTERS = 'a-zA-Z0-9_';
 
 export const sanitizeString = (text: string) => {
@@ -34,6 +34,11 @@ export const createProcessName = (name) => {
     return sanitizeString(name.replace(PROCESS_FILE_FORMAT, ''));
 };
 
+export const createDecisionTableName = (name) => {
+    return sanitizeString(name.replace(DECISION_TABLE_FILE_FORMAT, ''));
+};
+
+
 export const changeFileName = (file: File, newName: string): File => {
     const blob = file.slice(0, file.size, file.type);
     return new File([blob], newName, { type: file.type });

diff --git a/projects/ama-sdk/src/lib/helpers/utils/empty-decision-table.ts b/projects/ama-sdk/src/lib/helpers/utils/empty-decision-table.ts
@@ -0,0 +1,35 @@
+ /*!
+ * @license
+ * Copyright 2019 Alfresco, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { formatUuid, createDecisionTableName } from './create-entries-names';
+import { ContentType } from './../../api-implementations/acm-api/content-types';
+import { DecisionTable } from '../../api/types';
+
+/* tslint:disable */
+export const getEmptyDecisionTable = (decisionTable: DecisionTable) => `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/DMN/20151101/dmn.xsd" id="${formatUuid(ContentType.DecisionTable, decisionTable.id)}" name="${createDecisionTableName(decisionTable.name)}" documentation="${decisionTable.description ? decisionTable.description: ''}" namespace="http://camunda.org/schema/1.0/dmn" exporter="dmn-js (https://demo.bpmn.io/dmn)" exporterVersion="6.2.1">
+  <decision id="decision-${createDecisionTableName(decisionTable.name)}" name="${createDecisionTableName(decisionTable.name)}">
+    <decisionTable id="decisionTable_1sue4jl">
+      <input id="input1" label="">
+        <inputExpression id="inputExpression1" typeRef="string">
+          <text></text>
+        </inputExpression>
+      </input>
+      <output id="output1" label="" name="" typeRef="string" />
+    </decisionTable>
+  </decision>
+</definitions>`
diff --git a/src/app/connector-editor/components/connector-editor/connector-editor.component.ts b/src/app/connector-editor/components/connector-editor/connector-editor.component.ts
@@ -19,8 +19,8 @@ import { Component, ChangeDetectorRef } from '@angular/core';
 import { ComponentRegisterService } from '@alfresco/adf-extensions';
 import { Store } from '@ngrx/store';
 import { selectSelectedConnectorContent, selectConnectorLoadingState, selectSelectedConnectorId } from '../../store/connector-editor.selectors';
-import { map, tap, filter } from 'rxjs/operators';
-import { BehaviorSubject, Observable, merge } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
 import { ChangeConnectorContent } from '../../store/connector-editor.actions';
 import {
     AmaState,
@@ -44,7 +44,6 @@ export class ConnectorEditorComponent {
     vsTheme$: Observable<string>;
     editorContent$: Observable<string>;
     loadingState$: Observable<boolean>;
-    connectorContentChange$ = new BehaviorSubject<string>('');
     componentKey = AdvancedConnectorEditorKey;
 
     boundOnChangeAttempt: any;
@@ -57,9 +56,12 @@ export class ConnectorEditorComponent {
         private componentRegister: ComponentRegisterService
     ) {
         this.vsTheme$ = this.getVsTheme();
-        this.editorContent$ = this.getEditorContent();
         this.loadingState$ = this.store.select(selectConnectorLoadingState);
         this.connectorId$ = this.store.select(selectSelectedConnectorId);
+        this.editorContent$ = this.store.select(selectSelectedConnectorContent).pipe(
+            filter(content => !!content),
+            map(content => JSON.stringify(content, undefined, 4).trim())
+        );
 
         this.boundOnChangeAttempt = this.onChangeAttempt.bind(this);
         this.getMemoizedDynamicComponentData = memoize((connectorContent, onChangeAttempt) => {
@@ -83,7 +85,7 @@ export class ConnectorEditorComponent {
         this.disableSave = !this.validate(connectorContentString).valid;
 
         if (!this.disableSave) {
-            this.connectorContentChange$.next(connectorContentString);
+            this.editorContent$ = of(connectorContentString);
             this.store.dispatch(new ChangeConnectorContent());
         }
 
@@ -99,16 +101,4 @@ export class ConnectorEditorComponent {
             .select(selectSelectedTheme)
             .pipe(map(theme => (theme.className === 'dark-theme' ? 'vs-dark' : 'vs-light')));
     }
-
-    private getEditorContent(): Observable<string> {
-        const connectorContent$ = this.store.select(selectSelectedConnectorContent).pipe(
-            filter(content => !!content),
-            map(content => JSON.stringify(content, undefined, 4).trim()),
-            tap(connectorContentString => {
-                this.connectorContentChange$.next(connectorContentString);
-            })
-        );
-
-        return merge(connectorContent$, this.connectorContentChange$);
-    }
 }