feat(admin-ui): Display version in ui

admin-ui/src/app/core/components/main-nav/main-nav.component.scss

@@ -8,6 +8,7 @@
 
 nav.sidenav {
     height: 100%;
+    width: auto;
 }
 
 .nav-list clr-icon {

admin-ui/src/app/dashboard/components/dashboard/dashboard.component.html

@@ -1 +1,4 @@
-<h1>Dashboard</h1>
+<div class="placeholder">
+    <div class="version">vendure {{ version }}</div>
+    <clr-icon shape="line-chart" size="256"></clr-icon>
+</div>

admin-ui/src/app/dashboard/components/dashboard/dashboard.component.scss

@@ -0,0 +1,14 @@
+@import "variables";
+
+.placeholder {
+    color: $color-grey-3;
+    text-align: center;
+    .version {
+        font-size: 3em;
+        margin: 24px;
+        line-height: 1em;
+    }
+    ::ng-deep .clr-i-outline {
+        fill: $color-grey-2;
+    }
+}

admin-ui/src/app/dashboard/components/dashboard/dashboard.component.ts

@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
 
+import { environment } from '../../../../environments/environment';
+
 @Component({
     selector: 'vdr-dashboard',
     templateUrl: './dashboard.component.html',
     styleUrls: ['./dashboard.component.scss'],
 })
-export class DashboardComponent {}
+export class DashboardComponent {
+    version = environment.version;
+}

admin-ui/src/app/login/components/login/login.component.html

@@ -31,5 +31,6 @@
                 {{ 'common.login' | translate }}
             </button>
         </div>
+        <div class="version">vendure {{ version }}</div>
     </form>
 </div>

admin-ui/src/app/login/components/login/login.component.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .login-wrapper {
     background-image: url("/assets/dark-triangles.png");
     background-repeat: repeat;
@@ -8,3 +10,11 @@
 .title {
     text-align: center;
 }
+
+.version {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    color: $color-grey-3;
+}

admin-ui/src/app/login/components/login/login.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
+import { environment } from '../../../../environments/environment';
 import { AuthService } from '../../../core/providers/auth/auth.service';
 import { AUTH_REDIRECT_PARAM } from '../../../data/providers/interceptor';
 
@@ -13,6 +14,7 @@ export class LoginComponent {
     username = '';
     password = '';
     rememberMe = false;
+    version = environment.version;
 
     constructor(private authService: AuthService, private router: Router) {}
 

admin-ui/src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
+declare function require(path: string): any;
 export const environment = {
     production: true,
+    version: require('../../../server/package.json').version,
 };

admin-ui/src/environments/environment.ts

@@ -1,9 +1,10 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
-
+declare function require(path: string): any;
 export const environment = {
     production: false,
+    version: require('../../../server/package.json').version,
 };
 
 /*

admin-ui/src/polyfills.ts

@@ -13,7 +13,7 @@
  *
  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
  */
-
+// tslint:disable:ordered-imports
 /***************************************************************************************************
  * BROWSER POLYFILLS
  */
@@ -74,8 +74,8 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-
 import '@clr/icons';
+import '@clr/icons/shapes/chart-shapes';
 import '@clr/icons/shapes/commerce-shapes';
 import '@clr/icons/shapes/essential-shapes';
 import '@clr/icons/shapes/media-shapes';