From c8688bf0bff7465fc2432fa7acb019adf1c90dbf Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 23 Nov 2021 10:30:10 +0000 Subject: [PATCH] [ACA-4382 ] About Page refactoring to use it across all the platform (#7365) * about page refactor for global usage * Development About * add storybook * fix build * fix * fix * fix imports * fix * fix lint * fix * fix * fix * fix --- demo-shell/resources/i18n/en.json | 3 + .../app/components/about/about.component.html | 11 +- .../app/components/about/about.component.ts | 21 +-- .../about-application-modules.component.html | 62 -------- .../about-application-modules.component.scss | 3 - ...bout-application-modules.component.spec.ts | 107 -------------- .../about-application-modules.component.ts | 78 ---------- .../about-extension-list.component.html | 11 ++ .../about-extension-list.component.ts | 45 ++++++ .../about-github-link.component.html | 22 ++- .../about-license-list.component.html | 11 ++ .../about-license-list.component.ts | 45 ++++++ .../module-list.component.html | 11 ++ .../module-list.component.ts | 45 ++++++ .../about-package/package-list.component.html | 11 ++ .../about-package/package-list.component.ts | 45 ++++++ .../about-platform-version.component.html | 67 +++++++++ .../about-platform-version.component.ts | 67 +++++++++ .../about-product-version.component.html | 35 ----- .../about-product-version.component.scss | 3 - .../about-product-version.component.spec.ts | 116 --------------- .../about-product-version.component.ts | 139 ------------------ .../about-server-settings.component.html | 5 +- .../about-status-list.component.html | 11 ++ .../about-status-list.component.ts | 45 ++++++ lib/core/about/about.component.html | 41 ++++++ lib/core/about/about.component.scss | 12 ++ lib/core/about/about.component.stories.ts | 67 +++++++++ lib/core/about/about.component.ts | 124 ++++++++++++++++ lib/core/about/about.module.ts | 36 +++-- lib/core/about/interfaces.ts | 31 ++++ lib/core/about/public-api.ts | 9 +- lib/core/about/services/aae-info.service.ts | 55 +++++++ .../card-view-textitem.component.spec.ts | 5 +- .../datatable-cell.component.spec.ts | 2 +- lib/core/directives/logout.directive.spec.ts | 2 +- .../version-compatibility.directive.spec.ts | 4 +- lib/core/i18n/en.json | 72 +++++---- .../sidenav-layout.component.spec.ts | 2 +- lib/core/mock/authentication.service.mock.ts | 22 ++- lib/core/mock/discovery-api.service.mock.ts | 117 +++++++++++++++ lib/core/models/product-version.model.ts | 107 -------------- lib/core/services/discovery-api.service.ts | 13 +- .../services/identity-group.service.spec.ts | 6 +- .../services/identity-role.service.spec.ts | 2 +- lib/core/services/upload.service.spec.ts | 9 +- .../version-compatibility.service.spec.ts | 6 +- .../services/version-compatibility.service.ts | 16 +- .../empty-content.component.spec.ts | 2 +- lib/core/testing/core.story.module.ts | 11 ++ .../components/img-viewer.component.spec.ts | 2 +- .../components/pdf-viewer.component.spec.ts | 2 +- .../lib/mock/app-extension.service.mock.ts | 39 +++++ lib/extensions/src/lib/mock/public-api.ts | 18 +++ lib/extensions/src/public-api.ts | 2 + .../src/lib/form/public-api.ts | 1 + 56 files changed, 1079 insertions(+), 777 deletions(-) delete mode 100644 lib/core/about/about-application-modules/about-application-modules.component.html delete mode 100644 lib/core/about/about-application-modules/about-application-modules.component.scss delete mode 100644 lib/core/about/about-application-modules/about-application-modules.component.spec.ts delete mode 100644 lib/core/about/about-application-modules/about-application-modules.component.ts create mode 100644 lib/core/about/about-extension-list/about-extension-list.component.html create mode 100644 lib/core/about/about-extension-list/about-extension-list.component.ts create mode 100644 lib/core/about/about-license-list/about-license-list.component.html create mode 100644 lib/core/about/about-license-list/about-license-list.component.ts create mode 100644 lib/core/about/about-module-list/module-list.component.html create mode 100644 lib/core/about/about-module-list/module-list.component.ts create mode 100644 lib/core/about/about-package/package-list.component.html create mode 100644 lib/core/about/about-package/package-list.component.ts create mode 100644 lib/core/about/about-platform-version/about-platform-version.component.html create mode 100644 lib/core/about/about-platform-version/about-platform-version.component.ts delete mode 100644 lib/core/about/about-product-version/about-product-version.component.html delete mode 100644 lib/core/about/about-product-version/about-product-version.component.scss delete mode 100644 lib/core/about/about-product-version/about-product-version.component.spec.ts delete mode 100644 lib/core/about/about-product-version/about-product-version.component.ts create mode 100644 lib/core/about/about-status-list/about-status-list.component.html create mode 100644 lib/core/about/about-status-list/about-status-list.component.ts create mode 100644 lib/core/about/about.component.html create mode 100644 lib/core/about/about.component.scss create mode 100644 lib/core/about/about.component.stories.ts create mode 100644 lib/core/about/about.component.ts create mode 100644 lib/core/about/interfaces.ts create mode 100644 lib/core/about/services/aae-info.service.ts create mode 100644 lib/core/mock/discovery-api.service.mock.ts create mode 100644 lib/extensions/src/lib/mock/app-extension.service.mock.ts create mode 100644 lib/extensions/src/lib/mock/public-api.ts diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index 081bf970ddd..dafc492bcc9 100644 --- a/demo-shell/resources/i18n/en.json +++ b/demo-shell/resources/i18n/en.json @@ -1,5 +1,8 @@ { "APP": { + "ABOUT": { + "DEVELOPMENT":"Dev Mode" + }, "INFO_DRAWER": { "TITLE": "Details", "COMMENTS": "Comments", diff --git a/demo-shell/src/app/components/about/about.component.html b/demo-shell/src/app/components/about/about.component.html index 128de1104d0..e1067458270 100644 --- a/demo-shell/src/app/components/about/about.component.html +++ b/demo-shell/src/app/components/about/about.component.html @@ -1,11 +1,4 @@ - +{{'APP.ABOUT.DEVELOPMENT' | translate }} - + - - - - diff --git a/demo-shell/src/app/components/about/about.component.ts b/demo-shell/src/app/components/about/about.component.ts index a6dbc7311eb..9a1520aee38 100644 --- a/demo-shell/src/app/components/about/about.component.ts +++ b/demo-shell/src/app/components/about/about.component.ts @@ -15,27 +15,20 @@ * limitations under the License. */ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import pkg from '../../../../../package.json'; -import { AppConfigService } from '@alfresco/adf-core'; @Component({ selector: 'app-about-page', templateUrl: './about.component.html', styleUrls: ['./about.component.scss'] }) -export class AboutComponent implements OnInit { - url = `https://github.com/Alfresco/${pkg.name}/commits/${pkg.commit}`; - version = pkg.version; - dependencies = pkg.dependencies; - showExtensions = true; - application = ''; +export class AboutComponent { + pkg: any; + dev: true; - constructor(private appConfigService: AppConfigService) {} - - ngOnInit() { - this.application = this.appConfigService.get( - 'application.name' - ); + constructor() { + this.pkg = pkg; } + } diff --git a/lib/core/about/about-application-modules/about-application-modules.component.html b/lib/core/about/about-application-modules/about-application-modules.component.html deleted file mode 100644 index edb1f41ecff..00000000000 --- a/lib/core/about/about-application-modules/about-application-modules.component.html +++ /dev/null @@ -1,62 +0,0 @@ -
-

{{ 'ABOUT.PACKAGES.TITLE' | translate }}

- {{ 'ABOUT.PACKAGES.DESCRIPTION' | translate }} - - -
-

{{ 'ABOUT.EXTENSIONS.TITLE' | translate }}

- - - - {{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.ID' | translate }} - {{element.$id}} - - - - - {{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.NAME' | translate }} - {{element.$name}} - - - - - {{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.VERSION' | translate }} - {{element.$version}} - - - - - {{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.VENDOR' | translate }} - {{element.$vendor}} - - - - - {{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.LICENSE' | translate }} - {{element.$license}} - - - - - {{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.RUNTIME' | translate }} - {{element.$runtime}} - - - - - {{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.DESCRIPTION' | translate }} - {{element.$description}} - - - - - -
-
diff --git a/lib/core/about/about-application-modules/about-application-modules.component.scss b/lib/core/about/about-application-modules/about-application-modules.component.scss deleted file mode 100644 index 83ac7a5f32d..00000000000 --- a/lib/core/about/about-application-modules/about-application-modules.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.adf-about-modules-container { - padding: 10px; -} diff --git a/lib/core/about/about-application-modules/about-application-modules.component.spec.ts b/lib/core/about/about-application-modules/about-application-modules.component.spec.ts deleted file mode 100644 index ee03c98b901..00000000000 --- a/lib/core/about/about-application-modules/about-application-modules.component.spec.ts +++ /dev/null @@ -1,107 +0,0 @@ -/*! - * @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 { ComponentFixture, TestBed } from '@angular/core/testing'; -import { CoreTestingModule } from '../../testing/core.testing.module'; -import { setupTestBed } from '../../testing/setup-test-bed'; -import { AboutApplicationModulesComponent } from './about-application-modules.component'; -import { mockDependencies, mockPlugins } from '../about.mock'; -import { TranslateModule } from '@ngx-translate/core'; - -describe('AboutApplicationModulesComponent', () => { - let fixture: ComponentFixture; - let component: AboutApplicationModulesComponent; - - setupTestBed({ - imports: [ - TranslateModule.forRoot(), - CoreTestingModule - ] - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AboutApplicationModulesComponent); - component = fixture.componentInstance; - component.dependencies = mockDependencies; - fixture.detectChanges(); - }); - - afterEach(() => { - fixture.destroy(); - }); - - it('Should display title', () => { - const titleElement = fixture.nativeElement.querySelector('[data-automation-id="adf-about-modules-title"]'); - expect(titleElement.innerText).toEqual('ABOUT.PACKAGES.TITLE'); - }); - - it('should display dependencies', async() => { - fixture.detectChanges(); - await fixture.whenStable(); - const dataTable = fixture.nativeElement.querySelector('.adf-datatable'); - - const depOne = fixture.nativeElement.querySelector('[data-automation-id="text_@alfresco/mock-core"]'); - const depTwo = fixture.nativeElement.querySelector('[data-automation-id="text_@alfresco/mock-services"]'); - const depVersionOne = fixture.nativeElement.querySelector('[data-automation-id="text_3.7.0"]'); - const depVersionTwo = fixture.nativeElement.querySelector('[data-automation-id="text_2.0.0"]'); - - expect(dataTable).not.toBeNull(); - - expect(depOne.innerText).toEqual('@alfresco/mock-core'); - expect(depTwo.innerText).toEqual('@alfresco/mock-services'); - - expect(depVersionOne.innerText).toEqual('3.7.0'); - expect(depVersionTwo.innerText).toEqual('2.0.0'); - }); - - it('should display extensions', async() => { - component.extensions = mockPlugins; - fixture.detectChanges(); - await fixture.whenStable(); - const dataTable = fixture.nativeElement.querySelector('.mat-table'); - const nameColumn = fixture.nativeElement.querySelector('.mat-column--name'); - const versionColumn = fixture.nativeElement.querySelector('.mat-column--version'); - const licenseColumn = fixture.nativeElement.querySelector('.mat-column--license'); - const nameRows = fixture.nativeElement.querySelector('.mat-row .mat-column--name'); - const versionRows = fixture.nativeElement.querySelector('.mat-row .mat-column--version'); - const licenseRows = fixture.nativeElement.querySelector('.mat-row .mat-column--license'); - - expect(dataTable).not.toBeNull(); - - expect(versionColumn.innerText).toEqual('ABOUT.EXTENSIONS.TABLE_HEADERS.VERSION'); - expect(nameColumn.innerText).toEqual('ABOUT.EXTENSIONS.TABLE_HEADERS.NAME'); - expect(licenseColumn.innerText).toEqual('ABOUT.EXTENSIONS.TABLE_HEADERS.LICENSE'); - - expect(nameRows.innerText).toEqual('plugin1'); - expect(versionRows.innerText).toEqual('1.0.0'); - expect(licenseRows.innerText).toEqual('MockLicense-2.0'); - }); - - it('should not display extensions if showExtensions set to false ', async() => { - component.extensions = mockPlugins; - component.showExtensions = false; - fixture.detectChanges(); - await fixture.whenStable(); - const dataTable = fixture.nativeElement.querySelector('.mat-table'); - const nameColumn = fixture.nativeElement.querySelector('.mat-column--name'); - const nameRows = fixture.nativeElement.querySelector('.mat-row .mat-column--name'); - - expect(dataTable).toBeNull(); - expect(nameColumn).toBeNull(); - expect(nameRows).toBeNull(); - }); -}); diff --git a/lib/core/about/about-application-modules/about-application-modules.component.ts b/lib/core/about/about-application-modules/about-application-modules.component.ts deleted file mode 100644 index df1c531745a..00000000000 --- a/lib/core/about/about-application-modules/about-application-modules.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -/*! - * @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, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ObjectDataTableAdapter } from '../../datatable/data/object-datatable-adapter'; -import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; - -@Component({ - selector: 'adf-about-application-modules', - templateUrl: './about-application-modules.component.html', - encapsulation: ViewEncapsulation.None -}) -export class AboutApplicationModulesComponent implements OnInit, OnDestroy { - - extensionColumns: string[] = ['$id', '$name', '$version', '$vendor', '$license', '$runtime', '$description']; - - dependencyEntries: ObjectDataTableAdapter; - extensions: ExtensionRef[]; - - /** Toggles showing/hiding of extensions block. */ - @Input() - showExtensions = true; - - /** Regular expression for filtering dependencies packages. */ - @Input() regexp = '^(@alfresco)'; - - /** Current version of the app running */ - @Input() dependencies: any; - - private onDestroy$ = new Subject(); - - constructor(private appExtensions: AppExtensionService) { - } - - ngOnInit() { - const alfrescoPackages = Object.keys(this.dependencies).filter((val) => { - return new RegExp(this.regexp).test(val); - }); - - const alfrescoPackagesTableRepresentation = []; - alfrescoPackages.forEach((val) => { - alfrescoPackagesTableRepresentation.push({ - name: val, - version: (this.dependencies[val]) - }); - }); - - this.dependencyEntries = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [ - { type: 'text', key: 'name', title: 'Name', sortable: true }, - { type: 'text', key: 'version', title: 'Version', sortable: true } - ]); - - this.appExtensions.references$ - .pipe(takeUntil(this.onDestroy$)) - .subscribe((extensions) => this.extensions = extensions); - } - - ngOnDestroy() { - this.onDestroy$.next(true); - this.onDestroy$.complete(); - } -} diff --git a/lib/core/about/about-extension-list/about-extension-list.component.html b/lib/core/about/about-extension-list/about-extension-list.component.html new file mode 100644 index 00000000000..f58a2cf6fa8 --- /dev/null +++ b/lib/core/about/about-extension-list/about-extension-list.component.html @@ -0,0 +1,11 @@ + + + + {{ column.header | translate }} + + {{ column.cell(row) }} + + + + + diff --git a/lib/core/about/about-extension-list/about-extension-list.component.ts b/lib/core/about/about-extension-list/about-extension-list.component.ts new file mode 100644 index 00000000000..3757eb727fd --- /dev/null +++ b/lib/core/about/about-extension-list/about-extension-list.component.ts @@ -0,0 +1,45 @@ +/*! + * @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, ChangeDetectionStrategy, Input } from '@angular/core'; +import { ExtensionRef } from '@alfresco/adf-extensions'; + +@Component({ + selector: 'adf-about-extension-list', + templateUrl: './about-extension-list.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AboutExtensionListComponent { + columns = [ + { + columnDef: 'name', + header: 'ABOUT.PLUGINS.NAME', + cell: (row: ExtensionRef) => `${row.$name}` + }, + { + columnDef: 'version', + header: 'ABOUT.PLUGINS.VERSION', + cell: (row: ExtensionRef) => `${row.$version}` + } + ]; + + displayedColumns = this.columns.map((x) => x.columnDef); + + @Input() + data: Array = []; +} diff --git a/lib/core/about/about-github-link/about-github-link.component.html b/lib/core/about/about-github-link/about-github-link.component.html index 07511416d37..b2cbffa42db 100644 --- a/lib/core/about/about-github-link/about-github-link.component.html +++ b/lib/core/about/about-github-link/about-github-link.component.html @@ -1,16 +1,14 @@