saving-button.tsx

Overview

This file defines two React functional components, GeneralSavingButton and SavingButton, which provide user interface elements for saving "knowledge configuration" data in a form-driven React application. Both components integrate with hooks that manage form state and asynchronous updates to a backend knowledge configuration resource. They utilize a custom loading button component to provide visual feedback during save operations and leverage React Hook Form for form state management and validation.

These buttons are designed for different usage scenarios or form structures within the application but share the core functionality of validating form input and submitting updated knowledge configuration data. The file interacts with other parts of the system via hooks (useUpdateKnowledge, useFormContext) and routing parameters (useParams), and it supports internationalization through react-i18next.

Components

GeneralSavingButton

Description

A saving button component that validates a single form field (name) before submitting knowledge configuration changes. It also retrieves some default form values for use in the submission. This component is suitable when you want to trigger a save operation that depends on a partial validation or specific form fields.

Usage

Insert <GeneralSavingButton /> inside a component wrapped by a FormProvider from react-hook-form to access form context.

Implementation Details

• Uses useFormContext to access the form state and helpers.

• Uses useUpdateKnowledge hook to obtain the saveKnowledgeConfiguration function and loading state.

• Retrieves the knowledge base ID (kb_id) from URL parameters via useParams.

• Uses useTranslation for i18n support on the button label.

• Uses useMemo to memoize defaultValues from the form state to extract parser_id.

• On button click, asynchronously triggers validation for the name field.

• If validation passes, calls saveKnowledgeConfiguration with the relevant data including kb_id, parser_id, and form values (name, description, avatar, permission).

Parameters

This component takes no props; it relies on context and hooks.

Returns

A React element rendering a ButtonLoading component with loading state and onClick handler.

Example

import { useForm, FormProvider } from 'react-hook-form';

function KnowledgeConfigForm() {
  const methods = useForm({ defaultValues: { name: '', description: '', parser_id: '' } });

  return (
    <FormProvider {...methods}>
      {/* form fields */}
      <GeneralSavingButton />
    </FormProvider>
  );
}

SavingButton

Description

Another saving button component that performs full form validation on submit and handles the save operation for knowledge configuration. It uses a more general form validation approach and submits all form values except the avatar field.

Usage

Use <SavingButton /> similarly within a form context that supports React Hook Form.

Implementation Details

• Accesses form context via useFormContext.

• Calls saveKnowledgeConfiguration from the useUpdateKnowledge hook.

• Retrieves kb_id from route parameters.

• On click, triggers form validation for the entire form via form.formControl.trigger().

• If valid, submits the form values via form.handleSubmit, excluding the avatar field from the payload.

• Includes error handling with try-catch to log any exceptions during submission.

Parameters

No props; depends on hooks and context.

Returns

Returns a React element displaying a ButtonLoading with loading feedback and an asynchronous save handler.

Example

import { useForm, FormProvider } from 'react-hook-form';

function FullKnowledgeConfigForm() {
  const methods = useForm();

  return (
    <FormProvider {...methods}>
      {/* form inputs */}
      <SavingButton />
    </FormProvider>
  );
}

Important Implementation Details

• Form Validation:

  • GeneralSavingButton performs targeted validation on the name field using form.trigger('name').

  • SavingButton triggers validation on the entire form using form.formControl.trigger().

• Async Handling:
  Both components use immediately invoked async functions in the click handler to handle asynchronous form validation and API calls.

• State Management:
  Both components use React Hook Form for form state management and validation.

• Loading State:
  The ButtonLoading component receives a loading prop from the useUpdateKnowledge hook to display a loading spinner during submission.

• Data Submission:
  The saveKnowledgeConfiguration function likely performs an API request to update knowledge configuration on the backend, passing an object containing the knowledge base ID and relevant form values.

• Internationalization:
  Button labels are translated via t('knowledgeConfiguration.save').

Interactions with Other Parts of the System

• useUpdateKnowledge hook:
  Provides the save function and loading state, probably encapsulating API interaction for updating knowledge configurations.

• useFormContext (from react-hook-form):
  Connects the button components to the form state and validation mechanisms.

• useParams (from umi):
  Extracts the knowledge base ID from the route parameters.

• ButtonLoading component:
  A UI component rendering a button with built-in loading state feedback.

• useTranslation (from react-i18next):
  Provides localized text for the button label.

File Structure Diagram

componentDiagram
    component GeneralSavingButton {
        +form: useFormContext()
        +saveKnowledgeConfiguration: useUpdateKnowledge()
        +kb_id: useParams()
        +t: useTranslation()
        +defaultValues: useMemo()
        onClick() : async
    }

    component SavingButton {
        +form: useFormContext()
        +saveKnowledgeConfiguration: useUpdateKnowledge()
        +kb_id: useParams()
        +t: useTranslation()
        onClick() : async
    }

    GeneralSavingButton --> ButtonLoading : renders
    SavingButton --> ButtonLoading : renders
    GeneralSavingButton ..> useUpdateKnowledge : uses
    SavingButton ..> useUpdateKnowledge : uses
    GeneralSavingButton ..> useFormContext : uses
    SavingButton ..> useFormContext : uses
    GeneralSavingButton ..> useParams : uses
    SavingButton ..> useParams : uses
    GeneralSavingButton ..> useTranslation : uses
    SavingButton ..> useTranslation : uses

Summary

The saving-button.tsx file provides two reusable React button components to handle the saving of knowledge configuration data in a form-based UI. They incorporate form validation, asynchronous submission, loading state management, and internationalization to offer a smooth user experience. These components tightly integrate with hooks managing form state and backend communication, making them crucial parts of the knowledge configuration editing workflow within the application.