[ACA-805] about screen improvements (#818)

* split into smaller components

* status list

* module list

* license info

* i18n support for all tables

.circleci/config.yml

@@ -1,62 +0,0 @@
-version: 2
-
-jobs:
-  test:
-    working_directory: ~/alfresco-content-app
-    docker:
-      - image: circleci/node:8-browsers
-    steps:
-      - checkout
-      - restore_cache:
-          key: alfresco-content-app-{{ .Branch }}-{{ checksum "package.json" }}
-      - run: npm install
-      - save_cache:
-          key: alfresco-content-app-{{ .Branch }}-{{ checksum "package.json" }}
-          paths:
-            - "node_modules"
-      - run: xvfb-run -a npm run test:ci
-  lint:
-    working_directory: ~/alfresco-content-app
-    docker:
-      - image: circleci/node:8-browsers
-    steps:
-      - checkout
-      - restore_cache:
-          key: alfresco-content-app-{{ .Branch }}-{{ checksum "package.json" }}
-      - run: npm install
-      - run: npm run lint
-  spellcheck:
-    working_directory: ~/alfresco-content-app
-    docker:
-      - image: circleci/node:8-browsers
-    steps:
-      - checkout
-      - restore_cache:
-          key: alfresco-content-app-{{ .Branch }}-{{ checksum "package.json" }}
-      - run: npm install
-      - run: npm run spellcheck
-  build:
-    working_directory: ~/alfresco-content-app
-    docker:
-      - image: circleci/node:8-browsers
-    steps:
-      - checkout
-      - restore_cache:
-          key: alfresco-content-app-{{ .Branch }}-{{ checksum "package.json" }}
-      - run: npm install
-      - run: npm run build
-
-workflows:
-  version: 2
-  build_and_test:
-    jobs:
-      - test
-      - lint:
-          requires:
-            - test
-      - spellcheck:
-          requires:
-            - test
-      - build:
-          requires:
-            - test

src/app/components/about/about.component.html

@@ -8,118 +8,37 @@
 
       <article>
         <header>{{ 'APP.ABOUT.PLUGINS.TITLE' | translate }}</header>
-        <div>
+        <app-extension-list [data]="extensions$ | async"></app-extension-list>
-          <mat-table [dataSource]="extensions$ | async">
-            <ng-container matColumnDef="$id">
-              <mat-header-cell *matHeaderCellDef
-                >{{ 'APP.ABOUT.PLUGINS.ID' | translate }}
-              </mat-header-cell>
-              <mat-cell *matCellDef="let element">{{ element.$id }}</mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="$name">
-              <mat-header-cell *matHeaderCellDef>{{
-                'APP.ABOUT.PLUGINS.NAME' | translate
-              }}</mat-header-cell>
-              <mat-cell *matCellDef="let element">{{ element.$name }}</mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="$version">
-              <mat-header-cell *matHeaderCellDef>{{
-                'APP.ABOUT.PLUGINS.VERSION' | translate
-              }}</mat-header-cell>
-              <mat-cell *matCellDef="let element">{{
-                element.$version
-              }}</mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="$vendor">
-              <mat-header-cell *matHeaderCellDef>{{
-                'APP.ABOUT.PLUGINS.VENDOR' | translate
-              }}</mat-header-cell>
-              <mat-cell *matCellDef="let element">{{
-                element.$vendor
-              }}</mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="$license">
-              <mat-header-cell *matHeaderCellDef>{{
-                'APP.ABOUT.PLUGINS.LICENSE' | translate
-              }}</mat-header-cell>
-              <mat-cell *matCellDef="let element">{{
-                element.$license
-              }}</mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="$runtime">
-              <mat-header-cell *matHeaderCellDef>{{
-                'APP.ABOUT.PLUGINS.RUNTIME' | translate
-              }}</mat-header-cell>
-              <mat-cell *matCellDef="let element">{{
-                element.$runtime
-              }}</mat-cell>
-            </ng-container>
-
-            <ng-container matColumnDef="$description">
-              <mat-header-cell *matHeaderCellDef>{{
-                'APP.ABOUT.PLUGINS.DESCRIPTION' | translate
-              }}</mat-header-cell>
-              <mat-cell *matCellDef="let element">{{
-                element.$description
-              }}</mat-cell>
-            </ng-container>
-
-            <mat-header-row
-              *matHeaderRowDef="extensionColumns"
-            ></mat-header-row>
-            <mat-row *matRowDef="let row; columns: extensionColumns"></mat-row>
-          </mat-table>
-        </div>
       </article>
 
-      <article *ngIf="repository">
+      <ng-container *ngIf="repository">
-        <header>Alfresco Content Services</header>
+        <article>
-        <p>
+          <header>Alfresco Content Services</header>
-          {{ 'APP.ABOUT.VERSION' | translate }} {{ repository.edition }}
+          <p>
-          {{ repository.version.display }}
+            {{ 'APP.ABOUT.VERSION' | translate }} {{ repository.edition }}
-        </p>
+            {{ repository.version.display }}
-      </article>
+          </p>
+        </article>
 
-      <article *ngIf="license">
+        <article *ngIf="licenseEntries">
-        <header>{{ 'APP.ABOUT.LICENSE.TITLE' | translate }}</header>
+          <header>{{ 'APP.ABOUT.LICENSE.TITLE' | translate }}</header>
-        <adf-datatable [data]="license"></adf-datatable>
+          <app-license-list [data]="licenseEntries"></app-license-list>
-      </article>
+        </article>
 
-      <article>
+        <article *ngIf="statusEntries">
-        <header>{{ 'APP.ABOUT.STATUS.TITLE' | translate }}</header>
+          <header>{{ 'APP.ABOUT.STATUS.TITLE' | translate }}</header>
-        <adf-datatable [data]="status"></adf-datatable>
+          <app-status-list [data]="statusEntries"></app-status-list>
-      </article>
+        </article>
 
-      <article>
+        <article *ngIf="repository?.modules">
-        <header>{{ 'APP.ABOUT.MODULES.TITLE' | translate }}</header>
+          <header>{{ 'APP.ABOUT.MODULES.TITLE' | translate }}</header>
-        <adf-datatable [data]="modules"></adf-datatable>
+          <app-module-list [data]="repository.modules"></app-module-list>
-      </article>
+        </article>
+      </ng-container>
 
-      <article>
+      <article *ngIf="dependencyEntries">
         <header>{{ 'APP.ABOUT.PACKAGES.TITLE' | translate }}</header>
-        <mat-table [dataSource]="dependencyEntries">
+        <app-package-list [data]="dependencyEntries"></app-package-list>
-          <ng-container matColumnDef="name">
-            <mat-header-cell *matHeaderCellDef>{{
-              'APP.ABOUT.PACKAGES.NAME' | translate
-            }}</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
-          </ng-container>
-
-          <ng-container matColumnDef="version">
-            <mat-header-cell *matHeaderCellDef>{{
-              'APP.ABOUT.PACKAGES.VERSION' | translate
-            }}</mat-header-cell>
-            <mat-cell *matCellDef="let element">{{ element.version }}</mat-cell>
-          </ng-container>
-
-          <mat-header-row *matHeaderRowDef="dependencyColumns"></mat-header-row>
-          <mat-row *matRowDef="let row; columns: dependencyColumns"></mat-row>
-        </mat-table>
       </article>
     </div>
   </app-page-layout-content>

src/app/components/about/about.component.ts

@@ -23,7 +23,6 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ObjectDataTableAdapter } from '@alfresco/adf-core';
 import { ExtensionRef } from '@alfresco/adf-extensions';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { RepositoryInfo } from 'alfresco-js-api';
