[MNT-21386] about extension (#1674)

* separate project for about extension * move components to the about project * remove about from the app * update travis * fix lint
2025-07-24 17:31:52 +00:00 · 2020-09-16 08:48:17 +01:00
parent e3cbddb465
commit 6612a702c0
34 changed files with 344 additions and 76 deletions
--- a/projects/aca-about/README.md
+++ b/projects/aca-about/README.md
@@ -0,0 +1,24 @@
+# AcaAbout
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.14.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project aca-about` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project aca-about`.
+> Note: Don't forget to add `--project aca-about` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build aca-about` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build aca-about`, go to the dist folder `cd dist/aca-about` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test aca-about` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/projects/aca-about/karma.conf.js
+++ b/projects/aca-about/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/aca-about'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/projects/aca-about/ng-package.json
+++ b/projects/aca-about/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/aca-about",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
--- a/projects/aca-about/package.json
+++ b/projects/aca-about/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@alfresco/aca-about",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^10.0.14",
+    "@angular/core": "^10.0.14"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}
--- a/projects/aca-about/src/lib/about.component.html
+++ b/projects/aca-about/src/lib/about.component.html
@@ -0,0 +1,51 @@
+<aca-page-layout>
+  <aca-page-layout-content [scrollable]="true">
+    <div class="main-content">
+      <article>
+        <adf-about-github-link [application]="'application.name' | adfAppConfig" [url]="appRepoUrl" [version]="'application.version' | adfAppConfig">
+        </adf-about-github-link>
+      </article>
+
+      <article>
+        <adf-about-github-link [application]="'ADF'" [url]="adfRepoUrl" [version]="adfVersion"> </adf-about-github-link>
+      </article>
+
+      <ng-container *ngIf="extensions$ | async as extensions">
+        <article *ngIf="extensions.length > 0">
+          <header>{{ 'APP.ABOUT.PLUGINS.TITLE' | translate }}</header>
+          <app-extension-list [data]="extensions"></app-extension-list>
+        </article>
+      </ng-container>
+
+      <ng-container *ngIf="repository">
+        <article>
+          <header>Alfresco Content Services</header>
+          <p>
+            {{ 'APP.ABOUT.VERSION' | translate }} {{ repository.edition }}
+            {{ repository.version.display }}
+          </p>
+        </article>
+
+        <article *ngIf="licenseEntries">
+          <header>{{ 'APP.ABOUT.LICENSE.TITLE' | translate }}</header>
+          <app-license-list [data]="licenseEntries"></app-license-list>
+        </article>
+
+        <article *ngIf="statusEntries">
+          <header>{{ 'APP.ABOUT.STATUS.TITLE' | translate }}</header>
+          <app-status-list [data]="statusEntries"></app-status-list>
+        </article>
+
+        <article *ngIf="repository?.modules">
+          <header>{{ 'APP.ABOUT.MODULES.TITLE' | translate }}</header>
+          <app-module-list [data]="repository.modules"></app-module-list>
+        </article>
+      </ng-container>
+
+      <article *ngIf="dependencyEntries">
+        <header>{{ 'APP.ABOUT.PACKAGES.TITLE' | translate }}</header>
+        <app-package-list [data]="dependencyEntries"></app-package-list>
+      </article>
+    </div>
+  </aca-page-layout-content>
+</aca-page-layout>
--- a/projects/aca-about/src/lib/about.component.scss
+++ b/projects/aca-about/src/lib/about.component.scss
@@ -0,0 +1,25 @@
+.app-about {
+  .main-content {
+    padding: 10px;
+
+    article {
+      color: var(--theme-text-color);
+      padding: 25px 0 25px 0;
+
+      & > header {
+        line-height: 24px;
+        font-size: 14px;
+        font-weight: 800;
+        letter-spacing: -0.2px;
+      }
+    }
+
+    article:first-of-type {
+      padding-bottom: 0;
+    }
+
+    article:last-of-type {
+      margin-bottom: 50px;
+    }
+  }
+}
--- a/projects/aca-about/src/lib/about.component.spec.ts
+++ b/projects/aca-about/src/lib/about.component.spec.ts
@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  it('should be defined', () => {
+    expect(AboutComponent).toBeDefined();
+  });
+});
--- a/projects/aca-about/src/lib/about.component.ts
+++ b/projects/aca-about/src/lib/about.component.ts
@@ -0,0 +1,91 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { ExtensionRef } from '@alfresco/adf-extensions';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { RepositoryInfo } from '@alfresco/js-api';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { AppExtensionService, ContentApiService } from '@alfresco/aca-shared';
+import { dependencies, version, name, commit } from '../../../../package.json';
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['about.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-about' }
+})
+export class AboutComponent implements OnInit {
+  repository: RepositoryInfo;
+  extensions$: Observable<ExtensionRef[]>;
+  dependencyEntries: Array<{ name: string; version: string }>;
+  statusEntries: Array<{ property: string; value: string }>;
+  licenseEntries: Array<{ property: string; value: string }>;
+  adfRepoUrl = 'https://github.com/Alfresco/alfresco-ng2-components/commits';
+  appRepoUrl = `https://github.com/Alfresco/${name}/commits/${commit}`;
+  adfVersion = '';
+  appVersion = version;
+
+  constructor(private contentApi: ContentApiService, appExtensions: AppExtensionService) {
+    this.extensions$ = appExtensions.references$;
+  }
+
+  ngOnInit() {
+    this.dependencyEntries = Object.keys(dependencies).map((key) => {
+      if (key === '@alfresco/adf-core') {
+        this.adfVersion = dependencies[key].split('-')[0];
+        const adfCurrentCommit = dependencies[key].split('-')[1] || '';
+        this.adfRepoUrl = this.adfRepoUrl.concat('/', adfCurrentCommit);
+      }
+      return {
+        name: key,
+        version: dependencies[key]
+      };
+    });
+
+    this.contentApi
+      .getRepositoryInformation()
+      .pipe(map((node) => node.entry.repository))
+      .subscribe((repository) => {
+        this.repository = repository;
+
+        this.statusEntries = Object.keys(repository.status).map((key) => {
+          return {
+            property: key,
+            value: repository.status[key]
+          };
+        });
+
+        if (repository.license) {
+          this.licenseEntries = Object.keys(repository.license).map((key) => {
+            return {
+              property: key,
+              value: repository.license[key]
+            };
+          });
+        }
+      });
+  }
+}
--- a/projects/aca-about/src/lib/aca-about.module.ts
+++ b/projects/aca-about/src/lib/aca-about.module.ts
@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { NgModule } from '@angular/core';
+import { AboutComponent } from './about.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { MatTableModule } from '@angular/material/table';
+import { SharedModule, PageLayoutModule } from '@alfresco/aca-shared';
+
+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';
+import { ExtensionService } from '@alfresco/adf-extensions';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), MatTableModule, SharedModule, PageLayoutModule],
+  declarations: [AboutComponent, PackageListComponent, ExtensionListComponent, StatusListComponent, ModuleListComponent, LicenseListComponent]
+})
+export class AcaAboutModule {
+  constructor(extensions: ExtensionService) {
+    extensions.setComponents({
+      'app.about.component': AboutComponent
+    });
+  }
+}
--- a/projects/aca-about/src/lib/extension-list/extension-list.component.html
+++ b/projects/aca-about/src/lib/extension-list/extension-list.component.html
@@ -0,0 +1,11 @@
+<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>
--- a/projects/aca-about/src/lib/extension-list/extension-list.component.ts
+++ b/projects/aca-about/src/lib/extension-list/extension-list.component.ts
@@ -0,0 +1,73 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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> = [];
+}
--- a/projects/aca-about/src/lib/license-list/license-list.component.html
+++ b/projects/aca-about/src/lib/license-list/license-list.component.html
@@ -0,0 +1,11 @@
+<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>
--- a/projects/aca-about/src/lib/license-list/license-list.component.ts
+++ b/projects/aca-about/src/lib/license-list/license-list.component.ts
@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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> = [];
+}
--- a/projects/aca-about/src/lib/module-list/module-list.component.html
+++ b/projects/aca-about/src/lib/module-list/module-list.component.html
@@ -0,0 +1,11 @@
+<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>
--- a/projects/aca-about/src/lib/module-list/module-list.component.ts
+++ b/projects/aca-about/src/lib/module-list/module-list.component.ts
@@ -0,0 +1,58 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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> = [];
+}
--- a/projects/aca-about/src/lib/package-list/package-list.component.html
+++ b/projects/aca-about/src/lib/package-list/package-list.component.html
@@ -0,0 +1,11 @@
+<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>
--- a/projects/aca-about/src/lib/package-list/package-list.component.ts
+++ b/projects/aca-about/src/lib/package-list/package-list.component.ts
@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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> = [];
+}
--- a/projects/aca-about/src/lib/status-list/status-list.component.html
+++ b/projects/aca-about/src/lib/status-list/status-list.component.html
@@ -0,0 +1,11 @@
+<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>
--- a/projects/aca-about/src/lib/status-list/status-list.component.ts
+++ b/projects/aca-about/src/lib/status-list/status-list.component.ts
@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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> = [];
+}
--- a/projects/aca-about/src/public-api.ts
+++ b/projects/aca-about/src/public-api.ts
@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 * from './lib/extension-list/extension-list.component';
+export * from './lib/license-list/license-list.component';
+export * from './lib/module-list/module-list.component';
+export * from './lib/package-list/package-list.component';
+export * from './lib/status-list/status-list.component';
+export * from './lib/about.component';
+export * from './lib/aca-about.module';
--- a/projects/aca-about/src/test.ts
+++ b/projects/aca-about/src/test.ts
@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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/>.
+ */
+
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
--- a/projects/aca-about/tsconfig.lib.json
+++ b/projects/aca-about/tsconfig.lib.json
@@ -0,0 +1,24 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
--- a/projects/aca-about/tsconfig.lib.prod.json
+++ b/projects/aca-about/tsconfig.lib.prod.json
@@ -0,0 +1,7 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
--- a/projects/aca-about/tsconfig.spec.json
+++ b/projects/aca-about/tsconfig.spec.json
@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
--- a/projects/aca-about/tslint.json
+++ b/projects/aca-about/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      ["lib", "aca", "app", "adf"],
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      ["lib", "aca", "app", "adf"],
+      "kebab-case"
+    ]
+  }
+}