variable-dialog.tsx

Overview

The variable-dialog.tsx file defines a React component dialog interface for creating or editing variables within a user interface. It provides a modal dialog containing a form where users can specify a variable's key, reference, and value. The form validates the input—especially ensuring that the variable’s key is unique compared to other existing variables—and submits the data when confirmed.

This component leverages various UI primitives (dialogs, buttons, forms, inputs) from a shared UI library, integrates with form state management via react-hook-form and validation through zod, and supports internationalization with react-i18next. It is primarily used in contexts where variables are managed, such as workflow or query parameter settings.

Detailed Explanation

Types and Constants

ModalFormProps

type ModalFormProps = {
  initialValue: VariableFormSchemaType;
  otherThanCurrentQuery: VariableFormSchemaType[];
  submit(values: any): void;
};

• Purpose: Defines the props required by the form component VariableForm.

• Parameters:

  • initialValue: The initial data to populate the form with, matching the variable schema.

  • otherThanCurrentQuery: An array of variable data excluding the current variable, used to enforce unique key validation.

  • submit: A callback function invoked upon successful form submission.

Component: VariableForm

function VariableForm({
  initialValue,
  otherThanCurrentQuery,
  submit,
}: ModalFormProps)

• Purpose: Renders the form inside the dialog to create/edit a variable.

• Parameters:

  • initialValue: Initial form values.

  • otherThanCurrentQuery: Variables except the current one, for validation.

  • submit: Submit handler.

• Returns: JSX element containing the form.

Internal Details

• Form Schema: Uses zod to enforce:

  • key: Required non-empty string, trimmed, must be unique (not duplicated in otherThanCurrentQuery).

  • ref: String (reference to something, possibly another variable).

  • value: String (variable's value).

• Form State: Managed by useForm from react-hook-form with zodResolver for validation.

• Effects:

  • On mount or when initialValue changes, form values reset to initialValue if it’s not empty.

• Submission:

  • Calls submit prop with validated form data.

Usage Example

<VariableForm
  initialValue={{ key: 'var1', ref: 'ref1', value: 'value1' }}
  otherThanCurrentQuery={[{ key: 'var2', ref: 'ref2', value: 'value2' }]}
  submit={(data) => console.log('Submitted:', data)}
/>

Component: VariableDialog

export function VariableDialog({
  initialValue,
  hideModal,
  otherThanCurrentQuery,
  submit,
}: ModalFormProps & IModalProps<VariableFormSchemaType>)

• Purpose: Wraps VariableForm in a modal dialog with header, footer, and controls.

• Parameters:

  • initialValue: Initial form data.

  • hideModal: Function to close/hide the dialog.

  • otherThanCurrentQuery: For validation.

  • submit: Form submission handler.

• Returns: JSX element representing a dialog/modal.

Implementation Details

• Uses Dialog, DialogContent, DialogHeader, DialogTitle, and DialogFooter components from the UI library to create the modal structure.

• The form submit button is placed in the dialog footer and is linked to the form by the form's ID (BeginParameterForm).

• The dialog is controlled via the open prop and onOpenChange callback (hides dialog when requested).

• Internationalization (t) is used for all labels and button texts.

Usage Example

<VariableDialog
  initialValue={{ key: '', ref: '', value: '' }}
  otherThanCurrentQuery={existingVariables}
  hideModal={() => setShowDialog(false)}
  submit={(data) => handleVariableSubmit(data)}
/>

Important Implementation Details & Algorithms

• Unique Key Validation: The form schema uses zod's .refine() method to ensure that the variable key is not duplicated across other variables (otherThanCurrentQuery). This is a simple lookup algorithm that scans the array for any matching keys.

• Form Reset on Initial Value Change: Using React.useEffect, the form resets its values if the initialValue changes, which supports editing existing variables by updating the form fields dynamically.

• Separation of Concerns: The dialog structure (VariableDialog) is separated from the form logic (VariableForm), promoting reusability and clarity.

Interaction with Other Parts of the System

• UI Components: Uses shared UI elements (Button, Dialog, Form, Input) from the project's UI library (@/components/ui/*), ensuring consistent styling and behavior.

• Form Validation: Integrates react-hook-form with zod resolver for schema-based validation.

• Internationalization: Texts are translated via react-i18next, allowing support for multiple languages.

• Custom Component: Uses QueryVariable component from ../components/query-variable for the "ref" input, which likely provides enhanced functionality related to variable references.

• Interfaces: Uses IModalProps from @/interfaces/common to standardize modal-related props like hideModal.

• Schema: The VariableFormSchemaType imported from ./schema defines the expected shape of variable data.

Visual Diagram

Below is a Mermaid class diagram representing the main components, their props, and relationships within this file:

classDiagram
    class VariableForm {
        +initialValue: VariableFormSchemaType
        +otherThanCurrentQuery: VariableFormSchemaType[]
        +submit(values: any): void
        -FormSchema: ZodSchema
        +onSubmit(data): void
        +render()
    }

    class VariableDialog {
        +initialValue: VariableFormSchemaType
        +hideModal(): void
        +otherThanCurrentQuery: VariableFormSchemaType[]
        +submit(values: any): void
        +render()
    }

    VariableDialog --> VariableForm : contains / renders

    class ModalFormProps {
        +initialValue: VariableFormSchemaType
        +otherThanCurrentQuery: VariableFormSchemaType[]
        +submit(values: any): void
    }

    VariableForm .. ModalFormProps : implements
    VariableDialog .. ModalFormProps : implements
    VariableDialog .. IModalProps : implements

Summary

• variable-dialog.tsx provides a modal dialog UI for adding or editing variables with validation against duplicates.

• Contains two main components: VariableForm (handles the form UI and logic) and VariableDialog (wraps the form in a modal dialog).

• Validates uniqueness of the variable key using a zod schema with a .refine() method.

• Integrates tightly with the project's UI library, form validation, and internationalization frameworks.

• Designed for reusability and clarity, separating form logic from dialog presentation.

This file is critical for variable management workflows in the application, ensuring clean user input and consistent UX around variable configuration.