Jelajahi Sumber

HUE-9486 [ui] Apply new linting rules

Johan Ahlen 5 tahun lalu
induk
melakukan
54510a6608
22 mengubah file dengan 158 tambahan dan 132 penghapusan
  1. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/components/hiveQueryPlan/HiveQueryPlan.vue
  2. 9 6
      desktop/core/src/desktop/js/components/ColumnSelectorPanel.test.ts
  3. 19 13
      desktop/core/src/desktop/js/components/ColumnSelectorPanel.vue
  4. 5 5
      desktop/core/src/desktop/js/components/HueTable.test.ts
  5. 4 4
      desktop/core/src/desktop/js/components/Modal.test.ts
  6. 3 3
      desktop/core/src/desktop/js/components/Modal.vue
  7. 26 23
      desktop/core/src/desktop/js/components/SqlText.vue
  8. 10 6
      desktop/core/src/desktop/js/components/Tab.test.ts
  9. 4 4
      desktop/core/src/desktop/js/components/Tab.vue
  10. 7 7
      desktop/core/src/desktop/js/components/Tabs.test.ts
  11. 11 8
      desktop/core/src/desktop/js/components/Tabs.vue
  12. 8 0
      desktop/core/src/desktop/js/components/__snapshots__/ColumnSelectorPanel.test.ts.snap
  13. 4 0
      desktop/core/src/desktop/js/components/__snapshots__/Tabs.test.ts.snap
  14. 5 5
      desktop/core/src/desktop/js/components/er-diagram/comps/table-entity.test.ts
  15. 1 1
      desktop/core/src/desktop/js/components/er-diagram/comps/table-entity.vue
  16. 2 2
      desktop/core/src/desktop/js/components/er-diagram/er-diagram.test.ts
  17. 12 7
      desktop/core/src/desktop/js/components/er-diagram/index.vue
  18. 1 1
      desktop/core/src/desktop/js/components/er-diagram/lib/entities.ts
  19. 15 17
      desktop/core/src/desktop/js/components/er-diagram/lib/processor.test.ts
  20. 7 15
      desktop/core/src/desktop/js/components/er-diagram/lib/processor.ts
  21. 3 3
      desktop/core/src/desktop/js/components/er-diagram/test/utils.ts
  22. 1 1
      desktop/core/src/desktop/js/vue/components/login/TrademarkBanner.vue

+ 1 - 1
desktop/core/src/desktop/js/apps/jobBrowser/components/hiveQueryPlan/HiveQueryPlan.vue

@@ -28,7 +28,7 @@
 
   @Component
   export default class HiveQueryPlan extends Vue {
-    title: string = 'Web Component';
+    title = 'Web Component';
   }
 </script>
 

+ 9 - 6
desktop/core/src/desktop/js/components/ColumnSelectorPanel.test.ts

@@ -14,9 +14,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils';
 import { Column } from 'components/HueTable';
-import ColumnSelectorPanel from './ColumnSelectorPanel.vue'
+import ColumnSelectorPanel from './ColumnSelectorPanel.vue';
 
 describe('ColumnSelectorPanel.vue', () => {
   it('should render', () => {
@@ -26,14 +26,17 @@ describe('ColumnSelectorPanel.vue', () => {
       }
     });
     expect(wrapper.element).toMatchSnapshot();
-  })
+  });
 
   it('should render with checkboxes', () => {
     const wrapper = shallowMount(ColumnSelectorPanel, {
       propsData: {
-        columns: <Column[]>[{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }]
+        columns: <Column[]>[
+          { key: 'a', label: 'A' },
+          { key: 'b', label: 'B' }
+        ]
       }
     });
     expect(wrapper.element).toMatchSnapshot();
-  })
-})
+  });
+});

+ 19 - 13
desktop/core/src/desktop/js/components/ColumnSelectorPanel.vue

@@ -18,20 +18,27 @@
 
 <template>
   <div>
-    Columns <i class='fa fa-times' title="Close" @click="$emit('close')"></i>
-    <ul class='column-list'>
+    Columns <i class="fa fa-times" title="Close" @click="$emit('close')" />
+    <ul class="column-list">
       <li>
