diff --git a/ui-ngx/angular.json b/ui-ngx/angular.json index 31f98e653f..0691b126f4 100644 --- a/ui-ngx/angular.json +++ b/ui-ngx/angular.json @@ -89,7 +89,17 @@ ], "customWebpackConfig": { "path": "./extra-webpack.config.js" - } + }, + "allowedCommonJsDependencies": [ + "hammerjs", + "react", + "react-dom", + "reactcss", + "react-ace", + "schema-inspector", + "@flowjs/flow.js", + "mousetrap" + ] }, "configurations": { "production": { diff --git a/ui-ngx/package-lock.json b/ui-ngx/package-lock.json index 11e004789a..8f429d4ad9 100644 --- a/ui-ngx/package-lock.json +++ b/ui-ngx/package-lock.json @@ -1943,11 +1943,11 @@ } }, "@auth0/angular-jwt": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-4.0.0.tgz", - "integrity": "sha512-CHvk1zJ9jpQupl0f5y7EmTvYAwugyFvC4ztLsZKr7ZC7anNVaDd1+pDFJYS+ZEU9jLWzE74+AfVKfigImADJuw==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-5.0.1.tgz", + "integrity": "sha512-djllMh6rthPscEj5n5T9zF223q8t+sDqnUuAYTJjdKoHvMAzYwwi2yP67HbojqjODG4ZLFAcPtRuzGgp+r7nDQ==", "requires": { - "url": "^0.11.0" + "tslib": "^2.0.0" } }, "@babel/code-frame": { @@ -5357,9 +5357,12 @@ "dev": true }, "async": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", - "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", + "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "requires": { + "lodash": "^4.17.14" + } }, "async-each": { "version": "1.0.3", @@ -13144,7 +13147,8 @@ "punycode": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", - "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", + "dev": true }, "q": { "version": "1.5.1", @@ -13177,7 +13181,8 @@ "querystring": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", - "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", + "dev": true }, "querystring-es3": { "version": "0.2.1", @@ -13992,11 +13997,11 @@ } }, "schema-inspector": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/schema-inspector/-/schema-inspector-1.6.8.tgz", - "integrity": "sha1-ueU5g8xV/y29e2Xj2+CF2dEoXyo=", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/schema-inspector/-/schema-inspector-1.7.0.tgz", + "integrity": "sha512-Cj4XP6O3QfDhOq7bIPpz3Ev+sjR++nqFsIggBVIk/8axqFc2p+XSwNBWih9Ut/p8k36f1uCyXB+TzumZUsxVBQ==", "requires": { - "async": "^1.5.0" + "async": "~2.6.3" } }, "schema-utils": { @@ -15851,6 +15856,7 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", + "dev": true, "requires": { "punycode": "1.3.2", "querystring": "0.2.0" diff --git a/ui-ngx/package.json b/ui-ngx/package.json index 9500b7301c..4243684a98 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -23,7 +23,7 @@ "@angular/platform-browser": "^10.0.9", "@angular/platform-browser-dynamic": "^10.0.9", "@angular/router": "^10.0.9", - "@auth0/angular-jwt": "^4.0.0", + "@auth0/angular-jwt": "^5.0.1", "@date-io/date-fns": "^2.6.1", "@flowjs/flow.js": "^2.14.1", "@flowjs/ngx-flow": "^0.4.4", @@ -81,7 +81,7 @@ "react-dropzone": "^11.0.3", "reactcss": "^1.2.3", "rxjs": "^6.6.2", - "schema-inspector": "1.6.8", + "schema-inspector": "^1.7.0", "screenfull": "^5.0.2", "split.js": "^1.6.2", "systemjs": "0.21.5", diff --git a/ui-ngx/src/app/core/interceptors/global-http-interceptor.ts b/ui-ngx/src/app/core/interceptors/global-http-interceptor.ts index b2167414c3..0897053bb9 100644 --- a/ui-ngx/src/app/core/interceptors/global-http-interceptor.ts +++ b/ui-ngx/src/app/core/interceptors/global-http-interceptor.ts @@ -28,8 +28,7 @@ import { AuthService } from '@core/auth/auth.service'; import { Constants } from '@shared/models/constants'; import { InterceptorHttpParams } from './interceptor-http-params'; import { catchError, delay, mergeMap, switchMap, tap } from 'rxjs/operators'; -import { throwError } from 'rxjs/internal/observable/throwError'; -import { of } from 'rxjs/internal/observable/of'; +import { throwError, of } from 'rxjs'; import { InterceptorConfig } from './interceptor-config'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; diff --git a/ui-ngx/src/app/core/translate/translate-default-compiler.ts b/ui-ngx/src/app/core/translate/translate-default-compiler.ts index 7badb08f12..a5bf1bbc17 100644 --- a/ui-ngx/src/app/core/translate/translate-default-compiler.ts +++ b/ui-ngx/src/app/core/translate/translate-default-compiler.ts @@ -20,8 +20,7 @@ import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'; import { Inject, Injectable, Optional } from '@angular/core'; - -const parse = require('messageformat-parser').parse; +import messageFormatParser from 'messageformat-parser'; @Injectable({ providedIn: 'root' }) export class TranslateDefaultCompiler extends TranslateMessageFormatCompiler { @@ -61,7 +60,7 @@ export class TranslateDefaultCompiler extends TranslateMessageFormatCompiler { private checkIsPlural(src: string): boolean { let tokens: any[]; try { - tokens = parse(src.replace(/\{\{/g, '{').replace(/\}\}/g, '}'), + tokens = messageFormatParser.parse(src.replace(/\{\{/g, '{').replace(/\}\}/g, '}'), {cardinal: [], ordinal: []}); } catch (e) { console.warn(`Failed to parse source: ${src}`); diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts index 93b3a80a1b..ad7e39f1b3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts @@ -34,7 +34,6 @@ import { AppState } from '@core/core.state'; import { CustomActionDescriptor } from '@shared/models/widget.models'; import * as ace from 'ace-builds'; import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; -import { css_beautify, html_beautify } from 'js-beautify'; import { ResizeObserver } from '@juggle/resize-observer'; import { CustomPrettyActionEditorCompleter } from '@home/components/widget/action/custom-action.models'; @@ -93,7 +92,6 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl ngOnChanges(changes: SimpleChanges): void { for (const propName of Object.keys(changes)) { - const change = changes[propName]; if (propName === 'action') { if (this.aceEditors.length) { this.setAceEditorValues(); @@ -136,7 +134,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl } public beautifyCss(): void { - const res = css_beautify(this.action.customCss, {indent_size: 4}); + const res = js_beautify.css_beautify(this.action.customCss, {indent_size: 4}); if (this.action.customCss !== res) { this.action.customCss = res; this.cssEditor.setValue(this.action.customCss ? this.action.customCss : '', -1); @@ -145,7 +143,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl } public beautifyHtml(): void { - const res = html_beautify(this.action.customHtml, {indent_size: 4, wrap_line_length: 60}); + const res = js_beautify.html_beautify(this.action.customHtml, {indent_size: 4, wrap_line_length: 60}); if (this.action.customHtml !== res) { this.action.customHtml = res; this.htmlEditor.setValue(this.action.customHtml ? this.action.customHtml : '', -1); @@ -158,7 +156,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl entries.forEach((entry) => { const editor = this.aceEditors.find(aceEditor => aceEditor.container === entry.target); this.onAceEditorResize(editor); - }) + }); }); this.htmlEditor = this.createAceEditor(this.htmlInputElmRef, 'html'); this.htmlEditor.on('input', () => { diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts index a636217eaa..aa2dc5257f 100644 --- a/ui-ngx/src/app/modules/home/home.component.ts +++ b/ui-ngx/src/app/modules/home/home.component.ts @@ -30,6 +30,7 @@ import { MatSidenav } from '@angular/material/sidenav'; import { AuthState } from '@core/auth/auth.models'; import { WINDOW } from '@core/services/window.service'; import { instanceOfSearchableComponent, ISearchableComponent } from '@home/models/searchable-component.models'; +import logo from '../../../assets/logo_title_white.svg'; const screenfull = _screenfull as _screenfull.Screenfull; @@ -50,7 +51,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni sidenavMode: 'over' | 'push' | 'side' = 'side'; sidenavOpened = true; - logo = require('../../../assets/logo_title_white.svg').default; + logo = logo; @ViewChild('sidenav') sidenav: MatSidenav; diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts index aa48420065..4d97c909ac 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts @@ -33,7 +33,6 @@ import { Hotkey } from 'angular2-hotkeys'; import { TranslateService } from '@ngx-translate/core'; import { getCurrentIsLoading } from '@app/core/interceptors/load.selectors'; import * as ace from 'ace-builds'; -import { css_beautify, html_beautify } from 'js-beautify'; import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; import { WINDOW } from '@core/services/window.service'; import { WindowMessage } from '@shared/models/window-message.model'; @@ -275,7 +274,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe entries.forEach((entry) => { const editor = this.aceEditors.find(aceEditor => aceEditor.container === entry.target); this.onAceEditorResize(editor); - }) + }); }); this.htmlEditor = this.createAceEditor(this.htmlInputElmRef, 'html'); this.htmlEditor.on('input', () => { @@ -577,7 +576,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe } beautifyCss(): void { - const res = css_beautify(this.widget.templateCss, {indent_size: 4}); + const res = js_beautify.css_beautify(this.widget.templateCss, {indent_size: 4}); if (this.widget.templateCss !== res) { this.isDirty = true; this.widget.templateCss = res; @@ -586,7 +585,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe } beautifyHtml(): void { - const res = html_beautify(this.widget.templateHtml, {indent_size: 4, wrap_line_length: 60}); + const res = js_beautify.html_beautify(this.widget.templateHtml, {indent_size: 4, wrap_line_length: 60}); if (this.widget.templateHtml !== res) { this.isDirty = true; this.widget.templateHtml = res; diff --git a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.ts index d641012d3a..24d8021fd8 100644 --- a/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/dialog/todo-dialog.component.ts @@ -16,6 +16,7 @@ import { Component } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; +import comingSoon from '../../../../assets/coming-soon.jpg'; @Component({ selector: 'tb-todo-dialog', @@ -24,7 +25,7 @@ import { MatDialogRef } from '@angular/material/dialog'; }) export class TodoDialogComponent { - comingSoon = require('../../../../assets/coming-soon.jpg').default; + comingSoon = comingSoon; constructor(public dialogRef: MatDialogRef) { } diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx index 37318a2714..8ca1aed9d1 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-array.tsx @@ -19,8 +19,7 @@ import ThingsboardBaseComponent from './json-form-base-component'; import Button from '@material-ui/core/Button'; import _ from 'lodash'; import IconButton from '@material-ui/core/IconButton'; -import ClearIcon from '@material-ui/icons/Clear'; -import AddIcon from '@material-ui/icons/Add'; +import { Clear, Add } from '@material-ui/icons'; import Tooltip from '@material-ui/core/Tooltip'; import { JsonFormData, @@ -138,7 +137,7 @@ class ThingsboardArray extends React.Component; + removeButton = ; } const forms = (this.props.form.items as JsonFormData[]).map((form, index) => { const copy = this.copyWithIndex(form, i); @@ -156,7 +155,7 @@ class ThingsboardArray extends React.Component} + startIcon={} style={{marginBottom: '8px'}} onClick={this.onAppend}>{this.props.form.add || 'New'}; } diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx index 39f05c737e..34d80ce0dd 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-color.tsx @@ -21,7 +21,7 @@ import * as tinycolor_ from 'tinycolor2'; import TextField from '@material-ui/core/TextField'; import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; import IconButton from '@material-ui/core/IconButton'; -import ClearIcon from '@material-ui/icons/Clear'; +import { Clear } from '@material-ui/icons'; import Tooltip from '@material-ui/core/Tooltip'; const tinycolor = tinycolor_; @@ -177,7 +177,7 @@ class ThingsboardColor extends React.Component - + ); } diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx index a5107ad4db..632e0d26f3 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-css.tsx @@ -16,7 +16,6 @@ import * as React from 'react'; import ThingsboardAceEditor from './json-form-ace-editor'; import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; -import { css_beautify } from 'js-beautify'; class ThingsboardCss extends React.Component { @@ -26,7 +25,7 @@ class ThingsboardCss extends React.Component { @@ -26,7 +25,7 @@ class ThingsboardHtml extends React.Component - + ); } diff --git a/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx b/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx index bfc407a61b..cc8212e8ef 100644 --- a/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx +++ b/ui-ngx/src/app/shared/components/json-form/react/json-form-image.tsx @@ -18,7 +18,7 @@ import Dropzone from 'react-dropzone'; import ThingsboardBaseComponent from './json-form-base-component'; import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; import IconButton from '@material-ui/core/IconButton'; -import ClearIcon from '@material-ui/icons/Clear'; +import { Clear } from '@material-ui/icons'; import Tooltip from '@material-ui/core/Tooltip'; interface ThingsboardImageState extends JsonFormFieldState { @@ -87,7 +87,7 @@ class ThingsboardImage extends React.Component{previewComponent}
- +