fix the eslint updated rules

Author: Mgrdich

frontend/.eslintrc.json

@@ -47,6 +47,7 @@
     "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
     // breaks builds as we still have those warns
     "react-hooks/exhaustive-deps": "off", // Checks effect dependencies
+    "jsx-a11y/control-has-associated-label": "off",
     "import/no-extraneous-dependencies": [
       "error",
       {

frontend/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts

@@ -42,34 +42,32 @@ export const ButtonsContainer = styled.div`
 `;
 
 export const SQLEditor = styled(BaseSQLEditor)(
-  ({ readOnly, theme }) =>
-    css`
-      background: ${readOnly && theme.ksqlDb.query.editor.readonly.background};
-      .ace-cursor {
-        ${readOnly && `background: ${theme.default.transparentColor} `}
-      }
+  ({ readOnly, theme }) => css`
+    background: ${readOnly && theme.ksqlDb.query.editor.readonly.background};
+    .ace-cursor {
+      ${readOnly && `background: ${theme.default.transparentColor} `}
+    }
 
-      .ace_content {
-        background-color: ${theme.default.backgroundColor};
-        color: ${theme.default.color.normal};
-      }
-      .ace_line {
-        background-color: ${theme.ksqlDb.query.editor.activeLine
-          .backgroundColor};
-      }
-      .ace_gutter-cell {
-        background-color: ${theme.ksqlDb.query.editor.cell.backgroundColor};
-      }
-      .ace_gutter-layer {
-        background-color: ${theme.ksqlDb.query.editor.layer.backgroundColor};
-        color: ${theme.default.color.normal};
-      }
-      .ace_cursor {
-        color: ${theme.ksqlDb.query.editor.cursor};
-      }
+    .ace_content {
+      background-color: ${theme.default.backgroundColor};
+      color: ${theme.default.color.normal};
+    }
+    .ace_line {
+      background-color: ${theme.ksqlDb.query.editor.activeLine.backgroundColor};
+    }
+    .ace_gutter-cell {
+      background-color: ${theme.ksqlDb.query.editor.cell.backgroundColor};
+    }
+    .ace_gutter-layer {
+      background-color: ${theme.ksqlDb.query.editor.layer.backgroundColor};
+      color: ${theme.default.color.normal};
+    }
+    .ace_cursor {
+      color: ${theme.ksqlDb.query.editor.cursor};
+    }
 
-      .ace_print-margin {
-        display: none;
-      }
-    `
+    .ace_print-margin {
+      display: none;
+    }
+  `
 );

frontend/src/components/NavBar/NavBar.styled.ts

@@ -111,7 +111,11 @@ export const Span = styled.span(
     left: calc(50% - 8px);
     transform-origin: center;
     transition-duration: 86ms;
-    transition-property: background-color, opacity, transform, -webkit-transform;
+    transition-property:
+      background-color,
+      opacity,
+      transform,
+      -webkit-transform;
     transition-timing-function: ease-out;
     width: 16px;
 

frontend/src/components/PageContainer/PageContainer.styled.ts

@@ -27,7 +27,10 @@ export const Sidebar = styled.div<{ $visible: boolean }>(
     bottom: 0;
     padding: 8px 16px;
     overflow-y: scroll;
-    transition: width 0.25s, opacity 0.25s, transform 0.25s,
+    transition:
+      width 0.25s,
+      opacity 0.25s,
+      transform 0.25s,
       -webkit-transform 0.25s;
     background: ${theme.menu.backgroundColor.normal};
     @media screen and (max-width: 1023px) {

frontend/src/components/Topics/Topic/Edit/topicParamsTransformer.ts

@@ -19,11 +19,14 @@ const topicParamsTransformer = (topic?: Topic, config?: TopicConfig[]) => {
     return TOPIC_EDIT_FORM_DEFAULT_PROPS;
   }
 
-  const customParams = config.reduce((acc, { name, value, defaultValue }) => {
-    if (value === defaultValue) return acc;
-    if (!TOPIC_CUSTOM_PARAMS[name]) return acc;
-    return [...acc, { name, value }];
-  }, [] as { name: string; value?: string }[]);
+  const customParams = config.reduce(
+    (acc, { name, value, defaultValue }) => {
+      if (value === defaultValue) return acc;
+      if (!TOPIC_CUSTOM_PARAMS[name]) return acc;
+      return [...acc, { name, value }];
+    },
+    [] as { name: string; value?: string }[]
+  );
 
   return {
     ...TOPIC_EDIT_FORM_DEFAULT_PROPS,

frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx

@@ -108,7 +108,7 @@ describe('AddEditFilterContainer component', () => {
       const textAreaElement = inputs[0] as HTMLTextAreaElement;
       const inputNameElement = inputs[1];
       expect(inputNameElement).toHaveValue(mockData.id);
-      expect(textAreaElement.value).toEqual('');
+      expect(textAreaElement).toHaveValue('');
     });
 
     it('should display the checkbox is not shown during the edit mode', async () => {

frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx

@@ -16,12 +16,11 @@ const contentTest =
   '{"payload":{"author":"DwaywelayTOP","archived":false,"name":"t3_11jshwd","id":"11jshwd"}}';
 jest.mock(
   'components/Topics/Topic/Messages/MessageContent/MessageContent',
-  () => () =>
-    (
-      <tr>
-        <td>{messageContentText}</td>
-      </tr>
-    )
+  () => () => (
+    <tr>
+      <td>{messageContentText}</td>
+    </tr>
+  )
 );
 
 describe('Message component', () => {

frontend/src/lib/hooks/useAppParams.tsx

@@ -2,7 +2,7 @@ import { Params, useParams } from 'react-router-dom';
 import { ClusterNameRoute } from 'lib/paths';
 
 export default function useAppParams<
-  T extends { [K in keyof Params]?: string }
+  T extends { [K in keyof Params]?: string },
 >() {
   const params = useParams<T>() as T;
 

frontend/src/lib/hooks/useMessageFiltersStore.ts

@@ -1,5 +1,5 @@
 import { LOCAL_STORAGE_KEY_PREFIX } from 'lib/constants';
-import create from 'zustand';
+import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 export type AdvancedFiltersType = Record<string, AdvancedFilter>;

frontend/src/lib/yupExtended.ts

@@ -7,7 +7,7 @@ declare module 'yup' {
     TType extends yup.Maybe<string> = string | undefined,
     TContext = yup.AnyObject,
     TDefault = undefined,
-    TFlags extends yup.Flags = ''
+    TFlags extends yup.Flags = '',
   > extends yup.Schema<TType, TContext, TDefault, TFlags> {
     isJsonObject(message?: string): StringSchema<TType, TContext>;
   }