@mohsinonxrm/pptb-fetchxml-studio 1.0.0

package/src/features/fetchxml/ui/RightPane/LayoutXmlViewer.tsx

@@ -0,0 +1,171 @@
+/**
+ * Monaco editor for LayoutXML (read-only)
+ * Displays the LayoutXML that defines column configuration for the grid
+ */
+
+import { useRef, useCallback } from "react";
+import Editor from "@monaco-editor/react";
+import type * as MonacoEditor from "monaco-editor";
+import { makeStyles, Spinner, tokens, Toolbar, ToolbarButton } from "@fluentui/react-components";
+import { Copy24Regular } from "@fluentui/react-icons";
+import { useTheme } from "../../../../shared/contexts/ThemeContext";
+
+const useStyles = makeStyles({
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+		overflow: "hidden",
+	},
+	toolbar: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: "4px 8px",
+		borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+		backgroundColor: tokens.colorNeutralBackground2,
+		flexShrink: 0,
+	},
+	toolbarLeft: {
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacingHorizontalS,
+	},
+	toolbarRight: {
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacingHorizontalS,
+	},
+	editorWrapper: {
+		flex: 1,
+		overflow: "hidden",
+		minHeight: 0,
+	},
+	loadingContainer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "100%",
+		backgroundColor: tokens.colorNeutralBackground1,
+	},
+	label: {
+		fontSize: tokens.fontSizeBase200,
+		fontWeight: tokens.fontWeightSemibold,
+		color: tokens.colorNeutralForeground2,
+	},
+});
+
+interface LayoutXmlViewerProps {
+	/** The LayoutXML string to display */
+	layoutXml: string;
+}
+
+export function LayoutXmlViewer({ layoutXml }: LayoutXmlViewerProps) {
+	const styles = useStyles();
+	const { isDark } = useTheme();
+	const editorRef = useRef<MonacoEditor.editor.IStandaloneCodeEditor | null>(null);
+
+	// Format XML with indentation for better readability
+	const formatXml = (xml: string): string => {
+		if (!xml) return "";
+		try {
+			// Simple XML formatting - add newlines and indentation
+			let formatted = "";
+			let indent = 0;
+			const parts = xml.replace(/>\s*</g, ">\n<").split("\n");
+
+			for (const part of parts) {
+				const trimmed = part.trim();
+				if (!trimmed) continue;
+
+				// Decrease indent for closing tags
+				if (trimmed.startsWith("</")) {
+					indent = Math.max(0, indent - 1);
+				}
+
+				formatted += "  ".repeat(indent) + trimmed + "\n";
+
+				// Increase indent for opening tags (not self-closing)
+				if (
+					trimmed.startsWith("<") &&
+					!trimmed.startsWith("</") &&
+					!trimmed.startsWith("<?") &&
+					!trimmed.endsWith("/>") &&
+					!trimmed.includes("</")
+				) {
+					indent++;
+				}
+			}
+
+			return formatted.trim();
+		} catch {
+			return xml;
+		}
+	};
+
+	const formattedXml = formatXml(layoutXml);
+
+	const handleEditorMount = useCallback((editor: MonacoEditor.editor.IStandaloneCodeEditor) => {
+		editorRef.current = editor;
+	}, []);
+
+	const handleCopy = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(formattedXml);
+		} catch (error) {
+			console.error("Failed to copy to clipboard:", error);
+		}
+	}, [formattedXml]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.toolbar}>
+				<div className={styles.toolbarLeft}>
+					<span className={styles.label}>LayoutXML (Read-only)</span>
+				</div>
+				<Toolbar size="small">
+					<ToolbarButton
+						icon={<Copy24Regular />}
+						onClick={handleCopy}
+						disabled={!layoutXml}
+						aria-label="Copy LayoutXML"
+					>
+						Copy
+					</ToolbarButton>
+				</Toolbar>
+			</div>
+			<div className={styles.editorWrapper}>
+				<Editor
+					height="100%"
+					language="xml"
+					theme={isDark ? "vs-dark" : "vs"}
+					value={formattedXml}
+					options={{
+						readOnly: true,
+						minimap: { enabled: false },
+						lineNumbers: "on",
+						scrollBeyondLastLine: false,
+						wordWrap: "on",
+						fontSize: 13,
+						tabSize: 2,
+						automaticLayout: true,
+						folding: true,
+						renderLineHighlight: "line",
+						scrollbar: {
+							vertical: "visible",
+							horizontal: "visible",
+							verticalScrollbarSize: 10,
+							horizontalScrollbarSize: 10,
+						},
+					}}
+					onMount={handleEditorMount}
+					loading={
+						<div className={styles.loadingContainer}>
+							<Spinner size="medium" label="Loading editor..." />
+						</div>
+					}
+				/>
+			</div>
+		</div>
+	);
+}

