@mohsinonxrm/pptb-fetchxml-studio 1.0.0 → 1.0.1

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

@@ -1,194 +0,0 @@
-/**
- * ValueOf Picker Component
- * Allows selecting a column for valueof comparison, including cross-entity columns
- * Implements Option B: select entity/alias first, then attribute
- */
-
-import { useState, useEffect, useMemo } from "react";
-import { Field, Dropdown, Option, Tooltip, makeStyles, tokens } from "@fluentui/react-components";
-import { Info16Regular } from "@fluentui/react-icons";
-import type { FetchNode } from "../../../../model/nodes";
-import { collectLinkEntityReferences } from "../../../../model/treeUtils";
-import { AttributePicker } from "../../../../../../shared/components/AttributePicker";
-
-const useStyles = makeStyles({
-	container: {
-		display: "flex",
-		flexDirection: "column",
-		gap: tokens.spacingVerticalS,
-	},
-	fieldWithTooltip: {
-		display: "flex",
-		alignItems: "center",
-		gap: tokens.spacingHorizontalXS,
-	},
-	tooltipIcon: {
-		color: tokens.colorNeutralForeground3,
-		cursor: "help",
-	},
-});
-
-interface ValueOfPickerProps {
-	fetchQuery: FetchNode | null;
-	rootEntityName: string;
-	effectiveEntityName: string;
-	valueof: string;
-	compatibleTypes: string[];
-	onChange: (valueof: string | undefined) => void;
-}
-
-/**
- * Parse a valueof string into entity alias and attribute parts
- * - "createdon" -> { alias: undefined, attribute: "createdon" }
- * - "contact_alias.modifiedon" -> { alias: "contact_alias", attribute: "modifiedon" }
- */
-function parseValueOf(valueof: string): { alias: string | undefined; attribute: string } {
-	if (!valueof) {
-		return { alias: undefined, attribute: "" };
-	}
-	const dotIndex = valueof.indexOf(".");
-	if (dotIndex === -1) {
-		return { alias: undefined, attribute: valueof };
-	}
-	return {
-		alias: valueof.substring(0, dotIndex),
-		attribute: valueof.substring(dotIndex + 1),
-	};
-}
-
-/**
- * Build a valueof string from entity alias and attribute
- */
-function buildValueOf(alias: string | undefined, attribute: string): string {
-	if (!attribute) return "";
-	if (!alias) return attribute;
-	return `${alias}.${attribute}`;
-}
-
-export function ValueOfPicker({
-	fetchQuery,
-	rootEntityName,
-	effectiveEntityName,
-	valueof,
-	compatibleTypes,
-	onChange,
-}: ValueOfPickerProps) {
-	const styles = useStyles();
-
-	// Collect all available entities (root + link-entities)
-	const linkEntityReferences = useMemo(() => collectLinkEntityReferences(fetchQuery), [fetchQuery]);
-
-	// Build entity options: root entity + all link-entities
-	const entityOptions = useMemo(() => {
-		const options: Array<{ value: string; label: string; entityName: string }> = [];
-
-		// Add root entity (empty alias means root)
-		if (rootEntityName) {
-			options.push({
-				value: "", // empty means root entity
-				label: `${rootEntityName} (root)`,
-				entityName: rootEntityName,
-			});
-		}
-
-		// Add link-entities
-		for (const ref of linkEntityReferences) {
-			options.push({
-				value: ref.identifier,
-				label: ref.displayLabel,
-				entityName: ref.entityName,
-			});
-		}
-
-		return options;
-	}, [rootEntityName, linkEntityReferences]);
-
-	// Parse current valueof to get alias and attribute
-	const parsed = useMemo(() => parseValueOf(valueof), [valueof]);
-
-	// Track selected entity alias (empty string = root entity)
-	const [selectedAlias, setSelectedAlias] = useState<string>(parsed.alias || "");
-
-	// Get the entity name for the selected alias
-	const selectedEntityName = useMemo(() => {
-		if (selectedAlias === "") {
-			return effectiveEntityName || rootEntityName;
-		}
-		const ref = linkEntityReferences.find((r) => r.identifier === selectedAlias);
-		return ref?.entityName || "";
-	}, [selectedAlias, effectiveEntityName, rootEntityName, linkEntityReferences]);
-
-	// Sync selectedAlias when valueof changes externally (e.g., parsing FetchXML)
-	useEffect(() => {
-		setSelectedAlias(parsed.alias || "");
-	}, [parsed.alias]);
-
-	const handleEntityChange = (_ev: unknown, data: { optionValue?: string }) => {
-		const newAlias = data.optionValue ?? "";
-		setSelectedAlias(newAlias);
-		// Clear the attribute when entity changes, but keep valueof defined (empty string)
-		// to prevent the switch from reverting to literal mode
-		onChange("");
-	};
-
-	const handleAttributeChange = (logicalName: string) => {
-		const newValueof = buildValueOf(selectedAlias || undefined, logicalName);
-		onChange(newValueof || undefined);
-	};
-
-	return (
-		<div className={styles.container}>
-			{/* Entity/Alias selector */}
-			<Field label="Compare From Entity">
-				<div className={styles.fieldWithTooltip}>
-					<Dropdown
-						value={
-							entityOptions.find((o) => o.value === selectedAlias)?.label || "Select entity..."
-						}
-						selectedOptions={[selectedAlias]}
-						onOptionSelect={handleEntityChange}
-						placeholder="Select entity..."
-					>
-						{entityOptions.map((opt) => (
-							<Option key={opt.value} value={opt.value}>
-								{opt.label}
-							</Option>
-						))}
-					</Dropdown>
-					<Tooltip
-						content="Select which entity to pick the comparison column from. Use root entity for same-row comparison, or a linked entity for cross-table comparison."
-						relationship="description"
-					>
-						<Info16Regular className={styles.tooltipIcon} />
-					</Tooltip>
-				</div>
-			</Field>
-
-			{/* Attribute picker for selected entity */}
-			<Field label="Compare To Column">
-				<div className={styles.fieldWithTooltip}>
-					<AttributePicker
-						entityLogicalName={selectedEntityName}
-						value={parsed.attribute}
-						onChange={handleAttributeChange}
-						placeholder={selectedEntityName ? "Select column to compare" : "Select an entity first"}
-						disabled={!selectedEntityName}
-						filterByTypes={compatibleTypes.length > 0 ? compatibleTypes : undefined}
-					/>
-					<Tooltip
-						content={
-							compatibleTypes.length > 0
-								? `Select a column of compatible type (${compatibleTypes.join(
-										", "
-								  )}) to compare against.`
-								: "Select another column to compare against."
-						}
-						relationship="description"
-					>
-						<Info16Regular className={styles.tooltipIcon} />
-					</Tooltip>
-				</div>
-			</Field>
-		</div>
-	);
-}

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

