@mohsinonxrm/pptb-fetchxml-studio 1.0.0

package/src/features/fetchxml/ui/Toolbar/LoadViewPicker.tsx

@@ -0,0 +1,274 @@
+/**
+ * LoadViewPicker - Grouped combobox for selecting System or Personal Views
+ * Only visible when root entity is selected in tree
+ * Fetches views for the selected entity and allows loading view's FetchXML into the tree
+ */
+
+import { useState, useEffect, useMemo, useCallback, type ChangeEvent } from "react";
+import {
+	Combobox,
+	Option,
+	OptionGroup,
+	makeStyles,
+	Spinner,
+	tokens,
+	type ComboboxProps,
+} from "@fluentui/react-components";
+import {
+	getAllViews,
+	type SavedView,
+	type EntityMetadata,
+	type LoadedViewInfo,
+} from "../../api/pptbClient";
+import { debugLog } from "../../../../shared/utils/debug";
+
+const useStyles = makeStyles({
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "4px",
+		flex: 1,
+		minWidth: "200px",
+		maxWidth: "350px",
+	},
+	label: {
+		fontSize: "14px",
+		fontWeight: 600,
+		color: tokens.colorNeutralForeground2,
+	},
+	combobox: {
+		width: "100%",
+	},
+	loadingOption: {
+		display: "flex",
+		alignItems: "center",
+		gap: "8px",
+		padding: "8px",
+	},
+	noViewsOption: {
+		fontStyle: "italic",
+		color: tokens.colorNeutralForeground3,
+	},
+	defaultBadge: {
+		fontSize: "10px",
+		backgroundColor: tokens.colorBrandBackground,
+		color: tokens.colorNeutralForegroundOnBrand,
+		padding: "1px 4px",
+		borderRadius: "4px",
+		marginLeft: "6px",
+	},
+});
+
+interface LoadViewPickerProps {
+	/** Currently selected entity metadata (with ObjectTypeCode) */
+	selectedEntityMetadata: EntityMetadata | null;
+	/** Callback when a view is selected - provides the view info for execution optimization */
+	onViewSelect: (viewInfo: LoadedViewInfo) => void;
+	/** Callback when the view selection is cleared */
+	onViewClear?: () => void;
+	/** Optional: disable the picker */
+	disabled?: boolean;
+}
+
+export function LoadViewPicker({
+	selectedEntityMetadata,
+	onViewSelect,
+	onViewClear,
+	disabled = false,
+}: LoadViewPickerProps) {
+	const styles = useStyles();
+
+	// State for views
+	const [systemViews, setSystemViews] = useState<SavedView[]>([]);
+	const [personalViews, setPersonalViews] = useState<SavedView[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	// Combobox state - track both input value and selected view name
+	const [inputValue, setInputValue] = useState("");
+	const [selectedViewName, setSelectedViewName] = useState<string | null>(null);
+
+	// Fetch views when entity changes
+	useEffect(() => {
+		if (!selectedEntityMetadata) {
+			setSystemViews([]);
+			setPersonalViews([]);
+			setError(null);
+			setSelectedViewName(null);
+			setInputValue("");
+			return;
+		}
+
+		const fetchViews = async () => {
+			setLoading(true);
+			setError(null);
+			setSelectedViewName(null);
+			setInputValue("");
+
+			try {
+				debugLog("viewAPI", `Loading views for ${selectedEntityMetadata.LogicalName}`);
+
+				const { systemViews: sysViews, personalViews: persViews } = await getAllViews(
+					selectedEntityMetadata.LogicalName
+				);
+
+				setSystemViews(sysViews);
+				setPersonalViews(persViews);
+
+				debugLog(
+					"viewAPI",
+					`Loaded ${sysViews.length} system views and ${persViews.length} personal views`
+				);
+			} catch (err) {
+				const message = err instanceof Error ? err.message : "Failed to load views";
+				setError(message);
+				console.error("LoadViewPicker: Failed to fetch views:", err);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchViews();
+	}, [selectedEntityMetadata]);
+
+	// Combine all views for filtering
+	const allViews = useMemo(() => {
+		return [...systemViews, ...personalViews];
+	}, [systemViews, personalViews]);
+
+	// Filter options based on input value (only when typing, not when showing selected)
+	const filterQuery = inputValue && inputValue !== selectedViewName ? inputValue : "";
+
+	const filteredSystemViews = useMemo(() => {
+		if (!filterQuery.trim()) return systemViews;
+		const lowerQuery = filterQuery.toLowerCase();
+		return systemViews.filter((v) => v.name.toLowerCase().includes(lowerQuery));
+	}, [systemViews, filterQuery]);
+
+	const filteredPersonalViews = useMemo(() => {
+		if (!filterQuery.trim()) return personalViews;
+		const lowerQuery = filterQuery.toLowerCase();
+		return personalViews.filter((v) => v.name.toLowerCase().includes(lowerQuery));
+	}, [personalViews, filterQuery]);
+
+	// Handle selection
+	const handleOptionSelect = useCallback<NonNullable<ComboboxProps["onOptionSelect"]>>(
+		(_event, data) => {
+			// Handle clear action - when clearable button is clicked, optionValue is empty
+			if (!data.optionValue) {
+				setSelectedViewName(null);
+				setInputValue("");
+				onViewClear?.();
+				debugLog("viewAPI", "View selection cleared");
+				return;
+			}
+
+			if (!selectedEntityMetadata) return;
+
+			const view = allViews.find((v) => v.id === data.optionValue);
+			if (view) {
+				// Create LoadedViewInfo with all needed data for execution optimization
+				const viewInfo: LoadedViewInfo = {
+					id: view.id,
+					type: view.type,
+					originalFetchXml: view.fetchxml,
+					entitySetName: selectedEntityMetadata.EntitySetName,
+					name: view.name,
+					layoutxml: view.layoutxml, // Include layoutxml for column configuration
+				};
+				onViewSelect(viewInfo);
+				debugLog("viewAPI", `Selected view: ${view.name} (${view.type}) - ID: ${view.id}`);
+				// Set the selected view name to display in the combobox
+				setSelectedViewName(view.name);
+				setInputValue(view.name);
+			}
+		},
+		[allViews, onViewSelect, onViewClear, selectedEntityMetadata]
+	);
+
+	// Handle input change for filtering
+	const handleInputChange = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) => {
+			setInputValue(event.target.value);
+			// Clear selection when user starts typing something different
+			if (event.target.value !== selectedViewName) {
+				setSelectedViewName(null);
+			}
+		},
+		[selectedViewName]
+	);
+
+	// Don't render if no entity selected
+	if (!selectedEntityMetadata) {
+		return null;
+	}
+
+	const hasViews = systemViews.length > 0 || personalViews.length > 0;
+	const hasFilteredViews = filteredSystemViews.length > 0 || filteredPersonalViews.length > 0;
+
+	return (
+		<div className={styles.container}>
+			<label className={styles.label}>Load View</label>
+			<Combobox
+				className={styles.combobox}
+				placeholder={loading ? "Loading views..." : "Select a view to load"}
+				disabled={disabled || loading || !hasViews}
+				value={inputValue}
+				onChange={handleInputChange}
+				onOptionSelect={handleOptionSelect}
+				clearable={!!selectedViewName}
+				freeform
+			>
+				{loading && (
+					<Option key="loading" value="" text="Loading..." disabled>
+						<div className={styles.loadingOption}>
+							<Spinner size="tiny" />
+							<span>Loading views...</span>
+						</div>
+					</Option>
+				)}
+
+				{!loading && error && (
+					<Option key="error" value="" text="Error" disabled>
+						<span style={{ color: tokens.colorPaletteRedForeground1 }}>{error}</span>
+					</Option>
+				)}
+
+				{!loading && !error && !hasViews && (
+					<Option key="no-views" value="" text="No views available" disabled>
+						<span className={styles.noViewsOption}>No views available</span>
+					</Option>
+				)}
+
+				{!loading && !error && hasViews && !hasFilteredViews && filterQuery && (
+					<Option key="no-match" value="" text="No matching views" disabled>
+						<span className={styles.noViewsOption}>No matching views</span>
+					</Option>
+				)}
+
+				{!loading && !error && filteredSystemViews.length > 0 && (
+					<OptionGroup label="System Views">
+						{filteredSystemViews.map((view) => (
+							<Option key={view.id} value={view.id} text={view.name}>
+								<span>
+									{view.name}
+									{view.isDefault && <span className={styles.defaultBadge}>Default</span>}
+								</span>
+							</Option>
+						))}
+					</OptionGroup>
+				)}
+
+				{!loading && !error && filteredPersonalViews.length > 0 && (
+					<OptionGroup label="Personal Views">
+						{filteredPersonalViews.map((view) => (
+							<Option key={view.id} value={view.id} text={view.name}>
+								{view.name}
+							</Option>
+						))}
+					</OptionGroup>
+				)}
+			</Combobox>
+		</div>
+	);
+}

package/src/features/fetchxml/ui/Toolbar/SaveViewButton.tsx

@@ -0,0 +1,174 @@
+/**
+ * SaveViewButton - SplitButton for saving views to Dataverse
+ * Supports Save, Save As, and Save and Publish actions
+ * Handles both System Views (savedquery) and Personal Views (userquery)
+ */
+
+import { useState, useCallback } from "react";
+import {
+	Menu,
+	MenuTrigger,
+	MenuList,
+	MenuItem,
+	MenuPopover,
+	SplitButton,
+	makeStyles,
+	tokens,
+	Tooltip,
+	type MenuButtonProps,
+} from "@fluentui/react-components";
+import { SaveRegular, SaveArrowRightRegular, SendRegular } from "@fluentui/react-icons";
+import { SaveViewDialog, type SaveViewDialogMode } from "../Dialogs/SaveViewDialog";
+
+const useStyles = makeStyles({
+	splitButton: {
+		minWidth: "110px",
+	},
+	menuItem: {
+		display: "flex",
+		alignItems: "center",
+		gap: "8px",
+	},
+	menuIcon: {
+		fontSize: "16px",
+		color: tokens.colorNeutralForeground2,
+	},
+});
+
+interface SaveViewButtonProps {
+	/** Current FetchXML to save */
+	fetchXml: string;
+	/** Current LayoutXML configuration */
+	layoutXml: string;
+	/** Entity logical name for the view */
+	entityLogicalName: string;
+	/** Entity object type code for LayoutXML */
+	objectTypeCode: number;
+	/** Primary ID attribute for LayoutXML */
+	primaryIdAttribute: string;
+	/** Loaded view info (for Save/overwrite) */
+	loadedView: {
+		id: string;
+		type: "system" | "personal";
+		name: string;
+	} | null;
+	/** Callback after successful save */
+	onSaveComplete?: (viewId: string, viewType: "system" | "personal", viewName: string) => void;
+	/** Disabled state */
+	disabled?: boolean;
+}
+
+export function SaveViewButton({
+	fetchXml,
+	layoutXml,
+	entityLogicalName,
+	objectTypeCode,
+	primaryIdAttribute,
+	loadedView,
+	onSaveComplete,
+	disabled = false,
+}: SaveViewButtonProps) {
+	const styles = useStyles();
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const [dialogMode, setDialogMode] = useState<SaveViewDialogMode>("save");
+	const [shouldPublish, setShouldPublish] = useState(false);
+
+	const handleSave = useCallback(() => {
+		setShouldPublish(false);
+		setDialogMode("save");
+		setDialogOpen(true);
+	}, []);
+
+	const handleSaveAs = useCallback(() => {
+		setShouldPublish(false);
+		setDialogMode("saveAs");
+		setDialogOpen(true);
+	}, []);
+
+	const handleSaveAndPublish = useCallback(() => {
+		setShouldPublish(true);
+		setDialogMode("save");
+		setDialogOpen(true);
+	}, []);
+
+	const handleDialogClose = useCallback(() => {
+		setDialogOpen(false);
+	}, []);
+
+	const handleDialogSaveComplete = useCallback(
+		(viewId: string, viewType: "system" | "personal", viewName: string) => {
+			setDialogOpen(false);
+			onSaveComplete?.(viewId, viewType, viewName);
+		},
+		[onSaveComplete]
+	);
+
+	// Primary button text based on state
+	const primaryText = loadedView ? "Save" : "Save As";
+	const primaryIcon = loadedView ? <SaveRegular /> : <SaveArrowRightRegular />;
+
+	return (
+		<>
+			<Menu positioning="below-end">
+				<MenuTrigger disableButtonEnhancement>
+					{(triggerProps: MenuButtonProps) => (
+						<Tooltip
+							content={loadedView ? `Save changes to "${loadedView.name}"` : "Save as new view"}
+							relationship="description"
+						>
+							<SplitButton
+								className={styles.splitButton}
+								appearance="primary"
+								icon={primaryIcon}
+								menuButton={triggerProps}
+								primaryActionButton={{
+									onClick: loadedView ? handleSave : handleSaveAs,
+								}}
+								disabled={disabled}
+							>
+								{primaryText}
+							</SplitButton>
+						</Tooltip>
+					)}
+				</MenuTrigger>
+				<MenuPopover>
+					<MenuList>
+						{loadedView && (
+							<MenuItem icon={<SaveRegular className={styles.menuIcon} />} onClick={handleSave}>
+								<span className={styles.menuItem}>Save</span>
+							</MenuItem>
+						)}
+						<MenuItem
+							icon={<SaveArrowRightRegular className={styles.menuIcon} />}
+							onClick={handleSaveAs}
+						>
+							<span className={styles.menuItem}>Save As...</span>
+						</MenuItem>
+						{loadedView?.type === "system" && (
+							<MenuItem
+								icon={<SendRegular className={styles.menuIcon} />}
+								onClick={handleSaveAndPublish}
+							>
+								<span className={styles.menuItem}>Save and Publish</span>
+							</MenuItem>
+						)}
+					</MenuList>
+				</MenuPopover>
+			</Menu>
+
+			<SaveViewDialog
+				open={dialogOpen}
+				onClose={handleDialogClose}
+				onSaveComplete={handleDialogSaveComplete}
+				mode={dialogMode}
+				shouldPublish={shouldPublish}
+				fetchXml={fetchXml}
+				layoutXml={layoutXml}
+				entityLogicalName={entityLogicalName}
+				objectTypeCode={objectTypeCode}
+				primaryIdAttribute={primaryIdAttribute}
+				loadedView={loadedView}
+			/>
+		</>
+	);
+}

package/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { AppShell } from "./app/AppShell";
+// Import debug utility to expose functions to window
+import "./shared/utils/debug";
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<AppShell />
+	</StrictMode>
+);

