@salesforce/webapp-template-app-react-sample-b2e-experimental 1.72.0 → 1.73.1

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/VerticalNav.tsx

@@ -4,6 +4,7 @@ import dashboardIcon from "../assets/icons/dashboard.svg";
 import filesIcon from "../assets/icons/files.svg";
 import propertiesIcon from "../assets/icons/properties.svg";
 import maintenanceIcon from "../assets/icons/maintenance.svg";
+import { PATHS } from "../lib/routeConfig.js";
 
 interface NavItem {
 	path: string;
@@ -12,10 +13,11 @@ interface NavItem {
 }
 
 const navItems: NavItem[] = [
-	{ path: "/", icon: dashboardIcon, label: "Dashboard" },
-	{ path: "/applications", icon: filesIcon, label: "Applications" },
-	{ path: "/properties", icon: propertiesIcon, label: "Properties" },
-	{ path: "/maintenance", icon: maintenanceIcon, label: "Maintenance" },
+	{ path: PATHS.HOME, icon: dashboardIcon, label: "Dashboard" },
+	{ path: PATHS.APPLICATIONS, icon: filesIcon, label: "Applications" },
+	{ path: PATHS.PROPERTIES, icon: propertiesIcon, label: "Properties" },
+	{ path: PATHS.MAINTENANCE_REQUESTS, icon: maintenanceIcon, label: "Maintenance Requests" },
+	{ path: PATHS.MAINTENANCE_WORKERS, icon: maintenanceIcon, label: "Maintenance Workers" },
 ];
 
 export const VerticalNav: React.FC = () => {

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/dashboard/GlobalSearchBar.tsx

@@ -0,0 +1,125 @@
+import type { ObjectInfoResult } from "@salesforce/webapp-template-feature-react-global-search-experimental";
+import type { SearchableObjectConfig } from "../../lib/globalSearchConstants.js";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+
+type SearchableObjectApiName = SearchableObjectConfig["objectApiName"];
+
+interface GlobalSearchBarProps {
+	objectApiNames: SearchableObjectApiName[];
+	objectInfos: (ObjectInfoResult | null)[];
+	searchableObjects: readonly SearchableObjectConfig[];
+	selectedObjectApiName: SearchableObjectApiName;
+	onSelectedObjectChange: (objectApiName: SearchableObjectApiName) => void;
+	searchQuery: string;
+	onSearchQueryChange: (value: string) => void;
+	onSearchSubmit: () => void;
+	onBrowseAll: () => void;
+	labelPlural: string;
+}
+
+/**
+ * Home page search: object dropdown + search input in a single combined control.
+ * Uses shadcn Select and object metadata for labels when available.
+ */
+export function GlobalSearchBar({
+	searchableObjects,
+	objectApiNames,
+	objectInfos,
+	selectedObjectApiName,
+	onSelectedObjectChange,
+	searchQuery,
+	onSearchQueryChange,
+	onSearchSubmit,
+	onBrowseAll,
+	labelPlural,
+}: GlobalSearchBarProps) {
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onSearchSubmit();
+		}
+	};
+
+	return (
+		<div className="flex flex-wrap justify-end gap-2 items-center mb-4">
+			<div
+				className="w-full max-w-xl bg-white rounded-full px-4 py-3 shadow-sm border border-gray-200 flex items-center gap-2"
+				role="search"
+				aria-label={`Search ${labelPlural}`}
+			>
+				<Select
+					value={selectedObjectApiName}
+					onValueChange={(v) => onSelectedObjectChange(v as SearchableObjectApiName)}
+				>
+					<SelectTrigger
+						className="border-0 bg-transparent shadow-none focus:ring-0 focus:ring-offset-0 min-w-[120px] py-0 h-auto font-medium text-gray-700"
+						aria-label="Search in"
+					>
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
+						{searchableObjects.map((obj) => {
+							const idx = objectApiNames.indexOf(obj.objectApiName);
+							const info = idx >= 0 ? objectInfos[idx] : null;
+							const label =
+								(info?.labelPlural as string | undefined) ?? obj.fallbackLabelPlural ?? "Records";
+							return (
+								<SelectItem key={obj.objectApiName} value={obj.objectApiName}>
+									{label}
+								</SelectItem>
+							);
+						})}
+					</SelectContent>
+				</Select>
+				<span className="text-gray-300 shrink-0" aria-hidden="true">
+					|
+				</span>
+				<input
+					type="search"
+					placeholder={`Search ${labelPlural}`}
+					value={searchQuery}
+					onChange={(e) => onSearchQueryChange(e.target.value)}
+					onKeyDown={handleKeyDown}
+					className="flex-1 outline-none text-gray-600 bg-transparent min-w-0"
+					aria-label={`Search ${labelPlural}`}
+				/>
+				<button
+					type="button"
+					onClick={onSearchSubmit}
+					disabled={!searchQuery.trim()}
+					className="p-1 rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none shrink-0"
+					aria-label="Submit search"
+				>
+					<svg
+						className="w-5 h-5 text-gray-500"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+				</button>
+			</div>
+			<button
+				type="button"
+				onClick={onBrowseAll}
+				className="px-4 py-3 text-sm font-medium text-[#372949] bg-white border border-gray-200 rounded-full shadow-sm hover:bg-gray-50 whitespace-nowrap"
+				aria-label={`Browse all ${labelPlural}`}
+			>
+				Browse all {labelPlural}
+			</button>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/feedback/FilterErrorAlert.tsx

@@ -0,0 +1,15 @@
+interface FilterErrorAlertProps {
+	message: string;
+}
+
+/** Inline alert for filter validation errors (e.g. range min > max). Announced to screen readers. */
+export function FilterErrorAlert({ message }: FilterErrorAlertProps) {
+	return (
+		<div
+			role="alert"
+			className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md px-4 py-2"
+		>
+			{message}
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/feedback/PageErrorState.tsx

@@ -0,0 +1,19 @@
+interface PageErrorStateProps {
+	message: string;
+}
+
+/**
+ * Full-page error state when list or metadata fails to load.
+ * Uses role="alert" so screen readers announce the error.
+ */
+export function PageErrorState({ message }: PageErrorStateProps) {
+	return (
+		<div
+			className="flex justify-center items-center min-h-[200px] bg-gray-50"
+			role="alert"
+			aria-live="assertive"
+		>
+			<p className="text-red-600">{message}</p>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/feedback/PageLoadingState.tsx

@@ -0,0 +1,18 @@
+interface PageLoadingStateProps {
+	message?: string;
+}
+
+/**
+ * Full-page loading state. Uses aria-live="polite" so screen readers can announce updates.
+ */
+export function PageLoadingState({ message = "Loading..." }: PageLoadingStateProps) {
+	return (
+		<div
+			className="flex justify-center items-center min-h-[200px] bg-gray-50"
+			aria-live="polite"
+			aria-busy="true"
+		>
+			<p className="text-gray-600">{message}</p>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/filters/FilterFieldRange.tsx

@@ -0,0 +1,40 @@
+import type { Filter } from "@salesforce/webapp-template-feature-react-global-search-experimental";
+import { getRangeMinKey, getRangeMaxKey } from "../../lib/filterUtils.js";
+
+const inputClass =
+	"h-9 px-3 rounded-md border border-gray-300 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent w-20";
+
+interface FilterFieldRangeProps {
+	filter: Filter;
+	formValues: Record<string, string>;
+	onChange: (key: string, value: string) => void;
+}
+
+export function FilterFieldRange({ filter, formValues, onChange }: FilterFieldRangeProps) {
+	const label = filter.label || filter.targetFieldPath;
+	const minKey = getRangeMinKey(filter.targetFieldPath);
+	const maxKey = getRangeMaxKey(filter.targetFieldPath);
+	return (
+		<div className="flex flex-col gap-1.5 min-w-[140px]" role="group" aria-label={label + " range"}>
+			<label className="text-sm font-medium text-gray-700 whitespace-nowrap">{label}</label>
+			<div className="flex gap-2">
+				<input
+					type="text"
+					value={formValues[minKey] ?? ""}
+					onChange={(e) => onChange(minKey, e.target.value)}
+					placeholder="Min"
+					className={inputClass}
+					aria-label={label + " minimum"}
+				/>
+				<input
+					type="text"
+					value={formValues[maxKey] ?? ""}
+					onChange={(e) => onChange(maxKey, e.target.value)}
+					placeholder="Max"
+					className={inputClass}
+					aria-label={label + " maximum"}
+				/>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/filters/FilterFieldSelect.tsx

@@ -0,0 +1,190 @@
+import * as React from "react";
+import type { Filter } from "@salesforce/webapp-template-feature-react-global-search-experimental";
+import { ALL_PLACEHOLDER_VALUE, MULTI_VALUE_SEP } from "../../lib/filterUtils.js";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+
+const TRIGGER_CLASS =
+	"h-9 rounded-md border border-gray-300 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent min-w-[140px] data-[size=default]:h-9";
+
+interface FilterFieldSelectProps {
+	filter: Filter;
+	options: { label?: string; value: string }[];
+	value: string;
+	onChange: (value: string) => void;
+	multiSelect?: boolean;
+}
+
+function FilterFieldSelectSingle({
+	filter,
+	options,
+	value,
+	onChange,
+}: Omit<FilterFieldSelectProps, "multiSelect">) {
+	const label = filter.label || filter.targetFieldPath;
+	const placeholder = filter.attributes?.placeholder || "All";
+	const id = `filter-${filter.targetFieldPath}`;
+	return (
+		<div className="flex flex-col gap-1.5 min-w-[160px]" role="group" aria-label={label}>
+			<label htmlFor={id} className="text-sm font-medium text-gray-700 whitespace-nowrap">
+				{label}
+			</label>
+			<Select
+				value={value || ALL_PLACEHOLDER_VALUE}
+				onValueChange={(v) => onChange(v === ALL_PLACEHOLDER_VALUE ? "" : (v ?? ""))}
+			>
+				<SelectTrigger id={id} className={TRIGGER_CLASS} size="default" aria-label={label}>
+					<SelectValue placeholder={placeholder} />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value={ALL_PLACEHOLDER_VALUE}>{placeholder}</SelectItem>
+					{options.map((opt) => (
+						<SelectItem key={opt.value} value={opt.value}>
+							{opt.label || opt.value}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</div>
+	);
+}
+
+function FilterFieldMultiSelect({
+	filter,
+	options,
+	value,
+	onChange,
+}: Omit<FilterFieldSelectProps, "multiSelect">) {
+	const label = filter.label || filter.targetFieldPath;
+	const selected = value ? value.split(MULTI_VALUE_SEP).filter(Boolean) : [];
+	const [open, setOpen] = React.useState(false);
+	const triggerRef = React.useRef<HTMLButtonElement>(null);
+	const panelRef = React.useRef<HTMLDivElement>(null);
+
+	React.useEffect(() => {
+		if (!open) return;
+		const close = (e: MouseEvent) => {
+			if (
+				triggerRef.current?.contains(e.target as Node) ||
+				panelRef.current?.contains(e.target as Node)
+			)
+				return;
+			setOpen(false);
+		};
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("mousedown", close);
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("mousedown", close);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [open]);
+
+	const toggle = (optValue: string) => {
+		const next = selected.includes(optValue)
+			? selected.filter((v) => v !== optValue)
+			: [...selected, optValue];
+		onChange(next.join(MULTI_VALUE_SEP));
+	};
+
+	const displayText =
+		selected.length === 0
+			? filter.attributes?.placeholder || "All"
+			: selected.length === 1
+				? options.find((o) => o.value === selected[0])?.label || selected[0]
+				: `${selected.length} selected`;
+
+	return (
+		<div className="flex flex-col gap-1.5 min-w-[160px]" role="group" aria-label={label}>
+			<label className="text-sm font-medium text-gray-700 whitespace-nowrap">{label}</label>
+			<div className="relative">
+				<button
+					ref={triggerRef}
+					type="button"
+					onClick={() => setOpen((o) => !o)}
+					className={`${TRIGGER_CLASS} w-full flex items-center justify-between gap-2 px-3 text-left`}
+					aria-label={label}
+					aria-expanded={open}
+					aria-haspopup="listbox"
+				>
+					<span className="truncate">{displayText}</span>
+					<svg
+						className={`h-4 w-4 shrink-0 text-gray-500 transition-transform ${open ? "rotate-180" : ""}`}
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						aria-hidden
+					>
+						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+					</svg>
+				</button>
+				{open && (
+					<div
+						ref={panelRef}
+						role="listbox"
+						className="absolute top-full left-0 z-50 mt-1 min-w-[var(--radix-select-trigger-width)] rounded-lg border border-gray-200 bg-white py-1 shadow-md max-h-60 overflow-auto"
+					>
+						{options.map((opt) => {
+							const isSelected = selected.includes(opt.value);
+							return (
+								<button
+									key={opt.value}
+									type="button"
+									role="option"
+									aria-selected={isSelected}
+									onClick={() => toggle(opt.value)}
+									className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
+								>
+									<span
+										className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
+											isSelected ? "bg-purple-600 border-purple-600" : "border-gray-300"
+										}`}
+									>
+										{isSelected && (
+											<svg
+												className="h-3 w-3 text-white"
+												viewBox="0 0 12 12"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeLinejoin="round"
+											>
+												<polyline points="2,6 5,9 10,3" />
+											</svg>
+										)}
+									</span>
+									{opt.label || opt.value}
+								</button>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export function FilterFieldSelect({
+	filter,
+	options,
+	value,
+	onChange,
+	multiSelect = true,
+}: FilterFieldSelectProps) {
+	if (multiSelect) {
+		return (
+			<FilterFieldMultiSelect filter={filter} options={options} value={value} onChange={onChange} />
+		);
+	}
+	return (
+		<FilterFieldSelectSingle filter={filter} options={options} value={value} onChange={onChange} />
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/filters/FilterFieldText.tsx

@@ -0,0 +1,32 @@
+import type { Filter } from "@salesforce/webapp-template-feature-react-global-search-experimental";
+
+const INPUT_CLASS =
+	"h-9 px-3 rounded-md border border-gray-300 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent min-w-[140px]";
+
+interface FilterFieldTextProps {
+	filter: Filter;
+	value: string;
+	onChange: (value: string) => void;
+}
+
+export function FilterFieldText({ filter, value, onChange }: FilterFieldTextProps) {
+	const label = filter.label || filter.targetFieldPath;
+	const id = `filter-${filter.targetFieldPath}`;
+	const placeholder = filter.attributes?.placeholder || `Enter ${label.toLowerCase()}`;
+	return (
+		<div className="flex flex-col gap-1.5 min-w-[160px]">
+			<label htmlFor={id} className="text-sm font-medium text-gray-700 whitespace-nowrap">
+				{label}
+			</label>
+			<input
+				id={id}
+				type="text"
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				placeholder={placeholder}
+				className={INPUT_CLASS}
+				aria-label={label}
+			/>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/filters/ListPageFilterRow.tsx

@@ -0,0 +1,100 @@
+import type { Filter } from "@salesforce/webapp-template-feature-react-global-search-experimental";
+import { FilterFieldRange } from "./FilterFieldRange.js";
+import { FilterFieldSelect } from "./FilterFieldSelect.js";
+import { FilterFieldText } from "./FilterFieldText.js";
+
+/** Compatible with feature picklist option shape (label/value). */
+interface PicklistOption {
+	label?: string;
+	value: string;
+}
+interface ListPageFilterRowProps {
+	filters: Filter[];
+	picklistValues: Record<string, PicklistOption[]>;
+	formValues: Record<string, string>;
+	onFormValueChange: (key: string, value: string) => void;
+	onApply: () => void;
+	onReset: () => void;
+	ariaLabel?: string;
+}
+
+/**
+ * Horizontal row of filter controls: range, select (multi-select), and text fields + Apply/Reset.
+ */
+export function ListPageFilterRow({
+	filters,
+	picklistValues,
+	formValues,
+	onFormValueChange,
+	onApply,
+	onReset,
+	ariaLabel = "Filters",
+}: ListPageFilterRowProps) {
+	if (filters.length === 0) return null;
+
+	return (
+		<div
+			className="bg-white rounded-lg shadow-sm border border-gray-200 p-4"
+			role="region"
+			aria-label={ariaLabel}
+		>
+			<div className="flex flex-wrap items-end gap-4">
+				{filters.map((filter) => {
+					if (!filter?.targetFieldPath) return null;
+					const affordance = (filter.affordance ?? "").toLowerCase();
+
+					if (affordance === "range") {
+						return (
+							<FilterFieldRange
+								key={filter.targetFieldPath}
+								filter={filter}
+								formValues={formValues}
+								onChange={onFormValueChange}
+							/>
+						);
+					}
+
+					if (affordance === "select") {
+						const options = picklistValues[filter.targetFieldPath] ?? [];
+						const value = formValues[filter.targetFieldPath] ?? "";
+						return (
+							<FilterFieldSelect
+								key={filter.targetFieldPath}
+								filter={filter}
+								options={options}
+								value={value}
+								onChange={(v) => onFormValueChange(filter.targetFieldPath, v)}
+								multiSelect={true}
+							/>
+						);
+					}
+
+					return (
+						<FilterFieldText
+							key={filter.targetFieldPath}
+							filter={filter}
+							value={formValues[filter.targetFieldPath] ?? ""}
+							onChange={(v) => onFormValueChange(filter.targetFieldPath, v)}
+						/>
+					);
+				})}
+				<div className="flex items-center gap-2 ml-2 shrink-0">
+					<button
+						onClick={onApply}
+						className="h-9 px-4 bg-purple-700 hover:bg-purple-800 text-white text-sm font-medium rounded-md"
+						aria-label="Apply filters"
+					>
+						Apply
+					</button>
+					<button
+						onClick={onReset}
+						className="h-9 px-4 text-sm font-medium rounded-md border-gray-300"
+						aria-label="Reset filters"
+					>
+						Reset
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/layout/PageContainer.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+interface PageContainerProps {
+	children: ReactNode;
+}
+
+export function PageContainer({ children }: PageContainerProps) {
+	return <div className="min-h-screen bg-gray-50 p-8">{children}</div>;
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/layout/PageHeader.tsx

@@ -0,0 +1,21 @@
+interface PageHeaderProps {
+	title: string;
+	description?: string;
+}
+
+/**
+ * Page title and optional description. Uses a consistent wrapper (max-w-7xl mx-auto px-8 pt-8)
+ * so the header aligns with list/content on all pages.
+ */
+export function PageHeader({ title, description }: PageHeaderProps) {
+	return (
+		<div className="max-w-7xl mx-auto px-8 pt-8">
+			<div className="mb-6">
+				<h1 className="text-2xl font-bold text-gray-900">{title}</h1>
+				{description != null && description !== "" && (
+					<p className="text-gray-600 mt-1">{description}</p>
+				)}
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2e/src/components/list/ListPageWithFilters.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import type { Filter } from "@salesforce/webapp-template-feature-react-global-search-experimental";
+import { PageContainer } from "../layout/PageContainer.js";
+import { PageLoadingState } from "../feedback/PageLoadingState.js";
+import { PageErrorState } from "../feedback/PageErrorState.js";
+import { FilterErrorAlert } from "../feedback/FilterErrorAlert.js";
+import { ListPageFilterRow } from "../filters/ListPageFilterRow.js";
+
+/** Compatible with feature picklist option shape. */
+interface PicklistOption {
+	label?: string;
+	value: string;
+}
+
+export interface ListPageWithFiltersProps {
+	filterProps: {
+		filters: Filter[];
+		picklistValues: Record<string, PicklistOption[]>;
+		formValues: Record<string, string>;
+		onFormValueChange: (key: string, value: string) => void;
+		onApply: () => void;
+		onReset: () => void;
+		ariaLabel: string;
+	};
+	filterError: string | null;
+	loading: boolean;
+	error: string | null;
+	loadingMessage: string;
+	isEmpty: boolean;
+	/** When set, a search input is shown that syncs with URL ?q= and drives list search. */
+	searchPlaceholder?: string;
+	searchAriaLabel?: string;
+	children: ReactNode;
+}
+
+export function ListPageWithFilters({
+	filterProps,
+	filterError,
+	loading,
+	error,
+	loadingMessage,
+	isEmpty,
+	children,
+}: ListPageWithFiltersProps) {
+	if (error) {
+		return <PageErrorState message={error} />;
+	}
+
+	if (loading && isEmpty) {
+		return <PageLoadingState message={loadingMessage} />;
+	}
+
+	return (
+		<PageContainer>
+			<div className="max-w-7xl mx-auto space-y-6">
+				<ListPageFilterRow
+					filters={filterProps.filters}
+					picklistValues={filterProps.picklistValues}
+					formValues={filterProps.formValues}
+					onFormValueChange={filterProps.onFormValueChange}
+					onApply={filterProps.onApply}
+					onReset={filterProps.onReset}
+					ariaLabel={filterProps.ariaLabel}
+				/>
+				{filterError && <FilterErrorAlert message={filterError} />}
+				{children}
+			</div>
+		</PageContainer>
+	);
+}