web-crawl-modal.tsx

Overview

web-crawl-modal.tsx defines a React functional component WebCrawlModal that renders a modal dialog for inputting web crawl details, specifically a name and a URL. This component is designed to be used in a UI where users can initiate a web crawling operation by providing a document name and a target URL.

The modal includes form validation to ensure that:

• The name is required and limited to a maximum length.

• The URL is required and matches a URL pattern.

Once the form is validated and submitted, the modal triggers a callback with the input data.

Detailed Explanation

Component: WebCrawlModal

Purpose

WebCrawlModal is a modal dialog component that collects two pieces of information from the user:

• Name: A short textual identifier for the web crawl document.

• URL: The URL to be crawled, which must be valid.

It ensures inputs are validated before submission and exposes hooks to manage modal visibility and handle submission.

Props

interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
  loading: boolean;
  onOk: (name: string, url: string) => void;
  showModal?(): void;
}

• visible (boolean, from IModalManagerChildrenProps): Controls the visibility of the modal.

• hideModal (function, from IModalManagerChildrenProps): Function to hide/close the modal.

• loading (boolean): Indicates if some loading state is active (not used internally in the component currently).

• onOk (function): Callback invoked when the modal form is successfully submitted. Receives the validated name and url strings.

• showModal (optional function): Provided by the modal manager, but omitted here.

Internal Hooks and State

• const [form] = Form.useForm();
  Ant Design's form instance for managing form data and validation.

• const { t } = useTranslate('knowledgeDetails');
  Custom hook to retrieve translated strings scoped to the "knowledgeDetails" namespace. Used for modal title.

Methods

• handleOk:
  An asynchronous function that:

  1. Validates form fields (name, url).

  2. If successful, calls onOk with the entered name and url.

  const handleOk = async () => {
    const values = await form.validateFields();
    onOk(values.name, values.url);
  };
  

Render Output

The component renders an Ant Design <Modal> with:

• title: Localized string for "webCrawl".

• open: Controlled by visible prop.

• onOk: Calls handleOk.

• onCancel: Calls hideModal to close the modal.

Inside the modal, an Ant Design <Form> with two <Form.Item>s:

1. Name Field

   • Label: "Name"

   • Validation: required, max length 10 (Note: message says 128, but max is 10 in rules — potential inconsistency)

   • Input placeholder: "Document name"

2. URL Field

   • Label: "URL"

   • Validation: required, matches URL regex pattern

   • Input placeholder: "https://www.baidu.com"

Usage Example

import React, { useState } from 'react';
import WebCrawlModal from './web-crawl-modal';

const Example = () => {
  const [visible, setVisible] = useState(false);

  const handleOk = (name: string, url: string) => {
    console.log('Starting web crawl:', name, url);
    setVisible(false);
    // Trigger web crawl logic here
  };

  return (
    <>
      <button onClick={() => setVisible(true)}>Start Web Crawl</button>
      <WebCrawlModal
        visible={visible}
        hideModal={() => setVisible(false)}
        loading={false}
        onOk={handleOk}
      />
    </>
  );
};

Important Implementation Details

• Form validation uses Ant Design's Form component rules:

  • The URL regex pattern is a simple but effective way to ensure URLs start with a valid protocol (http, https, ftp, or file) and contain valid URL characters.

  • The max length for "name" is set to 10 characters in the rule, but the error message says 128 characters, which might be a bug or inconsistency to be fixed.

• Modal visibility is controlled externally via the visible prop and hideModal callback, suggesting this component is managed by a modal manager or parent component.

• The component uses a translation hook (useTranslate) ensuring UI text is localized.

Interactions with Other System Parts

• Modal Manager:
  The component extends IModalManagerChildrenProps (excluding showModal), indicating it is designed to be used within a modal management system that controls visibility and lifecycle.

• Translation System:
  Uses a hook useTranslate for internationalization/localization.

• Parent Components:
  The parent component controls visibility and handles the submission via onOk, likely triggering downstream processes such as starting a web crawling job or updating a data store.

Visual Diagram: Component Structure and Workflow

componentDiagram
    direction TB
    component WebCrawlModal {
      +visible: boolean
      +hideModal(): void
      +onOk(name: string, url: string): void
      -form: FormInstance
      -handleOk()
    }
    WebCrawlModal --> Modal
    WebCrawlModal --> Form
    Form --> FormItem_Name
    Form --> FormItem_URL
    WebCrawlModal ..> useTranslate : uses

    note right of WebCrawlModal
      1. Receives visible, hideModal, onOk props  
      2. Renders Modal containing Form  
      3. Validates input fields on OK  
      4. Calls onOk callback with validated inputs
    end note

Summary

web-crawl-modal.tsx provides a reusable, validated modal form component for collecting web crawl parameters (name and URL). It leverages Ant Design UI components and form validation, integrates with a modal management system, and supports internationalization. The component cleanly separates UI concerns from business logic by delegating the actual crawl initiation to the parent via the onOk callback.