Permissions polish for restricted users

frontend/src/components/EmptyData.tsx

@@ -1,8 +1,9 @@
 import type { Table as ReactTable } from "@tanstack/react-table";
 import cn from "classnames";
 import type { ReactNode } from "react";
-import { Button } from "src/components";
+import { Button, HasPermission } from "src/components";
 import { T } from "src/locale";
+import { type ADMIN, MANAGE, type Permission, type Section } from "src/modules/Permissions";
 
 interface Props {
 	tableInstance: ReactTable<any>;
@@ -12,8 +13,20 @@ interface Props {
 	objects: string;
 	color?: string;
 	customAddBtn?: ReactNode;
+	permissionSection?: Section | typeof ADMIN;
+	permission?: Permission;
 }
-function EmptyData({ tableInstance, onNew, isFiltered, object, objects, color = "primary", customAddBtn }: Props) {
+function EmptyData({
+	tableInstance,
+	onNew,
+	isFiltered,
+	object,
+	objects,
+	color = "primary",
+	customAddBtn,
+	permissionSection,
+	permission,
+}: Props) {
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
@@ -27,16 +40,18 @@ function EmptyData({ tableInstance, onNew, isFiltered, object, objects, color =
 							<h2>
 								<T id="object.empty" tData={{ objects }} />
 							</h2>
-							<p className="text-muted">
-								<T id="empty-subtitle" />
-							</p>
-							{customAddBtn ? (
-								customAddBtn
-							) : (
-								<Button className={cn("my-3", `btn-${color}`)} onClick={onNew}>
-									<T id="object.add" tData={{ object }} />
-								</Button>
-							)}
+							<HasPermission section={permissionSection} permission={permission || MANAGE} hideError>
+								<p className="text-muted">
+									<T id="empty-subtitle" />
+								</p>
+								{customAddBtn ? (
+									customAddBtn
+								) : (
+									<Button className={cn("my-3", `btn-${color}`)} onClick={onNew}>
+										<T id="object.add" tData={{ object }} />
+									</Button>
+								)}
+							</HasPermission>
 						</>
 					)}
 				</div>