[ACS-3751] make About layout collapsible (#7959)

* make About layout collapsible

* fix export

* remove empty css

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

@@ -1,67 +1,45 @@
-<header data-automation-id="adf-about-product-version-title">{{ 'ABOUT.VERSIONS.TITLE' | translate }}</header>
+<ng-container *ngIf="process">
-<mat-card class="mat-elevation-z0">
-
-    <ng-container *ngIf="process" data-automation-id="adf-about-bpm-service">
     <article>
     <div>{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}</div>
-        <p data-automation-id="adf-about-bpm-version">
+    <p>
-            {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ process.majorVersion }}.{{
+        {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ process.majorVersion }}.{{process.minorVersion }}.{{ process.revisionVersion }}
-            process.minorVersion }}.{{ process.revisionVersion }}
     </p>
     </article>
-    </ng-container>
+</ng-container>
-    <br>
+
-    <ng-container *ngIf="repository" data-automation-id="adf-about-ecm-service">
+<ng-container *ngIf="repository">
     <article>
         <div>{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}</div>
-            <p data-automation-id="adf-about-ecm-edition">
+        <p>{{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ repository.edition }}</p>
-                {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ repository.edition }}
+        <p>{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ repository.version.display }}</p>
-            </p>
-            <p data-automation-id="adf-about-ecm-version">
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ repository.version.display }}
-            </p>
     </article>
-    </ng-container>
+</ng-container>
-    <br>
+
-    <ng-container *ngIf="modeling$ | async as modeling" data-automation-id="adf-about-ecm-service">
+<ng-container *ngIf="modeling$ | async as modeling">
     <article>
         <div>{{ 'ABOUT.VERSIONS.MODELING_SERVICE' | translate }}</div>
-            <p>
+        <p>{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ modeling.version }}</p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ modeling.version }}
-            </p>
     </article>
-    </ng-container>
+</ng-container>
-    <br>
+
-    <ng-container *ngIf="deployment$| async as deployment" data-automation-id="adf-about-ecm-service">
+<ng-container *ngIf="deployment$| async as deployment">
     <article>
         <div>{{ 'ABOUT.VERSIONS.DEPLOYMENT_SERVICE' | translate }}</div>
-            <p>
+        <p>{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ deployment.version }}</p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ deployment.version }}
-            </p>
     </article>
-    </ng-container>
+</ng-container>
-    <br>
+
-    <ng-container *ngIf="rb$ | async as rb"  data-automation-id="adf-about-ecm-service">
+<ng-container *ngIf="rb$ | async as rb">
     <article>
         <div>{{ 'ABOUT.VERSIONS.RB' | translate }}</div>
-            <p>
+        <p>{{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ rb.artifact }}</p>
-                {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ rb.artifact }}
+        <p>{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ rb.version }}</p>
-            </p>
-            <p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ rb.version }}
-            </p>
     </article>
-    </ng-container>
+</ng-container>
-    <br>
+
-    <ng-container *ngIf="query$ | async as query" data-automation-id="adf-about-ecm-service">
+<ng-container *ngIf="query$ | async as query">
     <article>
         <div>{{ 'ABOUT.VERSIONS.QUERY_SERVICE' | translate }}</div>
-            <p>
+        <p>{{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ query.version }}</p>
-                {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ query.version }}
-            </p>
     </article>
-    </ng-container>
+</ng-container>
-</mat-card>
-
-
-

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

@@ -1,5 +1,4 @@
 <div class="adf-github-link-container">
