refactor Registry Form

kafka-ui-react-app/src/components/Wizard/WizardForm/KafkaCluster/KafkaCluster.tsx

@@ -54,7 +54,7 @@ const KafkaCluster: React.FC = () => {
  <InputHint>
  the list of Kafka brokers that you want to connect to
  </InputHint>
- <S.BootstrapServersContainer>
+ <S.ArrayFieldWrapper>
  {fields.map((field, index) => (
  <S.BootstrapServer key={field.id}>
  <div>
@@ -104,7 +104,7 @@ const KafkaCluster: React.FC = () => {
  Add Bootstrap Server
  </Button>
  </div>
- </S.BootstrapServersContainer>
+ </S.ArrayFieldWrapper>
 
  <FormError>
  <ErrorMessage errors={errors} name="bootstrapServers" />

kafka-ui-react-app/src/components/Wizard/WizardForm/SchemaRegistry/SchemaRegistry.tsx

@@ -1,108 +1,122 @@
-import React, { useState } from 'react';
+import React from 'react';
 import * as S from 'components/Wizard/WizardForm/WizardForm.styled';
 import { Button } from 'components/common/Button/Button';
 import Input from 'components/common/Input/Input';
 import { FormError } from 'components/common/Input/Input.styled';
 import { ErrorMessage } from '@hookform/error-message';
 import { useFormContext } from 'react-hook-form';
+import Heading from 'components/common/heading/Heading.styled';
+import { InputLabel } from 'components/common/Input/InputLabel.styled';
 
 const SchemaRegistry = () => {
- const [newSchemaRegistry, setNewSchemaRegistry] = useState(false);
- const methods = useFormContext();
- const registry: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+ const {
+ setValue,
+ register,
+ reset,
+ getValues,
+ watch,
+ formState: { errors },
+ } = useFormContext();
+ const schemaRegistry = watch('schemaRegistry');
+ const showRegistryFrom: React.MouseEventHandler<HTMLButtonElement> = (e) => {
  e.preventDefault();
- setNewSchemaRegistry(!newSchemaRegistry);
- if (!newSchemaRegistry) {
- methods.reset({ url: '' });
+ if (schemaRegistry) {
+ setValue('schemaRegistry', undefined);
+ } else {
+ reset(
+ {
+ ...getValues(),
+ schemaRegistry: {
+ url: '',
+ isAuth: false,
+ username: '',
+ password: '',
+ },
+ },
+ { keepDefaultValues: true }
+ );
  }
  };
- const isAuth = methods.watch('schemaRegistry.isAuth');
  return (
- <S.Section>
- <S.SectionName>Schema Registry</S.SectionName>
+ <>
+ <Heading level={3}>Schema Registry</Heading>
  <div>
  <Button
  buttonSize="M"
  buttonType="primary"
- onClick={(e) => registry(e)}
+ onClick={(e) => showRegistryFrom(e)}
  >
- {!newSchemaRegistry ? 'Add Schema Registry' : 'Remove from config'}
+ {!schemaRegistry ? 'Add Schema Registry' : 'Remove from config'}
  </Button>
- {newSchemaRegistry && (
+ </div>
+ <S.ArrayFieldWrapper>
+ {schemaRegistry && (
  <>
- <S.PartStyled>
- <label htmlFor="schemaRegistry.url">URL</label>{' '}
+ <div>
+ <InputLabel htmlFor="schemaRegistry.url">URL</InputLabel>
  <Input
  id="schemaRegistry.url"
  name="schemaRegistry.url"
  type="text"
  placeholder="http://localhost:8081"
  />
  <FormError>
- <ErrorMessage
- errors={methods.formState.errors}
- name="schemaRegistry.url"
- />
+ <ErrorMessage errors={errors} name="schemaRegistry.url" />
  </FormError>
- </S.PartStyled>
- <S.PartStyled>
- <S.CheckboxWrapper>
+ </div>
+ <div>
+ <InputLabel htmlFor="schemaRegistry.isAuth">
  <input
- {...methods.register('schemaRegistry.isAuth')}
+ {...register('schemaRegistry.isAuth')}
  id="schemaRegistry.isAuth"
  type="checkbox"
  />
- <label htmlFor="schemaRegistry.isAuth">
- Schema registry is secured with auth?
- </label>
- <FormError>
- <ErrorMessage
- errors={methods.formState.errors}
- name="schemaRegistry.isAuth"
- />
- </FormError>
- </S.CheckboxWrapper>
- </S.PartStyled>
- {isAuth && (
- <>
- <S.PartStyled>
- <S.ItemLabelRequired>
- <label htmlFor="schemaRegistry.username">Username</label>{' '}
- </S.ItemLabelRequired>
+ Schema registry is secured with auth?
+ </InputLabel>
+ <FormError>
+ <ErrorMessage errors={errors} name="schemaRegistry.isAuth" />
+ </FormError>
+ </div>
+ {schemaRegistry.isAuth && (
+ <S.InputContainer>
+ <div>
+ <InputLabel htmlFor="schemaRegistry.username">
+ Username *
+ </InputLabel>
  <Input
  id="schemaRegistry.username"
  type="text"
  name="schemaRegistry.username"
  />
  <FormError>
  <ErrorMessage
- errors={methods.formState.errors}
+ errors={errors}
  name="schemaRegistry.username"
  />
  </FormError>
- </S.PartStyled>
- <S.PartStyled>
- <S.ItemLabelRequired>
- <label htmlFor="schemaRegistry.password">Password</label>{' '}
- </S.ItemLabelRequired>
+ </div>
+ <div>
+ <InputLabel htmlFor="schemaRegistry.password">
+ Password *
+ </InputLabel>
  <Input
  id="schemaRegistry.password"
  type="password"
  name="schemaRegistry.password"
  />
  <FormError>
  <ErrorMessage
- errors={methods.formState.errors}
+ errors={errors}
  name="schemaRegistry.password"
  />
  </FormError>
- </S.PartStyled>
- </>
+ </div>
+ </S.InputContainer>
  )}
  </>
  )}
- </div>
- </S.Section>
+ </S.ArrayFieldWrapper>
+ </>
  );
 };
 export default SchemaRegistry;

kafka-ui-react-app/src/components/Wizard/WizardForm/WizardForm.styled.ts

@@ -89,27 +89,29 @@ export const FileWrapper = styled.div`
  }
 `;
 
-//----------------------------------
-// KafkaCluster
-export const BootstrapServersContainer = styled.label`
+export const ArrayFieldWrapper = styled.label`
  display: flex;
  flex-direction: column;
  gap: 8px;
 `;
-
-export const BootstrapServer = styled.div`
+export const InputContainer = styled.div`
  display: grid;
- grid-template-columns: 3fr 1fr 30px;
+ grid-template-columns: 1fr 1fr 30px;
  gap: 8px;
- align-items: top;
+ align-items: stretch;
  max-width: 500px;
 `;
+//----------------------------------
+// KafkaCluster
+
+export const BootstrapServer = styled(InputContainer)`
+ grid-template-columns: 3fr 1fr 30px;
+`;
 export const BootstrapServerActions = styled(IconButtonWrapper)`
  align-self: center;
 `;
-
-//-------------------------------
+export //-------------------------------
 // Authentication
-export const PartStyled = styled.div`
+const PartStyled = styled.div`
  padding-top: 1.2rem;
 `;

kafka-ui-react-app/src/components/Wizard/WizardForm/WizardForm.tsx

@@ -14,10 +14,17 @@ type BootstrapServer = {
  host: string;
  port: string;
 };
+type SchemaRegistryType = {
+ url: string;
+ isAuth: boolean;
+ username: string;
+ password: string;
+};
 export type FormValues = {
  name: string;
  readOnly: boolean;
  bootstrapServers: BootstrapServer[];
+ schemaRegistry?: SchemaRegistryType;
 };
 
 interface WizardFormProps {
@@ -35,6 +42,12 @@ const Wizard: React.FC<WizardFormProps> = () => {
  { host: 'loc1', port: '3001' },
  { host: 'loc', port: '3002' },
  ],
+ schemaRegistry: {
+ url: '',
+ isAuth: false,
+ username: '',
+ password: '',
+ },
  },
  });
 
@@ -51,6 +64,7 @@ const Wizard: React.FC<WizardFormProps> = () => {
  <hr />
  <Authentication />
  <SchemaRegistry />
+ <hr />
  <S.Section>
  <S.SectionName>Kafka Connect</S.SectionName>
  <div>

kafka-ui-react-app/src/components/Wizard/schema.ts

@@ -128,15 +128,15 @@ const formSchema = object({
  }),
  }).required(),
  schemaRegistry: object({
- url: string().required(),
+ url: string().required('URL is a required field'),
  isAuth: boolean().required(),
  username: string().when('isAuth', {
  is: true,
- then: (schema) => schema.required(),
+ then: (schema) => schema.required('Username is a required field'),
  }),
  password: string().when('isAuth', {
  is: true,
- then: (schema) => schema.required(),
+ then: (schema) => schema.required('Password is a required field'),
  }),
  }),
  kafkaConnect: array().of(