@salesforce/ui-bundle-template-app-react-sample-b2e 11.20.0 → 11.21.0

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.21.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.20.0...v11.21.0) (2026-07-10)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [11.20.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.19.0...v11.20.0) (2026-07-10)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/force-app/main/default/uiBundles/propertymanagementapp/package.json

@@ -18,8 +18,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk": "^11.20.0",
-    "@salesforce/ui-bundle": "^11.20.0",
+    "@salesforce/platform-sdk": "^11.21.0",
+    "@salesforce/ui-bundle": "^11.21.0",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -46,8 +46,8 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/graphiti": "^11.20.0",
-    "@salesforce/vite-plugin-ui-bundle": "^11.20.0",
+    "@salesforce/graphiti": "^11.21.0",
+    "@salesforce/vite-plugin-ui-bundle": "^11.21.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/api/applications/applicationSearchService.ts

@@ -1,46 +1,28 @@
-import SEARCH_QUERY from "./query/searchApplications.graphql?raw";
-import DISTINCT_STATUS_QUERY from "./query/distinctApplicationStatus.graphql?raw";
-import {
-	searchObjects,
-	fetchDistinctValues,
-	type ObjectSearchOptions,
-	type PicklistOption,
-} from "../../features/object-search/api/objectSearchService";
-import type {
-	SearchApplicationsQuery,
-	SearchApplicationsQueryVariables,
-	DistinctApplicationStatusQuery,
-} from "../graphql-operations-types";
+/**
+ * Application search result types.
+ *
+ * Search itself is now driven by feature-react-search (see `lib/searchConfig.ts`),
+ * which builds and runs its GraphQL at runtime — there is no generated
+ * `SearchApplicationsQuery` operation type to derive from. This module declares the
+ * node shape that the result card and detail modal read, mirroring the Salesforce
+ * UI API field-wrapper shape (`{ value, displayValue }`).
+ */
 
-export type ApplicationSearchResult = NonNullable<
-	SearchApplicationsQuery["uiapi"]["query"]["Application__c"]
->;
+/** A Salesforce UI API scalar field wrapper. */
+type Field<T> = { value?: T | null; displayValue?: string | null } | null;
 