package/src/shared/components/AttributePicker.tsx

@@ -0,0 +1,138 @@
+/**
+ * Shared Attribute Picker component using Fluent UI v9 Combobox
+ * Loads attributes from metadata and displays as searchable dropdown
+ */
+
+import { useState, useEffect } from "react";
+import { Combobox, useComboboxFilter, useId, type ComboboxProps } from "@fluentui/react-components";
+import { loadEntityAttributes } from "../../features/fetchxml/api/dataverseMetadata";
+import type { AttributeMetadata } from "../../features/fetchxml/api/pptbClient";
+
+interface AttributePickerProps {
+	entityLogicalName: string;
+	value: string;
+	onChange: (logicalName: string) => void;
+	placeholder?: string;
+	disabled?: boolean;
+	/** Filter to only show attributes of these types */
+	filterByTypes?: string[];
+}
+
+export function AttributePicker({
+	entityLogicalName,
+	value,
+	onChange,
+	placeholder = "Select or type attribute name",
+	disabled = false,
+	filterByTypes,
+}: AttributePickerProps) {
+	const comboId = useId("attribute-combobox");
+	const [attributes, setAttributes] = useState<AttributeMetadata[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [query, setQuery] = useState<string>("");
+
+	// Load attributes when entity changes
+	useEffect(() => {
+		if (!entityLogicalName) {
+			setAttributes([]);
+			return;
+		}
+
+		setLoading(true);
+		setError(null);
+
+		loadEntityAttributes(entityLogicalName)
+			.then((attrs: AttributeMetadata[]) => {
+				// Apply type filtering if specified
+				let filteredAttrs = attrs;
+				if (filterByTypes && filterByTypes.length > 0) {
+					filteredAttrs = attrs.filter((a) => filterByTypes.includes(a.AttributeType || ""));
+				}
+				setAttributes(filteredAttrs);
+				setLoading(false);
+			})
+			.catch((err: unknown) => {
+				console.error("Failed to load attributes:", err);
+				setError("Failed to load attributes");
+				setLoading(false);
+			});
+	}, [entityLogicalName, filterByTypes]);
+
+	// Sync query with value when value changes or attributes load
+	useEffect(() => {
+		if (value && value !== "new_attribute" && attributes.length > 0) {
+			const attr = attributes.find((a) => a.LogicalName === value);
+			if (attr) {
+				const displayName = attr.DisplayName?.UserLocalizedLabel?.Label || attr.SchemaName;
+				setQuery(`${displayName} (${attr.LogicalName})`);
+			} else {
+				// If attribute not found in metadata, just show the logical name
+				setQuery(value);
+			}
+		} else if (!value || value === "new_attribute") {
+			setQuery("");
+		}
+	}, [value, attributes]);
+
+	// Convert attributes to options for filtering
+	const options = attributes.map((attr) => {
+		const displayName = attr.DisplayName?.UserLocalizedLabel?.Label || attr.SchemaName;
+		const label = `${displayName} (${attr.LogicalName})`;
+		return {
+			children: label,
+			value: attr.LogicalName,
+		};
+	});
+
+	// Use Fluent UI filtering
+	const filteredChildren = useComboboxFilter(query, options, {
+		noOptionsMessage: "No attributes match your search.",
+	});
+
+	const onOptionSelect: ComboboxProps["onOptionSelect"] = (_e, data) => {
+		if (data.optionValue) {
+			setQuery(data.optionText ?? "");
+			onChange(data.optionValue);
+		} else {
+			// Clear button clicked - clear the attribute
+			setQuery("");
+			onChange("");
+		}
+	};
+
+	// Track the selected option for visual indicator (but don't populate the input)
+	const selectedOptions = value && value !== "new_attribute" ? [value] : [];
+
+	if (error) {
+		// Fallback to regular input on error
+		return (
+			<Combobox
+				aria-labelledby={comboId}
+				value={query}
+				onChange={(ev) => {
+					const inputValue = ev.target.value;
+					setQuery(inputValue);
+					onChange(inputValue);
+				}}
+				placeholder={placeholder}
+				disabled={disabled}
+			/>
+		);
+	}
+
+	return (
+		<Combobox
+			aria-labelledby={comboId}
+			onOptionSelect={onOptionSelect}
+			selectedOptions={selectedOptions}
+			value={query}
+			onChange={(ev) => setQuery(ev.target.value)}
+			placeholder={loading ? "Loading attributes..." : placeholder}
+			disabled={disabled || loading}
+			clearable
+		>
+			{filteredChildren}
+		</Combobox>
+	);
+}