From bc9c32b47b086d144631da235399037d362836a0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 27 May 2022 15:53:34 +0530
Subject: [PATCH] Enhancement: UI improvements  (#2164)

* enhancement: show loader while loading gird/gallery data

re #2150

Signed-off-by: Pranav C <pranavxc@gmail.com>

* enhancement: add icon for select option in filter/sort

Signed-off-by: Pranav C <pranavxc@gmail.com>

* enhancement: show loader and transitions

- add transition for menu
- include icon within select(fileter/sort)
- show loader while loading data(grid/gallery)
- remove announcement

Signed-off-by: Pranav C <pranavxc@gmail.com>

* refactor: remove announcement component and related state props

Signed-off-by: Pranav C <pranavxc@gmail.com>

* fix: ignore loader while switching tab

Signed-off-by: Pranav C <pranavxc@gmail.com>

* chore: upgrade nc-help

Signed-off-by: Pranav C <pranavxc@gmail.com>

* test/kludge: avoid flicker with a delay

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/ImportantAnnouncement.vue      |  94 ------
 packages/nc-gui/components/PreviewAs.vue      |   5 +-
 .../project/spreadsheet/RowsXcDataTable.vue   |  29 +-
 .../spreadsheet/components/ColumnFilter.vue   |  12 +-
 .../components/ColumnFilterMenu.vue           |   6 +-
 .../spreadsheet/components/FieldsMenu.vue     |   7 +-
 .../spreadsheet/components/HeaderCell.vue     |  10 +-
 .../spreadsheet/components/MoreActions.vue    |   1 +
 .../spreadsheet/components/SortListMenu.vue   |  96 +++---
 .../components/VirtualHeaderCell.vue          |   9 +-
 packages/nc-gui/layouts/default.vue           |   5 +-
 packages/nc-gui/store/app.js                  |   6 +-
 packages/nocodb/package-lock.json             | 302 ++++++++++++++----
 packages/nocodb/package.json                  |   2 +-
 .../3a_filter_sort_fields_operations.js       |   2 +
 .../common/4c_form_view_detailed.js           |   3 +
 .../integration/common/4e_form_view_share.js  |   3 +
 .../integration/common/4f_grid_view_share.js  |   3 +
 .../common/4f_pg_grid_view_share.js           |   3 +
 .../integration/common/6f_attachments.js      |   3 +
 scripts/cypress/support/commands.js           |   2 +
 21 files changed, 372 insertions(+), 231 deletions(-)
 delete mode 100644 packages/nc-gui/components/ImportantAnnouncement.vue

diff --git a/packages/nc-gui/components/ImportantAnnouncement.vue b/packages/nc-gui/components/ImportantAnnouncement.vue
deleted file mode 100644
index 169cf98357..0000000000
--- a/packages/nc-gui/components/ImportantAnnouncement.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <v-menu bottom offset-y>
-    <template #activator="{on}">
-      <transition name="announcement">
-        <v-btn
-          v-show="announcementAlert"
-          text
-          small
-          class="mb-0 mr-2 py-0 "
-          v-on="on"
-        >
-          Announcement
-          <v-icon small>
-            mdi-menu-down
-          </v-icon>
-        </v-btn>
-      </transition>
-    </template>
-    <v-list dense>
-      <v-list-item dense>
-        <span class="message">
-          Starting from v0.90, <br/>
-          our API will undergo changes <br/>
-          and we are discontinuing GraphQL
-        </span>
-      </v-list-item>
-      <v-list-item dense href="https://github.com/nocodb/nocodb/issues/1564" target="_blank">
-        <v-icon small class="mr-2">
-          mdi-script-text-outline
-        </v-icon>
-        <span class="caption">
-          v0.90.0 API Changes
-        </span>
-      </v-list-item>
-      <v-list-item dense href="https://github.com/nocodb/nocodb/releases/tag/0.90.0" target="_blank">
-        <v-icon small class="mr-2">
-          mdi-script-text-outline
-        </v-icon>
-        <span class="caption">
-          v0.90.0 Release Note
-        </span>
-      </v-list-item>
-      <v-list-item @click="announcementAlert = false">
-        <v-icon small class="mr-2">
-          mdi-close
-        </v-icon>
-        <span class="caption">
-          <!--Hide menu-->
-          {{ $t('general.hideMenu') }}
-        </span>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-<script>
-export default {
-  name: 'ImportantAnnouncement',
-  data: () => ({
-    loading: true
-  }),
-  computed: {
-    announcementAlert: {
-      get() {
-        return !this.loading && !this.$store.state.app.hiddenAnnouncement
-      },
-      set(val) {
-        return this.$store.commit('app/MutHiddenAnnouncement', val ? null : true)
-      }
-    }
-  },
-  mounted() {
-    setTimeout(() => {
-      this.loading = false
-    }, 1000)
-  }
-}
-</script>
-
-<style scoped>
-.announcement-enter-active, .announcement-leave-active {
-  transition: opacity .5s;
-}
-
-.announcement-enter, .announcement-leave-to {
-  opacity: 0;
-}
-
-.message {
-  font-size: 0.80rem !important;
-  font-weight: bold;
-  margin: 10px;
-}
-</style>
diff --git a/packages/nc-gui/components/PreviewAs.vue b/packages/nc-gui/components/PreviewAs.vue
index d31c64207f..6b83171e2e 100644
--- a/packages/nc-gui/components/PreviewAs.vue
+++ b/packages/nc-gui/components/PreviewAs.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <v-menu offset-y>
+    <v-menu
+      offset-y
+      transition="slide-y-transition"
+    >
       <template #activator="{ on }">
         <v-btn
           v-show="isDashboard && _isUIAllowed('previewAs')"
diff --git a/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
index 2f46caba35..c281d26404 100644
--- a/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
@@ -336,8 +336,13 @@
           :style="{ height: isForm ? '100%' : 'calc(100% - 36px)' }"
           style="overflow: auto; width: 100%"
         >
+          <div v-if="loadingData && (isGallery || isGrid)" class="d-100 h-100 align-center justify-center d-flex flex-column">
+            <v-progress-circular size="40" color="grey" width="2" indeterminate class="mb-4" />
+            <span v-if="selectedView" class="caption grey--text">Loading view data... </span>
+          </div>
+
           <template
-            v-if="selectedViewId && selectedView"
+            v-else-if="selectedViewId && selectedView"
           >
             <!--          <v-skeleton-loader v-if="!dataLoaded && loadingData || !meta" type="table" />-->
             <template v-if="selectedView.type === viewTypes.GRID">
@@ -507,7 +512,7 @@
         @rerender="viewKey++"
         @generateNewViewKey="generateNewViewKey"
         @mapFieldsAndShowFields="mapFieldsAndShowFields"
-        @loadTableData="loadTableData"
+        @loadTableData="loadTableData(false)"
         @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
       >
         <!--        <v-tooltip bottom>
@@ -790,8 +795,8 @@ export default {
     syncDataDebounce: debounce(async function(self) {
       await self.syncData()
     }, 500),
-    loadTableDataDeb: debounce(async function(self) {
-      await self.loadTableDataFn()
+    loadTableDataDeb: debounce(async function(self, ignoreLoader) {
+      await self.loadTableDataFn(ignoreLoader)
     }, 200),
     viewKey: 0,
     extraViewParams: {},
@@ -889,7 +894,7 @@ export default {
   watch: {
     isActive(n, o) {
       if (!o && n) {
-        this.reload()
+        this.reload(true)
       }
     },
     page(p) {
@@ -978,7 +983,7 @@ export default {
       await this.reload()
       this.$e('a:table:reload:navbar')
     },
-    async reload() {
+    async reload(ignoreLoader = false) {
       this.$store.dispatch('meta/ActLoadMeta', {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
@@ -988,7 +993,7 @@ export default {
       if (this.selectedView && this.selectedView.show_as === 'kanban') {
         await this.loadKanbanData()
       } else {
-        await this.loadTableData()
+        await this.loadTableData(ignoreLoader)
       }
       this.key = Math.random()
     },
@@ -1399,17 +1404,17 @@ export default {
       })
     },
     clickPagination() {
-      this.loadTableData()
+      this.loadTableData(false)
       this.$e('a:grid:pagination')
     },
-    loadTableData() {
-      this.loadTableDataDeb(this)
+    loadTableData(ignoreLoader = true) {
+      this.loadTableDataDeb(this, ignoreLoader)
     },
-    async loadTableDataFn() {
+    async loadTableDataFn(ignoreLoader = true) {
       if (this.isForm || !this.selectedView || !this.selectedView.title) {
         return
       }
-      this.loadingData = true
+      this.loadingData = !ignoreLoader
       try {
         // if (this.api) {
         // const { list, count } = await this.api.paginatedList(this.queryParams)
diff --git a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
index c39a2a821c..ccc07cd61b 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
@@ -110,12 +110,17 @@
             >
               <template #item="{ item }">
                 <span :class="`caption font-weight-regular nc-filter-fld-${item.title}`">
-                  <v-icon color="grey darken-4" small class="mr-1">
+                  <v-icon small class="mr-1">
                     {{ item.icon }}
                   </v-icon>
                   {{ item.title }}
                 </span>
               </template>
+              <template #selection="{item}">
+                <v-icon small class="mr-1">
+                  {{ item.icon }}
+                </v-icon> {{ item.title }}
+              </template>
             </v-select>
             <v-select
               :key="'k' + i"
@@ -268,6 +273,11 @@ export default {
     ]
   }),
   computed: {
+    columnIcon() {
+      return this.meta.columns.reduce((iconsObj, c) => {
+        return { ...iconsObj, [c.title]: getUIDTIcon(c.uidt) }
+      }, {})
+    },
     columnsById() {
       return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {})
     },
diff --git a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilterMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilterMenu.vue
index daa07c6839..c080814754 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilterMenu.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-menu offset-y eager>
+  <v-menu
+    offset-y
+    eager
+    transition="slide-y-transition"
+  >
     <template #activator="{ on }">
       <v-badge :value="filters.length" color="primary" dot overlap>
         <v-btn
diff --git a/packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue
index e3cc5880cd..1000966558 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-menu offset-y>
+  <v-menu
+    offset-y
+    transition="slide-y-transition"
+  >
     <template #activator="{ on }">
       <v-badge :value="isAnyFieldHidden" color="primary" dot overlap>
         <v-btn
@@ -123,7 +126,7 @@
               @change="saveOrUpdate(field, i)"
             >
               <template #label>
-                <v-icon color="grey darken-4" small class="mr-1">
+                <v-icon small class="mr-1">
                   {{ field.icon }}
                 </v-icon>
                 <span class="caption">{{ field.title }}</span>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/HeaderCell.vue b/packages/nc-gui/components/project/spreadsheet/components/HeaderCell.vue
index c6ffd4571f..1b550ae5bd 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/HeaderCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/HeaderCell.vue
@@ -51,6 +51,7 @@
       open-on-hover
       left
       z-index="999"
+      transition="slide-y-transition"
     >
       <template #activator="{on}">
         <v-icon v-if="!isLocked && !isVirtual" small v-on="on">
@@ -104,7 +105,14 @@
       </v-list>
     </v-menu>
 
-    <v-menu v-model="editColumnMenu" z-index="999" offset-y content-class="" left>
+    <v-menu
+      v-model="editColumnMenu"
+      z-index="999"
+      offset-y
+      content-class=""
+      left
+      transition="slide-y-transition"
+    >
       <template #activator="{on}">
         <span v-on="on" />
       </template>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue b/packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
index 4a087c0bc5..a65c83876e 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/MoreActions.vue
@@ -4,6 +4,7 @@
       open-on-hover
       bottom
       offset-y
+      transition="slide-y-transition"
     >
       <template #activator="{on}">
         <v-btn
diff --git a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
index 977ed9dedb..3931fc72f5 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-menu offset-y>
+  <v-menu
+    offset-y
+    transition="slide-y-transition"
+  >
     <template #activator="{ on }">
       <v-badge :value="sortList && sortList.length" color="primary" dot overlap>
         <v-btn
@@ -15,10 +18,14 @@
           }"
           v-on="on"
         >
-          <v-icon small class="mr-1" color="#777"> mdi-sort </v-icon>
+          <v-icon small class="mr-1" color="#777">
+            mdi-sort
+          </v-icon>
           <!-- Sort -->
           {{ $t("activity.sort") }}
-          <v-icon small color="#777"> mdi-menu-down </v-icon>
+          <v-icon small color="#777">
+            mdi-menu-down
+          </v-icon>
         </v-btn>
       </v-badge>
     </template>
@@ -49,6 +56,11 @@
             @click.stop
             @change="saveOrUpdate(sort, i)"
           >
+            <template #selection="{item}">
+              <v-icon small class="mr-1">
+                {{ item.icon }}
+              </v-icon> {{ item.title }}
+            </template>
             <template #item="{ item }">
               <span
                 :class="`caption font-weight-regular nc-sort-fld-${item.title}`"
@@ -83,7 +95,9 @@
         </template>
       </div>
       <v-btn small class="elevation-0 grey--text my-3" @click.stop="addSort">
-        <v-icon small color="grey"> mdi-plus </v-icon>
+        <v-icon small color="grey">
+          mdi-plus
+        </v-icon>
         <!-- Add Sort Option -->
         {{ $t("activity.addSort") }}
       </v-btn>
@@ -92,29 +106,29 @@
 </template>
 
 <script>
-import { RelationTypes, UITypes } from "nocodb-sdk";
+import { RelationTypes, UITypes } from 'nocodb-sdk'
 import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
-  name: "SortListMenu",
+  name: 'SortListMenu',
   props: {
     fieldList: Array,
     value: [Array, Object],
     isLocked: Boolean,
     meta: [Object],
     viewId: String,
-    shared: Boolean,
+    shared: Boolean
   },
   data: () => ({
-    sortList: [],
+    sortList: []
   }),
   computed: {
     columns() {
       if (!this.meta || !this.meta.columns) {
-        return [];
+        return []
       }
       return this.meta.columns.filter(
-        (c) =>
+        c =>
           !(
             c.uidt === UITypes.LinkToAnotherRecord &&
             c.colOptions.type !== RelationTypes.BELONGS_TO
@@ -122,76 +136,76 @@ export default {
       ).map(c => ({
         ...c,
         icon: getUIDTIcon(c.uidt)
-      }));
-    },
+      }))
+    }
   },
   watch: {
     value(v) {
-      this.sortList = v || [];
+      this.sortList = v || []
     },
     async viewId(v) {
       if (v) {
-        await this.loadSortList();
+        await this.loadSortList()
       }
-    },
+    }
   },
   async created() {
-    this.sortList = this.value || [];
-    this.loadSortList();
+    this.sortList = this.value || []
+    this.loadSortList()
   },
   methods: {
     addSort() {
       this.sortList.push({
         fk_column_id: null,
-        direction: "asc",
-      });
-      this.sortList = this.sortList.slice();
-      this.$e("a:sort:add", { length: this.sortList.length });
+        direction: 'asc'
+      })
+      this.sortList = this.sortList.slice()
+      this.$e('a:sort:add', { length: this.sortList.length })
     },
     async loadSortList() {
       if (!this.shared) {
         // && !this._isUIAllowed('sortSync')) {
-        let sortList = [];
+        let sortList = []
 
         if (this.viewId) {
-          const data = await this.$api.dbTableSort.list(this.viewId);
-          sortList = data.sorts.list;
+          const data = await this.$api.dbTableSort.list(this.viewId)
+          sortList = data.sorts.list
         }
 
-        this.sortList = sortList;
+        this.sortList = sortList
       }
     },
     async saveOrUpdate(sort, i) {
-      if (!this.shared && this._isUIAllowed("sortSync")) {
+      if (!this.shared && this._isUIAllowed('sortSync')) {
         if (sort.id) {
-          await this.$api.dbTableSort.update(sort.id, sort);
+          await this.$api.dbTableSort.update(sort.id, sort)
         } else {
           this.$set(
             this.sortList,
             i,
             await this.$api.dbTableSort.create(this.viewId, sort)
-          );
+          )
         }
       } else {
-        this.$emit("input", this.sortList);
+        this.$emit('input', this.sortList)
       }
-      this.$emit("updated");
+      this.$emit('updated')
 
-      this.$e("a:sort:dir", { direction: sort.direction });
+      this.$e('a:sort:dir', { direction: sort.direction })
     },
     async deleteSort(sort, i) {
-      if (!this.shared && sort.id && this._isUIAllowed("sortSync")) {
-        await this.$api.dbTableSort.delete(sort.id);
-        await this.loadSortList();
+      if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
+        await this.$api.dbTableSort.delete(sort.id)
+        await this.loadSortList()
       } else {
-        this.sortList.splice(i, 1);
-        this.$emit("input", this.sortList);
+        this.sortList.splice(i, 1)
+        this.$emit('input', this.sortList)
       }
-      this.$emit("updated");
-      this.$e("a:sort:delete");
-    },
-  },
-};
+      this.$emit('updated')
+      this.$e('a:sort:delete')
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/VirtualHeaderCell.vue b/packages/nc-gui/components/project/spreadsheet/components/VirtualHeaderCell.vue
index bd2a4e4126..0efc845d48 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/VirtualHeaderCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/VirtualHeaderCell.vue
@@ -49,6 +49,7 @@
       offset-y
       open-on-hover
       left
+      transition="slide-y-transition"
     >
       <template #activator="{on}">
         <v-icon v-if="!isLocked && !isForm" small v-on="on">
@@ -116,7 +117,13 @@
       </v-card>
     </v-dialog>
 
-    <v-menu v-model="editColumnMenu" offset-y content-class="" left>
+    <v-menu
+      v-model="editColumnMenu"
+      offset-y
+      content-class=""
+      left
+      transition="slide-y-transition"
+    >
       <template #activator="{on}">
         <span v-on="on" />
       </template>
diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue
index d3d1649b69..3995457fcd 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -58,7 +58,6 @@
 
       <div style="flex: 1" class="d-flex justify-end">
         <v-toolbar-items class="hidden-sm-and-down nc-topright-menu">
-          <important-announcement />
           <release-info />
 
           <language class="mr-3" />
@@ -341,7 +340,6 @@ import Language from '~/components/utils/Language'
 import Loader from '~/components/Loader'
 import PreviewAs from '~/components/PreviewAs'
 import ShareOrInviteModal from '~/components/auth/ShareOrInviteModal'
-import ImportantAnnouncement from '../components/ImportantAnnouncement.vue'
 import weAreHiring from '~/helpers/weAreHiring'
 
 export default {
@@ -353,8 +351,7 @@ export default {
     Language,
     XBtn,
     dlgUnexpectedError,
-    settings,
-    ImportantAnnouncement
+    settings
   },
   data: () => ({
     clickCount: true,
diff --git a/packages/nc-gui/store/app.js b/packages/nc-gui/store/app.js
index 67d339968b..8e175eef52 100644
--- a/packages/nc-gui/store/app.js
+++ b/packages/nc-gui/store/app.js
@@ -1,8 +1,7 @@
 export const state = () => ({
   releaseVersion: null,
   hiddenRelease: null,
-  latestRelease: null,
-  hiddenAnnouncement: null
+  latestRelease: null
 })
 
 export const mutations = {
@@ -14,9 +13,6 @@ export const mutations = {
   },
   MutLatestRelease(state, latestRelease) {
     state.latestRelease = latestRelease
-  },
-  MutHiddenAnnouncement(state, hiddenAnnouncement) {
-    state.hiddenAnnouncement = hiddenAnnouncement
   }
 }
 
diff --git a/packages/nocodb/package-lock.json b/packages/nocodb/package-lock.json
index 70ccff6b2a..09aacefff4 100644
--- a/packages/nocodb/package-lock.json
+++ b/packages/nocodb/package-lock.json
@@ -69,7 +69,7 @@
         "mysql2": "^2.2.5",
         "nanoid": "^3.1.20",
         "nc-common": "0.0.6",
-        "nc-help": "0.2.56",
+        "nc-help": "0.2.59",
         "nc-lib-gui": "0.91.0",
         "nc-plugin": "^0.1.1",
         "ncp": "^2.0.0",
@@ -154,6 +154,81 @@
         "node": ">=8.9"
       }
     },
+    "../../../xc-lib-private": {
+      "name": "nc-help",
+      "version": "0.0.2",
+      "extraneous": true,
+      "license": "AGPL-3.0-or-later",
+      "dependencies": {
+        "@rudderstack/rudder-sdk-node": "^1.1.3",
+        "axios": "^0.21.1",
+        "boxen": "^4.2.0",
+        "colors": "1.4.0",
+        "dayjs": "^1.8.32",
+        "debug": "^4.1.1",
+        "ejs": "^3.1.3",
+        "emittery": "^0.7.1",
+        "faker": "^4.1.0",
+        "fast-levenshtein": "^2.0.6",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "handlebars": "^4.7.6",
+        "import-fresh": "^3.2.1",
+        "inflection": "^1.12.0",
+        "is-docker": "^2.1.1",
+        "js-beautify": "^1.11.0",
+        "json5": "^2.1.3",
+        "jsonfile": "^6.1.0",
+        "knex": "^0.21.2",
+        "lodash": "^4.17.19",
+        "md5": "^2.2.1",
+        "mkdirp": "^0.5.1",
+        "mssql": "^6.2.0",
+        "mysql2": "^2.2.5",
+        "nanoid": "^3.1.22",
+        "pg": "^8.3.0",
+        "pkginfo": "^0.4.1",
+        "rmdir": "^1.2.0",
+        "sha.js": "^2.4.11",
+        "slash": "^3.0.0",
+        "sqlite3": "^5.0.0",
+        "ts-morph": "^7.1.2"
+      },
+      "devDependencies": {
+        "@bitjson/npm-scripts-info": "^1.0.0",
+        "@bitjson/typedoc": "^0.15.0-0",
+        "@istanbuljs/nyc-config-typescript": "^0.1.3",
+        "@types/inflection": "^1.5.28",
+        "ava": "2.2.0",
+        "codecov": "^3.5.0",
+        "copy-webpack-plugin": "^6.0.3",
+        "crypto-js": "^4.0.0",
+        "cz-conventional-changelog": "^2.1.0",
+        "declaration-bundler-webpack-plugin": "^1.0.3",
+        "gh-pages": "^2.0.1",
+        "node-machine-id": "^1.1.12",
+        "npm-run-all": "^4.1.5",
+        "nyc": "^14.1.1",
+        "open-cli": "^5.0.0",
+        "prettier": "^1.18.2",
+        "shelljs": "^0.8.4",
+        "standard-version": "^6.0.1",
+        "trash-cli": "^3.0.0",
+        "ts-loader": "^8.0.1",
+        "ts-node": "^8.10.2",
+        "tslint": "^5.18.0",
+        "tslint-config-prettier": "^1.18.0",
+        "tslint-immutable": "^6.0.1",
+        "typescript": "^3.5.3",
+        "webpack": "^4.44.2",
+        "webpack-cli": "^3.3.12",
+        "webpack-node-externals": "^2.5.0",
+        "webpack-obfuscator": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=8.9"
+      }
+    },
     "../nocodb-sdk": {
       "version": "0.91.0",
       "license": "MIT",
@@ -788,9 +863,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.0.tgz",
-      "integrity": "sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg==",
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
+      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1039,6 +1114,19 @@
         "kuler": "^2.0.0"
       }
     },
+    "node_modules/@dsherret/to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@dsherret/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha512-InCaQ/KEOcFtAFztn47wadritBLP2nT6m/ucbBnIgI5YwxuMzKKCHtqazR2+D1yR6y1ZTnPea9aLFEUrTttUSQ==",
+      "peer": true,
+      "dependencies": {
+        "is-absolute": "^1.0.0",
+        "is-negated-glob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1290,7 +1378,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1303,7 +1390,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -1312,7 +1398,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1742,6 +1827,33 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.5.2.tgz",
+      "integrity": "sha512-eLmfYV6u6gUgHrB9QV9lpuWg3cD60mhXdv0jvM5exWR/Cor8HG+GziFIj2hPEWHJknqzuU4meZd8DTqIzZfDRQ==",
+      "peer": true,
+      "dependencies": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "fast-glob": "^3.2.2",
+        "fs-extra": "^9.0.0",
+        "is-negated-glob": "^1.0.0",
+        "multimatch": "^4.0.0",
+        "typescript": "~3.9.7"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/typescript": {
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -1854,8 +1966,7 @@
     "node_modules/@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
-      "dev": true
+      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "node_modules/@types/minimist": {
       "version": "1.2.2",
@@ -2862,7 +2973,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
       "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2926,7 +3036,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5096,6 +5205,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "peer": true
+    },
     "node_modules/code-excerpt": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/code-excerpt/-/code-excerpt-2.1.1.tgz",
@@ -5241,7 +5356,7 @@
     "node_modules/color/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/colorette": {
       "version": "1.2.1",
@@ -5311,7 +5426,7 @@
     "node_modules/component-type": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.2.1.tgz",
-      "integrity": "sha1-ikeQFwAjjk/DIml3EjAibyS0Fak="
+      "integrity": "sha512-Kgy+2+Uwr75vAi6ChWXgHuLvd+QLD7ssgpaRq2zCvt80ptvAfMc/hijcJxXkBa2wMlEZcJvC2H8Ubo+A9ATHIg=="
     },
     "node_modules/compress-commons": {
       "version": "4.1.1",
@@ -9573,6 +9688,12 @@
       ],
       "optional": true
     },
+    "node_modules/faker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-4.1.0.tgz",
+      "integrity": "sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=",
+      "peer": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9589,7 +9710,6 @@
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
       "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -9605,7 +9725,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -9617,7 +9736,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -9629,7 +9747,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -9638,7 +9755,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
       "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.1",
         "picomatch": "^2.2.3"
@@ -9651,7 +9767,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -9703,7 +9818,6 @@
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -11704,7 +11818,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -12913,6 +13026,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -14716,7 +14838,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -15814,7 +15935,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
       "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
-      "dev": true,
       "dependencies": {
         "@types/minimatch": "^3.0.3",
         "array-differ": "^3.0.0",
@@ -15944,9 +16064,9 @@
       }
     },
     "node_modules/nc-help": {
-      "version": "0.2.56",
-      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.56.tgz",
-      "integrity": "sha512-D8KGO2a31sbdAHWOij4RhR6gnSl73R+Zi5CpMPsaQupX6W0U5lHNxQEKASi9Xdo89oPB0smO8QPi65hZ56ADzQ==",
+      "version": "0.2.59",
+      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.59.tgz",
+      "integrity": "sha512-tz1WzykP+3ga6aaiv+ZZkzUK/FgHj7Q/mqb6PSN6c6OwiYJDAA7+4JRc7cyVAWyr9t/6+NQxJsEnmd9tbKzI7w==",
       "dependencies": {
         "@rudderstack/rudder-sdk-node": "^1.1.3",
         "axios": "^0.21.1",
@@ -18292,7 +18412,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -18863,7 +18982,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -19507,7 +19625,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -19562,7 +19679,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -22321,6 +22437,17 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-morph": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-7.3.0.tgz",
+      "integrity": "sha512-BUKSoz7AFSKPcYTZODbICW2mOthAN4vc5juD6FL1lD/dLwZ0WvrC3zqBM3/X6f5gHxq3yaz+HmanHGaWm0ddbQ==",
+      "peer": true,
+      "dependencies": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "@ts-morph/common": "~0.5.2",
+        "code-block-writer": "^10.1.0"
+      }
+    },
     "node_modules/ts-node": {
       "version": "8.10.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
@@ -25300,9 +25427,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.18.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.0.tgz",
-      "integrity": "sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg==",
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
+      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -25499,6 +25626,16 @@
         "kuler": "^2.0.0"
       }
     },
+    "@dsherret/to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@dsherret/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha512-InCaQ/KEOcFtAFztn47wadritBLP2nT6m/ucbBnIgI5YwxuMzKKCHtqazR2+D1yR6y1ZTnPea9aLFEUrTttUSQ==",
+      "peer": true,
+      "requires": {
+        "is-absolute": "^1.0.0",
+        "is-negated-glob": "^1.0.0"
+      }
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -25694,7 +25831,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -25703,14 +25839,12 @@
     "@nodelib/fs.stat": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
     },
     "@nodelib/fs.walk": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -26064,6 +26198,28 @@
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A=="
     },
