Format example JSON message in "Produce Message"

[Aquerr]

Issue submitter TODO list

• [x] I've searched for an already existing issues here
• [x] I'm running a supported version of the application which is listed here and the feature is not present there

Is your proposal related to a problem?

The proposal is related to the formatting in "produce message" modal, on example from Schema Registry.

Describe the feature you're interested in

Hey!

I have searched for similar issue but can't find such so I created this one. Would it be possible to format this example json value in "publish message" modal?

Currently it is an unformatted string. Would me awesome if it could be formatted as in old kafka-ui. (Or maybe it can be but I don't see a setting for that?)

Cheers

Describe alternatives you've considered

Autoformatting of such message would be best Else, a toggle/button that formats if when clicked on

Version you're running

1.3.0

Additional context

No response

[github-actions[bot]]

Hi Aquerr! 👋

Welcome, and thank you for opening your first issue in the repo!

Please wait for triaging by our maintainers.

As development is carried out in our spare time, you can support us by sponsoring our activities or even funding the development of specific issues. Sponsorship link

If you plan to raise a PR for this issue, please take a look at our contributing guide.

[germanosin]

Hi @Aquerr, thanks for submitting the feature request! Once someone is available to contribute it, we'd be happy to include it in a future release.

[Haarolean]

@Aquerr

Would me awesome if it could be formatted as in old kafka-ui.

old as in provectuslabs versions? I think I have a few ideas why we got syntax highlighting disabled, need to take a look.

[Aquerr]

@Haarolean Exactly what I meant by saying "old". 😄

[landbaychrisburrell]

Hi

We're happy to contribute a fix to this - we should have some time next month. To avoid going on a goose-chase and reworking things multiple times, I have a few questions:

• Is it worth digging out the old kafka ui?
• Are there are any existing or preferred libraries?
• I would apply to value & headers - (two toggles)
• Are people happy to have a validation option - e.g. if toggle is JSON, then we prevent produce message from submitting until the JSON is valid
• I assume we wouldn't put in the Key Serde/Value Serde
• As part of this change, I would also like to ensure the headers textbox resizes (or at least is bigger) - our headers are JSON and so they very quickly get unmanageable with the 2-line header text box.

Cheers Chris

[Haarolean]

@landbaychrisburrell

Is it worth digging out the old kafka ui?

what for? There are no commits that are missing here.

Are there are any existing or preferred libraries?

We have some for formatting schemas, but they might cause heavy lags with big schemas. Please do research.

I would apply to value & headers - (two toggles)

Sure, but please let's add one for key too then.

Are people happy to have a validation option

I don't mind, but let's make it optional (as a checkbox in produce message)

I assume we wouldn't put in the Key Serde/Value Serde

wdym? put where exactly?

As part of this change, I would also like to ensure the headers textbox resizes

I agree, let's make the field resizeable.

[aaron-seq]

Hi @Haarolean ,

I would like to contribute to this issue. After reviewing the codebase and the discussion, I understand that we need to implement JSON formatting functionality for the produce message modal.

Technical Analysis

I have analyzed the current implementation in frontend/src/components/Topics/Topic/SendMessage/SendMessage.tsx and the utility functions in utils.ts. The application is already using:

• react-ace for the Editor component
• json-schema-faker for generating example values from schemas
• Form validation with react-hook-form

Implementation Plan

Based on the maintainer feedback from @Haarolean, I plan to implement the following features:

Core Features

1. JSON Formatting Toggle Buttons: Add format toggle buttons for Key, Value, and Headers fields
2. Auto-formatting: Automatically format JSON when the toggle is enabled
3. Validation Option: Add an optional checkbox to validate JSON before allowing message submission
4. Resizable Headers Field: Make the headers textarea resizable for better usability with JSON content

Technical Implementation Details

1. JSON Formatting Logic:

   • Use JSON.stringify(JSON.parse(value), null, 2) for formatting
   • Handle parse errors gracefully with user feedback
   • Preserve existing content when formatting fails

2. UI Components:

   • Add format toggle buttons next to each field label
   • Use existing Button component with appropriate styling
   • Add validation checkbox in the form controls section

3. Enhanced Editor Configuration:

   • Configure ACE editor for JSON mode when formatting is enabled
   • Add syntax highlighting for better readability
   • Maintain existing height configurations but make headers field resizable

4. Validation Integration:

   • Extend existing validation logic to include JSON syntax validation
   • Show clear error messages for invalid JSON when validation is enabled
   • Prevent form submission when validation is enabled and JSON is invalid

Code Structure

1. New State Variables:

   const [formatKey, setFormatKey] = useState(false);
   const [formatValue, setFormatValue] = useState(false);
   const [formatHeaders, setFormatHeaders] = useState(false);
   const [validateJson, setValidateJson] = useState(false);
   

2. Formatting Utility Functions:

   const formatJson = (value: string): string => {
     try {
       return JSON.stringify(JSON.parse(value), null, 2);
     } catch {
       return value; // Return original if parsing fails
     }
   };
   

3. Validation Enhancement: Extend the existing validation logic to include JSON validation when the option is enabled

Performance Considerations

• Debounce formatting operations to avoid excessive re-renders
• Use existing validation patterns to maintain consistency
• Avoid heavy operations during typing

Accessibility

• Ensure toggle buttons have proper ARIA labels
• Maintain keyboard navigation support
• Provide clear feedback for validation states

Testing Strategy

• Add unit tests for JSON formatting functions
• Test error handling for malformed JSON
• Verify integration with existing form validation
• Test accessibility features

Branch and Timeline

I plan to create a branch named issues/1244-json-formatting and aim to complete this implementation within the next 2-3 weeks.

Please let me know if this approach aligns with your expectations or if you have any suggestions for improvements.

[landbaychrisburrell]

Hi

i'm not a contributor to the project, but raised the suggestion - the above looks good to me - we wouldn't be getting to this until end of December/early new year, so amazing if you can pick up beforehand. Happy to help test this.

[germanosin]

@aaron-seq Sure please go forward!

[aaron-seq]

Here is my detailed technical approach for implementing JSON formatting functionality after analyzing codebase:

Current implementation in frontend/src/components/Topics/Topic/SendMessage/SendMessage.tsx:

• Uses react-ace Editor component for Key, Value, and Headers fields
• Leverages react-hook-form for form validation
• Integrates json-schema-faker for schema-based example generation
• Editor components have fixed height configurations

1. State Management

Adding new state variables to track formatting toggles and validation option:

const [formatKey, setFormatKey] = useState<boolean>(false);
const [formatValue, setFormatValue] = useState<boolean>(false);
const [formatHeaders, setFormatHeaders] = useState<boolean>(false);
const [validateJson, setValidateJson] = useState<boolean>(false);

2. JSON Formatting Utility

Implementing a pure function for safe JSON formatting:

const formatJsonString = (input: string): { formatted: string; error: string | null } => {
  try {
    const parsed = JSON.parse(input);
    return { formatted: JSON.stringify(parsed, null, 2), error: null };
  } catch (e) {
    return { formatted: input, error: (e as Error).message };
  }
};

3. UI Component Structure

Adding format toggle buttons adjacent to field labels:

• Button component with icon (using existing Button from components/common)
• Tooltip showing "Format JSON" on hover
• Visual state indication when formatting is active
• Positioned using existing S.Columns layout structure

4. Editor Configuration Enhancement

Modifying Editor props when formatting is enabled:

mode={formatValue ? "json" : "text"}
setOptions={{
  showLineNumbers: true,
  tabSize: 2,
  useWorker: false // Prevent ACE worker conflicts
}}

5. Headers Field Resize Implementation

Making headers textarea resizable using CSS:

style={{ resize: 'vertical', minHeight: '40px' }}

6. Validation Integration

Extending existing validation schema:

const validateJsonField = (value: string): boolean | string => {
  if (!validateJson) return true;
  try {
    JSON.parse(value);
    return true;
  } catch (e) {
    return 'Invalid JSON format';
  }
};

Event Handlers

Format Toggle Handler

const handleFormatToggle = (field: 'key' | 'value' | 'headers') => {
  const currentValue = watch(field);
  const { formatted, error } = formatJsonString(currentValue);
  
  if (!error) {
    setValue(field, formatted);
  } else {
    showAlert({ message: `Cannot format: ${error}`, type: 'error' });
  }
};

Performance Considerations

• Debouncing format operations to prevent excessive re-renders
• Avoiding format-on-type to maintain user control
• Using memo for format utility function results
• Lazy formatting only on button click

Testing Strategy

Unit Tests

• formatJsonString utility with valid/invalid JSON
• State toggle behavior
• Validation logic with enabled/disabled states

Integration Tests

• Format button interaction
• Editor content updates
• Form submission with validation enabled
• Error handling for malformed JSON

Manual Testing Checklist

• Formatting valid JSON preserves data integrity
• Formatting invalid JSON shows appropriate error
• Headers field resizes correctly
• Validation checkbox prevents submission of invalid JSON
• Toggle states persist during form interaction
• Schema Registry generated examples format correctly

Accessibility Compliance

• Format buttons with aria-label="Format JSON for {field}"
• Validation checkbox with proper label association
• Error messages announced to screen readers
• Keyboard navigation support (Tab, Enter, Space)
• Focus management after format operation

Code Style Compliance

• Following existing TypeScript patterns in codebase
• Consistent with react-hook-form usage patterns
• Maintaining existing styled-components structure
• Adhering to component composition patterns

Branch and PR Strategy

Branch: issues/1244-json-formatting Commit Message Format: "FE: Add JSON formatting for produce message fields" PR Title: "FE: Format example JSON message in Produce Message"

Timeline

Expected implementation: 2-3 weeks

• Week 1: Core formatting functionality + unit tests
• Week 2: UI integration + validation logic
• Week 3: Testing, refinement, documentation

I will begin implementation after confirming the approach!!

[aaron-seq]

Hi maintainers,

I have completed the implementation of JSON formatting functionality for the produce message modal. Here's a summary of what has been delivered:

Implementation Complete

Core Features Implemented:

• JSON formatting toggle buttons for Key, Value, and Headers fields
• Optional JSON validation checkbox before form submission
• Resizable headers field with CSS-based resize functionality
• Enhanced ACE editor with conditional JSON syntax highlighting
• Comprehensive error handling with user-friendly feedback messages

Technical Approach:

• Added state management for formatting toggles and validation preferences
• Implemented robust JSON formatting utility with error handling
• Extended existing validation logic with optional JSON validation
• Maintained full backward compatibility with zero breaking changes
• Added comprehensive accessibility features including ARIA labels and keyboard navigation

Files Created:

1. Enhanced SendMessage component with JSON formatting capabilities
2. Updated styled components with new UI elements and accessibility features
3. Comprehensive unit tests for JSON formatting utilities
4. Integration tests for component interactions and user workflows
5. Complete documentation and implementation guides

Quality Assurance:

• Full TypeScript compliance with comprehensive type safety
• WCAG 2.1 AA accessibility compliance verified
• Extensive test coverage including unit and integration tests
• Performance optimizations with event-driven operations
• Security considerations including input sanitization and XSS prevention

Testing Completed:

• Manual testing of all formatting scenarios and edge cases
• Automated test suite covering JSON utilities and component interactions
• Accessibility testing with keyboard navigation and screen readers
• Performance testing with large JSON objects
• Cross-browser compatibility verification

The implementation follows all existing code patterns, integrates seamlessly with the current form management system, and provides all the functionality requested in the original issue. All features are opt-in via toggle buttons, preserving existing workflows completely.

I will now create a pull request with the complete implementation. The solution is production-ready and addresses all requirements while maintaining the high quality standards of the kafbat-ui project.

Ready for code review and integration.

[germanosin]

@aaron-seq could you create a PR?

[aaron-seq]

Pull request created: #1484

Implementation is ready for code review. The PR includes detailed technical explanation, testing documentation, and addresses all points from the previous maintainer discussion.