-    <header data-automation-id="adf-about-setting-title">{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</header>
     <mat-card class="mat-elevation-z0">
         <p data-automation-id="adf-process-service-host">
             {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}

lib/core/src/lib/about/about.component.html

@@ -1,13 +1,23 @@
-<div class="adf-about-container">
+<mat-accordion [togglePosition]="'before'">
+    <mat-expansion-panel *ngIf="dev">
+        <mat-expansion-panel-header>
+            <mat-panel-title>{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</mat-panel-title>
+        </mat-expansion-panel-header>
+        <adf-about-server-settings></adf-about-server-settings>
+    </mat-expansion-panel>
 
-    <adf-about-server-settings *ngIf="dev" ></adf-about-server-settings>
+    <mat-expansion-panel>
-
+        <mat-expansion-panel-header>
-    <adf-about-platform-version [repository]="repository"
+          <mat-panel-title>{{ 'ABOUT.VERSIONS.TITLE' | translate }}</mat-panel-title>
-                                [process]="bpmVersion">
+        </mat-expansion-panel-header>
-    </adf-about-platform-version>
+        <adf-about-platform-version [repository]="repository" [process]="bpmVersion"></adf-about-platform-version>
-
+    </mat-expansion-panel>
-    <ng-container *ngIf="repository">
 
+    <mat-expansion-panel *ngIf="repository">
+        <mat-expansion-panel-header>
+            <mat-panel-title>{{ 'ABOUT.REPOSITORY' | translate }}</mat-panel-title>
+        </mat-expansion-panel-header>
+        <div>
             <article *ngIf="licenseEntries">
                 <header>{{ 'ABOUT.LICENSE.TITLE' | translate }}</header>
                 <adf-about-license-list [data]="licenseEntries"></adf-about-license-list>
@@ -22,18 +32,20 @@
                 <header>{{ 'ABOUT.MODULES.TITLE' | translate }}</header>
                 <adf-about-module-list [data]="repository.modules"></adf-about-module-list>
             </article>
-    </ng-container>
+        </div>
+    </mat-expansion-panel>
 
-    <article *ngIf="dependencyEntries && dev" >
+    <mat-expansion-panel *ngIf="dependencyEntries && dev">
-        <header>{{ 'ABOUT.PACKAGES.TITLE' | translate }}</header>
+        <mat-expansion-panel-header>
+            <mat-panel-title>{{ 'ABOUT.PACKAGES.TITLE' | translate }}</mat-panel-title>
+        </mat-expansion-panel-header>
         <adf-about-package-list [data]="dependencyEntries"></adf-about-package-list>
-    </article>
+    </mat-expansion-panel>
 
-    <ng-container *ngIf="extensions$ | async as extensions">
+    <mat-expansion-panel *ngIf="extensions$ | async as extensions">
-        <article *ngIf="extensions.length > 0">
+        <mat-expansion-panel-header>
-            <header>{{ 'ABOUT.PLUGINS.TITLE' | translate }}</header>
+            <mat-panel-title>{{ 'ABOUT.PLUGINS.TITLE' | translate }}</mat-panel-title>
+        </mat-expansion-panel-header>
         <adf-about-extension-list [data]="extensions"></adf-about-extension-list>
-        </article>
+    </mat-expansion-panel>
-    </ng-container>
+</mat-accordion>
-
-</div>

lib/core/src/lib/about/about.component.scss

@@ -1,9 +0,0 @@
-adf-about {
-    .adf-about-container {
-        margin: 10px 0 5px 2px;
-    }
-
-    header {
-        margin: 5px;
-    }
-}

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

@@ -31,7 +31,6 @@ import { StringUtils } from '../utils/string-utils';
 @Component({
     selector: 'adf-about',
     templateUrl: './about.component.html',
-    styleUrls: ['./about.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class AboutComponent implements OnInit {

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

@@ -29,12 +29,14 @@ 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';
 
 @NgModule({
     imports: [
         CommonModule,
         MaterialModule,
-        TranslateModule
+        TranslateModule,
+        MatExpansionModule
     ],
     declarations: [
         AboutComponent,

lib/core/src/lib/i18n/en.json

@@ -508,6 +508,7 @@
       "CONTENT_SERVICE_HOST": "Alfresco Content Services URL: {{ value }}",
       "PROCESS_SERVICE_HOST": "Alfresco Process Services URL: {{ value }}"
     },
+    "REPOSITORY": "Repository",
     "VERSIONS": {
       "TITLE": "Product Versions",
       "CONTENT_SERVICE": "Content Services",

lib/testing/src/lib/protractor/core/pages/about.page.ts

@@ -1,164 +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 { $ } from 'protractor';
-import { BrowserVisibility } from '../utils/browser-visibility';
-import { DataTableComponentPage } from './data-table-component.page';
-
-export class AboutPage {
-
-    moduleColumns = {
-        id: 'id',
-        title: 'title',
-        installDate: 'installDate',
-        installState: 'installState',
-        versionMin: 'versionMin'
-    };
-
-    licenseColumns = {
-        issuedAt: 'issuedAt',
-        expiresAt: 'expiresAt',
-        remainingDays: 'remainingDays',
-        holder: 'holder',
-        mode: 'mode'
-    };
-
-    statusColumns = {
-        isReadOnly: 'isReadOnly',
-        isAuditEnabled: 'isAuditEnabled'
-    };
-
-    packageColumns = {
-        name: 'name',
-        version: 'version'
-    };
-
-    appTitle = $('[data-automation-id="adf-github-app-title"]');
-    sourceCodeTitle = $('[data-automation-id="adf-github-source-code-title"]');
-    githubUrl = $('[data-automation-id="adf-github-url"]');
-    githubVersion = $('[data-automation-id="adf-github-version"]');
-    bpmHost = $('[data-automation-id="adf-process-service-host"]');
-    ecmHost = $('[data-automation-id="adf-content-service-host"]');
-    productVersionTitle = $('[data-automation-id="adf-about-product-version-title"]');
-    bpmEdition = $('[data-automation-id="adf-about-bpm-edition"]');
-    ecmEdition = $('[data-automation-id="adf-about-ecm-edition"]');
-    bpmVersion = $('[data-automation-id="adf-about-bpm-version"]');
-    ecmVersion = $('[data-automation-id="adf-about-ecm-version"]');
-    ecmStatusTitle = $('[data-automation-id="adf-about-ecm-status-title"]');
-    ecmLicenseTitle = $('[data-automation-id="adf-about-ecm-license-title"]');
-    ecmModulesTitle = $('[data-automation-id="adf-about-ecm-modules-title"]');
-    aboutModulesTitle = $('[data-automation-id="adf-about-modules-title"]');
-
-    dataTable = new DataTableComponentPage();
-
-    getDataTable(): DataTableComponentPage {
-        return this.dataTable;
-    }
-
-    async checkStatusColumnsIsDisplayed(): Promise<void> {
-        await  this.checkColumnIsDisplayed(this.statusColumns.isAuditEnabled);
-        await  this.checkColumnIsDisplayed(this.statusColumns.isReadOnly);
-    }
-
-    async checkPackageColumnsIsDisplayed(): Promise<void> {
-        await  this.checkColumnIsDisplayed(this.packageColumns.name);
-        await  this.checkColumnIsDisplayed(this.packageColumns.version);
-    }
-
-    async checkLicenseColumnsIsDisplayed(): Promise<void> {
-        await  this.checkColumnIsDisplayed(this.licenseColumns.expiresAt);
-        await  this.checkColumnIsDisplayed(this.licenseColumns.issuedAt);
-        await  this.checkColumnIsDisplayed(this.licenseColumns.remainingDays);
-        await  this.checkColumnIsDisplayed(this.licenseColumns.holder);
-        await  this.checkColumnIsDisplayed(this.licenseColumns.mode);
-    }
-
-    async checkModulesColumnsIsDisplayed(): Promise<void> {
-        await  this.checkColumnIsDisplayed(this.moduleColumns.id);
-        await  this.checkColumnIsDisplayed(this.moduleColumns.installDate);
-        await  this.checkColumnIsDisplayed(this.moduleColumns.installState);
-        await  this.checkColumnIsDisplayed(this.moduleColumns.versionMin);
-        await  this.checkColumnIsDisplayed(this.moduleColumns.title);
-    }
-
-    async checkAboutListIsLoaded() {
-        await this.dataTable.tableIsLoaded();
-        await this.dataTable.waitTillContentLoaded();
-    }
-
-    async checkAppTitleIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.appTitle);
-    }
-
-    async checkAboutModulesTitleIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.aboutModulesTitle);
-    }
-
-    async checkSourceCodeTitleIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.sourceCodeTitle);
-    }
-
-    async checkGithubUrlIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.githubUrl);
-    }
-
-    async checkGithubVersionIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.githubVersion);
-    }
-
-    async checkBpmHostIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.githubUrl);
-    }
-
-    async checkEcmHostIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.githubVersion);
-    }
-
-    async checkProductVersionTitleIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.productVersionTitle);
-    }
-    async checkBpmEditionIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.bpmEdition);
-    }
-
-    async checkEcmEditionIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.ecmEdition);
-    }
-
-    async checkBpmVersionIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.bpmVersion);
-    }
-    async checkEcmVersionIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.ecmVersion);
-    }
-    async checkEcmStatusTitleIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.ecmStatusTitle);
-    }
-
-    async checkEcmLicenseTitleIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.ecmLicenseTitle);
-    }
-
-    async checkEcmModulesTitleIsDisplayed(): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.ecmModulesTitle);
-    }
-
-    async checkColumnIsDisplayed(column: string): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible($(`div[data-automation-id="auto_id_${column}"]`));
-    }
-
-}

lib/testing/src/lib/protractor/core/pages/public-api.ts

@@ -32,7 +32,6 @@ export * from './material/public-api';
 export * from './card-view/public-api';
 export * from './viewer.page';
 export * from './config-editor-page';
-export * from './about.page';
 export * from './snackbar.page';
 export * from './data-table/public-api';
 export * from './context-menu.page';