@mohsinonxrm/pptb-fetchxml-studio 1.0.0

package/src/features/fetchxml/ui/LeftPane/PropertiesPanel/editors/LinkEntityEditor.tsx

@@ -0,0 +1,433 @@
+/**
+ * Property editor for Link-Entity nodes
+ * Controls joins/relationships to related entities
+ */
+
+import { useState, useEffect } from "react";
+import {
+	Field,
+	Input,
+	Dropdown,
+	Option,
+	Checkbox,
+	Label,
+	Tooltip,
+	MessageBar,
+	MessageBarBody,
+	Dialog,
+	DialogSurface,
+	DialogTitle,
+	DialogContent,
+	DialogBody,
+	DialogActions,
+	Button,
+	makeStyles,
+	tokens,
+} from "@fluentui/react-components";
+import { Info16Regular } from "@fluentui/react-icons";
+import { debugLog } from "../../../../../../shared/utils/debug";
+import type { LinkEntityNode, LinkType } from "../../../../model/nodes";
+import { RelationshipPicker } from "../../../../../../shared/components/RelationshipPicker";
+
+const useStyles = makeStyles({
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		gap: tokens.spacingVerticalM,
+		padding: tokens.spacingVerticalM,
+	},
+	section: {
+		display: "flex",
+		flexDirection: "column",
+		gap: tokens.spacingVerticalS,
+	},
+	fieldWithTooltip: {
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacingHorizontalXS,
+	},
+	tooltipIcon: {
+		color: tokens.colorNeutralForeground3,
+		cursor: "help",
+	},
+});
+
+const LINK_TYPES: { value: LinkType; label: string; description: string }[] = [
+	{
+		value: "inner",
+		label: "Inner Join",
+		description: "Only records with matching related records",
+	},
+	{
+		value: "outer",
+		label: "Left Outer Join",
+		description: "All parent records, even without related records",
+	},
+	{
+		value: "any",
+		label: "Any (EXISTS)",
+		description: "At least one related record matches conditions",
+	},
+	{
+		value: "not any",
+		label: "Not Any (NOT EXISTS)",
+		description: "No related records match conditions",
+	},
+	{ value: "all", label: "All", description: "All related records match conditions" },
+	{ value: "not all", label: "Not All", description: "Not all related records match" },
+	{ value: "exists", label: "Exists", description: "Semi-join existence check" },
+	{ value: "in", label: "In", description: "Similar to exists" },
+	{
+		value: "matchfirstrowusingcrossapply",
+		label: "Match First Row (CROSS APPLY)",
+		description: "Performance: match only first related record",
+	},
+];
+
+interface LinkEntityEditorProps {
+	node: LinkEntityNode;
+	parentEntityName: string;
+	onUpdate: (updates: Record<string, unknown>) => void;
+}
+
+export function LinkEntityEditor({ node, parentEntityName, onUpdate }: LinkEntityEditorProps) {
+	const styles = useStyles();
+
+	// Dialog state for confirming link-type change
+	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+	const [pendingLinkType, setPendingLinkType] = useState<LinkType | null>(null);
+
+	// Determine if we should show the relationship picker
+	// Show it if the node has a placeholder name or hasn't been properly configured
+	const shouldShowPicker = node.name === "new_entity" || (!node.name && !node.from && !node.to);
+	const [useRelationshipPicker, setUseRelationshipPicker] = useState(shouldShowPicker);
+
+	// Reset picker state when switching to a different node or when node properties change
+	useEffect(() => {
+		debugLog("linkEntityEditor", "Node changed or props updated:", {
+			nodeId: node.id,
+			nodeName: node.name,
+			from: node.from,
+			to: node.to,
+			parentEntityName,
+			shouldShowPicker,
+		});
+		setUseRelationshipPicker(shouldShowPicker);
+	}, [node.id, node.name, node.from, node.to, parentEntityName, shouldShowPicker]);
+
+	const handleTextChange = (field: string) => (_: unknown, data: { value: string }) => {
+		onUpdate({ [field]: data.value || undefined });
+	};
+
+	// Special handler for link-type changes that may require confirmation
+	const handleLinkTypeChange = (_: unknown, data: { optionValue?: string }) => {
+		const newLinkType = data.optionValue as LinkType | undefined;
+		if (!newLinkType) return;
+
+		// Check if switching to "not any" or "not all" and there are children that would need to be removed
+		const isRestrictiveLinkType = newLinkType === "not any" || newLinkType === "not all";
+		const hasChildren =
+			node.attributes.length > 0 ||
+			node.filters.length > 0 ||
+			node.links.length > 0 ||
+			node.allAttributes?.enabled;
+
+		if (isRestrictiveLinkType && hasChildren) {
+			// Show confirmation dialog
+			setPendingLinkType(newLinkType);
+			setShowConfirmDialog(true);
+		} else {
+			// Safe to change directly
+			onUpdate({ linkType: newLinkType });
+		}
+	};
+
+	// Handle dialog confirmation - proceed with change and remove children
+	const handleConfirmLinkTypeChange = () => {
+		if (pendingLinkType) {
+			// Update link type and clear children
+			onUpdate({
+				linkType: pendingLinkType,
+				attributes: [],
+				allAttributes: undefined, // Remove all-attributes completely
+				filters: [],
+				links: [],
+			});
+		}
+		setShowConfirmDialog(false);
+		setPendingLinkType(null);
+	};
+
+	// Handle dialog cancellation - revert to current link type
+	const handleCancelLinkTypeChange = () => {
+		setShowConfirmDialog(false);
+		setPendingLinkType(null);
+		// No need to update anything - just close the dialog
+	};
+
+	const handleCheckboxChange =
+		(field: string) => (_: unknown, data: { checked: boolean | "mixed" }) => {
+			onUpdate({ [field]: data.checked === true ? true : undefined });
+		};
+
+	const handleRelationshipSelect = (relationship: {
+		schemaName: string;
+		referencedEntity: string;
+		referencingEntity: string;
+		referencedAttribute: string;
+		referencingAttribute: string;
+		type: "1N" | "N1" | "NN";
+	}) => {
+		debugLog("linkEntityEditor", "Relationship selected:", {
+			nodeId: node.id,
+			parentEntityName,
+			relationship,
+		});
+
+		// Auto-populate from/to based on relationship type and direction
+		const updates: Record<string, unknown> = {
+			name: "",
+			from: "",
+			to: "",
+			relationshipType: relationship.type,
+		};
+
+		// Determine which entity is the related/target entity
+		// For 1:N - parent is ReferencedEntity, child is ReferencingEntity
+		// For N:1 - parent is ReferencedEntity, child is ReferencingEntity
+		// For N:N - both are referenced in the relationship
+
+		if (relationship.type === "1N") {
+			// Parent (current) → Child (related)
+			// from = child's FK attribute, to = parent's PK attribute
+			if (relationship.referencedEntity === parentEntityName) {
+				// We're the referenced (parent), linking to referencing (child)
+				updates.name = relationship.referencingEntity;
+				updates.from = relationship.referencingAttribute;
+				updates.to = relationship.referencedAttribute;
+			} else {
+				// Reverse direction
+				updates.name = relationship.referencedEntity;
+				updates.from = relationship.referencedAttribute;
+				updates.to = relationship.referencingAttribute;
+			}
+		} else if (relationship.type === "N1") {
+			// Child (current) → Parent (related)
+			// from = parent's PK attribute, to = child's FK attribute
+			if (relationship.referencingEntity === parentEntityName) {
+				// We're the referencing (child), linking to referenced (parent)
+				updates.name = relationship.referencedEntity;
+				updates.from = relationship.referencedAttribute;
+				updates.to = relationship.referencingAttribute;
+			} else {
+				// Reverse direction
+				updates.name = relationship.referencingEntity;
+				updates.from = relationship.referencingAttribute;
+				updates.to = relationship.referencedAttribute;
+			}
+		} else if (relationship.type === "NN") {
+			// Many-to-Many
+			// Determine target entity (the one that's not parentEntityName)
+			const targetEntity =
+				relationship.referencedEntity === parentEntityName
+					? relationship.referencingEntity
+					: relationship.referencedEntity;
+
+			updates.name = targetEntity;
+			updates.from = relationship.referencingAttribute;
+			updates.to = relationship.referencedAttribute;
+			updates.intersect = true;
+		}
+
+		debugLog("linkEntityEditor", "Applying updates:", updates);
+		onUpdate(updates);
+		setUseRelationshipPicker(false); // Switch to manual mode after selection
+	};
+
+	return (
+		<div className={styles.container}>
+			{/* Relationship Picker Section */}
+			{useRelationshipPicker && parentEntityName && (
+				<div className={styles.section}>
+					<Label weight="semibold">Select Relationship</Label>
+					<Field
+						label="Choose a relationship to auto-populate link details"
+						hint="Or skip this and manually configure the link below"
+					>
+						<RelationshipPicker
+							entityLogicalName={parentEntityName}
+							onChange={handleRelationshipSelect}
+							placeholder="Select a relationship..."
+						/>
+					</Field>
+				</div>
+			)}
+
+			{/* Basic Properties */}
+			<div className={styles.section}>
+				<Label weight="semibold">Link-Entity Properties</Label>
+
+				<Field label="Related Entity Name" required>
+					<div className={styles.fieldWithTooltip}>
+						<Input
+							value={node.name}
+							onChange={handleTextChange("name")}
+							placeholder="e.g., contact, account, systemuser"
+						/>
+						<Tooltip
+							content="Logical name of the related entity to join."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				<Field label="From Attribute" required>
+					<div className={styles.fieldWithTooltip}>
+						<Input
+							value={node.from}
+							onChange={handleTextChange("from")}
+							placeholder="e.g., contactid, accountid"
+						/>
+						<Tooltip
+							content="Attribute on the related entity (the entity being joined)."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				<Field label="To Attribute" required>
+					<div className={styles.fieldWithTooltip}>
+						<Input
+							value={node.to}
+							onChange={handleTextChange("to")}
+							placeholder="e.g., parentcustomerid, createdby"
+						/>
+						<Tooltip
+							content="Attribute on the parent entity (the entity being joined from)."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				<Field label="Join Type" required>
+					<div className={styles.fieldWithTooltip}>
+						<Dropdown
+							value={node.linkType}
+							selectedOptions={[node.linkType]}
+							onOptionSelect={handleLinkTypeChange}
+						>
+							{LINK_TYPES.map((type) => (
+								<Option key={type.value} value={type.value} text={type.description}>
+									{type.label}
+								</Option>
+							))}
+						</Dropdown>
+						<Tooltip
+							content="Type of join. Inner = matching only. Outer = include parent records without match. EXISTS variations for existence checks."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				{/* Warning for "not any" and "not all" link types */}
+				{(node.linkType === "not any" || node.linkType === "not all") && (
+					<MessageBar intent="warning">
+						<MessageBarBody>
+							<strong>Note:</strong> The "{node.linkType}" link type does not support attributes.
+							Attributes added to this link-entity will cause query execution errors.
+						</MessageBarBody>
+					</MessageBar>
+				)}
+			</div>
+
+			{/* Optional Properties */}
+			<div className={styles.section}>
+				<Label weight="semibold">Optional Properties</Label>
+
+				<Field label="Alias">
+					<div className={styles.fieldWithTooltip}>
+						<Input
+							value={node.alias ?? ""}
+							onChange={handleTextChange("alias")}
+							placeholder="e.g., parent_account, created_by_user"
+						/>
+						<Tooltip
+							content="Alias for referencing this link in conditions, order-by, or nested links."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				<Field>
+					<div className={styles.fieldWithTooltip}>
+						<Checkbox
+							checked={node.intersect ?? false}
+							onChange={handleCheckboxChange("intersect")}
+							label="Intersect (Many-to-Many)"
+						/>
+						<Tooltip
+							content="Use intersect entity for N:N relationships. Dataverse automatically handles the intersect table."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				<Field>
+					<div className={styles.fieldWithTooltip}>
+						<Checkbox
+							checked={node.visible ?? true}
+							onChange={handleCheckboxChange("visible")}
+							label="Visible in Results"
+						/>
+						<Tooltip
+							content="Include linked entity data in query results. Set to false to use link only for filtering."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+			</div>
+
+			{/* Confirmation Dialog for Link Type Change */}
+			<Dialog
+				open={showConfirmDialog}
+				onOpenChange={(_, data) => !data.open && handleCancelLinkTypeChange()}
+			>
+				<DialogSurface>
+					<DialogBody>
+						<DialogTitle>Confirm Link Type Change</DialogTitle>
+						<DialogContent>
+							<p>
+								Changing the link type to <strong>"{pendingLinkType}"</strong> will remove all
+								attributes, filters, and nested link-entities from this link-entity because these
+								link types do not support child elements.
+							</p>
+							<p>This action cannot be undone. Do you want to proceed?</p>
+						</DialogContent>
+						<DialogActions>
+							<Button appearance="primary" onClick={handleConfirmLinkTypeChange}>
+								Yes, Change Link Type
+							</Button>
+							<Button appearance="secondary" onClick={handleCancelLinkTypeChange}>
+								Cancel
+							</Button>
+						</DialogActions>
+					</DialogBody>
+				</DialogSurface>
+			</Dialog>
+		</div>
+	);
+}

