metadata-filter-conditions.tsx

Overview

metadata-filter-conditions.tsx defines a React functional component named MetadataFilterConditions that provides a user interface for dynamically adding, removing, and configuring metadata-based filter conditions within a form. It is designed to work with knowledge base metadata fetched based on provided knowledge base IDs (kbIds). This component is typically used in contexts where users need to specify filtering criteria against metadata fields, including choosing metadata keys, operators, and corresponding values.

The component leverages Ant Design's form and UI components (Form.List, Input, Select, Dropdown, etc.), integrates with internationalization (react-i18next), and uses custom hooks for fetching metadata and building operator options. It supports adding multiple filter conditions and provides a dropdown menu to quickly add conditions based on available metadata keys.

Detailed Explanation

Component: MetadataFilterConditions

export function MetadataFilterConditions({ kbIds }: { kbIds: string[] }): JSX.Element

Purpose

Renders a dynamic list of metadata filter conditions allowing users to add or remove conditions. Each condition consists of:

• A metadata key (string)

• An operator (selected from options such as equals, not equals, etc.)

• A value (string)

Parameters

• kbIds: string[]
  An array of knowledge base IDs used to fetch relevant metadata keys and values.

Returns

• A JSX element containing the form list of metadata filter conditions.

Usage Example

// Inside a parent form component
<MetadataFilterConditions kbIds={['kb1', 'kb2']} />

This will render UI controls to add filter conditions based on metadata fetched for knowledge bases with IDs 'kb1' and 'kb2'.

Internal Implementation Details

Hooks and Data Fetching

• useFetchKnowledgeMetadata(kbIds):
  Custom hook that fetches metadata associated with the provided knowledge base IDs. Returns an object with a data property holding key-value pairs of metadata.

• useBuildSwitchOperatorOptions():
  Custom hook returning an array of operator options used in the operator <Select> dropdown. These options correspond to predefined filter operations (e.g., equals, not equals).

• useTranslation():
  Hook from react-i18next for internationalization support. All user-facing strings (e.g., placeholders, button labels, validation messages) are translated using this hook.

renderItems Callback

• Memoized callback that generates menu items for the dropdown used to add new filter conditions.

• If no metadata is available (metadata.data is empty), it returns a single menu item with an empty state <Empty> component.

• Otherwise, it creates a list of menu items keyed by metadata keys. Clicking on an item calls the add function from Ant Design's Form.List to add a new condition with that key, a default operator (first in SwitchOperatorOptions), and an empty value.

JSX Structure

• Uses Form.List from Ant Design to manage a dynamic list of conditions under the form path ['meta_data_filter', 'manual'].

• For each field in the list:

  • Renders three input controls:

    • Input for the metadata key (required).

    • Select for the operator (uses options from switchOperatorOptions).

    • Input for the value (required).

  • A remove icon (MinusCircleOutlined) to delete the condition.

• Below the list, a button with a dropdown menu to add new conditions based on available metadata keys.

Validation Rules

• Both the metadata key and value inputs are required fields, with validation messages displayed using the translated string 'common.pleaseInput'.

Interaction with Other System Components

• Hooks & Constants

  • Imports useFetchKnowledgeMetadata to retrieve metadata dynamically based on knowledge base IDs.

  • Uses SwitchOperatorOptions and useBuildSwitchOperatorOptions for populating the operator dropdown.

• UI Library

  • Depends heavily on Ant Design components for form handling and UI.

• Internationalization

  • Uses react-i18next for multilingual support.

• Icons

  • Uses Ant Design icons for add/remove UI affordances.

This component is most likely used inside a larger form or wizard where users define filters or rules for querying or displaying knowledge base content. It abstracts the complexity of interacting with metadata keys and operators, providing a clean user experience.

Visual Diagram

componentDiagram
    component MetadataFilterConditions {
        +props: { kbIds: string[] }
        +useFetchKnowledgeMetadata(kbIds)
        +useBuildSwitchOperatorOptions()
        +useTranslation()
        +renderItems(add)
        +return JSX (Form.List)
    }
    component "Form.List (antd)" {
        +fields: array of conditions
        +add(condition)
        +remove(index)
    }
    component "Dropdown Menu" {
        +items generated by renderItems
        +onClick: add condition
    }
    MetadataFilterConditions --> "Form.List (antd)" : renders
    MetadataFilterConditions --> "Dropdown Menu" : provides items
    MetadataFilterConditions ..> useFetchKnowledgeMetadata : fetch metadata
    MetadataFilterConditions ..> useBuildSwitchOperatorOptions : fetch operators
    MetadataFilterConditions ..> useTranslation : i18n

Summary

MetadataFilterConditions is a reusable React component designed for building dynamic metadata filter criteria in a form. It fetches metadata keys relevant to provided knowledge base IDs, offers operators via dropdown, and allows users to add/remove multiple filter conditions easily. The integration with Ant Design form components and internationalization makes it adaptable to complex form workflows in multilingual applications dealing with knowledge base filtering.

If you require further details on the imported hooks or constants (useFetchKnowledgeMetadata, SwitchOperatorOptions, useBuildSwitchOperatorOptions), please refer to their respective module documentation.