Fix lint errors and warnings

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

@@ -1,18 +1,21 @@
 import React from 'react';
 import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
-import { ActiveMessageFilter, MessageFilters } from 'components/Topics/Topic/Messages/Filters/Filters';
+import {
+  ActiveMessageFilter,
+  MessageFilters,
+} from 'components/Topics/Topic/Messages/Filters/Filters';
 import AddFilter from 'components/Topics/Topic/Messages/Filters/AddFilter';
 import EditFilter from 'components/Topics/Topic/Messages/Filters/EditFilter';
 
 export interface FilterModalProps {
   toggleIsOpen(): void;
-  filters?: MessageFilters[];
-  addFilter?(values: MessageFilters): void;
-  deleteFilter?(index: number): void;
-  activeFilterHandler?(activeFilter: MessageFilters, index: number): void;
+  filters: MessageFilters[];
+  addFilter(values: MessageFilters): void;
+  deleteFilter(index: number): void;
+  activeFilterHandler(activeFilter: MessageFilters, index: number): void;
   editSavedFilter(filter: FilterEdit): void;
-  activeFilter?: ActiveMessageFilter;
-  quickEditMode?: boolean
+  activeFilter: ActiveMessageFilter;
+  quickEditMode?: boolean;
 }
 
 export interface FilterEdit {
@@ -29,8 +32,9 @@ const FilterModal: React.FC<FilterModalProps> = ({
   editSavedFilter,
   activeFilter,
   quickEditMode = false,
-  }) => {
-  const [isInEditMode, setIsInEditMode] = React.useState<boolean>(quickEditMode);
+}) => {
+  const [isInEditMode, setIsInEditMode] =
+    React.useState<boolean>(quickEditMode);
   const [isSavedFiltersOpen, setIsSavedFiltersOpen] =
     React.useState<boolean>(false);
 
@@ -38,9 +42,11 @@ const FilterModal: React.FC<FilterModalProps> = ({
     setIsInEditMode(!isInEditMode);
   };
 
-  const [editFilter, setEditFilter] = React.useState<FilterEdit>( () => {
-    const {index, name, code} = activeFilter!;
-    return quickEditMode ? { index, filter: { name, code } } : { index: -1, filter: { name: "", code: "" } };
+  const [editFilter, setEditFilter] = React.useState<FilterEdit>(() => {
+    const { index, name, code } = activeFilter;
+    return quickEditMode
+      ? { index, filter: { name, code } }
+      : { index: -1, filter: { name: '', code: '' } };
   });
   const editFilterHandler = (value: FilterEdit) => {
     setEditFilter(value);
@@ -52,18 +58,18 @@ const FilterModal: React.FC<FilterModalProps> = ({
   return (
     <S.MessageFilterModal data-testid="messageFilterModal">
       {isInEditMode ? (
-          <EditFilter
-            editFilter={editFilter}
-            toggleEditModal={toggleEditModalHandler}
-            editSavedFilter={editSavedFilter}
-          />
+        <EditFilter
+          editFilter={editFilter}
+          toggleEditModal={toggleEditModalHandler}
+          editSavedFilter={editSavedFilter}
+        />
       ) : (
         <AddFilter
           toggleIsOpen={toggleIsOpen}
-          filters={filters!}
-          addFilter={addFilter!}
-          deleteFilter={deleteFilter!}
-          activeFilterHandler={activeFilterHandler!}
+          filters={filters}
+          addFilter={addFilter}
+          deleteFilter={deleteFilter}
+          activeFilterHandler={activeFilterHandler}
           toggleEditModal={toggleEditModal}
           editFilter={editFilterHandler}
           isSavedFiltersOpen={isSavedFiltersOpen}

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

@@ -291,13 +291,11 @@ export const ActiveSmartFilter = styled.div`
   border-radius: 4px;
   font-size: 14px;
   line-height: 20px;
-
 `;
 
-
 export const EditSmartFilterIcon = styled.div(
   ({ theme: { icons } }) => css`
-    color: ${({ theme }) => theme.icons.editIcon.normal};
+    color: ${icons.editIcon.normal};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -320,35 +318,35 @@ export const EditSmartFilterIcon = styled.div(
   `
 );
 
-export const SmartFilterName = styled.div(
-  ({ theme: { icons } }) => css`
-    padding: 0 8px;
-    min-width: 32px;
-  `);
+export const SmartFilterName = styled.div`
+  padding: 0 8px;
+  min-width: 32px;
+`;
 
 export const DeleteSmartFilterIcon = styled.div(
   ({ theme: { icons } }) => css`
-  color: ${({ theme }) => theme.icons.closeIcon.normal};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  cursor: pointer;
-  border-left: 1px solid ${icons.closeIcon.border};
+    color: ${icons.closeIcon.normal};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 32px;
+    cursor: pointer;
+    border-left: 1px solid ${icons.closeIcon.border};
 
-  &:hover {
-    ${closeIcon} {
-      fill: ${icons.closeIcon.hover};
+    &:hover {
+      ${closeIcon} {
+        fill: ${icons.closeIcon.hover};
+      }
     }
-  }
 
-  &:active {
-    ${closeIcon} {
-      fill: ${icons.closeIcon.active};
+    &:active {
+      ${closeIcon} {
+        fill: ${icons.closeIcon.active};
+      }
     }
-  }
-`);
+  `
+);
 
 export const MessageLoading = styled.div.attrs({
   role: 'contentLoader',

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

@@ -311,7 +311,7 @@ const Filters: React.FC<FiltersProps> = ({
     setQueryType(MessageFilterType.GROOVY_SCRIPT);
   };
 
-  const composeMessageFilter = (filter: FilterEdit) : ActiveMessageFilter => ({
+  const composeMessageFilter = (filter: FilterEdit): ActiveMessageFilter => ({
     index: filter.index,
     name: filter.filter.name,
     code: filter.filter.code,
@@ -320,7 +320,7 @@ const Filters: React.FC<FiltersProps> = ({
   const storeAsActiveFilter = (filter: FilterEdit) => {
     const messageFilter = JSON.stringify(composeMessageFilter(filter));
     localStorage.setItem('activeFilter', messageFilter);
-  }
+  };
 
   const editSavedFilter = (filter: FilterEdit) => {
     const filters = [...savedFilters];
@@ -555,9 +555,7 @@ const Filters: React.FC<FiltersProps> = ({
         </Button>
         {activeFilter.name && (
           <S.ActiveSmartFilter data-testid="activeSmartFilter">
-            <S.SmartFilterName>
-              {activeFilter.name}
-            </S.SmartFilterName>
+            <S.SmartFilterName>{activeFilter.name}</S.SmartFilterName>
             <S.EditSmartFilterIcon onClick={toggleQuickEdit}>
               <EditIcon />
             </S.EditSmartFilterIcon>
@@ -567,14 +565,18 @@ const Filters: React.FC<FiltersProps> = ({
           </S.ActiveSmartFilter>
         )}
       </S.ActiveSmartFilterWrapper>
-      {isQuickEditOpen &&
+      {isQuickEditOpen && (
         <FilterModal
           quickEditMode
           activeFilter={activeFilter}
           toggleIsOpen={toggleQuickEdit}
           editSavedFilter={editCurrentFilter}
+          filters={[]}
+          addFilter={() => null}
+          deleteFilter={() => null}
+          activeFilterHandler={() => null}
         />
-      }
+      )}
 
       {isOpen && (
         <FilterModal

kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx

@@ -1,21 +1,24 @@
-import React from "react";
-import styled, { useTheme } from "styled-components";
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 
 const CloseIcon: React.FC<{ className?: string }> = ({ className }) => {
   const theme = useTheme();
   return (
-    <svg width="9"
-         height="9"
-         viewBox="0 0 9 9"
-         className={className}
-         fill={theme.icons.closeIcon.normal}
-         xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5 4.29289L8.64645 0.646447C8.84171 0.451184 9.15829 0.451184 9.35355 0.646447C9.54882 0.841709 9.54882 1.15829 9.35355 1.35355L5.70711 5L9.35355 8.64645C9.54882 8.84171 9.54882 9.15829 9.35355 9.35355C9.15829 9.54882 8.84171 9.54882 8.64645 9.35355L5 5.70711L1.35355 9.35355C1.15829 9.54881 0.841709 9.54881 0.646447 9.35355C0.451185 9.15829 0.451185 8.84171 0.646447 8.64645L4.29289 5L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z" />
+    <svg
+      width="9"
+      height="9"
+      viewBox="0 0 9 9"
+      className={className}
+      fill={theme.icons.closeIcon.normal}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5 4.29289L8.64645 0.646447C8.84171 0.451184 9.15829 0.451184 9.35355 0.646447C9.54882 0.841709 9.54882 1.15829 9.35355 1.35355L5.70711 5L9.35355 8.64645C9.54882 8.84171 9.54882 9.15829 9.35355 9.35355C9.15829 9.54882 8.84171 9.54882 8.64645 9.35355L5 5.70711L1.35355 9.35355C1.15829 9.54881 0.841709 9.54881 0.646447 9.35355C0.451185 9.15829 0.451185 8.84171 0.646447 8.64645L4.29289 5L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z"
+      />
     </svg>
   );
 };
 
 export default styled(CloseIcon)``;
-

kafka-ui-react-app/src/components/common/Icons/EditIcon.tsx

@@ -4,12 +4,14 @@ import styled, { useTheme } from 'styled-components';
 const EditIcon: React.FC<{ className?: string }> = ({ className }) => {
   const theme = useTheme();
   return (
-    <svg width="13"
-         height="14"
-         viewBox="0 0 13 14"
-         className={className}
-         fill={theme.icons.editIcon.normal}
-         xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      className={className}
+      fill={theme.icons.editIcon.normal}
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path d="M9.53697 1.15916C10.0914 0.60473 10.9886 0.602975 11.5408 1.15524L12.5408 2.15518C13.093 2.70745 13.0913 3.60461 12.5368 4.15904L10.3564 6.33944L7.35657 3.33956L9.53697 1.15916Z" />
       <path d="M6.64946 4.04667L9.53674e-07 10.6961L0 13.696L2.99988 13.696L9.64934 7.04655L6.64946 4.04667Z" />
     </svg>

kafka-ui-react-app/src/theme/theme.ts

@@ -165,13 +165,13 @@ const baseTheme = {
       normal: Colors.neutral[30],
       hover: Colors.neutral[90],
       active: Colors.neutral[100],
-      border: Colors.neutral[10]
+      border: Colors.neutral[10],
     },
     closeIcon: {
       normal: Colors.neutral[30],
       hover: Colors.neutral[90],
       active: Colors.neutral[100],
-      border: Colors.neutral[10]
+      border: Colors.neutral[10],
     },
     cancelIcon: Colors.neutral[30],
     autoIcon: Colors.neutral[95],
@@ -1123,13 +1123,13 @@ export const darkTheme: ThemeType = {
       normal: Colors.neutral[50],
       hover: Colors.neutral[30],
       active: Colors.neutral[40],
-      border: Colors.neutral[70]
+      border: Colors.neutral[70],
     },
     closeIcon: {
       normal: Colors.neutral[50],
       hover: Colors.neutral[30],
       active: Colors.neutral[40],
-      border: Colors.neutral[70]
+      border: Colors.neutral[70],
     },
     cancelIcon: Colors.neutral[0],
     autoIcon: Colors.neutral[0],