[ADF-2456] Fixed property table formatting (#3051)

docs/document-list.component.md

@@ -2,6 +2,7 @@
 Added: v2.0.0
 Status: Active
 ---
+
 # Document List component
 
 Displays the documents from a repository.
@@ -51,20 +52,22 @@ Displays the documents from a repository.
 ```
 
 ### Properties
-    
+
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
+| display | `string` | `DisplayMode.List` | Change the display mode of the table. Can be "list" or "gallery".  |
 | permissionsStyle | `PermissionStyleModel[]` | `[]` | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the Permission Style model page for further details and examples. |
 | locationFormat | `string` | `'/'` | The default route for all the location-based columns (if declared).  |
 | navigate | `boolean` | `true` | Toggles navigation to folder content or file preview  |
-| navigationMode | `string` | `DocumentListComponent.DOUBLE_CLICK_NAVIGATION` | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick".  |
+| showHeader | `boolean` | `true` | Toggles the header  |
+| navigationMode | `string` | See description | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". Default value: "dblclick" |
 | thumbnails | `boolean` | `false` | Show document thumbnails rather than icons  |
 | selectionMode | `string` | `'single'` | Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
 | multiselect | `boolean` | `false` | Toggles multiselect mode  |
 | contentActions | `boolean` | `false` | Toggles content actions for each row  |
 | contentActionsPosition | `string` | `'right'` | Position of the content actions dropdown menu. Can be set to "left" or "right".  |
 | contextMenuActions | `boolean` | `false` | Toggles context menus for each row  |
-| emptyFolderImageUrl | `string` | `'./assets/images/empty_doc_lib.svg'` | Custom image for empty folder  |
+| emptyFolderImageUrl | `string` | See description | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg'  |
 | allowDropFiles | `boolean` | `false` | Toggle file drop support for rows (see Upload Directive for further details  |
 | sorting | `string[]` |  | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override the default sorting detected by the component based on columns. |
 | rowStyle | `string` |  | The inline style to apply to every row. See the Angular NgStyle docs for more details and usage examples. |
@@ -78,19 +81,17 @@ Displays the documents from a repository.
 | maxItems | `number` |  | Default value is stored into user preference settings  |
 | skipCount | `number` | `0` | Number of elements to skip over for pagination purposes  |
 | enableInfiniteScrolling | `boolean` | `false` | Set document list to work in infinite scrolling mode  |
-| showHeader | `boolean` | `true` |  Toggles header visibility   |
-| display | string | 'list' | change the display mode can be one of the values provided by the enum : **list**, **gallery** |
 
 ### Events
 
 | Name | Type | Description |
 | ---- | ---- | ----------- |
-| nodeClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user clicks a list node |
+| nodeClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user clicks a list node  |
-| nodeDblClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user double-clicks a list node |
+| nodeDblClick | `EventEmitter<NodeEntityEvent>` | Emitted when the user double-clicks a list node  |
-| folderChange | `EventEmitter<NodeEntryEvent>` | Emitted when the current display folder changes |
+| folderChange | `EventEmitter<NodeEntryEvent>` | Emitted when the current display folder changes  |
 | preview | `EventEmitter<NodeEntityEvent>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the Viewer component. |
-| ready | `EventEmitter<NodePaging>` | Emitted when the Document List has loaded all items and is ready for use |
+| ready | `EventEmitter<NodePaging>` | Emitted when the Document List has loaded all items and is ready for use  |
-| error | `EventEmitter<any>` | Emitted when the API fails to get the Document List data |
+| error | `EventEmitter<any>` | Emitted when the API fails to get the Document List data  |
 
 ## Details
 
@@ -147,7 +148,6 @@ If you want to enable the card view mode you need to set to 'gallery' the input
 
 ![card-view](docassets/images/document-list-card-view.png)
 
-
 ### Pagination strategy
 
 The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination. 

lib/config/DocProcessor/docProcessor.js

@@ -51,7 +51,7 @@ function updatePhase(srcFolder, destFolder, filenames, aggData) {
         var pathname = path.resolve(srcFolder, filenames[i]);
         
         var src = fs.readFileSync(pathname);
-        var tree = remark().parse(src)
+        var tree = remark().use(frontMatter, ["yaml"]).parse(src)
 
         var modified = false;
 
@@ -60,7 +60,7 @@ function updatePhase(srcFolder, destFolder, filenames, aggData) {
         });
         
         if (modified)
-            fs.writeFileSync(path.resolve(destFolder, filenames[i]), remark().data("settings", {paddedTable: false}).stringify(tree));
+            fs.writeFileSync(path.resolve(destFolder, filenames[i]), remark().use(frontMatter, {type: 'yaml', fence: '---'}).data("settings", {paddedTable: false}).stringify(tree));
             //console.log(JSON.stringify(tree));
     }
 }