@@ -40,24 +39,11 @@ import { version, dependencies } from '../../../../package.json';
 })
 export class AboutComponent implements OnInit {
   repository: RepositoryInfo;
-  status: ObjectDataTableAdapter;
-  license: ObjectDataTableAdapter;
-  modules: ObjectDataTableAdapter;
   releaseVersion = version;
-
-  extensionColumns: string[] = [
-    '$id',
-    '$name',
-    '$version',
-    '$vendor',
-    '$license',
-    '$runtime',
-    '$description'
-  ];
   extensions$: Observable<ExtensionRef[]>;
-
+  dependencyEntries: Array<{ name: string; version: string }>;
-  dependencyColumns: string[] = ['name', 'version'];
+  statusEntries: Array<{ property: string; value: string }>;
-  dependencyEntries: Array<{ name: string; version: string }> = [];
+  licenseEntries: Array<{ property: string; value: string }>;
 
   constructor(
     private contentApi: ContentApiService,
@@ -80,109 +66,20 @@ export class AboutComponent implements OnInit {
       .subscribe(repository => {
         this.repository = repository;
 
-        this.modules = new ObjectDataTableAdapter(repository.modules, [
+        this.statusEntries = Object.keys(repository.status).map(key => {
-          { type: 'text', key: 'id', title: 'ID', sortable: true },
+          return {
-          { type: 'text', key: 'title', title: 'Title', sortable: true },
+            property: key,
-          {
+            value: repository.status[key]
-            type: 'text',
+          };
-            key: 'version',
+        });
-            title: 'Description',
-            sortable: true
-          },
-          {
-            type: 'date',
-            key: 'installDate',
-            title: 'Install Date',
-            sortable: true
-          },
-          {
-            type: 'text',
-            key: 'installState',
-            title: 'Install State',
-            sortable: true
-          },
-          {
-            type: 'text',
-            key: 'versionMin',
-            title: 'Version Minor',
-            sortable: true
-          },
-          {
-            type: 'text',
-            key: 'versionMax',
-            title: 'Version Max',
-            sortable: true
-          }
-        ]);
-
-        this.status = new ObjectDataTableAdapter(
-          [repository.status],
-          [
-            {
-              type: 'text',
-              key: 'isReadOnly',
-              title: 'Read Only',
-              sortable: true
-            },
-            {
-              type: 'text',
-              key: 'isAuditEnabled',
-              title: 'Audit Enable',
-              sortable: true
-            },
-            {
-              type: 'text',
-              key: 'isQuickShareEnabled',
-              title: 'Quick Shared Enable',
-              sortable: true
-            },
-            {
-              type: 'text',
-              key: 'isThumbnailGenerationEnabled',
-              title: 'Thumbnail Generation',
-              sortable: true
-            }
-          ]
-        );
 
         if (repository.license) {
-          this.license = new ObjectDataTableAdapter(
+          this.licenseEntries = Object.keys(repository.license).map(key => {
-            [repository.license],
+            return {
-            [
+              property: key,
-              {
+              value: repository.license[key]
-                type: 'date',
+            };
-                key: 'issuedAt',
+          });
-                title: 'Issued At',
-                sortable: true
-              },
-              {
-                type: 'date',
-                key: 'expiresAt',
-                title: 'Expires At',
-                sortable: true
-              },
-              {
-                type: 'text',
-                key: 'remainingDays',
-                title: 'Remaining Days',
-                sortable: true
-              },
-              { type: 'text', key: 'holder', title: 'Holder', sortable: true },
-              { type: 'text', key: 'mode', title: 'Type', sortable: true },
-              {
-                type: 'text',
-                key: 'isClusterEnabled',
-                title: 'Cluster Enabled',
-                sortable: true
-              },
-              {
-                type: 'text',
-                key: 'isCryptodocEnabled',
-                title: 'Cryptodoc Enable',
-                sortable: true
-              }
-            ]
-          );
         }
       });
   }

src/app/components/about/about.module.ts

@@ -30,6 +30,11 @@ import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
 import { AppLayoutModule } from '../layout/layout.module';
 import { MatTableModule } from '@angular/material';
+import { PackageListComponent } from './package-list/package-list.component';
+import { ExtensionListComponent } from './extension-list/extension-list.component';
+import { StatusListComponent } from './status-list/status-list.component';
+import { ModuleListComponent } from './module-list/module-list.component';
+import { LicenseListComponent } from './license-list/license-list.component';
 
 const routes: Routes = [
   {
@@ -49,6 +54,13 @@ const routes: Routes = [
     AppLayoutModule,
     MatTableModule
   ],
-  declarations: [AboutComponent]
+  declarations: [
+    AboutComponent,
+    PackageListComponent,
+    ExtensionListComponent,
+    StatusListComponent,
+    ModuleListComponent,
+    LicenseListComponent
+  ]
 })
 export class AboutModule {}

src/app/components/about/extension-list/extension-list.component.html

@@ -0,0 +1,14 @@
+<mat-table [dataSource]="data">
+  <ng-container
+    *ngFor="let column of columns"
+    [matColumnDef]="column.columnDef"
+  >
+    <mat-header-cell *matHeaderCellDef>
+      {{ column.header | translate }}
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

src/app/components/about/extension-list/extension-list.component.ts

@@ -0,0 +1,78 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  Input
+} from '@angular/core';
+import { ExtensionRef } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'app-extension-list',
+  templateUrl: './extension-list.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ExtensionListComponent {
+  columns = [
+    {
+      columnDef: 'id',
+      header: 'APP.ABOUT.PLUGINS.ID',
+      cell: (row: ExtensionRef) => `${row.$id}`
+    },
+    {
+      columnDef: 'name',
+      header: 'APP.ABOUT.PLUGINS.NAME',
+      cell: (row: ExtensionRef) => `${row.$name}`
+    },
+    {
+      columnDef: 'version',
+      header: 'APP.ABOUT.PLUGINS.VERSION',
+      cell: (row: ExtensionRef) => `${row.$version}`
+    },
+    {
+      columnDef: 'vendor',
+      header: 'APP.ABOUT.PLUGINS.VENDOR',
+      cell: (row: ExtensionRef) => `${row.$vendor}`
+    },
+    {
+      columnDef: 'license',
+      header: 'APP.ABOUT.PLUGINS.LICENSE',
+      cell: (row: ExtensionRef) => `${row.$license}`
+    },
+    {
+      columnDef: 'runtime',
+      header: 'APP.ABOUT.PLUGINS.RUNTIME',
+      cell: (row: ExtensionRef) => `${row.$runtime}`
+    }
+  ];
+
+  displayedColumns = this.columns.map(x => x.columnDef);
+
+  @Input()
+  data: Array<ExtensionRef> = [];
+}

