link-to-dataset-dialog.tsx

Overview

link-to-dataset-dialog.tsx is a React component file that provides a user interface dialog for linking datasets to one or more knowledge bases within an application. It implements a modal dialog with a multi-select form, enabling users to choose multiple knowledge items to associate with a dataset.

This file primarily exports the LinkToDatasetDialog component, which encapsulates the dialog UI, and the internal LinkToDatasetForm component, which handles the form logic and input controls. The dialog integrates tightly with form validation, localization, and asynchronous loading states, making it a reusable and user-friendly component for managing dataset-knowledge relationships.

Components and Functions

1. LinkToDatasetForm (React Functional Component)

Purpose

Renders the form inside the dialog that allows users to select multiple knowledge items to link with a dataset.

Props

interface LinkToDatasetFormProps {
  initialConnectedIds: string[];
  onConnectToKnowledgeOk: (knowledgeIds: string[]) => void;
}

• initialConnectedIds: An array of strings representing the initially selected knowledge IDs.

• onConnectToKnowledgeOk: Callback function triggered when the form is successfully submitted, passing the selected knowledge IDs.

Internal Details

• Uses react-hook-form with zodResolver for form state management and validation.

• Validation schema (FormSchema) requires an array of strings (knowledgeIds) with a minimum length of 0 (allowing empty selection).

• Uses a custom hook useSelectKnowledgeOptions to fetch/select knowledge options available for multi-select.

• On submission, calls onConnectToKnowledgeOk with the selected knowledge IDs.

• Uses UI components like Form, FormField, MultiSelect, and localization via useTranslation.

Return

JSX form element with:

• A multi-select dropdown for choosing knowledge bases.

• Validation error messages.

• Localization support for labels and placeholder.

Usage Example

<LinkToDatasetForm
  initialConnectedIds={['id1', 'id2']}
  onConnectToKnowledgeOk={(ids) => console.log('Selected knowledge IDs:', ids)}
/>

2. LinkToDatasetDialog (React Functional Component)

Purpose

Provides a modal dialog wrapper around LinkToDatasetForm, including header, footer, and submit button with loading state.

Props

interface LinkToDatasetDialogProps extends IModalProps<any> {
  initialConnectedIds: string[];
  onConnectToKnowledgeOk: (knowledgeIds: string[]) => void;
  loading: boolean;
}

• hideModal: Function to close/hide the modal dialog.

• initialConnectedIds: Array of initially selected knowledge IDs passed down to the form.

• onConnectToKnowledgeOk: Callback triggered on form submission.

• loading: Boolean to indicate if the save operation is in progress, disables submit button and shows loading state.

Internal Details

• Uses UI components like Dialog, DialogContent, DialogHeader, DialogFooter, and ButtonLoading.

• The submit button is linked to the form via form attribute using FormId.

• Localization used for dialog title and button text.

• The dialog is controlled and can be closed via hideModal.

Return

JSX dialog element structured as:

• Title: "Add to Knowledge" (localized)

• LinkToDatasetForm embedded as form content.

• Footer with a loading-enabled submit button (with icon).

Usage Example

<LinkToDatasetDialog
  hideModal={() => setShowDialog(false)}
  initialConnectedIds={['id1']}
  onConnectToKnowledgeOk={(ids) => saveKnowledgeLink(ids)}
  loading={isSaving}
/>

Important Implementation Details

• Form Validation: Uses zod schema and react-hook-form's zodResolver for declarative, type-safe validation.

• Localization: Utilizes react-i18next (useTranslation) for text labels, ensuring multi-language support.

• MultiSelect Component: Custom UI multi-select component allows selection of multiple knowledge IDs with a max count of 100.

• Loading State: The submit button disables and shows a spinner when loading to prevent duplicate submissions.

• Modal Control: Uses controlled Dialog open state and onOpenChange handler linked to hideModal for dialog visibility.

Interaction with Other Parts of the System

• UI Components:

  • Imports Dialog, ButtonLoading, Form and related UI components from the shared UI library (@/components/ui).

• Hooks:

  • Uses useSelectKnowledgeOptions to fetch/select knowledge options from knowledge base data.

  • Expects UseHandleConnectToKnowledgeReturnType types for props shaping.

• Forms:

  • Relies on react-hook-form for form state management.

• Localization:

  • Integrates with global i18n using react-i18next.

• Icons:

  • Uses Link2 icon from lucide-react for UI consistency.

Mermaid Component Diagram

componentDiagram
    LinkToDatasetDialog <|-- LinkToDatasetForm

    LinkToDatasetDialog : +hideModal()
    LinkToDatasetDialog : +initialConnectedIds: string[]
    LinkToDatasetDialog : +onConnectToKnowledgeOk(ids: string[]): void
    LinkToDatasetDialog : +loading: boolean

    LinkToDatasetForm : +initialConnectedIds: string[]
    LinkToDatasetForm : +onConnectToKnowledgeOk(ids: string[]): void
    LinkToDatasetForm : -form: react-hook-form instance
    LinkToDatasetForm : -options: knowledge options[]
    LinkToDatasetForm : +onSubmit(data): void

    LinkToDatasetDialog o-- Dialog
    LinkToDatasetDialog o-- DialogContent
    LinkToDatasetDialog o-- DialogHeader
    LinkToDatasetDialog o-- DialogFooter
    LinkToDatasetDialog o-- ButtonLoading

    LinkToDatasetForm o-- Form
    LinkToDatasetForm o-- MultiSelect
    LinkToDatasetForm o-- FormField

Summary

The link-to-dataset-dialog.tsx file implements a modal dialog component for linking datasets to multiple knowledge bases. It leverages modern React form management, schema validation, localization, and UI libraries to provide a polished and accessible user experience. The separation between the dialog wrapper (LinkToDatasetDialog) and the form (LinkToDatasetForm) enables modularity and easier maintenance. This component is designed to integrate tightly into the broader application workflows for managing dataset metadata and knowledge relationships.