redesign the export messages button look and feel, linter errors

Author: alexanderlz

frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx

@@ -1,6 +1,6 @@
 import 'react-datepicker/dist/react-datepicker.css';
 
-import { SerdeUsage, TopicMessageConsuming } from 'generated-sources';
+import { SerdeUsage, TopicMessageConsuming, TopicMessage } from 'generated-sources';
 import React, { ChangeEvent, useMemo, useState } from 'react';
 import { format } from 'date-fns';
 import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
@@ -54,7 +54,7 @@ export interface FiltersProps {
   consumptionStats?: TopicMessageConsuming;
   isFetching: boolean;
   abortFetchData: () => void;
-  messages?: any[]; // Add messages prop for download functionality
+  messages?: TopicMessage[]; 
 }
 
 const Filters: React.FC<FiltersProps> = ({
@@ -88,10 +88,9 @@ const Filters: React.FC<FiltersProps> = ({
 
   const { data: topic } = useTopicDetails({ clusterName, topicName });
   const [createdEditedSmartId, setCreatedEditedSmartId] = useState<string>();
-  const remove = useMessageFiltersStore((state) => state.remove);
+  const remove = useMessageFiltersStore((state: { remove: (id: string) => void }) => state.remove);
 
   // Download functionality
-  const [selectedFormat, setSelectedFormat] = useState<DownloadFormat>('json');
   const [showFormatSelector, setShowFormatSelector] = useState(false);
 
   const formatOptions = [
@@ -101,7 +100,7 @@ const Filters: React.FC<FiltersProps> = ({
 
   const baseFileName = `topic-messages${padCurrentDateTimeString()}`;
 
-  const savedMessagesJson: MessageData[] = messages.map((message) => ({
+  const savedMessagesJson: MessageData[] = messages.map((message: TopicMessage) => ({
     Value: message.content,
     Offset: message.offset,
     Key: message.key,
@@ -145,9 +144,8 @@ const Filters: React.FC<FiltersProps> = ({
   );
 
   const handleFormatSelect = (downloadFormat: DownloadFormat) => {
-    setSelectedFormat(downloadFormat);
     setShowFormatSelector(false);
-    
+
     // Automatically download after format selection
     if (downloadFormat === 'json') {
       jsonSaver.saveFile();
@@ -325,24 +323,35 @@ const Filters: React.FC<FiltersProps> = ({
                 }}
               >
                 {formatOptions.map((option) => (
-                  <div
+                  <button
                     key={option.value}
                     onClick={() => handleFormatSelect(option.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        handleFormatSelect(option.value);
+                      }
+                    }}
                     style={{
                       padding: '8px 12px',
                       cursor: 'pointer',
                       borderRadius: '4px',
                       fontSize: '12px',
+                      border: 'none',
+                      background: 'transparent',
+                      width: '100%',
+                      textAlign: 'left',
                     }}
                     onMouseEnter={(e) => {
-                      e.currentTarget.style.backgroundColor = '#f5f5f5';
+                      const target = e.currentTarget;
+                      target.style.backgroundColor = '#f5f5f5';
                     }}
                     onMouseLeave={(e) => {
-                      e.currentTarget.style.backgroundColor = 'transparent';
+                      const target = e.currentTarget;
+                      target.style.backgroundColor = 'transparent';
                     }}
                   >
                     {option.label}
-                  </div>
+                  </button>
                 ))}
               </div>
             )}
@@ -405,4 +414,3 @@ const Filters: React.FC<FiltersProps> = ({
 };
 
 export default Filters;
-

frontend/src/components/Topics/Topic/Messages/Messages.tsx

@@ -29,4 +29,3 @@ const Messages: React.FC = () => {
 };
 
 export default Messages;
-

frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx

@@ -155,4 +155,3 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
 };
 
 export default MessagesTable;
-