dataset-dropdown.tsx

Overview

dataset-dropdown.tsx defines a React functional component named DatasetDropdown that provides a contextual dropdown menu for managing a dataset entity (IKnowledge). The dropdown menu offers options to rename or delete the dataset, integrating user interaction with backend operations via custom hooks. It leverages reusable UI components such as dropdown menus and confirmation dialogs to ensure a consistent and accessible user experience.

This component is primarily used within dataset management views or lists, where each dataset item can be interacted with through this dropdown menu.

Detailed Description

DatasetDropdown Component

Purpose

Renders a dropdown menu attached to any passed child element. This menu allows users to rename or delete a specific dataset (IKnowledge).

Props

{
  children: React.ReactNode;
  showDatasetRenameModal: (dataset: IKnowledge) => void;
  dataset: IKnowledge;
}

• children: The React element(s) that will trigger the dropdown menu when interacted with. Typically, this could be an icon, button, or any clickable UI element.

• showDatasetRenameModal: A callback function that opens a modal or UI for renaming the dataset. It receives the current dataset as a parameter.

• dataset: The dataset object (IKnowledge) for which the dropdown operates. Contains all dataset-related information including its unique identifier.

Internal Hooks & State

• useTranslation(): From react-i18next, used for localization of UI strings (common.rename, common.delete).

• useDeleteKnowledge(): Custom hook providing the deleteKnowledge function to delete a dataset by its id.

Event Handlers

• handleShowDatasetRenameModal

  • Type: MouseEventHandler<HTMLDivElement>

  • Description: Stops event propagation and triggers the rename modal by invoking showDatasetRenameModal with the current dataset.

  • Dependencies: dataset, showDatasetRenameModal

  • Usage:

    <DropdownMenuItem onClick={handleShowDatasetRenameModal}>
      {t('common.rename')} <PenLine />
    </DropdownMenuItem>
    

• handleDelete

  • Type: MouseEventHandler<HTMLDivElement>

  • Description: Calls the deleteKnowledge function with the dataset's id to remove the dataset.

  • Dependencies: dataset.id, deleteKnowledge

  • Usage: Passed as onOk handler to ConfirmDeleteDialog.

JSX Structure and UI Components

• DropdownMenu: Root component for the dropdown.

• DropdownMenuTrigger: Wraps children to trigger the menu on interaction.

• DropdownMenuContent: Contains dropdown items.

• DropdownMenuItem: Represents actionable items inside the dropdown.

• DropdownMenuSeparator: Visual separator between menu groups.

• ConfirmDeleteDialog: Wraps the delete menu item to prompt user confirmation before deletion.

The menu includes:

1. Rename Option

   • Label: localized "Rename"

   • Icon: <PenLine />

   • Action: Opens rename modal

2. Separator

3. Delete Option

   • Label: localized "Delete"

   • Icon: <Trash2 />

   • Wrapped in a confirmation dialog to prevent accidental deletion

   • Styled with text-state-error to indicate destructive action

Usage Example

import { DatasetDropdown } from './dataset-dropdown';
import { IKnowledge } from '@/interfaces/database/knowledge';

function DatasetItem({ dataset }: { dataset: IKnowledge }) {
  const { showDatasetRenameModal } = useRenameDataset();

  return (
    <DatasetDropdown dataset={dataset} showDatasetRenameModal={showDatasetRenameModal}>
      <button>Options</button>
    </DatasetDropdown>
  );
}

Important Implementation Details

• Event Propagation Control:
  The component carefully stops event propagation (e.stopPropagation()) in handlers to prevent the dropdown or parent components from reacting to click events unintentionally. This is especially important in nested or complex UI trees to avoid UI glitches.

• Confirmation Dialog for Deletion:
  The delete action is wrapped in a ConfirmDeleteDialog component, ensuring destructive operations require explicit user confirmation, which improves UX safety.

• Localization:
  Uses the useTranslation hook for all user-facing text, enabling multi-language support seamlessly.

• Hooks Usage:
  Encapsulates side effects and data mutations (like deletion) into custom hooks (useDeleteKnowledge) to maintain separation of concerns and promote reusability.

Interaction with Other Parts of the System

• useRenameDataset (local import):
  Provides the function to open the rename modal. This suggests that DatasetDropdown relies on external state or modal management handled by this hook.

• useDeleteKnowledge (global hook):
  Handles API interaction or state mutation to delete a dataset from the database or store.

• UI Components (DropdownMenu, ConfirmDeleteDialog):
  These components are part of the shared UI library under @/components/ui and @/components, ensuring consistent styling and behavior across the app.

• Interface IKnowledge:
  Represents the dataset entity, likely containing properties such as id, name, and metadata. This interface is imported from the database schema definitions.

Mermaid Component Diagram

componentDiagram
    component DatasetDropdown {
      +children: ReactNode
      +dataset: IKnowledge
      +showDatasetRenameModal(dataset)
      +handleShowDatasetRenameModal(e)
      +handleDelete()
    }
    component DropdownMenu
    component DropdownMenuTrigger
    component DropdownMenuContent
    component DropdownMenuItem
    component DropdownMenuSeparator
    component ConfirmDeleteDialog
    component useDeleteKnowledge
    component useRenameDataset
    component useTranslation

    DatasetDropdown --> DropdownMenu
    DropdownMenu --> DropdownMenuTrigger
    DropdownMenu --> DropdownMenuContent
    DropdownMenuContent --> DropdownMenuItem
    DropdownMenuContent --> DropdownMenuSeparator
    DropdownMenuContent --> ConfirmDeleteDialog
    ConfirmDeleteDialog --> DropdownMenuItem
    DatasetDropdown ..> useDeleteKnowledge : uses
    DatasetDropdown ..> useRenameDataset : uses
    DatasetDropdown ..> useTranslation : uses

Summary

dataset-dropdown.tsx provides a compact, reusable dropdown menu component tailored for dataset entities. It integrates UI controls for renaming and deleting datasets with proper user confirmation and localization. Through clean separation of concerns—delegating rename modal control and deletion logic to hooks and external components—it fits modularly into a larger dataset management system.

This component enhances user experience by providing an intuitive and safe interface for dataset operations while maintaining consistency with the app's UI/UX standards.