User table polish and audit log updates

frontend/src/pages/Users/Empty.tsx

@@ -5,17 +5,27 @@ import { intl } from "src/locale";
 interface Props {
 	tableInstance: ReactTable<any>;
 	onNewUser?: () => void;
+	isFiltered?: boolean;
 }
-export default function Empty({ tableInstance, onNewUser }: Props) {
+export default function Empty({ tableInstance, onNewUser, isFiltered }: Props) {
+	if (isFiltered) {
+	}
+
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
 				<div className="text-center my-4">
-					<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
-					<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
-					<Button className="btn-lime my-3" onClick={onNewUser}>
-						{intl.formatMessage({ id: "proxy-hosts.add" })}
-					</Button>
+					{isFiltered ? (
+						<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
+					) : (
+						<>
+							<h2>{intl.formatMessage({ id: "users.empty" })}</h2>
+							<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+							<Button className="btn-orange my-3" onClick={onNewUser}>
+								{intl.formatMessage({ id: "users.add" })}
+							</Button>
+						</>
+					)}
 				</div>
 			</td>
 		</tr>

frontend/src/pages/Users/Table.tsx

@@ -1,30 +1,40 @@
-import { IconDotsVertical, IconEdit, IconLock, IconShield, IconTrash } from "@tabler/icons-react";
+import { IconDotsVertical, IconEdit, IconLock, IconPower, IconShield, IconTrash } from "@tabler/icons-react";
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { User } from "src/api/backend";
-import { EmailFormatter, GravatarFormatter, RolesFormatter, ValueWithDateFormatter } from "src/components";
+import {
+	EmailFormatter,
+	EnabledFormatter,
+	GravatarFormatter,
+	RolesFormatter,
+	ValueWithDateFormatter,
+} from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl } from "src/locale";
 import Empty from "./Empty";
 
 interface Props {
 	data: User[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
 	currentUserId?: number;
 	onEditUser?: (id: number) => void;
 	onEditPermissions?: (id: number) => void;
 	onSetPassword?: (id: number) => void;
 	onDeleteUser?: (id: number) => void;
+	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNewUser?: () => void;
 }
 export default function Table({
 	data,
+	isFiltered,
 	isFetching,
 	currentUserId,
 	onEditUser,
 	onEditPermissions,
 	onSetPassword,
 	onDeleteUser,
+	onDisableToggle,
 	onNewUser,
 }: Props) {
 	const columnHelper = createColumnHelper<User>();
@@ -62,7 +72,6 @@ export default function Table({
 					return <EmailFormatter email={info.getValue()} />;
 				},
 			}),
-			// TODO: formatter for roles
 			columnHelper.accessor((row: any) => row.roles, {
 				id: "roles",
 				header: intl.formatMessage({ id: "column.roles" }),
@@ -70,6 +79,13 @@ export default function Table({
 					return <RolesFormatter roles={info.getValue()} />;
 				},
 			}),
+			columnHelper.accessor((row: any) => row.isDisabled, {
+				id: "isDisabled",
+				header: intl.formatMessage({ id: "column.status" }),
+				cell: (info: any) => {
+					return <EnabledFormatter enabled={!info.getValue()} />;
+				},
+			}),
 			columnHelper.display({
 				id: "id", // todo: not needed for a display?
 				cell: (info: any) => {
@@ -127,6 +143,19 @@ export default function Table({
 											<IconLock size={16} />
 											{intl.formatMessage({ id: "user.set-password" })}
 										</a>
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												onDisableToggle?.(info.row.original.id, info.row.original.isDisabled);
+											}}
+										>
+											<IconPower size={16} />
+											{intl.formatMessage({
+												id: info.row.original.isDisabled ? "action.enable" : "action.disable",
+											})}
+										</a>
 										<div className="dropdown-divider" />
 										<a
 											className="dropdown-item"
@@ -150,7 +179,7 @@ export default function Table({
 				},
 			}),
 		],
-		[columnHelper, currentUserId, onEditUser, onDeleteUser, onEditPermissions, onSetPassword],
+		[columnHelper, currentUserId, onEditUser, onDisableToggle, onDeleteUser, onEditPermissions, onSetPassword],
 	);
 
 	const tableInstance = useReactTable<User>({
@@ -167,7 +196,7 @@ export default function Table({
 	return (
 		<TableLayout
 			tableInstance={tableInstance}
-			emptyState={<Empty tableInstance={tableInstance} onNewUser={onNewUser} />}
+			emptyState={<Empty tableInstance={tableInstance} onNewUser={onNewUser} isFiltered={isFiltered} />}
 		/>
 	);
 }

frontend/src/pages/Users/TableWrapper.tsx

@@ -1,7 +1,8 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
-import { deleteUser } from "src/api/backend";
+import { deleteUser, toggleUser } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useUser, useUsers } from "src/hooks";
 import { intl } from "src/locale";
@@ -10,6 +11,8 @@ import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
+	const queryClient = useQueryClient();
+	const [search, setSearch] = useState("");
 	const [editUserId, setEditUserId] = useState(0 as number | "new");
 	const [editUserPermissionsId, setEditUserPermissionsId] = useState(0);
 	const [editUserPasswordId, setEditUserPasswordId] = useState(0);
@@ -30,6 +33,27 @@ export default function TableWrapper() {
 		showSuccess(intl.formatMessage({ id: "notification.user-deleted" }));
 	};
 
+	const handleDisableToggle = async (id: number, enabled: boolean) => {
+		await toggleUser(id, enabled);
+		queryClient.invalidateQueries({ queryKey: ["users"] });
+		queryClient.invalidateQueries({ queryKey: ["user", id] });
+		showSuccess(intl.formatMessage({ id: enabled ? "notification.user-enabled" : "notification.user-disabled" }));
+	};
+
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter((item) => {
+			return (
+				item.name.toLowerCase().includes(search) ||
+				item.nickname.toLowerCase().includes(search) ||
+				item.email.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-orange" />
@@ -41,17 +65,20 @@ export default function TableWrapper() {
 						</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>
+								{data?.length ? (
+									<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>
+								) : null}
 								<Button size="sm" className="btn-orange" onClick={() => setEditUserId("new")}>
 									{intl.formatMessage({ id: "users.add" })}
 								</Button>
@@ -60,13 +87,15 @@ export default function TableWrapper() {
 					</div>
 				</div>
 				<Table
-					data={data ?? []}
+					data={filtered ?? data ?? []}
+					isFiltered={!!search}
 					isFetching={isFetching}
 					currentUserId={currentUser?.id}
 					onEditUser={(id: number) => setEditUserId(id)}
 					onEditPermissions={(id: number) => setEditUserPermissionsId(id)}
 					onSetPassword={(id: number) => setEditUserPasswordId(id)}
 					onDeleteUser={(id: number) => setDeleteUserId(id)}
+					onDisableToggle={handleDisableToggle}
 					onNewUser={() => setEditUserId("new")}
 				/>
 				{editUserId ? <UserModal userId={editUserId} onClose={() => setEditUserId(0)} /> : null}