added "rightIcon" property to the JSON and ability to select an icon on the editor (#19)

* feat: custom-component auto expanding of menus & actions

* refactor: custom-component-revert revert configuration

* test: custom-component removed logging

* fix: custom-component added 'rightIcon' property to the json & functionality to edit it

* test: custom-component removing log function

* doc: custom-component adding some documentation points

* refactor: custom-component removing unnecessary code

Author: deepak-64742

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

@@ -6,18 +6,20 @@ import "@servicenow/now-collapse";
 import "@servicenow/now-dropdown";
 import "@servicenow/now-input";
 import "./menu-editor";
+import iconlist from "../icons";
 
 // File description: This is where to configure all the details about a menu item, such as its name, link, or delete
 
 const view = (
 	{
-		properties: { id, choice, label, type, page, sysId, href, expandParent },
+		properties: { id, choice, label, type, page, sysId, href, expandParent, rightIcon },
 		labelInput,
 		typeInput,
 		pageInput,
 		sysIdInput,
 		hrefInput,
 		editMode,
+		iconInput
 	},
 	{ dispatch }
 ) => {
@@ -31,6 +33,7 @@ const view = (
 	const pageValue = pageInput || page;
 	const sysIdValue = sysIdInput || sysId;
 	const hrefValue = hrefInput || href;
+	const iconValue = iconInput || rightIcon;
 
 	// This is constructing the JSON output that the chrome_menu UX Page Property expects for this specific menu item
 
@@ -54,6 +57,11 @@ const view = (
 		},
 	};
 
+	// adding rightIcon property to JSON
+	if(iconValue){
+		actionJSON.value.rightIcon = iconValue
+	}
+
 	if (typeValue) {
 		actionJSON.value.type = typeValue;
 		actionJSON.value.value = typeValue === "route" ? routeJSON : externalJSON;
@@ -88,6 +96,32 @@ const view = (
 					name="labelInput"
 					readonly={!editMode}
 				></now-input>
+				{
+					iconValue && <now-button
+					variant="primary"
+					size="md"
+					icon={iconValue}
+				  ></now-button>
+				}
+				<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 }))]}
+					selectedItems={[iconValue]}
+					name="iconInput"
+					select="single"
+					placeholder=""
+					icon=""
+					variant="secondary"
+					size="md"
+					bare={true}
+					tooltip-content="Select right icon"
+					panel-fit-props={{}}
+					show-padding={true}
+					config-aria={{}}
+					disabled={!editMode}
+					search="true"
+				></now-dropdown>
 				<now-dropdown
 					items={[
 						{ id: "external", label: "External Link" },
@@ -203,6 +237,9 @@ createCustomElement("menu-item", {
 		},
 		expandParent: {
 			default: undefined
+		},
+		rightIcon: {
+			default: null
 		}
 	},
 	// Keeps track of any changes made during editing
@@ -212,6 +249,7 @@ createCustomElement("menu-item", {
 		pageInput: undefined,
 		sysIdInput: undefined,
 		hrefInput: undefined,
+		iconInput: undefined,
 		editMode: false,
 	},
 	actionHandlers: {
@@ -229,6 +267,7 @@ createCustomElement("menu-item", {
 					updateState({ typeInput: payload.item.id });
 					break;
 				default:
+					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

@@ -9,7 +9,7 @@ import "./menu-item";
 
 
 const view = ({ properties: { tree }, expanded }, { updateState }) => {
-	const { id, children, parent, choice, label, type, page, sys_id, href } =
+	const { id, children, parent, choice, label, type, page, sys_id, href, rightIcon } =
 		tree;
 
 	const hasChildren = children && children.length > 0;
@@ -40,6 +40,7 @@ const view = ({ properties: { tree }, expanded }, { updateState }) => {
 					page={page}
 					sysId={sys_id}
 					href={href}
+					rightIcon={rightIcon}
 					className="menu-item"
 					expandParent={EXPAND_PARENT}
 				></menu-item>