-export type ApplicationSearchNode = NonNullable<
-	NonNullable<NonNullable<ApplicationSearchResult["edges"]>[number]>["node"]
->;
-
-export type ApplicationSearchOptions = ObjectSearchOptions<
-	SearchApplicationsQueryVariables["where"],
-	SearchApplicationsQueryVariables["orderBy"]
->;
-
-export type { PicklistOption };
-
-export async function searchApplications(
-	options: ApplicationSearchOptions = {},
-): Promise<ApplicationSearchResult> {
-	return searchObjects<
-		ApplicationSearchResult,
-		SearchApplicationsQuery,
-		SearchApplicationsQueryVariables
-	>(SEARCH_QUERY, "Application__c", options);
-}
-
-export async function fetchDistinctApplicationStatus(): Promise<PicklistOption[]> {
-	return fetchDistinctValues<DistinctApplicationStatusQuery>(
-		DISTINCT_STATUS_QUERY,
-		"Application__c",
-		"Status__c",
-	);
+export interface ApplicationSearchNode {
+	Id: string;
+	Name?: Field<string>;
+	Status__c?: Field<string>;
+	Start_Date__c?: Field<string>;
+	Employment__c?: Field<string>;
+	References__c?: Field<string>;
+	User__r?: {
+		Name?: Field<string>;
+	} | null;
+	Property__r?: {
+		Name?: Field<string>;
+		Address__c?: Field<string>;
+	} | null;
 }

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/api/maintenanceRequests/maintenanceRequestSearchService.ts

@@ -1,66 +1,32 @@
-import SEARCH_QUERY from "./query/searchMaintenanceRequests.graphql?raw";
-import DISTINCT_STATUS_QUERY from "./query/distinctMaintenanceRequestStatus.graphql?raw";
-import DISTINCT_TYPE_QUERY from "./query/distinctMaintenanceRequestType.graphql?raw";
-import DISTINCT_PRIORITY_QUERY from "./query/distinctMaintenanceRequestPriority.graphql?raw";
-import {
-	searchObjects,
-	fetchDistinctValues,
-	type ObjectSearchOptions,
-	type PicklistOption,
-} from "../../features/object-search/api/objectSearchService";
-import type {
-	SearchMaintenanceRequestsQuery,
-	SearchMaintenanceRequestsQueryVariables,
-	DistinctMaintenanceRequestStatusQuery,
-	DistinctMaintenanceRequestTypeQuery,
-	DistinctMaintenanceRequestPriorityQuery,
-} from "../graphql-operations-types";
-
-export type MaintenanceRequestSearchResult = NonNullable<
-	SearchMaintenanceRequestsQuery["uiapi"]["query"]["Maintenance_Request__c"]
->;
-
-export type MaintenanceRequestSearchNode = NonNullable<
-	NonNullable<NonNullable<MaintenanceRequestSearchResult["edges"]>[number]>["node"]
->;
-
-export type MaintenanceRequestSearchOptions = ObjectSearchOptions<
-	SearchMaintenanceRequestsQueryVariables["where"],
-	SearchMaintenanceRequestsQueryVariables["orderBy"]
->;
-
-export type { PicklistOption };
-
-export async function searchMaintenanceRequests(
-	options: MaintenanceRequestSearchOptions = {},
-): Promise<MaintenanceRequestSearchResult> {
-	return searchObjects<
-		MaintenanceRequestSearchResult,
-		SearchMaintenanceRequestsQuery,
-		SearchMaintenanceRequestsQueryVariables
-	>(SEARCH_QUERY, "Maintenance_Request__c", options);
-}
-
-export async function fetchDistinctMaintenanceRequestStatus(): Promise<PicklistOption[]> {
-	return fetchDistinctValues<DistinctMaintenanceRequestStatusQuery>(
-		DISTINCT_STATUS_QUERY,
-		"Maintenance_Request__c",
-		"Status__c",
-	);
-}
-
-export async function fetchDistinctMaintenanceRequestType(): Promise<PicklistOption[]> {
-	return fetchDistinctValues<DistinctMaintenanceRequestTypeQuery>(
-		DISTINCT_TYPE_QUERY,
-		"Maintenance_Request__c",
-		"Type__c",
-	);
-}
-
-export async function fetchDistinctMaintenanceRequestPriority(): Promise<PicklistOption[]> {
-	return fetchDistinctValues<DistinctMaintenanceRequestPriorityQuery>(
-		DISTINCT_PRIORITY_QUERY,
-		"Maintenance_Request__c",
-		"Priority__c",
-	);
+/**
+ * Maintenance-request search result types.
+ *
+ * Search itself is now driven by feature-react-search (see `lib/searchConfig.ts`),
+ * which builds and runs its GraphQL at runtime — there is no generated
+ * `SearchMaintenanceRequestsQuery` operation type to derive from. This module
+ * declares the node shape that the result card and detail modal read, mirroring
+ * the Salesforce UI API field-wrapper shape (`{ value, displayValue }`).
+ */
+
+/** A Salesforce UI API scalar field wrapper. */
+type Field<T> = { value?: T | null; displayValue?: string | null } | null;
+
+export interface MaintenanceRequestSearchNode {
+	Id: string;
+	Name?: Field<string>;
+	Type__c?: Field<string>;
+	Priority__c?: Field<string>;
+	Status__c?: Field<string>;
+	Description__c?: Field<string>;
+	Scheduled__c?: Field<string>;
+	Property__r?: {
+		Name?: Field<string>;
+		Address__c?: Field<string>;
+	} | null;
+	Assigned_Worker__r?: {
+		Name?: Field<string>;
+	} | null;
+	User__r?: {
+		Name?: Field<string>;
+	} | null;
 }

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/api/maintenanceWorkers/maintenanceWorkerSearchService.ts

@@ -1,46 +1,24 @@
-import SEARCH_QUERY from "./query/searchMaintenanceWorkers.graphql?raw";
-import DISTINCT_TYPE_QUERY from "./query/distinctMaintenanceWorkerEmploymentType.graphql?raw";
-import {
-	searchObjects,
-	fetchDistinctValues,
-	type ObjectSearchOptions,
-	type PicklistOption,
-} from "../../features/object-search/api/objectSearchService";
-import type {
-	SearchMaintenanceWorkersQuery,
-	SearchMaintenanceWorkersQueryVariables,
-	DistinctMaintenanceWorkerEmploymentTypeQuery,
-} from "../graphql-operations-types.js";
+/**
+ * Maintenance-worker search result types.
+ *
+ * Search itself is now driven by feature-react-search (see `lib/searchConfig.ts`),
+ * which builds and runs its GraphQL at runtime — there is no generated
+ * `SearchMaintenanceWorkersQuery` operation type to derive from. This module
+ * declares the node shape that the result card and detail modal read, mirroring
+ * the Salesforce UI API field-wrapper shape (`{ value, displayValue }`).
+ */
 
-export type MaintenanceWorkerSearchResult = NonNullable<
-	SearchMaintenanceWorkersQuery["uiapi"]["query"]["Maintenance_Worker__c"]
->;
+/** A Salesforce UI API scalar field wrapper. */
+type Field<T> = { value?: T | null; displayValue?: string | null } | null;
 
-export type MaintenanceWorkerSearchNode = NonNullable<
-	NonNullable<NonNullable<MaintenanceWorkerSearchResult["edges"]>[number]>["node"]
->;
-
-export type MaintenanceWorkerSearchOptions = ObjectSearchOptions<
-	SearchMaintenanceWorkersQueryVariables["where"],
-	SearchMaintenanceWorkersQueryVariables["orderBy"]
->;
-
-export type { PicklistOption };
-
-export async function searchMaintenanceWorkers(
-	options: MaintenanceWorkerSearchOptions = {},
-): Promise<MaintenanceWorkerSearchResult> {
-	return searchObjects<
-		MaintenanceWorkerSearchResult,
-		SearchMaintenanceWorkersQuery,
-		SearchMaintenanceWorkersQueryVariables
-	>(SEARCH_QUERY, "Maintenance_Worker__c", options);
-}
-
-export async function fetchDistinctMaintenanceWorkerType(): Promise<PicklistOption[]> {
-	return fetchDistinctValues<DistinctMaintenanceWorkerEmploymentTypeQuery>(
-		DISTINCT_TYPE_QUERY,
-		"Maintenance_Worker__c",
-		"Employment_Type__c",
-	);
+export interface MaintenanceWorkerSearchNode {
+	Id: string;
+	Name?: Field<string>;
+	Employment_Type__c?: Field<string>;
+	Type__c?: Field<string>;
+	Phone__c?: Field<string>;
+	Location__c?: Field<string>;
+	Rating__c?: Field<number>;
+	Hourly_Rate__c?: Field<number>;
+	IsActive__c?: Field<boolean>;
 }

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/api/properties/propertySearchService.ts

@@ -1,56 +1,36 @@
-import SEARCH_PROPERTIES_QUERY from "./query/searchProperties.graphql?raw";
-import DISTINCT_STATUS_QUERY from "./query/distinctPropertyStatus.graphql?raw";
-import DISTINCT_TYPE_QUERY from "./query/distinctPropertyType.graphql?raw";
-import {
-	searchObjects,
-	fetchDistinctValues,
-	type ObjectSearchOptions,
-	type PicklistOption,
-} from "../../features/object-search/api/objectSearchService";
-import type {
-	SearchPropertiesQuery,
-	SearchPropertiesQueryVariables,
-	DistinctPropertyStatusQuery,
-	DistinctPropertyTypeQuery,
-} from "../graphql-operations-types";
+/**
+ * Property search result types.
+ *
+ * Search itself is now driven by feature-react-search (see `lib/searchConfig.ts`),
+ * which builds and runs its GraphQL at runtime — there is no generated
+ * `SearchPropertiesQuery` operation type to derive from. This module declares the
+ * node shape that the property result card and detail modal read, mirroring the
+ * Salesforce UI API field-wrapper shape (`{ value, displayValue }`).
+ */
 
-export type PropertySearchResult = NonNullable<
-	SearchPropertiesQuery["uiapi"]["query"]["Property__c"]
->;
+/** A Salesforce UI API scalar field wrapper. */
+type Field<T> = { value?: T | null; displayValue?: string | null } | null;
 
-export type PropertySearchNode = NonNullable<
-	NonNullable<NonNullable<PropertySearchResult["edges"]>[number]>["node"]
->;
-
-export type PropertySearchOptions = ObjectSearchOptions<
-	SearchPropertiesQueryVariables["where"],
-	SearchPropertiesQueryVariables["orderBy"]
->;
-
-export type { PicklistOption };
-
-export async function searchProperties(
-	options: PropertySearchOptions = {},
-): Promise<PropertySearchResult> {
-	return searchObjects<PropertySearchResult, SearchPropertiesQuery, SearchPropertiesQueryVariables>(
-		SEARCH_PROPERTIES_QUERY,
-		"Property__c",
-		options,
-	);
-}
-
-export async function fetchDistinctPropertyStatus(): Promise<PicklistOption[]> {
-	return fetchDistinctValues<DistinctPropertyStatusQuery>(
-		DISTINCT_STATUS_QUERY,
-		"Property__c",
-		"Status__c",
-	);
-}
-
-export async function fetchDistinctPropertyType(): Promise<PicklistOption[]> {
-	return fetchDistinctValues<DistinctPropertyTypeQuery>(
-		DISTINCT_TYPE_QUERY,
-		"Property__c",
-		"Type__c",
-	);
+export interface PropertySearchNode {
+	Id: string;
+	Name?: Field<string>;
+	Address__c?: Field<string>;
+	Description__c?: Field<string>;
+	Type__c?: Field<string>;
+	Status__c?: Field<string>;
+	Hero_Image__c?: Field<string>;
+	Tour_URL__c?: Field<string>;
+	Features__c?: Field<string>;
+	Utilities__c?: Field<string>;
+	Available_Date__c?: Field<string>;
+	CreatedDate?: Field<string>;
+	Monthly_Rent__c?: Field<number>;
+	Bedrooms__c?: Field<number>;
+	Bathrooms__c?: Field<number>;
+	Sq_Ft__c?: Field<number>;
+	Year_Built__c?: Field<number>;
+	Deposit__c?: Field<number>;
+	Lease_Term__c?: Field<number>;
+	Parking__c?: Field<number>;
+	Pet_Friendly__c?: Field<boolean>;
 }

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/applications/ApplicationCard.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { FileText, User, Home, CalendarDays } from "lucide-react";
+import type { ApplicationSearchNode } from "../../api/applications/applicationSearchService";
+
+interface ApplicationCardProps {
+	application: ApplicationSearchNode;
+	onClick?: (application: ApplicationSearchNode) => void;
+}
+
+function statusColor(status: string): string {
+	const s = status.toLowerCase();
+	if (s.includes("approved")) return "bg-green-100 text-green-700";
+	if (s.includes("rejected")) return "bg-red-100 text-red-700";
+	if (s.includes("background")) return "bg-blue-100 text-blue-700";
+	if (s.includes("review")) return "bg-yellow-100 text-yellow-700";
+	return "bg-gray-100 text-gray-700";
+}
+
+function formatDate(value: string | null | undefined): string | undefined {
+	if (!value) return undefined;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return undefined;
+	return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+export const ApplicationCard: React.FC<ApplicationCardProps> = ({ application, onClick }) => {
+	const name = application.Name?.value || "Application";
+	const applicant = application.User__r?.Name?.value || "Unknown applicant";
+	const propertyName = application.Property__r?.Name?.value;
+	const propertyAddress = application.Property__r?.Address__c?.value;
+	const status = application.Status__c?.value || "Unknown";
+	const startDate = formatDate(application.Start_Date__c?.value);
+
+	const handleClick = () => onClick?.(application);
+
+	return (
+		<div
+			role="button"
+			tabIndex={0}
+			aria-label={name}
+			className="h-full bg-white rounded-lg shadow-md p-5 hover:shadow-lg transition-shadow cursor-pointer flex flex-col gap-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-purple focus-visible:ring-offset-2"
+			onClick={handleClick}
+			onKeyDown={(e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					handleClick();
+				}
+			}}
+		>
+			<div className="flex items-start justify-between gap-2">
+				<div className="flex items-center gap-2 min-w-0">
+					<FileText className="w-5 h-5 text-purple-600 shrink-0" />
+					<h3 className="text-base font-semibold text-gray-900 truncate">{name}</h3>
+				</div>
+				<span
+					className={`shrink-0 px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor(status)}`}
+				>
+					{status}
+				</span>
+			</div>
+
+			<div className="mt-auto space-y-1 text-sm text-gray-600">
+				<div className="flex items-center gap-2">
+					<User className="w-4 h-4 text-gray-400 shrink-0" />
+					<span className="truncate">{applicant}</span>
+				</div>
+				<div className="flex items-center gap-2">
+					<Home className="w-4 h-4 text-gray-400 shrink-0" />
+					<span className="truncate">{propertyName || propertyAddress || "Unknown property"}</span>
+				</div>
+				{startDate && (
+					<div className="flex items-center gap-2">
+						<CalendarDays className="w-4 h-4 text-gray-400 shrink-0" />
+						<span className="truncate">Starts {startDate}</span>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/dashboard/GlobalSearchBar.tsx

@@ -92,9 +92,9 @@ export function GlobalSearchBar({
 				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}`}
+				aria-label={`Browse ${labelPlural}`}
 			>
-				Browse all {labelPlural}
+				Browse {labelPlural}
 			</button>
 		</div>
 	);

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/layout/VerticalNav.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Link, useLocation } from "react-router";
+import { Search as SearchIcon } from "lucide-react";
 import dashboardIcon from "../../assets/icons/dashboard.svg";
 import filesIcon from "../../assets/icons/files.svg";
 import propertiesIcon from "../../assets/icons/properties.svg";
@@ -9,12 +10,14 @@ import { PATHS } from "../../lib/routeConfig";
 
 interface NavItem {
 	path: string;
-	icon: string;
+	/** Either an imported SVG asset URL or a lucide icon component. */
+	icon: string | React.ComponentType<{ className?: string }>;
 	label: string;
 }
 
 const navItems: NavItem[] = [
 	{ path: PATHS.HOME, icon: dashboardIcon, label: "Dashboard" },
+	{ path: PATHS.SEARCH, icon: SearchIcon, label: "Search" },
 	{ path: PATHS.APPLICATIONS, icon: filesIcon, label: "Applications" },
 	{ path: PATHS.PROPERTIES, icon: propertiesIcon, label: "Properties" },
 	{ path: PATHS.MAINTENANCE_REQUESTS, icon: maintenanceIcon, label: "Maintenance Requests" },
@@ -37,23 +40,30 @@ export const VerticalNav: React.FC<VerticalNavProps> = ({ isOpen = false, onClos
 	};
 
 	const navContent = (handleClick?: () => void) =>
-		navItems.map((item) => (
-			<Link
-				key={item.path}
-				to={item.path}
-				onClick={handleClick}
-				aria-current={isActive(item.path) ? "page" : undefined}
-				className={`flex flex-col items-center justify-center gap-2 py-4 px-2 transition-colors ${
-					isActive(item.path)
-						? "bg-purple-100 text-purple-700 border-l-4 border-purple-700"
-						: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-				}`}
-				title={item.label}
-			>
-				<img src={item.icon} alt="" className="w-6 h-6" />
-				<span className="text-xs font-medium text-center">{item.label}</span>
-			</Link>
-		));
+		navItems.map((item) => {
+			const Icon = typeof item.icon === "string" ? null : item.icon;
+			return (
+				<Link
+					key={item.path}
+					to={item.path}
+					onClick={handleClick}
+					aria-current={isActive(item.path) ? "page" : undefined}
+					className={`flex flex-col items-center justify-center gap-2 py-4 px-2 transition-colors ${
+						isActive(item.path)
+							? "bg-purple-100 text-purple-700 border-l-4 border-purple-700"
+							: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+					}`}
+					title={item.label}
+				>
+					{Icon ? (
+						<Icon className="w-6 h-6" />
+					) : (
+						<img src={item.icon as string} alt="" className="w-6 h-6" />
+					)}
+					<span className="text-xs font-medium text-center">{item.label}</span>
+				</Link>
+			);
+		});
 
 	return (
 		<>