fixing partition dropdown (#2073)

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx

@@ -22,11 +22,19 @@ import {
   getPartitionsByTopicName,
   getTopicMessageSchemaFetched,
 } from 'redux/reducers/topics/selectors';
+import Select, { SelectOption } from 'components/common/Select/Select';
 import useAppParams from 'lib/hooks/useAppParams';
 
 import validateMessage from './validateMessage';
 import * as S from './SendMessage.styled';
 
+type FieldValues = Partial<{
+  key: string;
+  content: string;
+  headers: string;
+  partition: number | string;
+}>;
+
 const SendMessage: React.FC = () => {
   const dispatch = useAppDispatch();
   const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
@@ -46,6 +54,10 @@ const SendMessage: React.FC = () => {
     getPartitionsByTopicName(state, topicName)
   );
   const schemaIsFetched = useAppSelector(getTopicMessageSchemaFetched);
+  const selectPartitionOptions: Array<SelectOption> = partitions.map((p) => {
+    const value = String(p.partition);
+    return { value, label: value };
+  });
 
   const keyDefaultValue = React.useMemo(() => {
     if (!schemaIsFetched || !messageSchema) {
@@ -70,12 +82,11 @@ const SendMessage: React.FC = () => {
   }, [messageSchema, schemaIsFetched]);
 
   const {
-    register,
     handleSubmit,
     formState: { isSubmitting, isDirty },
     control,
     reset,
-  } = useForm({
+  } = useForm<FieldValues>({
     mode: 'onChange',
     defaultValues: {
       key: keyDefaultValue,
@@ -156,24 +167,30 @@ const SendMessage: React.FC = () => {
     <S.Wrapper>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="columns">
-          <div className="column is-one-third">
-            <label className="label" htmlFor="select">
+          <div>
+            <label
+              className="label"
+              id="selectPartitionOptions"
+              htmlFor="selectPartitionOptions"
+            >
               Partition
             </label>
-            <div className="select is-block">
-              <select
-                id="select"
-                defaultValue={partitions[0].partition}
-                disabled={isSubmitting}
-                {...register('partition')}
-              >
-                {partitions.map((partition) => (
-                  <option key={partition.partition} value={partition.partition}>
-                    {partition.partition}
-                  </option>
-                ))}
-              </select>
-            </div>
+            <Controller
+              control={control}
+              name="partition"
+              defaultValue={selectPartitionOptions[0].value}
+              render={({ field: { name, onChange } }) => (
+                <Select
+                  id="selectPartitionOptions"
+                  aria-labelledby="selectPartitionOptions"
+                  name={name}
+                  onChange={onChange}
+                  minWidth="100%"
+                  options={selectPartitionOptions}
+                  value={selectPartitionOptions[0].value}
+                />
+              )}
+            />
           </div>
         </div>
 

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/__test__/SendMessage.spec.tsx

@@ -64,7 +64,12 @@ const renderAndSubmitData = async (error: string[] = []) => {
   await renderComponent();
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
   await act(() => {
-    userEvent.selectOptions(screen.getByLabelText('Partition'), '0');
+    userEvent.click(screen.getByLabelText('Partition'));
+  });
+  await act(() => {
+    userEvent.click(screen.getAllByRole('option')[1]);
+  });
+  await act(() => {
     (validateMessage as Mock).mockImplementation(() => error);
     userEvent.click(screen.getByText('Send'));
   });