feat: tweak user config history with serial number and set active tab of the currently connected device (#2351)

Author: ert78gb

packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html

@@ -62,7 +62,9 @@ <h1>
     <div class="row">
         <div class="col-md-6 ps-0">
             <user-configuration-history [state]="userConfigHistoryState$ | async"
-                                        (getUserConfigFromHistory)="getUserConfigFromHistory($event)"></user-configuration-history>
+                                        (getUserConfigFromHistory)="getUserConfigFromHistory($event)"
+                                        (changeTab)="changeConfigHistoryTab($event)"
+            ></user-configuration-history>
         </div>
     </div>
 </div>

packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts

@@ -20,6 +20,7 @@ import {
 } from '../../../store/actions/user-config';
 import { UhkProgressBarState, UserConfigHistoryComponentState } from '../../../models';
 import {
+    ChangeUserConfigurationHistoryTabAction,
     GetUserConfigurationFromHistoryAction,
     LoadUserConfigurationHistoryAction
 } from '../../../store/actions/user-configuration-history.actions';
@@ -56,6 +57,7 @@ export class DeviceConfigurationComponent implements OnInit, OnDestroy {
 
     ngOnDestroy(): void {
         this.subscription.unsubscribe();
+        this.changeConfigHistoryTab(null);
     }
 
     resetUserConfiguration() {
@@ -78,6 +80,10 @@ export class DeviceConfigurationComponent implements OnInit, OnDestroy {
         }
     }
 
+    changeConfigHistoryTab(index: number | null) {
+        this.store.dispatch(new ChangeUserConfigurationHistoryTabAction(index));
+    }
+
     changeFile(data: UploadFileData): void {
         this.store.dispatch(new LoadUserConfigurationFromFileAction({
             uploadFileData: {

packages/uhk-web/src/app/components/user-configuration-history/user-configuration-history.component.html

@@ -20,16 +20,19 @@ <h4 class="panel-title">
                 [class.disabled]="tab.disabled"
                 (click)="onSelectTab(index)">
                 <a class="nav-link"
-                    [class.active]="selectedTabIndex === index"
-                    [class.disabled]="tab.disabled">
+                   [class.active]="state.selectedTabIndex === index"
+                   [class.fw-bold]="tab.isCurrentDevice"
+                   [class.disabled]="tab.disabled"
+                   [attr.title]="tab.tooltip"
+                >
                     <span>{{ tab.displayText }}</span>
                 </a>
            </li>
         </ul>
 
         <ul class="list-unstyled mb-0 mt-2"
-            *ngIf="!state.loading">
-            <li *ngFor="let fileInfo of state.tabs[selectedTabIndex].files; trackBy:trackByFn">
+            *ngIf="!state.loading && state.selectedTabIndex !== null">
+            <li *ngFor="let fileInfo of state.tabs[state.selectedTabIndex].files; trackBy:trackByFn">
                 <span class="btn btn-link btn-padding-0 current">
                     {{ fileInfo.timestamp }}
                 </span>

packages/uhk-web/src/app/components/user-configuration-history/user-configuration-history.component.ts

@@ -12,14 +12,13 @@ export class UserConfigurationHistoryComponent {
     @Input() state: UserConfigHistoryComponentState;
 
     @Output() getUserConfigFromHistory = new EventEmitter<string>();
-
-    selectedTabIndex = 0;
+    @Output() changeTab = new EventEmitter<number>();
 
     trackByFn(index: number, key: HistoryFileInfo): string {
         return key.file;
     }
 
     onSelectTab(index: number): void {
-        this.selectedTabIndex = index;
+        this.changeTab.emit(index);
     }
 }

packages/uhk-web/src/app/models/user-config-history-component-state.ts

@@ -20,9 +20,12 @@ export interface HistoryFileInfo {
 export interface Tab {
     displayText: string;
     files: HistoryFileInfo[];
+    isCurrentDevice: boolean;
+    tooltip: string;
 }
 
 export interface UserConfigHistoryComponentState {
+    selectedTabIndex: number | null;
     commonFiles: HistoryFileInfo[];
     tabs: Tab[];
     loading: boolean;

packages/uhk-web/src/app/store/actions/user-configuration-history.actions.ts

@@ -2,11 +2,17 @@ import { Action } from '@ngrx/store';
 import { UserConfigHistory } from 'uhk-common';
 
 export enum ActionTypes {
+    ChangeUserConfigurationHistoryTab = '[user-config] Change user configuration history tab',
     LoadUserConfigurationHistory = '[user-config] Load user configuration history',
     LoadUserConfigurationHistorySuccess = '[user-config] Load user configuration history success',
     GetUserConfigurationFromHistory = '[user-config] Get user configuration from history'
 }
 
+export class ChangeUserConfigurationHistoryTabAction implements Action {
+    type = ActionTypes.ChangeUserConfigurationHistoryTab;
+    constructor(public payload: number | null) {}
+}
+
 export class LoadUserConfigurationHistoryAction implements Action {
     type = ActionTypes.LoadUserConfigurationHistory;
 }
@@ -26,6 +32,7 @@ export class GetUserConfigurationFromHistoryAction implements Action {
 }
 
 export type Actions =
+    | ChangeUserConfigurationHistoryTabAction
     | LoadUserConfigurationHistoryAction
     | LoadUserConfigurationHistorySuccessAction
     | GetUserConfigurationFromHistoryAction

packages/uhk-web/src/app/store/index.ts

@@ -579,30 +579,49 @@ export const getUserConfigHistoryComponentState = createSelector(
             };
         }
 
+        let selectedTabIndex = state.activeTabIndex || 0;
+        const currentDeviceHasHistory = state.userConfigHistory.devices.find((device, index) => {
+            if (device.uniqueId === hardwareConfig?.uniqueId) {
+                if (state.activeTabIndex === null) {
+                    selectedTabIndex = index;
+                }
+
+                return true;
+            }
+
+            return false;
+        });
+
         const result: UserConfigHistoryComponentState = {
+            selectedTabIndex,
             commonFiles: state.userConfigHistory.commonFiles.map(fileMapper),
             loading: inElectron && state.loading,
             tabs: state.userConfigHistory.devices.map(device => {
                 return {
                     displayText: `${device.deviceName} (${device.device.name})`,
                     files: device.files.map(fileMapper),
+                    isCurrentDevice: device.uniqueId === hardwareConfig?.uniqueId,
+                    tooltip: `serial number: ${device.uniqueId}`,
                 };
             }),
             disabled: saving
         };
 
-        const currentDeviceHasHistory = state.userConfigHistory.devices.find(device => device.uniqueId === hardwareConfig?.uniqueId);
-
         if (result.tabs.length === 0 || !currentDeviceHasHistory) {
             let deviceName = UHK_60_V2_DEVICE.name;
+            let tooltip = '';
             if (hardwareConfig) {
+                tooltip = `serial number: ${hardwareConfig.uniqueId}`;
+
                 const uhkDevice = UHK_DEVICES.find(device => device.id === hardwareConfig.deviceId);
                 deviceName = uhkDevice ? uhkDevice.name : deviceName;
             }
 
             result.tabs.push({
                 displayText: `${userConfig.deviceName} (${deviceName})`,
-                files: []
+                files: [],
+                isCurrentDevice: true,
+                tooltip,
             });
         }
 

packages/uhk-web/src/app/store/reducers/user-configuration-history.reducer.ts

@@ -2,9 +2,15 @@ import {
     UserConfigHistory,
 } from 'uhk-common';
 
-import { Actions, ActionTypes, LoadUserConfigurationHistorySuccessAction } from '../actions/user-configuration-history.actions';
+import {
+    Actions,
+    ActionTypes,
+    ChangeUserConfigurationHistoryTabAction,
+    LoadUserConfigurationHistorySuccessAction,
+} from '../actions/user-configuration-history.actions';
 
 export interface State {
+    activeTabIndex: number | null;
     userConfigHistory: UserConfigHistory;
     loading: boolean;
 }
@@ -17,13 +23,20 @@ function defaultUserConfigHistory(): UserConfigHistory {
 }
 
 export const initialState: State = {
+    activeTabIndex: null,
     userConfigHistory: defaultUserConfigHistory(),
     loading: false
 };
 
 export function reducer(state = initialState, action: Actions) {
     switch (action.type) {
 
+        case ActionTypes.ChangeUserConfigurationHistoryTab:
+            return {
+                ...state,
+                activeTabIndex: (action as ChangeUserConfigurationHistoryTabAction).payload,
+            };
+
         case ActionTypes.LoadUserConfigurationHistory:
             return {
                 ...state,