set-meta-dialog.tsx

Overview

set-meta-dialog.tsx defines a React functional component named SetMetaDialog that provides a user interface dialog for viewing and editing JSON meta data associated with a document or knowledge entry. This component leverages a rich code editor (Monaco Editor) to allow users to input or modify JSON-formatted metadata with validation and helpful tooltips. It integrates form state management, validation, and loading state feedback to offer a seamless and robust metadata editing experience.

Detailed Description

Component: SetMetaDialog

Purpose

SetMetaDialog is a modal dialog component that enables users to set or update the meta data of a document or knowledge item by entering JSON data. It validates the JSON input, displays error messages if invalid, and calls back to a parent handler on submission.

Props

Internal State & Hooks

• Translation (useTranslation): Used for internationalized string resources.

• Form Management (react-hook-form + zod):

  • zod schema validates the meta field as a non-empty, valid JSON string.

  • useForm manages form state and validation.

• Effect:

  • On initialMetaData change or initial mount, the JSON string representation (formatted with indentation) is set as the editor's value.

Form Validation

• Uses zod schema to ensure:

  • The meta field is a non-empty string.

  • The string is valid JSON parsable, otherwise an error message is displayed.

Submission Handling

• On submit, calls onOk with the JSON string from the editor.

• If onOk returns truthy, calls hideModal to close the dialog.

UI Elements

• Dialog: Modal container using imported Dialog UI components.

• Monaco Editor: Rich code editor configured for JSON with dark theme.

• Form Components: Label, validation messages, and tooltip with sanitized HTML content.

• ButtonLoading: Submit button that shows loading spinner when loading is true.

Usage Example

import React, { useState } from 'react';
import { SetMetaDialog } from './set-meta-dialog';
import { IDocumentInfo } from '@/interfaces/database/document';

function Example() {
  const [visible, setVisible] = useState(true);
  const [loading, setLoading] = useState(false);
  const initialMeta: IDocumentInfo['meta_fields'] = {
    author: 'John Doe',
    version: 1,
  };

  async function handleOk(metaJson: string) {
    setLoading(true);
    try {
      const meta = JSON.parse(metaJson);
      // Save meta to backend or state here...
      console.log('Saving meta:', meta);
      return true; // Indicate success
    } catch (e) {
      return false;
    } finally {
      setLoading(false);
    }
  }

  return (
    visible && (
      <SetMetaDialog
        hideModal={() => setVisible(false)}
        onOk={handleOk}
        loading={loading}
        initialMetaData={initialMeta}
      />
    )
  );
}

Important Implementation Details

• Monaco Editor Loader Configuration: The editor loader is configured with a path (/vs) to load the editor's web workers and assets correctly.

• Sanitization of Tooltip Content: Uses DOMPurify to sanitize HTML content provided by translations, avoiding XSS vulnerabilities in tooltips.

• Form Validation with Zod: JSON input is validated both for presence and parseability, providing immediate user feedback.

• Form Integration: Uses react-hook-form with zodResolver for schema-based validation, maintaining form state and error messages efficiently.

• Async Submission: The onOk function is awaited to handle asynchronous save operations, and the dialog closes only on successful completion.

Interaction with Other Parts of the System

• UI Library Components: Relies on a shared UI library for dialogs, buttons, and form controls (Dialog, ButtonLoading, Form, etc.), which standardizes the look and feel.

• Translation System: Uses react-i18next for internationalization, allowing dynamic string translation.

• Document Interface: The initialMetaData prop is typed as IDocumentInfo['meta_fields'], indicating that this component is tightly coupled with the document data model.

• Parent Components: Typically called by higher-level components or pages that manage document metadata editing workflows.

• Monaco Editor: Provides a powerful JSON editing experience embedded within the dialog.

Mermaid Diagram: Component Structure

componentDiagram
    direction LR
    SetMetaDialog -- uses --> Dialog
    SetMetaDialog -- uses --> Form
    SetMetaDialog -- uses --> MonacoEditor
    SetMetaDialog -- uses --> ButtonLoading
    SetMetaDialog -- uses --> DOMPurify
    SetMetaDialog -- uses --> useTranslation
    SetMetaDialog -- uses --> react-hook-form
    SetMetaDialog -- uses --> zod

Summary

set-meta-dialog.tsx is a React component designed to facilitate editing JSON metadata within a modal dialog, featuring rich editing capabilities, robust validation, and seamless integration with application state and UI frameworks. It serves as a crucial user interface element for managing structured metadata in a user-friendly way while ensuring data integrity and security.