[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%'
+            });
+    }
+}