[ACS-7379] Break About Module dependency on Material Module (#9485)

* refactor: convert About to Standalone, break Material Module dependency

* refactor: cleanup unused About mocks [ci:force]

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-lint-staged
+npx lint-staged

lib/core/src/lib/about/about-extension-list/about-extension-list.component.ts

@@ -17,29 +17,34 @@
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
 import { ExtensionRef } from '@alfresco/adf-extensions';
+import { CommonModule } from '@angular/common';
+import { MatTableModule } from '@angular/material/table';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
-  selector: 'adf-about-extension-list',
+    selector: 'adf-about-extension-list',
-  templateUrl: './about-extension-list.component.html',
+    templateUrl: './about-extension-list.component.html',
-  encapsulation: ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CommonModule, MatTableModule, TranslateModule]
 })
 export class AboutExtensionListComponent {
-  columns = [
+    columns = [
-    {
+        {
-      columnDef: 'name',
+            columnDef: 'name',
-      header: 'ABOUT.PLUGINS.NAME',
+            header: 'ABOUT.PLUGINS.NAME',
-      cell: (row: ExtensionRef) => `${row.$name}`
+            cell: (row: ExtensionRef) => `${row.$name}`
-    },
+        },
-    {
+        {
-      columnDef: 'version',
+            columnDef: 'version',
-      header: 'ABOUT.PLUGINS.VERSION',
+            header: 'ABOUT.PLUGINS.VERSION',
-      cell: (row: ExtensionRef) => `${row.$version}`
+            cell: (row: ExtensionRef) => `${row.$version}`
-    }
+        }
-  ];
+    ];
 
-  displayedColumns = this.columns.map((x) => x.columnDef);
+    displayedColumns = this.columns.map((x) => x.columnDef);
 
-  @Input()
+    @Input()
-  data: Array<ExtensionRef> = [];
+    data: Array<ExtensionRef> = [];
 }

lib/core/src/lib/about/about-github-link/about-github-link.component.ts