package/src/features/fetchxml/ui/RightPane/PreviewTabs.tsx

@@ -0,0 +1,471 @@
+/**
+ * Tabbed preview panel with FetchXML editor and Results grid
+ */
+
+import { useState, useCallback, type ReactNode } from "react";
+import {
+	TabList,
+	Tab,
+	type SelectTabData,
+	type SelectTabEvent,
+	Button,
+	makeStyles,
+	Toolbar,
+	ToolbarDivider,
+	ProgressBar,
+	tokens,
+	MessageBar,
+	MessageBarBody,
+	MessageBarTitle,
+	MessageBarActions,
+} from "@fluentui/react-components";
+import { Play24Regular, Dismiss16Regular, Settings20Regular } from "@fluentui/react-icons";
+import { FetchXmlEditor } from "./FetchXmlEditor";
+import { LayoutXmlViewer } from "./LayoutXmlViewer";
+import { ResultsGrid, type QueryResult, type SortChangeData } from "./ResultsGrid";
+import { ResultsCommandBar } from "./ResultsCommandBar";
+import type { RelatedEntityColumn } from "./AddColumnsPanel";
+import type { AttributeMetadata, RelationshipMetadata } from "../../api/pptbClient";
+import type { FetchNode } from "../../model/nodes";
+import type { ParseResult } from "../../model/fetchxmlParser";
+import type { LayoutXmlConfig } from "../../model/layoutxml";
+import type { WorkflowInfo } from "../../api/pptbClient";
+import type { DisplaySettings } from "../../model/displaySettings";
+
+const useStyles = makeStyles({
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+		overflow: "hidden",
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+		paddingRight: "16px",
+	},
+	progressContainer: {
+		paddingLeft: "16px",
+		paddingRight: "16px",
+		paddingTop: "8px",
+		paddingBottom: "8px",
+		borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+	},
+	tabContent: {
+		flex: 1,
+		overflow: "hidden",
+		padding: "6px",
+		backgroundColor: tokens.colorNeutralBackground3, // Neutral canvas background
+	},
+	// Shared surface card styling (floating cards with shadow)
+	surfaceCard: {
+		borderRadius: tokens.borderRadiusMedium,
+		boxShadow: tokens.shadow16,
+		backgroundColor: tokens.colorNeutralBackground1,
+		border: `1px solid ${tokens.colorNeutralStroke2}`,
+	},
+	// Toolbar card styling
+	toolbarCard: {
+		borderRadius: tokens.borderRadiusMedium,
+		boxShadow: tokens.shadow16,
+		backgroundColor: tokens.colorNeutralBackground1,
+		border: `1px solid ${tokens.colorNeutralStroke2}`,
+		padding: "4px 8px",
+		flexShrink: 0,
+	},
+	// Grid card styling
+	gridCard: {
+		borderRadius: tokens.borderRadiusMedium,
+		boxShadow: tokens.shadow16,
+		backgroundColor: tokens.colorNeutralBackground1,
+		border: `1px solid ${tokens.colorNeutralStroke2}`,
+		display: "flex",
+		flexDirection: "column",
+		flex: 1,
+		minHeight: "240px",
+		minWidth: "480px",
+		overflow: "hidden",
+		marginTop: "8px",
+	},
+	// Code card for FetchXML tab
+	codeCard: {
+		borderRadius: tokens.borderRadiusMedium,
+		boxShadow: tokens.shadow16,
+		backgroundColor: tokens.colorNeutralBackground1,
+		border: `1px solid ${tokens.colorNeutralStroke2}`,
+		height: "100%",
+		display: "flex",
+		flexDirection: "column",
+	},
+	// Results tab layout grid
+	resultsLayout: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+		overflow: "hidden",
+	},
+	messageBarContainer: {
+		paddingLeft: "16px",
+		paddingRight: "16px",
+		paddingTop: "8px",
+		paddingBottom: "8px",
+		borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+	},
+});
+
+interface PreviewTabsProps {
+	xml: string;
+	/** LayoutXML string for the grid column configuration */
+	layoutXml?: string;
+	result: QueryResult | null;
+	isExecuting?: boolean;
+	/** Whether more pages are being loaded (for progress display) */
+	isLoadingMore?: boolean;
+	onExecute?: () => void;
+	/** Export via Dataverse ExportToExcel API */
+	onExport?: () => void;
+	/** Export locally using exceljs */
+	onExportLocal?: () => void;
+	onParseToTree?: (xmlString: string) => ParseResult;
+	/** Multi-entity attribute metadata: Map<entityLogicalName, Map<attributeLogicalName, AttributeMetadata>> */
+	attributeMetadata?: Map<string, Map<string, AttributeMetadata>>;
+	fetchQuery?: FetchNode | null;
+	/** Column layout configuration for ordering and sizing */
+	columnConfig?: LayoutXmlConfig | null;
+	/** Callback when column width changes */
+	onColumnResize?: (columnName: string, width: number) => void;
+	/** Callback when columns are reordered */
+	onReorderColumns?: (columns: LayoutXmlConfig["columns"]) => void;
+	/** Callback when user wants to add a column from available attributes */
+	onAddColumn?: (attributeName: string) => void;
+	/** Callback when user wants to add columns from related entity */
+	onAddRelatedColumns?: (columns: RelatedEntityColumn[]) => void;
+	/** Callback when user removes a column */
+	onRemoveColumn?: (columnName: string) => void;
+	/** Callback when user changes sort on a column */
+	onSortChange?: (data: SortChangeData) => void;
+	/** Optional SaveViewButton to render in the toolbar */
+	saveViewButton?: ReactNode;
+	/** Callback when user scrolls near bottom (infinite scroll) */
+	onLoadMore?: () => void;
+	/** Whether export is available (requires a saved view) */
+	canExport?: boolean;
+	/** Whether export is in progress */
+	isExporting?: boolean;
+	/** Export error message */
+	exportError?: string;
+	/** Callback to dismiss export error */
+	onDismissExportError?: () => void;
+	/** Tooltip text for disabled export button */
+	exportDisabledReason?: string;
+	/** Entity display name */
+	entityDisplayName?: string;
+	/** Lookup relationships for related columns */
+	lookupRelationships?: RelationshipMetadata[];
+	/** One-to-many relationships for 1-N related columns */
+	oneToManyRelationships?: RelationshipMetadata[];
+	/** Whether relationship data is loading */
+	isLoadingRelationships?: boolean;
+	/** Callback to load attributes for a related entity */
+	onLoadRelatedAttributes?: (entityLogicalName: string) => Promise<AttributeMetadata[]>;
+	/** Callback to reset columns to default */
+	onResetToDefault?: () => void;
+	// Record action callbacks
+	/** Callback when user clicks Open (opens record(s) in new tab) */
+	onOpenRecord?: (recordIds: string[]) => void;
+	/** Callback when user clicks Copy URL (copies record URL(s)) */
+	onCopyRecordUrl?: (recordIds: string[]) => void;
+	/** Callback when user clicks Delete */
+	onDeleteRecords?: (recordIds: string[]) => void;
+	/** Callback when user clicks Bulk Delete */
+	onBulkDeleteRecords?: (recordIds: string[]) => void;
+	/** Callback when user clicks Activate */
+	onActivateRecords?: (recordIds: string[]) => void;
+	/** Callback when user clicks Deactivate */
+	onDeactivateRecords?: (recordIds: string[]) => void;
+	/** Callback when user wants to run a specific workflow directly */
+	onRunSpecificWorkflow?: (workflow: WorkflowInfo, recordIds: string[]) => void;
+	/** Whether user can delete records */
+	canDelete?: boolean;
+	/** Whether user can bulk delete records */
+	canBulkDelete?: boolean;
+	/** Whether user can run workflows */
+	canRunWorkflow?: boolean;
+	/** Fetch available workflows for the entity */
+	onFetchWorkflows?: () => Promise<WorkflowInfo[]>;
+	/** Whether the current query is an aggregate query (disables delete/workflow) */
+	isAggregateQuery?: boolean;
+	/** Whether the query has 1-N or N-N relationships that cause row duplication */
+	hasOneToManyRelationship?: boolean;
+	/** Callback when selection changes in ResultsGrid */
+	onSelectionChange?: (recordIds: string[]) => void;
+	/** Callback to get currently selected record IDs */
+	getSelectedRecordIds?: () => string[];
+	/** Callback when user clicks Settings button */
+	onOpenSettings?: () => void;
+	/** Display settings (logical names, value format) */
+	displaySettings?: DisplaySettings;
+}
+
+export function PreviewTabs({
+	xml,
+	layoutXml,
+	result,
+	isExecuting,
+	isLoadingMore,
+	onExecute,
+	onExport,
+	onExportLocal,
+	onParseToTree,
+	attributeMetadata,
+	fetchQuery,
+	columnConfig,
+	onColumnResize,
+	onReorderColumns,
+	onAddColumn,
+	onAddRelatedColumns,
+	onRemoveColumn,
+	onSortChange,
+	saveViewButton,
+	onLoadMore,
+	canExport,
+	isExporting,
+	exportError,
+	onDismissExportError,
+	exportDisabledReason,
+	entityDisplayName,
+	lookupRelationships,
+	oneToManyRelationships,
+	isLoadingRelationships,
+	onLoadRelatedAttributes,
+	onResetToDefault,
+	onOpenRecord,
+	onCopyRecordUrl,
+	onDeleteRecords,
+	onBulkDeleteRecords,
+	onActivateRecords,
+	onDeactivateRecords,
+	onRunSpecificWorkflow,
+	canDelete,
+	canBulkDelete,
+	canRunWorkflow,
+	onFetchWorkflows,
+	isAggregateQuery,
+	hasOneToManyRelationship,
+	onSelectionChange,
+	getSelectedRecordIds,
+	onOpenSettings,
+	displaySettings,
+}: PreviewTabsProps) {
+	const styles = useStyles();
+	const [selectedTab, setSelectedTab] = useState<"xml" | "layout" | "results">("xml");
+	const [toolbarSelectedCount, setToolbarSelectedCount] = useState(0);
+	const [selectedRecordIds, setSelectedRecordIds] = useState<string[]>([]);
+
+	const handleTabSelect = (_event: SelectTabEvent, data: SelectTabData) => {
+		setSelectedTab(data.value as "xml" | "layout" | "results");
+	};
+
+	const handleExecute = () => {
+		// Switch to Results tab when executing
+		setSelectedTab("results");
+		onExecute?.();
+	};
+
+	const handleSelectionChange = useCallback(
+		(recordIds: string[]) => {
+			setSelectedRecordIds(recordIds);
+			// Also notify parent
+			onSelectionChange?.(recordIds);
+		},
+		[onSelectionChange]
+	);
+
+	// If parent provided a getter, use ours; otherwise use internal state
+	const getSelectedIds = useCallback(() => {
+		return getSelectedRecordIds ? getSelectedRecordIds() : selectedRecordIds;
+	}, [getSelectedRecordIds, selectedRecordIds]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<TabList selectedValue={selectedTab} onTabSelect={handleTabSelect}>
+					<Tab value="xml">FetchXML</Tab>
+					<Tab value="layout">LayoutXML</Tab>
+					<Tab value="results">Results</Tab>
+				</TabList>
+				<Toolbar size="small">
+					<Button
+						appearance="primary"
+						icon={<Play24Regular />}
+						onClick={handleExecute}
+						disabled={isExecuting || isLoadingMore || !xml}
+					>
+						{isExecuting ? "Executing..." : "Execute"}
+					</Button>
+					{selectedTab === "xml" && saveViewButton && (
+						<>
+							<ToolbarDivider />
+							{saveViewButton}
+						</>
+					)}
+					<ToolbarDivider />
+					<Button
+						appearance="subtle"
+						icon={<Settings20Regular />}
+						onClick={onOpenSettings}
+						aria-label="Settings"
+					/>
+				</Toolbar>
+			</div>
+			{(isExecuting || isLoadingMore) && (
+				<div className={styles.progressContainer}>
+					<ProgressBar />
+				</div>
+			)}
+			{/* Export status MessageBar */}
+			{isExporting && (
+				<div className={styles.messageBarContainer}>
+					<MessageBar intent="info">
+						<MessageBarBody>
+							<MessageBarTitle>Exporting</MessageBarTitle>
+							Exporting view to Excel...
+						</MessageBarBody>
+					</MessageBar>
+				</div>
+			)}
+			{exportError && !isExporting && (
+				<div className={styles.messageBarContainer}>
+					<MessageBar intent="error">
+						<MessageBarBody>
+							<MessageBarTitle>Export Failed</MessageBarTitle>
+							{exportError}
+						</MessageBarBody>
+						<MessageBarActions
+							containerAction={
+								<Button
+									appearance="transparent"
+									icon={<Dismiss16Regular />}
+									onClick={onDismissExportError}
+									aria-label="Dismiss"
+								/>
+							}
+						/>
+					</MessageBar>
+				</div>
+			)}
+			<div className={styles.tabContent}>
+				{selectedTab === "xml" && (
+					<div className={styles.codeCard}>
+						<FetchXmlEditor xml={xml} onParseToTree={onParseToTree} />
+					</div>
+				)}
+				{selectedTab === "layout" && (
+					<div className={styles.codeCard}>
+						<LayoutXmlViewer layoutXml={layoutXml || ""} />
+					</div>
+				)}
+				{selectedTab === "results" && (
+					<div className={styles.resultsLayout}>
+						<div className={styles.toolbarCard}>
+							<ResultsCommandBar
+								selectedCount={toolbarSelectedCount}
+								onOpen={() => {
+									const ids = getSelectedIds();
+									if (ids?.length && onOpenRecord) {
+										onOpenRecord(ids);
+									}
+								}}
+								onCopyUrl={() => {
+									const ids = getSelectedIds();
+									if (ids?.length && onCopyRecordUrl) {
+										onCopyRecordUrl(ids);
+									}
+								}}
+								onActivate={() => {
+									const ids = getSelectedIds();
+									if (ids?.length && onActivateRecords) {
+										onActivateRecords(ids);
+									}
+								}}
+								onDeactivate={() => {
+									const ids = getSelectedIds();
+									if (ids?.length && onDeactivateRecords) {
+										onDeactivateRecords(ids);
+									}
+								}}
+								onDelete={() => {
+									const ids = getSelectedIds();
+									// For delete, we allow empty selection to trigger "delete all" dialog
+									if (onDeleteRecords) {
+										onDeleteRecords(ids || []);
+									}
+								}}
+								onBulkDelete={() => {
+									const ids = getSelectedIds();
+									if (onBulkDeleteRecords) {
+										onBulkDeleteRecords(ids || []);
+									}
+								}}
+								canDelete={canDelete}
+								canBulkDelete={canBulkDelete}
+								deleteDisabled={isAggregateQuery || hasOneToManyRelationship}
+								onRunSpecificWorkflow={(workflow: WorkflowInfo) => {
+									const ids = getSelectedIds();
+									if (ids?.length && onRunSpecificWorkflow) {
+										onRunSpecificWorkflow(workflow, ids);
+									}
+								}}
+								canRunWorkflow={canRunWorkflow}
+								workflowDisabled={isAggregateQuery || hasOneToManyRelationship}
+								onFetchWorkflows={onFetchWorkflows}
+								onExport={onExport || (() => console.log("Export not yet implemented"))}
+								onExportLocal={onExportLocal}
+								canExport={canExport}
+								isExporting={isExporting}
+								exportDisabledReason={exportDisabledReason}
+								entityName={result?.entityLogicalName}
+								entityDisplayName={entityDisplayName}
+								columns={columnConfig?.columns}
+								onReorderColumns={onReorderColumns}
+								onRemoveColumn={onRemoveColumn}
+								availableAttributes={
+									// Get root entity attributes from multi-entity map
+									attributeMetadata && fetchQuery?.entity?.name
+										? Array.from(attributeMetadata.get(fetchQuery.entity.name)?.values() || [])
+										: undefined
+								}
+								selectedAttributes={fetchQuery?.entity.attributes.map((a) => a.name)}
+								onAddColumn={onAddColumn}
+								onAddRelatedColumns={onAddRelatedColumns}
+								lookupRelationships={lookupRelationships}
+								oneToManyRelationships={oneToManyRelationships}
+								isLoadingRelationships={isLoadingRelationships}
+								onLoadRelatedAttributes={onLoadRelatedAttributes}
+								onResetToDefault={onResetToDefault}
+							/>
+						</div>
+						<div className={styles.gridCard}>
+							<ResultsGrid
+								result={result}
+								isLoading={isExecuting}
+								isLoadingMore={isLoadingMore}
+								attributeMetadata={attributeMetadata}
+								fetchQuery={fetchQuery}
+								onSelectedCountChange={setToolbarSelectedCount}
+								onSelectionChange={handleSelectionChange}
+								columnConfig={columnConfig}
+								onColumnResize={onColumnResize}
+								onSortChange={onSortChange}
+								onLoadMore={onLoadMore}
+								displaySettings={displaySettings}
+							/>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}