UI updates: updated core dependencies to latest versions

rq1999 · Nov 24, 2021 · 1bd5609 · 1bd5609
1 parent beff4ad
commit 1bd5609
Show file tree

Hide file tree

Showing 60 changed files with 3,270 additions and 4,101 deletions.
diff --git a/package.json b/package.json
@@ -7,9 +7,7 @@
     "ui/demo/*"
   ],
   "devDependencies": {
-    "lerna": "^3.18.1"
+    "lerna": "^4.0.0"
   },
-  "resolutions": {
-
-  }
+  "resolutions": {}
 }
diff --git a/ui/app/console_loader/package.json b/ui/app/console_loader/package.json
@@ -19,10 +19,10 @@
   },
   "devDependencies": {
     "@openremote/util": "^1.0.4",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0",
-    "webpack-dev-server": "^3.11.2",
     "tslint": ">=5.11.0",
-    "typescript": ">=4.1.3"
+    "typescript": ">=4.5.2",
+    "webpack": "^5.64.3",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
   }
 }
diff --git a/ui/app/manager/package.json b/ui/app/manager/package.json
@@ -19,10 +19,10 @@
   },
   "devDependencies": {
     "@openremote/util": "^1.0.4",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0",
-    "webpack-dev-server": "^3.11.2",
     "tslint": ">=5.11.0",
-    "typescript": ">=4.1.3"
+    "typescript": ">=4.5.2",
+    "webpack": "^5.64.3",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
   }
 }
