[ACA-931] Information page (#46)

* information page

* uncomment template

* correct import

.angular-cli.json

@@ -11,6 +11,7 @@
         "assets",
         "favicon-96x96.png",
         "app.config.json",
+        "versions.json",
 
         { "glob": "**/*", "input": "../node_modules/ng2-alfresco-core/bundles/assets", "output": "./assets/" },
         { "glob": "**/*", "input": "../node_modules/ng2-alfresco-datatable/bundles/assets", "output": "./assets/" },

.gitignore

@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+/src/versions.json
 
 # dependencies
 /node_modules

package.json

@@ -4,14 +4,15 @@
   "license": "Apache-2.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --open",
-    "build": "ng build",
-    "build:prod": "ng build --prod",
-    "build:dev": "ng build && node postbuild-dev.js",
+    "start": "npm run server-versions && ng serve --open",
+    "build": "npm run server-versions && ng build",
+    "build:prod": "npm run server-versions && ng build --prod",
+    "build:dev": "npm run server-versions && ng build && node postbuild-dev.js",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "start:dist": "wsrv"
+    "start:dist": "wsrv",
+    "server-versions": "rimraf ./src/versions.json && npm list --depth=0 --json=true --prod=true > ./src/versions.json  || exit 0"
   },
   "private": true,
   "dependencies": {
@@ -62,6 +63,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "node-rest-client": "^3.1.0",
     "protractor": "^5.1.2",
+    "rimraf": "2.6.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
     "typescript": "~2.3.3"

src/app/app.module.ts

@@ -41,6 +41,7 @@ import { HeaderComponent } from './components/header/header.component';
 import { CurrentUserComponent } from './components/current-user/current-user.component';
 import { SearchComponent } from './components/search/search.component';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
+import { AboutComponent } from './components/about/about.component';
 
 @NgModule({
     imports: [
@@ -67,7 +68,8 @@ import { SidenavComponent } from './components/sidenav/sidenav.component';
         RecentFilesComponent,
         SharedFilesComponent,
         TrashcanComponent,
-        PreviewComponent
+        PreviewComponent,
+        AboutComponent
     ],
     providers: [
         {

src/app/app.routes.ts

@@ -26,6 +26,7 @@ import { LibrariesComponent } from './components/libraries/libraries.component';
 import { RecentFilesComponent } from './components/recent-files/recent-files.component';
 import { SharedFilesComponent } from './components/shared-files/shared-files.component';
 import { TrashcanComponent } from './components/trashcan/trashcan.component';
+import { AboutComponent } from './components/about/about.component';
 
 import { LoginComponent } from './components/login/login.component';
 import { PreviewComponent } from './components/preview/preview.component';
@@ -34,13 +35,16 @@ import { GenericErrorComponent } from './components/generic-error/generic-error.
 export const APP_ROUTES: Routes = [
     {
         path: 'preview/:nodeId',
-        component: PreviewComponent
+        component: PreviewComponent,
+        data: {
+            i18nTitle: 'APP.PREVIEW.TITLE'
+        }
     },
     {
         path: 'login',
         component: LoginComponent,
         data: {
-            title: 'Sign in'
+            i18nTitle: 'APP.SIGN_IN'
         }
     },
     {
@@ -113,6 +117,13 @@ export const APP_ROUTES: Routes = [
                     i18nTitle: 'APP.BROWSE.TRASHCAN.TITLE'
                 }
             },
+            {
+                path: 'about',
+                component: AboutComponent,
+                data: {
+                    i18nTitle: 'APP.BROWSE.ABOUT.TITLE'
+                }
+            },
             {
                 path: '**',
                 component: GenericErrorComponent

src/app/components/about/about.component.html

@@ -0,0 +1,41 @@
+<div class="inner-layout inner-layout--scroll">
+    <div class="inner-layout__content inner-layout__content--scroll">
+        <article *ngIf="ecmVersion" class="padding">
+            <header class="header padding-left">Product Version</header>
+            <p class="padding-left"> {{ ecmVersion.edition }} {{ ecmVersion.version.display }} </p>
+        </article>
+
+        <article class="padding-top-bottom">
+            <header class="header padding-left-right">License</header>
+            <adf-datatable [data]="license"></adf-datatable>
+        </article>
+
+        <article class="padding-top-bottom">
+            <header class="header padding-left-right">Status</header>
+            <adf-datatable [data]="status"></adf-datatable>
+        </article>
+
+        <article class="padding-top-bottom">
+            <header class="header padding-left-right">Modules</header>
+            <adf-datatable [data]="modules"></adf-datatable>
+        </article>
+
+        <article *ngIf="githubUrlCommitAlpha" class="padding">
+            <header class="header">Source code</header>
+
+            <small>You are running the project based on the following commit:</small>
+
+            <p>
+                <a [href]="githubUrlCommitAlpha" target="blank">{{githubUrlCommitAlpha}}</a>
+            </p>
+        </article>
+
+        <article>
+            <header class="header padding-left-right">Packages</header>
+
+            <small class="padding-left-right">Current project is using the following ADF libraries:</small>
+
+            <adf-datatable [data]="data"></adf-datatable>
+        </article>
+    </div>
+</div>

src/app/components/about/about.component.scss

@@ -0,0 +1,37 @@
+@import 'variables';
+
+article {
+    color: $alfresco-secondary-text-color;
+}
+
+article:first-of-type {
+    padding-bottom: 0;
+}
+
+article:last-of-type {
+    margin-bottom: 50px;
+}
+
+header {
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: -0.2px;
+}
+
+a {
+    text-decoration: none;
+    color: $alfresco-primary-text-color;
+}
+
+.padding {
+    padding: 25px;
+}
+
+.padding-top-bottom {
+    padding: 25px 0 25px 0;
+}
+
+.padding-left-right {
+    padding: 0 25px 0 25px;
+}

src/app/components/about/about.component.ts

@@ -0,0 +1,90 @@
+/*!
+ * @license
+ * Copyright 2017 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, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import { DiscoveryApiService, EcmProductVersionModel  } from 'ng2-alfresco-core';
+import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
+
+@Component({
+    selector: 'app-about',
+    templateUrl: './about.component.html',
+    styleUrls: [ './about.component.scss' ]
+})
+export class AboutComponent implements OnInit {
+    ecmVersion: EcmProductVersionModel = null;
+    data: ObjectDataTableAdapter;
+    status: ObjectDataTableAdapter;
+    license: ObjectDataTableAdapter;
+    modules: ObjectDataTableAdapter;
+    githubUrlCommitAlpha = 'https://github.com/Alfresco/alfresco-content-app/commits';
+
+
+    constructor(
+        private discovery: DiscoveryApiService,
+        private http: Http
+    ) {}
+
+    ngOnInit() {
+        this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+            this.ecmVersion = ecmVers;
+
+            this.modules = new ObjectDataTableAdapter(this.ecmVersion.modules, [
+                {type: 'text', key: 'id', title: 'ID', sortable: true},
+                {type: 'text', key: 'title', title: 'Title', sortable: true},
+                {type: 'text', key: 'version', title: 'Description', sortable: true},
+                {type: 'text', key: 'installDate', title: 'Install Date', sortable: true},
+                {type: 'text', key: 'installState', title: 'Install State', sortable: true},
+                {type: 'text', key: 'versionMin', title: 'Version Minor', sortable: true},
+                {type: 'text', key: 'versionMax', title: 'Version Max', sortable: true}
+            ]);
+
+            this.status = new ObjectDataTableAdapter([this.ecmVersion.status], [
+                {type: 'text', key: 'isReadOnly', title: 'Read Only', sortable: true},
+                {type: 'text', key: 'isAuditEnabled', title: 'Audit Enable', sortable: true},
+                {type: 'text', key: 'isQuickShareEnabled', title: 'Quick Shared Enable', sortable: true},
+                {type: 'text', key: 'isThumbnailGenerationEnabled', title: 'Thumbnail Generation', sortable: true}
+            ]);
+
+            this.license = new ObjectDataTableAdapter([this.ecmVersion.license], [
+                {type: 'text', key: 'issuedAt', title: 'Issued At', sortable: true},
+                {type: 'text', key: 'expiresAt', title: 'Expires At', sortable: true},
+                {type: 'text', key: 'remainingDays', title: 'Remaining Days', sortable: true},
+                {type: 'text', key: 'holder', title: 'Holder', sortable: true},
+                {type: 'text', key: 'mode', title: 'Type', sortable: true},
+                {type: 'text', key: 'isClusterEnabled', title: 'Cluster Enabled', sortable: true},
+                {type: 'text', key: 'isCryptodocEnabled', title: 'Cryptodoc Enable', sortable: true}
+            ]);
+        });
+
+        this.http.get('/versions.json').subscribe(response => {
+            const regexp = new RegExp('^(ng2-alfresco|alfresco-)');
+
+            const alfrescoPackagesTableRepresentation = Object.keys(response.json().dependencies)
+                .filter((val) => regexp.test(val))
+                .map((val) => ({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                }));
+
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
+                {type: 'text', key: 'name', title: 'Name', sortable: true},
+                {type: 'text', key: 'version', title: 'Version', sortable: true}
+            ]);
+        });
+    }
+}

src/app/ui/_layout.scss

@@ -44,6 +44,10 @@ $app-inner-layout--footer-height: 48px;
     flex: 1;
     flex-direction: column;
 
+    &--scroll {
+        overflow: auto;
+    }
+
     &__header,
     &__footer {
         display: flex;
@@ -65,6 +69,10 @@ $app-inner-layout--footer-height: 48px;
         overflow: hidden;
     }
 
+    &__content--scroll {
+        overflow: auto;
+    }
+
     &__footer {
         flex-basis: $app-inner-layout--footer-height;
         border-top: 1px solid $alfresco-divider-color;

src/app/ui/overrides/_alfresco-document-list.scss

@@ -14,14 +14,18 @@ adf-document-list {
     }
 }
 
-adf-document-list .adf-data-table {
+.adf-data-table {
     border: none !important;
 
     .sr-only {
         display: none;
     }
 
-    tr, td {
+    th, td {
+        color: $alfresco-secondary-text-color;
+    }
+
+    th, tr, td {
         &:focus {
             outline: none !important;
         }
@@ -76,6 +80,15 @@ adf-document-list .adf-data-table {
         }
     }
 
+    .adf-data-table__header--sorted-asc,
+    .adf-data-table__header--sorted-desc {
+        &:hover {
+            &:before {
+                color: inherit !important;
+            }
+        }
+    }
+
     .adf-location-cell {
         a {
             text-decoration: none;

src/assets/i18n/en.json

@@ -3,6 +3,9 @@
         "LANGUAGE": "Language",
         "SIGN_IN": "Sign in",
         "SIGN_OUT": "Sign out",
+        "PREVIEW": {
+            "TITLE": "Preview"
+        },
         "NEW_MENU": {
             "LABEL": "New",
             "MENU_ITEMS": {
@@ -82,6 +85,9 @@
                     "FIRST_TEXT": "Items you delete are moved to the Trash.",
                     "SECOND_TEXT": "Empty Trash to permanently delete items."
                 }
+            },
+            "ABOUT": {
+                "TITLE": "About"
             }
         },
         "ACTIONS": {