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

package/src/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/src/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/src/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/__inherit__card";
+import { Skeleton } from "../../../components/ui/__inherit__skeleton";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/__inherit__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>
+	);
+}

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

@@ -0,0 +1,235 @@
+/**
+ * GlobalSearch Page Component
+ *
+ * Main page component for displaying global search results.
+ * Uses GraphQL API (useRecordListGraphQL) for list data; results are adapted to the
+ * same record shape as before so SearchResultCard and filters/sort/pagination work unchanged.
+ *
+ * @remarks
+ * - Supports single object search (no tabs)
+ * - Displays filters panel on the left and results on the right
+ * - Pagination uses a cursor stack: we only query forward (first + after) and store endCursor per page;
+ *   Previous re-queries using the stored cursor for the previous page so both Next and Previous work.
+ */
+import { useMemo, useState, useCallback, useEffect, useRef } from "react";
+import { useParams } from "react-router";
+import { OBJECT_API_NAMES, DEFAULT_PAGE_SIZE } from "../constants";
+import { useObjectListMetadata } from "../hooks/useObjectSearchData";
+import { useObjectInfoBatch } from "../hooks/useObjectInfoBatch";
+import { useRecordListGraphQL } from "../hooks/useRecordListGraphQL";
+import FiltersPanel from "../components/filters/FiltersPanel";
+import SearchHeader from "../components/search/SearchHeader";
+import SearchResultsPanel from "../components/search/SearchResultsPanel";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/__inherit__card";
+import { Skeleton } from "../../../components/ui/__inherit__skeleton";
+import type { FilterCriteria } from "../types/filters/filters";
+import type { SearchResultRecord } from "../types/search/searchResults";
+import { graphQLNodeToSearchResultRecordData } from "../utils/graphQLRecordAdapter";
+
+const EMPTY_HIGHLIGHT = { fields: {}, snippet: null };
+const EMPTY_SEARCH_INFO = { isPromoted: false, isSpellCorrected: false };
+
+export default function GlobalSearch() {
+	const { query } = useParams<{ query: string }>();
+
+	const objectApiName = OBJECT_API_NAMES[0];
+
+	const [searchPageSize, setSearchPageSize] = useState(DEFAULT_PAGE_SIZE);
+	const [afterCursor, setAfterCursor] = useState<string | null>(null);
+	const [pageIndex, setPageIndex] = useState(0);
+	/** Cursor stack: cursorStack[i] is the `after` value that returns page i. cursorStack[0] = null (first page). */
+	const [cursorStack, setCursorStack] = useState<(string | null)[]>([null]);
+	const [appliedFilters, setAppliedFilters] = useState<FilterCriteria[]>([]);
+	const [sortBy, setSortBy] = useState("Name");
+
+	const decodedQuery = useMemo(() => {
+		if (!query) return "";
+		try {
+			return decodeURIComponent(query);
+		} catch {
+			return query;
+		}
+	}, [query]);
+
+	const isBrowseAll = decodedQuery === "browse__all";
+	const searchQuery = isBrowseAll ? "" : decodedQuery.trim();
+
+	// Reset pagination when the URL search query changes so we don't use an old cursor with a new result set
+	useEffect(() => {
+		queueMicrotask(() => {
+			setAfterCursor(null);
+			setPageIndex(0);
+			setCursorStack([null]);
+		});
+	}, [query]);
+
+	const listMeta = useObjectListMetadata(objectApiName);
+	const { objectInfos } = useObjectInfoBatch([...OBJECT_API_NAMES]);
+	const labelPlural = (objectInfos[0]?.labelPlural as string | undefined) ?? "records";
+	const {
+		edges,
+		pageInfo,
+		loading: resultsLoading,
+		error: resultsError,
+	} = useRecordListGraphQL({
+		objectApiName,
+		first: searchPageSize,
+		after: afterCursor,
+		filters: appliedFilters,
+		sortBy: sortBy === "relevance" ? "Name" : sortBy,
+		searchQuery: searchQuery || undefined,
+		columns: listMeta.columns,
+		columnsLoading: listMeta.loading,
+		columnsError: listMeta.error,
+	});
+
+	// Store endCursor for the next page so we can re-query when user clicks Next; also enables Previous via stack.
+	// Only update when not loading so a stale response cannot write a cursor into the wrong stack index (e.g. after rapid Next clicks).
+	useEffect(() => {
+		if (resultsLoading) return;
+		const cursor = pageInfo?.endCursor ?? null;
+		if (cursor == null) return;
+		queueMicrotask(() => {
+			setCursorStack((prev) => {
+				const next = [...prev];
+				next[pageIndex + 1] = cursor;
+				return next;
+			});
+		});
+	}, [resultsLoading, pageInfo?.endCursor, pageIndex]);
+
+	const results: SearchResultRecord[] = useMemo(
+		() =>
+			(edges ?? []).map((edge) => ({
+				record: graphQLNodeToSearchResultRecordData(
+					edge?.node as Record<string, unknown>,
+					objectApiName,
+				),
+				highlightInfo: EMPTY_HIGHLIGHT,
+				searchInfo: EMPTY_SEARCH_INFO,
+			})),
+		[edges, objectApiName],
+	);
+
+	const nextPageToken = pageInfo?.endCursor ?? null;
+	/** Entry cursor for the previous page; used when user clicks Previous to re-query with after=cursorStack[pageIndex-1]. */
+	const previousPageToken = pageIndex > 0 ? (cursorStack[pageIndex - 1] ?? null) : null;
+	const hasNextPage = pageInfo?.hasNextPage === true;
+	const hasPreviousPage = pageIndex > 0;
+	const currentPageToken = pageIndex.toString();
+
+	const cursorStackRef = useRef(cursorStack);
+	const pageIndexRef = useRef(pageIndex);
+	useEffect(() => {
+		cursorStackRef.current = cursorStack;
+		pageIndexRef.current = pageIndex;
+	}, [cursorStack, pageIndex]);
+
+	const canRenderFilters =
+		!listMeta.loading && listMeta.filters !== undefined && listMeta.picklistValues !== undefined;
+
+	const handleApplyFilters = useCallback((filterCriteria: FilterCriteria[]) => {
+		setAppliedFilters(filterCriteria);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+	}, []);
+
+	const handlePageChange = useCallback(
+		(newPageToken: string, direction?: "next" | "prev" | "first") => {
+			if (direction === "first" || newPageToken === "0") {
+				setAfterCursor(null);
+				setPageIndex(0);
+			} else if (direction === "prev") {
+				const idx = pageIndexRef.current;
+				const stack = cursorStackRef.current;
+				const prevCursor = idx > 0 ? (stack[idx - 1] ?? null) : null;
+				setAfterCursor(prevCursor);
+				setPageIndex((prev) => Math.max(0, prev - 1));
+			} else {
+				setAfterCursor(newPageToken);
+				setPageIndex((prev) => prev + 1);
+			}
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		},
+		[],
+	);
+
+	const handlePageSizeChange = useCallback((newPageSize: number) => {
+		setSearchPageSize(newPageSize);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}, []);
+
+	const handleSortByChange = useCallback((newSortBy: string) => {
+		setSortBy(newSortBy);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}, []);
+
+	return (
+		<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<SearchHeader query={decodedQuery} isBrowseAll={isBrowseAll} labelPlural={labelPlural} />
+
+			<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+				<aside className="lg:col-span-1" aria-label="Filters panel">
+					{canRenderFilters ? (
+						<FiltersPanel
+							filters={listMeta.filters}
+							picklistValues={listMeta.picklistValues}
+							loading={listMeta.loading}
+							objectApiName={objectApiName}
+							onApplyFilters={handleApplyFilters}
+						/>
+					) : (
+						<Card className="w-full" role="region" aria-label="Filters panel">
+							<CardHeader>
+								<CardTitle>Filters</CardTitle>
+							</CardHeader>
+							<CardContent
+								className="space-y-4"
+								role="status"
+								aria-live="polite"
+								aria-label="Loading filters"
+							>
+								<span className="sr-only">Loading filters</span>
+								{[1, 2, 3].map((i) => (
+									<div key={i} className="space-y-2" aria-hidden="true">
+										<Skeleton className="h-4 w-24" />
+										<Skeleton className="h-9 w-full" />
+									</div>
+								))}
+							</CardContent>
+						</Card>
+					)}
+				</aside>
+
+				<section className="lg:col-span-3" aria-label="Search results">
+					<SearchResultsPanel
+						objectApiName={objectApiName}
+						columns={listMeta.columns}
+						results={results}
+						columnsLoading={listMeta.loading}
+						resultsLoading={resultsLoading}
+						columnsError={listMeta.error}
+						resultsError={resultsError}
+						currentPageToken={currentPageToken}
+						nextPageToken={nextPageToken}
+						previousPageToken={previousPageToken}
+						hasNextPage={hasNextPage}
+						hasPreviousPage={hasPreviousPage}
+						pageSize={searchPageSize}
+						sortBy={sortBy}
+						onPageChange={handlePageChange}
+						onPageSizeChange={handlePageSizeChange}
+						onSortByChange={handleSortByChange}
+					/>
+				</section>
+			</div>
+		</main>
+	);
+}