diff --git a/ui/app/manager/src/pages/page-account.ts b/ui/app/manager/src/pages/page-account.ts
@@ -11,7 +11,7 @@ export function pageAccountProvider<S extends AppStateKeyed>(store: EnhancedStor
     return {
         name: "account",
         routes: [
-            "account"
+            "/account"
         ],
         pageCreator: () => {
             return new PageAccount(store);

diff --git a/ui/app/manager/src/pages/page-assets.ts b/ui/app/manager/src/pages/page-assets.ts
@@ -275,16 +275,12 @@ class PageAssets<S extends AppStateKeyed> extends Page<S>  {
         }
     }
 
+
     protected _updateRoute(silent: boolean = true) {
-        if (silent) {
-            router.pause();
-        }
         const assetId = this._assetIds && this._assetIds.length === 1 ? this._assetIds[0] : undefined;
-        router.navigate(getAssetsRoute(this._editMode, assetId));
-        if (silent) {
-            window.setTimeout(() => {
-                router.resume();
-            }, 0);
-        }
+        router.navigate(getAssetsRoute(this._editMode, assetId), {
+            callHooks: !silent,
+            callHandler: !silent
+        });
     }
 }
diff --git a/ui/component/core/package.json b/ui/component/core/package.json
@@ -15,21 +15,21 @@
   "dependencies": {
     "@openremote/or-icon": "^1.0.3",
     "@openremote/rest": "^1.0.3",
-    "i18next": "^19.9.2",
-    "i18next-http-backend": "^1.1.1",
+    "i18next": "^21.5.3",
+    "i18next-http-backend": "^1.3.1",
     "moment": "^2.24.0",
     "platform": "^1.3.5",
     "qs": "^6.8.0",
     "url-search-params-polyfill": "^8.1.0"
   },
   "devDependencies": {
-    "@mdi/svg": ">=5.3.45",
-    "@types/qs": "^6.5.3",
+    "@mdi/svg": ">=6.5.95",
+    "@types/qs": "^6.9.7",
     "tslint": ">=5.11.0",
-    "typescript": ">=4.1.3",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0",
-    "xmldom": "^0.5.0",
+    "typescript": ">=4.5.2",
+    "webpack": "^5.64.3",
+    "webpack-cli": "^4.9.1",
+    "xmldom": "^0.6.0",
     "xpath": "^0.0.32"
   },
   "publishConfig": {

diff --git a/ui/component/core/src/index.ts b/ui/component/core/src/index.ts
@@ -841,11 +841,11 @@ export class Manager implements EventProviderFactory {
         // Add interceptor to inject authorization header on each request
         rest.addRequestInterceptor(
             (config: AxiosRequestConfig) => {
-                if (!config.headers.Authorization) {
+                if (!config!.headers!.Authorization) {
                     const authHeader = this.getAuthorizationHeader();
 
                     if (authHeader) {
-                        config.headers.Authorization = authHeader;
+                        config!.headers!.Authorization = authHeader;
                     }
                 }
 

diff --git a/ui/component/model/package.json b/ui/component/model/package.json
@@ -14,7 +14,7 @@
   "license": "AGPL-3.0-or-later",
   "devDependencies": {
     "tslint": ">=5.11.0",
-    "typescript": ">=4.1.3"
+    "typescript": ">=4.5.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/ui/component/or-app/package.json b/ui/component/or-app/package.json
@@ -18,31 +18,30 @@
   },
   "dependencies": {
     "@openremote/core": "^1.0.3",
-    "@openremote/or-mwc-components": "^1.0.3",
     "@openremote/or-asset-tree": "^1.0.4",
+    "@openremote/or-asset-viewer": "^1.0.4",
     "@openremote/or-attribute-input": "^1.0.4",
     "@openremote/or-attribute-picker": "^1.0.4",
-    "@openremote/or-asset-viewer": "^1.0.4",
     "@openremote/or-chart": "^1.0.4",
     "@openremote/or-map": "^1.0.4",
+    "@openremote/or-mwc-components": "^1.0.3",
     "@openremote/or-rules": "^1.0.4",
     "@openremote/or-smart-notify": "^1.0.3",
     "@openremote/or-timeline": "^1.0.3",
     "@openremote/rest": "^1.0.3",
-    "@reduxjs/toolkit": "^1.5.0",
-    "@types/navigo": "^7.0.1",
-    "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit": "^2.0.0-rc.2",
+    "@reduxjs/toolkit": "^1.6.2",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "lit": "^2.0.2",
     "moment": "^2.24.0",
-    "navigo": "^7.1.3",
+    "navigo": "^8.11.1",
     "pwa-helpers": "^0.9.0"
   },
   "devDependencies": {
     "@openremote/util": "^1.0.4",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0",
-    "webpack-dev-server": "^3.11.2",
     "tslint": ">=5.11.0",
-    "typescript": ">=4.1.3"
+    "typescript": ">=4.5.2",
+    "webpack": "^5.64.3",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
   }
 }
diff --git a/ui/component/or-app/src/app.ts b/ui/component/or-app/src/app.ts
@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export interface AppState {
     page: string;
-    params: {[k in string]: any} | undefined;
+    params: {[k in string]: string} | null;
     offline: boolean;
     resolved: boolean,
     drawerOpened: boolean;
@@ -16,7 +16,7 @@ export interface AppStateKeyed {
 
 const INITIAL_STATE: AppState = {
     page: "",
-    params: undefined,
+    params: null,
     offline: false,
     resolved: false,
     drawerOpened: false,
@@ -26,7 +26,7 @@ const INITIAL_STATE: AppState = {
 
 export interface PageAndParams {
     page: string;
-    params?: {[k in string]: any};
+    params: {[k in string]: string} | null;
 }
 
 const appSlice = createSlice({
@@ -37,7 +37,7 @@ const appSlice = createSlice({
             return {
                 ...state,
                 page: typeof action.payload === "string" ? action.payload : action.payload.page,
-                params: typeof action.payload === "string" ? undefined : action.payload.params
+                params: typeof action.payload === "string" ? null : action.payload.params
             };
         },
         updateDrawer(state, action: PayloadAction<boolean>) {

diff --git a/ui/component/or-app/src/index.ts b/ui/component/or-app/src/index.ts
@@ -247,19 +247,23 @@ export class OrApp<S extends AppStateKeyed> extends LitElement {
                     if (pageProvider.routes) {
                         pageProvider.routes.forEach((route) => {
                             router.on(
-                                route, (params, query) => {
-                                    this._store.dispatch(updatePage({page: pageProvider.name, params: params}));
+                                route, (match) => {
+                                    this._store.dispatch(updatePage({page: pageProvider.name, params: match!.data}));
                                 }
                             );
                         });
                     }
                 });
 
                 if (this.appConfig.pages.length > 0) {
-                    router.on("*", (params, query) => {
+                    router.notFound(() => {
                         this._store.dispatch(updatePage(this.appConfig!.pages[0].name));
                     });
                 }
+
+                window.onhashchange = (e: Event) => {
+                    console.log(e);
+                };
 
                 router.resolve();
             } else {

diff --git a/ui/component/or-app/src/or-header.ts b/ui/component/or-app/src/or-header.ts
@@ -1,6 +1,6 @@
 import {css, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
-import {until} from "lit/directives/until";
+import {until} from "lit/directives/until.js";
 import manager, {
     Util,
     DefaultBoxShadowBottom,
@@ -76,8 +76,9 @@ function hasRequiredRole(option: HeaderItem): boolean {
     return Object.entries(option.roles).some(([client, roles]) => roles.some((r: string) => manager.hasRole(r, client)));
 }
 
+
 function getCurrentMenuItemRef(defaultRef?: string): string | undefined {
- 	const menu = window.location.hash.split("/")[0].substr(2);
+    const menu = window.location.hash.substr(2).split("/")[0];
 	return menu || defaultRef;
 }
 
@@ -350,31 +351,28 @@ class OrHeader extends LitElement {
     @property({ type: String })
     private activeMenu: string | undefined;
 
+    constructor() {
+        super();
+        router.on("*", (match) => {
+            this.activeMenu = match ? match.url : undefined;
+        });
+    }
+
     public connectedCallback(): void {
         super.connectedCallback();
-        window.addEventListener("hashchange", this._hashCallback, false);
         const realm = window.sessionStorage.getItem('realm');
         if (realm) manager.displayRealm = realm;
     }
 
     public disconnectedCallback(): void {
         super.disconnectedCallback();
-        window.removeEventListener("hashchange", this._hashCallback);
-    }
-
-    public _onHashChanged(e: Event) {
-        const menu = getCurrentMenuItemRef(this.config && this.config.mainMenu?.length > 0 ? this.config.mainMenu[0].href : undefined);
-        this.activeMenu = menu;
     }
 
     public _onRealmSelect(realm: string) {
         manager.displayRealm = realm;
         window.sessionStorage.setItem('realm', realm);
         this.requestUpdate();
     }
-    protected _hashCallback = (e: Event) => {
-        this._onHashChanged(e);
-    }
 
     protected shouldUpdate(changedProperties: PropertyValues): boolean {
         if (changedProperties.has("config")) {
@@ -494,7 +492,11 @@ class OrHeader extends LitElement {
         if (headerItem.action) {
             headerItem.action();
         } else if (headerItem.href) {
-            router.navigate(headerItem.href, !!headerItem.absolute);
+            if (headerItem.absolute) {
+                window.location.href = headerItem.href;
+            } else {
+                router.navigate(headerItem.href);
+            }
         }
     }
 

diff --git a/ui/component/or-app/src/types.ts b/ui/component/or-app/src/types.ts
@@ -8,7 +8,7 @@ import {ThunkMiddleware} from "redux-thunk";
 import Navigo from "navigo";
 
 // Configure routing
-export const router = new Navigo(null, true, "#!");
+export const router = new Navigo("/", {hash: true});
 
 export interface RealmAppConfig {
     appTitle?: string;

diff --git a/ui/component/or-asset-tree/package.json b/ui/component/or-asset-tree/package.json
@@ -16,17 +16,17 @@
     "@openremote/core": "^1.0.3",
     "@openremote/model": "^1.0.3",
     "@openremote/or-icon": "^1.0.3",
-    "@openremote/or-translate": "^1.0.3",
     "@openremote/or-mwc-components": "^1.0.3",
+    "@openremote/or-translate": "^1.0.3",
     "@openremote/rest": "^1.0.3",
-    "lit": "^2.0.0-rc.2",
+    "lit": "^2.0.2",
     "moment": "^2.24.0"
   },
   "devDependencies": {
     "tslint": ">=5.11.0",
-    "typescript": ">=4.1.3",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0"
+    "typescript": ">=4.5.2",
+    "webpack": "^5.64.3",
+    "webpack-cli": "^4.9.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/ui/component/or-asset-viewer/package.json b/ui/component/or-asset-viewer/package.json
@@ -17,22 +17,22 @@
     "@openremote/model": "^1.0.3",
     "@openremote/or-attribute-history": "^1.0.4",
     "@openremote/or-attribute-input": "^1.0.4",
-    "@openremote/or-json-forms": "^1.0.4",
     "@openremote/or-chart": "^1.0.4",
+    "@openremote/or-components": "^1.0.3",
     "@openremote/or-icon": "^1.0.3",
+    "@openremote/or-json-forms": "^1.0.4",
     "@openremote/or-mwc-components": "^1.0.3",
-    "@openremote/or-components": "^1.0.3",
     "@openremote/or-survey": "^1.0.3",
     "@openremote/or-survey-results": "^1.0.3",
     "@openremote/or-translate": "^1.0.3",
     "@openremote/rest": "^1.0.3",
-    "lit": "^2.0.0-rc.2"
+    "lit": "^2.0.2"
   },
   "devDependencies": {
     "tslint": ">=5.11.0",
-    "typescript": ">=4.1.3",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0"
+    "typescript": ">=4.5.2",
+    "webpack": "^5.64.3",
+    "webpack-cli": "^4.9.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/ui/component/or-asset-viewer/src/index.ts b/ui/component/or-asset-viewer/src/index.ts
@@ -36,8 +36,8 @@ import {
 } from "@openremote/model";
 import {panelStyles, style} from "./style";
 import i18next, {TOptions, InitOptions} from "i18next";
-import {styleMap} from "lit/directives/style-map";
-import {classMap} from "lit/directives/class-map";
+import {styleMap} from "lit/directives/style-map.js";
+import {classMap} from "lit/directives/class-map.js";
 import { GenericAxiosResponse } from "axios";
 import {OrIcon} from "@openremote/or-icon";
 import "./or-edit-asset-panel";

diff --git a/ui/component/or-asset-viewer/src/or-edit-asset-panel.ts b/ui/component/or-asset-viewer/src/or-edit-asset-panel.ts
@@ -1,5 +1,5 @@
 import {css, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
-import {until} from "lit/directives/until";
+import {until} from "lit/directives/until.js";
 import {customElement, property, state} from "lit/decorators.js";
 import {InputType, OrMwcInput, OrInputChangedEvent, getValueHolderInputTemplateProvider, ValueInputProviderOptions, OrInputChangedEventDetail, ValueInputProvider} from "@openremote/or-mwc-components/or-mwc-input";
 import i18next from "i18next";