Fix commonJs import warnings

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": {

ui-ngx/package-lock.json

@@ -1943,11 +1943,11 @@
       }
     },
     "@auth0/angular-jwt": {
-      "version": "4.0.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-5.0.1.tgz",
-      "integrity": "sha512-CHvk1zJ9jpQupl0f5y7EmTvYAwugyFvC4ztLsZKr7ZC7anNVaDd1+pDFJYS+ZEU9jLWzE74+AfVKfigImADJuw==",
+      "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",
+      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+      "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",
+      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/schema-inspector/-/schema-inspector-1.6.8.tgz",
+      "resolved": "https://registry.npmjs.org/schema-inspector/-/schema-inspector-1.7.0.tgz",
-      "integrity": "sha1-ueU5g8xV/y29e2Xj2+CF2dEoXyo=",
+      "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"

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",

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 { throwError, of } from 'rxjs';
-import { of } from 'rxjs/internal/observable/of';
 import { InterceptorConfig } from './interceptor-config';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';

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';
-
+import messageFormatParser from 'messageformat-parser';
-const parse = require('messageformat-parser').parse;
 
 @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}`);

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', () => {

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;

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;

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<TodoDialogComponent>) {
   }

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 { Clear, Add } from '@material-ui/icons';
-import AddIcon from '@material-ui/icons/Add';
 import Tooltip from '@material-ui/core/Tooltip';
 import {
   JsonFormData,
@@ -138,7 +137,7 @@ class ThingsboardArray extends React.Component<JsonFormFieldProps, ThingsboardAr
             let removeButton: JSX.Element = null;
             if (!this.props.form.readonly) {
                 const boundOnDelete = this.onDelete.bind(this, i);
-                removeButton = <Tooltip title='Remove'><IconButton onClick={boundOnDelete}><ClearIcon/></IconButton></Tooltip>;
+                removeButton = <Tooltip title='Remove'><IconButton onClick={boundOnDelete}><Clear/></IconButton></Tooltip>;
             }
             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<JsonFormFieldProps, ThingsboardAr
         if (!this.props.form.readonly) {
             addButton = <Button variant='contained'
                                 color='primary'
-                                startIcon={<AddIcon/>}
+                                startIcon={<Add/>}
                                 style={{marginBottom: '8px'}}
                                 onClick={this.onAppend}>{this.props.form.add || 'New'}</Button>;
         }

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<JsonFormFieldProps, ThingsboardCo
                      onBlur={this.onBlur}
                      style={ styles.swatchText }/>
                  </div>
-                 <Tooltip title='Clear' placement='top'><IconButton onClick={this.onClear}><ClearIcon/></IconButton></Tooltip>
+                 <Tooltip title='Clear' placement='top'><IconButton onClick={this.onClear}><Clear/></IconButton></Tooltip>
             </div>
         );
     }

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<JsonFormFieldProps, JsonFormFieldState> {
 
@@ -26,7 +25,7 @@ class ThingsboardCss extends React.Component<JsonFormFieldProps, JsonFormFieldSt
     }
 
     onTidyCss(css: string): string {
-        return css_beautify(css, {indent_size: 4});
+        return js_beautify.css_beautify(css, {indent_size: 4});
     }
 
     render() {

ui-ngx/src/app/shared/components/json-form/react/json-form-html.tsx

@@ -15,7 +15,6 @@
  */
 import * as React from 'react';
 import ThingsboardAceEditor from './json-form-ace-editor';
-import { html_beautify } from 'js-beautify';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
 
 class ThingsboardHtml extends React.Component<JsonFormFieldProps, JsonFormFieldState> {
@@ -26,7 +25,7 @@ class ThingsboardHtml extends React.Component<JsonFormFieldProps, JsonFormFieldS
     }
 
     onTidyHtml(html: string): string {
-        return html_beautify(html, {indent_size: 4});
+        return js_beautify.html_beautify(html, {indent_size: 4});
     }
 
     render() {

ui-ngx/src/app/shared/components/json-form/react/json-form-icon.tsx

@@ -20,7 +20,7 @@ import reactCSS from 'reactcss';
 import TextField from '@material-ui/core/TextField';
 import IconButton from '@material-ui/core/IconButton';
 import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models';
-import ClearIcon from '@material-ui/icons/Clear';
+import { Clear } from '@material-ui/icons';
 import Icon from '@material-ui/core/Icon';
 import Tooltip from '@material-ui/core/Tooltip';
 
@@ -63,7 +63,7 @@ class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIco
         });
     }
 
-    componentWillUnmount () {
+    componentWillUnmount() {
         const node = ReactDOM.findDOMNode(this);
         const iconContainer = $(node).children('#icon-container');
         iconContainer.off( 'click' );
@@ -150,7 +150,7 @@ class ThingsboardIcon extends React.Component<JsonFormFieldProps, ThingsboardIco
                         onBlur={this.onBlur}
                         style={ styles.iconText } />
                  </div>
-                 <Tooltip title='Clear' placement='top'><IconButton onClick={this.onClear}><ClearIcon/></IconButton></Tooltip>
+                 <Tooltip title='Clear' placement='top'><IconButton onClick={this.onClear}><Clear/></IconButton></Tooltip>
             </div>
         );
     }

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<JsonFormFieldProps, ThingsboardIm
                     <div className='tb-image-preview-container'>{previewComponent}</div>
                     <div className='tb-image-clear-container'>
                         <Tooltip title='Clear' placement='top'>
-                          <IconButton className='tb-image-clear-btn' onClick={this.onClear}><ClearIcon/></IconButton>
+                          <IconButton className='tb-image-clear-btn' onClick={this.onClear}><Clear/></IconButton>
                         </Tooltip>
                     </div>
                     <Dropzone onDrop={this.onDrop}

ui-ngx/src/typings/imageloader.typings.d.ts

@@ -0,0 +1,14 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+
+declare module '*.svg' {
+  const value: any;
+  export = value;
+}