[6.x] Centralize confirmed table deletions

resources/js/modules/admin-table/components/DeleteButton.test.ts

@@ -0,0 +1,34 @@
+import {createApp} from 'vue';
+import {afterEach, expect, it, vi} from 'vite-plus/test';
+import DeleteButton from './DeleteButton.vue';
+
+const container = document.createElement('div');
+let app: ReturnType<typeof createApp>;
+
+afterEach(() => {
+  app.unmount();
+  container.replaceChildren();
+  vi.unstubAllGlobals();
+});
+
+it('emits clicks only after confirmation', () => {
+  const confirm = vi.fn((): boolean => false);
+  const onClick = vi.fn();
+  vi.stubGlobal('confirm', confirm);
+  app = createApp(DeleteButton, {
+    confirm: 'Delete this item?',
+    onClick,
+  });
+  app.mount(container);
+
+  const button = container.querySelector('craft-button');
+  if (!button) throw new Error('Expected a delete button.');
+
+  button.click();
+  expect(confirm).toHaveBeenCalledWith('Delete this item?');
+  expect(onClick).not.toHaveBeenCalled();
+
+  confirm.mockReturnValue(true);
+  button.click();
+  expect(onClick).toHaveBeenCalledOnce();
+});

resources/js/modules/admin-table/components/DeleteButton.vue

@@ -4,19 +4,28 @@
   const emit = defineEmits<{
     (e: 'click'): void;
   }>();
-  withDefaults(
+  const props = withDefaults(
     defineProps<{
+      confirm?: string;
       label?: string;
       icon?: string;
     }>(),
     {label: t('Delete item'), icon: 'x'}
   );
+
+  function handleClick(): void {
+    if (props.confirm && !window.confirm(props.confirm)) {
+      return;
+    }
+
+    emit('click');
+  }
 </script>
 
 <template>
   <craft-button
     type="button"
-    @click="emit('click')"
+    @click="handleClick"
     size="small"
     variant="danger-plain"
     v-bind="$attrs"

resources/js/pages/graphql/schemas/Index.vue

@@ -23,18 +23,6 @@
     readOnly: boolean;
   }>();
 
-  function deleteSchema(schema: SchemaData) {
-    if (
-      confirm(
-        t('Are you sure you want to delete the “{name}” schema?', {
-          name: schema.name,
-        })
-      )
-    ) {
-      router.delete(destroy({schemaId: schema.id}));
-    }
-  }
-
   const columnHelper = createCraftColumnHelper<SchemaData>();
   const table = useVueTable({
     get columns() {
@@ -63,7 +51,18 @@
         columnHelper.actions(({row}) => [
           row.original.isPublic
             ? null
-            : h(DeleteButton, {onClick: () => deleteSchema(row.original)}),
+            : h(DeleteButton, {
+                confirm: t(
+                  'Are you sure you want to delete the “{name}” schema?',
+                  {name: row.original.name}
+                ),
+                onClick: () =>
+                  router
+                    .optimistic<{schemas: Array<SchemaData>}>(({schemas}) => ({
+                      schemas: schemas.filter(({id}) => id !== row.original.id),
+                    }))
+                    .delete(destroy({schemaId: row.original.id})),
+              }),
         ]),
       ];
     },

resources/js/pages/graphql/tokens/Index.vue

@@ -37,18 +37,6 @@
     readOnly: boolean;
   }>();
 
-  function deleteToken(token: TokenData) {
-    if (
-      confirm(
-        t('Are you sure you want to delete the “{name}” token?', {
-          name: token.name,
-        })
-      )
-    ) {
-      router.delete(destroy({tokenId: token.id}));
-    }
-  }
-
   const columnHelper = createCraftColumnHelper<TokenData>();
   const table = useVueTable({
     get columns() {
@@ -66,7 +54,20 @@
           header: t('Expires'),
         }),
         columnHelper.actions(({row}) => [
-          h(DeleteButton, {onClick: () => deleteToken(row.original)}),
+          h(DeleteButton, {
+            confirm: t('Are you sure you want to delete the “{name}” token?', {
+              name: row.original.name,
+            }),
+            onClick: () =>
+              router
+                .optimistic<{tokens: {data: Array<TokenData>}}>(({tokens}) => ({
+                  tokens: {
+                    ...tokens,
+                    data: tokens.data.filter(({id}) => id !== row.original.id),
+                  },
+                }))
+                .delete(destroy({tokenId: row.original.id})),
+          }),
         ]),
       ];
     },