-        <input type="text" class="filter-box" v-model="filterText" placeholder="Filter">
+        <input v-model="filterText" type="text" class="filter-box" placeholder="Filter" />
+      </li>
+      <li v-for="column in filteredColumns" :key="column.key">
+        <label>
+          <input v-model="checkedColumns" type="checkbox" :value="column" />
+          {{ column.label }}
+        </label>
       </li>
-      <template v-for="column in filteredColumns">
-        <li :key="column.key">
-          <label><input type="checkbox" :value="column" v-model="checkedColumns">{{ column.label }}</label>
-        </li>
-      </template>
     </ul>
 
     <div class="buttons">
-      <button type="button" class="btn btn-default" @click="$emit('set-checked-columns', checkedColumns)">Apply</button>
+      <button
+        type="button"
+        class="btn btn-default"
+        @click="$emit('set-checked-columns', checkedColumns)"
+      >
+        Apply
+      </button>
     </div>
   </div>
 </template>
@@ -50,7 +57,7 @@
     checkedColumns: Column[] = [];
     filterText = '';
 
-    mounted() {
+    mounted(): void {
       this.checkedColumns.push(...this.columns);
     }
 
@@ -59,10 +66,9 @@
         return this.columns;
       }
       const lowerFilter = this.filterText.toLowerCase();
-      return this.columns.filter(col => col.label.toLowerCase().indexOf(lowerFilter) !== -1)
+      return this.columns.filter(col => col.label.toLowerCase().indexOf(lowerFilter) !== -1);
     }
   }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

+ 5 - 5
desktop/core/src/desktop/js/components/HueTable.test.ts

@@ -14,9 +14,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils';
 import { Column, Row } from './HueTable';
-import HueTable from './HueTable.vue'
+import HueTable from './HueTable.vue';
 
 describe('HueTable.vue', () => {
   it('should render a table', () => {
@@ -32,10 +32,10 @@ describe('HueTable.vue', () => {
           { a: '1', b: 5, c: false, d: undefined },
           { a: '2', b: 6, c: true, d: null },
           { a: '3', b: 7, c: false },
-          { a: '4', b: 8, c: true },
+          { a: '4', b: 8, c: true }
         ]
       }
     });
     expect(wrapper.element).toMatchSnapshot();
-  })
-})
+  });
+});

+ 4 - 4
desktop/core/src/desktop/js/components/Modal.test.ts

@@ -14,8 +14,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallowMount } from '@vue/test-utils'
-import Modal from './Modal.vue'
+import { shallowMount } from '@vue/test-utils';
+import Modal from './Modal.vue';
 
 describe('Modal.vue', () => {
   it('should render a modal', () => {
@@ -27,5 +27,5 @@ describe('Modal.vue', () => {
       }
     });
     expect(wrapper.element).toMatchSnapshot();
-  })
-})
+  });
+});

+ 3 - 3
desktop/core/src/desktop/js/components/Modal.vue

@@ -22,11 +22,11 @@
       <div class="modal-wrapper">
         <div class="modal-container">
           <div class="modal-header">
-            <slot name="header"></slot>
-            <i class="fa fa-times" aria-hidden="true" @click="$emit('close')"></i>
+            <slot name="header" />
+            <i class="fa fa-times" aria-hidden="true" @click="$emit('close')" />
           </div>
           <div class="modal-body">
-            <slot name="body"></slot>
+            <slot name="body" />
           </div>
           <div class="modal-footer">
             <slot name="footer">

+ 26 - 23
desktop/core/src/desktop/js/components/SqlText.vue

@@ -19,7 +19,7 @@
 <!-- This one is based on ko.highlight.js -->
 
 <template>
-  <div class="ace-highlight"></div>
+  <div class="ace-highlight" />
 </template>
 
 <script lang="ts">
