Implemented limits of menu nesting. (#23)

Author: deepak-64742

src/x-759224-menu-builder-uic/components/menu-item.js

@@ -12,7 +12,7 @@ import iconlist from "../icons";
 
 const view = (
 	{
-		properties: { id, choice, label, type, page, sysId, href, expandParent, rightIcon },
+		properties: { id, choice, label, type, page, sysId, href, expandParent, rightIcon, level },
 		labelInput,
 		typeInput,
 		pageInput,
@@ -112,7 +112,7 @@ const view = (
 					<now-dropdown
 						// mapping iconlist for required data in now-dropdown
 						// adding no-icon as a no selection
-						items={[{ id: null, label: "no-icon" }, ...iconlist.map(e => ({ id: e, label: e }))]}
+						items={[{ id: null, label: "no-icon", type: 'icon' }, ...iconlist.map(e => ({ id: e, label: e, type: 'icon' }))]}
 						selectedItems={[iconValue]}
 						name="iconInput"
 						select="single"
@@ -135,9 +135,12 @@ const view = (
 						</p>
 					}
 				</div>
-				<div className="rightMenu">
-					<menu-editor parent={id} expandParent={expandParent}></menu-editor>
-				</div>
+				{
+					level < 4 ? <div className="rightMenu">
+						<menu-editor parent={id} expandParent={expandParent}></menu-editor>
+					</div> : <div></div>
+				}
+				
 			</div>
 			<now-collapse expanded={editMode}>
 				<div className="menu-row">
@@ -251,6 +254,9 @@ createCustomElement("menu-item", {
 		},
 		rightIcon: {
 			default: null
+		},
+		level: {
+			default: 0
 		}
 	},
 	// Keeps track of any changes made during editing
@@ -272,13 +278,17 @@ createCustomElement("menu-item", {
 			 * Only handle this event if called from this component
 			 * Since menu-editor also uses this event
 			 */
+
 			switch (payload.item.id) {
 				case "route":
 				case "external":
 					updateState({ typeInput: payload.item.id });
 					break;
 				default:
-					updateState({ iconInput: payload.item.id }); // action on icon selection
+			}
+
+			if(payload.item.type === 'icon'){
+				updateState({ iconInput: payload.item.id }); // action on icon selection
 			}
 		},
 		// Text input field has changed (someone typed in the field or cleared value for example)

src/x-759224-menu-builder-uic/components/menu-tree.js

@@ -8,7 +8,7 @@ import "./menu-item";
 // File description: This displays a top-level menu item (and child items), expand/collapse functionality for the container
 
 
-const view = ({ properties: { tree }, expanded }, { updateState }) => {
+const view = ({ properties: { tree, level }, expanded }, { updateState }) => {
 	const { id, children, parent, choice, label, type, page, sys_id, href, rightIcon } =
 		tree;
 
@@ -43,14 +43,15 @@ const view = ({ properties: { tree }, expanded }, { updateState }) => {
 					rightIcon={rightIcon}
 					className="menu-item"
 					expandParent={EXPAND_PARENT}
+					level={level}
 				></menu-item>
 			</div>
 			{/* Render child menu items in a collapsible container if they exist */}
 			{hasChildren ? (
 				<ul>
 					<now-collapse expanded={expanded}>
 						{children.map((child) => {
-							return <menu-tree key={child.id} tree={child}></menu-tree>;
+							return <menu-tree key={child.id} tree={child} level={level + 1}></menu-tree>;
 						})}
 					</now-collapse>
 				</ul>
@@ -68,6 +69,9 @@ createCustomElement("menu-tree", {
 		tree: {
 			default: {},
 		},
+		level: {
+			default: 1
+		}
 	},
 	initialState: {
 		expanded: true,