@@ -1,225 +0,0 @@
-/**
- * Properties panel that displays editors for the selected tree node
- */
-
-import { makeStyles, tokens } from "@fluentui/react-components";
-import { debugLog } from "../../../../shared/utils/debug";
-import type {
-	FetchNode,
-	EntityNode,
-	AttributeNode,
-	AllAttributesNode,
-	OrderNode,
-	FilterNode,
-	ConditionNode,
-	LinkEntityNode,
-	NodeId,
-} from "../../model/nodes";
-import { FetchOptionsEditor } from "./PropertiesPanel/editors/FetchOptionsEditor";
-import { AttributeEditor } from "./PropertiesPanel/editors/AttributeEditor";
-import { OrderEditor } from "./PropertiesPanel/editors/OrderEditor";
-import { FilterEditor } from "./PropertiesPanel/editors/FilterEditor";
-import { ConditionEditor } from "./PropertiesPanel/editors/ConditionEditor";
-import { LinkEntityEditor } from "./PropertiesPanel/editors/LinkEntityEditor";
-
-const useStyles = makeStyles({
-	container: {
-		overflow: "auto",
-		height: "100%",
-		minHeight: 0, // Important for flex child with overflow
-		scrollbarGutter: "stable",
-	},
-	emptyState: {
-		padding: "16px",
-		color: tokens.colorNeutralForeground3,
-		fontSize: "13px",
-		fontStyle: "italic",
-	},
-	section: {
-		padding: "16px",
-	},
-	label: {
-		display: "block",
-		fontSize: "13px",
-		fontWeight: 600,
-		marginBottom: "8px",
-		color: tokens.colorNeutralForeground2,
-	},
-});
-
-type SelectedNode =
-	| FetchNode
-	| EntityNode
-	| AttributeNode
-	| AllAttributesNode
-	| OrderNode
-	| FilterNode
-	| ConditionNode
-	| LinkEntityNode
-	| null;
-
-interface PropertiesPanelProps {
-	selectedNode: SelectedNode;
-	fetchQuery: FetchNode | null;
-	onNodeUpdate: (nodeId: NodeId, updates: Record<string, unknown>) => void;
-}
-
-export function PropertiesPanel({ selectedNode, fetchQuery, onNodeUpdate }: PropertiesPanelProps) {
-	const styles = useStyles();
-
-	// Helper to find the parent entity/link-entity for a node
-	const findParentEntity = (nodeId: NodeId): string | null => {
-		if (!fetchQuery) return null;
-
-		const findInNode = (
-			node: unknown,
-			targetId: NodeId,
-			parentEntityName: string | null
-		): string | null => {
-			if (!node || typeof node !== "object") return null;
-
-			const n = node as Record<string, unknown>;
-
-			// If this is the target node, return the current parent entity name
-			if (n.id === targetId) {
-				debugLog("propertiesPanel", "Found target node:", {
-					targetId,
-					nodeType: n.type,
-					nodeName: n.name,
-					resolvedParentEntityName: parentEntityName,
-				});
-				return parentEntityName;
-			}
-
-			// If this is an entity or link-entity, update parent name
-			// BUT only if it has a valid entity name (not a placeholder like "new_entity")
-			let currentEntityName = parentEntityName;
-			if (n.type === "entity" || n.type === "link-entity") {
-				const entityName = n.name as string;
-				// Only use the entity name if it's not a placeholder
-				if (entityName && entityName !== "new_entity") {
-					currentEntityName = entityName;
-					debugLog("propertiesPanel", "Traversing entity/link-entity:", {
-						nodeId: n.id,
-						nodeType: n.type,
-						entityName,
-						updatedCurrentEntityName: currentEntityName,
-					});
-				}
-			}
-
-			// Search in arrays
-			const arrayProps = ["attributes", "orders", "filters", "conditions", "subfilters", "links"];
-			for (const prop of arrayProps) {
-				if (Array.isArray(n[prop])) {
-					for (const item of n[prop]) {
-						const found = findInNode(item, targetId, currentEntityName);
-						if (found) return found;
-					}
-				}
-			}
-
-			// Search in nested objects
-			if (n.entity) {
-				const found = findInNode(n.entity, targetId, currentEntityName);
-				if (found) return found;
-			}
-
-			return null;
-		};
-
-		return findInNode(fetchQuery, nodeId, fetchQuery.entity.name);
-	};
-
-	if (!selectedNode) {
-		return (
-			<div className={styles.container}>
-				<div className={styles.emptyState}>Select a node in the tree to view its properties</div>
-			</div>
-		);
-	}
-
-	const renderProperties = () => {
-		switch (selectedNode.type) {
-			case "fetch":
-				return (
-					<FetchOptionsEditor
-						node={selectedNode}
-						onUpdate={(updates) => onNodeUpdate(selectedNode.id, updates)}
-					/>
-				);
-
-			case "entity":
-				return (
-					<div className={styles.section}>
-						<div className={styles.label}>Entity: {selectedNode.name}</div>
-						<div className={styles.emptyState}>
-							Entity properties editor (Phase 5)
-							<br />- enableprefiltering, prefilterparametername
-						</div>
-					</div>
-				);
-
-			case "all-attributes":
-				return (
-					<div className={styles.section}>
-						<div className={styles.label}>All Attributes</div>
-						<div className={styles.emptyState}>All-attributes toggle (Phase 5)</div>
-					</div>
-				);
-
-			case "attribute":
-				return (
-					<AttributeEditor
-						node={selectedNode}
-						entityName={findParentEntity(selectedNode.id) ?? ""}
-						onUpdate={(updates) => onNodeUpdate(selectedNode.id, updates)}
-						isAggregateQuery={fetchQuery?.options.aggregate ?? false}
-					/>
-				);
-
-			case "order":
-				return (
-					<OrderEditor
-						node={selectedNode}
-						entityName={findParentEntity(selectedNode.id) ?? ""}
-						fetchQuery={fetchQuery ?? null}
-						onUpdate={(updates) => onNodeUpdate(selectedNode.id, updates)}
-					/>
-				);
-
-			case "filter":
-				return (
-					<FilterEditor
-						node={selectedNode}
-						onUpdate={(updates) => onNodeUpdate(selectedNode.id, updates)}
-					/>
-				);
-
-			case "condition":
-				return (
-					<ConditionEditor
-						node={selectedNode}
-						entityName={findParentEntity(selectedNode.id) ?? ""}
-						onUpdate={(updates) => onNodeUpdate(selectedNode.id, updates)}
-						isAggregateQuery={fetchQuery?.options.aggregate ?? false}
-						fetchQuery={fetchQuery}
-					/>
-				);
-
-			case "link-entity":
-				return (
-					<LinkEntityEditor
-						node={selectedNode}
-						parentEntityName={findParentEntity(selectedNode.id) ?? ""}
-						onUpdate={(updates) => onNodeUpdate(selectedNode.id, updates)}
-					/>
-				);
-
-			default:
-				return <div className={styles.emptyState}>Unknown node type</div>;
-		}
-	};
-
-	return <div className={styles.container}>{renderProperties()}</div>;
-}