+    "@ts-morph/common": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.5.2.tgz",
+      "integrity": "sha512-eLmfYV6u6gUgHrB9QV9lpuWg3cD60mhXdv0jvM5exWR/Cor8HG+GziFIj2hPEWHJknqzuU4meZd8DTqIzZfDRQ==",
+      "peer": true,
+      "requires": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "fast-glob": "^3.2.2",
+        "fs-extra": "^9.0.0",
+        "is-negated-glob": "^1.0.0",
+        "multimatch": "^4.0.0",
+        "typescript": "~3.9.7"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "3.9.10",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+          "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
+          "peer": true
+        }
+      }
+    },
     "@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -26176,8 +26332,7 @@
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
-      "dev": true
+      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "@types/minimist": {
       "version": "1.2.2",
@@ -27022,8 +27177,7 @@
     "array-differ": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg=="
     },
     "array-each": {
       "version": "1.0.1",
@@ -27068,8 +27222,7 @@
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
     "array-uniq": {
       "version": "2.1.0",
@@ -28807,6 +28960,12 @@
       "resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.0.tgz",
       "integrity": "sha512-2Nii8p3RwAPiFwsnZvukotvow2rIHM+yQ6ZcBXGHdniadkYGZYiGmkHJIbZPIV9nfv7m/U1IPMVVcAhoWFeklw=="
     },
+    "code-block-writer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "peer": true
+    },
     "code-excerpt": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/code-excerpt/-/code-excerpt-2.1.1.tgz",