package/src/features/fetchxml/ui/LeftPane/PropertiesPanel/editors/OrderEditor.tsx

@@ -0,0 +1,161 @@
+/**
+ * Property editor for Order nodes
+ * Controls sorting/ordering of query results
+ */
+
+import {
+	Field,
+	Dropdown,
+	Option,
+	Radio,
+	RadioGroup,
+	Label,
+	Tooltip,
+	makeStyles,
+	tokens,
+} from "@fluentui/react-components";
+import { Info16Regular } from "@fluentui/react-icons";
+import type { OrderNode, FetchNode } from "../../../../model/nodes";
+import { AttributePicker } from "../../../../../../shared/components/AttributePicker";
+import { collectLinkEntityReferences } from "../../../../model/treeUtils";
+import { useMemo } from "react";
+
+const useStyles = makeStyles({
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		gap: tokens.spacingVerticalM,
+		padding: tokens.spacingVerticalM,
+	},
+	section: {
+		display: "flex",
+		flexDirection: "column",
+		gap: tokens.spacingVerticalS,
+	},
+	fieldWithTooltip: {
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacingHorizontalXS,
+	},
+	tooltipIcon: {
+		color: tokens.colorNeutralForeground3,
+		cursor: "help",
+	},
+});
+
+interface OrderEditorProps {
+	node: OrderNode;
+	entityName: string;
+	fetchQuery: FetchNode | null;
+	onUpdate: (updates: Record<string, unknown>) => void;
+}
+
+export function OrderEditor({ node, entityName, fetchQuery, onUpdate }: OrderEditorProps) {
+	const styles = useStyles();
+
+	// Collect all link-entity references for the entity dropdown
+	const linkEntityOptions = useMemo(() => {
+		const refs = collectLinkEntityReferences(fetchQuery);
+		return refs;
+	}, [fetchQuery]);
+
+	// Determine which entity's attributes to show
+	// If entityname is set, find the matching link-entity's logical name
+	const attributeEntityName = useMemo(() => {
+		if (!node.entityname) {
+			// No entityname = root entity
+			return entityName;
+		}
+		// Find the link-entity with matching alias/identifier
+		const linkRef = linkEntityOptions.find(
+			(ref) => ref.identifier === node.entityname || ref.alias === node.entityname
+		);
+		return linkRef?.entityName ?? entityName;
+	}, [node.entityname, entityName, linkEntityOptions]);
+
+	const handleRadioChange = (_: unknown, data: { value: string }) => {
+		onUpdate({ descending: data.value === "desc" });
+	};
+
+	const handleEntityChange = (_: unknown, data: { optionValue?: string }) => {
+		const value = data.optionValue;
+		if (value === "__root__") {
+			// Root entity selected - clear entityname and attribute
+			onUpdate({ entityname: undefined, attribute: "" });
+		} else {
+			// Link-entity selected - set entityname and clear attribute
+			onUpdate({ entityname: value || undefined, attribute: "" });
+		}
+	};
+
+	// Get selected entity option value
+	const selectedEntityValue = node.entityname ?? "__root__";
+
+	return (
+		<div className={styles.container}>
+			{/* Basic Properties */}
+			<div className={styles.section}>
+				<Label weight="semibold">Order By Properties</Label>
+
+				<Field label="Entity" hint="Select root entity or a link-entity to sort by">
+					<div className={styles.fieldWithTooltip}>
+						<Dropdown
+							value={
+								selectedEntityValue === "__root__"
+									? `Root: ${entityName}`
+									: linkEntityOptions.find((o) => o.identifier === selectedEntityValue)
+											?.displayLabel ?? selectedEntityValue
+							}
+							selectedOptions={[selectedEntityValue]}
+							onOptionSelect={handleEntityChange}
+						>
+							<Option text={`Root: ${entityName}`} value="__root__">
+								Root: {entityName}
+							</Option>
+							{linkEntityOptions.map((ref) => (
+								<Option key={ref.identifier} text={ref.displayLabel} value={ref.identifier}>
+									{ref.displayLabel}
+								</Option>
+							))}
+						</Dropdown>
+						<Tooltip
+							content="Select the root entity or a link-entity to sort by its attributes."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				<Field label="Attribute Name" required>
+					<div className={styles.fieldWithTooltip}>
+						<AttributePicker
+							entityLogicalName={attributeEntityName}
+							value={node.attribute}
+							onChange={(logicalName) => onUpdate({ attribute: logicalName })}
+							placeholder="Select or type attribute name"
+						/>
+						<Tooltip content="Logical name of the attribute to sort by." relationship="description">
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+
+				<Field label="Sort Direction">
+					<div className={styles.fieldWithTooltip}>
+						<RadioGroup value={node.descending ? "desc" : "asc"} onChange={handleRadioChange}>
+							<Radio value="asc" label="Ascending (A-Z, 0-9, oldest first)" />
+							<Radio value="desc" label="Descending (Z-A, 9-0, newest first)" />
+						</RadioGroup>
+						<Tooltip
+							content="Sort order: ascending (default) or descending. Multiple order nodes are applied in sequence."
+							relationship="description"
+						>
+							<Info16Regular className={styles.tooltipIcon} />
+						</Tooltip>
+					</div>
+				</Field>
+			</div>
+		</div>
+	);
+}