src/app/components/about/license-list/license-list.component.html

@@ -0,0 +1,14 @@
+<mat-table [dataSource]="data">
+  <ng-container
+    *ngFor="let column of columns"
+    [matColumnDef]="column.columnDef"
+  >
+    <mat-header-cell *matHeaderCellDef>
+      {{ column.header | translate }}
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

src/app/components/about/license-list/license-list.component.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export interface LicenseData {
+  property: string;
+  value: string;
+}
+
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  Input
+} from '@angular/core';
+
+@Component({
+  selector: 'app-license-list',
+  templateUrl: './license-list.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LicenseListComponent {
+  columns = [
+    {
+      columnDef: 'property',
+      header: 'APP.ABOUT.LICENSE.PROPERTY',
+      cell: (row: LicenseData) => `${row.property}`
+    },
+    {
+      columnDef: 'value',
+      header: 'APP.ABOUT.LICENSE.VALUE',
+      cell: (row: LicenseData) => `${row.value}`
+    }
+  ];
+
+  displayedColumns = this.columns.map(x => x.columnDef);
+
+  @Input()
+  data: Array<LicenseData> = [];
+}

src/app/components/about/module-list/module-list.component.html

@@ -0,0 +1,14 @@
+<mat-table [dataSource]="data">
+  <ng-container
+    *ngFor="let column of columns"
+    [matColumnDef]="column.columnDef"
+  >
+    <mat-header-cell *matHeaderCellDef>
+      {{ column.header | translate }}
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

src/app/components/about/module-list/module-list.component.ts

@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  Input
+} from '@angular/core';
+import { ModuleInfo } from 'alfresco-js-api';
+
+@Component({
+  selector: 'app-module-list',
+  templateUrl: './module-list.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ModuleListComponent {
+  columns = [
+    {
+      columnDef: 'id',
+      header: 'APP.ABOUT.MODULES.ID',
+      cell: (row: ModuleInfo) => `${row.id}`
+    },
+    {
+      columnDef: 'title',
+      header: 'APP.ABOUT.MODULES.NAME',
+      cell: (row: ModuleInfo) => `${row.title}`
+    },
+    {
+      columnDef: 'version',
+      header: 'APP.ABOUT.MODULES.VERSION',
+      cell: (row: ModuleInfo) => `${row.version}`
+    }
+  ];
+
+  displayedColumns = this.columns.map(x => x.columnDef);
+
+  @Input()
+  data: Array<ModuleInfo> = [];
+}

src/app/components/about/package-list/package-list.component.html

@@ -0,0 +1,14 @@
+<mat-table [dataSource]="data">
+  <ng-container
+    *ngFor="let column of columns"
+    [matColumnDef]="column.columnDef"
+  >
+    <mat-header-cell *matHeaderCellDef>
+      {{ column.header | translate }}
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

src/app/components/about/package-list/package-list.component.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  Input
+} from '@angular/core';
+
+export interface PackageInfo {
+  name: string;
+  version: string;
+}
+
+@Component({
+  selector: 'app-package-list',
+  templateUrl: './package-list.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PackageListComponent {
+  columns = [
+    {
+      columnDef: 'title',
+      header: 'APP.ABOUT.PACKAGES.NAME',
+      cell: (row: PackageInfo) => `${row.name}`
+    },
+    {
+      columnDef: 'version',
+      header: 'APP.ABOUT.PACKAGES.VERSION',
+      cell: (row: PackageInfo) => `${row.version}`
+    }
+  ];
+
+  displayedColumns = this.columns.map(x => x.columnDef);
+
+  @Input()
+  data: Array<PackageInfo> = [];
+}

src/app/components/about/status-list/status-list.component.html

@@ -0,0 +1,14 @@
+<mat-table [dataSource]="data">
+  <ng-container
+    *ngFor="let column of columns"
+    [matColumnDef]="column.columnDef"
+  >
+    <mat-header-cell *matHeaderCellDef>
+      {{ column.header | translate }}
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

src/app/components/about/status-list/status-list.component.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  Input
+} from '@angular/core';
+
+export interface StatusData {
+  property: string;
+  value: string;
+}
+
+@Component({
+  selector: 'app-status-list',
+  templateUrl: './status-list.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StatusListComponent {
+  columns = [
+    {
+      columnDef: 'property',
+      header: 'APP.ABOUT.STATUS.PROPERTY',
+      cell: (row: StatusData) => `${row.property}`
+    },
+    {
+      columnDef: 'value',
+      header: 'APP.ABOUT.STATUS.VALUE',
+      cell: (row: StatusData) => `${row.value}`
+    }
+  ];
+
+  displayedColumns = this.columns.map(x => x.columnDef);
+
+  @Input()
+  data: Array<StatusData> = [];
+}

src/assets/i18n/en.json

@@ -13,13 +13,20 @@
           "DESCRIPTION": "Description"
         },
         "LICENSE": {
-          "TITLE": "License"
+          "TITLE": "License",
+          "PROPERTY": "Property",
+          "VALUE": "Value"
         },
         "STATUS": {
-          "TITLE": "Status"
+          "TITLE": "Status",
+          "PROPERTY": "Property",
+          "VALUE": "Value"
         },
         "MODULES": {
-          "TITLE": "Modules"
+          "TITLE": "Modules",
+          "ID": "ID",
+          "NAME": "Name",
+          "VERSION": "Version"
         },
         "PACKAGES": {
           "TITLE": "Packages",