Permissions polish for restricted users

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

@@ -3,10 +3,11 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteStream, toggleStream } from "src/api/backend";
-import { Button, LoadingPage } from "src/components";
+import { Button, HasPermission, LoadingPage } from "src/components";
 import { useStreams } from "src/hooks";
 import { T } from "src/locale";
 import { showDeleteConfirmModal, showHelpModal, showStreamModal } from "src/modals";
+import { MANAGE, STREAMS } from "src/modules/Permissions";
 import { showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
@@ -61,7 +62,6 @@ export default function TableWrapper() {
 								<T id="streams" />
 							</h2>
 						</div>
-
 						<div className="col-md-auto col-sm-12">
 							<div className="ms-auto d-flex flex-wrap btn-list">
 								{data?.length ? (
@@ -81,11 +81,13 @@ export default function TableWrapper() {
 								<Button size="sm" onClick={() => showHelpModal("Streams", "blue")}>
 									<IconHelp size={20} />
 								</Button>
-								{data?.length ? (
-									<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
-										<T id="object.add" tData={{ object: "stream" }} />
-									</Button>
-								) : null}
+								<HasPermission section={STREAMS} permission={MANAGE} hideError>
+									{data?.length ? (
+										<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
+											<T id="object.add" tData={{ object: "stream" }} />
+										</Button>
+									) : null}
+								</HasPermission>
 							</div>
 						</div>
 					</div>