Lint fixes

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

@@ -41,17 +41,18 @@ import { useRegisterFilter, useTopicDetails } from 'lib/hooks/api/topics';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import { getSerdeOptions } from 'components/Topics/Topic/SendMessage/utils';
 import { useSerdes } from 'lib/hooks/api/topicMessages';
+import { getTopicMessgesLastLoadedPage } from 'redux/reducers/topicMessages/selectors';
+import { useAppSelector } from 'lib/hooks/redux';
+import { showAlert } from 'lib/errorHandling';
 
-import * as S from './Filters.styled';
+import { getDefaultSerdeName } from './getDefaultSerdeName';
 import {
   filterOptions,
   getOffsetFromSeekToParam,
   getSelectedPartitionsFromSeekToParam,
   getTimestampFromSeekToParam,
 } from './utils';
-import { getTopicMessgesLastLoadedPage } from 'redux/reducers/topicMessages/selectors';
-import { useAppSelector } from 'lib/hooks/redux';
-import { getDefaultSerdeName } from '../getDefaultSerdeName';
+import * as S from './Filters.styled';
 
 type Query = Record<string, string | string[] | number>;
 
@@ -216,60 +217,60 @@ const Filters: React.FC<FiltersProps> = ({
     );
   };
 
-  const getPollingMode = (seekDirection: SeekDirection, seekType: SeekType): PollingMode => {
-    if (seekDirection == SeekDirection.FORWARD) {
+  const getPollingMode = (): PollingMode => {
+    if (seekDirection === SeekDirection.FORWARD) {
       if (offset && currentSeekType === SeekType.OFFSET)
         return PollingMode.FROM_OFFSET;
       if (timestamp && currentSeekType === SeekType.TIMESTAMP)
         return PollingMode.FROM_TIMESTAMP;
       return PollingMode.EARLIEST;
     }
-    if (seekDirection == SeekDirection.BACKWARD) {
+    if (seekDirection === SeekDirection.BACKWARD) {
       if (offset && currentSeekType === SeekType.OFFSET)
         return PollingMode.TO_OFFSET;
       if (timestamp && currentSeekType === SeekType.TIMESTAMP)
         return PollingMode.TO_TIMESTAMP;
       return PollingMode.LATEST;
     }
-    if (seekDirection == SeekDirection.TAILING)
-      return PollingMode.TAILING;
+    if (seekDirection === SeekDirection.TAILING) return PollingMode.TAILING;
     return PollingMode.LATEST;
-  }
+  };
 
   const getSmartFilterId = async (code: string) => {
     try {
       const filterId = await registerFilter.mutateAsync({
-        filterCode: code
+        filterCode: code,
       });
       return filterId;
     } catch (e) {
-      // do nothing
+      showAlert('error', {
+        message: 'Error occured while registering smart filter',
+      });
+      return '';
     }
-  }
+  };
 
   const handleFiltersSubmit = async (cursor?: TopicMessageNextPageCursor) => {
-
-    if (!keySerde || !valueSerde)
-      return;
+    if (!keySerde || !valueSerde) return;
     const props: Query = {
-      mode: getPollingMode(seekDirection, currentSeekType),
+      mode: getPollingMode(),
       limit: PER_PAGE,
-      stringFilter: stringFilter,
-      offset: offset,
+      stringFilter,
+      offset,
       timestamp: timestamp?.getTime() || 0,
       keySerde: keySerde || searchParams.get('keySerde') || '',
       valueSerde: valueSerde || searchParams.get('valueSerde') || '',
     };
 
-    if (cursor?.id)
-      props.cursor = cursor?.id;
+    if (cursor?.id) props.cursor = cursor?.id;
 
     if (selectedPartitions.length !== partitions.length) {
       props.partitions = selectedPartitions.map((p) => p.value);
     }
 
     if (queryType === MessageFilterType.GROOVY_SCRIPT) {
-      props.smartFilterId = (await getSmartFilterId(activeFilter.code))?.id || '';
+      props.smartFilterId =
+        (await getSmartFilterId(activeFilter.code))?.id || '';
     }
 
     const newProps = omitBy(props, (v) => v === undefined || v === '');
@@ -285,7 +286,7 @@ const Filters: React.FC<FiltersProps> = ({
     setPage(1);
     resetAllMessages();
     handleFiltersSubmit();
-  }
+  };
 
   const handleSSECancel = () => {
     if (!source.current) return;
@@ -360,11 +361,10 @@ const Filters: React.FC<FiltersProps> = ({
   // eslint-disable-next-line consistent-return
   React.useEffect(() => {
     if (location.search?.length !== 0) {
-      if (page === currentPage)
-        return () => { };
+      if (page === currentPage) return () => {};
       if (page <= lastLoadedPage) {
         setCurrentPage(page);
-        return () => { };
+        return () => {};
       }
 
       const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
@@ -413,7 +413,7 @@ const Filters: React.FC<FiltersProps> = ({
         }
       };
 
-      sse.onerror = (e) => {
+      sse.onerror = () => {
         setIsFetching(false);
         sse.close();
       };
@@ -434,7 +434,7 @@ const Filters: React.FC<FiltersProps> = ({
     updateMeta,
     updatePhase,
     updateCursor,
-    setLastLoadedPage
+    setLastLoadedPage,
   ]);
 
   React.useEffect(() => {
@@ -463,19 +463,13 @@ const Filters: React.FC<FiltersProps> = ({
     currentSeekType,
     seekDirection,
     keySerde,
-    valueSerde
+    valueSerde,
   ]);
 
   React.useEffect(() => {
     setPage(1);
     resetAllMessages();
-  }, [
-    selectedPartitions,
-    offset,
-    timestamp,
-    stringFilter,
-    activeFilter,
-  ]);
+  }, [selectedPartitions, offset, timestamp, stringFilter, activeFilter]);
 
   React.useEffect(() => {
     setIsTailing(isLive);
@@ -567,9 +561,7 @@ const Filters: React.FC<FiltersProps> = ({
             buttonType="secondary"
             buttonSize="M"
             disabled={isSubmitDisabled}
-            onClick={() =>
-              isFetching ? handleSSECancel() : handleSubmit()
-            }
+            onClick={() => (isFetching ? handleSSECancel() : handleSubmit())}
             style={{ fontWeight: 500 }}
           >
             {isFetching ? 'Cancel' : 'Submit'}
@@ -585,7 +577,11 @@ const Filters: React.FC<FiltersProps> = ({
         />
       </div>
       <S.ActiveSmartFilterWrapper>
-        <Search placeholder="Search" disabled={isTailing} onChange={setStringFilter} />
+        <Search
+          placeholder="Search"
+          disabled={isTailing}
+          onChange={setStringFilter}
+        />
 
         <Button buttonType="secondary" buttonSize="M" onClick={toggle}>
           <PlusIcon />

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

@@ -1,12 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import TopicMessagesContext from 'components/contexts/TopicMessagesContext';
-import { SeekDirection, SerdeUsage } from 'generated-sources';
+import { SeekDirection } from 'generated-sources';
 import { useSearchParams } from 'react-router-dom';
-import { useSerdes } from 'lib/hooks/api/topicMessages';
-import useAppParams from 'lib/hooks/useAppParams';
-import { RouteParamsClusterTopic } from 'lib/paths';
-import { getDefaultSerdeName } from 'components/Topics/Topic/Messages/getDefaultSerdeName';
-import { MESSAGES_PER_PAGE } from 'lib/constants';
 
 import MessagesTable from './MessagesTable';
 import FiltersContainer from './Filters/FiltersContainer';
@@ -32,33 +27,13 @@ export const SeekDirectionOptionsObj = {
 export const SeekDirectionOptions = Object.values(SeekDirectionOptionsObj);
 
 const Messages: React.FC = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
-
-  // const { data: serdes = {} } = useSerdes({
-  //   clusterName,
-  //   topicName,
-  //   use: SerdeUsage.DESERIALIZE,
-  // });
-
-  // React.useEffect(() => {
-  //   if (!searchParams.get('keySerde')) {
-  //     searchParams.set('keySerde', getDefaultSerdeName(serdes.key || []));
-  //   }
-  //   if (!searchParams.get('valueSerde')) {
-  //     searchParams.set('valueSerde', getDefaultSerdeName(serdes.value || []));
-  //   }
-  //   if (!searchParams.get('limit')) {
-  //     searchParams.set('limit', MESSAGES_PER_PAGE);
-  //   }
-  //   setSearchParams(searchParams);
-  // }, [serdes]);
+  const [searchParams] = useSearchParams();
 
   const defaultSeekValue = SeekDirectionOptions[0];
 
   const [seekDirection, setSeekDirection] = React.useState<SeekDirection>(
     (searchParams.get('seekDirection') as SeekDirection) ||
-    defaultSeekValue.value
+      defaultSeekValue.value
   );
 
   const [isLive, setIsLive] = useState<boolean>(

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

@@ -38,8 +38,7 @@ const MessagesTable: React.FC = () => {
 
   const isNextPageButtonDisabled =
     isPaginationDisabled || messages.length < Number(MESSAGES_PER_PAGE);
-  const isPrevPageButtonDisabled =
-    isPaginationDisabled || page === 1;
+  const isPrevPageButtonDisabled = isPaginationDisabled || page === 1;
 
   const handleNextPage = () => {
     // searchParams.set('page', String(Number(page || 1) + 1));
@@ -75,16 +74,18 @@ const MessagesTable: React.FC = () => {
             <TableHeaderCell title="Timestamp" />
             <TableHeaderCell
               title="Key"
-              previewText={`Preview ${keyFilters.length ? `(${keyFilters.length} selected)` : ''
-                }`}
+              previewText={`Preview ${
+                keyFilters.length ? `(${keyFilters.length} selected)` : ''
+              }`}
               onPreview={() => setPreviewFor('key')}
             />
             <TableHeaderCell
               title="Value"
-              previewText={`Preview ${contentFilters.length
-                ? `(${contentFilters.length} selected)`
-                : ''
-                }`}
+              previewText={`Preview ${
+                contentFilters.length
+                  ? `(${contentFilters.length} selected)`
+                  : ''
+              }`}
               onPreview={() => setPreviewFor('content')}
             />
             <TableHeaderCell> </TableHeaderCell>

kafka-ui-react-app/src/components/common/Search/Search.tsx

@@ -47,8 +47,7 @@ const Search: React.FC<SearchProps> = ({
   const clearSearchValue = () => {
     if (onChange) {
       onChange('');
-    }
-    else if (searchParams.get('q')) {
+    } else if (searchParams.get('q')) {
       searchParams.set('q', '');
       setSearchParams(searchParams);
     }

kafka-ui-react-app/src/components/contexts/TopicMessagesContext.ts

@@ -4,8 +4,8 @@ import { SeekDirection } from 'generated-sources';
 export interface ContextProps {
   seekDirection: SeekDirection;
   changeSeekDirection(val: string): void;
-  page: number,
-  setPage(page: number): void,
+  page: number;
+  setPage(page: number): void;
   isLive: boolean;
 }
 

kafka-ui-react-app/src/lib/hooks/api/topics.ts

@@ -16,7 +16,6 @@ import {
   GetTopicDetailsRequest,
   GetTopicsRequest,
   MessageFilterRegistration,
-  RegisterFilterRequest,
   Topic,
   TopicConfig,
   TopicCreation,
@@ -108,9 +107,9 @@ const formatTopicCreation = (form: TopicFormData): TopicCreation => {
 
   return replicationFactor.toString() !== ''
     ? {
-      ...topicsvalue,
-      replicationFactor,
-    }
+        ...topicsvalue,
+        replicationFactor,
+      }
     : topicsvalue;
 };
 
@@ -338,7 +337,10 @@ export function useRegisterFilter(props: GetTopicDetailsRequest) {
   const client = useQueryClient();
   return useMutation(
     (filter: MessageFilterRegistration) =>
-      messagesApi.registerFilter({ ...props, messageFilterRegistration: filter }),
+      messagesApi.registerFilter({
+        ...props,
+        messageFilterRegistration: filter,
+      }),
     {
       onSuccess: () => {
         showSuccessAlert({
@@ -349,5 +351,6 @@ export function useRegisterFilter(props: GetTopicDetailsRequest) {
       onError: (e) => {
         showServerError(e as Response);
       },
-    });
+    }
+  );
 }

kafka-ui-react-app/src/redux/reducers/topicMessages/selectors.ts

@@ -34,7 +34,6 @@ export const getTopicMessgesLastLoadedPage = createSelector(
   ({ lastLoadedPage }) => lastLoadedPage
 );
 
-
 export const getIsTopicMessagesFetching = createSelector(
   topicMessagesState,
   ({ isFetching }) => isFetching

kafka-ui-react-app/src/redux/reducers/topicMessages/topicMessagesSlice.ts

@@ -16,7 +16,7 @@ export const initialState: TopicMessagesState = {
   messageEventType: '',
   isFetching: false,
   currentPage: 0,
-  lastLoadedPage: 0
+  lastLoadedPage: 0,
 };
 
 const topicMessagesSlice = createSlice({
@@ -35,7 +35,7 @@ const topicMessagesSlice = createSlice({
       return {
         ...state,
         allMessages: allmessages,
-        messages: messages,
+        messages,
       };
     },
     resetTopicMessages: (state) => {
@@ -43,7 +43,7 @@ const topicMessagesSlice = createSlice({
         ...initialState,
         currentPage: state.currentPage,
         allMessages: state.allMessages,
-      }
+      };
     },
     resetAllTopicMessages: () => initialState,
     updateTopicMessagesPhase: (state, action) => {
@@ -63,14 +63,20 @@ const topicMessagesSlice = createSlice({
       state.cursor = action.payload;
     },
     setTopicMessagesCurrentPage: (state, action) => {
-      if (state.currentPage != action.payload) {
-        const messages: TopicMessage[] = state.allMessages.slice((action.payload - 1) * PER_PAGE, (action.payload - 1) * PER_PAGE + PER_PAGE);
+      if (state.currentPage !== action.payload) {
+        const messages: TopicMessage[] = state.allMessages.slice(
+          (action.payload - 1) * PER_PAGE,
+          (action.payload - 1) * PER_PAGE + PER_PAGE
+        );
         return {
           ...state,
           currentPage: action.payload,
-          messages
-        }
+          messages,
+        };
       }
+      return {
+        ...state,
+      };
     },
     setTopicMessagesLastLoadedPage: (state, action) => {
       state.lastLoadedPage = action.payload;
@@ -88,7 +94,7 @@ export const {
   updateTopicMessagesCursor,
   setTopicMessagesCurrentPage,
   setTopicMessagesLastLoadedPage,
-  resetAllTopicMessages
+  resetAllTopicMessages,
 } = topicMessagesSlice.actions;
 
 export default topicMessagesSlice.reducer;