Config-editor-ui: update dependencies + response reordering tabs and enable copy/paste/undo/redo (#725)

config-editor/config-editor-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rule-editor.ui",
-  "version": "2.6.1-dev",
+  "version": "2.6.2-dev",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -34,8 +34,8 @@
     "@angular/platform-browser": "^13.3.1",
     "@angular/platform-browser-dynamic": "^13.3.1",
     "@angular/router": "^13.3.1",
-    "@ngx-formly/core": "^6.0.0-beta.3",
-    "@ngx-formly/material": "^6.0.0-beta.3",
+    "@ngx-formly/core": "^6.0.0-rc.0",
+    "@ngx-formly/material": "^6.0.0-rc.0",
     "@types/json-schema": "^7.0.10",
     "jasmine-marbles": "^0.9.2",
     "js-yaml": "^4.1.0",

config-editor/config-editor-ui/src/app/components/nav-bar/nav-bar.component.html

@@ -12,7 +12,7 @@
         <mat-menu #menu="matMenu">
           <button *ngFor="let service of serviceNames" [routerLink]="['/' + getPath(service)]" mat-menu-item>
             <mat-icon *ngIf="service === (serviceName$ | async); else blank">check</mat-icon>
-            <ng-template #blank><mat-icon>blank</mat-icon></ng-template>
+            <ng-template #blank></ng-template>
             {{service | titlecase}}
           </button>
         </mat-menu>

config-editor/config-editor-ui/src/app/ngx-formly/tab-array.type.component.ts

@@ -6,7 +6,12 @@ import { FieldArrayType } from '@ngx-formly/core';
   template: `
     <div>
       <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab">
-        <mat-tab *ngFor="let tab of field.fieldGroup; let i = index" [label]="getUnionType(tab?.model)">
+        <mat-tab *ngFor="let tab of field.fieldGroup; let i = index">
+          <ng-template mat-tab-label>
+            <mat-icon *ngIf="i != 0" (click)="moveDown(i)">arrow_left</mat-icon>
+            {{ getUnionType(tab?.model) }}
+            <mat-icon *ngIf="i != field.fieldGroup.length - 1" (click)="moveUp(i)">arrow_right</mat-icon>
+          </ng-template>
           <span class="align-right">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -60,6 +65,15 @@ import { FieldArrayType } from '@ngx-formly/core';
         display: table;
         padding-top: 5px;
       }
+
+      ::ng-deep .mat-tab-label {
+        padding: 0 4px;
+      }
+
+      ::ng-deep .mat-tab-label .mat-tab-label-content {
+        width: 100%;
+        justify-content: space-around;
+      }
     `,
   ],
 })
@@ -71,41 +85,35 @@ export class TabArrayTypeComponent extends FieldArrayType {
     return keys[keys.length - 1];
   }
 
-  add(i: number) {
+  add(index: number, unionModel = null) {
     const modelLength = this.model ? this.model.length : 0;
-    super.add(modelLength);
-    this.selectedTab = i;
-    for (let j = this.model.length - 1; j >= i; j--) {
-      this.moveDown(j);
+    super.add(modelLength, unionModel);
+    for (let j = this.model.length - 1; j >= index; j--) {
+      this.moveUp(j);
     }
+    this.selectedTab = index;
   }
 
-  moveDown(i: number) {
-    if (i === this.model.length - 1) {
+  moveDown(index: number) {
+    if (index === 0) {
       return;
     }
 
-    this.reorder(i, i + 1);
+    this.reorder(index - 1, index);
   }
 
-  private reorder(oldI: number, newI: number) {
-    this.reorderFields(this.field.fieldGroup, oldI, newI);
-    this.reorderItems(this.model, oldI, newI);
-    this.reorderItems(this.formControl.controls, oldI, newI);
+  moveUp(index: number) {
+    if (index === this.model.length - 1) {
+      return;
+    }
+
+    this.reorder(index, index + 1);
   }
 
-  private reorderItems(obj: any[], oldI: number, newI: number) {
-    const old = obj[oldI];
-    obj[oldI] = obj[newI];
-    obj[newI] = old;
+  private reorder(oldIndex: number, newIndex: number) {
+    const unionModel = this.model[oldIndex];
+    this.remove(oldIndex);
+    this.add(newIndex, unionModel);
   }
 
-  private reorderFields(obj: any[], oldI: number, newI: number) {
-    const old = obj[oldI];
-    obj[oldI] = obj[newI];
-    obj[oldI].key = `${oldI}`;
-
-    obj[newI] = old;
-    obj[newI].key = `${newI}`;
-  }
 }

config-editor/config-editor-ui/src/app/services/schema/schema.service.ts

@@ -197,9 +197,11 @@ export class SchemaService {
     for (const part of path) {
       sub = sub[part];
     }
-    for (let i = 0; i < sub.length; i++) {
-      const temp = sub[i];
-      sub[i] = { [sub[i][this.selectorName]]: temp };
+    if (sub) {
+        for (let i = 0; i < sub.length; i++) {
+        const temp = sub[i];
+        sub[i] = { [sub[i][this.selectorName]]: temp };
+      }
     }
   }
 
@@ -242,7 +244,6 @@ export class SchemaService {
   private wrapSchemaUnion(obj: any): any {
     for (const item of obj) {
       const temp = item.properties;
-
       const required = item.required;
       item.properties = { [item.title]: { properties: temp, required, type: 'object' } };
       item.required = [item.title];

config-editor/config-editor-ui/src/styles.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 @import '@angular/material/theming';
-@import '~material-design-icons/iconfont/material-icons.css';
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
 @import 'gr-palette';
 @import 'text-diff-style.scss';
 // Plus imports for other components in your app.

config/config-editor-ui/ui-bootstrap.json

@@ -18,8 +18,7 @@
             "perConfigTestEnabled": true,
             "releaseTestEnabled": true,
             "testCaseEnabled": false
-        },
-        "disableEditingFeatures": true
+        }
     },
     "alert": {
         "release": {