Add resource for tree-menu-item

CHANGELOG.md

@@ -86,6 +86,8 @@
 
 - Add styles for primary dropdown-toggle (INDIGO Sprint 230623, [!428](https://github.com/TeskaLabs/asab-webui/pull/428))
 
+- Add a condition that will allow users with the right resource to see hidden tree-menu-items (INDIGO Sprint 230623, [!437](https://github.com/TeskaLabs/asab-webui/pull/437))
+
 ### Bugfix
 
 - Bug fix for HelpComponent, not display a Helpcomoponent when the user changing the page (INDIGO Sprint 230317, [!401](https://github.com/TeskaLabs/asab-webui/pull/401))

doc/tree-menu.md

@@ -0,0 +1,45 @@
+# ASAB WebUI TreeMenu component
+
+This component is based on the library [react-simple-tree-menu](https://github.com/iannbing/react-simple-tree-menu).
+
+Displays menu items in a clear structure.
+
+## Example code
+
+```javascript
+import { TreeMenu } from 'asab-webui';
+...
+
+<TreeMenu
+	resource={resource}
+	data={treeData}
+	hasSearch={true}
+	hasNodes={true} // default: false
+	searchOptions={{
+		placeholder: t("Search"),
+		dropdown: {
+			title: t("Actions"),
+			children: ChildrenCustomDropdownComponent
+		}
+	}}
+/>
+
+```
+
+
+## Props:
+
+#### Required:
+
+	- `data`: object or array, data in a special structure. The detailed data structure is described in the library documentation react-simple-tree-menu.
+
+	- `hasSearch`: boolean, changes the styles for the search input and affects the display of placeholder
+
+	- `hasNodes`: boolean, if a `TreeNode` is the last node of its branch	
+
+	- `resource`: string, resource granting display disabled tree-menu-item elements
+
+
+#### Optional:
+	- `searchOptions`: object, conducts placeholder and the dropdown component
+

src/components/TreeMenu/TreeMenuItem.js

@@ -7,9 +7,10 @@ const TreeMenuItem = ({
 	level = 0, hasNodes, isOpen,
 	label, searchTerm, openNodes,
 	toggleNode, matchSearch, focused,
-	type, isDisabled, ...props
+	type, isDisabled, resource, ...props
 }) => {
 	const sessionExpired = useSelector(state => state.auth?.sessionExpired);
+	const resources = useSelector(state => state.auth?.resources);
 	const paddingLeft = 1.25 * level + 0.5;
 	const selected = focused ? " selected" : "";
 	const disabled = (isDisabled || sessionExpired) ? " disabled" : "";
@@ -24,28 +25,32 @@ const TreeMenuItem = ({
 		props.onClick && props.onClick();
 	}
 
+
 	return (
-		<li
-			{...props}
-			active="false"
-			className={`tree-menu-item${selected}${disabled}`}
-			style={{ paddingLeft: `${paddingLeft}rem` }}
-			onClick={e => {handleClick(e)}}
-		>
-			{(type == "folder") && (
-				<div
-					style={{ display: 'inline-block' }}
-					// Clickable toggle icon, not restricted as handleClick method
-					onClick={e => {
-						e.stopPropagation();
-						hasNodes && toggleNode && toggleNode();
-					}}
-				>
-					<ToggleIcon on={isOpen} selected={selected} />
-				</div>
-			)}
-			{label}
-		</li>
+		isDisabled && (resources.indexOf(resource) == -1) && (resources.indexOf("authz:superuser") == -1) ?
+			null
+		:
+			<li
+				{...props}
+				active="false"
+				className={`tree-menu-item${selected}${disabled}`}
+				style={{ paddingLeft: `${paddingLeft}rem` }}
+				onClick={e => {handleClick(e)}}
+			>
+				{(type == "folder") && (
+					<div
+						style={{ display: 'inline-block' }}
+						// Clickable toggle icon, not restricted as handleClick method
+						onClick={e => {
+							e.stopPropagation();
+							hasNodes && toggleNode && toggleNode();
+						}}
+					>
+						<ToggleIcon on={isOpen} selected={selected} />
+					</div>
+				)}
+				{label}
+			</li>
 	)
 };
 

src/components/TreeMenu/index.js

@@ -9,7 +9,7 @@ import SimpleTreeMenu from 'react-simple-tree-menu';
 import TreeMenuItem from "./TreeMenuItem";
 
 const TreeMenu = ({
-	data, searchOptions, ...props
+	data, searchOptions, hasSearch, ...props
 }) => {
 	const [isDropdownMenuOpen, setDropdownMenu] = useState(false);
 
@@ -22,20 +22,20 @@ const TreeMenu = ({
 				{({ search, items }) => (
 					<>
 						<InputGroup>
-							<InputGroupText className={props.hasSearch ? "p-0 border-0" : "p-0 border-0 w-100"}>
+							<InputGroupText className={hasSearch ? "p-0 border-0" : "p-0 border-0 w-100"}>
 								{searchOptions?.dropdown && (
 									<ButtonDropdown
-										className={props.hasSearch ? "" : "w-100"}
+										className={hasSearch ? "" : "w-100"}
 										size="sm"
 										isOpen={isDropdownMenuOpen}
 										toggle={() => setDropdownMenu(prev => !prev)}
 									>
-										<DropdownToggle className={props.hasSearch ? "" : "w-100"} caret>{searchOptions.dropdown.title}</DropdownToggle>
+										<DropdownToggle className={hasSearch ? "" : "w-100"} caret>{searchOptions.dropdown.title}</DropdownToggle>
 										{searchOptions.dropdown.children}
 									</ButtonDropdown>
 								)}
 							</InputGroupText>
-							{props.hasSearch &&
+							{hasSearch &&
 							<Input
 								onChange={e => search(e.target.value)}
 								placeholder={searchOptions?.placeholder}

src/modules/maintenance/ConfigModule/ConfigContainers/TreeViewComponent.js

@@ -5,12 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { TreeMenu } from 'asab-webui';
 import { types } from './actions/actions';
-import {
-	Input,
-	InputGroup, InputGroupText,
-	ButtonDropdown, DropdownToggle,
-	DropdownMenu, DropdownItem
-} from "reactstrap";
+import { DropdownMenu, DropdownItem } from "reactstrap";
 
 
 export function TreeViewComponent(props) {