@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_gs_/hooks/useRecordDetailLayout.ts

@@ -1,137 +0,0 @@
-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 (err) {
-				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/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_gs_/hooks/useRecordListGraphQL.ts

@@ -1,135 +0,0 @@
-/**
- * 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;
-		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/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_gs_/pages/DetailPage.tsx

@@ -1,109 +0,0 @@
-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>
-	);
-}

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_gs_/pages/GlobalSearch.tsx

@@ -1,229 +0,0 @@
-/**
- * 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/card";
-import { Skeleton } from "../../../components/ui/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 (e) {
-			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(() => {
-		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;
-		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);
-	cursorStackRef.current = cursorStack;
-	pageIndexRef.current = 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>
-	);
-}