WIP

Author: naraandrade

modules/apps/object/object-web/src/main/resources/META-INF/resources/js/components/ModelBuilder/Edges/SelfEdge.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
  */
 
+import DropDown from '@clayui/drop-down';
 import ClayList from '@clayui/list';
 import ClayPopover from '@clayui/popover';
 import {getLocalizableLabel} from '@liferay/object-js-components-web';
@@ -74,8 +75,7 @@ export default function SelfEdge({
 					fill: '#0B5FFF',
 				};
 			});
-		}
-		else {
+		} else {
 			setEdgeStyle((style) => {
 				return {...style, stroke: '#80ACFF'};
 			});
@@ -117,11 +117,8 @@ export default function SelfEdge({
 			/>
 
 			{selfRelationships && selfRelationships.length > 1 ? (
-				<ClayPopover
-					alignPosition="bottom"
-					header="Self Relationships"
-					show={activePopover}
-					size="lg"
+				<DropDown
+					active={activePopover}
 					trigger={
 						<EdgeText
 							label={label}
@@ -136,10 +133,12 @@ export default function SelfEdge({
 						/>
 					}
 				>
-					<ClayList>
-						{selfRelationships.map((selfRelationship, index) => (
-							<ClayList.Item
-								flex
+					<DropDown.ItemList items={selfRelationships}>
+						{(
+							selfRelationship: ObjectRelationship,
+							index: number
+						) => (
+							<DropDown.Item
 								key={index}
 								onClick={() => {
 									dispatch({
@@ -152,21 +151,15 @@ export default function SelfEdge({
 									});
 								}}
 							>
-								<ClayList.ItemField>
-									{getLocalizableLabel(
-										defaultLanguageId!,
-										selfRelationship.label,
-										selfRelationship.name
-									)}
-								</ClayList.ItemField>
-
-								<ClayList.ItemField>
-									{selfRelationship.type}
-								</ClayList.ItemField>
-							</ClayList.Item>
-						))}
-					</ClayList>
-				</ClayPopover>
+								{getLocalizableLabel(
+									defaultLanguageId!,
+									selfRelationship.label,
+									selfRelationship.name
+								)}
+							</DropDown.Item>
+						)}
+					</DropDown.ItemList>
+				</DropDown>
 			) : (
 				<EdgeText
 					label={label}