@@ -30,11 +30,11 @@
 
   interface Ace {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    require: (module: string) => any
+    require: (module: string) => any;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const getAce = (): Ace => (window as any).ace
+  const getAce = (): Ace => (window as any).ace;
 
   @Component
   export default class SqlText extends Vue {
@@ -50,7 +50,7 @@
     splitLines = false;
 
     @Watch('value')
-    renderAce() {
+    renderAce(): void {
       if (this.value) {
         const ace = getAce();
         const impalaRules = ace.require('ace/mode/impala_highlight_rules');
@@ -60,10 +60,14 @@
         const config = ace.require('ace/config');
 
         const Tokenizer = tokenizer.Tokenizer;
-        const Rules = this.dialect === 'impala' ? impalaRules.ImpalaHighlightRules : hiveRules.HiveHighlightRules;
+        const Rules =
+          this.dialect === 'impala'
+            ? impalaRules.ImpalaHighlightRules
+            : hiveRules.HiveHighlightRules;
 
         const res: string[] = [];
 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore: totalStorage interface missing
         config.loadModule(['theme', $.totalStorage('hue.ace.theme') || 'ace/theme/hue']);
 
@@ -82,8 +86,8 @@
               screenColumn = txt.$renderToken(stringBuilder, screenColumn, token, value);
             } catch (e) {
               console.warn(
-                  value,
-                  'Failed to get screen column due to some parsing errors, skip rendering.'
+                value,
+                'Failed to get screen column due to some parsing errors, skip rendering.'
               );
             }
           }
@@ -95,8 +99,8 @@
             } catch (e) {
               if (console && console.warn) {
                 console.warn(
-                    value,
-                    'This token has some parsing errors and it has been rendered without highlighting.'
+                  value,
+                  'This token has some parsing errors and it has been rendered without highlighting.'
                 );
               }
               stringBuilder.push(value);
@@ -118,14 +122,14 @@
 
           if (tokens && tokens.tokens.length) {
             renderSimpleLine(
-                new Text(document.createElement('div')),
-                renderedTokens,
-                tokens.tokens
+              new Text(document.createElement('div')),
+              renderedTokens,
+              tokens.tokens
             );
           }
 
           res.push(
-              '<div class="ace_line ' +
+            '<div class="ace_line ' +
               additionalClass +
               '">' +
               renderedTokens.join('') +
@@ -138,13 +142,13 @@
           return;
         }
         element.innerHTML =
-            '<div class="ace_editor ace-hue"' +
-            (this.enableOverflow ? ' style="overflow: initial !important;"' : '') +
-            '><div class="ace_layer" style="position: static;' +
-            (this.enableOverflow ? ' overflow: initial !important;' : '') +
-            '">' +
-            res.join('') +
-            '</div></div>';
+          '<div class="ace_editor ace-hue"' +
+          (this.enableOverflow ? ' style="overflow: initial !important;"' : '') +
+          '><div class="ace_layer" style="position: static;' +
+          (this.enableOverflow ? ' overflow: initial !important;' : '') +
+          '">' +
+          res.join('') +
+          '</div></div>';
         if (this.enableOverflow) {
           $(element).css({ overflow: 'auto' });
         }
@@ -152,11 +156,10 @@
       }
     }
 
-    mounted() {
+    mounted(): void {
       this.renderAce();
     }
   }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

+ 10 - 6
desktop/core/src/desktop/js/components/Tab.test.ts

@@ -14,8 +14,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallowMount } from '@vue/test-utils'
-import Tab from './Tab.vue'
+import { shallowMount } from '@vue/test-utils';
+import Tab from './Tab.vue';
 
 describe('Tab.vue', () => {
   it('should render', () => {
@@ -23,8 +23,12 @@ describe('Tab.vue', () => {
     const wrapper = shallowMount(Tab, {
       propsData: { title: 'Tab title' },
       provide: {
-        addTab: (tab: Tab): void => { reportedTab = tab },
-        removeTab: () => {}
+        addTab: (tab: Tab): void => {
+          reportedTab = tab;
+        },
+        removeTab: () => {
+          // Empty
+        }
       },
       slots: {
         default: '<div>Some tab content</div>'
@@ -36,5 +40,5 @@ describe('Tab.vue', () => {
     } else {
       fail('provided addTab not called with the tab');
     }
-  })
-})
+  });
+});

+ 4 - 4
desktop/core/src/desktop/js/components/Tab.vue

@@ -37,15 +37,15 @@
     @Prop({ required: true })
     title!: string;
 
-    isActive: boolean = false;
+    isActive = false;
 
-    mounted() {
+    mounted(): void {
       if (this.addTab) {
-        this.addTab(this)
+        this.addTab(this);
       }
     }
 
-    destroyed() {
+    destroyed(): void {
       if (this.removeTab) {
         this.removeTab(this);
       }

+ 7 - 7
desktop/core/src/desktop/js/components/Tabs.test.ts

@@ -15,15 +15,15 @@
 // limitations under the License.
 
 import Vue from 'vue';
-import { mount, shallowMount } from '@vue/test-utils'
-import Tabs from './Tabs.vue'
-import Tab from './Tab.vue'
+import { mount, shallowMount } from '@vue/test-utils';
+import Tabs from './Tabs.vue';
+import Tab from './Tab.vue';
 
 describe('Tabs.vue', () => {
   it('should render empty tabs', () => {
     const wrapper = shallowMount(Tabs);
     expect(wrapper.element).toMatchSnapshot();
-  })
+  });
 
   it('should render tabs', async () => {
     const wrapper = mount(Tabs, {
@@ -31,10 +31,10 @@ describe('Tabs.vue', () => {
         default: '<tab title="foo">foo</tab><tab title="bar">bar</tab>'
       },
       stubs: {
-        'tab': Tab
+        tab: Tab
       }
     });
     await Vue.nextTick();
     expect(wrapper.element).toMatchSnapshot();
-  })
-})
+  });
+});

