From 04d9b08f5539b97204680015ef2dae61cbf15c96 Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Fri, 3 Feb 2023 18:15:20 +0100
Subject: [PATCH 1/6] add delete and duplicate row buttons to expanded form and
 grid view

---
 .../nc-gui/components/smartsheet/Gallery.vue  | 191 +++++++++++-------
 .../smartsheet/expanded-form/Header.vue       |  50 ++++-
 .../smartsheet/expanded-form/index.vue        |  29 ++-
 packages/nc-gui/composables/useViewData.ts    |   1 +
 packages/nc-gui/lang/en.json                  |   2 +
 5 files changed, 201 insertions(+), 72 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 0128997248..0af5bdc9d9 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -49,6 +49,7 @@ const {
   galleryData,
   changePage,
   addEmptyRow,
+  deleteRow,
   navigateToSiblingRow,
 } = useViewData(meta, view)
 
@@ -81,6 +82,9 @@ const isRowEmpty = (record: any, col: any) => {
   return Array.isArray(val) && val.length === 0
 }
 
+// const { xWhere, isPkAvail, isSqlView, eventBus } = useSmartsheetStoreOrThrow()
+const { isSqlView } = useSmartsheetStoreOrThrow()
+
 const attachments = (record: any): Attachment[] => {
   try {
     if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
@@ -168,85 +172,134 @@ watch(view, async (nextView) => {
     await loadGalleryData()
   }
 })
+
+const { isUIAllowed } = useUIPermission()
+const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
+// TODO: extract this code (which is duplicated in grid and gallery) into a separate component
+const _contextMenu = ref(false)
+const contextMenu = computed({
+  get: () => _contextMenu.value,
+  set: (val) => {
+    if (hasEditPermission) {
+      _contextMenu.value = val
+    }
+  },
+})
+const contextMenuTarget = ref<{ row: number } | null>(null)
+
+const showContextMenu = (e: MouseEvent, target?: { row: number }) => {
+  if (isSqlView.value) return
+  e.preventDefault()
+  if (target) {
+    contextMenuTarget.value = target
+  }
+}
+
+
 </script>
 
 <template>
   <div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-testid="nc-gallery-wrapper">
-    <div class="nc-gallery-container grid gap-2 my-4 px-3">
-      <div v-for="record in data" :key="`record-${record.row.id}`">
-        <LazySmartsheetRow :row="record">
-          <a-card
-            hoverable
-            class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
-            :data-testid="`nc-gallery-card-${record.row.id}`"
-            @click="expandFormClick($event, record)"
-          >
-            <template v-if="galleryData?.fk_cover_image_col_id" #cover>
-              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
-                <template #customPaging>
-                  <a>
-                    <div class="pt-[12px]">
-                      <div></div>
-                    </div>
-                  </a>
-                </template>
-
-                <template #prevArrow>
-                  <div style="z-index: 1"></div>
-                </template>
-
-                <template #nextArrow>
-                  <div style="z-index: 1"></div>
-                </template>
-
-                <LazyNuxtImg
-                  v-for="(attachment, index) in attachments(record)"
-                  :key="`carousel-${record.row.id}-${index}`"
-                  quality="90"
-                  placeholder
-                  class="h-52 object-contain"
-                  :src="attachment.url"
-                />
-              </a-carousel>
-
-              <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
-            </template>
-
-            <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
-              <div
-                v-if="!isRowEmpty(record, col) || isLTAR(col.uidt)"
-                class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
-              >
-                <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
-                  <div class="w-full text-gray-600">
-                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-
-                    <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
-                  </div>
-                </div>
+    <a-dropdown
+      v-model:visible="contextMenu"
+      :trigger="isSqlView ? [] : ['contextmenu']"
+      overlay-class-name="nc-dropdown-grid-context-menu"
+    >
+      <template #overlay>
+        <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
+          <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)">
+            <div v-e="['a:row:delete']" class="nc-project-menu-item">
+              <!-- Delete Row -->
+              {{ $t('activity.deleteRow') }}
+            </div>
+          </a-menu-item>
 