@@ -28895,7 +29054,7 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
         }
       }
     },
@@ -28989,7 +29148,7 @@
     "component-type": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.2.1.tgz",
-      "integrity": "sha1-ikeQFwAjjk/DIml3EjAibyS0Fak="
+      "integrity": "sha512-Kgy+2+Uwr75vAi6ChWXgHuLvd+QLD7ssgpaRq2zCvt80ptvAfMc/hijcJxXkBa2wMlEZcJvC2H8Ubo+A9ATHIg=="
     },
     "compress-commons": {
       "version": "4.1.1",
@@ -32329,6 +32488,12 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "optional": true
     },
+    "faker": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-4.1.0.tgz",
+      "integrity": "sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=",
+      "peer": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -32345,7 +32510,6 @@
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
       "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -32358,7 +32522,6 @@
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
           "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -32367,7 +32530,6 @@
           "version": "7.0.1",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
           "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -32375,14 +32537,12 @@
         "is-number": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
         },
         "micromatch": {
           "version": "4.0.4",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
           "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
           "requires": {
             "braces": "^3.0.1",
             "picomatch": "^2.2.3"
@@ -32392,7 +32552,6 @@
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
           "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -32436,7 +32595,6 @@
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
-      "dev": true,
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -33996,7 +34154,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -34881,6 +35038,12 @@
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
       "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w=="
     },
+    "is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=",
+      "peer": true
+    },
     "is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -36295,8 +36458,7 @@
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
     },
     "methods": {
       "version": "1.1.2",
@@ -37147,7 +37309,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
       "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
-      "dev": true,
       "requires": {
         "@types/minimatch": "^3.0.3",
         "array-differ": "^3.0.0",
@@ -37257,9 +37418,9 @@
       "integrity": "sha512-3AryS9uwa5NfISLxMciUonrH7YfXp+nlahB9T7girXIsLQrmwX4MdnuKs32akduCOGpKmjTJSWmATULbuMkbfw=="
     },
     "nc-help": {
-      "version": "0.2.56",
-      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.56.tgz",
-      "integrity": "sha512-D8KGO2a31sbdAHWOij4RhR6gnSl73R+Zi5CpMPsaQupX6W0U5lHNxQEKASi9Xdo89oPB0smO8QPi65hZ56ADzQ==",
+      "version": "0.2.59",
+      "resolved": "https://registry.npmjs.org/nc-help/-/nc-help-0.2.59.tgz",
+      "integrity": "sha512-tz1WzykP+3ga6aaiv+ZZkzUK/FgHj7Q/mqb6PSN6c6OwiYJDAA7+4JRc7cyVAWyr9t/6+NQxJsEnmd9tbKzI7w==",
       "requires": {
         "@rudderstack/rudder-sdk-node": "^1.1.3",
         "axios": "^0.21.1",
@@ -39136,8 +39297,7 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pidtree": {
       "version": "0.3.1",
@@ -39556,8 +39716,7 @@
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
     "quick-lru": {
       "version": "1.1.0",
@@ -40048,8 +40207,7 @@
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
     "right-pad": {
       "version": "1.0.1",
@@ -40091,7 +40249,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "requires": {
         "queue-microtask": "^1.2.2"
       }
@@ -42241,6 +42398,17 @@
         }
       }
     },
+    "ts-morph": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-7.3.0.tgz",
+      "integrity": "sha512-BUKSoz7AFSKPcYTZODbICW2mOthAN4vc5juD6FL1lD/dLwZ0WvrC3zqBM3/X6f5gHxq3yaz+HmanHGaWm0ddbQ==",
+      "peer": true,
+      "requires": {
+        "@dsherret/to-absolute-glob": "^2.0.2",
+        "@ts-morph/common": "~0.5.2",
+        "code-block-writer": "^10.1.0"
+      }
+    },
     "ts-node": {
       "version": "8.10.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
diff --git a/packages/nocodb/package.json b/packages/nocodb/package.json
index da0ade04bf..b291bbd17f 100644
--- a/packages/nocodb/package.json
+++ b/packages/nocodb/package.json
@@ -152,7 +152,7 @@
     "mysql2": "^2.2.5",
     "nanoid": "^3.1.20",
     "nc-common": "0.0.6",
-    "nc-help": "0.2.56",
+    "nc-help": "0.2.59",
     "nc-lib-gui": "0.91.0",
     "nc-plugin": "^0.1.1",
     "ncp": "^2.0.0",
diff --git a/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js b/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js
index b1c573581b..0f9408dab1 100644
--- a/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js
+++ b/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js
@@ -49,6 +49,8 @@ export const genTest = (apiType, dbType) => {
 
                 // verify
                 mainPage.getPagination(5).click();
+                // kludge: flicker on load
+                cy.wait(3000)
                 mainPage
                     .getCell("Country", 10)
                     .contains("Test Country")
diff --git a/scripts/cypress/integration/common/4c_form_view_detailed.js b/scripts/cypress/integration/common/4c_form_view_detailed.js
index 1236b792ed..e81ad93100 100644
--- a/scripts/cypress/integration/common/4c_form_view_detailed.js
+++ b/scripts/cypress/integration/common/4c_form_view_detailed.js
@@ -517,6 +517,9 @@ export const genTest = (apiType, dbType) => {
                 // clean up newly added rows into Country table operations
                 // this auto verifies successfull addition of rows to table as well
                 mainPage.getPagination(5).click();
+                // kludge: flicker on load
+                cy.wait(3000)
+
                 cy.get(".nc-grid-row").should("have.length", 13);
                 mainPage
                     .getRow(10)
diff --git a/scripts/cypress/integration/common/4e_form_view_share.js b/scripts/cypress/integration/common/4e_form_view_share.js
index c68d36e56e..b2e16ba956 100644
--- a/scripts/cypress/integration/common/4e_form_view_share.js
+++ b/scripts/cypress/integration/common/4e_form_view_share.js
@@ -208,6 +208,9 @@ export const genTest = (apiType, dbType) => {
                 // clean up newly added rows into Country table operations
                 // this auto verifies successfull addition of rows to table as well
                 mainPage.getPagination(25).click();
+                // kludge: flicker on load
+                cy.wait(3000)
+
                 cy.get(".nc-grid-row").should("have.length", 1);
                 mainPage
                     .getRow(1)
diff --git a/scripts/cypress/integration/common/4f_grid_view_share.js b/scripts/cypress/integration/common/4f_grid_view_share.js
index 26cedc3035..5c5bda992d 100644
--- a/scripts/cypress/integration/common/4f_grid_view_share.js
+++ b/scripts/cypress/integration/common/4f_grid_view_share.js
@@ -396,6 +396,9 @@ export const genTest = (apiType, dbType) => {
 
             // delete row
             mainPage.getPagination(5).click();
+            // kludge: flicker on load
+            cy.wait(3000)
+
             // wait for page rendering to complete
             cy.get(".nc-grid-row").should("have.length", 10);
             mainPage
diff --git a/scripts/cypress/integration/common/4f_pg_grid_view_share.js b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
index e04070c52d..7e450dcbab 100644
--- a/scripts/cypress/integration/common/4f_pg_grid_view_share.js
+++ b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
@@ -390,6 +390,9 @@ export const genTest = (apiType, dbType) => {
 
             // delete row
             mainPage.getPagination(5).click();
+            // kludge: flicker on load
+            cy.wait(3000)
+
             // wait for page rendering to complete
             cy.get(".nc-grid-row").should("have.length", 10);
             mainPage
diff --git a/scripts/cypress/integration/common/6f_attachments.js b/scripts/cypress/integration/common/6f_attachments.js
index 7f8d74bbcf..4d3e8ef036 100644
--- a/scripts/cypress/integration/common/6f_attachments.js
+++ b/scripts/cypress/integration/common/6f_attachments.js
@@ -17,6 +17,9 @@ export const genTest = (apiType, dbType) => {
             // clean up newly added rows into Country table operations
             // this auto verifies successfull addition of rows to table as well
             mainPage.getPagination(5).click();
+            // kludge: flicker on load
+            cy.wait(3000)
+
             // wait for page rendering to complete
             cy.get(".nc-grid-row").should("have.length", 10);
             mainPage
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 61171b8c20..d9d9509d71 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -180,6 +180,8 @@ Cypress.Commands.add("openTableTab", (tn, rc) => {
         cy.get(".nc-grid-row").should("have.length", rc);
     }
 
+    // kludge: add delay to skip flicker
+    cy.wait(3000)
     cy.snip(`GridView_${tn}`);
 });