Bugfix/select (#1397)

* new select styles init

* Custom select compound component

* Select component fix styles

* Added react hook form controller

* Moved from compound component

* fixed vslues & onChange for controller

* fixed tests & code cleanup

* fix review

* fixed linter

* fixed discussions

Co-authored-by: Ekaterina Petrova <[email protected]>

Author: Hurenka

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -227,6 +227,11 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         },
       },
       "selectStyles": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#E3E6E8",
+          "normal": "#FFFFFF",
+        },
         "borderColor": Object {
           "active": "#454F54",
           "disabled": "#E3E6E8",

kafka-ui-react-app/src/components/Connect/New/New.tsx

@@ -112,6 +112,11 @@ const New: React.FC<NewProps> = ({
     return null;
   }
 
+  const connectOptions = connects.map(({ name: connectName }) => ({
+    value: connectName,
+    label: connectName,
+  }));
+
   return (
     <FormProvider {...methods}>
       <PageHeading text="Create new connector" />
@@ -121,13 +126,21 @@ const New: React.FC<NewProps> = ({
       >
         <div className={['field', connectNameFieldClassName].join(' ')}>
           <InputLabel>Connect *</InputLabel>
-          <Select selectSize="M" name="connectName" disabled={isSubmitting}>
-            {connects.map(({ name }) => (
-              <option key={name} value={name}>
-                {name}
-              </option>
-            ))}
-          </Select>
+          <Controller
+            control={control}
+            name="connectName"
+            render={({ field: { name, onChange } }) => (
+              <Select
+                selectSize="M"
+                name={name}
+                disabled={isSubmitting}
+                onChange={onChange}
+                value={connectOptions[0].value}
+                minWidth="100%"
+                options={connectOptions}
+              />
+            )}
+          />
           <FormError>
             <ErrorMessage errors={errors} name="connectName" />
           </FormError>

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -77,9 +77,7 @@ const Details: React.FC = () => {
         <PageHeading text={consumerGroupID}>
           {!isReadOnly && (
             <Dropdown label={<VerticalElipsisIcon />} right>
-              <DropdownItem onClick={onResetOffsets}>
-                Reset offsets
-              </DropdownItem>
+              <DropdownItem onClick={onResetOffsets}>Reset offset</DropdownItem>
               <DropdownItem
                 style={{ color: Colors.red[50] }}
                 onClick={() => setIsConfirmationModalVisible(true)}

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx

@@ -182,24 +182,47 @@ const ResetOffsets: React.FC = () => {
         <form onSubmit={handleSubmit(onSubmit)}>
           <MainSelectorsWrapperStyled>
             <div>
-              <InputLabel htmlFor="topic">Topic</InputLabel>
-              <Select name="topic" id="topic" selectSize="M">
-                {uniqueTopics.map((topic) => (
-                  <option key={topic} value={topic}>
-                    {topic}
-                  </option>
-                ))}
-              </Select>
+              <InputLabel id="topicLabel">Topic</InputLabel>
+              <Controller
+                control={control}
+                name="topic"
+                render={({ field: { name, onChange, value } }) => (
+                  <Select
+                    id="topic"
+                    selectSize="M"
+                    aria-labelledby="topicLabel"
+                    minWidth="100%"
+                    name={name}
+                    onChange={onChange}
+                    value={value}
+                    options={uniqueTopics.map((topic) => ({
+                      value: topic,
+                      label: topic,
+                    }))}
+                  />
+                )}
+              />
             </div>
             <div>
-              <InputLabel htmlFor="resetType">Reset Type</InputLabel>
-              <Select name="resetType" id="resetType" selectSize="M">
-                {Object.values(ConsumerGroupOffsetsResetType).map((type) => (
-                  <option key={type} value={type}>
-                    {type}
-                  </option>
-                ))}
-              </Select>
+              <InputLabel id="resetTypeLabel">Reset Type</InputLabel>
+              <Controller
+                control={control}
+                name="resetType"
+                render={({ field: { name, onChange, value } }) => (
+                  <Select
+                    id="resetType"
+                    selectSize="M"
+                    aria-labelledby="resetTypeLabel"
+                    minWidth="100%"
+                    name={name}
+                    onChange={onChange}
+                    value={value}
+                    options={Object.values(ConsumerGroupOffsetsResetType).map(
+                      (type) => ({ value: type, label: type })
+                    )}
+                  />
+                )}
+              />
             </div>
             <div>
               <InputLabel>Partitions</InputLabel>

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx

@@ -37,7 +37,8 @@ const resetConsumerGroupOffsetsMockCalled = () =>
   ).toBeTruthy();
 
 const selectresetTypeAndPartitions = async (resetType: string) => {
-  userEvent.selectOptions(screen.getByLabelText('Reset Type'), resetType);
+  userEvent.click(screen.getByLabelText('Reset Type'));
+  userEvent.click(screen.getByText(resetType));
   userEvent.click(screen.getByText('Select...'));
   await waitFor(() => {
     userEvent.click(screen.getByText('Partition #0'));
@@ -48,7 +49,9 @@ const resetConsumerGroupOffsetsWith = async (
   resetType: string,
   offset: null | number = null
 ) => {
-  userEvent.selectOptions(screen.getByLabelText('Reset Type'), resetType);
+  userEvent.click(screen.getByLabelText('Reset Type'));
+  const options = screen.getAllByText(resetType);
+  userEvent.click(options.length > 1 ? options[1] : options[0]);
   userEvent.click(screen.getByText('Select...'));
   await waitFor(() => {
     userEvent.click(screen.getByText('Partition #0'));

kafka-ui-react-app/src/components/ConsumerGroups/Details/__tests__/Details.spec.tsx

@@ -41,7 +41,7 @@ describe('Details component', () => {
     fetchMock.reset();
   });
 
-  describe('when consumer gruops are NOT fetched', () => {
+  describe('when consumer groups are NOT fetched', () => {
     it('renders progress bar for initial state', () => {
       fetchMock.getOnce(
         `/api/clusters/${clusterName}/consumer-groups/${groupId}`,
@@ -73,8 +73,8 @@ describe('Details component', () => {
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
 
-    it('handles [Reset offsets] click', async () => {
-      userEvent.click(screen.getByText('Reset offsets'));
+    it('handles [Reset offset] click', async () => {
+      userEvent.click(screen.getByText('Reset offset'));
       expect(history.location.pathname).toEqual(
         clusterConsumerGroupResetOffsetsPath(clusterName, groupId)
       );
@@ -90,7 +90,7 @@ describe('Details component', () => {
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
 
-    it('hanles [Delete consumer group] click', async () => {
+    it('handles [Delete consumer group] click', async () => {
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       userEvent.click(screen.getByText('Delete consumer group'));
 

kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx

@@ -85,35 +85,44 @@ const Edit: React.FC = () => {
           <div>
             <div>
               <InputLabel>Type</InputLabel>
-              <Select
+              <Controller
+                control={control}
+                rules={{ required: true }}
                 name="schemaType"
-                required
-                defaultValue={schema.schemaType}
-                disabled={isSubmitting}
-              >
-                {Object.keys(SchemaType).map((type: string) => (
-                  <option key={type} value={type}>
-                    {type}
-                  </option>
-                ))}
-              </Select>
+                render={({ field: { name, onChange } }) => (
+                  <Select
+                    name={name}
+                    value={schema.schemaType}
+                    onChange={onChange}
+                    minWidth="100%"
+                    disabled={isSubmitting}
+                    options={Object.keys(SchemaType).map((type) => ({
+                      value: type,
+                      label: type,
+                    }))}
+                  />
+                )}
+              />
             </div>
 
             <div>
               <InputLabel>Compatibility level</InputLabel>
-              <Select
+              <Controller
+                control={control}
                 name="compatibilityLevel"
-                defaultValue={schema.compatibilityLevel}
-                disabled={isSubmitting}
-              >
-                {Object.keys(CompatibilityLevelCompatibilityEnum).map(
-                  (level: string) => (
-                    <option key={level} value={level}>
-                      {level}
-                    </option>
-                  )
+                render={({ field: { name, onChange } }) => (
+                  <Select
+                    name={name}
+                    value={schema.compatibilityLevel}
+                    onChange={onChange}
+                    minWidth="100%"
+                    disabled={isSubmitting}
+                    options={Object.keys(
+                      CompatibilityLevelCompatibilityEnum
+                    ).map((level) => ({ value: level, label: level }))}
+                  />
                 )}
-              </Select>
+              />
             </div>
           </div>
           <S.EditorsWrapper>

kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector.tsx

@@ -45,12 +45,8 @@ const GlobalSchemaSelector: React.FC = () => {
     fetchData();
   }, []);
 
-  const handleChangeCompatibilityLevel = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    setNextCompatibilityLevel(
-      event.target.value as CompatibilityLevelCompatibilityEnum
-    );
+  const handleChangeCompatibilityLevel = (level: string | number) => {
+    setNextCompatibilityLevel(level as CompatibilityLevelCompatibilityEnum);
     setIsConfirmationVisible(true);
   };
 
@@ -62,10 +58,10 @@ const GlobalSchemaSelector: React.FC = () => {
           clusterName,
           compatibilityLevel: { compatibility: nextCompatibilityLevel },
         });
-        dispatch(fetchSchemas(clusterName));
         setCurrentCompatibilityLevel(nextCompatibilityLevel);
         setNextCompatibilityLevel(undefined);
         setIsConfirmationVisible(false);
+        dispatch(fetchSchemas(clusterName));
       } catch (e) {
         const err = await getResponse(e as Response);
         dispatch(serverErrorAlertAdded(err));
@@ -81,18 +77,14 @@ const GlobalSchemaSelector: React.FC = () => {
       <div>Global Compatibility Level: </div>
       <Select
         selectSize="M"
-        value={currentCompatibilityLevel}
+        defaultValue={currentCompatibilityLevel}
+        minWidth="200px"
         onChange={handleChangeCompatibilityLevel}
         disabled={isFetching || isUpdating || isConfirmationVisible}
-      >
-        {Object.keys(CompatibilityLevelCompatibilityEnum).map(
-          (level: string) => (
-            <option key={level} value={level}>
-              {level}
-            </option>
-          )
+        options={Object.keys(CompatibilityLevelCompatibilityEnum).map(
+          (level) => ({ value: level, label: level })
         )}
-      </Select>
+      />
       <ConfirmationModal
         isOpen={isConfirmationVisible}
         onCancel={() => setIsConfirmationVisible(false)}

kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/__test__/GlobalSchemaSelector.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import { CompatibilityLevelCompatibilityEnum } from 'generated-sources';
 import GlobalSchemaSelector from 'components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector';
@@ -10,15 +10,20 @@ import fetchMock from 'fetch-mock';
 
 const clusterName = 'testClusterName';
 
-const selectForwardOption = () =>
-  userEvent.selectOptions(
-    screen.getByRole('listbox'),
-    CompatibilityLevelCompatibilityEnum.FORWARD
+const selectForwardOption = () => {
+  const dropdownElement = screen.getByRole('listbox');
+  // clicks to open dropdown
+  userEvent.click(within(dropdownElement).getByRole('option'));
+  userEvent.click(
+    screen.getByText(CompatibilityLevelCompatibilityEnum.FORWARD)
   );
+};
 
 const expectOptionIsSelected = (option: string) => {
-  const optionElement: HTMLOptionElement = screen.getByText(option);
-  expect(optionElement.selected).toBeTruthy();
+  const dropdownElement = screen.getByRole('listbox');
+  const selectedOption = within(dropdownElement).getAllByRole('option');
+  expect(selectedOption.length).toEqual(1);
+  expect(selectedOption[0]).toHaveTextContent(option);
 };
 
 describe('GlobalSchemaSelector', () => {