-                <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
-                  <LazySmartsheetVirtualCell
-                    v-if="isVirtualCol(col)"
-                    v-model="record.row[col.title]"
-                    :column="col"
-                    :row="record"
+          <a-menu-item v-if="contextMenuTarget" @click="openNewRecordFormHook.trigger()">
+            <div v-e="['a:row:insert']" class="nc-project-menu-item">
+              <!-- Insert New Row -->
+              {{ $t('activity.insertRow') }}
+            </div>
+          </a-menu-item>
+        </a-menu>
+      </template>
+      <div class="nc-gallery-container grid gap-2 my-4 px-3">
+        <!-- v-for="(row, rowIndex) of data -->
+        <div v-for="(record, rowIndex) in data" :key="`record-${record.row.id}`">
+          <LazySmartsheetRow :row="record">
+            <a-card
+              hoverable
+              class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
+              :data-testid="`nc-gallery-card-${record.row.id}`"
+              @click="expandFormClick($event, record)"
+              @contextmenu="showContextMenu($event, { row: rowIndex })"
+            >
+              <template v-if="galleryData?.fk_cover_image_col_id" #cover>
+                <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows>
+                  <template #customPaging>
+                    <a>
+                      <div class="pt-[12px]">
+                        <div></div>
+                      </div>
+                    </a>
+                  </template>
+
+                  <template #prevArrow>
+                    <div style="z-index: 1"></div>
+                  </template>
+
+                  <template #nextArrow>
+                    <div style="z-index: 1"></div>
+                  </template>
+
+                  <LazyNuxtImg
+                    v-for="(attachment, index) in attachments(record)"
+                    :key="`carousel-${record.row.id}-${index}`"
+                    quality="90"
+                    placeholder
+                    class="h-52 object-contain"
+                    :src="attachment.url"
                   />
+                </a-carousel>
 
-                  <LazySmartsheetCell
-                    v-else
-                    v-model="record.row[col.title]"
-                    :column="col"
-                    :edit-enabled="false"
-                    :read-only="true"
-                  />
+                <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
+              </template>
+
+              <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
+                <div
+                  v-if="!isRowEmpty(record, col) || isLTAR(col.uidt)"
+                  class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
+                >
+                  <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
+                    <div class="w-full text-gray-600">
+                      <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+
+                      <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+                    </div>
+                  </div>
+
+                  <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+                    <LazySmartsheetVirtualCell
+                      v-if="isVirtualCol(col)"
+                      v-model="record.row[col.title]"
+                      :column="col"
+                      :row="record"
+                    />
+
+                    <LazySmartsheetCell
+                      v-else
+                      v-model="record.row[col.title]"
+                      :column="col"
+                      :edit-enabled="false"
+                      :read-only="true"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </a-card>
-        </LazySmartsheetRow>
+            </a-card>
+          </LazySmartsheetRow>
+        </div>
       </div>
