auto expanding of manus & actions (#16)

Author: deepak-64742

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

@@ -40,13 +40,17 @@ createCustomElement("menu-editor", {
 		parent: {
 			default: null,
 		},
+
+		expandParent: {
+			default: null,
+		}
 	},
 	actionHandlers: {
 		"NOW_DROPDOWN#ITEM_CLICKED": ({
 			action: {
 				payload: { item },
 			},
-			properties: { parent },
+			properties: { parent, expandParent },
 			dispatch,
 		}) => {
 			let choice = "";
@@ -69,6 +73,7 @@ createCustomElement("menu-editor", {
 
 			// Dispatch back to menu-builder component the new menu item information
 			dispatch("MENU_ITEM_EDITED", eventPayload);
+			expandParent();
 		},
 	},
 });

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

@@ -11,7 +11,7 @@ import "./menu-editor";
 
 const view = (
 	{
-		properties: { id, choice, label, type, page, sysId, href },
+		properties: { id, choice, label, type, page, sysId, href, expandParent },
 		labelInput,
 		typeInput,
 		pageInput,
@@ -110,7 +110,7 @@ const view = (
 				></now-dropdown>
 			</div>
 			<div className="rightMenu">
-				<menu-editor parent={id}></menu-editor>
+				<menu-editor parent={id} expandParent={expandParent}></menu-editor>
 				<now-collapse expanded={editMode}>
 					<div>
 						{typeValue == "route" ? (
@@ -201,6 +201,9 @@ createCustomElement("menu-item", {
 		href: {
 			default: undefined,
 		},
+		expandParent: {
+			default: undefined
+		}
 	},
 	// Keeps track of any changes made during editing
 	initialState: {

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

@@ -8,12 +8,18 @@ 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 }) => {
+const view = ({ properties: { tree }, expanded }, { updateState }) => {
 	const { id, children, parent, choice, label, type, page, sys_id, href } =
 		tree;
 
 	const hasChildren = children && children.length > 0;
 
+	const EXPAND_PARENT = () => {
+		updateState({
+			expanded: true,
+		});
+	}
+
 	return (
 		<Fragment>
 			<div>
@@ -35,6 +41,7 @@ const view = ({ properties: { tree }, expanded }) => {
 					sysId={sys_id}
 					href={href}
 					className="menu-item"
+					expandParent={EXPAND_PARENT}
 				></menu-item>
 			</div>
 			{/* Render child menu items in a collapsible container if they exist */}
@@ -62,7 +69,7 @@ createCustomElement("menu-tree", {
 		},
 	},
 	initialState: {
-		expanded: false,
+		expanded: true,
 	},
 	actionHandlers: {
 		"NOW_BUTTON_ICONIC#CLICKED": ({