Certificates react work

- renewal and download
- table columns rendering
- searching
- deleting

frontend/src/pages/Certificates/Table.tsx

@@ -1,17 +1,27 @@
-import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
+import { IconDotsVertical, IconDownload, IconRefresh, IconTrash } from "@tabler/icons-react";
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { Certificate } from "src/api/backend";
-import { DomainsFormatter, EmptyData, GravatarFormatter } from "src/components";
+import {
+	CertificateInUseFormatter,
+	DateFormatter,
+	DomainsFormatter,
+	EmptyData,
+	GravatarFormatter,
+} from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { showCustomCertificateModal, showDNSCertificateModal, showHTTPCertificateModal } from "src/modals";
 
 interface Props {
 	data: Certificate[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
+	onDelete?: (id: number) => void;
+	onRenew?: (id: number) => void;
+	onDownload?: (id: number) => void;
 }
-export default function Table({ data, isFetching }: Props) {
+export default function Table({ data, isFetching, onDelete, onRenew, onDownload, isFiltered }: Props) {
 	const columnHelper = createColumnHelper<Certificate>();
 	const columns = useMemo(
 		() => [
@@ -37,25 +47,35 @@ export default function Table({ data, isFetching }: Props) {
 				id: "provider",
 				header: intl.formatMessage({ id: "column.provider" }),
 				cell: (info: any) => {
-					return info.getValue();
+					if (info.getValue() === "letsencrypt") {
+						return <T id="lets-encrypt" />;
+					}
+					return <T id={info.getValue()} />;
 				},
 			}),
-			columnHelper.accessor((row: any) => row.expires_on, {
-				id: "expires_on",
+			columnHelper.accessor((row: any) => row.expiresOn, {
+				id: "expiresOn",
 				header: intl.formatMessage({ id: "column.expires" }),
 				cell: (info: any) => {
-					return info.getValue();
+					return <DateFormatter value={info.getValue()} highlightPast />;
 				},
 			}),
 			columnHelper.accessor((row: any) => row, {
-				id: "id",
+				id: "proxyHosts",
 				header: intl.formatMessage({ id: "column.status" }),
 				cell: (info: any) => {
-					return info.getValue();
+					const r = info.getValue();
+					return (
+						<CertificateInUseFormatter
+							proxyHosts={r.proxyHosts}
+							redirectionHosts={r.redirectionHosts}
+							deadHosts={r.deadHosts}
+						/>
+					);
 				},
 			}),
 			columnHelper.display({
-				id: "id", // todo: not needed for a display?
+				id: "id",
 				cell: (info: any) => {
 					return (
 						<span className="dropdown">
@@ -75,16 +95,37 @@ export default function Table({ data, isFetching }: Props) {
 										data={{ id: info.row.original.id }}
 									/>
 								</span>
-								<a className="dropdown-item" href="#">
-									<IconEdit size={16} />
-									<T id="action.edit" />
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onRenew?.(info.row.original.id);
+									}}
+								>
+									<IconRefresh size={16} />
+									<T id="action.renew" />
 								</a>
-								<a className="dropdown-item" href="#">
-									<IconPower size={16} />
-									<T id="action.disable" />
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDownload?.(info.row.original.id);
+									}}
+								>
+									<IconDownload size={16} />
+									<T id="action.download" />
 								</a>
 								<div className="dropdown-divider" />
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDelete?.(info.row.original.id);
+									}}
+								>
 									<IconTrash size={16} />
 									<T id="action.delete" />
 								</a>
@@ -97,7 +138,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 		],
-		[columnHelper],
+		[columnHelper, onDelete, onRenew, onDownload],
 	);
 
 	const tableInstance = useReactTable<Certificate>({
@@ -160,8 +201,7 @@ export default function Table({ data, isFetching }: Props) {
 					object="certificate"
 					objects="certificates"
 					tableInstance={tableInstance}
-					// onNew={onNew}
-					// isFiltered={isFiltered}
+					isFiltered={isFiltered}
 					color="pink"
 					customAddBtn={customAddBtn}
 				/>

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -1,12 +1,22 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
+import { deleteCertificate, downloadCertificate } from "src/api/backend";
 import { LoadingPage } from "src/components";
 import { useCertificates } from "src/hooks";
 import { T } from "src/locale";
-import { showCustomCertificateModal, showDNSCertificateModal, showHTTPCertificateModal } from "src/modals";
+import {
+	showCustomCertificateModal,
+	showDeleteConfirmModal,
+	showDNSCertificateModal,
+	showHTTPCertificateModal,
+	showRenewCertificateModal,
+} from "src/modals";
+import { showError, showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
+	const [search, setSearch] = useState("");
 	const { isFetching, isLoading, isError, error, data } = useCertificates([
 		"owner",
 		"dead_hosts",
@@ -22,6 +32,31 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
+	const handleDelete = async (id: number) => {
+		await deleteCertificate(id);
+		showObjectSuccess("certificate", "deleted");
+	};
+
+	const handleDownload = async (id: number) => {
+		try {
+			await downloadCertificate(id);
+		} catch (err: any) {
+			showError(err.message);
+		}
+	};
+
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter(
+			(item) =>
+				item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
+				item.niceName.toLowerCase().includes(search),
+		);
+	} else if (search !== "") {
+		// this can happen if someone deletes the last item while searching
+		setSearch("");
+	}
+
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-pink" />
@@ -33,66 +68,83 @@ export default function TableWrapper() {
 								<T id="certificates" />
 							</h2>
 						</div>
-						<div className="col-md-auto col-sm-12">
-							<div className="ms-auto d-flex flex-wrap btn-list">
-								<div className="input-group input-group-flat w-auto">
-									<span className="input-group-text input-group-text-sm">
-										<IconSearch size={16} />
-									</span>
-									<input
-										id="advanced-table-search"
-										type="text"
-										className="form-control form-control-sm"
-										autoComplete="off"
-									/>
-								</div>
-								<div className="dropdown">
-									<button
-										type="button"
-										className="btn btn-sm dropdown-toggle btn-pink mt-1"
-										data-bs-toggle="dropdown"
-									>
-										<T id="object.add" tData={{ object: "certificate" }} />
-									</button>
-									<div className="dropdown-menu">
-										<a
-											className="dropdown-item"
-											href="#"
-											onClick={(e) => {
-												e.preventDefault();
-												showHTTPCertificateModal();
-											}}
+						{data?.length ? (
+							<div className="col-md-auto col-sm-12">
+								<div className="ms-auto d-flex flex-wrap btn-list">
+									<div className="input-group input-group-flat w-auto">
+										<span className="input-group-text input-group-text-sm">
+											<IconSearch size={16} />
+										</span>
+										<input
+											id="advanced-table-search"
+											type="text"
+											className="form-control form-control-sm"
+											autoComplete="off"
+											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
+										/>
+									</div>
+									<div className="dropdown">
+										<button
+											type="button"
+											className="btn btn-sm dropdown-toggle btn-pink mt-1"
+											data-bs-toggle="dropdown"
 										>
-											<T id="lets-encrypt-via-http" />
-										</a>
-										<a
-											className="dropdown-item"
-											href="#"
-											onClick={(e) => {
-												e.preventDefault();
-												showDNSCertificateModal();
-											}}
-										>
-											<T id="lets-encrypt-via-dns" />
-										</a>
-										<div className="dropdown-divider" />
-										<a
-											className="dropdown-item"
-											href="#"
-											onClick={(e) => {
-												e.preventDefault();
-												showCustomCertificateModal();
-											}}
-										>
-											<T id="certificates.custom" />
-										</a>
+											<T id="object.add" tData={{ object: "certificate" }} />
+										</button>
+										<div className="dropdown-menu">
+											<a
+												className="dropdown-item"
+												href="#"
+												onClick={(e) => {
+													e.preventDefault();
+													showHTTPCertificateModal();
+												}}
+											>
+												<T id="lets-encrypt-via-http" />
+											</a>
+											<a
+												className="dropdown-item"
+												href="#"
+												onClick={(e) => {
+													e.preventDefault();
+													showDNSCertificateModal();
+												}}
+											>
+												<T id="lets-encrypt-via-dns" />
+											</a>
+											<div className="dropdown-divider" />
+											<a
+												className="dropdown-item"
+												href="#"
+												onClick={(e) => {
+													e.preventDefault();
+													showCustomCertificateModal();
+												}}
+											>
+												<T id="certificates.custom" />
+											</a>
+										</div>
 									</div>
 								</div>
 							</div>
-						</div>
+						) : null}
 					</div>
 				</div>
-				<Table data={data ?? []} isFetching={isFetching} />
+				<Table
+					data={filtered ?? data ?? []}
+					isFiltered={!!search}
+					isFetching={isFetching}
+					onRenew={showRenewCertificateModal}
+					onDownload={handleDownload}
+					onDelete={(id: number) =>
+						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" }} />,
+						})
+					}
+				/>
 			</div>
 		</div>
 	);

frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

@@ -89,10 +89,10 @@ export default function TableWrapper() {
 					onEdit={(id: number) => showProxyHostModal(id)}
 					onDelete={(id: number) =>
 						showDeleteConfirmModal({
-							title: "proxy-host.delete.title",
+							title: <T id="object.delete" tData={{ object: "proxy-host" }} />,
 							onConfirm: () => handleDelete(id),
 							invalidations: [["proxy-hosts"], ["proxy-host", id]],
-							children: <T id="proxy-host.delete.content" />,
+							children: <T id="object.delete.content" tData={{ object: "proxy-host" }} />,
 						})
 					}
 					onDisableToggle={handleDisableToggle}