-    </div>
+    </a-dropdown>
 
     <div class="flex-1" />
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 792b31a428..3868bb0a42 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -12,7 +12,7 @@ import {
 
 const props = defineProps<{ view?: ViewType }>()
 
-const emit = defineEmits(['cancel'])
+const emit = defineEmits(['cancel', 'duplicateRow'])
 
 const route = useRoute()
 
@@ -72,6 +72,23 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+
+const showDeleteRowModal = ref(false)
+
+const { deleteRowById } = useViewData(meta, ref(props.view))
+
+const onDeleteRowClick = () => {
+  showDeleteRowModal.value = true
+}
+
+const onConfirmDeleteRowClick = async () => {
+  showDeleteRowModal.value = false
+  await deleteRowById(primaryKey.value)
+  reloadTrigger.trigger()
+  emit('cancel')
+  message.success('Row deleted')
+}
 </script>
 
 <template>
@@ -127,6 +144,37 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       </div>
     </a-button>
 
+    <a-dropdown>
+      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+        <div class="flex gap-1 items-center">
+          <!-- More -->
+          <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
+
+          <MdiMenuDown class="text-grey" />
+        </div>
+      </a-button>
+
+      <template #overlay>
+        <div class="bg-gray-50 py-2 shadow-lg !border">
+          <div>
+            <div v-e="['a:actions:duplicate-row']" class="nc-menu-item" @click="emit('duplicateRow')">
+              <MdiContentCopy class="text-gray-500" />
+              {{ $t('activity.duplicateRow') }}
+            </div>
+
+            <a-modal v-model:visible="showDeleteRowModal" title="Delete row?" @ok="onConfirmDeleteRowClick">
+              <p>Are you sure you want to delete this row?</p>
+            </a-modal>
+
+            <div v-e="['a:actions:delete-row']" class="nc-menu-item" @click="onDeleteRowClick" disabled="true">
+              <MdiDelete class="text-gray-500" />
+              {{ $t('activity.deleteRow') }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </a-dropdown>
+
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
       <template #overlay>
         <a-menu class="nc-expand-form-save-dropdown-menu">
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 9c36d693a8..a92f37366e 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -39,6 +39,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev'])
 
+const { t } = useI18n()
+
 const row = ref(props.row)
 
 const state = toRef(props, 'state')
@@ -60,6 +62,8 @@ provide(MetaInj, meta)
 
 const { commentsDrawer, changedColumns, state: rowState, isNew, loadRow } = useProvideExpandedFormStore(meta, row)
 
+const duplicatingRowInProgress = ref(false)
+
 if (props.loadRow) {
   await loadRow()
 }
@@ -101,6 +105,23 @@ const onClose = () => {
   isExpanded.value = false
 }
 
+const onDuplicateRow = () => {
+  duplicatingRowInProgress.value = true
+  const newRow = Object.assign(
+    {},
+    {
+      row: row.value.row,
+      oldRow: {},
+      rowMeta: { new: true },
+    },
+  )
+  setTimeout(async () => {
+    row.value = newRow
+    duplicatingRowInProgress.value = false
+    message.success(t('msg.success.rowDuplicatedWithoutSavedYet'))
+  }, 500)
+}
+
 const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
 
 // override reload trigger and use it to reload grid and the form itself
@@ -148,7 +169,7 @@ export default {
     class="nc-drawer-expanded-form"
     :class="{ active: isExpanded }"
   >
-    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
+    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicateRow="onDuplicateRow" />
 
     <div class="!bg-gray-100 rounded flex-1 relative">
       <template v-if="props.showNextPrevIcons">
@@ -169,8 +190,10 @@ export default {
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
         <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
           <div class="w-[500px] mx-auto">
+            <a-spin v-if="duplicatingRowInProgress" class="!flex items-center" />
             <div
               v-for="(col, i) of fields"
+              v-if="!duplicatingRowInProgress"
               v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
               :key="col.title"
               class="mt-2 py-2"
@@ -235,11 +258,13 @@ export default {
 
 .nc-prev-arrow,
 .nc-next-arrow {
-  @apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover:(bg-gray-200) active:(scale-125 opacity-100) text-xl;
+  @apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover: (bg-gray-200) active:(scale-125 opacity-100) text-xl;
 }
+
 .nc-prev-arrow {
   @apply left-4 top-4;
 }
+
 .nc-next-arrow {
   @apply right-4 top-4;
 }
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 670eead85b..561be99ac5 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -603,5 +603,6 @@ export function useViewData(
     removeLastEmptyRow,
     removeRowIfNew,
     navigateToSiblingRow,
+    deleteRowById,
   }
 }
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index d459b9bbf3..93b8c01162 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -387,6 +387,7 @@
     "saveAndStay": "Save & Stay",
     "insertRow": "Insert New Row",
     "deleteRow": "Delete Row",
+    "duplicateRow": "Duplicate Row",
     "deleteSelectedRow": "Delete Selected Rows",
     "importExcel": "Import Excel",
     "importCSV": "Import CSV",
@@ -716,6 +717,7 @@
     },
     "success": {
       "columnDuplicated": "Column duplicated successfully",
+      "rowDuplicatedWithoutSavedYet": "Row duplicated (not saved)",
       "updatedUIACL": "Updated UI ACL for tables successfully",
       "pluginUninstalled": "Plugin uninstalled successfully",
       "pluginSettingsSaved": "Plugin settings saved successfully",

From 74b43f02c2cb95bc0f9f5937fc82236546f24f79 Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Mon, 6 Feb 2023 19:21:35 +0100
Subject: [PATCH 2/6] center spinner for 'Duplicate row' in expanded view

---
 .../nc-gui/components/smartsheet/expanded-form/index.vue    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index a92f37366e..d648fc21b5 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -190,10 +190,12 @@ export default {
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
         <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
           <div class="w-[500px] mx-auto">
-            <a-spin v-if="duplicatingRowInProgress" class="!flex items-center" />
+            <div v-if="duplicatingRowInProgress" class="flex items-center justify-center h-[100px]">
+              <a-spin size="large" />
+            </div>
             <div
+              v-else
               v-for="(col, i) of fields"
-              v-if="!duplicatingRowInProgress"
               v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
               :key="col.title"
               class="mt-2 py-2"

From 6575642da4f207936198fc08e0c133ead6b14dfe Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Thu, 9 Feb 2023 12:24:24 +0100
Subject: [PATCH 3/6] fix small css typo

---
 packages/nc-gui/components/smartsheet/expanded-form/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index d648fc21b5..772748342d 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -260,7 +260,7 @@ export default {
 
 .nc-prev-arrow,
 .nc-next-arrow {
-  @apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover: (bg-gray-200) active:(scale-125 opacity-100) text-xl;
+  @apply absolute opacity-70 rounded-full transition-transform transition-background transition-opacity transform bg-white hover:(bg-gray-200) active:(scale-125 opacity-100) text-xl;
 }
 
 .nc-prev-arrow {

From 0038a6ebe1e3d4373ef5e96c8130615c91bedc9f Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Mon, 13 Feb 2023 14:46:41 -0500
Subject: [PATCH 4/6] expanded form view: disable Duplicate and Delete buttons
 for new/unsaved rows

---
 .../smartsheet/expanded-form/Header.vue           | 15 ++++++++++++---
 .../components/smartsheet/expanded-form/index.vue |  7 +++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 3868bb0a42..c22057348a 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -73,7 +73,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   }
 })
 
-
 const showDeleteRowModal = ref(false)
 
 const { deleteRowById } = useViewData(meta, ref(props.view))
@@ -157,7 +156,12 @@ const onConfirmDeleteRowClick = async () => {
       <template #overlay>
         <div class="bg-gray-50 py-2 shadow-lg !border">
           <div>
-            <div v-e="['a:actions:duplicate-row']" class="nc-menu-item" @click="emit('duplicateRow')">
+            <div
+              v-e="['a:actions:duplicate-row']"
+              class="nc-menu-item"
+              :class="{ disabled: isNew }"
+              @click="!isNew && emit('duplicateRow')"
+            >
               <MdiContentCopy class="text-gray-500" />
               {{ $t('activity.duplicateRow') }}
             </div>
@@ -166,7 +170,12 @@ const onConfirmDeleteRowClick = async () => {
               <p>Are you sure you want to delete this row?</p>
             </a-modal>
 
-            <div v-e="['a:actions:delete-row']" class="nc-menu-item" @click="onDeleteRowClick" disabled="true">
+            <div
+              v-e="['a:actions:delete-row']"
+              class="nc-menu-item"
+              :class="{ disabled: isNew }"
+              @click="!isNew && onDeleteRowClick()"
+            >
               <MdiDelete class="text-gray-500" />
               {{ $t('activity.deleteRow') }}
             </div>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 772748342d..56778297b6 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -43,6 +43,8 @@ const { t } = useI18n()
 
 const row = ref(props.row)
 
+const isDuplicatedRow = ref(false)
+
 const state = toRef(props, 'state')
 
 const meta = toRef(props, 'meta')
@@ -107,6 +109,7 @@ const onClose = () => {
 
 const onDuplicateRow = () => {
   duplicatingRowInProgress.value = true
+  isDuplicatedRow.value = true
   const newRow = Object.assign(
     {},
     {
@@ -169,7 +172,7 @@ export default {
     class="nc-drawer-expanded-form"
     :class="{ active: isExpanded }"
   >
-    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicateRow="onDuplicateRow" />
+    <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" />
 
     <div class="!bg-gray-100 rounded flex-1 relative">
       <template v-if="props.showNextPrevIcons">
@@ -194,8 +197,8 @@ export default {
               <a-spin size="large" />
             </div>
             <div
-              v-else
               v-for="(col, i) of fields"
+              v-else
               v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
               :key="col.title"
               class="mt-2 py-2"

From ae62b78e73a654bfbb541c63a792b85956b0e94a Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Mon, 13 Feb 2023 15:40:26 -0500
Subject: [PATCH 5/6] code cleanup

---
 packages/nc-gui/components/smartsheet/Gallery.vue             | 2 --
 packages/nc-gui/components/smartsheet/expanded-form/index.vue | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 0af5bdc9d9..2648d8a3dd 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -82,7 +82,6 @@ const isRowEmpty = (record: any, col: any) => {
   return Array.isArray(val) && val.length === 0
 }
 
-// const { xWhere, isPkAvail, isSqlView, eventBus } = useSmartsheetStoreOrThrow()
 const { isSqlView } = useSmartsheetStoreOrThrow()
 
 const attachments = (record: any): Attachment[] => {
@@ -223,7 +222,6 @@ const showContextMenu = (e: MouseEvent, target?: { row: number }) => {
         </a-menu>
       </template>
       <div class="nc-gallery-container grid gap-2 my-4 px-3">
-        <!-- v-for="(row, rowIndex) of data -->
         <div v-for="(record, rowIndex) in data" :key="`record-${record.row.id}`">
           <LazySmartsheetRow :row="record">
             <a-card
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 56778297b6..1ae57d4858 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -43,8 +43,6 @@ const { t } = useI18n()
 
 const row = ref(props.row)
 
-const isDuplicatedRow = ref(false)
-
 const state = toRef(props, 'state')
 
 const meta = toRef(props, 'meta')
@@ -109,7 +107,6 @@ const onClose = () => {
 
 const onDuplicateRow = () => {
   duplicatingRowInProgress.value = true
-  isDuplicatedRow.value = true
   const newRow = Object.assign(
     {},
     {

From 92b9b1b9b33829836b9aaa18363463c6defc9638 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 14 Feb 2023 18:14:17 +0530
Subject: [PATCH 6/6] test: duplicate & delete from expanded form

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../pages/Dashboard/ExpandedForm/index.ts     | 33 +++++++++++++
 .../playwright/tests/expandedFormUrl.spec.ts  | 48 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index cc6dc16cde..608fd5fb4a 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -7,6 +7,7 @@ export class ExpandedFormPage extends BasePage {
   readonly addNewTableButton: Locator;
   readonly copyUrlButton: Locator;
   readonly toggleCommentsButton: Locator;
+  readonly moreOptionsButton: Locator;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
@@ -14,12 +15,44 @@ export class ExpandedFormPage extends BasePage {
     this.addNewTableButton = this.dashboard.get().locator('.nc-add-new-table');
     this.copyUrlButton = this.dashboard.get().locator('.nc-copy-row-url:visible');
     this.toggleCommentsButton = this.dashboard.get().locator('.nc-toggle-comments:visible');
+    this.moreOptionsButton = this.dashboard.get().locator('.nc-actions-menu-btn:visible').last();
   }
 
   get() {
     return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
   }
 
+  async clickDuplicateRow() {
+    await this.moreOptionsButton.click();
+    // wait for the menu to appear
+    await this.rootPage.waitForTimeout(1000);
+    await this.rootPage.locator('.nc-menu-item:has-text("Duplicate Row")').click();
+
+    // wait for loader to disappear
+    // await this.dashboard.waitForLoaderToDisappear();
+    await this.rootPage.waitForTimeout(2000);
+  }
+
+  async clickDeleteRow() {
+    await this.moreOptionsButton.click();
+    // wait for the menu to appear
+    await this.rootPage.waitForTimeout(1000);
+    await this.rootPage.locator('.nc-menu-item:has-text("Delete Row")').click();
+    await this.rootPage.locator('.ant-btn-primary:has-text("OK")').click();
+  }
+
+  async isDisabledDuplicateRow() {
+    await this.moreOptionsButton.click();
+    const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Duplicate Row")');
+    return await isDisabled.count();
+  }
+
+  async isDisabledDeleteRow() {
+    await this.moreOptionsButton.click();
+    const isDisabled = await this.rootPage.locator('.nc-menu-item.disabled:has-text("Delete Row")');
+    return await isDisabled.count();
+  }
+
   async getShareRowUrl() {
     await this.copyUrlButton.click();
     await this.verifyToast({ message: 'Copied to clipboard' });
diff --git a/tests/playwright/tests/expandedFormUrl.spec.ts b/tests/playwright/tests/expandedFormUrl.spec.ts
index 8195920eca..d0863b85ac 100644
--- a/tests/playwright/tests/expandedFormUrl.spec.ts
+++ b/tests/playwright/tests/expandedFormUrl.spec.ts
@@ -1,8 +1,9 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import { GalleryPage } from '../pages/Dashboard/Gallery';
 import { GridPage } from '../pages/Dashboard/Grid';
 import setup from '../setup';
+import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
 
 test.describe('Expanded form URL', () => {
   let dashboard: DashboardPage;
@@ -132,3 +133,48 @@ test.describe('Expanded form URL', () => {
     await viewTestTestTable('gallery');
   });
 });
+
+test.describe('Expanded record duplicate & delete options', () => {
+  let dashboard: DashboardPage, toolbar: ToolbarPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    toolbar = dashboard.grid.toolbar;
+  });
+
+  test('Grid', async () => {
+    await dashboard.closeTab({ title: 'Team & Auth' });
+    await dashboard.treeView.openTable({ title: 'Actor' });
+
+    // create filter to narrow down the number of records
+    await toolbar.clickFilter();
+    await toolbar.filter.add({
+      columnTitle: 'FirstName',
+      opType: 'is equal',
+      value: 'NICK',
+      isLocallySaved: false,
+    });
+    await toolbar.clickFilter();
+
+    await dashboard.grid.verifyRowCount({ count: 3 });
+
+    // expand row & duplicate
+    await dashboard.grid.openExpandedRow({ index: 0 });
+    await dashboard.expandedForm.clickDuplicateRow();
+    await dashboard.expandedForm.save();
+    await dashboard.grid.verifyRowCount({ count: 4 });
+
+    // expand row & delete
+    await dashboard.grid.openExpandedRow({ index: 3 });
+    await dashboard.expandedForm.clickDeleteRow();
+    await dashboard.grid.verifyRowCount({ count: 3 });
+
+    // expand row, duplicate & verify menu
+    await dashboard.grid.openExpandedRow({ index: 0 });
+    await dashboard.expandedForm.clickDuplicateRow();
+    expect(await dashboard.expandedForm.isDisabledDeleteRow()).toBe(1);
+    expect(await dashboard.expandedForm.isDisabledDuplicateRow()).toBe(1);
+  });
+});