Wrap intl in span identifying translation

frontend/src/pages/Access/Empty.tsx

@@ -1,18 +1,34 @@
 import type { Table as ReactTable } from "@tanstack/react-table";
 import { Button } from "src/components";
-import { intl } from "src/locale";
+import { T } from "src/locale";
 
 interface Props {
 	tableInstance: ReactTable<any>;
+	onNew?: () => void;
+	isFiltered?: boolean;
 }
-export default function Empty({ tableInstance }: Props) {
+export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
 				<div className="text-center my-4">
-					<h2>{intl.formatMessage({ id: "access.empty" })}</h2>
-					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
-					<Button className="btn-cyan my-3">{intl.formatMessage({ id: "access.add" })}</Button>
+					{isFiltered ? (
+						<h2>
+							<T id="empty.search" />
+						</h2>
+					) : (
+						<>
+							<h2>
+								<T id="access.empty" />
+							</h2>
+							<p className="text-muted">
+								<T id="empty-subtitle" />
+							</p>
+							<Button className="btn-cyan my-3" onClick={onNew}>
+								<T id="access.add" />
+							</Button>
+						</>
+					)}
 				</div>
 			</td>
 		</tr>

frontend/src/pages/Access/Table.tsx

@@ -4,23 +4,24 @@ import { useMemo } from "react";
 import type { AccessList } from "src/api/backend";
 import { GravatarFormatter, ValueWithDateFormatter } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
-import { intl } from "src/locale";
+import { intl, T } from "src/locale";
 import Empty from "./Empty";
 
 interface Props {
 	data: AccessList[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
+	onEdit?: (id: number) => void;
+	onDelete?: (id: number) => void;
+	onNew?: () => void;
 }
-export default function Table({ data, isFetching }: Props) {
+export default function Table({ data, isFetching, isFiltered, onEdit, onDelete, onNew }: Props) {
 	const columnHelper = createColumnHelper<AccessList>();
 	const columns = useMemo(
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
-				cell: (info: any) => {
-					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
-				},
+				cell: (info: any) => <GravatarFormatter url={info.getValue().avatar} name={info.getValue().name} />,
 				meta: {
 					className: "w-1",
 				},
@@ -28,42 +29,29 @@ export default function Table({ data, isFetching }: Props) {
 			columnHelper.accessor((row: any) => row, {
 				id: "name",
 				header: intl.formatMessage({ id: "column.name" }),
-				cell: (info: any) => {
-					const value = info.getValue();
-					// Bit of a hack to reuse the DomainsFormatter component
-					return <ValueWithDateFormatter value={value.name} createdOn={value.createdOn} />;
-				},
+				cell: (info: any) => (
+					<ValueWithDateFormatter value={info.getValue().name} createdOn={info.getValue().createdOn} />
+				),
 			}),
 			columnHelper.accessor((row: any) => row.items, {
 				id: "items",
 				header: intl.formatMessage({ id: "column.authorization" }),
-				cell: (info: any) => {
-					const value = info.getValue();
-					return intl.formatMessage({ id: "access.auth-count" }, { count: value.length });
-				},
+				cell: (info: any) => <T id="access.auth-count" data={{ count: info.getValue().length }} />,
 			}),
 			columnHelper.accessor((row: any) => row.clients, {
 				id: "clients",
 				header: intl.formatMessage({ id: "column.access" }),
-				cell: (info: any) => {
-					const value = info.getValue();
-					return intl.formatMessage({ id: "access.access-count" }, { count: value.length });
-				},
+				cell: (info: any) => <T id="access.access-count" data={{ count: info.getValue().length }} />,
 			}),
 			columnHelper.accessor((row: any) => row.satisfyAny, {
 				id: "satisfyAny",
 				header: intl.formatMessage({ id: "column.satisfy" }),
-				cell: (info: any) => {
-					const t = info.getValue() ? "access.satisfy-any" : "access.satisfy-all";
-					return intl.formatMessage({ id: t });
-				},
+				cell: (info: any) => <T id={info.getValue() ? "column.satisfy-any" : "column.satisfy-all"} />,
 			}),
 			columnHelper.accessor((row: any) => row.proxyHostCount, {
 				id: "proxyHostCount",
 				header: intl.formatMessage({ id: "proxy-hosts.title" }),
-				cell: (info: any) => {
-					return intl.formatMessage({ id: "proxy-hosts.count" }, { count: info.getValue() });
-				},
+				cell: (info: any) => <T id="proxy-hosts.count" data={{ count: info.getValue() }} />,
 			}),
 			columnHelper.display({
 				id: "id", // todo: not needed for a display?
@@ -80,21 +68,30 @@ export default function Table({ data, isFetching }: Props) {
 							</button>
 							<div className="dropdown-menu dropdown-menu-end">
 								<span className="dropdown-header">
-									{intl.formatMessage(
-										{
-											id: "access.actions-title",
-										},
-										{ id: info.row.original.id },
-									)}
+									<T id="access.actions-title" data={{ id: info.row.original.id }} />
 								</span>
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onEdit?.(info.row.original.id);
+									}}
+								>
 									<IconEdit size={16} />
-									{intl.formatMessage({ id: "action.edit" })}
+									<T id="action.edit" />
 								</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} />
-									{intl.formatMessage({ id: "action.delete" })}
+									<T id="action.delete" />
 								</a>
 							</div>
 						</span>
@@ -105,7 +102,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 		],
-		[columnHelper],
+		[columnHelper, onEdit, onDelete],
 	);
 
 	const tableInstance = useReactTable<AccessList>({
@@ -119,5 +116,10 @@ export default function Table({ data, isFetching }: Props) {
 		enableSortingRemoval: false,
 	});
 
-	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+	return (
+		<TableLayout
+			tableInstance={tableInstance}
+			emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
+		/>
+	);
 }

frontend/src/pages/Access/TableWrapper.tsx

@@ -1,11 +1,18 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
+import { deleteAccessList } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useAccessLists } from "src/hooks";
-import { intl } from "src/locale";
+import { intl, T } from "src/locale";
+import { AccessListModal, DeleteConfirmModal } from "src/modals";
+import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
+	const [search, setSearch] = useState("");
+	const [editId, setEditId] = useState(0 as number | "new");
+	const [deleteId, setDeleteId] = useState(0);
 	const { isFetching, isLoading, isError, error, data } = useAccessLists(["owner", "items", "clients"]);
 
 	if (isLoading) {
@@ -16,6 +23,27 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
+	const handleDelete = async () => {
+		await deleteAccessList(deleteId);
+		showSuccess(intl.formatMessage({ id: "notification.access-deleted" }));
+	};
+
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter((_item) => {
+			return true;
+			// TODO
+			// return (
+			// 	`${item.incomingPort}`.includes(search) ||
+			// 	`${item.forwardingPort}`.includes(search) ||
+			// 	item.forwardingHost.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-cyan" />
@@ -23,29 +51,52 @@ export default function TableWrapper() {
 				<div className="card-header">
 					<div className="row w-full">
 						<div className="col">
-							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "access.title" })}</h2>
+							<h2 className="mt-1 mb-0">
+								<T id="access.title" />
+							</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"
-									/>
+						{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>
+									<Button size="sm" className="btn-cyan" onClick={() => setEditId("new")}>
+										<T id="access.add" />
+									</Button>
 								</div>
-								<Button size="sm" className="btn-cyan">
-									{intl.formatMessage({ id: "access.add" })}
-								</Button>
 							</div>
-						</div>
+						) : null}
 					</div>
 				</div>
-				<Table data={data ?? []} isFetching={isFetching} />
+				<Table
+					data={filtered ?? data ?? []}
+					isFetching={isFetching}
+					isFiltered={!!filtered}
+					onEdit={(id: number) => setEditId(id)}
+					onDelete={(id: number) => setDeleteId(id)}
+					onNew={() => setEditId("new")}
+				/>
+				{editId ? <AccessListModal id={editId} onClose={() => setEditId(0)} /> : null}
+				{deleteId ? (
+					<DeleteConfirmModal
+						title="access.delete.title"
+						onConfirm={handleDelete}
+						onClose={() => setDeleteId(0)}
+						invalidations={[["access-lists"], ["access-list", deleteId]]}
+					>
+						<T id="access.delete.content" />
+					</DeleteConfirmModal>
+				) : null}
 			</div>
 		</div>
 	);