query-table.tsx

Overview

query-table.tsx is a React functional component that renders a collapsible table displaying a list of query parameters or variables, typically representing input data for a flow or process. It is designed to present key details of each query item such as its key, name, type, and whether it is optional, along with providing user actions to edit or delete each record.

This component leverages Ant Design UI components (Table, Collapse, Tooltip, Space) for structured and interactive display, and uses icons from Ant Design icons library for action buttons. It also integrates internationalization support via react-i18next for multi-language text rendering.

Detailed Explanation

Component: QueryTable

Purpose

Displays a collapsible section containing a table of query items (BeginQuery[]), with columns for key, name, type, optional status, and action buttons (edit/delete).

Props

Return Value

• Returns a JSX element consisting of an Ant Design Collapse component that contains a Table displaying the data.

• The table columns are dynamically defined with localized titles and customized renderers for tooltip display and optional status formatting.

• Provides action icons for editing and deleting each row.

Usage Example

import React, { useState } from 'react';
import QueryTable from './query-table';
import { BeginQuery } from '../../interface';

const exampleData: BeginQuery[] = [
  { key: 'userId', name: 'User ID', type: 'string', optional: false },
  { key: 'age', name: 'Age', type: 'number', optional: true },
];

const MyComponent = () => {
  const [data, setData] = useState(exampleData);

  const deleteRecord = (index: number) => {
    setData(prev => prev.filter((_, i) => i !== index));
  };

  const showModal = (index: number, record: BeginQuery) => {
    // Show modal to edit the record
    console.log('Edit record', index, record);
  };

  return (
    <QueryTable data={data} deleteRecord={deleteRecord} showModal={showModal} />
  );
};

Implementation Details

Columns Definition

• Key and Name Columns: Both use the Ant Design Tooltip component to show the full text on hover if the content is truncated (ellipsis enabled).

• Type Column: Displays the type of the query parameter as-is.

• Optional Column: Renders a simple boolean display as 'Yes' or 'No' depending on the optional boolean value.

• Action Column: Renders two icons:

  • EditOutlined: triggers showModal with the record to allow editing.

  • DeleteOutlined: triggers deleteRecord to remove the record.

Styling and Localization

• Uses CSS module styles imported from index.less for scoped styling, e.g., for the collapse panel and title.

• Text labels are localized using the useTranslation hook from react-i18next, which allows the component to display the table headers and section titles in different languages based on user settings.

Component Structure

• The entire table is wrapped inside an Ant Design Collapse component with a single panel labeled as the input section (t('flow.input')).

• The table disables pagination, assuming manageable data size to display all records at once.

Interaction with Other System Parts

• Data Source: The component receives its data (BeginQuery[]) as a prop from a parent container or state management layer.

• Callbacks: The component does not manage state internally for data updates; instead, it relies on deleteRecord and showModal callbacks passed from parent components to handle user interactions.

• Internationalization: Integration with react-i18next suggests the component is part of a multilingual application.

• Styling: Uses scoped CSS modules (index.less), implying a modular style architecture.

• Interface Dependency: Depends on the BeginQuery interface (imported from ../../interface), which defines the shape of each query record (likely includes key, name, type, and optional fields).

Visual Diagram

componentDiagram
    component QueryTable {
        +data: BeginQuery[]
        +deleteRecord(index: number): void
        +showModal(index: number, record: BeginQuery): void
        +columns: TableColumns
        +render()
    }
    
    component Collapse {
        +items: CollapsePanel[]
    }
    
    component Table {
        +columns: TableColumns
        +dataSource: BeginQuery[]
        +pagination: boolean
    }
    
    QueryTable --> Collapse : renders inside
    Collapse --> Table : contains

Summary

query-table.tsx is a reusable, localized React component designed to display a list of query parameters in a neat, collapsible table with user-friendly tooltips and action controls for editing and deleting entries. It cleanly separates UI concerns from data management by delegating state changes to parent components via callbacks, making it adaptable in various application contexts that handle flow input variables or similar data structures.