resources/js/pages/settings/assets/Index.vue

@@ -49,18 +49,6 @@
     readOnly: boolean;
   }>();
 
-  function deleteVolume(volume: VolumeData) {
-    if (
-      confirm(
-        t('Are you sure you want to delete “{name}?', {
-          name: volume.name,
-        })
-      )
-    ) {
-      router.delete(destroy({volumeId: volume.id}));
-    }
-  }
-
   const volumeIds = ref(props.volumes.map((volume) => volume.id));
   const volumes = computed((): VolumeData[] => {
     return (volumeIds.value ?? [])
@@ -113,7 +101,12 @@
     }),
     columnHelper.handle('handle'),
     columnHelper.actions(({row}) => [
-      h(DeleteButton, {onClick: () => deleteVolume(row.original)}),
+      h(DeleteButton, {
+        confirm: t('Are you sure you want to delete “{name}?', {
+          name: row.original.name,
+        }),
+        onClick: () => router.delete(destroy({volumeId: row.original.id})),
+      }),
     ]),
   ]);
 

resources/js/pages/settings/assets/transforms/Index.vue

@@ -25,24 +25,6 @@
     name: string;
   };
 
-  function deleteTransform(transform: ExistingImageTransform) {
-    if (
-      confirm(
-        t('Are you sure you want to delete the “{name}” transform?', {
-          name: transform.name,
-        })
-      )
-    ) {
-      router
-        .optimistic<{transforms: Array<ExistingImageTransform>}>((props) => ({
-          transforms: props.transforms.filter(({id}) => id !== transform.id),
-        }))
-        .delete(destroy({transformId: transform.id}), {
-          preserveScroll: true,
-        });
-    }
-  }
-
   const props = defineProps<{
     transforms: Array<ExistingImageTransform>;
   }>();
@@ -84,7 +66,21 @@
     }),
     columnHelper.actions(({row}) => [
       h(DeleteButton, {
-        onClick: () => deleteTransform(row.original),
+        confirm: t('Are you sure you want to delete the “{name}” transform?', {
+          name: row.original.name,
+        }),
+        onClick: () =>
+          router
+            .optimistic<{transforms: Array<ExistingImageTransform>}>(
+              (props) => ({
+                transforms: props.transforms.filter(
+                  ({id}) => id !== row.original.id
+                ),
+              })
+            )
+            .delete(destroy({transformId: row.original.id}), {
+              preserveScroll: true,
+            }),
       }),
     ]),
   ]);

resources/js/pages/settings/entry-types/Index.vue

@@ -28,21 +28,6 @@
     readOnly: boolean;
   }>();
 
-  function deleteEntryType(entryType: EntryTypeRow) {
-    if (
-      confirm(
-        t(
-          'Are you sure you want to delete “{name}” and all entries of that type?',
-          {
-            name: entryType.title,
-          }
-        )
-      )
-    ) {
-      router.delete(destroy({entryType: entryType.id}));
-    }
-  }
-
   const searchTerm = ref(props.searchTerm ?? '');
   const entryTypes = computed(() => props.data);
   const columnHelper = createCraftColumnHelper<EntryTypeRow>();
@@ -74,7 +59,11 @@
     }),
     columnHelper.actions(({row}) => [
       h(DeleteButton, {
-        onClick: () => deleteEntryType(row.original),
+        confirm: t(
+          'Are you sure you want to delete “{name}” and all entries of that type?',
+          {name: row.original.title}
+        ),
+        onClick: () => router.delete(destroy({entryType: row.original.id})),
       }),
     ]),
   ]);

