feat: redesign auto-update component (#910)

packages/uhk-web/src/app/components/agent/settings/settings.component.html

@@ -4,10 +4,8 @@
         <span class="macro__name pane-title__name">Settings</span>
     </h1>
 </div>
-<auto-update-settings [version]="version"
-                      [settings]="autoUpdateSettings$ | async"
+<auto-update-settings [settings]="autoUpdateSettings$ | async"
                       [checkingForUpdate]="checkingForUpdate$ | async"
                       (toggleCheckForUpdateOnStartUp)="toogleCheckForUpdateOnStartUp($event)"
-                      (toggleUsePreReleaseUpdate)="toogleUsePreReleaseUpdate($event)"
-                      (checkForUpdate)="checkForUpdate()">
+                      (checkForUpdate)="checkForUpdate($event)">
 </auto-update-settings>

packages/uhk-web/src/app/components/agent/settings/settings.component.ts

@@ -1,15 +1,13 @@
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
+import { AutoUpdateSettings } from 'uhk-common';
 
 import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../../store';
 import {
     CheckForUpdateNowAction,
-    ToggleCheckForUpdateOnStartupAction,
-    TogglePreReleaseFlagAction
+    ToggleCheckForUpdateOnStartupAction
 } from '../../../store/actions/auto-update-settings';
-import { AutoUpdateSettings } from '../../../models/auto-update-settings';
-import { getVersions } from '../../../util';
 
 @Component({
     selector: 'settings',
@@ -20,7 +18,6 @@ import { getVersions } from '../../../util';
     }
 })
 export class SettingsComponent {
-    version: string = getVersions().version;
     autoUpdateSettings$: Observable<AutoUpdateSettings>;
     checkingForUpdate$: Observable<boolean>;
 
@@ -33,11 +30,7 @@ export class SettingsComponent {
         this.store.dispatch(new ToggleCheckForUpdateOnStartupAction(value));
     }
 
-    toogleUsePreReleaseUpdate(value: boolean) {
-        this.store.dispatch(new TogglePreReleaseFlagAction(value));
-    }
-
-    checkForUpdate() {
-        this.store.dispatch(new CheckForUpdateNowAction());
+    checkForUpdate(allowPrerelease: boolean): void {
+        this.store.dispatch(new CheckForUpdateNowAction(allowPrerelease));
     }
 }

packages/uhk-web/src/app/components/auto-update-settings/auto-update-settings.html

@@ -9,21 +9,7 @@
             </label>
         </div>
 
-        <div class="checkbox">
-            <label>
-                <input type="checkbox"
-                       [checked]="settings.usePreReleaseUpdate"
-                       (change)="emitUsePreReleaseUpdate($event.target.checked)"> Allow alpha / pre release
-            </label>
-        </div>
-        <div class="form-group">
-            <label class="col-sm-2 control-label">Version:</label>
-            <div class="col-sm-10">
-                <p>{{version}}</p>
-            </div>
-        </div>
-
-        <button class="btn btn-link" (click)="emitCheckForUpdate()">
+        <button class="btn btn-link" (click)="emitCheckForUpdate($event)">
             Check for update
             <span *ngIf="checkingForUpdate"
                   class="fa fa-spinner fa-spin"></span>

packages/uhk-web/src/app/components/auto-update-settings/auto-update-settings.ts

@@ -9,13 +9,11 @@ import { State } from '../../store/reducers/auto-update-settings';
 })
 export class AutoUpdateSettings {
 
-    @Input() version: string;
     @Input() settings: State | undefined;
     @Input() checkingForUpdate: boolean;
 
     @Output() toggleCheckForUpdateOnStartUp = new EventEmitter<boolean>();
-    @Output() toggleUsePreReleaseUpdate = new EventEmitter<boolean>();
-    @Output() checkForUpdate = new EventEmitter();
+    @Output() checkForUpdate = new EventEmitter<boolean>();
 
     constructor() {
     }
@@ -24,11 +22,7 @@ export class AutoUpdateSettings {
         this.toggleCheckForUpdateOnStartUp.emit(value);
     }
 
-    emitUsePreReleaseUpdate(value: boolean) {
-        this.toggleUsePreReleaseUpdate.emit(value);
-    }
-
-    emitCheckForUpdate() {
-        this.checkForUpdate.emit();
+    emitCheckForUpdate($event: MouseEvent) {
+        this.checkForUpdate.emit($event.shiftKey);
     }
 }

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -136,12 +136,12 @@
                (click)="toggleHide($event, 'agent')"></i>
         </div>
         <ul [@toggler]="animation['agent']">
-            <!--li class="sidebar__level-2--item">
+            <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/settings']"
                        [class.disabled]="state.updatingFirmware">Settings</a>
                 </div>
-            </li-->
+            </li>
             <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/help']"

packages/uhk-web/src/app/components/side-menu/side-menu.component.scss

@@ -1,10 +1,15 @@
+@import '../../../styles/common';
+
 :host {
     background-color: #f5f5f5;
     border-right: 1px solid #ccc;
     position: fixed;
     overflow-y: auto;
+    top: 0;
     width: 250px;
     height: 100%;
+
+    @include updatePanelVisible();
 }
 
 a {
@@ -34,6 +39,7 @@ ul {
     &__level-0 {
         padding: 0.5rem 1rem 0;
     }
+
     &__level-1 {
         padding: 0.5rem 1rem 0.5rem 2rem;
     }

packages/uhk-web/src/app/components/update-available/update-available.component.html

@@ -1,5 +1,15 @@
-<div class="app-update-available-wrapper">
-    New version available.
-    <button type="button" (click)="updateApp.emit()" class="btn btn-primary">Update</button>
-    <button type="button" (click)="doNotUpdateApp.emit()" class="btn btn-default">Close</button>
+<div class="app-update-available-wrapper" role="alert">
+        Agent {{ updateInfo.version }} has been <span *ngIf="updateInfo.isPrerelease">pre-</span>released.
+
+        <button type="button"
+                class="btn btn-link underline"
+                (click)="updateApp.emit()" >Update now!</button>
+
+        <button type="button"
+                class="btn btn-link pull-right"
+                data-dismiss="alert"
+                aria-label="Close"
+                (click)="doNotUpdateApp.emit()">
+            <span aria-hidden="true">&times;</span>
+        </button>
 </div>

packages/uhk-web/src/app/components/update-available/update-available.component.scss

@@ -1,5 +1,19 @@
 .app-update-available-wrapper {
-    display: flex;
-    justify-content: center;
-    margin: 0.5rem;
+    margin: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    background-color: #428bca;
+    color: white;
+    text-align: center;
+    border-radius: 0;
+    border-width: 0;
+
+    .btn-link {
+        color: white;
+
+        &.underline {
+            text-decoration: underline;
+        }
+    }
 }

packages/uhk-web/src/app/components/update-available/update-available.component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { UpdateInfo } from '../../models/update-info';
 
 @Component({
     selector: 'app-update-available',
@@ -7,6 +9,8 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angul
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UpdateAvailableComponent {
+    @Input() updateInfo: UpdateInfo;
+
     @Output() updateApp = new EventEmitter<null>();
     @Output() doNotUpdateApp = new EventEmitter<null>();
 }