Repository: provectus/kafka-ui
Issue: Get rid of all unexpected "any" types. 
Labels: good first issue
scope/frontend

1. Run `npm run lint` from `/kafka-ui-react-app`
2. Specify a correct type instead of `any` for all cases from the list

```
src/components/Topics/Details/Messages/Messages.tsx
  Line 41:29:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 76:13:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 101:52:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 181:43:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 230:53:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/redux/store/configureStore/dev.ts
  Line 9:16:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
```

Issue comments:

Pull request review comments:
@Guzel738 Can you disable `no-console` rule for the whole file instead commenting single lines?
There is no need to disable `no-console` rule for the whole project. We can disable it for `serviceWorker.ts` file.
@Guzel738 Could you please remove `no-console` rule from this config?
```suggestion

```

👍 

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/.eslintrc.json b/kafka-ui-react-app/.eslintrc.json
index 6ffce16d636..b35f0e2732f 100644
--- a/kafka-ui-react-app/.eslintrc.json
+++ b/kafka-ui-react-app/.eslintrc.json
@@ -28,7 +28,8 @@
     "prettier/prettier": "error",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "jsx-a11y/label-has-associated-control": "off",
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "@typescript-eslint/no-explicit-any": "error"
   },
   "overrides": [
     {
diff --git a/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx b/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx
index 9db4d57804f..f9ef65f18e4 100644
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx
@@ -38,8 +38,8 @@ interface FilterProps {
   partition: TopicMessage['partition'];
 }
 
-function usePrevious(value: any) {
-  const ref = useRef();
+function usePrevious(value: Date | null) {
+  const ref = useRef<Date | null>();
   useEffect(() => {
     ref.current = value;
   });
@@ -73,7 +73,8 @@ const Messages: React.FC<Props> = ({
     Partial<TopicMessageQueryParams>
   >({ limit: 100 });
   const [debouncedCallback] = useDebouncedCallback(
-    (query: any) => setQueryParams({ ...queryParams, ...query }),
+    (query: Partial<TopicMessageQueryParams>) =>
+      setQueryParams({ ...queryParams, ...query }),
     1000
   );
 
@@ -98,7 +99,7 @@ const Messages: React.FC<Props> = ({
     );
   }, [messages, partitions]);
 
-  const getSeekToValuesForPartitions = (partition: any) => {
+  const getSeekToValuesForPartitions = (partition: Option) => {
     const foundedValues = filterProps.find(
       (prop) => prop.partition === partition.value
     );
@@ -178,7 +179,7 @@ const Messages: React.FC<Props> = ({
     return format(date, 'yyyy-MM-dd HH:mm:ss');
   };
 
-  const getMessageContentBody = (content: any) => {
+  const getMessageContentBody = (content: Record<string, unknown>) => {
     try {
       const contentObj =
         typeof content !== 'object' ? JSON.parse(content) : content;
@@ -226,7 +227,7 @@ const Messages: React.FC<Props> = ({
     });
   };
 
-  const filterOptions = (options: Option[], filter: any) => {
+  const filterOptions = (options: Option[], filter: string) => {
     if (!filter) {
       return options;
     }
@@ -256,7 +257,10 @@ const Messages: React.FC<Props> = ({
                 <td style={{ width: 150 }}>{message.offset}</td>
                 <td style={{ width: 100 }}>{message.partition}</td>
                 <td key={Math.random()} style={{ wordBreak: 'break-word' }}>
-                  {getMessageContentBody(message.content)}
+                  {message.content &&
+                    getMessageContentBody(
+                      message.content as Record<string, unknown>
+                    )}
                 </td>
               </tr>
             ))}
diff --git a/kafka-ui-react-app/src/redux/store/configureStore/dev.ts b/kafka-ui-react-app/src/redux/store/configureStore/dev.ts
index 552ec094c7f..e90d7c2af01 100644
--- a/kafka-ui-react-app/src/redux/store/configureStore/dev.ts
+++ b/kafka-ui-react-app/src/redux/store/configureStore/dev.ts
@@ -2,11 +2,17 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from '../../reducers';
 
+declare global {
+  interface Window {
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
+  }
+}
+
 export default () => {
   const middlewares = [thunk];
 
   const composeEnhancers =
-    (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
   const enhancer = composeEnhancers(applyMiddleware(...middlewares));
 
diff --git a/kafka-ui-react-app/src/serviceWorker.ts b/kafka-ui-react-app/src/serviceWorker.ts
index 98a3447f698..f2566365332 100644
--- a/kafka-ui-react-app/src/serviceWorker.ts
+++ b/kafka-ui-react-app/src/serviceWorker.ts
@@ -9,6 +9,7 @@
 
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://bit.ly/CRA-PWA
+/* eslint-disable no-console */
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||


Test patch: