github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #7527 from nocodb/nc-fix/webhook-trigger-bulk-delete 

Nc fix: bulk delete webhook trigger issue on deleting single selected row
pull/7546/head
Raju Udava 7 months ago committed by GitHub
parent
39ebb6226d ebf14a2cfc
commit
54468cf760
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 131 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      packages/nc-gui/components/smartsheet/grid/Table.vue
  2. 5
      packages/nc-gui/composables/useData.ts
  3. 76
      tests/playwright/tests/db/features/webhook.spec.ts

70
packages/nc-gui/components/smartsheet/grid/Table.vue
Unescape View File

@ -1320,7 +1320,10 @@ onKeyStroke('ArrowDown', onDown)
:title="true"
:paragraph="false"
class="ml-2 -mt-2"
:class="{ 'max-w-32': colIndex !== 0, 'max-w-5 !ml-3.5': colIndex === 0 }"
:class="{
'max-w-32': colIndex !== 0,
'max-w-5 !ml-3.5': colIndex === 0,
}"
/>
</td>
</tr>
@ -1330,7 +1333,10 @@ onKeyStroke('ArrowDown', onDown)
<template v-if="!readOnly">
<div class="nc-no-label text-gray-500" :class="{ hidden: vSelectedAllRecords }">#</div>
<div
:class="{ hidden: !vSelectedAllRecords, flex: vSelectedAllRecords }"
:class="{
hidden: !vSelectedAllRecords,
flex: vSelectedAllRecords,
}"
class="nc-check-all w-full items-center"
>
<a-checkbox v-model:checked="vSelectedAllRecords" />
@ -1405,7 +1411,9 @@ onKeyStroke('ArrowDown', onDown)
<template #title>
<div class="flex flex-row items-center py-3">
<MdiTableColumnPlusAfter class="flex h-[1rem] text-gray-500" />
<div class="text-xs pl-2">{{ $t('activity.predictColumns') }}</div>
<div class="text-xs pl-2">
{{ $t('activity.predictColumns') }}
</div>
<MdiChevronRight class="text-gray-500 ml-2" />
</div>
</template>
@ -1434,14 +1442,18 @@ onKeyStroke('ArrowDown', onDown)
<div class="flex flex-row items-center py-3" @click="predictNextColumn">
<MdiReload v-if="predictingNextColumn" class="animate-infinite animate-spin" />
<MdiTableColumnPlusAfter v-else class="flex h-[1rem] text-gray-500" />
<div class="text-xs pl-2">{{ $t('activity.predictColumns') }}</div>
<div class="text-xs pl-2">
{{ $t('activity.predictColumns') }}
</div>
</div>
</NcMenuItem>
<a-sub-menu v-if="predictedNextFormulas" key="predict-formula">
<template #title>
<div class="flex flex-row items-center py-3">
<MdiCalculatorVariant class="flex h-[1rem] text-gray-500" />
<div class="text-xs pl-2">{{ $t('activity.predictFormulas') }}</div>
<div class="text-xs pl-2">
{{ $t('activity.predictFormulas') }}
</div>
<MdiChevronRight class="text-gray-500 ml-2" />
</div>
</template>
@ -1451,7 +1463,11 @@ onKeyStroke('ArrowDown', onDown)
<NcMenuItem>
<div
class="flex flex-row items-center py-3"
@click="loadColumn(col.title, 'Formula', { formula_raw: col.formula })"
@click="
loadColumn(col.title, 'Formula', {
formula_raw: col.formula,
})
"
>
<div class="text-xs pl-2">{{ col.title }}</div>
</div>
@ -1464,7 +1480,9 @@ onKeyStroke('ArrowDown', onDown)
<div class="flex flex-row items-center py-3" @click="predictNextFormulas">
<MdiReload v-if="predictingNextFormulas" class="animate-infinite animate-spin" />
<MdiCalculatorVariant v-else class="flex h-[1rem] text-gray-500" />
<div class="text-xs pl-2">{{ $t('activity.predictFormulas') }}</div>
<div class="text-xs pl-2">
{{ $t('activity.predictFormulas') }}
</div>
</div>
</NcMenuItem>
</NcMenu>
@ -1521,7 +1539,10 @@ onKeyStroke('ArrowDown', onDown)
</div>
<div
v-if="!readOnly"
:class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
:class="{
hidden: !row.rowMeta.selected,
flex: row.rowMeta.selected,
}"
class="nc-row-expand-and-checkbox"
>
<a-checkbox v-model:checked="row.rowMeta.selected" />
@ -1544,7 +1565,9 @@ onKeyStroke('ArrowDown', onDown)
v-if="row.rowMeta?.commentCount && expandForm"
v-e="['c:expanded-form:open']"
class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
:style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
:style="{
backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length],
}"
@click="expandAndLooseFocus(row, state)"
>
{{ row.rowMeta.commentCount }}
@ -1674,7 +1697,11 @@ onKeyStroke('ArrowDown', onDown)
? 'z-3'
: 'z-4'
"
:style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }"
:style="{
top: `${fillHandleTop}px`,
left: `${fillHandleLeft}px`,
cursor: 'crosshair',
}"
/>
</div>
@ -1696,7 +1723,16 @@ onKeyStroke('ArrowDown', onDown)
data-testid="nc-delete-row"
@click="deleteSelectedRows"
>
<div v-e="['a:row:delete-bulk']" class="flex gap-2 items-center">
<div
v-if="data.filter((r) => r.rowMeta.selected).length === 1"
v-e="['a:row:delete']"
class="flex gap-2 items-center"
>
<component :is="iconMap.delete" />
<!-- Delete Selected Rows -->
{{ $t('activity.deleteSelectedRow') }}
</div>
<div v-else v-e="['a:row:delete-bulk']" class="flex gap-2 items-center">
<component :is="iconMap.delete" />
<!-- Delete Selected Rows -->
{{ $t('activity.deleteSelectedRow') }}
@ -1847,7 +1883,9 @@ onKeyStroke('ArrowDown', onDown)
>
<div data-testid="nc-pagination-add-record" class="flex items-center px-2 text-gray-600 hover:text-black">
<span>
<template v-if="isAddNewRecordGridMode"> {{ $t('activity.newRecord') }} </template>
<template v-if="isAddNewRecordGridMode">
{{ $t('activity.newRecord') }}
</template>
<template v-else> {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }} </template>
</span>
</div>
@ -1875,7 +1913,9 @@ onKeyStroke('ArrowDown', onDown)
<GeneralIcon v-if="isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
</div>
<div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div>
<div class="flex flex-row text-xs text-gray-400 ml-7.25">
{{ $t('labels.addRowGrid') }}
</div>
</div>
<div
v-e="['c:row:add:form']"
@ -1890,7 +1930,9 @@ onKeyStroke('ArrowDown', onDown)
<GeneralIcon v-if="!isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
</div>
<div class="flex flex-row text-xs text-gray-400 ml-7.05">{{ $t('labels.addRowForm') }}</div>
<div class="flex flex-row text-xs text-gray-400 ml-7.05">
{{ $t('labels.addRowForm') }}
</div>
</div>
</div>
</div>

