variable-dialog.tsx

Overview

variable-dialog.tsx is a React component file defining a modal dialog interface for creating or editing "variables" within a flow or query system. It leverages a form with validation to collect variable properties such as a unique key, a reference, and a value. The dialog encapsulates user input with immediate validation feedback and integrates with the broader UI through reusable components.

The main export is VariableDialog, a modal dialog component that wraps a VariableForm form component. VariableForm handles form state management, validation, and submission using react-hook-form and zod schema validation.

This file is intended to be used anywhere in the application where users need to configure or modify variables that are part of a flow, query, or similar construct.

Exports

VariableDialog (Function Component)

Description

The VariableDialog component provides a modal dialog UI to create or edit a variable. It displays a form (VariableForm) inside a dialog box with header, content, and footer sections. The footer contains a submit button that triggers form submission.

Props

VariableDialog accepts the following combined props:

Usage Example

<VariableDialog
  initialValue={{ key: 'var1', ref: 'ref1', value: 'val1' }}
  otherThanCurrentQuery={[{ key: 'var2', ref: 'ref2', value: 'val2' }]}
  hideModal={() => setShowModal(false)}
  submit={(values) => console.log('Submitted:', values)}
/>

Internal Components and Functions

VariableForm (Function Component)

Description

VariableForm renders the form inside the dialog. It manages form state, validation, and submission using react-hook-form integrated with zod for schema validation. It provides fields for key, ref, and value with respective validations and UI controls.

Props

Form Fields & Validation

Implementation Details

• Uses zod for schema-based validation with a custom .refine() method to enforce unique key.

• Uses react-hook-form with zodResolver for seamless form integration and validation on change.

• Resets form values whenever initialValue changes via useEffect.

• Submits form data through submit callback passed from parent.

• Uses localized labels via useTranslation() hook.

• Uses separate QueryVariable component for the ref input field, suggesting it might be a more complex or custom input.

Usage Example

<VariableForm
  initialValue={{ key: '', ref: '', value: '' }}
  otherThanCurrentQuery={[{ key: 'existingKey', ref: '', value: '' }]}
  submit={(values) => console.log('Form submitted:', values)}
/>

Important Implementation Details

• Form Validation Logic:
  The key field must be unique and non-empty. This is enforced by a zod schema with a .refine() check to ensure no duplicate keys exist among other variables (otherThanCurrentQuery).

• Form Reset on Prop Change:
  The form resets its internal state when the initialValue prop changes, allowing dynamic updates when editing different variable entries.

• Localization Support:
  All user-facing labels and button texts are localized using the react-i18next library's useTranslation hook.

• Form Submission Trigger:
  The submit button in DialogFooter is linked to the form via form element ID allowing the button outside the <form> tag to trigger submission.

• Component Composition:
  The form fields use compound components (FormField, FormItem, FormControl, etc.) from the UI library to maintain consistent styling and behavior.

• External Components:
  The QueryVariable component is used for the ref field, indicating it might provide additional functionality like suggestions, dropdowns, or complex input handling.

Interaction with Other System Parts

• UI Library Components:
  Uses shared UI components (Button, Dialog, Form, Input) from the application's UI library, ensuring consistency in look and feel.

• Form Schema Type:
  Relies on VariableFormSchemaType imported from ./schema for typing, ensuring form data conforms to expected data structures.

• Modal Interface:
  Implements IModalProps interface for modal-related props like hideModal, integrating with the application's modal management system.

• Localization:
  Uses react-i18next to provide translated strings, which means it depends on the app's i18n setup.

• Utility Functions:
  Uses lodash's isEmpty to check emptiness of initialValue safely.

Visual Diagram

componentDiagram
    VariableDialog <|-- VariableForm
    VariableDialog --> Dialog
    Dialog --> DialogContent
    DialogContent --> DialogHeader
    DialogContent --> DialogFooter
    DialogHeader --> DialogTitle
    DialogFooter --> Button
    VariableForm --> Form
    Form --> FormField_key
    Form --> QueryVariable_ref
    Form --> FormField_value
    FormField_key --> Input_key
    FormField_value --> Input_value

Summary

• VariableDialog: Modal dialog wrapping a variable configuration form.

• VariableForm: Form component managing state, validation, and submission.

• Validates uniqueness of variable keys.

• Integrates with i18n for localization.

• Uses controlled form inputs and schema validation.

• Relies on UI library components and a custom QueryVariable component.

• Designed for adding or editing variables related to flows or queries.

This file enables users to safely and intuitively manage variables within the app, ensuring data integrity and a consistent user experience.