Add fieldset to the TopicForm (#514)

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx

@@ -29,144 +29,129 @@ const TopicForm: React.FC<Props> = ({
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="columns">
-        <div className="column is-three-quarters">
-          <label className="label">Topic Name *</label>
-          <input
-            className="input"
-            placeholder="Topic Name"
-            defaultValue={topicName}
-            {...register('name', {
-              required: 'Topic Name is required.',
-              pattern: {
-                value: TOPIC_NAME_VALIDATION_PATTERN,
-                message: 'Only alphanumeric, _, -, and . allowed',
-              },
-            })}
-            autoComplete="off"
-            disabled={isEditing || isSubmitting}
-          />
-          <p className="help is-danger">
-            <ErrorMessage errors={errors} name="name" />
-          </p>
-        </div>
+      <fieldset disabled={isEditing || isSubmitting}>
+        <div className="columns">
+          <div className="column is-three-quarters">
+            <label className="label">Topic Name *</label>
+            <input
+              className="input"
+              placeholder="Topic Name"
+              defaultValue={topicName}
+              {...register('name', {
+                required: 'Topic Name is required.',
+                pattern: {
+                  value: TOPIC_NAME_VALIDATION_PATTERN,
+                  message: 'Only alphanumeric, _, -, and . allowed',
+                },
+              })}
+              autoComplete="off"
+            />
+            <p className="help is-danger">
+              <ErrorMessage errors={errors} name="name" />
+            </p>
+          </div>
 
-        <div className="column">
-          <label className="label">Number of partitions *</label>
-          <input
-            className="input"
-            type="number"
-            placeholder="Number of partitions"
-            defaultValue="1"
-            {...register('partitions', {
-              required: 'Number of partitions is required.',
-            })}
-            disabled={isEditing || isSubmitting}
-          />
-          <p className="help is-danger">
-            <ErrorMessage errors={errors} name="partitions" />
-          </p>
+          <div className="column">
+            <label className="label">Number of partitions *</label>
+            <input
+              className="input"
+              type="number"
+              placeholder="Number of partitions"
+              defaultValue="1"
+              {...register('partitions', {
+                required: 'Number of partitions is required.',
+              })}
+            />
+            <p className="help is-danger">
+              <ErrorMessage errors={errors} name="partitions" />
+            </p>
+          </div>
         </div>
-      </div>
 
-      <div className="columns">
-        <div className="column">
-          <label className="label">Replication Factor *</label>
-          <input
-            className="input"
-            type="number"
-            placeholder="Replication Factor"
-            defaultValue="1"
-            {...register('replicationFactor', {
-              required: 'Replication Factor is required.',
-            })}
-            disabled={isEditing || isSubmitting}
-          />
-          <p className="help is-danger">
-            <ErrorMessage errors={errors} name="replicationFactor" />
-          </p>
-        </div>
+        <div className="columns">
+          <div className="column">
+            <label className="label">Replication Factor *</label>
+            <input
+              className="input"
+              type="number"
+              placeholder="Replication Factor"
+              defaultValue="1"
+              {...register('replicationFactor', {
+                required: 'Replication Factor is required.',
+              })}
+            />
+            <p className="help is-danger">
+              <ErrorMessage errors={errors} name="replicationFactor" />
+            </p>
+          </div>
 
-        <div className="column">
-          <label className="label">Min In Sync Replicas *</label>
-          <input
-            className="input"
-            type="number"
-            placeholder="Min In Sync Replicas"
-            defaultValue="1"
-            {...register('minInSyncReplicas', {
-              required: 'Min In Sync Replicas is required.',
-            })}
-            disabled={isSubmitting}
-          />
-          <p className="help is-danger">
-            <ErrorMessage errors={errors} name="minInSyncReplicas" />
-          </p>
+          <div className="column">
+            <label className="label">Min In Sync Replicas *</label>
+            <input
+              className="input"
+              type="number"
+              placeholder="Min In Sync Replicas"
+              defaultValue="1"
+              {...register('minInSyncReplicas', {
+                required: 'Min In Sync Replicas is required.',
+              })}
+            />
+            <p className="help is-danger">
+              <ErrorMessage errors={errors} name="minInSyncReplicas" />
+            </p>
+          </div>
         </div>
-      </div>
 
-      <div className="columns">
-        <div className="column is-one-third">
-          <label className="label">Cleanup policy</label>
-          <div className="select is-block">
-            <select
-              defaultValue="delete"
-              {...register('cleanupPolicy')}
-              disabled={isSubmitting}
-            >
-              <option value="delete">Delete</option>
-              <option value="compact">Compact</option>
-            </select>
+        <div className="columns">
+          <div className="column is-one-third">
+            <label className="label">Cleanup policy</label>
+            <div className="select is-block">
+              <select defaultValue="delete" {...register('cleanupPolicy')}>
+                <option value="delete">Delete</option>
+                <option value="compact">Compact</option>
+              </select>
+            </div>
           </div>
-        </div>
 
-        <div className="column is-one-third">
-          <TimeToRetain isSubmitting={isSubmitting} />
-        </div>
+          <div className="column is-one-third">
+            <TimeToRetain isSubmitting={isSubmitting} />
+          </div>
 
-        <div className="column is-one-third">
-          <label className="label">Max size on disk in GB</label>
-          <div className="select is-block">
-            <select
-              defaultValue={-1}
-              {...register('retentionBytes')}
-              disabled={isSubmitting}
-            >
-              <option value={-1}>Not Set</option>
-              <option value={BYTES_IN_GB}>1 GB</option>
-              <option value={BYTES_IN_GB * 10}>10 GB</option>
-              <option value={BYTES_IN_GB * 20}>20 GB</option>
-              <option value={BYTES_IN_GB * 50}>50 GB</option>
-            </select>
+          <div className="column is-one-third">
+            <label className="label">Max size on disk in GB</label>
+            <div className="select is-block">
+              <select defaultValue={-1} {...register('retentionBytes')}>
+                <option value={-1}>Not Set</option>
+                <option value={BYTES_IN_GB}>1 GB</option>
+                <option value={BYTES_IN_GB * 10}>10 GB</option>
+                <option value={BYTES_IN_GB * 20}>20 GB</option>
+                <option value={BYTES_IN_GB * 50}>50 GB</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className="columns">
-        <div className="column">
-          <label className="label">Maximum message size in bytes *</label>
-          <input
-            className="input"
-            type="number"
-            defaultValue="1000012"
-            {...register('maxMessageBytes', {
-              required: 'Maximum message size in bytes is required',
-            })}
-            disabled={isSubmitting}
-          />
-          <p className="help is-danger">
-            <ErrorMessage errors={errors} name="maxMessageBytes" />
-          </p>
+        <div className="columns">
+          <div className="column">
+            <label className="label">Maximum message size in bytes *</label>
+            <input
+              className="input"
+              type="number"
+              defaultValue="1000012"
+              {...register('maxMessageBytes', {
+                required: 'Maximum message size in bytes is required',
+              })}
+            />
+            <p className="help is-danger">
+              <ErrorMessage errors={errors} name="maxMessageBytes" />
+            </p>
+          </div>
         </div>
-      </div>
 
-      <CustomParamsContainer isSubmitting={isSubmitting} config={config} />
+        <CustomParamsContainer isSubmitting={isSubmitting} config={config} />
 
-      <input
-        type="submit"
-        className="button is-primary"
-        disabled={isSubmitting}
-      />
+        <input type="submit" className="button is-primary" />
+      </fieldset>
     </form>
   );
 };