lib/config/DocProcessor/tools/tscProps.js

@@ -6,6 +6,8 @@ var heading = require("mdast-util-heading-range");
 var remark = require("remark");
 var unist = require("../unistHelpers");
 var typescript_1 = require("typescript");
+// Max number of characters in the text for the default value column.
+var maxDefaultTextLength = 20;
 function initPhase(aggData) {
 }
 exports.initPhase = initPhase;
@@ -284,15 +286,20 @@ function buildPropsTable(props, includeInitializer) {
     for (var i = 0; i < props.length; i++) {
         var pName = props[i].name;
         var pType = props[i].type;
-        var pDefault = props[i].initializer || "";
         var pDesc = props[i].docText || "";
         if (pDesc) {
             pDesc = pDesc.replace(/[\n\r]+/, " ");
         }
         var descCellContent = remark().parse(pDesc).children;
+        var pDefault = props[i].initializer || "";
         var defaultCellContent;
         if (pDefault) {
-            defaultCellContent = unist.makeInlineCode(pDefault);
+            if (pDefault.length > maxDefaultTextLength) {
+                defaultCellContent = unist.makeText("See description");
+                console.log("Warning: property \"" + pName + "\" default value substituted (> " + maxDefaultTextLength + " chars)");
+            }
+            else
+                defaultCellContent = unist.makeInlineCode(pDefault);
         }
         else {
             defaultCellContent = unist.makeText("");

lib/config/DocProcessor/tools/tscProps.ts

@@ -1,7 +1,6 @@
 import * as ts from "typescript";
 import * as fs from "fs";
 import * as path from "path";
-import * as program from "commander";
 
 import * as heading from "mdast-util-heading-range";
 import * as remark from "remark";
@@ -9,6 +8,10 @@ import * as remark from "remark";
 import * as unist from "../unistHelpers";
 import { JsxEmit, isClassDeclaration, PropertyDeclaration } from "typescript";
 
+
+// Max number of characters in the text for the default value column.
+const maxDefaultTextLength = 20;
+
 export function initPhase(aggData) {
 }
 
@@ -397,7 +400,6 @@ function buildPropsTable(props: PropData[], includeInitializer: boolean = true)
     for (var i = 0; i < props.length; i++) {
         var pName = props[i].name;
         var pType = props[i].type;
-        var pDefault = props[i].initializer || "";
         var pDesc = props[i].docText || "";
 
         if (pDesc) {
@@ -406,10 +408,16 @@ function buildPropsTable(props: PropData[], includeInitializer: boolean = true)
 
         var descCellContent = remark().parse(pDesc).children;
 
+        var pDefault = props[i].initializer || "";
+
         var defaultCellContent;
 
         if (pDefault) {
-            defaultCellContent = unist.makeInlineCode(pDefault);
+            if (pDefault.length > maxDefaultTextLength) {
+                defaultCellContent = unist.makeText("See description");
+                console.log(`Warning: property "${pName}" default value substituted (> ${maxDefaultTextLength} chars)`);
+            } else
+                defaultCellContent = unist.makeInlineCode(pDefault);
         } else {
             defaultCellContent = unist.makeText("");
         }

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

@@ -73,7 +73,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
-    /* change the display mode of the table list or gallery */
+    /** Change the display mode of the table. Can be "list" or "gallery". */
     @Input()
     display: string = DisplayMode.List;
 
@@ -96,7 +96,9 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     @Input()
     showHeader: boolean = true;
 
-    /** User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */
+    /** User interaction for folder navigation or file preview.
+     * Valid values are "click" and "dblclick". Default value: "dblclick"
+     */
     @Input()
     navigationMode: string = DocumentListComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick
 
@@ -126,7 +128,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     @Input()
     contextMenuActions: boolean = false;
 
-    /** Custom image for empty folder */
+    /** Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' */
     @Input()
     emptyFolderImageUrl: string = './assets/images/empty_doc_lib.svg';