Show item details in delete confirmation modals

follow-up to #5497
This commit is contained in:
DOLBAEB 2026-05-19 20:45:37 +02:00
parent 11955e5dff
commit 96a6bf2c4b
6 changed files with 87 additions and 24 deletions

View file

@ -88,14 +88,22 @@ export default function TableWrapper() {
isFetching={isFetching}
isFiltered={!!filtered}
onEdit={(id: number) => showAccessListModal(id)}
onDelete={(id: number) =>
onDelete={(id: number) => {
const accessList = data?.find((a) => a.id === id);
showDeleteConfirmModal({
title: <T id="object.delete" tData={{ object: "access-list" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["access-lists"], ["access-list", id]],
children: <T id="object.delete.content" tData={{ object: "access-list" }} />,
})
}
children: (
<>
<T id="object.delete.content" tData={{ object: "access-list" }} />
{accessList?.name ? (
<div className="mt-2 fw-bold text-break">{accessList.name}</div>
) : null}
</>
),
});
}}
onNew={() => showAccessListModal("new")}
/>
</div>

View file

@ -146,14 +146,27 @@ export default function TableWrapper() {
isFetching={isFetching}
onRenew={showRenewCertificateModal}
onDownload={handleDownload}
onDelete={(id: number) =>
onDelete={(id: number) => {
const cert = data?.find((c) => c.id === id);
showDeleteConfirmModal({
title: <T id="object.delete" tData={{ object: "certificate" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["certificates"], ["certificate", id]],
children: <T id="object.delete.content" tData={{ object: "certificate" }} />,
})
}
children: (
<>
<T id="object.delete.content" tData={{ object: "certificate" }} />
{cert?.niceName ? (
<div className="mt-2 fw-bold text-break">{cert.niceName}</div>
) : null}
{cert?.domainNames?.length ? (
<div className="mt-1 text-muted small text-break">
{cert.domainNames.join(", ")}
</div>
) : null}
</>
),
});
}}
/>
</div>
</div>

View file

@ -93,14 +93,22 @@ export default function TableWrapper() {
isFiltered={!!search}
isFetching={isFetching}
onEdit={(id: number) => showDeadHostModal(id)}
onDelete={(id: number) =>
onDelete={(id: number) => {
const host = data?.find((h) => h.id === id);
showDeleteConfirmModal({
title: <T id="object.delete" tData={{ object: "dead-host" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["dead-hosts"], ["dead-host", id]],
children: <T id="object.delete.content" tData={{ object: "dead-host" }} />,
})
}
children: (
<>
<T id="object.delete.content" tData={{ object: "dead-host" }} />
{host?.domainNames?.length ? (
<div className="mt-2 fw-bold text-break">{host.domainNames.join(", ")}</div>
) : null}
</>
),
});
}}
onDisableToggle={handleDisableToggle}
onNew={() => showDeadHostModal("new")}
/>

View file

@ -99,14 +99,27 @@ export default function TableWrapper() {
isFiltered={!!search}
isFetching={isFetching}
onEdit={(id: number) => showRedirectionHostModal(id)}
onDelete={(id: number) =>
onDelete={(id: number) => {
const host = data?.find((h) => h.id === id);
showDeleteConfirmModal({
title: <T id="object.delete" tData={{ object: "redirection-host" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["redirection-hosts"], ["redirection-host", id]],
children: <T id="object.delete.content" tData={{ object: "redirection-host" }} />,
})
}
children: (
<>
<T id="object.delete.content" tData={{ object: "redirection-host" }} />
{host?.domainNames?.length ? (
<div className="mt-2 fw-bold text-break">{host.domainNames.join(", ")}</div>
) : null}
{host?.forwardDomainName ? (
<div className="mt-1 text-muted small">
({host.forwardScheme}://{host.forwardDomainName})
</div>
) : null}
</>
),
});
}}
onDisableToggle={handleDisableToggle}
onNew={() => showRedirectionHostModal("new")}
/>

View file

@ -97,14 +97,24 @@ export default function TableWrapper() {
isFetching={isFetching}
isFiltered={!!filtered}
onEdit={(id: number) => showStreamModal(id)}
onDelete={(id: number) =>
onDelete={(id: number) => {
const stream = data?.find((s) => s.id === id);
showDeleteConfirmModal({
title: <T id="object.delete" tData={{ object: "stream" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["streams"], ["stream", id]],
children: <T id="object.delete.content" tData={{ object: "stream" }} />,
})
}
children: (
<>
<T id="object.delete.content" tData={{ object: "stream" }} />
{stream ? (
<div className="mt-2 fw-bold text-break">
:{stream.incomingPort} &rarr; {stream.forwardingHost}:{stream.forwardingPort}
</div>
) : null}
</>
),
});
}}
onDisableToggle={handleDisableToggle}
onNew={() => showStreamModal("new")}
/>

View file

@ -105,14 +105,25 @@ export default function TableWrapper() {
onEditUser={(id: number) => showUserModal(id)}
onEditPermissions={(id: number) => showPermissionsModal(id)}
onSetPassword={(id: number) => showSetPasswordModal(id)}
onDeleteUser={(id: number) =>
onDeleteUser={(id: number) => {
const user = data?.find((u) => u.id === id);
showDeleteConfirmModal({
title: <T id="object.delete" tData={{ object: "user" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["users"], ["user", id]],
children: <T id="object.delete.content" tData={{ object: "user" }} />,
})
}
children: (
<>
<T id="object.delete.content" tData={{ object: "user" }} />
{user?.name ? (
<div className="mt-2 fw-bold text-break">{user.name}</div>
) : null}
{user?.email ? (
<div className="mt-1 text-muted small text-break">{user.email}</div>
) : null}
</>
),
});
}}
onDisableToggle={handleDisableToggle}
onNewUser={() => showUserModal("new")}
onLoginAs={handleLoginAs}