Bump eslint-config-airbnb-typescript from 12.3.1 to 14.0.2 in /kafka-ui-react-app (#1294)

* Bump eslint-config-airbnb-typescript in /kafka-ui-react-app

Bumps [eslint-config-airbnb-typescript](https://github.com/iamturns/eslint-config-airbnb-typescript) from 12.3.1 to 14.0.2.
- [Release notes](https://github.com/iamturns/eslint-config-airbnb-typescript/releases)
- [Changelog](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/CHANGELOG.md)
- [Commits](https://github.com/iamturns/eslint-config-airbnb-typescript/compare/v12.3.1...v14.0.2)

---
updated-dependencies:
- dependency-name: eslint-config-airbnb-typescript
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update Eslint config

* Update eslint

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Oleg Shuralev <workshur@gmail.com>

kafka-ui-react-app/.eslintrc.json

@@ -25,6 +25,7 @@
     "prettier"
   ],
   "extends": [
+    "airbnb",
     "airbnb-typescript",
     "plugin:@typescript-eslint/recommended",
     "plugin:jest-dom/recommended",
@@ -70,7 +71,15 @@
           "state"
         ]
       }
-    ]
+    ],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "react/jsx-no-constructed-context-values": "off"
   },
   "overrides": [
     {

kafka-ui-react-app/package.json

@@ -11,7 +11,6 @@
     "@rooks/use-outside-click-ref": "^4.10.1",
     "@testing-library/react": "^12.0.0",
     "@types/eventsource": "^1.1.6",
-    "@types/styled-components": "^5.1.14",
     "@types/yup": "^0.29.13",
     "ace-builds": "^1.4.12",
     "ajv": "^8.6.3",
@@ -99,22 +98,22 @@
     "@types/redux-mock-store": "^1.0.3",
     "@types/styled-components": "^5.1.13",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^4.29.1",
+    "@typescript-eslint/parser": "^5.10.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "dotenv": "^10.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.7.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb": "^19.0.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest-dom": "^3.9.2",
+    "eslint-plugin-jest-dom": "^4.0.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "esprint": "^3.1.0",
     "fetch-mock-jest": "^1.5.1",
     "history": "^5.0.0",

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/fixtures.ts

@@ -7,8 +7,8 @@ export const onlineCluster: Cluster = {
   brokerCount: 1,
   onlinePartitionCount: 6,
   topicCount: 3,
-  bytesInPerSec: 0.000030618196853764715,
+  bytesInPerSec: 0.00003061819685376471,
-  bytesOutPerSec: 5.737800890036267075817,
+  bytesOutPerSec: 5.737800890036267,
   readOnly: false,
 };
 
@@ -19,8 +19,8 @@ export const offlineCluster: Cluster = {
   brokerCount: 1,
   onlinePartitionCount: 2,
   topicCount: 2,
-  bytesInPerSec: 8000.0000067376808542600021,
+  bytesInPerSec: 8000.00000673768,
-  bytesOutPerSec: 0.8153063567297119490871,
+  bytesOutPerSec: 0.8153063567297119,
   readOnly: true,
 };
 

kafka-ui-react-app/src/components/Topics/List/ListItem.tsx

@@ -112,22 +112,20 @@ const ListItem: React.FC<ListItemProps> = ({
       </td>
       <td className="topic-action-block" style={{ width: '4%' }}>
         {!internal && !isReadOnly && vElipsisVisble ? (
-          <>
+          <div className="has-text-right">
-            <div className="has-text-right">
+            <Dropdown label={<VerticalElipsisIcon />} right>
-              <Dropdown label={<VerticalElipsisIcon />} right>
+              <DropdownItem onClick={clearTopicMessagesHandler}>
-                <DropdownItem onClick={clearTopicMessagesHandler}>
+                <span className="has-text-danger">Clear Messages</span>
-                  <span className="has-text-danger">Clear Messages</span>
+              </DropdownItem>
+              {isTopicDeletionAllowed && (
+                <DropdownItem
+                  onClick={() => setDeleteTopicConfirmationVisible(true)}
+                >
+                  <span className="has-text-danger">Remove Topic</span>
                 </DropdownItem>
-                {isTopicDeletionAllowed && (
+              )}
-                  <DropdownItem
+            </Dropdown>
-                    onClick={() => setDeleteTopicConfirmationVisible(true)}
+          </div>
-                  >
-                    <span className="has-text-danger">Remove Topic</span>
-                  </DropdownItem>
-                )}
-              </Dropdown>
-            </div>
-          </>
         ) : null}
         <ConfirmationModal
           isOpen={isDeleteTopicConfirmationVisible}

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx

@@ -58,39 +58,36 @@ const CustomParamField: React.FC<Props> = ({
 
   return (
     <C.Column>
-      <>
+      <div>
-        <div>
+        <InputLabel>Custom Parameter</InputLabel>
-          <InputLabel>Custom Parameter</InputLabel>
+        <Controller
-          <Controller
+          control={control}
-            control={control}
+          rules={{ required: 'Custom Parameter is required.' }}
-            rules={{ required: 'Custom Parameter is required.' }}
+          name={`customParams.${index}.name`}
-            name={`customParams.${index}.name`}
+          render={({ field: { name, onChange } }) => (
-            render={({ field: { name, onChange } }) => (
+            <Select
-              <Select
+              name={name}
-                name={name}
+              placeholder="Select"
-                placeholder="Select"
+              disabled={isDisabled}
-                disabled={isDisabled}
+              minWidth="270px"
-                minWidth="270px"
+              onChange={onChange}
-                onChange={onChange}
+              options={Object.keys(TOPIC_CUSTOM_PARAMS)
-                options={Object.keys(TOPIC_CUSTOM_PARAMS)
+                .sort()
-                  .sort()
+                .map((opt) => ({
-                  .map((opt) => ({
+                  value: opt,
-                    value: opt,
+                  label: opt,
-                    label: opt,
+                  disabled: existingFields.includes(opt),
-                    disabled: existingFields.includes(opt),
+                }))}
-                  }))}
-              />
-            )}
-          />
-          <FormError>
-            <ErrorMessage
-              errors={errors}
-              name={`customParams.${index}.name` as const}
             />
-          </FormError>
+          )}
-        </div>
+        />
-      </>
+        <FormError>
-
+          <ErrorMessage
+            errors={errors}
+            name={`customParams.${index}.name` as const}
+          />
+        </FormError>
+      </div>
       <div>
         <InputLabel>Value</InputLabel>
         <Input

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

@@ -46,7 +46,7 @@ const Breadcrumb: React.FC<Props> = () => {
   );
 
   if (links.length < 2) {
-    return <></>;
+    return null;
   }
   return (
     <BreadcrumbWrapper role="list">

kafka-ui-react-app/src/lib/constants.ts

@@ -14,8 +14,8 @@ export const BASE_PARAMS: ConfigurationParameters = {
   },
 };
 
-export const TOPIC_NAME_VALIDATION_PATTERN = RegExp(/^[.,A-Za-z0-9_-]+$/);
+export const TOPIC_NAME_VALIDATION_PATTERN = /^[.,A-Za-z0-9_-]+$/;
-export const SCHEMA_NAME_VALIDATION_PATTERN = RegExp(/^[.,A-Za-z0-9_-]+$/);
+export const SCHEMA_NAME_VALIDATION_PATTERN = /^[.,A-Za-z0-9_-]+$/;
 
 export const TOPIC_CUSTOM_PARAMS: Record<string, string> = {
   'compression.type': 'producer',

kafka-ui-react-app/src/redux/reducers/alerts/reducer.ts

@@ -6,6 +6,7 @@ import { addError, removeAlert } from './utils';
 
 export const initialState: AlertsState = {};
 
+// eslint-disable-next-line @typescript-eslint/default-param-last
 const reducer = (state = initialState, action: Action): AlertsState => {
   const { type } = action;
 

kafka-ui-react-app/src/redux/reducers/connect/reducer.ts

@@ -15,6 +15,7 @@ export const initialState: ConnectState = {
   search: '',
 };
 
+// eslint-disable-next-line @typescript-eslint/default-param-last
 const reducer = (state = initialState, action: Action): ConnectState => {
   switch (action.type) {
     case getType(actions.fetchConnectsAction.success):

kafka-ui-react-app/src/redux/reducers/ksqlDb/reducer.ts

@@ -9,6 +9,7 @@ export const initialState: KsqlState = {
   executionResult: null,
 };
 
+// eslint-disable-next-line @typescript-eslint/default-param-last
 const reducer = (state = initialState, action: Action): KsqlState => {
   switch (action.type) {
     case getType(actions.fetchKsqlDbTablesAction.success):

kafka-ui-react-app/src/redux/reducers/loader/reducer.ts

@@ -2,6 +2,7 @@ import { Action, LoaderState } from 'redux/interfaces';
 
 export const initialState: LoaderState = {};
 
+// eslint-disable-next-line @typescript-eslint/default-param-last
 const reducer = (state = initialState, action: Action): LoaderState => {
   const { type } = action;
   const splitType = type.split('__');

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

@@ -13,6 +13,7 @@ export const initialState: TopicMessagesState = {
   isFetching: false,
 };
 
+// eslint-disable-next-line @typescript-eslint/default-param-last
 const reducer = (state = initialState, action: Action): TopicMessagesState => {
   switch (action.type) {
     case getType(actions.addTopicMessage): {

kafka-ui-react-app/src/redux/reducers/topics/reducer.ts

@@ -13,6 +13,7 @@ export const initialState: TopicsState = {
   consumerGroups: [],
 };
 
+// eslint-disable-next-line @typescript-eslint/default-param-last
 const reducer = (state = initialState, action: Action): TopicsState => {
   switch (action.type) {
     case getType(actions.fetchTopicsListAction.success):