From 41d11cf246939f775452dff4aebf6f01adbe212d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Sep 2022 23:33:45 +0200
Subject: [PATCH 1/3] refactor(nc-gui): update webhook drawer styles

---
 .../nc-gui/components/smartsheet-toolbar/ColumnFilter.vue    | 4 ++--
 packages/nc-gui/components/webhook/Drawer.vue                | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
index 75683e7e77..1c5c7c2e7a 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
@@ -134,8 +134,8 @@ defineExpose({
 
 <template>
   <div
-    class="p-6 menu-filter-dropdown bg-gray-50 !border"
-    :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
+    class="p-4 menu-filter-dropdown bg-gray-50 !border mt-4"
+    :class="{ 'shadow min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
       <template v-for="(filter, i) in filters" :key="filter.id || i">
diff --git a/packages/nc-gui/components/webhook/Drawer.vue b/packages/nc-gui/components/webhook/Drawer.vue
index 8391dd1b96..674ef13c5e 100644
--- a/packages/nc-gui/components/webhook/Drawer.vue
+++ b/packages/nc-gui/components/webhook/Drawer.vue
@@ -32,12 +32,13 @@ async function editHook(hook: Record<string, any>) {
     class="nc-drawer-webhook"
     @keydown.esc="vModel = false"
   >
-    <a-layout class="">
+    <a-layout>
       <a-layout-content class="px-10 py-5 scrollbar-thin-primary">
         <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
         <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
       </a-layout-content>
-      <a-layout-footer class="!bg-white flex">
+
+      <a-layout-footer class="!bg-white border-t flex">
         <a-button v-e="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
           🚀 {{ $t('labels.weAreHiring') }}! 🚀
         </a-button>

From 5320a313bc467a250c9df0dddc5a015f288aa4de Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Sep 2022 23:50:24 +0200
Subject: [PATCH 2/3] refactor(nc-gui): hide loading spinner when reloading
 from view filters

---
 .../smartsheet-toolbar/ColumnFilter.vue       |  4 +---
 .../nc-gui/components/smartsheet/Grid.vue     | 24 +++++++++++++------
 packages/nc-gui/composables/useViewFilters.ts | 12 +++++-----
 packages/nc-gui/context/index.ts              |  4 +++-
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
index 1c5c7c2e7a..9094b60422 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
@@ -46,9 +46,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   activeView,
   parentId,
   computed(() => autoSave),
-  () => {
-    reloadDataHook.trigger()
-  },
+  reloadDataHook.trigger,
   modelValue || nestedFilters.value,
   !modelValue,
 )
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index efb4a3e99a..ee63f384b7 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -23,6 +23,7 @@ import {
   provide,
   reactive,
   ref,
+  useClipboard,
   useEventListener,
   useGridViewColumnWidth,
   useI18n,
@@ -96,6 +97,8 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
+const { copy } = useClipboard()
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -113,8 +116,15 @@ provide(ReadonlyInj, !hasEditPermission)
 const disableUrlOverlay = ref(false)
 provide(CellUrlDisableOverlayInj, disableUrlOverlay)
 
-reloadViewDataHook?.on(async () => {
+const showLoading = ref(true)
+
+reloadViewDataHook?.on(async (shouldShowLoading) => {
+  // set value if spinner should be hidden
+  showLoading.value = !!shouldShowLoading
   await loadData()
+
+  // reset to default (showing spinner on load)
+  showLoading.value = true
 })
 
 const skipRowRemovalOnCancel = ref(false)
@@ -179,8 +189,6 @@ const clearCell = async (ctx: { row: number; col: number }) => {
   await updateOrSaveRow(rowObj, columnObj.title)
 }
 
-const { copy } = useClipboard()
-
 const makeEditable = (row: Row, col: ColumnType) => {
   if (!hasEditPermission || editEnabled || isView) {
     return
@@ -373,10 +381,12 @@ onBeforeUnmount(async () => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <div v-if="isLoading" class="flex items-center justify-center h-full w-full">
-      <a-spin size="large" />
-    </div>
-    <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
+    <general-overlay :model-value="isLoading" inline transition>
+      <div class="flex items-center justify-center h-full w-full">
+        <a-spin size="large" />
+      </div>
+    </general-overlay>
+    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown
         v-model:visible="contextMenu"
         :trigger="isSqlView ? [] : ['contextmenu']"
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index eb914f1824..374bb6d701 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -19,7 +19,7 @@ export function useViewFilters(
   view: Ref<ViewType | undefined>,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
-  reloadData?: () => void,
+  reloadData?: (showLoading?: boolean) => void,
   currentFilters?: Filter[],
   isNestedRoot?: boolean,
 ) {
@@ -110,7 +110,7 @@ export function useViewFilters(
         }
       }
 
-      reloadData?.()
+      reloadData?.(false)
     } catch (e: any) {
       console.log(e)
       message.error(await extractSdkResponseErrorMsg(e))
@@ -122,7 +122,7 @@ export function useViewFilters(
     if (nestedMode.value) {
       filters.value.splice(i, 1)
       filters.value = [...filters.value]
-      reloadData?.()
+      reloadData?.(false)
     } else {
       if (filter.id) {
         // if auto-apply disabled mark it as disabled
@@ -133,7 +133,7 @@ export function useViewFilters(
           try {
             await $api.dbTableFilter.delete(filter.id)
 
-            reloadData?.()
+            reloadData?.(false)
 
             filters.value.splice(i, 1)
           } catch (e: any) {
@@ -150,7 +150,7 @@ export function useViewFilters(
   }
 
   const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
-    if (!view?.value) return
+    if (!view.value) return
 
     try {
       if (nestedMode.value) {
@@ -179,7 +179,7 @@ export function useViewFilters(
       message.error(await extractSdkResponseErrorMsg(e))
     }
 
-    reloadData?.()
+    reloadData?.(false)
   }
 
   const addFilter = () => {
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 5caebcb1c4..d13500e68b 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -21,7 +21,9 @@ export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injecti
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
-export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
+
+/** when bool is passed, it indicates if a loading spinner should be visible while reloading */
+export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection')
 export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')

From 1c7883d165fecd9dc063298e380306f4e223679a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 09:44:34 +0200
Subject: [PATCH 3/3] refactor(nc-gui): pass `showLoading` as prop to
 ColumnFilter

---
 .../components/smartsheet-toolbar/ColumnFilter.vue     |  5 +++--
 packages/nc-gui/components/webhook/Editor.vue          |  8 +++++++-
 packages/nc-gui/composables/useViewFilters.ts          | 10 +++++-----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
index 9094b60422..3a845b81d0 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
@@ -21,10 +21,11 @@ interface Props {
   parentId?: string
   autoSave: boolean
   hookId?: string
+  showLoading?: boolean
   modelValue?: Filter[]
 }
 
-const { nested = false, parentId, autoSave = true, hookId = null, modelValue } = defineProps<Props>()
+const { nested = false, parentId, autoSave = true, hookId = null, modelValue, showLoading = true } = defineProps<Props>()
 
 const emit = defineEmits(['update:filtersLength'])
 
@@ -46,7 +47,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   activeView,
   parentId,
   computed(() => autoSave),
-  reloadDataHook.trigger,
+  () => reloadDataHook.trigger(showLoading),
   modelValue || nestedFilters.value,
   !modelValue,
 )
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index 9abdf91bc0..ec7ba57b89 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -606,7 +606,13 @@ onMounted(async () => {
         <a-col :span="24">
           <a-card>
             <a-checkbox v-model:checked="hook.condition" class="nc-check-box-hook-condition">On Condition</a-checkbox>
-            <SmartsheetToolbarColumnFilter v-if="hook.condition" ref="filterRef" :auto-save="false" :hook-id="hook.id" />
+            <SmartsheetToolbarColumnFilter
+              v-if="hook.condition"
+              ref="filterRef"
+              :auto-save="false"
+              :show-loading="false"
+              :hook-id="hook.id"
+            />
           </a-card>
         </a-col>
       </a-row>
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 374bb6d701..45863e1a46 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -19,7 +19,7 @@ export function useViewFilters(
   view: Ref<ViewType | undefined>,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
-  reloadData?: (showLoading?: boolean) => void,
+  reloadData?: () => void,
   currentFilters?: Filter[],
   isNestedRoot?: boolean,
 ) {
@@ -110,7 +110,7 @@ export function useViewFilters(
         }
       }
 
-      reloadData?.(false)
+      reloadData?.()
     } catch (e: any) {
       console.log(e)
       message.error(await extractSdkResponseErrorMsg(e))
@@ -122,7 +122,7 @@ export function useViewFilters(
     if (nestedMode.value) {
       filters.value.splice(i, 1)
       filters.value = [...filters.value]
-      reloadData?.(false)
+      reloadData?.()
     } else {
       if (filter.id) {
         // if auto-apply disabled mark it as disabled
@@ -133,7 +133,7 @@ export function useViewFilters(
           try {
             await $api.dbTableFilter.delete(filter.id)
 
-            reloadData?.(false)
+            reloadData?.()
 
             filters.value.splice(i, 1)
           } catch (e: any) {
@@ -179,7 +179,7 @@ export function useViewFilters(
       message.error(await extractSdkResponseErrorMsg(e))
     }
 
-    reloadData?.(false)
+    reloadData?.()
   }
 
   const addFilter = () => {