[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

demo-shell/src/app/components/datatable/datatable.component.html

@@ -19,8 +19,8 @@
         [multiselect]="multiselect"
         [actions]="true"
         rowStyleClass="custom-row-style"
-        (showRowActionsMenu)="onShowRowActionsMenu($event)" (executeRowAction)="onExecuteRowAction($event)"
-        (row-click)="onRowClick($event)" (row-dblclick)="onRowDblClick($event)">
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)">
         <!-- HTML column definition demo -->
         <!--
         <data-columns>

demo-shell/src/app/components/datatable/datatable.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { LogService, DataColumn, DataRow } from '@alfresco/adf-core';
+import { DataColumn, DataRow } from '@alfresco/adf-core';
 import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core';
 
 export class FilteredDataAdapter extends ObjectDataTableAdapter {
@@ -71,7 +71,7 @@ export class DataTableComponent {
         email: 'admin@alfresco.com'
     };
 
-    constructor(private logService: LogService) {
+    constructor() {
         this.reset();
     }
 
@@ -209,19 +209,9 @@ export class DataTableComponent {
 
     onExecuteRowAction(event: DataRowActionEvent) {
         const args = event.value;
-        this.logService.log(args.row);
-        this.logService.log(args.action);
         window.alert(`My custom action: ${args.action.title}`);
     }
 
-    onRowClick(event) {
-        this.logService.log(event);
-    }
-
-    onRowDblClick(event) {
-        this.logService.log(event);
-    }
-
     toggleStickyHeader() {
         this.stickyHeader = !this.stickyHeader;
     }

docs/core/components/data-column.component.md

@@ -51,7 +51,17 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
 | srTitle | `string` |  | Title to be used for screen readers. |
 | title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
-| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location', and 'json'. |
+| type | `string` | "text" | Value type for the column. |
+
+Supported `type` values:
+
+- text
+- image
+- date
+- icon
+- fileSize
+- location
+- json (v3.4.0+)
 
 ## Details
 

docs/core/dialogs/edit-json.dialog.md

@@ -0,0 +1,32 @@
+---
+Title: Edit JSON Dialog
+Added: v3.5.0
+Status: Active
+Last reviewed: 2019-09-17
+---
+
+# Edit JSON Dialog
+
+Allows a user to preview or edit a JSON content in a dialog.
+
+## Basic usage
+
+```ts
+import { EditJsonDialogSettings, EditJsonDialogComponent } from '@alfresco/adf-core';
+
+const settings: EditJsonDialogSettings = {
+    title: 'Edit Json',
+    editable: true,
+    value: `{ "hello": "world" }`
+};
+
+this.dialog.open(EditJsonDialogComponent, {
+    data: settings,
+    minWidth: '50%',
+    minHeight: '50%'
+})
+.afterClosed()
+.subscribe((value: string) => {
+    // do something with the updated value
+});
+```

e2e/core/datatable/data-table-component.e2e.ts

@@ -180,16 +180,6 @@ describe('Datatable component', () => {
             await expect(await dataTablePage.getClipboardInputText()).toEqual('1');
         });
 
-        it('[C307101] A column value of type json and with copyContent set to true is copied when clicking on it', async () => {
-            const jsonValue = `{   "id": 4 }`;
-            await copyContentDataTablePage.mouseOverJsonColumn(2);
-            await expect(await copyContentDataTablePage.getCopyContentTooltip()).toEqual('Click to copy');
-            await copyContentDataTablePage.clickOnJsonColumn(2);
-            await notificationHistoryPage.checkNotifyContains('Text copied to clipboard');
-            await copyContentDataTablePage.pasteClipboard();
-            await expect(await copyContentDataTablePage.getClipboardInputText()).toContain(jsonValue);
-        });
-
         afterAll(async () => {
             await navigationBarPage.clickHomeButton();
         });

lib/content-services/document-list/components/content-column/content-column.component.ts

@@ -17,10 +17,8 @@
 
  /* tslint:disable:component-selector no-input-rename  */
 
-import { DataColumn } from '@alfresco/adf-core';
-import { LogService } from '@alfresco/adf-core';
+import { DataColumn, DataColumnType, LogService } from '@alfresco/adf-core';
 import { AfterContentInit, Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-
 import { ContentColumnListComponent } from './content-column-list.component';
 
 @Component({
@@ -33,7 +31,7 @@ export class ContentColumnComponent implements OnInit, AfterContentInit, DataCol
     key: string;
 
     @Input()
-    type: string = 'text';
+    type: DataColumnType = 'text';
 
     @Input()
     format: string;

lib/content-services/document-list/data/share-datatable-adapter.spec.ts

@@ -190,7 +190,7 @@ describe('ShareDataTableAdapter', () => {
 
         const col = <DataColumn> {
             key: 'createdAt',
-            type: 'string'
+            type: 'text'
         };
 
         const row = new ShareDataRow(file, contentService, null);
@@ -265,7 +265,7 @@ describe('ShareDataTableAdapter', () => {
         const adapter = new ShareDataTableAdapter(thumbnailService, contentService, null);
 
         const row = new ShareDataRow(new SmartFolderNode(), contentService, null);
-        const col = <DataColumn> { type: 'folder', key: '$thumbnail' };
+        const col = <DataColumn> { type: 'text', key: '$thumbnail' };
 
         const value = adapter.getValue(row, col);
         expect(value).toContain(`assets/images/ft_ic_smart_folder`);
@@ -278,7 +278,7 @@ describe('ShareDataTableAdapter', () => {
         const adapter = new ShareDataTableAdapter(thumbnailService, contentService, null);
 
         const row = new ShareDataRow(new LinkFolderNode(), contentService, null);
-        const col = <DataColumn> { type: 'folder', key: '$thumbnail' };
+        const col = <DataColumn> { type: 'text', key: '$thumbnail' };
 
         const value = adapter.getValue(row, col);
         expect(value).toContain(`assets/images/ft_ic_folder_shortcut_link`);
@@ -291,7 +291,7 @@ describe('ShareDataTableAdapter', () => {
         const adapter = new ShareDataTableAdapter(thumbnailService, contentService, null);
 
         const row = new ShareDataRow(new RuleFolderNode(), contentService, null);
-        const col = <DataColumn> { type: 'folder', key: '$thumbnail' };
+        const col = <DataColumn> { type: 'text', key: '$thumbnail' };
 
         const value = adapter.getValue(row, col);
         expect(value).toContain(`assets/images/ft_ic_folder_rule`);

lib/content-services/document-list/document-list.module.ts

@@ -18,7 +18,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { CoreModule } from '@alfresco/adf-core';
+import { CoreModule, EditJsonDialogModule } from '@alfresco/adf-core';
 
 import { MaterialModule } from '../material.module';
 import { UploadModule } from '../upload/upload.module';
@@ -41,7 +41,8 @@ import { NameColumnComponent } from './components/name-column/name-column.compon
         CommonModule,
         FlexLayoutModule,
         MaterialModule,
-        UploadModule
+        UploadModule,
+        EditJsonDialogModule
     ],
     declarations: [
         DocumentListComponent,

lib/core/data-column/data-column.component.ts

@@ -70,6 +70,9 @@ export class DataColumnComponent implements OnInit {
     @Input()
     copyContent: boolean;
 
+    @Input()
+    editable: boolean = false;
+
     ngOnInit() {
         if (!this.srTitle && this.key === '$thumbnail') {
             this.srTitle = 'Thumbnail';

lib/core/datatable/components/datatable/datatable.component.html

@@ -174,7 +174,7 @@
                             </div>
                             <div *ngSwitchCase="'json'" tabindex="0" class="adf-cell-value">
                                 <adf-json-cell
-                                    [copyContent]="col.copyContent"
+                                    [editable]="col.editable"
                                     [data]="data"
                                     [column]="col"
                                     [row]="row">

lib/core/datatable/components/datatable/json-cell.component.spec.ts

@@ -72,12 +72,10 @@ describe('JsonCellComponent', () => {
         });
     });
 
-    it('should render json object inside cell', () => {
+    it('should render json button inside cell', () => {
         fixture.detectChanges();
-        const spanElement: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable-cell-value');
-        const unFormatedContent: string = spanElement.textContent.replace(/\n/g, '').replace(/\s/g, '');
-        const rowDataStringify: string = JSON.stringify(rowData.entity).replace(/\s/g, '');
-        expect(unFormatedContent).toBe(rowDataStringify);
+        const button: HTMLElement = fixture.debugElement.nativeElement.querySelector('.mat-button');
+        expect(button).toBeDefined();
     });
 
     it('should not setup cell when has no data', () => {

lib/core/datatable/components/datatable/json-cell.component.ts

@@ -17,23 +17,20 @@
 
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
 import { DataTableCellComponent } from './datatable-cell.component';
+import { MatDialog } from '@angular/material';
+import { EditJsonDialogComponent, EditJsonDialogSettings } from '../../../dialogs/edit-json/edit-json.dialog';
+import { AlfrescoApiService } from '../../../services/alfresco-api.service';
 
 @Component({
     selector: 'adf-json-cell',
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <ng-container>
-            <span *ngIf="copyContent; else defaultJsonTemplate" class="adf-datatable-cell-value">
-                <pre
-                    class="adf-datatable-json-cell"
-                    [adf-clipboard]="'CLIPBOARD.CLICK_TO_COPY'"
-                    [clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'">{{ value$ | async | json }}</pre>
-            </span>
+        <ng-container *ngIf="value$ | async as value; else editEmpty">
+            <button mat-button color="primary" (click)="view()">json</button>
         </ng-container>
-        <ng-template #defaultJsonTemplate>
-            <span class="adf-datatable-cell-value">
-                <pre class="adf-datatable-json-cell">{{ value$ | async | json }}</pre>
-            </span>
+
+        <ng-template #editEmpty>
+            <button *ngIf="editable" mat-button color="primary" (click)="view()">json</button>
         </ng-template>
     `,
     styleUrls: ['./json-cell.component.scss'],
@@ -42,13 +39,44 @@ import { DataTableCellComponent } from './datatable-cell.component';
 })
 export class JsonCellComponent extends DataTableCellComponent implements OnInit {
 
-     /** Enables/disables a Clipboard directive to allow copying of the cell's content. */
-     @Input()
-     copyContent: boolean;
+    @Input()
+    editable: boolean = false;
+
+    constructor(
+        private dialog: MatDialog,
+        alfrescoApiService: AlfrescoApiService
+    ) {
+        super(alfrescoApiService);
+    }
 
     ngOnInit() {
         if (this.column && this.column.key && this.row && this.data) {
             this.value$.next(this.data.getValue(this.row, this.column));
         }
     }
+
+    view() {
+        const rawValue: string | object = this.data.getValue(this.row, this.column);
+        const value = typeof rawValue === 'object'
+            ? JSON.stringify(rawValue || {}, null, 2)
+            : rawValue;
+
+        const settings: EditJsonDialogSettings = {
+            title: this.column.title,
+            editable: this.editable,
+            value
+        };
+
+        this.dialog.open(EditJsonDialogComponent, {
+            data: settings,
+            minWidth: '50%',
+            minHeight: '50%'
+        }).afterClosed().subscribe((/*result: string*/) => {
+            if (typeof rawValue === 'object') {
+                // todo: update cell value as object
+            } else {
+                // todo: update cell value as string
+            }
+        });
+    }
 }

lib/core/datatable/data/data-column.model.ts

@@ -17,9 +17,21 @@
 
 import { TemplateRef } from '@angular/core';
 
+export interface DataColumnTypes {
+    text: string;
+    image: string;
+    date: string;
+    json: string;
+    icon: string;
+    fileSize: string;
+    location: string;
+}
+
+export type DataColumnType = keyof DataColumnTypes;
+
 export interface DataColumn {
     key: string;
-    type: string; // text|image|date
+    type: DataColumnType;
     format?: string;
     sortable?: boolean;
     title?: string;
@@ -28,4 +40,5 @@ export interface DataColumn {
     template?: TemplateRef<any>;
     formatTooltip?: Function;
     copyContent?: boolean;
+    editable?: boolean;
 }

lib/core/datatable/data/object-datacolumn.model.ts

@@ -16,13 +16,13 @@
  */
 
 import { TemplateRef } from '@angular/core';
-import { DataColumn } from './data-column.model';
+import { DataColumn, DataColumnType } from './data-column.model';
 
 // Simple implementation of the DataColumn interface.
 export class ObjectDataColumn implements DataColumn {
 
     key: string;
-    type: string; // text|image
+    type: DataColumnType;
     format: string;
     sortable: boolean;
     title: string;

lib/core/dialogs/dialog.module.ts

@@ -19,7 +19,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { MaterialModule } from '../material.module';
-import { DownloadZipDialogComponent } from './download-zip.dialog';
+import { DownloadZipDialogComponent } from './download-zip/download-zip.dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import { PipeModule } from '../pipes/pipe.module';
 

lib/core/dialogs/download-zip/download-zip.dialog.html

@@ -2,9 +2,8 @@
 <div mat-dialog-content>
     <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
 </div>
-<div mat-dialog-actions>
-    <span class="adf-spacer"></span>
+<mat-dialog-actions align="end">
     <button mat-button color="primary" id="cancel-button" (click)="cancelDownload()">
         {{ 'CORE.DIALOG.DOWNLOAD_ZIP.ACTIONS.CANCEL' | translate }}
     </button>
-</div>
+</mat-dialog-actions>

lib/core/dialogs/download-zip/download-zip.dialog.scss

@@ -1,5 +1,3 @@
-.adf-spacer { flex: 1 1 auto; }
-
 .adf-download-zip-dialog .mat-dialog-actions .mat-button-wrapper {
     text-transform: uppercase;
 }

lib/core/dialogs/download-zip/download-zip.dialog.spec.ts

@@ -19,9 +19,9 @@ import { TestBed } from '@angular/core/testing';
 import { ComponentFixture } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { DownloadZipDialogComponent } from './download-zip.dialog';
-import { setupTestBed } from '../testing/setupTestBed';
-import { CoreTestingModule } from '../testing/core.testing.module';
-import { DownloadZipService } from '../services/download-zip.service';
+import { setupTestBed } from '../../testing/setupTestBed';
+import { CoreTestingModule } from '../../testing/core.testing.module';
+import { DownloadZipService } from '../../services/download-zip.service';
 import { Observable } from 'rxjs/index';
 
 describe('DownloadZipDialogComponent', () => {

lib/core/dialogs/download-zip/download-zip.dialog.ts

@@ -18,8 +18,8 @@
 import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { DownloadEntry, NodeEntry } from '@alfresco/js-api';
-import { LogService } from '../services/log.service';
-import { DownloadZipService } from '../services/download-zip.service';
+import { LogService } from '../../services/log.service';
+import { DownloadZipService } from '../../services/download-zip.service';
 
 @Component({
     selector: 'adf-download-zip-dialog',

lib/core/dialogs/edit-json/edit-json.dialog.html

@@ -0,0 +1,13 @@
+<h1 mat-dialog-title>{{ title | translate }}</h1>
+<mat-dialog-content>
+    <textarea [(ngModel)]="value" [attr.readonly]="!editable"></textarea>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close cdkFocusInitial>
+        {{ 'CORE.DIALOG.EDIT_JSON.CLOSE' | translate }}
+    </button>
+    <button *ngIf="editable" mat-button [mat-dialog-close]="value">
+        {{ 'CORE.DIALOG.EDIT_JSON.UPDATE' | translate }}
+    </button>
+</mat-dialog-actions>

lib/core/dialogs/edit-json/edit-json.dialog.module.ts

@@ -0,0 +1,45 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { EditJsonDialogComponent } from './edit-json.dialog';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule.forChild(),
+        MatDialogModule,
+        MatButtonModule
+    ],
+    declarations: [
+        EditJsonDialogComponent
+    ],
+    exports: [
+        EditJsonDialogComponent
+    ],
+    entryComponents: [
+        EditJsonDialogComponent
+    ]
+})
+export class EditJsonDialogModule {}

lib/core/dialogs/edit-json/edit-json.dialog.scss

@@ -0,0 +1,19 @@
+.adf-edit-json-dialog {
+    .mat-dialog-content {
+        height: 300px;
+        overflow: hidden;
+    }
+    textarea {
+        &:focus {
+            outline: none;
+        }
+        resize: none;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;         /* For IE and modern versions of Chrome */
+        -moz-box-sizing: border-box;    /* For Firefox                          */
+        -webkit-box-sizing: border-box; /* For Safari                           */
+    }
+}

lib/core/dialogs/edit-json/edit-json.dialog.ts

@@ -0,0 +1,52 @@
+/*!
+ * @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, Inject, OnInit, Input, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface EditJsonDialogSettings {
+    title?: string;
+    editable?: boolean;
+    value?: string;
+}
+
+@Component({
+    templateUrl: 'edit-json.dialog.html',
+    styleUrls: ['edit-json.dialog.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-edit-json-dialog' }
+})
+export class EditJsonDialogComponent implements OnInit {
+
+    editable: boolean = false;
+    title: string = 'JSON';
+
+    @Input()
+    value: string = '';
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) private settings: EditJsonDialogSettings
+    ) {}
+
+    ngOnInit() {
+        if (this.settings) {
+            this.editable = this.settings.editable ? true : false;
+            this.value = this.settings.value || '';
+            this.title = this.settings.title || 'JSON';
+        }
+    }
+}

lib/core/dialogs/public-api.ts

@@ -15,6 +15,9 @@
  * limitations under the License.
  */
 
-export * from './download-zip.dialog';
+export * from './download-zip/download-zip.dialog';
+
+export * from './edit-json/edit-json.dialog';
+export * from './edit-json/edit-json.dialog.module';
 
 export * from './dialog.module';

lib/core/directives/node-download.directive.ts

@@ -18,7 +18,7 @@
 import { Directive, Input, HostListener } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { AlfrescoApiService } from '../services/alfresco-api.service';
-import { DownloadZipDialogComponent } from '../dialogs/download-zip.dialog';
+import { DownloadZipDialogComponent } from '../dialogs/download-zip/download-zip.dialog';
 import { NodeEntry } from '@alfresco/js-api';
 
 /**

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();
-    }
 }

lib/core/i18n/en.json

@@ -72,6 +72,10 @@
           "CANCEL": "Cancel"
         },
         "TITLE": "Adding files to zip, this could take a few minutes"
+      },
+      "EDIT_JSON": {
+        "CLOSE": "Close",
+        "UPDATE": "Update"
       }
     },
     "FILE_DIALOG": {