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

Author: KodudulaAshishUiPath

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' })
+      }
     />
   );
 });

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