fix(apollo-react): default add-node search placeholder to "Search nodes" [MST-11831]

Author: KodudulaAshishUiPath

packages/apollo-react/src/canvas/components/AddNodePanel/AddNodePanel.test.tsx

@@ -22,9 +22,11 @@ vi.mock('../Toolbox', () => ({
     onClose,
     onItemSelect,
     renderEmptyState,
+    searchPlaceholder,
   }: ToolboxProps<NodeItemData>) => (
     <div data-testid="toolbox-mock">
       <div data-testid="toolbox-title">{title}</div>
+      <div data-testid="toolbox-search-placeholder">{searchPlaceholder}</div>
       <div data-testid="toolbox-items">{JSON.stringify(initialItems)}</div>
       <button type="button" data-testid="toolbox-close" onClick={onClose}>
         Close
@@ -121,6 +123,26 @@ describe('AddNodePanel', () => {
     expect(screen.getByTestId('toolbox-title')).toHaveTextContent('Add node');
   });
 
+  it('should default the search placeholder to "Search nodes"', () => {
+    render(
+      <NodeRegistryProvider manifest={mockManifest}>
+        <AddNodePanel {...defaultProps} />
+      </NodeRegistryProvider>
+    );
+
+    expect(screen.getByTestId('toolbox-search-placeholder')).toHaveTextContent('Search nodes');
+  });
+
+  it('should forward a custom searchPlaceholder to Toolbox', () => {
+    render(
+      <NodeRegistryProvider manifest={mockManifest}>
+        <AddNodePanel {...defaultProps} searchPlaceholder="Search agents" />
+      </NodeRegistryProvider>
+    );
+
+    expect(screen.getByTestId('toolbox-search-placeholder')).toHaveTextContent('Search agents');
+  });
+
   it('should transform empty registry into empty list items', () => {
     render(
       <NodeRegistryProvider manifest={{ version: '1.0.0', categories: [], nodes: [] }}>

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: 'add-node-panel.search-nodes', message: 'Search nodes' })
+      }
     />
   );
 });

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<NodeItemData>;
+  /**
+   * Placeholder for the search input. Should describe what will be searched,
+   * such as "Search agents". Defaults to "Search nodes".
+   */
+  searchPlaceholder?: string;
 }

packages/apollo-react/src/canvas/components/Toolbox/Toolbox.test.tsx

@@ -47,6 +47,13 @@ describe('Toolbox', () => {
       expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
     });
 
+    it('should render a custom search placeholder when provided', () => {
+      render(<Toolbox {...defaultProps} searchPlaceholder="Search nodes" />);
+
+      expect(screen.getByPlaceholderText('Search nodes')).toBeInTheDocument();
+      expect(screen.queryByPlaceholderText('Search')).not.toBeInTheDocument();
+    });
+
     it('should render all items in ListView', () => {
       render(<Toolbox {...defaultProps} />);
 

packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx

@@ -80,6 +80,11 @@ export interface ToolboxProps<T> {
   onItemHover?: (item: ListItem<T>) => void;
   onBack?: () => void;
   onSearch?: ToolboxSearchHandler<T>;
+  /**
+   * 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<T>({
   fullHeight = false,
   quickActions,
   renderEmptyState,
+  searchPlaceholder: searchPlaceholderProp,
 }: ToolboxProps<T>) {
   const { _ } = useSafeLingui();
-  const searchPlaceholder = _({ id: 'toolbox.search', message: 'Search' });
+  const searchPlaceholder = searchPlaceholderProp ?? _({ id: 'toolbox.search', message: 'Search' });
   const [items, setItems] = useState<ListItem<T>[]>(initialItems);
   const [search, setSearch] = useState('');
   const [searchLoading, setSearchLoading] = useState(false);
@@ -203,7 +209,10 @@ export function Toolbox<T>({
   const wrappedRenderEmptyState = useMemo(
     () =>
       renderEmptyState && !isSearching
-        ? () => renderEmptyState({ currentCategory: currentParentItem ?? undefined })
+        ? () =>
+            renderEmptyState({
+              currentCategory: currentParentItem ?? undefined,
+            })
         : undefined,
     [renderEmptyState, isSearching, currentParentItem]
   );

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",
+  "add-node-panel.search-nodes": "Search nodes",
   "toolbox.search": "Search",
   "loop-node.add-node": "Add node to loop",
   "loop-node.mode.parallel": "Parallel",