Fix select input + bunch of cosmetic changes

kafbat · Mar 14, 2024 · 2e4a33a · 2e4a33a
1 parent 237a6e4
commit 2e4a33a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 21 deletions.
diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts
@@ -6,6 +6,8 @@ import EditIcon from 'components/common/Icons/EditIcon';
 import closeIcon from 'components/common/Icons/CloseIcon';
 import { PollingMode } from 'generated-sources';
 
+import { isModeOptionWithInput } from './utils';
+
 interface SavedFilterProps {
   selected: boolean;
 }
@@ -318,8 +320,10 @@ export const MessageLoadingSpinner = styled.div<MessageLoadingSpinnerProps>`
 
 // styled component lib bug it does not pick up the generic
 export const FilterModeTypeSelect = styled(Select<PollingMode>)`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-top-right-radius: ${(props) =>
+    !props.value || !isModeOptionWithInput(props.value) ? '4px' : '0'};
+  border-bottom-right-radius: ${(props) =>
+    !props.value || !isModeOptionWithInput(props.value) ? '4px' : '0'};
   user-select: none;
 `;
 

diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
@@ -157,7 +157,7 @@ const Filters: React.FC<FiltersProps> = ({
             options={getSerdeOptions(serdes.key || [])}
             value={keySerde}
             selectSize="M"
-            placeholder="Select KeySerde"
+            placeholder="Key Serde"
           />
           <Select
             id="selectValueSerdeOptions"
@@ -167,7 +167,7 @@ const Filters: React.FC<FiltersProps> = ({
             value={valueSerde}
             minWidth="170px"
             selectSize="M"
-            placeholder="Select ValueSerde"
+            placeholder="Value Serde"
           />
           <Button
             type="submit"

diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/MessagesTable.spec.tsx
@@ -8,8 +8,6 @@ import MessagesTable, {
 import { TopicMessage, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { useIsLiveMode } from 'lib/hooks/useMessagesFilters';
 
-import { useMessageFiltersStore } from '../../../../../lib/hooks/useMessageFiltersStore';
-
 export const topicMessagePayload: TopicMessage = {
   partition: 29,
   offset: 14,

diff --git a/frontend/src/components/common/Select/Select.tsx b/frontend/src/components/common/Select/Select.tsx
@@ -9,7 +9,6 @@ export interface SelectProps<T> {
   id?: string;
   name?: string;
   selectSize?: 'M' | 'L';
-  isLive?: boolean;
   minWidth?: string;
   value?: T;
   defaultValue?: T;

diff --git a/frontend/src/components/common/Select/__tests__/Select.spec.tsx b/frontend/src/components/common/Select/__tests__/Select.spec.tsx
@@ -60,18 +60,4 @@ describe('Custom Select', () => {
       expect(getOption()).toHaveTextContent(normalOptionLabel);
     });
   });
-
-  describe('when non-live', () => {
-    it('there is not live icon', () => {
-      renderComponent({ isLive: false });
-      expect(screen.queryByTestId('liveIcon')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('when live', () => {
-    it('there is live icon', () => {
-      render(<Select name="test" {...{ isLive: true }} />);
-      expect(screen.getByRole('listbox')).toBeInTheDocument();
-    });
-  });
 });