resources/js/pages/settings/fields/Index.vue

@@ -44,18 +44,6 @@
     isMultiSite: boolean;
   }>();
 
-  function deleteField(field: FieldRow) {
-    if (
-      confirm(
-        t('Are you sure you want to delete “{name}”?', {
-          name: field.title,
-        })
-      )
-    ) {
-      router.delete(destroy({fieldId: field.id}));
-    }
-  }
-
   const searchTerm = ref(props.searchTerm ?? '');
   const columnHelper = createColumnHelper<FieldRow>();
   const columnVisibility = computed(() => {
@@ -146,7 +134,10 @@
       cell: ({row}) =>
         h('div', {class: 'self-end flex justify-end'}, [
           h(DeleteButton, {
-            onClick: () => deleteField(row.original),
+            confirm: t('Are you sure you want to delete “{name}”?', {
+              name: row.original.title,
+            }),
+            onClick: () => router.delete(destroy({fieldId: row.original.id})),
           }),
         ]),
     }),

resources/js/pages/settings/filesystems/Index.vue

@@ -34,18 +34,6 @@
     readOnly: boolean;
   }>();
 
-  function deleteFs(fs: FileSystemData) {
-    if (
-      confirm(
-        t('Are you sure you want to delete “{name}”', {
-          name: fs.name,
-        })
-      )
-    ) {
-      router.delete(destroy({handle: fs.handle}));
-    }
-  }
-
   const columnHelper = createCraftColumnHelper<FileSystemData>();
 
   const columnVisibility = computed(() => {
@@ -78,7 +66,22 @@
     }),
     columnHelper.actions(({row}) => [
       h(DeleteButton, {
-        onClick: () => deleteFs(row.original),
+        confirm: t('Are you sure you want to delete “{name}”', {
+          name: row.original.name,
+        }),
+        onClick: () =>
+          router
+            .optimistic<{filesystems: {data: Array<FileSystemData>}}>(
+              ({filesystems}) => ({
+                filesystems: {
+                  ...filesystems,
+                  data: filesystems.data.filter(
+                    ({handle}) => handle !== row.original.handle
+                  ),
+                },
+              })
+            )
+            .delete(destroy({handle: row.original.handle})),
       }),
     ]),
   ]);

resources/js/pages/settings/routes/Index.vue

@@ -73,7 +73,11 @@
       return;
     }
 
-    router.delete(destroy({uid: route.uid}));
+    router
+      .optimistic<{routes: Array<RouteIndexData>}>(({routes}) => ({
+        routes: routes.filter(({uid}) => uid !== route.uid),
+      }))
+      .delete(destroy({uid: route.uid}));
   }
 
   useAppLayout({title: props.title});

resources/js/pages/settings/users/groups/Index.vue

@@ -21,16 +21,6 @@
     readOnly: boolean;
   }>();
 
-  function deleteGroup(group: UserGroup) {
-    if (
-      confirm(
-        t('Are you sure you want to delete "{name}"?', {name: group.name})
-      )
-    ) {
-      router.delete(destroy({groupId: group.id}));
-    }
-  }
-
   const columnHelper = createCraftColumnHelper<UserGroup>();
   const table = useVueTable({
     get columns() {
@@ -44,7 +34,17 @@
         }),
         columnHelper.handle('handle'),
         columnHelper.actions(({row}) => [
-          h(DeleteButton, {onClick: () => deleteGroup(row.original)}),
+          h(DeleteButton, {
+            confirm: t('Are you sure you want to delete "{name}"?', {
+              name: row.original.name,
+            }),
+            onClick: () =>
+              router
+                .optimistic<{groups: Array<UserGroup>}>(({groups}) => ({
+                  groups: groups.filter(({id}) => id !== row.original.id),
+                }))
+                .delete(destroy({groupId: row.original.id})),
+          }),
         ]),
       ];
     },