@salesforce/templates 66.13.6 → 66.13.8

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/Search.tsx

@@ -29,6 +29,8 @@
  */
 
 import { useMemo, type ReactNode } from "react";
+import { AlertCircle } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
 import { useSearch } from "../hooks/useSearch";
 import { SearchBar } from "./controls/SearchBar";
 import { ScopeSelector } from "./controls/ScopeSelector";
@@ -152,6 +154,7 @@ export function Search({
 						scope={handle.scope}
 						onScopeChange={handle.setScope}
 						allLabel={allScopeLabel}
+						discoveredContentTypes={handle.discoveredContentTypes}
 					/>
 				)}
 			</div>
@@ -164,20 +167,35 @@ export function Search({
 				/>
 			) : (
 				<>
-					{/* Aggregate count on its own row, directly above the results —
-					    only in "All" scope, where the per-source sections don't each
-					    carry a single meaningful total. */}
-					{showTotalResults && !handle.loading && (
-						<p className="text-sm text-muted-foreground" role="status">
-							{totalResults} total result{totalResults === 1 ? "" : "s"}
-						</p>
+					{handle.error ? (
+						/* Page-level failure (every queried source failed, or a
+						   whole-request/network error). Show the single consolidated
+						   banner and nothing else — the per-source sections would each
+						   repeat the same "Failed to load <source>" error and their
+						   (now empty) filter/sort chrome, so suppress them entirely. */
+						<Alert variant="destructive" role="alert">
+							<AlertCircle aria-hidden="true" />
+							<AlertTitle>Search failed</AlertTitle>
+							<AlertDescription>{handle.error}</AlertDescription>
+						</Alert>
+					) : (
+						<>
+							{/* Aggregate count on its own row, directly above the results —
+							    only in "All" scope, where the per-source sections don't each
+							    carry a single meaningful total. */}
+							{showTotalResults && !handle.loading && (
+								<p className="text-sm text-muted-foreground" role="status">
+									{totalResults} total result{totalResults === 1 ? "" : "s"}
+								</p>
+							)}
+							<SearchResults
+								handle={handle}
+								renderResult={renderResult}
+								renderFilters={renderFilters}
+								emptyMessages={emptyMessages}
+							/>
+						</>
 					)}
-					<SearchResults
-						handle={handle}
-						renderResult={renderResult}
-						renderFilters={renderFilters}
-						emptyMessages={emptyMessages}
-					/>
 				</>
 			)}
 		</div>

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/SearchResults.tsx

@@ -21,11 +21,11 @@
 
 import type { ReactNode } from "react";
 import { SourceSection } from "./SourceSection";
-import { DefaultResultRow } from "./results/DefaultResultRow";
 import { DefaultFilterPanel } from "./filters/DefaultFilterPanel";
-import { ALL_SCOPE, type SearchHandle } from "../types";
+import { resolveResultRenderer, type ResultRenderer } from "./results/resolveResultRenderer";
+import { ALL_SCOPE, parseScope, type SearchHandle } from "../types";
+import { isCmsSearchSupported } from "../adapters/cms/api/orgApiVersionService";
 
-type ResultRenderer = ((node: unknown) => ReactNode) | false;
 type FilterRenderer = (() => ReactNode) | false;
 
 interface SearchResultsProps {
@@ -42,23 +42,34 @@ export function SearchResults({
 	emptyMessages,
 }: SearchResultsProps) {
 	const filtersHidden = handle.scope === ALL_SCOPE;
+	// Match sections against the base scope so a "<cmsKey>:<fqn>" scope still
+	// renders the CMS source's section (the fqn only narrows the query).
+	const { base: scopeBase } = parseScope(handle.scope);
 	return (
 		<div className="space-y-10">
 			{Object.entries(handle.sources).map(([key, controller]) => {
-				if (handle.scope !== ALL_SCOPE && handle.scope !== key) return null;
-				const overrideResult = renderResult?.[key];
-				if (overrideResult === false) return null;
-				const resolvedRenderResult: (node: unknown) => ReactNode =
-					overrideResult ?? ((node) => <DefaultResultRow node={node} source={controller.config} />);
+				if (scopeBase !== ALL_SCOPE && scopeBase !== key) return null;
+				// CMS search is skipped on builds below the CMS-search API version, so a
+				// CMS source never returns rows — rendering its section would only show
+				// an empty "Content" heading. Hide it (same gate as the CMS fetch skip).
+				if (controller.config.kind === "cms" && !isCmsSearchSupported()) return null;
+				// Resolve the renderer through the shared helper so a CMS source
+				// renders via CmsResultRow (never DefaultResultRow) in this mode; a
+				// `renderResult[key]` override — including `false` (hide) — still wins.
+				const resolvedRenderResult = resolveResultRenderer(controller.config, renderResult);
+				if (resolvedRenderResult === false) return null;
 
+				// CMS sources have no `filterBy`; the guard below keeps their chrome off.
 				const overrideFilters = renderFilters?.[key];
-				const hasFilterFields = (controller.config.filterBy?.length ?? 0) > 0;
+				const sourceConfig = controller.config;
+				const hasFilterFields =
+					sourceConfig.kind === "sobject" && (sourceConfig.filterBy?.length ?? 0) > 0;
 				const resolvedRenderFilters: (() => ReactNode) | undefined =
 					overrideFilters === false
 						? undefined
 						: (overrideFilters ??
-							(hasFilterFields
-								? () => <DefaultFilterPanel source={controller.config} />
+							(hasFilterFields && sourceConfig.kind === "sobject"
+								? () => <DefaultFilterPanel source={sourceConfig} />
 								: undefined));
 
 				return (

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/SourceSection.tsx

@@ -54,9 +54,14 @@ export function SourceSection({
 
 	const pageSizeOptions = pagination.pageSizeOptions ?? [pagination.pageSize];
 
+	// `sortBy` / `idField` are SObject-only — narrow on `kind` so the union
+	// widening of `config` doesn't regress SObject behavior (CMS has neither).
+	const sortBy = config.kind === "sobject" ? config.sortBy : undefined;
+	const idField = config.kind === "sobject" ? config.idField : undefined;
+
 	const showFilterPanel = !!renderFilters && !hideFilterChrome;
 	const showActiveChips = !hideFilterChrome && filters.active.length > 0;
-	const showSortControl = !hideFilterChrome && (config.sortBy?.length ?? 0) > 0;
+	const showSortControl = !hideFilterChrome && (sortBy?.length ?? 0) > 0;
 
 	// Persistent, always-mounted live region: screen readers announce result
 	// updates (searching → count → empty → error) without an Enter keypress.
@@ -102,8 +107,8 @@ export function SourceSection({
 
 				{(showSortControl || showActiveChips) && (
 					<div className="flex flex-wrap items-center gap-2 mb-3">
-						{showSortControl && config.sortBy ? (
-							<SortControl configs={config.sortBy} sort={sort.current} onSortChange={sort.set} />
+						{showSortControl && sortBy ? (
+							<SortControl configs={sortBy} sort={sort.current} onSortChange={sort.set} />
 						) : null}
 						{showActiveChips && (
 							<ActiveFilters filters={filters.active} onRemove={filters.remove} />
@@ -139,7 +144,7 @@ export function SourceSection({
 					{showResults && (
 						<ul className="divide-y">
 							{nodes.map((node, i) => (
-								<li key={getNodeKey(node, config.idField, i)} className="py-3">
+								<li key={getNodeKey(node, idField, i)} className="py-3">
 									{renderResult(node)}
 								</li>
 							))}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/controls/ScopeSelector.tsx

@@ -3,10 +3,14 @@
  *
  * Sits next to the search bar in the default {@link Search} layout. The
  * options are derived from the configured sources: an "All" entry plus one
- * entry per source (using each source's `label`).
+ * entry per source (using each source's `label`). When CMS content types have
+ * been discovered at runtime, one extra entry per type is appended under its
+ * CMS source — value `"<cmsKey>:<fqn>"`, label the server-provided content-type
+ * label — so a user can narrow a CMS search to a single content type.
  *
  * Selecting a non-"All" scope tells {@link useSearch} to fetch and render
- * only that source. Switching scope resets per-source pagination cursors —
+ * only that source. Selecting a `"<cmsKey>:<fqn>"` entry runs a CMS-only search
+ * for that content type. Switching scope resets per-source pagination cursors —
  * the visible result set is changing.
  */
 
@@ -17,13 +21,23 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "../../../../components/ui/select";
-import { ALL_SCOPE, type SearchConfig, type SearchScope } from "../../types";
+import { ALL_SCOPE, CMS_SCOPE_SEPARATOR, type SearchConfig, type SearchScope } from "../../types";
+import type { DiscoveredContentType } from "../../adapters/cms/contentTypeUtils";
+import { isCmsSearchSupported } from "../../adapters/cms/api/orgApiVersionService";
 
 interface ScopeSelectorProps {
 	config: SearchConfig;
 	scope: SearchScope;
 	onScopeChange: (scope: SearchScope) => void;
 	allLabel?: string;
+	/**
+	 * CMS content types discovered at runtime (from
+	 * {@link SearchHandle.discoveredContentTypes}) — each with its FQN and
+	 * server-provided display `label`. Appended as per-type entries under the CMS
+	 * source once discovery completes; omit or pass `[]` before then. No-op when
+	 * the config has no CMS source.
+	 */
+	discoveredContentTypes?: DiscoveredContentType[];
 	className?: string;
 }
 
@@ -32,9 +46,21 @@ export function ScopeSelector({
 	scope,
 	onScopeChange,
 	allLabel = "All",
+	discoveredContentTypes = [],
 	className,
 }: ScopeSelectorProps) {
 	if (config.sources.length === 0) return null;
+	// Discovered content types attach to the (single) CMS source. Entries are
+	// injected only after discovery, so the dropdown starts with just the config
+	// sources and grows once the CMS channel's types are known.
+	const cmsSource = config.sources.find((s) => s.kind === "cms");
+	const hasDiscoveredTypes = !!cmsSource && discoveredContentTypes.length > 0;
+	const contentTypeEntries = hasDiscoveredTypes
+		? discoveredContentTypes.map((ct) => ({
+				value: `${cmsSource!.key}${CMS_SCOPE_SEPARATOR}${ct.fqn}`,
+				label: ct.label,
+			}))
+		: [];
 	return (
 		<div className={className}>
 			<Select value={scope} onValueChange={onScopeChange}>
@@ -43,9 +69,35 @@ export function ScopeSelector({
 				</SelectTrigger>
 				<SelectContent>
 					<SelectItem value={ALL_SCOPE}>{allLabel}</SelectItem>
-					{config.sources.map((source) => (
-						<SelectItem key={source.key} value={source.key}>
-							{source.label}
+					{config.sources.map((source) => {
+						// CMS search is skipped entirely on builds below the CMS-search API
+						// version (same gate `useSearch` uses to drop the CMS request), so
+						// its scope entry ("Content") would only ever yield an empty result.
+						// Hide it. Build-version-only — safe to evaluate during render.
+						if (source.kind === "cms" && !isCmsSearchSupported()) {
+							return null;
+						}
+						// Once the CMS channel's content types are known, the generic CMS
+						// source entry (e.g. "Content") is redundant — its per-type entries
+						// (appended below) cover the same source at finer granularity, so
+						// drop the catch-all to avoid a duplicate-looking scope option.
+						// EXCEPTION: keep it while it is the current scope. Discovery can
+						// complete AFTER the user has selected the generic CMS scope; if we
+						// removed the only matching item, the controlled Radix select would
+						// hold a value no item represents and render blank — leaving AT
+						// users unable to identify the active scope (WCAG 4.1.2).
+						if (source.kind === "cms" && hasDiscoveredTypes && scope !== source.key) {
+							return null;
+						}
+						return (
+							<SelectItem key={source.key} value={source.key}>
+								{source.label}
+							</SelectItem>
+						);
+					})}
+					{contentTypeEntries.map((entry) => (
+						<SelectItem key={entry.value} value={entry.value}>
+							{entry.label}
 						</SelectItem>
 					))}
 				</SelectContent>

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/results/CmsResultRow.tsx

@@ -0,0 +1,101 @@
+/**
+ * Per-node row for a CMS source. Used by both the per-source section
+ * (`SearchResults`) and the merged grid (`MergedSearchResults`) via the shared
+ * `resolveResultRenderer` (UI-owned) whenever `source.kind === "cms"`.
+ *
+ * Renders a title, a published-date subtitle, an optional content-type badge,
+ * and a react-router `<Link>` when a route can be built.
+ *
+ * Link target:
+ *   - `source.routePattern` tokens: `:id` (managedContentId), `:key`
+ *     (managedContentKey), `:contentType` (contentType).
+ *   - falls back to `/content/:contentType/:id` when no `routePattern` is
+ *     configured.
+ *
+ * The content-type label is rendered only when its FQN passes `isValidCmsFqn`.
+ */
+
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type { CmsSourceConfig, CmsSearchItem } from "../../adapters/cms/types";
+import { formatContentTypeLabel, isValidCmsFqn } from "../../adapters/cms/contentTypeUtils";
+
+/** Formats an ISO date string for display; echoes the raw string on failure. */
+function formatPublishedDate(dateStr: string): string {
+	const date = new Date(dateStr);
+	if (isNaN(date.getTime())) return dateStr;
+	return date.toLocaleDateString(undefined, {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	});
+}
+
+/**
+ * Substitutes `:id` / `:key` / `:contentType` tokens in a route pattern with
+ * the item's values (URL-encoded). Returns `null` if a required token has no
+ * value.
+ */
+function resolveRoute(pattern: string, item: CmsSearchItem): string | null {
+	const tokens: Record<string, string | undefined> = {
+		id: item.managedContentId,
+		key: item.managedContentKey,
+		contentType: item.contentType,
+	};
+	let failed = false;
+	const out = pattern.replace(/:([A-Za-z_][A-Za-z0-9_]*)/g, (_match, token: string) => {
+		const value = tokens[token];
+		if (value == null || value === "") {
+			failed = true;
+			return "";
+		}
+		return encodeURIComponent(value);
+	});
+	return failed ? null : out;
+}
+
+interface CmsResultRowProps {
+	node: unknown;
+	source: CmsSourceConfig;
+}
+
+export function CmsResultRow({ node, source }: CmsResultRowProps) {
+	const item = node as CmsSearchItem;
+
+	const publishedDate = item.managedContentChannelDeliveryDetails?.[0]?.publishedDate;
+	const showType = typeof item.contentType === "string" && isValidCmsFqn(item.contentType);
+
+	const subtitleParts: string[] = [];
+	if (showType) subtitleParts.push(formatContentTypeLabel(item.contentType));
+	if (publishedDate) subtitleParts.push(`Published: ${formatPublishedDate(publishedDate)}`);
+
+	const content: ReactNode = (
+		<>
+			<span className="font-medium">{item.title ?? "—"}</span>
+			{item.highlightedSnippet && (
+				<p className="text-sm text-muted-foreground">{item.highlightedSnippet}</p>
+			)}
+			{subtitleParts.length > 0 && (
+				<p className="text-sm text-muted-foreground">{subtitleParts.join(" · ")}</p>
+			)}
+		</>
+	);
+
+	// Only render a drill-down link when the source explicitly configures a
+	// routePattern. Without one, content rows render as plain (non-linked) rows
+	// so they never navigate to an unbuilt detail route.
+	const href = source.routePattern ? resolveRoute(source.routePattern, item) : null;
+	if (href) {
+		return (
+			<Link
+				to={href}
+				className="block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors"
+				aria-label={`View content: ${item.title}`}
+			>
+				{content}
+			</Link>
+		);
+	}
+
+	return <div className="px-3 -mx-3 py-1">{content}</div>;
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/results/resolveResultRenderer.ts

@@ -0,0 +1,49 @@
+/**
+ * Single source of truth for choosing how one source's result node is rendered.
+ *
+ * Every result layout (`SearchResults`, `MergedSearchResults`, and any future
+ * grid/list) MUST resolve its per-node renderer through this helper so the
+ * kind-aware default can never be missed in one mode. The rule, in order:
+ *
+ *   1. A `renderResult[source.key]` config override wins in EVERY mode —
+ *      including `false`, which hides the source entirely.
+ *   2. Otherwise `source.kind === "cms"` → {@link CmsResultRow}.
+ *   3. Otherwise (SObject) → {@link DefaultResultRow}.
+ *
+ * Returning the same union the callers already use (`renderer | false`) lets a
+ * component early-return `null` for a hidden source without special-casing.
+ */
+
+import { createElement, type ReactNode } from "react";
+import type { SourceConfig } from "../../types";
+import { DefaultResultRow } from "./DefaultResultRow";
+import { CmsResultRow } from "./CmsResultRow";
+
+/** A per-node renderer, or `false` to hide the source's results. */
+export type ResultRenderer = ((node: unknown) => ReactNode) | false;
+
+/**
+ * Resolves the renderer for one source. See the module doc for the precedence
+ * rules. `renderResult` is the optional per-source override map from `<Search>`.
+ */
+export function resolveResultRenderer(
+	source: SourceConfig,
+	renderResult?: Record<string, ResultRenderer>,
+): ResultRenderer {
+	const override = renderResult?.[source.key];
+	// A config override wins in every mode — including `false` (hide).
+	if (override !== undefined) return override;
+
+	// Assign a `displayName` so React DevTools shows a readable label for the
+	// per-node component factory and the `react/display-name` lint rule is
+	// satisfied. (This is a debug label only — it does not affect reference
+	// identity; a new function is still created on each call.)
+	if (source.kind === "cms") {
+		const renderCmsRow = (node: unknown) => createElement(CmsResultRow, { node, source });
+		renderCmsRow.displayName = "CmsResultRowRenderer";
+		return renderCmsRow;
+	}
+	const renderDefaultRow = (node: unknown) => createElement(DefaultResultRow, { node, source });
+	renderDefaultRow.displayName = "DefaultResultRowRenderer";
+	return renderDefaultRow;
+}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/config.json

@@ -1,5 +1,6 @@
 {
   "pagination": {
+    "mode": "per-source",
     "pageSize": 10,
     "pageSizeOptions": [5, 10, 20]
   },
@@ -38,7 +39,6 @@
       "objectName": "Contact",
       "label": "Contacts",
       "labelSingular": "Contact",
-      "routePattern": "/contacts/:id",
       "searchableFields": ["Name", "Email", "Phone"],
       "displayFields": [
         "Name",
@@ -58,7 +58,6 @@
       "objectName": "Opportunity",
       "label": "Opportunities",
       "labelSingular": "Opportunity",
-      "routePattern": "/opportunities/:id",
       "searchableFields": ["Name"],
       "displayFields": [
         "Name",
@@ -78,6 +77,12 @@
         { "field": "Name", "label": "Name" }
       ],
       "defaultSort": { "field": "CloseDate", "direction": "DESC" }
+    },
+    {
+      "kind": "cms",
+      "key": "content",
+      "label": "Content",
+      "labelSingular": "Content"
     }
   ]
 }

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/constants.ts

@@ -0,0 +1,8 @@
+/**
+ * Minimum trimmed keyword length before a search fires. Both the SObject and
+ * CMS search backends reject terms shorter than this (returning errors that the
+ * UI would otherwise render as "Search failed for this source." on every
+ * source), so the query is gated client-side until the user types at least this
+ * many characters. Shared so every `<Search>` consumer inherits the same floor.
+ */
+export const MIN_QUERY_LENGTH = 3;