+ 11 - 8
desktop/core/src/desktop/js/components/Tabs.vue

@@ -19,9 +19,11 @@
 <template>
   <div>
     <ul>
-      <li v-for='tab in tabs' :key='tab.title' @click='selectTab(tab)'>{{ tab.title }}</li>
+      <li v-for="tab in tabs" :key="tab.title" @click="selectTab(tab)">
+        {{ tab.title }}
+      </li>
     </ul>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
@@ -36,7 +38,7 @@
     tabs: Tab[] = [];
 
     @Provide()
-    addTab(tab: Tab) {
+    addTab(tab: Tab): void {
       this.tabs.push(tab);
       if (this.tabs.length === 1) {
         this.selectTab(this.tabs[0]);
@@ -44,7 +46,7 @@
     }
 
     @Provide()
-    removeTab(tab: Tab) {
+    removeTab(tab: Tab): void {
       const index = this.tabs.indexOf(tab);
       if (index !== -1) {
         this.$delete(this.tabs, index);
@@ -54,11 +56,12 @@
       }
     }
 
-    selectTab(tab: Tab) {
-      this.tabs.forEach(other => { other.isActive = other === tab });
+    selectTab(tab: Tab): void {
+      this.tabs.forEach(other => {
+        other.isActive = other === tab;
+      });
     }
   }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

+ 8 - 0
desktop/core/src/desktop/js/components/__snapshots__/ColumnSelectorPanel.test.ts.snap

@@ -29,7 +29,9 @@ exports[`ColumnSelectorPanel.vue should render 1`] = `
       class="btn btn-default"
       type="button"
     >
+      
       Apply
+    
     </button>
   </div>
 </div>
@@ -61,7 +63,9 @@ exports[`ColumnSelectorPanel.vue should render with checkboxes 1`] = `
           type="checkbox"
           value="[object Object]"
         />
+        
         A
+      
       </label>
     </li>
     <li>
@@ -70,7 +74,9 @@ exports[`ColumnSelectorPanel.vue should render with checkboxes 1`] = `
           type="checkbox"
           value="[object Object]"
         />
+        
         B
+      
       </label>
     </li>
   </ul>
@@ -82,7 +88,9 @@ exports[`ColumnSelectorPanel.vue should render with checkboxes 1`] = `
       class="btn btn-default"
       type="button"
     >
+      
       Apply
+    
     </button>
   </div>
 </div>

+ 4 - 0
desktop/core/src/desktop/js/components/__snapshots__/Tabs.test.ts.snap

@@ -11,10 +11,14 @@ exports[`Tabs.vue should render tabs 1`] = `
 <div>
   <ul>
     <li>
+      
       foo
+    
     </li>
     <li>
+      
       bar
+    
     </li>
   </ul>
    

+ 5 - 5
desktop/core/src/desktop/js/components/er-diagram/comps/table-entity.test.ts

@@ -23,8 +23,8 @@ import { sleep } from '../test/utils';
 
 const dbName = 'DB_NAME';
 const tableName = 'TABLE_NAME';
-const tableId: string = Table.buildId(dbName, tableName);
-const columnNames: Array<string> = ['id', 'name'];
+const tableId = Table.buildId(dbName, tableName);
+const columnNames = ['id', 'name'];
 const defaultMaxColumns = 10;
 
 describe('TableEntity UTs', () => {
@@ -88,7 +88,7 @@ describe('TableEntity UTs', () => {
   });
 
   test('With number of columns more than maxColumns', () => {
-    const columns: Array<Column> = [];
+    const columns: Column[] = [];
     const columnCount = 20;
 
     for (let i = 0; i < columnCount; i++) {
@@ -135,7 +135,7 @@ describe('TableEntity UTs', () => {
   });
 
   test('With custom maxColumns', () => {
-    const columns: Array<Column> = [];
+    const columns: Column[] = [];
     const columnCount = 10;
     const maxColumns = 5;
 
@@ -161,7 +161,7 @@ describe('TableEntity UTs', () => {
   });
 
   test('Column expansion test', async () => {
-    const columns: Array<Column> = [];
+    const columns: Column[] = [];
     const columnCount = 10;
     const maxColumns = 5;
 

+ 1 - 1
desktop/core/src/desktop/js/components/er-diagram/comps/table-entity.vue

@@ -69,7 +69,7 @@
     @Prop() entity: Table;
     @Prop({ default: 10 }) maxColumns: number;
 
-    maxCols: number = 0;
+    maxCols = 0;
 
     created(): void {
       this.maxCols = this.maxColumns;

+ 2 - 2
desktop/core/src/desktop/js/components/er-diagram/er-diagram.test.ts

@@ -81,7 +81,7 @@ describe('ERDiagram UTs', () => {
   test('Related entities - 3 levels (t0-t1, t0-t2, t0-t3, t3-t4, t3-t5)', () => {
     const tableCount = 6;
 
-    const tables: Array<Table> = createTables(tableCount, 4);
+    const tables = createTables(tableCount, 4);
     const wrapper = shallowMount(ERDiagram, {
       propsData: {
         entities: tables,
@@ -129,7 +129,7 @@ describe('ERDiagram integration tests', () => {
   test('Check plotting of relation paths (t0-t1, t0-t2)', () => {
     const tableCount = 3;
 
-    const tables: Array<Table> = createTables(tableCount, 3);
+    const tables = createTables(tableCount, 3);
     const wrapper = mount(ERDiagram, {
       propsData: {
         entities: tables,

+ 12 - 7
desktop/core/src/desktop/js/components/er-diagram/index.vue

@@ -72,7 +72,7 @@
 
   import './er-diagram.scss';
 
-  const CURVATURE: number = 40;
+  const CURVATURE = 40;
 
   @Component({
     components: {
@@ -81,18 +81,23 @@
     }
   })
   export default class ERDiagram extends Vue {
-    @Prop() entities: Array<IEntity>;
-    @Prop() relations: Array<IRelation>;
+    @Prop()
+    entities: IEntity[];
+    @Prop()
+    relations: IRelation[];
 
     EntityTypes = EntityTypes;
 
-    get groups(): Object {
+    get groups(): IEntity[][] | undefined {
       if (this.entities && this.relations) {
         return groupEntities(this.entities, this.relations);
       }
     }
 
-    getSelectorPosition(selector: string, offset: any): any {
+    getSelectorPosition(
+      selector: string,
+      offset: { x: number; y: number }
+    ): { x: number; y: number } {
       const element = this.$el.querySelector(selector);
       if (element) {
         const rect = element.getBoundingClientRect();
@@ -109,10 +114,10 @@
     }
 
     plotRelations(): void {
-      const relationPaths: Array<any> = this.$el.querySelectorAll('.relation-path');
+      const relationPaths: HTMLElement[] = this.$el.querySelectorAll<HTMLElement>('.relation-path');
       const offset = this.getSelectorPosition('.erd-relations');
 
-      relationPaths.forEach((element: any) => {
+      relationPaths.forEach(element => {
         const leftPos = this.getSelectorPosition(
           `[data-entity-id~="${element.dataset.entityIdLeft}"] .right-point`,
           offset

+ 1 - 1
desktop/core/src/desktop/js/components/er-diagram/lib/entities.ts

@@ -25,7 +25,7 @@ export class Table implements IEntity {
 
   database: string;
   name: string;
-  columns: Array<Column>;
+  columns: Column[];
 
   className: string;
 

+ 15 - 17
desktop/core/src/desktop/js/components/er-diagram/lib/processor.test.ts

@@ -18,14 +18,12 @@
 
 import { groupEntities } from './processor';
 import { createTables } from '../test/utils';
-import { Table } from './entities';
-import { IEntity } from './interfaces';
 
 describe('processor UTs', () => {
   test('Multiple unrelated entities (t0, t1, t2, t3, t4)', () => {
     const tableCount = 5;
 
-    const entityGroups: Array<Array<IEntity>> = groupEntities(createTables(tableCount, 0), []);
+    const entityGroups = groupEntities(createTables(tableCount, 0), []);
 
     expect(entityGroups).toHaveLength(5);
     expect(entityGroups.flat()).toHaveLength(tableCount);
@@ -34,8 +32,8 @@ describe('processor UTs', () => {
   test('Related entities - Linked list (t0-t1-t2-t3-t4)', () => {
     const tableCount = 5;
 
-    const tables: Array<Table> = createTables(tableCount, 2);
-    const entityGroups: Array<Array<IEntity>> = groupEntities(tables, [
+    const tables = createTables(tableCount, 2);
+    const entityGroups = groupEntities(tables, [
       {
         desc: '',
         left: tables[0].columns[1],
@@ -65,8 +63,8 @@ describe('processor UTs', () => {
   test('Related entities - Binary tree (t0-t1, t0-t2, t2-t3, t2-t4)', () => {
     const tableCount = 5;
 
-    const tables: Array<Table> = createTables(tableCount, 3);
-    const entityGroups: Array<Array<IEntity>> = groupEntities(tables, [
+    const tables = createTables(tableCount, 3);
+    const entityGroups = groupEntities(tables, [
       {
         desc: '',
         left: tables[0].columns[1],
@@ -97,8 +95,8 @@ describe('processor UTs', () => {
     // Adding back links in the above binary tree to simulate graph
     const tableCount = 5;
 
-    const tables: Array<Table> = createTables(tableCount, 3);
-    const entityGroups: Array<Array<IEntity>> = groupEntities(tables, [
+    const tables = createTables(tableCount, 3);
+    const entityGroups = groupEntities(tables, [
       {
         desc: '',
         left: tables[0].columns[1],
@@ -140,8 +138,8 @@ describe('processor UTs', () => {
   test('Related entities - Self relation (t0-t0, t1)', () => {
     const tableCount = 2;
 
-    const tables: Array<Table> = createTables(tableCount, 2);
-    const entityGroups: Array<Array<IEntity>> = groupEntities(tables, [
+    const tables = createTables(tableCount, 2);
+    const entityGroups = groupEntities(tables, [
       {
         desc: '',
         left: tables[0].columns[1],
@@ -156,8 +154,8 @@ describe('processor UTs', () => {
   test('Related entities - Self relation + external reference (t0-t0, t0-t1)', () => {
     const tableCount = 2;
 
-    const tables: Array<Table> = createTables(tableCount, 3);
-    const entityGroups: Array<Array<IEntity>> = groupEntities(tables, [
+    const tables = createTables(tableCount, 3);
+    const entityGroups = groupEntities(tables, [
       {
         desc: '',
         left: tables[0].columns[1],
@@ -177,8 +175,8 @@ describe('processor UTs', () => {
   test('Related entities - Cyclic relation (t0-t1, t1-t0)', () => {
     const tableCount = 2;
 
-    const tables: Array<Table> = createTables(tableCount, 3);
-    const entityGroups: Array<Array<IEntity>> = groupEntities(tables, [
+    const tables = createTables(tableCount, 3);
+    const entityGroups = groupEntities(tables, [
       {
         desc: '',
         left: tables[0].columns[1],
@@ -198,8 +196,8 @@ describe('processor UTs', () => {
   test('Unrelated entity groups (t0-t1, t2-t3, t2-t4)', () => {
     const tableCount = 5;
 
-    const tables: Array<Table> = createTables(tableCount, 2);
-    const entityGroups: Array<Array<IEntity>> = groupEntities(tables, [
+    const tables = createTables(tableCount, 2);
+    const entityGroups = groupEntities(tables, [
       {
         desc: '',
         left: tables[0].columns[1],

+ 7 - 15
desktop/core/src/desktop/js/components/er-diagram/lib/processor.ts

@@ -22,13 +22,11 @@ import { Column } from './entities';
 
 class EntityNode {
   entity: IEntity;
-  level: number;
-  relations: Array<EntityNode>;
+  level = 0;
+  relations: EntityNode[] = [];
 
   constructor(entity: IEntity) {
     this.entity = entity;
-    this.relations = new Array<EntityNode>();
-    this.level = 0;
   }
 }
 
@@ -37,10 +35,7 @@ class EntityNode {
  * it's level (Distance from root entity) in the relationship graph. entities[0] will be
  * taken as the root entity.
  */
-export function groupEntities(
-  entities: Array<IEntity>,
-  relations: Array<IRelation>
-): Array<Array<IEntity>> {
+export function groupEntities(entities: IEntity[], relations: IRelation[]): IEntity[][] {
   const nodesMap: Map<string, EntityNode> = generateGraph(entities, relations);
 
   let level = 0;
@@ -61,10 +56,7 @@ function getNodeMapId(entity: IEntity) {
   return entity.id;
 }
 
-function generateGraph(
-  entities: Array<IEntity>,
-  relations: Array<IRelation>
-): Map<string, EntityNode> {
+function generateGraph(entities: IEntity[], relations: IRelation[]): Map<string, EntityNode> {
   const nodesMap = new Map<string, EntityNode>();
 
   entities.forEach((entity: IEntity) => {
@@ -99,14 +91,14 @@ function setLevels(entityNode: EntityNode, level: number): number {
   return maxLevel;
 }
 
-function breadthFirstTraverse(nodesMap: Map<string, EntityNode>): Array<Array<IEntity>> {
-  const entities: Array<Array<IEntity>> = new Array<Array<IEntity>>();
+function breadthFirstTraverse(nodesMap: Map<string, EntityNode>): IEntity[][] {
+  const entities: IEntity[][] = [];
 
   nodesMap.forEach((entityNode: EntityNode) => {
     const level = entityNode.level - 1;
     if (level >= 0) {
       if (entities[level] === undefined) {
-        entities[level] = new Array<IEntity>();
+        entities[level] = [];
       }
       entities[level].push(entityNode.entity);
     }

+ 3 - 3
desktop/core/src/desktop/js/components/er-diagram/test/utils.ts

@@ -22,13 +22,13 @@ export const dbName = 'db-name';
 export const tableNamePrefix = 'table-name';
 export const columnNamePrefix = 'column-name';
 
-export function createTables(tableCount: number, columnCount: number): Array<Table> {
-  const entities: Array<Table> = [];
+export function createTables(tableCount: number, columnCount: number): Table[] {
+  const entities: Table[] = [];
   for (let t = 0; t < tableCount; t++) {
     const tableName = `${tableNamePrefix}-${t}`;
     const tableId: string = Table.buildId(dbName, tableName);
 
-    const columns: Array<Column> = [];
+    const columns: Column[] = [];
 
     for (let c = 0; c < columnCount; c++) {
       columns.push(new Column(tableId, `${columnNamePrefix}-${c}`));

+ 1 - 1
desktop/core/src/desktop/js/vue/components/login/TrademarkBanner.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
   export default {
-    data(): {} {
+    data(): unknown {
       return {};
     }
   };