@salesforce/ui-bundle-template-feature-react-global-search 1.117.2

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/hooks/useObjectInfoBatch.ts

@@ -0,0 +1,72 @@
+/**
+ * useObjectInfoBatch
+ *
+ * Fetches object metadata (label, labelPlural, fields, etc.) for the given object API names.
+ * Uses the shared cache in objectInfoService so List, Home, and Detail views reuse one request.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { objectInfoService } from "../api/objectInfoService";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+
+export interface UseObjectInfoBatchResult {
+	/** Object metadata in the same order as the requested objectApiNames. */
+	objectInfos: ObjectInfoResult[];
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Fetches batch object info for the given object API names. Results are cached;
+ * multiple callers (List, Home, Detail) share the same request.
+ *
+ * @param objectApiNames - Array of object API names (e.g. OBJECT_API_NAMES)
+ * @returns objectInfos (same order as input), loading, error
+ */
+export function useObjectInfoBatch(objectApiNames: string[]): UseObjectInfoBatchResult {
+	const [state, setState] = useState<UseObjectInfoBatchResult>({
+		objectInfos: [],
+		loading: objectApiNames.length > 0,
+		error: null,
+	});
+	const isCancelled = useRef(false);
+	// Derive a stable primitive from the array so the effect dependency doesn't
+	// change on every render. A new array reference (even with identical contents)
+	// would otherwise trigger the effect on every render, causing an infinite loop.
+	const namesKey = objectApiNames.filter(Boolean).join(",");
+
+	useEffect(() => {
+		isCancelled.current = false;
+		// Re-derive the array inside the effect from the stable key rather than
+		// closing over objectApiNames directly, which would require it in the dep
+		// array and reintroduce the infinite loop.
+		const names = namesKey ? namesKey.split(",") : [];
+		if (names.length === 0) {
+			queueMicrotask(() => setState({ objectInfos: [], loading: false, error: null }));
+			return;
+		}
+		queueMicrotask(() => setState((s) => ({ ...s, loading: true, error: null })));
+		objectInfoService
+			.getObjectInfoBatch(namesKey)
+			.then((res) => {
+				if (isCancelled.current) return;
+				const objectInfos = names
+					.map((apiName) => res.results?.find((r) => r.result?.ApiName === apiName)?.result)
+					.filter((r) => r != null) as ObjectInfoResult[];
+				setState({ objectInfos, loading: false, error: null });
+			})
+			.catch((err) => {
+				if (isCancelled.current) return;
+				setState({
+					objectInfos: [],
+					loading: false,
+					error: err instanceof Error ? err.message : (err as string),
+				});
+			});
+		return () => {
+			isCancelled.current = true;
+		};
+	}, [namesKey]);
+
+	return state;
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/hooks/useObjectSearchData.ts

@@ -0,0 +1,174 @@
+/**
+ * Object Search Data Hooks
+ *
+ * - useObjectListMetadata: single source for list-view metadata (filters → columns + picklists). Use in list pages to avoid duplicate state and API calls.
+ * - useObjectColumns / useObjectFilters: thin wrappers over useObjectListMetadata for backward compatibility.
+ * - getSharedFilters: module-level deduplication for getObjectListFilters across hook instances.
+ */
+
+import { useState, useEffect } from "react";
+import { objectInfoService } from "../api/objectInfoService";
+import type { Column } from "../types/search/searchResults";
+import type { Filter } from "../types/filters/filters";
+import type { PicklistValue } from "../types/filters/picklist";
+
+// --- Shared filters cache (deduplicates getObjectListFilters across useObjectColumns + useObjectFilters) ---
+const sharedFiltersCache = new Map<string, Filter[]>();
+const sharedFiltersInFlight = new Map<string, Promise<Filter[]>>();
+
+function getSharedFilters(objectApiName: string): Promise<Filter[]> {
+	const cached = sharedFiltersCache.get(objectApiName);
+	if (cached) return Promise.resolve(cached);
+	const inFlight = sharedFiltersInFlight.get(objectApiName);
+	if (inFlight) return inFlight;
+	const promise = objectInfoService
+		.getObjectListFilters(objectApiName)
+		.then((filters) => {
+			sharedFiltersCache.set(objectApiName, filters);
+			sharedFiltersInFlight.delete(objectApiName);
+			return filters;
+		})
+		.catch((err) => {
+			sharedFiltersInFlight.delete(objectApiName);
+			throw err;
+		});
+	sharedFiltersInFlight.set(objectApiName, promise);
+	return promise;
+}
+
+// --- Shared Types ---
+export interface FiltersData {
+	filters: Filter[];
+	picklistValues: Record<string, PicklistValue[]>;
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Derives column definitions from filter definitions for list/result UI.
+ */
+function filtersToColumns(filters: Filter[]): Column[] {
+	return filters.map((f) => ({
+		fieldApiName: f.targetFieldPath,
+		label: f.label,
+		searchable: true,
+		sortable: true,
+	}));
+}
+
+export interface ObjectListMetadata {
+	columns: Column[];
+	filters: Filter[];
+	picklistValues: Record<string, PicklistValue[]>;
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Single hook for list-view metadata: filters (shared API), derived columns, and picklist values.
+ * Use this in list/search pages to avoid duplicate useObjectColumns + useObjectFilters and duplicate state.
+ */
+export function useObjectListMetadata(objectApiName: string | null): ObjectListMetadata {
+	const [state, setState] = useState<{
+		columns: Column[];
+		filters: Filter[];
+		picklistValues: Record<string, PicklistValue[]>;
+		loading: boolean;
+		error: string | null;
+	}>({
+		columns: [],
+		filters: [],
+		picklistValues: {},
+		loading: true,
+		error: null,
+	});
+
+	useEffect(() => {
+		if (!objectApiName) {
+			queueMicrotask(() => setState((s) => ({ ...s, loading: false, error: "Invalid object" })));
+			return;
+		}
+
+		let isCancelled = false;
+
+		const run = async () => {
+			queueMicrotask(() => setState((s) => ({ ...s, loading: true, error: null })));
+			try {
+				const filters = await getSharedFilters(objectApiName!);
+				if (isCancelled) return;
+
+				const selectFilters = filters.filter((f) => f.affordance?.toLowerCase() === "select");
+				const picklistPromises = selectFilters.map((f) =>
+					objectInfoService
+						.getPicklistValues(objectApiName!, f.targetFieldPath)
+						.then((values) => ({ fieldPath: f.targetFieldPath, values }))
+						.catch(() => ({ fieldPath: f.targetFieldPath, values: [] as PicklistValue[] })),
+				);
+				const picklistResults = await Promise.all(picklistPromises);
+				if (isCancelled) return;
+
+				const picklistValues: Record<string, PicklistValue[]> = {};
+				picklistResults.forEach(({ fieldPath, values }) => {
+					picklistValues[fieldPath] = values;
+				});
+
+				setState({
+					columns: filtersToColumns(filters),
+					filters,
+					picklistValues,
+					loading: false,
+					error: null,
+				});
+			} catch {
+				if (isCancelled) return;
+				setState((s) => ({
+					...s,
+					columns: [],
+					filters: [],
+					picklistValues: {},
+					loading: false,
+					error: "Failed to load list metadata",
+				}));
+			}
+		};
+
+		run();
+		return () => {
+			isCancelled = true;
+		};
+	}, [objectApiName]);
+
+	return state;
+}
+
+/**
+ * Hook: useObjectColumns
+ * Thin wrapper over useObjectListMetadata for backward compatibility.
+ */
+export function useObjectColumns(objectApiName: string | null) {
+	const { columns, loading, error } = useObjectListMetadata(objectApiName);
+	return {
+		columns: objectApiName ? columns : [],
+		columnsLoading: loading,
+		columnsError: error,
+	};
+}
+
+/**
+ * Hook: useObjectFilters
+ * Thin wrapper over useObjectListMetadata for backward compatibility.
+ */
+export function useObjectFilters(objectApiName: string | null) {
+	const { filters, picklistValues, loading, error } = useObjectListMetadata(objectApiName);
+	const filtersData: Record<string, FiltersData> = objectApiName
+		? {
+				[objectApiName]: {
+					filters,
+					picklistValues,
+					loading,
+					error,
+				},
+			}
+		: {};
+	return { filtersData };
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/hooks/useRecordDetailLayout.ts

@@ -0,0 +1,137 @@
+import { useState, useEffect, useRef } from "react";
+import { objectDetailService } from "../api/objectDetailService";
+import type { LayoutResponse } from "../types/recordDetail/recordDetail";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+import type { GraphQLRecordNode } from "../api/recordListGraphQLService";
+
+export interface UseRecordDetailLayoutReturn {
+	layout: LayoutResponse | null;
+	record: GraphQLRecordNode | null;
+	objectMetadata: ObjectInfoResult | null;
+	loading: boolean;
+	error: string | null;
+}
+
+export interface UseRecordDetailLayoutParams {
+	objectApiName: string | null;
+	recordId: string | null;
+	recordTypeId?: string | null;
+	initialData?: {
+		layout: LayoutResponse;
+		record: GraphQLRecordNode;
+		objectMetadata: ObjectInfoResult;
+	} | null;
+}
+
+const MAX_CACHE_SIZE = 50;
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+type CacheEntry = {
+	layout: LayoutResponse;
+	record: GraphQLRecordNode;
+	objectMetadata: ObjectInfoResult;
+	cachedAt: number;
+};
+
+export function useRecordDetailLayout({
+	objectApiName,
+	recordId,
+	recordTypeId = null,
+	initialData = null,
+}: UseRecordDetailLayoutParams): UseRecordDetailLayoutReturn {
+	const [layout, setLayout] = useState<LayoutResponse | null>(initialData?.layout ?? null);
+	const [record, setRecord] = useState<GraphQLRecordNode | null>(initialData?.record ?? null);
+	const [objectMetadata, setObjectMetadata] = useState<ObjectInfoResult | null>(
+		initialData?.objectMetadata ?? null,
+	);
+	const [loading, setLoading] = useState(!initialData);
+	const [error, setError] = useState<string | null>(null);
+
+	const cacheKey =
+		objectApiName && recordId ? `${objectApiName}:${recordId}:${recordTypeId ?? "default"}` : null;
+	const cacheRef = useRef<Map<string, CacheEntry>>(new Map());
+
+	useEffect(() => {
+		if (!objectApiName || !recordId) {
+			setError("Invalid object or record ID");
+			setLoading(false);
+			return;
+		}
+
+		if (
+			initialData?.layout != null &&
+			initialData?.record != null &&
+			initialData?.objectMetadata != null
+		) {
+			return;
+		}
+
+		const cached = cacheRef.current.get(cacheKey!);
+		const now = Date.now();
+		if (cached && now - cached.cachedAt < CACHE_TTL_MS) {
+			setLayout(cached.layout);
+			setRecord(cached.record);
+			setObjectMetadata(cached.objectMetadata);
+			setLoading(false);
+			setError(null);
+			return;
+		}
+
+		let isCancelled = false;
+
+		const fetchDetail = async () => {
+			setLoading(true);
+			setError(null);
+
+			try {
+				const {
+					layout: layoutData,
+					record: recordData,
+					objectMetadata: objectMetadataData,
+				} = await objectDetailService.getRecordDetail(
+					objectApiName,
+					recordId,
+					recordTypeId ?? undefined,
+				);
+
+				if (isCancelled) return;
+
+				const cache = cacheRef.current;
+				if (cache.size >= MAX_CACHE_SIZE) {
+					const firstKey = cache.keys().next().value;
+					if (firstKey != null) cache.delete(firstKey);
+				}
+				cache.set(cacheKey!, {
+					layout: layoutData,
+					record: recordData,
+					objectMetadata: objectMetadataData,
+					cachedAt: Date.now(),
+				});
+				setLayout(layoutData);
+				setRecord(recordData);
+				setObjectMetadata(objectMetadataData);
+			} catch {
+				if (isCancelled) return;
+				setError("Failed to load record details");
+			} finally {
+				if (!isCancelled) {
+					setLoading(false);
+				}
+			}
+		};
+
+		fetchDetail();
+
+		return () => {
+			isCancelled = true;
+		};
+	}, [objectApiName, recordId, recordTypeId, cacheKey, initialData]);
+
+	return {
+		layout,
+		record,
+		objectMetadata,
+		loading,
+		error,
+	};
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/hooks/useRecordListGraphQL.ts

@@ -0,0 +1,135 @@
+/**
+ * Record list hook: GraphQL records with filter, sort, pagination, search.
+ * Use for list/search views; detail view uses useRecordDetailLayout instead.
+ *
+ * @module hooks/useRecordListGraphQL
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { useObjectColumns } from "./useObjectSearchData";
+import {
+	getRecordsGraphQL,
+	buildOrderByFromSort,
+	type RecordListGraphQLResult,
+} from "../api/recordListGraphQLService";
+import type { Column } from "../types/search/searchResults";
+import type { FilterCriteria } from "../types/filters/filters";
+
+const EMPTY_FILTERS: FilterCriteria[] = [];
+
+export interface UseRecordListGraphQLOptions {
+	objectApiName: string;
+	first?: number;
+	after?: string | null;
+	filters?: FilterCriteria[];
+	sortBy?: string;
+	searchQuery?: string;
+	/** When provided, skips useObjectColumns (use from parent e.g. useObjectListMetadata). */
+	columns?: Column[];
+	columnsLoading?: boolean;
+	columnsError?: string | null;
+}
+
+export interface UseRecordListGraphQLReturn {
+	data: RecordListGraphQLResult | null;
+	edges: Array<{ node?: Record<string, unknown> }>;
+	pageInfo: {
+		hasNextPage?: boolean;
+		hasPreviousPage?: boolean;
+		endCursor?: string | null;
+		startCursor?: string | null;
+	} | null;
+	loading: boolean;
+	error: string | null;
+	columnsLoading: boolean;
+	columnsError: string | null;
+	refetch: () => void;
+}
+
+/**
+ * Fetches records via GraphQL for the given object with filter, sort, pagination, and search.
+ */
+export function useRecordListGraphQL(
+	options: UseRecordListGraphQLOptions,
+): UseRecordListGraphQLReturn {
+	const {
+		objectApiName,
+		first = 50,
+		after = null,
+		filters = EMPTY_FILTERS,
+		sortBy = "",
+		searchQuery = "",
+		columns: columnsProp,
+		columnsLoading: columnsLoadingProp,
+		columnsError: columnsErrorProp,
+	} = options;
+
+	const fromParent = columnsProp !== undefined;
+	const fromHook = useObjectColumns(fromParent ? null : objectApiName);
+
+	const columns = fromParent ? columnsProp : fromHook.columns;
+	const columnsLoading = fromParent ? (columnsLoadingProp ?? false) : fromHook.columnsLoading;
+	const columnsError = fromParent ? (columnsErrorProp ?? null) : fromHook.columnsError;
+
+	const [data, setData] = useState<RecordListGraphQLResult | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const fetchRecords = useCallback(() => {
+		if (columnsLoading || columnsError || columns.length === 0) return;
+
+		setLoading(true);
+		setError(null);
+		const orderBy = buildOrderByFromSort(sortBy);
+
+		getRecordsGraphQL({
+			objectApiName,
+			columns,
+			first,
+			after,
+			filters,
+			orderBy,
+			searchQuery: searchQuery.trim() || undefined,
+		})
+			.then((result) => {
+				setData(result);
+			})
+			.catch((err) => {
+				setError(err instanceof Error ? err.message : "Failed to load records");
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	}, [
+		objectApiName,
+		columns,
+		columnsLoading,
+		columnsError,
+		first,
+		after,
+		filters,
+		sortBy,
+		searchQuery,
+	]);
+
+	useEffect(() => {
+		if (!objectApiName || columnsLoading || columnsError) return;
+		if (columns.length === 0 && !columnsLoading) return;
+		queueMicrotask(() => fetchRecords());
+	}, [objectApiName, columns, columnsLoading, columnsError, fetchRecords]);
+
+	const objectData = data?.uiapi?.query?.[objectApiName];
+	const edges = objectData?.edges ?? [];
+	const pageInfo = objectData?.pageInfo ?? null;
+
+	return {
+		data,
+		edges,
+		pageInfo,
+		loading: columnsLoading || loading,
+		error: columnsError || error,
+		columnsLoading,
+		columnsError,
+		refetch: fetchRecords,
+	};
+}

package/dist/force-app/main/default/uiBundles/feature-react-global-search/src/features/global-search/pages/DetailPage.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from "react";
+import { useParams, useNavigate } from "react-router";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import DetailHeader from "../components/detail/DetailHeader";
+import { UiApiDetailForm } from "../components/detail/UiApiDetailForm";
+import { OBJECT_API_NAMES, DEFAULT_DETAIL_PAGE_TITLE } from "../constants";
+import { toRecordDisplayNameMetadata } from "../utils/fieldUtils";
+import { useRecordDetailLayout } from "../hooks/useRecordDetailLayout";
+import { getGraphQLRecordDisplayName } from "../utils/graphQLNodeFieldUtils";
+
+export default function DetailPage() {
+	const { objectApiName: objectApiNameParam, recordId } = useParams<{
+		objectApiName: string;
+		recordId: string;
+	}>();
+	const navigate = useNavigate();
+	const objectApiName = objectApiNameParam ?? OBJECT_API_NAMES[0];
+
+	const { layout, record, objectMetadata, loading, error } = useRecordDetailLayout({
+		objectApiName,
+		recordId: recordId ?? null,
+	});
+
+	const recordTitle = useMemo(
+		() =>
+			record
+				? getGraphQLRecordDisplayName(record, toRecordDisplayNameMetadata(objectMetadata))
+				: DEFAULT_DETAIL_PAGE_TITLE,
+		[record, objectMetadata],
+	);
+
+	const handleBack = () => navigate(-1);
+
+	if (loading) {
+		return (
+			<div
+				className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
+				role="status"
+				aria-live="polite"
+				aria-label="Loading record details"
+			>
+				<span className="sr-only">Loading record details</span>
+				<Skeleton className="h-10 w-32 mb-6" aria-hidden="true" />
+				<Card aria-hidden="true">
+					<CardHeader>
+						<Skeleton className="h-8 w-3/4" />
+					</CardHeader>
+					<CardContent className="space-y-4">
+						{[1, 2, 3, 4].map((i) => (
+							<div key={i} className="space-y-2">
+								<Skeleton className="h-4 w-24" />
+								<Skeleton className="h-4 w-full" />
+							</div>
+						))}
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+				<DetailHeader title="" onBack={handleBack} />
+				<Alert variant="destructive" role="alert">
+					<AlertCircle className="h-4 w-4" aria-hidden="true" />
+					<AlertTitle>Error</AlertTitle>
+					<AlertDescription>{error}</AlertDescription>
+				</Alert>
+			</div>
+		);
+	}
+
+	if (!layout || !record) {
+		return (
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+				<DetailHeader title="" onBack={handleBack} />
+				<Alert role="alert">
+					<AlertCircle className="h-4 w-4" aria-hidden="true" />
+					<AlertTitle>Not Found</AlertTitle>
+					<AlertDescription>Record not found</AlertDescription>
+				</Alert>
+			</div>
+		);
+	}
+
+	return (
+		<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12" aria-label="Record details">
+			<DetailHeader title={recordTitle} onBack={handleBack} />
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-2xl">{recordTitle}</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<UiApiDetailForm
+						objectApiName={objectApiName}
+						recordId={recordId!}
+						layout={layout}
+						record={record}
+						objectMetadata={objectMetadata}
+					/>
+				</CardContent>
+			</Card>
+		</main>
+	);
+}