[ADF-4894] Json editor dialog (#5082)

* move download-zip to its own folder

* json dialog

* update docs

* update test

* disable e2e test

* json widget for the Form

* remove deprecated test

* fix tests, update display text name

lib/core/form/components/widgets/display-text/display-text.widget.ts

@@ -28,7 +28,7 @@ import { baseHost , WidgetComponent } from './../widget.component';
     host: baseHost,
     encapsulation: ViewEncapsulation.None
 })
-export class DisplayTextWidgetComponentComponent extends WidgetComponent {
+export class DisplayTextWidgetComponent extends WidgetComponent {
 
     constructor(public formService: FormService) {
          super(formService);

lib/core/form/components/widgets/index.ts

@@ -22,7 +22,7 @@ import { UnknownWidgetComponent } from './unknown/unknown.widget';
 import { AmountWidgetComponent } from './amount/amount.widget';
 import { CheckboxWidgetComponent } from './checkbox/checkbox.widget';
 import { DateWidgetComponent } from './date/date.widget';
-import { DisplayTextWidgetComponentComponent } from './display-text/display-text.widget';
+import { DisplayTextWidgetComponent } from './display-text/display-text.widget';
 import { DocumentWidgetComponent } from './document/document.widget';
 import { DropdownWidgetComponent } from './dropdown/dropdown.widget';
 import { DynamicTableWidgetComponent } from './dynamic-table/dynamic-table.widget';
@@ -44,6 +44,7 @@ import { TextWidgetComponent } from './text/text.widget';
 import { TypeaheadWidgetComponent } from './typeahead/typeahead.widget';
 import { UploadWidgetComponent } from './upload/upload.widget';
 import { DateTimeWidgetComponent } from './date-time/date-time.widget';
+import { JsonWidgetComponent } from './json/json.widget';
 
 // core
 export * from './widget.component';
@@ -73,6 +74,7 @@ export * from './dynamic-table/dynamic-table.widget';
 export * from './error/error.component';
 export * from './document/document.widget';
 export * from './date-time/date-time.widget';
+export * from './json/json.widget';
 
 // editors (dynamic table)
 export * from './dynamic-table/dynamic-table.widget.model';
@@ -95,7 +97,7 @@ export const WIDGET_DIRECTIVES: any[] = [
     DropdownWidgetComponent,
     HyperlinkWidgetComponent,
     RadioButtonsWidgetComponent,
-    DisplayTextWidgetComponentComponent,
+    DisplayTextWidgetComponent,
     UploadWidgetComponent,
     TypeaheadWidgetComponent,
     FunctionalGroupWidgetComponent,
@@ -111,7 +113,8 @@ export const WIDGET_DIRECTIVES: any[] = [
     ErrorWidgetComponent,
     DocumentWidgetComponent,
     DateTimeWidgetComponent,
-    DateTimeEditorComponent
+    DateTimeEditorComponent,
+    JsonWidgetComponent
 ];
 
 export const MASK_DIRECTIVE: any[] = [

lib/core/form/components/widgets/json/json.widget.ts

@@ -0,0 +1,56 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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 { Component, ViewEncapsulation } from '@angular/core';
+import { FormService } from './../../../services/form.service';
+import { baseHost, WidgetComponent } from './../widget.component';
+import { MatDialog } from '@angular/material/dialog';
+import { EditJsonDialogSettings, EditJsonDialogComponent } from '../../../../dialogs/edit-json/edit-json.dialog';
+
+@Component({
+    template: `
+        <button mat-raised-button color="primary" (click)="view()">json</button>
+    `,
+    host: baseHost,
+    encapsulation: ViewEncapsulation.None
+})
+export class JsonWidgetComponent extends WidgetComponent {
+    constructor(public formService: FormService, private dialog: MatDialog) {
+        super(formService);
+    }
+
+    view() {
+        const rawValue = this.field.value;
+        const value =
+            typeof rawValue === 'object'
+                ? JSON.stringify(rawValue || {}, null, 2)
+                : rawValue;
+
+        const settings: EditJsonDialogSettings = {
+            title: this.field.name,
+            editable: false,
+            value
+        };
+
+        this.dialog
+            .open(EditJsonDialogComponent, {
+                data: settings,
+                minWidth: '50%',
+                minHeight: '50%'
+            });
+    }
+}

lib/core/form/services/form-rendering.service.spec.ts

@@ -21,10 +21,10 @@ import {
     FormFieldTypes,
     UnknownWidgetComponent,
     UploadWidgetComponent,
-    TextWidgetComponent
+    TextWidgetComponent,
+    JsonWidgetComponent
 } from './../components/widgets/index';
 import { FormRenderingService } from './form-rendering.service';
-import { DisplayTextWidgetComponentComponent } from '../components/widgets';
 
 describe('FormRenderingService', () => {
 
@@ -126,7 +126,7 @@ describe('FormRenderingService', () => {
     it('should resolve Display Text Widget for JSON field type', () => {
         const resolver = service.getComponentTypeResolver('json');
         const type = resolver(null);
-        expect(type).toBe(DisplayTextWidgetComponentComponent);
+        expect(type).toBe(JsonWidgetComponent);
     });
 
 });

lib/core/form/services/form-rendering.service.ts

@@ -17,61 +17,36 @@
 
 import { DynamicComponentMapper, DynamicComponentResolveFunction, DynamicComponentResolver } from '../../services/dynamic-component-mapper.service';
 import { Injectable, Type } from '@angular/core';
-
-import {
-    AmountWidgetComponent,
-    CheckboxWidgetComponent,
-    ContainerWidgetComponent,
-    DateWidgetComponent,
-    DisplayTextWidgetComponentComponent,
-    DocumentWidgetComponent,
-    DropdownWidgetComponent,
-    DynamicTableWidgetComponent,
-    FunctionalGroupWidgetComponent,
-    HyperlinkWidgetComponent,
-    MultilineTextWidgetComponentComponent,
-    NumberWidgetComponent,
-    PeopleWidgetComponent,
-    RadioButtonsWidgetComponent,
-    TextWidgetComponent,
-    TypeaheadWidgetComponent,
-    UnknownWidgetComponent,
-    UploadWidgetComponent,
-    DateTimeWidgetComponent
-} from './../components/widgets/index';
+import * as widgets from './../components/widgets/index';
 
 @Injectable({
     providedIn: 'root'
 })
 export class FormRenderingService extends DynamicComponentMapper {
 
-    protected defaultValue: Type<{}> = UnknownWidgetComponent;
+    protected defaultValue: Type<{}> = widgets.UnknownWidgetComponent;
     protected types: { [key: string]: DynamicComponentResolveFunction } = {
-        'text': DynamicComponentResolver.fromType(TextWidgetComponent),
-        'string': DynamicComponentResolver.fromType(TextWidgetComponent),
-        'integer': DynamicComponentResolver.fromType(NumberWidgetComponent),
-        'multi-line-text': DynamicComponentResolver.fromType(MultilineTextWidgetComponentComponent),
-        'boolean': DynamicComponentResolver.fromType(CheckboxWidgetComponent),
-        'dropdown': DynamicComponentResolver.fromType(DropdownWidgetComponent),
-        'date': DynamicComponentResolver.fromType(DateWidgetComponent),
-        'amount': DynamicComponentResolver.fromType(AmountWidgetComponent),
-        'radio-buttons': DynamicComponentResolver.fromType(RadioButtonsWidgetComponent),
-        'hyperlink': DynamicComponentResolver.fromType(HyperlinkWidgetComponent),
-        'readonly-text': DynamicComponentResolver.fromType(DisplayTextWidgetComponentComponent),
-        'json': DynamicComponentResolver.fromType(DisplayTextWidgetComponentComponent),
-        'readonly': DynamicComponentResolver.fromType(TextWidgetComponent),
-        'typeahead': DynamicComponentResolver.fromType(TypeaheadWidgetComponent),
-        'people': DynamicComponentResolver.fromType(PeopleWidgetComponent),
-        'functional-group': DynamicComponentResolver.fromType(FunctionalGroupWidgetComponent),
-        'dynamic-table': DynamicComponentResolver.fromType(DynamicTableWidgetComponent),
-        'container': DynamicComponentResolver.fromType(ContainerWidgetComponent),
-        'group': DynamicComponentResolver.fromType(ContainerWidgetComponent),
-        'document': DynamicComponentResolver.fromType(DocumentWidgetComponent),
-        'upload':  DynamicComponentResolver.fromType(UploadWidgetComponent),
-        'datetime':  DynamicComponentResolver.fromType(DateTimeWidgetComponent)
+        'text': DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
+        'string': DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
+        'integer': DynamicComponentResolver.fromType(widgets.NumberWidgetComponent),
+        'multi-line-text': DynamicComponentResolver.fromType(widgets.MultilineTextWidgetComponentComponent),
+        'boolean': DynamicComponentResolver.fromType(widgets.CheckboxWidgetComponent),
+        'dropdown': DynamicComponentResolver.fromType(widgets.DropdownWidgetComponent),
+        'date': DynamicComponentResolver.fromType(widgets.DateWidgetComponent),
+        'amount': DynamicComponentResolver.fromType(widgets.AmountWidgetComponent),
+        'radio-buttons': DynamicComponentResolver.fromType(widgets.RadioButtonsWidgetComponent),
+        'hyperlink': DynamicComponentResolver.fromType(widgets.HyperlinkWidgetComponent),
+        'readonly-text': DynamicComponentResolver.fromType(widgets.DisplayTextWidgetComponent),
+        'json': DynamicComponentResolver.fromType(widgets.JsonWidgetComponent),
+        'readonly': DynamicComponentResolver.fromType(widgets.TextWidgetComponent),
+        'typeahead': DynamicComponentResolver.fromType(widgets.TypeaheadWidgetComponent),
+        'people': DynamicComponentResolver.fromType(widgets.PeopleWidgetComponent),
+        'functional-group': DynamicComponentResolver.fromType(widgets.FunctionalGroupWidgetComponent),
+        'dynamic-table': DynamicComponentResolver.fromType(widgets.DynamicTableWidgetComponent),
+        'container': DynamicComponentResolver.fromType(widgets.ContainerWidgetComponent),
+        'group': DynamicComponentResolver.fromType(widgets.ContainerWidgetComponent),
+        'document': DynamicComponentResolver.fromType(widgets.DocumentWidgetComponent),
+        'upload':  DynamicComponentResolver.fromType(widgets.UploadWidgetComponent),
+        'datetime':  DynamicComponentResolver.fromType(widgets.DateTimeWidgetComponent)
     };
-
-    constructor() {
-        super();
-    }
 }