5
packages/nc-gui/composables/useData.ts
Unescape View File

@ -860,13 +860,12 @@ export function useData(args: {
) {
isPaginationLoading.value = true
try {
const bulkDeletedRowsData = await $api.dbDataTableRow.delete(metaValue?.id as string, rows, {
const bulkDeletedRowsData = await $api.dbDataTableRow.delete(metaValue?.id as string, rows.length === 1 ? rows[0] : rows, {
viewId: viewMetaValue?.id as string,
})
await callbacks?.syncCount?.()
return bulkDeletedRowsData
return rows.length === 1 && bulkDeletedRowsData ? [bulkDeletedRowsData] : bulkDeletedRowsData
} catch (error: any) {
message.error(await extractSdkResponseErrorMsg(error))
} finally {

76
tests/playwright/tests/db/features/webhook.spec.ts
Unescape View File

@ -759,9 +759,79 @@ test.describe.serial('Webhook', () => {
}
}
console.log('rsp', rsp[0]);
console.log('expectedData', expectedData);
expect(isSubset(rsp[0], expectedData)).toBe(true);
});
test('Delete operations', async ({ request }) => {
async function verifyDeleteOperation(rsp, type, deleteCount) {
// kludge- add delay to allow server to process webhook
await new Promise(resolve => setTimeout(resolve, 1000));
expect(rsp[rsp.length - 1].type).toBe(type);
expect(rsp[rsp.length - 1].data.table_name).toBe('Test');
if (deleteCount !== null) {
expect(rsp[rsp.length - 1].data.rows.length).toBe(deleteCount);
}
}
test.slow();
await clearServerData({ request });
// close 'Team & Auth' tab
await dashboard.closeTab({ title: 'Team & Auth' });
await dashboard.treeView.createTable({ title: 'Test', baseTitle: context.base.title });
// after insert hook
await webhook.create({
title: 'hook-1',
event: 'After Delete',
});
// after insert hook
await webhook.create({
title: 'hook-2',
event: 'After Bulk Delete',
});
const titles = ['Poole', 'Delaware', 'Pabalo', 'John', 'Vicky', 'Tom'];
for (let i = 0; i < titles.length; i++) {
await dashboard.grid.addNewRow({
index: i,
columnHeader: 'Title',
value: titles[i],
});
}
// Select one record and delete
await dashboard.grid.selectRow(0);
await dashboard.grid.deleteSelectedRows();
let rsp = await getWebhookResponses({ request, count: 1 });
await verifyDeleteOperation(rsp, 'records.after.delete', null);
// Select multiple records and delete
await dashboard.grid.selectRow(0);
await dashboard.grid.selectRow(1);
await dashboard.grid.deleteSelectedRows();
rsp = await getWebhookResponses({ request, count: 2 });
await verifyDeleteOperation(rsp, 'records.after.bulkDelete', 2);
// Right click and delete record
await dashboard.grid.deleteRow(0);
rsp = await getWebhookResponses({ request, count: 3 });
await verifyDeleteOperation(rsp, 'records.after.delete', null);
// Select range and delete records
await dashboard.grid.selectRange({
start: { index: 0, columnHeader: 'Title' },
end: { index: 1, columnHeader: 'Title' },
});
await dashboard.grid.deleteRow(0);
rsp = await getWebhookResponses({ request, count: 4 });
await verifyDeleteOperation(rsp, 'records.after.bulkDelete', 2);
});
});

Write Preview
Loading…
Cancel
Save