diff --git a/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.tsx b/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.tsx index 75554ace8..5a498f258 100644 --- a/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.tsx +++ b/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.tsx @@ -1,4 +1,5 @@ import { memo, useCallback, useMemo } from 'react'; +import { useSafeLingui } from '../../../i18n'; import { useOptionalNodeTypeRegistry } from '../../core'; import { usePreviewNode } from '../../hooks'; import { type ListItem, Toolbox } from '../Toolbox'; @@ -21,7 +22,9 @@ export const AddNodePanel = memo(function AddNodePanel({ title, loading, renderEmptyState, + searchPlaceholder, }: AddNodePanelProps) { + const { _ } = useSafeLingui(); const registry = useOptionalNodeTypeRegistry(); const { previewNodeConnectionInfo } = usePreviewNode(); @@ -87,6 +90,9 @@ export const AddNodePanel = memo(function AddNodePanel({ onClose={onClose} onItemHover={onNodeHover} renderEmptyState={renderEmptyState} + searchPlaceholder={ + searchPlaceholder ?? _({ id: 'addNodePanel.searchNodes', message: 'Search nodes' }) + } /> ); }); diff --git a/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.types.ts b/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.types.ts index a9bb2abf0..4b76ba585 100644 --- a/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.types.ts +++ b/packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.types.ts @@ -29,4 +29,9 @@ export interface AddNodePanelProps { * When provided, replaces the built-in icon + message empty state. */ renderEmptyState?: ToolboxEmptyStateRenderer; + /** + * Placeholder for the search input. Should describe what will be searched, + * such as "Search agents". Defaults to "Search nodes". + */ + searchPlaceholder?: string; } diff --git a/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx b/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx index 3a3a68287..4fb6c306c 100644 --- a/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx +++ b/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx @@ -80,6 +80,11 @@ export interface ToolboxProps { onItemHover?: (item: ListItem) => void; onBack?: () => void; onSearch?: ToolboxSearchHandler; + /** + * Placeholder for the search input. Should describe what will be searched, + * such as "Search nodes". Defaults to a generic "Search". + */ + searchPlaceholder?: string; /** * Optional row of icon shortcuts rendered above the title. Apollo controls * the visuals so the strip stays consistent across consumers; pass the @@ -155,9 +160,10 @@ export function Toolbox({ fullHeight = false, quickActions, renderEmptyState, + searchPlaceholder: searchPlaceholderProp, }: ToolboxProps) { const { _ } = useSafeLingui(); - const searchPlaceholder = _({ id: 'toolbox.search', message: 'Search' }); + const searchPlaceholder = searchPlaceholderProp ?? _({ id: 'toolbox.search', message: 'Search' }); const [items, setItems] = useState[]>(initialItems); const [search, setSearch] = useState(''); const [searchLoading, setSearchLoading] = useState(false); @@ -203,7 +209,10 @@ export function Toolbox({ const wrappedRenderEmptyState = useMemo( () => renderEmptyState && !isSearching - ? () => renderEmptyState({ currentCategory: currentParentItem ?? undefined }) + ? () => + renderEmptyState({ + currentCategory: currentParentItem ?? undefined, + }) : undefined, [renderEmptyState, isSearching, currentParentItem] ); diff --git a/packages/apollo-react/src/canvas/locales/en.json b/packages/apollo-react/src/canvas/locales/en.json index 88c1ad029..eb6f4cdb6 100644 --- a/packages/apollo-react/src/canvas/locales/en.json +++ b/packages/apollo-react/src/canvas/locales/en.json @@ -44,6 +44,7 @@ "sticky-note.toolbar.color": "Color", "sticky-note.toolbar.delete": "Delete", "sticky-note.toolbar.edit": "Edit", + "addNodePanel.searchNodes": "Search nodes", "toolbox.search": "Search", "loop-node.add-node": "Add node to loop", "loop-node.mode.parallel": "Parallel",