provectus/kafka-ui

Add placeholders for "Time to retain data (in ms)" ,"Maximum message size in bytes *" fields within Create Topic

Open

#2555 opened on Sep 9, 2022

View on GitHub
 (3 comments) (0 reactions) (0 assignees)Java (7,799 stars) (977 forks)batch import
good first issuescope/frontendstatus/acceptedtype/enhancement

Description

Describe the bug Add placeholders for "Time to retain data (in ms)" ,"Maximum message size in bytes *" empty fields and display inline values of filled input fields within Create Topic

Set up https://www.kafka-ui.provectus.io/

Steps to Reproduce

  1. Navigate to Topics
  2. Add a Topic

Expected behavior

  • Inline visualization for input fields values should be displayed as in attached second screenshot

  • Placeholder "Time to retain data"should be for "Time to retain data (in ms)" field and placeholder "Maximum message size" should be for "Maximum message size in bytes *" field in case of letting these fields empty (first screenshot)

Screenshots

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Look at the frontend source code for the 'kafka ui' repository. Locate the 'CreateTopic' component, likely in a file like 'CreateTopic.tsx' or similar under 'src/components/Topics'. Identify the two input fields: 'Time to retain data (in ms)' and 'Maximum message size in bytes'. For the first, add a placeholder 'Time to retain data'; for the second, 'Maximum message size'. Also implement inline visualization showing the current values of these fields below the input labels when filled, as shown in the second screenshot. Check existing patterns in the codebase for similar inputs to maintain consistency.