From 1109a73a199f839941d951010e1197e017ee6179 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 11 Nov 2022 16:01:02 +0000 Subject: [PATCH] [AAE-10766] presentational and reusable About (#7969) --- .../app/components/about/about.component.html | 32 +++- .../app/components/about/about.component.scss | 3 - .../app/components/about/about.component.ts | 42 +++++- docs/core/components/about.component.md | 56 +++++++ .../about-package/package-list.component.ts | 24 ++- .../src/lib/about/about-panel.directive.ts | 28 ++++ .../about-repository-info.component.html | 16 ++ .../about-repository-info.component.ts | 60 ++++++++ .../repository-info.interface.ts | 47 ++++++ lib/core/src/lib/about/about.component.html | 57 +------- lib/core/src/lib/about/about.component.ts | 137 +----------------- lib/core/src/lib/about/about.module.ts | 6 + lib/core/src/lib/about/public-api.ts | 3 + 13 files changed, 319 insertions(+), 192 deletions(-) delete mode 100644 demo-shell/src/app/components/about/about.component.scss create mode 100644 docs/core/components/about.component.md create mode 100644 lib/core/src/lib/about/about-panel.directive.ts create mode 100644 lib/core/src/lib/about/about-repository-info/about-repository-info.component.html create mode 100644 lib/core/src/lib/about/about-repository-info/about-repository-info.component.ts create mode 100644 lib/core/src/lib/about/about-repository-info/repository-info.interface.ts diff --git a/demo-shell/src/app/components/about/about.component.html b/demo-shell/src/app/components/about/about.component.html index e106745827..a39f92d49e 100644 --- a/demo-shell/src/app/components/about/about.component.html +++ b/demo-shell/src/app/components/about/about.component.html @@ -1,4 +1,34 @@ {{'APP.ABOUT.DEVELOPMENT' | translate }} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/demo-shell/src/app/components/about/about.component.scss b/demo-shell/src/app/components/about/about.component.scss deleted file mode 100644 index ac496e0066..0000000000 --- a/demo-shell/src/app/components/about/about.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.adf-extension-details-container { - padding: 4px; -} diff --git a/demo-shell/src/app/components/about/about.component.ts b/demo-shell/src/app/components/about/about.component.ts index 9a1520aee3..c93fc25e86 100644 --- a/demo-shell/src/app/components/about/about.component.ts +++ b/demo-shell/src/app/components/about/about.component.ts @@ -15,20 +15,52 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions'; +import { AuthenticationService, BpmProductVersionModel, DiscoveryApiService, RepositoryInfo } from '@alfresco/adf-core'; import pkg from '../../../../../package.json'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-about-page', - templateUrl: './about.component.html', - styleUrls: ['./about.component.scss'] + templateUrl: './about.component.html' }) -export class AboutComponent { +export class AboutComponent implements OnInit { pkg: any; dev: true; - constructor() { + extensions$: Observable; + repository: RepositoryInfo = null; + bpmVersion: BpmProductVersionModel = null; + + constructor( + private authService: AuthenticationService, + private appExtensions: AppExtensionService, + private discovery: DiscoveryApiService + ) { this.pkg = pkg; + this.extensions$ = this.appExtensions.references$; } + ngOnInit(): void { + if (this.authService.isEcmLoggedIn()) { + this.setECMInfo(); + } + + if (this.authService.isBpmLoggedIn()) { + this.setBPMInfo(); + } + } + + setECMInfo() { + this.discovery.getEcmProductInfo().subscribe((repository) => { + this.repository = repository as RepositoryInfo; + }); + } + + setBPMInfo() { + this.discovery.getBpmProductInfo().subscribe((bpmVersion) => { + this.bpmVersion = bpmVersion; + }); + } } diff --git a/docs/core/components/about.component.md b/docs/core/components/about.component.md new file mode 100644 index 0000000000..1d88d67ace --- /dev/null +++ b/docs/core/components/about.component.md @@ -0,0 +1,56 @@ +--- +Title: About Component +Added: v3.5.0 +Status: Active +Last reviewed: 2022-11-11 +--- + +# About Component + +Presentational component to display About information as a set of collapsible panels. + +## Basic Usage + +```html + + + + + + + + + + + + + +``` + +## Conditional Display + +You can wire each panel with the `*ngIf` conditions: + +```html + + + + + + + +``` + +Where `devMode` is an example of an input property exposed by your component. + +Observables are also supported: + +```html + + + + + + + +``` diff --git a/lib/core/src/lib/about/about-package/package-list.component.ts b/lib/core/src/lib/about/about-package/package-list.component.ts index 524f3dca2a..f938027abc 100644 --- a/lib/core/src/lib/about/about-package/package-list.component.ts +++ b/lib/core/src/lib/about/about-package/package-list.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core'; +import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, OnInit } from '@angular/core'; import { PackageInfo } from '../interfaces'; @Component({ @@ -24,7 +24,11 @@ import { PackageInfo } from '../interfaces'; encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) -export class PackageListComponent { +export class PackageListComponent implements OnInit { + + @Input() + dependencies: any; + columns = [ { columnDef: 'title', @@ -42,4 +46,20 @@ export class PackageListComponent { @Input() data: Array = []; + + ngOnInit() { + const regexp = new RegExp('^(@alfresco)'); + + if (this.dependencies) { + const libs = Object.keys(this.dependencies).filter((val) => regexp.test(val)); + this.data = []; + + libs.forEach((val) => { + this.data.push({ + name: val, + version: (this.dependencies[val]) + }); + }); + } + } } diff --git a/lib/core/src/lib/about/about-panel.directive.ts b/lib/core/src/lib/about/about-panel.directive.ts new file mode 100644 index 0000000000..c078a47746 --- /dev/null +++ b/lib/core/src/lib/about/about-panel.directive.ts @@ -0,0 +1,28 @@ +/*! + * @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 { ContentChild, Directive, Input, TemplateRef } from '@angular/core'; + +@Directive({ + selector: 'adf-about-panel' +}) +export class AboutPanelDirective { + @Input() label!: string; + + @ContentChild(TemplateRef) + layoutTemplate!: TemplateRef; +} diff --git a/lib/core/src/lib/about/about-repository-info/about-repository-info.component.html b/lib/core/src/lib/about/about-repository-info/about-repository-info.component.html new file mode 100644 index 0000000000..85b1dcc92b --- /dev/null +++ b/lib/core/src/lib/about/about-repository-info/about-repository-info.component.html @@ -0,0 +1,16 @@ +
+
+
{{ 'ABOUT.LICENSE.TITLE' | translate }}
+ +
+ +
+
{{ 'ABOUT.STATUS.TITLE' | translate }}
+ +
+ +
+
{{ 'ABOUT.MODULES.TITLE' | translate }}
+ +
+
diff --git a/lib/core/src/lib/about/about-repository-info/about-repository-info.component.ts b/lib/core/src/lib/about/about-repository-info/about-repository-info.component.ts new file mode 100644 index 0000000000..2cf34a6f45 --- /dev/null +++ b/lib/core/src/lib/about/about-repository-info/about-repository-info.component.ts @@ -0,0 +1,60 @@ +/*! + * @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, OnInit } from '@angular/core'; +import { ObjectUtils, StringUtils } from '../../utils'; +import { LicenseData, StatusData } from '../interfaces'; +import { RepositoryInfo } from './repository-info.interface'; + +@Component({ + selector: 'adf-about-repository-info', + templateUrl: './about-repository-info.component.html' +}) +export class AboutRepositoryInfoComponent implements OnInit { + @Input() + data: RepositoryInfo; + + statusEntries: StatusData[]; + licenseEntries: LicenseData[]; + + ngOnInit(): void { + if (this.data) { + const repository = this.data; + + this.statusEntries = Object.keys(repository.status).map((key) => ({ + property: key, + value: repository.status[key] + })); + + if (repository.license) { + this.licenseEntries = Object.keys(repository.license).map((key) => { + if (ObjectUtils.isObject(repository.license[key])) { + return { + property: key, + value: ObjectUtils.booleanPrettify(repository.license[key], StringUtils.prettifyBooleanEnabled) + }; + }; + + return { + property: key, + value: repository.license[key] + }; + }); + } + } + } +} diff --git a/lib/core/src/lib/about/about-repository-info/repository-info.interface.ts b/lib/core/src/lib/about/about-repository-info/repository-info.interface.ts new file mode 100644 index 0000000000..8bf13d102b --- /dev/null +++ b/lib/core/src/lib/about/about-repository-info/repository-info.interface.ts @@ -0,0 +1,47 @@ +/*! + * @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. + */ + +export interface RepositoryInfo { + status: { + isReadOnly: boolean; + isAuditEnabled: boolean; + isQuickShareEnabled: boolean; + isThumbnailGenerationEnabled: boolean; + isDirectAccessUrlEnabled: boolean; + }; + edition: string; + version: { + display: string; + }; + license?: { + issuedAt: Date; + expiresAt: Date; + remainingDays: number; + holder: string; + mode: string; + entitlements?: { + maxUsers?: number; + maxDocs?: number; + isClusterEnabled?: boolean; + isCryptodocEnabled?: boolean; + }; + }; + modules?: Array<{ + title: string; + version: string; + }>; +} diff --git a/lib/core/src/lib/about/about.component.html b/lib/core/src/lib/about/about.component.html index 40d4cfb860..77a94726b4 100644 --- a/lib/core/src/lib/about/about.component.html +++ b/lib/core/src/lib/about/about.component.html @@ -1,51 +1,10 @@ - - - {{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }} - - - - - - - {{ 'ABOUT.VERSIONS.TITLE' | translate }} - - - - - - - {{ 'ABOUT.REPOSITORY' | translate }} - -
-
-
{{ 'ABOUT.LICENSE.TITLE' | translate }}
- -
- -
-
{{ 'ABOUT.STATUS.TITLE' | translate }}
- -
- -
-
{{ 'ABOUT.MODULES.TITLE' | translate }}
- -
-
- - - - - {{ 'ABOUT.PACKAGES.TITLE' | translate }} - - - - - - - {{ 'ABOUT.PLUGINS.TITLE' | translate }} - - - + + + + {{panel.label}} + + + + diff --git a/lib/core/src/lib/about/about.component.ts b/lib/core/src/lib/about/about.component.ts index 2cee604fb7..0507ba20f3 100644 --- a/lib/core/src/lib/about/about.component.ts +++ b/lib/core/src/lib/about/about.component.ts @@ -15,142 +15,15 @@ * limitations under the License. */ -import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; -import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions'; -import { Observable } from 'rxjs'; -import { AppConfigService } from '../app-config/app-config.service'; - -import { BpmProductVersionModel } from '../models/product-version.model'; -import { AuthenticationService } from '../services/authentication.service'; -import { DiscoveryApiService } from '../services/discovery-api.service'; -import { LicenseData, PackageInfo, StatusData } from './interfaces'; -import { ObjectUtils } from '../utils/object-utils'; -import { StringUtils } from '../utils/string-utils'; - -interface RepositoryInfo { - status: { - isReadOnly: boolean; - isAuditEnabled: boolean; - isQuickShareEnabled: boolean; - isThumbnailGenerationEnabled: boolean; - isDirectAccessUrlEnabled: boolean; - }; - edition: string; - version: { - display: string; - }; - license?: { - issuedAt: Date; - expiresAt: Date; - remainingDays: number; - holder: string; - mode: string; - entitlements?: { - maxUsers?: number; - maxDocs?: number; - isClusterEnabled?: boolean; - isCryptodocEnabled?: boolean; - }; - }; - modules?: Array<{ - title: string; - version: string; - }>; -} +import { Component, ContentChildren, QueryList, ViewEncapsulation } from '@angular/core'; +import { AboutPanelDirective } from './about-panel.directive'; @Component({ selector: 'adf-about', templateUrl: './about.component.html', encapsulation: ViewEncapsulation.None }) -export class AboutComponent implements OnInit { - - repository: RepositoryInfo = null; - bpmVersion: BpmProductVersionModel = null; - - statusEntries: StatusData[]; - licenseEntries: LicenseData[]; - - dependencyEntries: PackageInfo[] = []; - version: string; - dependencies: string; - application: string; - - /** If active show more information about the app and the platform useful in debug. */ - @Input() dev: boolean = false; - - /** pkg json. */ - @Input() pkg: any; - - /** Regular expression for filtering dependencies packages. */ - @Input() regexp = '^(@alfresco)'; - - extensions$: Observable; - - constructor(private authService: AuthenticationService, - private discovery: DiscoveryApiService, - private appExtensions: AppExtensionService, - private appConfigService: AppConfigService) { - this.extensions$ = this.appExtensions.references$; - this.application = this.appConfigService.get( - 'application.name' - ); - } - - ngOnInit() { - this.version = this.pkg?.version; - this.dependencies = this.pkg?.dependencies; - - if (this.dependencies) { - const alfrescoPackages = Object.keys(this.dependencies).filter((val) => new RegExp(this.regexp).test(val)); - - alfrescoPackages.forEach((val) => { - this.dependencyEntries.push({ - name: val, - version: (this.dependencies[val]) - }); - }); - } - if (this.authService.isEcmLoggedIn()) { - this.setECMInfo(); - } - - if (this.authService.isBpmLoggedIn()) { - this.setBPMInfo(); - } - } - - setECMInfo() { - this.discovery.getEcmProductInfo().subscribe((repository) => { - this.repository = repository as RepositoryInfo; - - this.statusEntries = Object.keys(repository.status).map((key) => ({ - property: key, - value: repository.status[key] - })); - - if (repository.license) { - this.licenseEntries = Object.keys(repository.license).map((key) => { - if (ObjectUtils.isObject(repository.license[key])) { - return { - property: key, - value: ObjectUtils.booleanPrettify(repository.license[key], StringUtils.prettifyBooleanEnabled) - }; - }; - - return { - property: key, - value: repository.license[key] - }; - }); - } - }); - } - - setBPMInfo() { - this.discovery.getBpmProductInfo().subscribe((bpmVersion) => { - this.bpmVersion = bpmVersion; - }); - } - +export class AboutComponent { + @ContentChildren(AboutPanelDirective) + panels: QueryList; } diff --git a/lib/core/src/lib/about/about.module.ts b/lib/core/src/lib/about/about.module.ts index eb1b8d8e47..06240aa904 100644 --- a/lib/core/src/lib/about/about.module.ts +++ b/lib/core/src/lib/about/about.module.ts @@ -30,6 +30,8 @@ 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: [ @@ -40,6 +42,8 @@ import { MatExpansionModule } from '@angular/material/expansion'; ], declarations: [ AboutComponent, + AboutPanelDirective, + AboutRepositoryInfoComponent, AboutPlatformVersionComponent, AboutGithubLinkComponent, AboutServerSettingsComponent, @@ -51,6 +55,8 @@ import { MatExpansionModule } from '@angular/material/expansion'; ], exports: [ AboutComponent, + AboutPanelDirective, + AboutRepositoryInfoComponent, AboutPlatformVersionComponent, AboutGithubLinkComponent, AboutServerSettingsComponent, diff --git a/lib/core/src/lib/about/public-api.ts b/lib/core/src/lib/about/public-api.ts index d0da8a26d4..e80b4b9d3a 100644 --- a/lib/core/src/lib/about/public-api.ts +++ b/lib/core/src/lib/about/public-api.ts @@ -24,5 +24,8 @@ export * from './about-platform-version/about-platform-version.component'; export * from './about-server-settings/about-server-settings.component'; export * from './about-status-list/about-status-list.component'; export * from './about.component'; +export * from './about-panel.directive'; +export * from './about-repository-info/about-repository-info.component'; +export * from './about-repository-info/repository-info.interface'; export * from './about.module';