@@ -16,11 +16,16 @@
  */
 
 import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
     selector: 'adf-about-github-link',
     templateUrl: './about-github-link.component.html',
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatCardModule]
 })
 export class AboutGithubLinkComponent {
     /** Commit corresponding to the version of ADF to be used. */

lib/core/src/lib/about/about-license-list/about-license-list.component.ts

@@ -17,13 +17,18 @@
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
 import { LicenseData } from '../interfaces';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTableModule } from '@angular/material/table';
 
 @Component({
     selector: 'adf-about-license-list',
     templateUrl: './about-license-list.component.html',
     styleUrls: ['./about-license-list.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatTableModule]
 })
 export class AboutLicenseListComponent {
     columns = [

lib/core/src/lib/about/about-module-list/module-list.component.ts

@@ -16,34 +16,39 @@
  */
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTableModule } from '@angular/material/table';
 
 interface ModuleInfo {
-  title: string;
+    title: string;
-  version: string;
+    version: string;
 }
 
 @Component({
-  selector: 'adf-about-module-list',
+    selector: 'adf-about-module-list',
-  templateUrl: './module-list.component.html',
+    templateUrl: './module-list.component.html',
-  encapsulation: ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatTableModule]
 })
 export class ModuleListComponent {
-  columns = [
+    columns = [
-    {
+        {
-      columnDef: 'title',
+            columnDef: 'title',
-      header: 'ABOUT.MODULES.NAME',
+            header: 'ABOUT.MODULES.NAME',
-      cell: (row: ModuleInfo) => `${row.title}`
+            cell: (row: ModuleInfo) => `${row.title}`
-    },
+        },
-    {
+        {
-      columnDef: 'version',
+            columnDef: 'version',
-      header: 'ABOUT.MODULES.VERSION',
+            header: 'ABOUT.MODULES.VERSION',
-      cell: (row: ModuleInfo) => `${row.version}`
+            cell: (row: ModuleInfo) => `${row.version}`
-    }
+        }
-  ];
+    ];
 
-  displayedColumns = this.columns.map((x) => x.columnDef);
+    displayedColumns = this.columns.map((x) => x.columnDef);
 
-  @Input()
+    @Input()
-  data: Array<ModuleInfo> = [];
+    data: Array<ModuleInfo> = [];
 }

lib/core/src/lib/about/about-package/package-list.component.ts

@@ -17,49 +17,53 @@
 
 import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
 import { PackageInfo } from '../interfaces';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTableModule } from '@angular/material/table';
 
 @Component({
-  selector: 'adf-about-package-list',
+    selector: 'adf-about-package-list',
-  templateUrl: './package-list.component.html',
+    templateUrl: './package-list.component.html',
-  styleUrls: ['./package-list.component.scss'],
+    styleUrls: ['./package-list.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatTableModule]
 })
 export class PackageListComponent implements OnInit {
+    @Input()
+    dependencies: any;
 
-  @Input()
+    columns = [
-  dependencies: any;
+        {
+            columnDef: 'title',
+            header: 'ABOUT.PACKAGES.NAME',
+            cell: (row: PackageInfo) => `${row.name}`
+        },
+        {
+            columnDef: 'version',
+            header: 'ABOUT.PACKAGES.VERSION',
+            cell: (row: PackageInfo) => `${row.version}`
+        }
+    ];
 
-  columns = [
+    displayedColumns = this.columns.map((x) => x.columnDef);
-    {
-      columnDef: 'title',
-      header: 'ABOUT.PACKAGES.NAME',
-      cell: (row: PackageInfo) => `${row.name}`
-    },
-    {
-      columnDef: 'version',
-      header: 'ABOUT.PACKAGES.VERSION',
-      cell: (row: PackageInfo) => `${row.version}`
-    }
-  ];
 
-  displayedColumns = this.columns.map((x) => x.columnDef);
+    @Input()
+    data: Array<PackageInfo> = [];
 
-  @Input()
+    ngOnInit() {
-  data: Array<PackageInfo> = [];
+        const regexp = new RegExp('^(@alfresco)');
 
-  ngOnInit() {
+        if (this.dependencies) {
-    const regexp = new RegExp('^(@alfresco)');
+            const libs = Object.keys(this.dependencies).filter((val) => regexp.test(val));
+            this.data = [];
 
-    if (this.dependencies) {
+            libs.forEach((val) => {
-        const libs = Object.keys(this.dependencies).filter((val) => regexp.test(val));
+                this.data.push({
-        this.data = [];
+                    name: val,
-
+                    version: this.dependencies[val]
-        libs.forEach((val) => {
+                });
-            this.data.push({
-                name: val,
-                version: (this.dependencies[val])
             });
-        });
+        }
     }
-  }
 }

lib/core/src/lib/about/about-panel.directive.ts

@@ -18,7 +18,8 @@
 import { ContentChild, Directive, Input, TemplateRef } from '@angular/core';
 
 @Directive({
-    selector: 'adf-about-panel'
+    selector: 'adf-about-panel',
+    standalone: true
 })
 export class AboutPanelDirective {
     @Input() label!: string;

lib/core/src/lib/about/about-platform-version/about-platform-version.component.ts

@@ -21,6 +21,8 @@ import { Observable } from 'rxjs';
 import { BpmProductVersionModel } from '../../models/product-version.model';
 import { AaeInfoService, ActivitiDependencyInfo } from '../services/aae-info.service';
 import { AppConfigService } from '../../app-config/app-config.service';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface VersionInfo {
     display: string;
@@ -34,10 +36,11 @@ interface RepositoryInfo {
 @Component({
     selector: 'adf-about-platform-version',
     templateUrl: './about-platform-version.component.html',
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CommonModule, TranslateModule]
 })
 export class AboutPlatformVersionComponent {
-
     /** repository info. */
     @Input()
     repository: RepositoryInfo = null;
@@ -51,10 +54,7 @@ export class AboutPlatformVersionComponent {
     rb$: Observable<ActivitiDependencyInfo>;
     query$: Observable<ActivitiDependencyInfo>;
 
-    constructor(
+    constructor(private aaeInfoService: AaeInfoService, private appConfigService: AppConfigService) {
-        private aaeInfoService: AaeInfoService,
-        private appConfigService: AppConfigService
-    ) {
         this.modelingInfo();
         this.deploymentInfo();
         this.rbInfo();

lib/core/src/lib/about/about-repository-info/about-repository-info.component.ts

@@ -15,14 +15,22 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { ObjectUtils, StringUtils } from '../../common/utils';
 import { LicenseData, StatusData } from '../interfaces';
 import { RepositoryInfo } from './repository-info.interface';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AboutLicenseListComponent } from '../about-license-list/about-license-list.component';
+import { ModuleListComponent } from '../about-module-list/module-list.component';
+import { AboutStatusListComponent } from '../about-status-list/about-status-list.component';
 
 @Component({
     selector: 'adf-about-repository-info',
-    templateUrl: './about-repository-info.component.html'
+    templateUrl: './about-repository-info.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, AboutLicenseListComponent, ModuleListComponent, AboutStatusListComponent]
 })
 export class AboutRepositoryInfoComponent implements OnInit {
     @Input()
@@ -47,13 +55,13 @@ export class AboutRepositoryInfoComponent implements OnInit {
                             property: key,
                             value: ObjectUtils.booleanPrettify(repository.license[key], StringUtils.prettifyBooleanEnabled)
                         };
-                    };
+                    }
 
                     return {
                         property: key,
                         value: repository.license[key]
                     };
-            });
+                });
             }
         }
     }

lib/core/src/lib/about/about-server-settings/about-server-settings.component.ts

@@ -15,13 +15,19 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
     selector: 'adf-about-server-settings',
     templateUrl: './about-server-settings.component.html',
-    styleUrls: ['./about-server-settings.component.scss']
+    styleUrls: ['./about-server-settings.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatCardModule]
 })
 export class AboutServerSettingsComponent implements OnInit {
     ecmHost = '';

lib/core/src/lib/about/about-status-list/about-status-list.component.ts

@@ -17,12 +17,17 @@
 
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
 import { StatusData } from '../interfaces';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTableModule } from '@angular/material/table';
 
 @Component({
     selector: 'adf-about-status-list',
     templateUrl: './about-status-list.component.html',
     encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatTableModule]
 })
 export class AboutStatusListComponent {
     columns = [

lib/core/src/lib/about/about.component.ts

@@ -17,12 +17,16 @@
 
 import { Component, ContentChildren, QueryList, ViewEncapsulation } from '@angular/core';
 import { AboutPanelDirective } from './about-panel.directive';
+import { CommonModule } from '@angular/common';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
     selector: 'adf-about',
     templateUrl: './about.component.html',
     styleUrls: ['about.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CommonModule, MatExpansionModule]
 })
 export class AboutComponent {
     @ContentChildren(AboutPanelDirective)

lib/core/src/lib/about/about.mock.ts

@@ -15,32 +15,6 @@
  * limitations under the License.
  */
 
-export const mockDependencies = {
-    '@alfresco/mock-core': '3.7.0',
-    '@alfresco/mock-services': '2.0.0',
-    '@angular/mock-core': '8.0.0',
-    '@angular/mock-services': '8.0.0'
-};
-
-export const mockPlugins = [
-    {
-        $name: 'plugin1',
-        $version: '1.0.0',
-        $vendor: 'mockVender-1',
-        $license: 'MockLicense-2.0',
-        $runtime: '2.7.0',
-        $description: 'example plugin'
-    },
-    {
-        $name: 'plugin2',
-        $version: '1.0.0',
-        $vendor: 'mockVender-2',
-        $license: 'MockLicense-3.0',
-        $runtime: '2.7.0',
-        $description: 'example plugin 2'
-    }
-];
-
 export const aboutGithubDetails = {
     url: 'https://github.com/componany/repository/commits/',
     defaultUrl: 'https://github.com/Alfresco/alfresco-ng2-components/commits/',
@@ -49,72 +23,3 @@ export const aboutGithubDetails = {
     bpmHost: 'https://mock.bpmhost.com',
     appName: 'mock-application-name'
 };
-
-export const aboutAPSMockDetails = {
-    revisionVersion: '0',
-    edition: 'APS',
-    type: 'bpmSuite',
-    majorVersion: '1',
-    minorVersion: '10'
-};
-
-export const mockModules: any = {
-    edition: 'Enterprise',
-    version: {
-        major: '6',
-        minor: '2',
-        patch: '0',
-        hotfix: '0',
-        schema: 13001,
-        label: 'ra498a911-b5',
-        display: '6.2.0.0'
-    },
-    license: {
-        issuedAt: '2018-12-20T12:07:31.276+0000',
-        expiresAt: '2019-05-31T23:00:00.000+0000',
-        remainingDays: 100,
-        holder: 'CompanyQA',
-        mode: 'ENTERPRISE',
-        entitlements: {
-            isClusterEnabled: true,
-            isCryptodocEnabled: true
-        }
-    },
-    status: {
-        isReadOnly: false,
-        isAuditEnabled: true,
-        isQuickShareEnabled: true,
-        isThumbnailGenerationEnabled: true
-    },
-    modules: [
-        {
-            id: 'mock-id',
-            title: 'ABC Repo',
-            description: 'ABC Repository Extension',
-            version: '3.2.0',
-            installState: 'UNKNOWN',
-            versionMin: '6.1',
-            versionMax: '999'
-        },
-        {
-            id: 'aos-module-id',
-            title: 'AOFS Module',
-            description: 'Allows applications that can talk to a SharePoint server to talk to your Alfresco installation',
-            version: '1.3.0',
-            installDate: '2019-02-07T12:26:13.271+0000',
-            installState: 'INSTALLED',
-            versionMin: '6.0',
-            versionMax: '999'
-        },
-        {
-            id: 'mock-saml-repo',
-            title: 'SAML Repository Module',
-            description: 'The Repository piece of the Alfresco SAML Module',
-            version: '1.1.1',
-            installDate: '2019-02-07T12:26:12.565+0000',
-            installState: 'INSTALLED',
-            versionMin: '6.0',
-            versionMax: '6.99'
-        }
-    ]
-};

lib/core/src/lib/about/about.module.ts

@@ -15,11 +15,7 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { MaterialModule } from '../material.module';
-
 import { AboutGithubLinkComponent } from './about-github-link/about-github-link.component';
 import { AboutServerSettingsComponent } from './about-server-settings/about-server-settings.component';
 import { AboutExtensionListComponent } from './about-extension-list/about-extension-list.component';
@@ -29,29 +25,22 @@ import { AboutStatusListComponent } from './about-status-list/about-status-list.
 import { ModuleListComponent } from './about-module-list/module-list.component';
 import { AboutPlatformVersionComponent } from './about-platform-version/about-platform-version.component';
 import { AboutComponent } from './about.component';
-import { MatExpansionModule } from '@angular/material/expansion';
 import { AboutPanelDirective } from './about-panel.directive';
 import { AboutRepositoryInfoComponent } from './about-repository-info/about-repository-info.component';
 
 @NgModule({
     imports: [
-        CommonModule,
+        AboutExtensionListComponent,
-        MaterialModule,
+        AboutGithubLinkComponent,
-        TranslateModule,
+        AboutLicenseListComponent,
-        MatExpansionModule
+        ModuleListComponent,
-    ],
-    declarations: [
-        AboutComponent,
-        AboutPanelDirective,
         AboutRepositoryInfoComponent,
         AboutPlatformVersionComponent,
-        AboutGithubLinkComponent,
-        AboutServerSettingsComponent,
-        AboutExtensionListComponent,
-        AboutLicenseListComponent,
         PackageListComponent,
         AboutStatusListComponent,
-        ModuleListComponent
+        AboutServerSettingsComponent,
+        AboutPanelDirective,
+        AboutComponent
     ],
     exports: [
         AboutComponent,