search-dropdown.tsx

Overview

search-dropdown.tsx defines a React functional component named SearchDropdown that provides a user interface dropdown menu for managing search datasets. The dropdown facilitates two main actions on a search dataset: renaming and deleting. It integrates with application state and hooks to perform these operations, while offering a clean and accessible UI through reusable dropdown and dialog components.

This component is typically used in contexts where a user can manage saved search configurations or queries, enabling quick contextual actions without navigating away from the current view.

Detailed Description

Component: SearchDropdown

Purpose

Renders a dropdown menu triggered by its child element(s) that allows the user to:

• Rename the current search dataset (opens a rename modal).

• Delete the current search dataset (opens a confirmation dialog before deletion).

Props

Internal Hooks and Functions

• useTranslation: Hook from react-i18next used for internationalization, providing translated strings for the UI labels ("rename", "delete").

• useDeleteSearch: Custom hook imported from local ./hooks which provides a deleteSearch function to delete a dataset by its id.

• handleShowChatRenameModal: Memoized click handler that stops event propagation and calls the showSearchRenameModal callback with the current dataset.

• handleDelete: Memoized function that calls deleteSearch with the current dataset's id to perform deletion.

Returned JSX Structure

• DropdownMenu: The root dropdown container.

• DropdownMenuTrigger: Wraps children and acts as the clickable element to open the dropdown.

• DropdownMenuContent: Contains dropdown items:

  • Rename Item: Clicking triggers the rename modal.

  • Separator: Visual separator between menu items.

  • Delete Item: Wrapped inside ConfirmDeleteDialog which asks for confirmation before calling deletion logic.

Usage Example

import { SearchDropdown } from './search-dropdown';
import { ISearchAppProps } from './hooks';

function Example() {
  const dataset: ISearchAppProps = { id: '123', name: 'My Search' };

  const showRenameModal = (ds: ISearchAppProps) => {
    // Logic to open rename modal for ds
    console.log('Rename modal for:', ds.name);
  };

  return (
    <SearchDropdown dataset={dataset} showSearchRenameModal={showRenameModal}>
      <button>Options</button>
    </SearchDropdown>
  );
}

Important Implementation Details

• Event Propagation Control: The component carefully uses e.stopPropagation() in event handlers to prevent clicks on menu items from bubbling up to parent elements, which might interfere with other UI logic.

• Confirmation Workflow: The delete action is wrapped inside a ConfirmDeleteDialog component to ensure user confirmation before irreversible deletion occurs.

• Memoization: useCallback is used to optimize performance by ensuring handlers do not change unnecessarily on re-renders unless dependencies change.

• Accessibility: By using the DropdownMenu and related components, the dropdown likely adheres to accessibility standards (keyboard navigation, ARIA attributes), although this depends on their internal implementations.

Interaction with Other Parts of the System

• UI Components: Relies on reusable UI primitives from @/components/ui/dropdown-menu such as DropdownMenu, DropdownMenuItem, and DropdownMenuTrigger.

• Icons: Uses PenLine and Trash2 icons from lucide-react to visually enhance the rename and delete menu items.

• Localization: Integrates with the react-i18next translation framework for UI text.

• Hooks: Utilizes custom hooks (useDeleteSearch) from the local ./hooks module for business logic related to deleting search datasets.

• Confirmation Dialog: Uses ConfirmDeleteDialog from @/components/confirm-delete-dialog to handle user confirmation before deletion.

Mermaid Component Diagram

componentDiagram
    component SearchDropdown {
      +children: ReactNode
      +dataset: ISearchAppProps
      +showSearchRenameModal(dataset)
    }
    component DropdownMenu
    component DropdownMenuTrigger
    component DropdownMenuContent
    component DropdownMenuItem
    component DropdownMenuSeparator
    component ConfirmDeleteDialog
    component useDeleteSearch (hook)
    component useTranslation (hook)
    component PenLine (icon)
    component Trash2 (icon)

    SearchDropdown --> DropdownMenu
    DropdownMenu --> DropdownMenuTrigger
    DropdownMenu --> DropdownMenuContent
    DropdownMenuContent --> DropdownMenuItem: Rename
    DropdownMenuContent --> DropdownMenuSeparator
    DropdownMenuContent --> ConfirmDeleteDialog
    ConfirmDeleteDialog --> DropdownMenuItem: Delete
    SearchDropdown --> useDeleteSearch
    SearchDropdown --> useTranslation
    DropdownMenuItem: Rename --> PenLine
    DropdownMenuItem: Delete --> Trash2

Summary

The SearchDropdown component provides a compact, localized, and accessible dropdown menu interface for managing search datasets with rename and delete functionalities. It leverages modular UI components, custom hooks, and confirmation dialogs to deliver a robust user experience while maintaining clean separation of concerns in the codebase.