From 1d7078207d31157d631aa7d0cc7672d57505bead Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 7 Mar 2023 18:49:05 +0530
Subject: [PATCH 01/18] fix(gui): remove unnecessary margin from filter menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue | 2 +-
 packages/nc-gui/components/webhook/Editor.vue                  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index c5e12a6b5a..01bed331fc 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -198,7 +198,7 @@ defineExpose({
 
 <template>
   <div
-    class="p-4 menu-filter-dropdown bg-gray-50 !border mt-4"
+    class="p-4 menu-filter-dropdown bg-gray-50 !border"
     :class="{ 'shadow min-w-[430px] 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>
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index eb01b0d50d..37cf556cc4 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -651,6 +651,7 @@ onMounted(loadPluginList)
             </a-checkbox>
 
             <LazySmartsheetToolbarColumnFilter
+              class="mt-4"
               v-if="hook.condition"
               ref="filterRef"
               :auto-save="false"

From f9861744df4a502e4602b3e87181e3e56118bcee Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 7 Mar 2023 18:54:47 +0530
Subject: [PATCH 02/18] feat(gui): show empty checkbox

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Checkbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 1de2de9d79..f482d24511 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -89,7 +89,7 @@ useSelectedCellKeyupListener(active, (e) => {
 
 <style scoped lang="scss">
 .nc-cell-hover-show {
-  opacity: 0;
+  opacity: 0.3;
   transition: 0.3s opacity;
 
   &:hover {

From 076cc578aa7acaa11363a2fddd6536adddc2811e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 7 Mar 2023 19:16:57 +0530
Subject: [PATCH 03/18] fix(gui): do line break by word

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/ClampedText.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/ClampedText.vue b/packages/nc-gui/components/cell/ClampedText.vue
index 37940c94dc..e6b4fa3eb0 100644
--- a/packages/nc-gui/components/cell/ClampedText.vue
+++ b/packages/nc-gui/components/cell/ClampedText.vue
@@ -29,7 +29,7 @@ onMounted(() => {
     -->
     <text-clamp
       :key="`clamp-${key}-${props.value?.toString().length || 0}`"
-      class="w-full h-full break-all"
+      class="w-full h-full break-word"
       :text="`${props.value || ' '}`"
       :max-lines="props.lines"
     />

From 3701c4c66098ee9bbc440ed7fb4dd6320f8199f9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 7 Mar 2023 19:31:13 +0530
Subject: [PATCH 04/18] fix(gui): remove outline of textarea

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/TextArea.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 86d0564e2e..4c55473635 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -21,7 +21,7 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
 
 <template>
   <textarea
-    v-if="editEnabled"
+    v-if="true || editEnabled"
     :ref="focus"
     v-model="vModel"
     rows="4"
@@ -45,3 +45,8 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
 
   <span v-else>{{ vModel }}</span>
 </template>
+<style>
+textarea:focus {
+  box-shadow: none;
+}
+</style>

From cf4381e388454e1d7824367b7cedbff472ecd37a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 19:05:03 +0530
Subject: [PATCH 05/18] refactor: move expanded form icons to menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/TextArea.vue  |  2 +-
 .../smartsheet/expanded-form/Header.vue       | 55 ++++++++++++++++---
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 4c55473635..e61967f9be 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -21,7 +21,7 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
 
 <template>
   <textarea
-    v-if="true || editEnabled"
+    v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
     rows="4"
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index f453f8f8db..254625cabf 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -102,7 +102,7 @@ const onConfirmDeleteRowClick = async () => {
 
     <div class="flex-1" />
 
-    <a-tooltip placement="bottom">
+    <!--    <a-tooltip placement="bottom">
       <template #title>
         <div class="text-center w-full">{{ $t('general.reload') }}</div>
       </template>
@@ -111,10 +111,10 @@ const onConfirmDeleteRowClick = async () => {
         class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4"
         @click="loadRow"
       />
-    </a-tooltip>
-    <a-tooltip placement="bottom">
+    </a-tooltip> -->
+    <!--    <a-tooltip placement="bottom">
       <template #title>
-        <!-- todo: i18n -->
+        &lt;!&ndash; todo: i18n &ndash;&gt;
         <div class="text-center w-full">Copy record URL</div>
       </template>
       <mdi-link
@@ -122,7 +122,7 @@ const onConfirmDeleteRowClick = async () => {
         class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
         @click="copyRecordUrl"
       />
-    </a-tooltip>
+    </a-tooltip> -->
 
     <a-tooltip v-if="!isSqlView" placement="bottom">
       <!--      Toggle comments draw -->
@@ -138,7 +138,7 @@ const onConfirmDeleteRowClick = async () => {
     </a-tooltip>
 
     <a-tooltip v-if="!isSqlView" placement="bottom">
-      <!-- Duplicate row -->
+      &lt;!&ndash; Duplicate row &ndash;&gt;
       <template #title>
         <div class="text-center w-full">{{ $t('activity.duplicateRow') }}</div>
       </template>
@@ -150,8 +150,9 @@ const onConfirmDeleteRowClick = async () => {
       />
     </a-tooltip>
 
-    <a-tooltip v-if="!isSqlView" placement="bottom">
-      <!-- Delete row -->
+    <!--
+    <!--    <a-tooltip v-if="!isSqlView" placement="bottom">
+      &lt;!&ndash; Delete row &ndash;&gt;
       <template #title>
         <div class="text-center w-full">{{ $t('activity.deleteRow') }}</div>
       </template>
@@ -161,7 +162,7 @@ const onConfirmDeleteRowClick = async () => {
         class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
         @click="!isNew && onDeleteRowClick()"
       />
-    </a-tooltip>
+    </a-tooltip> -->
 
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #icon><MdiMenuDown /></template>
@@ -192,6 +193,41 @@ const onConfirmDeleteRowClick = async () => {
       </div>
     </a-dropdown-button>
 
+    <a-dropdown>
+      <MdiDotsVertical class="nc-icon-transition" />
+      <template #overlay>
+        <a-menu>
+          <a-menu-item v-if="!isNew" @click="loadRow">
+            <div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center">
+              <mdi-reload class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" />
+              {{ $t('general.reload') }}
+            </div>
+          </a-menu-item>
+          <a-menu-item v-if="!isNew" @click="loadRow">
+            <div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center">
+              <mdi-link
+                class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
+                @click="copyRecordUrl"
+              />
+              Copy record URL
+            </div>
+          </a-menu-item>
+          <a-menu-item v-if="isUIAllowed('xcDatatableEditable') && !isNew" @click="!isNew && emit('duplicateRow')">
+            <div v-e="['c:row-expand:duplicate']" class="py-2 flex gap-2 a">
+              <MdiContentCopy class="nc-icon-transition cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4" />
+              {{ $t('activity.duplicateRow') }}
+            </div>
+          </a-menu-item>
+          <a-menu-item v-if="isUIAllowed('xcDatatableEditable') && !isNew" @click="!isNew && onDeleteRowClick()">
+            <div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center">
+              <MdiDeleteOutline class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4" />
+              {{ $t('activity.deleteRow') }}
+            </div>
+          </a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+
     <a-tooltip placement="bottom">
       <!-- Close -->
       <template #title>
@@ -202,6 +238,7 @@ const onConfirmDeleteRowClick = async () => {
         @click="emit('cancel')"
       />
     </a-tooltip>
+-->
 
     <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
       <p>Are you sure you want to delete this row?</p>

From d9e38241d662308746f259fa1e11e83df483628b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:24:01 +0530
Subject: [PATCH 06/18] fix(gui): html correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/expanded-form/Header.vue | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 254625cabf..4654e8fd30 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -150,20 +150,6 @@ const onConfirmDeleteRowClick = async () => {
       />
     </a-tooltip>
 
-    <!--
-    <!--    <a-tooltip v-if="!isSqlView" placement="bottom">
-      &lt;!&ndash; Delete row &ndash;&gt;
-      <template #title>
-        <div class="text-center w-full">{{ $t('activity.deleteRow') }}</div>
-      </template>
-      <MdiDeleteOutline
-        v-if="isUIAllowed('xcDatatableEditable') && !isNew"
-        v-e="['c:row-expand:delete']"
-        class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
-        @click="!isNew && onDeleteRowClick()"
-      />
-    </a-tooltip> -->
-
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #icon><MdiMenuDown /></template>
 

From 1c51efa43b235da0c51610da152479d9dc988aaf Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:26:26 +0530
Subject: [PATCH 07/18] fix(gui): add confirm option for save when switching to
 next record

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/index.vue        | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index f72807f0cf..35cb7b852f 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -141,8 +141,22 @@ const onDuplicateRow = () => {
 }
 
 const onNext = async () => {
-  await save()
-  emits('next')
+  if (changedColumns.value.size > 0) {
+    await Modal.confirm({
+      title: 'Do you want to save the changes?',
+      okText: 'Save',
+      cancelText: 'Discard',
+      onOk: async () => {
+        await save()
+        emits('next')
+      },
+      onCancel: () => {
+        emits('next')
+      },
+    })
+  } else {
+    emits('next')
+  }
 }
 
 const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
@@ -196,7 +210,7 @@ useActiveKeyupListener(
       emits('prev')
     } else if (e.key === 'ArrowRight') {
       e.stopPropagation()
-      emits('next')
+      onNext()
     }
     // on alt + s save record
     else if (e.code === 'KeyS') {
@@ -319,7 +333,8 @@ export default {
                 :ref="i ? null : (el) => (cellWrapperEl = el)"
                 class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2 relative"
               >
-                <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
+                <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row"
+                                           :column="col" />
 
                 <LazySmartsheetCell
                   v-else

From 9fe91ec853ad21ab8fb6ad56957171712bd46921 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:36:42 +0530
Subject: [PATCH 08/18] refactor(gui): make default behaviour as save and stay

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/expanded-form/Header.vue | 2 --
 packages/nc-gui/composables/useExpandedFormStore.ts            | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 4654e8fd30..4694d01229 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -138,7 +138,6 @@ const onConfirmDeleteRowClick = async () => {
     </a-tooltip>
 
     <a-tooltip v-if="!isSqlView" placement="bottom">
-      &lt;!&ndash; Duplicate row &ndash;&gt;
       <template #title>
         <div class="text-center w-full">{{ $t('activity.duplicateRow') }}</div>
       </template>
@@ -224,7 +223,6 @@ const onConfirmDeleteRowClick = async () => {
         @click="emit('cancel')"
       />
     </a-tooltip>
--->
 
     <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
       <p>Are you sure you want to delete this row?</p>
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 79f4590c30..7fc272c9d4 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -38,7 +38,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const commentsDrawer = ref(false)
 
-  const saveRowAndStay = ref(0)
+  const saveRowAndStay = ref(1)
 
   const changedColumns = ref(new Set<string>())
 

From c32533ca793eb70a98feab29b3e03c373cd7bef1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:45:39 +0530
Subject: [PATCH 09/18] fix(gui): nested filter ui correction and max height
 for filter list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/toolbar/ColumnFilter.vue       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index 01bed331fc..cdd97c001a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -201,7 +201,12 @@ defineExpose({
     class="p-4 menu-filter-dropdown bg-gray-50 !border"
     :class="{ 'shadow min-w-[430px] 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>
+    <div
+      v-if="filters && filters.length"
+      class="nc-filter-grid mb-2"
+      :class="{ 'max-h-420px overflow-y-auto': !nested }"
+      @click.stop
+    >
       <template v-for="(filter, i) in filters" :key="i">
         <template v-if="filter.status !== 'delete'">
           <template v-if="filter.is_group">
@@ -230,7 +235,7 @@ defineExpose({
               </a-select>
             </div>
             <span class="col-span-3" />
-            <div class="col-span-5">
+            <div class="col-span-6">
               <LazySmartsheetToolbarColumnFilter
                 v-if="filter.id || filter.children"
                 :key="filter.id ?? i"

From 8e9eac0e6e436342888af2bd525623353d7da496 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:54:39 +0530
Subject: [PATCH 10/18] refactor(gui): limit max height of sort list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/toolbar/SortListMenu.vue       | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index eaddd9d7ec..1bab0ce817 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { nextTick } from '@vue/runtime-core'
 import type { ColumnType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
@@ -22,7 +23,17 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { eventBus } = useSmartsheetStoreOrThrow()
 
-const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+const { sorts, saveOrUpdate, loadSorts, addSort:_addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+
+const removeIcon = ref<HTMLElement>()
+
+const addSort = () => {
+  _addSort()
+  nextTick(() => {
+    console.log(removeIcon.value)
+    removeIcon.value?.[removeIcon.value?.length - 1]?.$el?.scrollIntoView()
+  })
+}
 
 eventBus.on((event) => {
   if (event === SmartsheetStoreEvents.SORT_RELOAD) {
@@ -30,6 +41,7 @@ eventBus.on((event) => {
   }
 })
 
+
 const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>
@@ -56,6 +68,8 @@ watch(
 const open = ref(false)
 
 useMenuCloseOnEsc(open)
+
+
 </script>
 
 <template>
@@ -78,9 +92,9 @@ useMenuCloseOnEsc(open)
         class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border"
         data-testid="nc-sorts-menu"
       >
-        <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
+        <div v-if="sorts?.length" class="sort-grid mb-2 max-h-420px overflow-y-auto" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
-            <MdiCloseBox class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
+            <MdiCloseBox ref="removeIcon" class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
 
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"
@@ -92,6 +106,7 @@ useMenuCloseOnEsc(open)
             />
 
             <a-select
+              ref=""
               v-model:value="sort.direction"
               class="shrink grow-0 nc-sort-dir-select !text-xs"
               :label="$t('labels.operation')"

From d029b04516b834589886ab400b0c1e643d888175 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:57:42 +0530
Subject: [PATCH 11/18] refactor(gui): sort and filter menu width

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/toolbar/ColumnFilter.vue           |  2 +-
 .../smartsheet/toolbar/SortListMenu.vue           | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index cdd97c001a..681524545e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -199,7 +199,7 @@ defineExpose({
 <template>
   <div
     class="p-4 menu-filter-dropdown bg-gray-50 !border"
-    :class="{ 'shadow min-w-[430px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
+    :class="{  'min-w-[430px]': filters.length, 'shadow max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div
       v-if="filters && filters.length"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 1bab0ce817..17bae4c241 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -23,7 +23,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { eventBus } = useSmartsheetStoreOrThrow()
 
-const { sorts, saveOrUpdate, loadSorts, addSort:_addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+const { sorts, saveOrUpdate, loadSorts, addSort: _addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
 const removeIcon = ref<HTMLElement>()
 
@@ -41,7 +41,6 @@ eventBus.on((event) => {
   }
 })
 
-
 const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>
@@ -68,8 +67,6 @@ watch(
 const open = ref(false)
 
 useMenuCloseOnEsc(open)
-
-
 </script>
 
 <template>
@@ -89,12 +86,18 @@ useMenuCloseOnEsc(open)
     </div>
     <template #overlay>
       <div
-        class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border"
+        :class="{ ' min-w-[400px]': sorts.length }"
+        class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown max-h-[max(80vh,500px)] overflow-auto !border"
         data-testid="nc-sorts-menu"
       >
         <div v-if="sorts?.length" class="sort-grid mb-2 max-h-420px overflow-y-auto" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
-            <MdiCloseBox ref="removeIcon" class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
+            <MdiCloseBox
+              ref="removeIcon"
+              class="nc-sort-item-remove-btn text-grey self-center"
+              small
+              @click.stop="deleteSort(sort, i)"
+            />
 
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"

From 5eecd646f33840a442867f526ad9911ad4efe215 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 22:03:23 +0530
Subject: [PATCH 12/18] refactor(gui): show comments by default

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/composables/useExpandedFormStore.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 7fc272c9d4..398e4261e2 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -30,13 +30,13 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const { t } = useI18n()
 
-  const commentsOnly = ref(false)
+  const commentsOnly = ref(true)
 
   const commentsAndLogs = ref<any[]>([])
 
   const comment = ref('')
 
-  const commentsDrawer = ref(false)
+  const commentsDrawer = ref(true)
 
   const saveRowAndStay = ref(1)
 

From e62b9e02d402095fe150a9a990495609578db499 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 9 Mar 2023 11:26:54 +0530
Subject: [PATCH 13/18] refactor: show as multiline for single line if row
 height is more than 1

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Text.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index d185167b56..1f744070f3 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -14,6 +14,8 @@ const { showNull } = useGlobal()
 
 const editEnabled = inject(EditModeInj)
 
+const rowHeight = inject(RowHeightInj)
+
 const readonly = inject(ReadonlyInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
@@ -42,5 +44,5 @@ const focus: VNodeRef = (el) => {
 
   <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
 
-  <LazyCellClampedText v-else :value="vModel" :lines="1" />
+  <LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
 </template>

From ecc64e0169cd8765b14315428b546032debbc54f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 9 Mar 2023 11:37:39 +0530
Subject: [PATCH 14/18] refactor(gui): show default system context menu when
 cell is in editable state and typable

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Currency.vue   |  1 +
 packages/nc-gui/components/smartsheet/Cell.vue | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 9aa50944c5..bdef2b4b0c 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -81,6 +81,7 @@ onMounted(() => {
     @keydown.delete.stop
     @selectstart.capture.stop
     @mousedown.stop
+    @contextmenu.stop
   />
 
   <span v-else-if="vModel === null && showNull" class="nc-null">NULL</span>
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index be23b134d5..f39454f7f4 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -139,6 +139,15 @@ const isNumericField = computed(() => {
     isDuration(column.value)
   )
 })
+
+// disable contexxtmenu event propagation when cell is in
+// editable state and typable (e.g. text area)
+// this is to prevent the custom grid view context menu from opening
+const onContextmenu = (e: MouseEvent) => {
+  if (props.editEnabled && isTypableInputColumn(column.value)) {
+    e.stopPropagation()
+  }
+}
 </script>
 
 <template>
@@ -151,6 +160,7 @@ const isNumericField = computed(() => {
     ]"
     @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
+    @contextmenu="onContextmenu"
   >
     <template v-if="column">
       <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" />

From cc2dff7236443191feceeca6d7b12637e4b97820 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 10 Mar 2023 11:39:45 +0530
Subject: [PATCH 15/18] test: add escape to move away from edit mode before
 right click

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 tests/playwright/pages/Dashboard/common/Cell/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index 5d5da5f46e..23f9b0d0b1 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -289,8 +289,11 @@ export class CellPageObject extends BasePage {
     // editable cell
     await cell.dblclick();
     await expect(await cell.locator(`input`)).toHaveCount(param.role === 'creator' || param.role === 'editor' ? 1 : 0);
-    // right click context menu
-    await cell.click({ button: 'right' });
+
+    // press escape to close the input
+    await cell.press('Escape');
+
+    await cell.click({ button: 'right', clickCount: 1 });
     await expect(await this.rootPage.locator(`.nc-dropdown-grid-context-menu:visible`)).toHaveCount(
       param.role === 'creator' || param.role === 'editor' ? 1 : 0
     );

From 9f991044ec50a6d83e3c5eee58771a3f62f57607 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 10 Mar 2023 11:40:14 +0530
Subject: [PATCH 16/18] test: corrections to expand record header menu

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../smartsheet/expanded-form/Header.vue       | 58 ++++---------------
 .../composables/useExpandedFormStore.ts       |  2 +-
 2 files changed, 12 insertions(+), 48 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 4694d01229..b78e093089 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -101,20 +101,9 @@ const onConfirmDeleteRowClick = async () => {
     </h5>
 
     <div class="flex-1" />
-
-    <!--    <a-tooltip placement="bottom">
-      <template #title>
-        <div class="text-center w-full">{{ $t('general.reload') }}</div>
-      </template>
-      <mdi-reload
-        v-if="!isNew"
-        class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4"
-        @click="loadRow"
-      />
-    </a-tooltip> -->
-    <!--    <a-tooltip placement="bottom">
+    <a-tooltip placement="bottom">
       <template #title>
-        &lt;!&ndash; todo: i18n &ndash;&gt;
+        <!-- todo: i18n -->
         <div class="text-center w-full">Copy record URL</div>
       </template>
       <mdi-link
@@ -122,7 +111,7 @@ const onConfirmDeleteRowClick = async () => {
         class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
         @click="copyRecordUrl"
       />
-    </a-tooltip> -->
+    </a-tooltip>
 
     <a-tooltip v-if="!isSqlView" placement="bottom">
       <!--      Toggle comments draw -->
@@ -137,18 +126,6 @@ const onConfirmDeleteRowClick = async () => {
       />
     </a-tooltip>
 
-    <a-tooltip v-if="!isSqlView" placement="bottom">
-      <template #title>
-        <div class="text-center w-full">{{ $t('activity.duplicateRow') }}</div>
-      </template>
-      <MdiContentCopy
-        v-if="isUIAllowed('xcDatatableEditable') && !isNew"
-        v-e="['c:row-expand:duplicate']"
-        class="nc-icon-transition cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4"
-        @click="!isNew && emit('duplicateRow')"
-      />
-    </a-tooltip>
-
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #icon><MdiMenuDown /></template>
 
@@ -188,15 +165,6 @@ const onConfirmDeleteRowClick = async () => {
               {{ $t('general.reload') }}
             </div>
           </a-menu-item>
-          <a-menu-item v-if="!isNew" @click="loadRow">
-            <div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center">
-              <mdi-link
-                class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
-                @click="copyRecordUrl"
-              />
-              Copy record URL
-            </div>
-          </a-menu-item>
           <a-menu-item v-if="isUIAllowed('xcDatatableEditable') && !isNew" @click="!isNew && emit('duplicateRow')">
             <div v-e="['c:row-expand:duplicate']" class="py-2 flex gap-2 a">
               <MdiContentCopy class="nc-icon-transition cursor-pointer select-none nc-duplicate-row text-gray-500 mx-1 min-w-4" />
@@ -209,21 +177,17 @@ const onConfirmDeleteRowClick = async () => {
               {{ $t('activity.deleteRow') }}
             </div>
           </a-menu-item>
+          <a-menu-item @click="emit('cancel')">
+            <div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center">
+              <MdiCloseCircleOutline
+                class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
+              />
+              {{ $t('general.close') }}
+            </div>
+          </a-menu-item>
         </a-menu>
       </template>
     </a-dropdown>
-
-    <a-tooltip placement="bottom">
-      <!-- Close -->
-      <template #title>
-        <div class="text-center w-full">{{ $t('general.close') }}</div>
-      </template>
-      <MdiCloseCircleOutline
-        class="nc-icon-transition cursor-pointer select-none nc-close-form text-gray-500 mx-1 min-w-4"
-        @click="emit('cancel')"
-      />
-    </a-tooltip>
-
     <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
       <p>Are you sure you want to delete this row?</p>
     </a-modal>
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 398e4261e2..a37ba6726e 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -38,7 +38,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const commentsDrawer = ref(true)
 
-  const saveRowAndStay = ref(1)
+  const saveRowAndStay = ref(0)
 
   const changedColumns = ref(new Set<string>())
 

From 7f912e84618ad13b82eeac612f7caa3867998794 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 10 Mar 2023 12:43:49 +0530
Subject: [PATCH 17/18] test: expand record close button update

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../playwright/pages/Dashboard/ExpandedForm/index.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index a53971469c..64ad6c3a8b 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -142,7 +142,17 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async close() {
-    await this.get().locator('.nc-close-form').last().click();
+    await this.get().locator('.nc-icon-transition.ant-dropdown-trigger').last().click();
+
+    // TODO: fix this; remove the delay
+    // await this.rootPage.locator('.ant-dropdown').waitFor({ state: 'visible' });
+    // await this.rootPage.locator('.ant-dropdown').locator('.ant-dropdown-menu-item:has-text("Close")').click();
+
+    // add delay; wait for the menu to appear
+    await this.rootPage.waitForTimeout(500);
+
+    const popUpMenu = await this.rootPage.locator('.ant-dropdown');
+    await popUpMenu.locator('.ant-dropdown-menu-item:has-text("Close")').click();
   }
 
   async openChildCard(param: { column: string; title: string }) {

From bc4f1cfa4fde0a129d6fd0342a20081b3eb8f1aa Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 10 Mar 2023 14:23:42 +0530
Subject: [PATCH 18/18] test: pw expand record menu corrections

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../pages/Dashboard/ExpandedForm/index.ts     | 27 +++++++++----------
 .../playwright/pages/Dashboard/Grid/index.ts  |  3 +++
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index 64ad6c3a8b..ce6b0f8660 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -24,16 +24,25 @@ export class ExpandedFormPage extends BasePage {
     return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
   }
 
-  async clickDuplicateRow() {
-    await this.duplicateRowButton.click();
+  async click3DotsMenu(menuItem: string) {
+    await this.get().locator('.nc-icon-transition.ant-dropdown-trigger').last().click();
+
+    // add delay; wait for the menu to appear
+    await this.rootPage.waitForTimeout(500);
+
+    const popUpMenu = await this.rootPage.locator('.ant-dropdown');
+    await popUpMenu.locator(`.ant-dropdown-menu-item:has-text("${menuItem}")`).click();
+  }
 
+  async clickDuplicateRow() {
+    await this.click3DotsMenu('Duplicate Row');
     // wait for loader to disappear
     // await this.dashboard.waitForLoaderToDisappear();
     await this.rootPage.waitForTimeout(2000);
   }
 
   async clickDeleteRow() {
-    await this.deleteRowButton.click();
+    await this.click3DotsMenu('Delete Row');
     await this.rootPage.locator('.ant-btn-primary:has-text("OK")').click();
   }
 
@@ -142,17 +151,7 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async close() {
-    await this.get().locator('.nc-icon-transition.ant-dropdown-trigger').last().click();
-
-    // TODO: fix this; remove the delay
-    // await this.rootPage.locator('.ant-dropdown').waitFor({ state: 'visible' });
-    // await this.rootPage.locator('.ant-dropdown').locator('.ant-dropdown-menu-item:has-text("Close")').click();
-
-    // add delay; wait for the menu to appear
-    await this.rootPage.waitForTimeout(500);
-
-    const popUpMenu = await this.rootPage.locator('.ant-dropdown');
-    await popUpMenu.locator('.ant-dropdown-menu-item:has-text("Close")').click();
+    await this.click3DotsMenu('Close');
   }
 
   async openChildCard(param: { column: string; title: string }) {
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts
index 28b497fd94..ed3d420993 100644
--- a/tests/playwright/pages/Dashboard/Grid/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/index.ts
@@ -283,6 +283,9 @@ export class GridPage extends BasePage {
     });
     await expect(await cell.locator('input')).toBeVisible();
 
+    // press escape to exit edit mode
+    await cell.press('Escape');
+
     // right click menu
     await this.get().locator(`td[data-testid="cell-${columnHeader}-0"]`).click({
       button: 'right',