Repository: provectus/kafka-ui
Issue: Improve SonarCloud metrics
Labels: good first issue
scope/frontend
status/accepted
type/chore

**Describe the bug**
Sonar shows 14 code smells. Try to improve this metric
[Sonar](https://sonarcloud.io/project/issues?resolved=false&types=CODE_SMELL&id=com.provectus%3Akafka-ui_frontend)


**Expected behavior**
Some smells are fixed



Issue comments:

Pull request review comments:
I'm not sure we should touch this file. Pls skip it
sonar suggested to change it ilke this,
ok will bring this changes back

we can mark/skip some sonar suggestions btw
one Question why did we put the undefined in the older version
@Mgrdich I'm not sure why but that caused problem for sonar and there was suggestion from sonar to remove that part as it's not changing the type
<img width="676" alt="Screen Shot 2022-04-14 at 13 57 44" src="https://user-images.githubusercontent.com/103438454/163361965-6faf9756-8eb7-4fae-adee-c7b91389c8f8.png">

I think it would be better to store `Array.from(tableState.selectedIds)`  in a variable above the conditions and use it inside the condition blocks. That way we'll prevent code duplication.

```
const selectedIds = Array.from(tableState.selectedIds);

if (confirmationModal === 'deleteTopics') {
  deleteTopics(clusterName, selectedIds);
} else {
  clearTopicsMessages(clusterName, selectedIds);
}
```

Looks cleaner to me.
I've added it to the excluded files list

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
index 6d20911714f..bb8f40f290f 100644
--- a/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/Brokers.tsx
@@ -32,7 +32,7 @@ const Brokers: React.FC = () => {
 
   const replicas = inSyncReplicasCount ?? 0 + (outOfSyncReplicasCount ?? 0);
   const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
-
+  const partitionIsOffline = offlinePartitionCount && offlinePartitionCount > 0;
   React.useEffect(() => {
     dispatch(fetchClusterStats(clusterName));
     dispatch(fetchBrokers(clusterName));
@@ -60,13 +60,9 @@ const Brokers: React.FC = () => {
           <Metrics.Indicator
             label="Online"
             isAlert
-            alertType={
-              offlinePartitionCount && offlinePartitionCount > 0
-                ? 'error'
-                : 'success'
-            }
+            alertType={partitionIsOffline ? 'error' : 'success'}
           >
-            {offlinePartitionCount && offlinePartitionCount > 0 ? (
+            {partitionIsOffline ? (
               <Metrics.RedText>{onlinePartitionCount}</Metrics.RedText>
             ) : (
               onlinePartitionCount
@@ -80,11 +76,9 @@ const Brokers: React.FC = () => {
             label="URP"
             title="Under replicated partitions"
             isAlert
-            alertType={
-              underReplicatedPartitionCount === 0 ? 'success' : 'error'
-            }
+            alertType={!underReplicatedPartitionCount ? 'success' : 'error'}
           >
-            {underReplicatedPartitionCount === 0 ? (
+            {!underReplicatedPartitionCount ? (
               <Metrics.LightText>
                 {underReplicatedPartitionCount}
               </Metrics.LightText>
diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItemContainer.ts b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItemContainer.ts
index c09054e63d0..b7107500b72 100644
--- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItemContainer.ts
+++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItemContainer.ts
@@ -10,7 +10,7 @@ interface OwnProps extends RouteComponentProps {
   task: Task;
 }
 
-const mapStateToProps = (state: RootState, { task }: OwnProps) => ({
+const mapStateToProps = (_state: RootState, { task }: OwnProps) => ({
   task,
 });
 
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx
index 362010d1fc7..7431dabf633 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -149,6 +149,8 @@ const List: React.FC<TopicsListProps> = ({
     '' | 'deleteTopics' | 'purgeMessages'
   >('');
 
+  const [confirmationModalText, setConfirmationModalText] =
+    React.useState<string>('');
   const closeConfirmationModal = () => {
     setConfirmationModal('');
   };
@@ -157,22 +159,6 @@ const List: React.FC<TopicsListProps> = ({
     tableState.toggleSelection(false);
   }, [tableState]);
 
-  const deleteTopicsHandler = React.useCallback(() => {
-    deleteTopics(clusterName, Array.from(tableState.selectedIds));
-    closeConfirmationModal();
-    clearSelectedTopics();
-  }, [clearSelectedTopics, clusterName, deleteTopics, tableState.selectedIds]);
-  const purgeMessagesHandler = React.useCallback(() => {
-    clearTopicsMessages(clusterName, Array.from(tableState.selectedIds));
-    closeConfirmationModal();
-    clearSelectedTopics();
-  }, [
-    clearSelectedTopics,
-    clearTopicsMessages,
-    clusterName,
-    tableState.selectedIds,
-  ]);
-
   const searchHandler = React.useCallback(
     (searchString: string) => {
       setTopicsSearch(searchString);
@@ -187,6 +173,23 @@ const List: React.FC<TopicsListProps> = ({
     },
     [setTopicsSearch, history, pathname, perPage, page]
   );
+  const deleteOrPurgeConfirmationHandler = React.useCallback(() => {
+    const selectedIds = Array.from(tableState.selectedIds);
+    if (confirmationModal === 'deleteTopics') {
+      deleteTopics(clusterName, selectedIds);
+    } else {
+      clearTopicsMessages(clusterName, selectedIds);
+    }
+    closeConfirmationModal();
+    clearSelectedTopics();
+  }, [
+    confirmationModal,
+    clearSelectedTopics,
+    clusterName,
+    deleteTopics,
+    clearTopicsMessages,
+    tableState.selectedIds,
+  ]);
 
   const ActionsCell = React.memo<TableCellProps<TopicWithDetailedInfo, string>>(
     ({ hovered, dataItem: { internal, cleanUpPolicy, name } }) => {
@@ -306,6 +309,9 @@ const List: React.FC<TopicsListProps> = ({
                   buttonType="secondary"
                   onClick={() => {
                     setConfirmationModal('deleteTopics');
+                    setConfirmationModalText(
+                      'Are you sure you want to remove selected topics?'
+                    );
                   }}
                 >
                   Delete selected topics
@@ -329,6 +335,9 @@ const List: React.FC<TopicsListProps> = ({
                   buttonType="secondary"
                   onClick={() => {
                     setConfirmationModal('purgeMessages');
+                    setConfirmationModalText(
+                      'Are you sure you want to purge messages of selected topics?'
+                    );
                   }}
                 >
                   Purge messages of selected topics
@@ -337,15 +346,9 @@ const List: React.FC<TopicsListProps> = ({
               <ConfirmationModal
                 isOpen={confirmationModal !== ''}
                 onCancel={closeConfirmationModal}
-                onConfirm={
-                  confirmationModal === 'deleteTopics'
-                    ? deleteTopicsHandler
-                    : purgeMessagesHandler
-                }
+                onConfirm={deleteOrPurgeConfirmationHandler}
               >
-                {confirmationModal === 'deleteTopics'
-                  ? 'Are you sure you want to remove selected topics?'
-                  : 'Are you sure you want to purge messages of selected topics?'}
+                {confirmationModalText}
               </ConfirmationModal>
             </>
           )}
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx
index 4d5065e6731..5806d11e928 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx
@@ -10,7 +10,7 @@ interface OwnProps extends RouteComponentProps {
 }
 
 const mapStateToProps = (
-  state: RootState,
+  _state: RootState,
   { isSubmitting, config }: OwnProps
 ) => ({
   isSubmitting,
diff --git a/kafka-ui-react-app/src/components/common/SmartTable/SmartTable.tsx b/kafka-ui-react-app/src/components/common/SmartTable/SmartTable.tsx
index 0b04279dbf8..575db21b9cc 100644
--- a/kafka-ui-react-app/src/components/common/SmartTable/SmartTable.tsx
+++ b/kafka-ui-react-app/src/components/common/SmartTable/SmartTable.tsx
@@ -48,10 +48,9 @@ export const SmartTable = <T, TId extends IdType, OT = never>({
 
       const { headerCell, title, orderValue } = child.props;
 
-      const HeaderCell = headerCell as
-        | React.FC<TableHeaderCellProps<T, TId, OT>>
-        | undefined;
-
+      const HeaderCell = headerCell as React.FC<
+        TableHeaderCellProps<T, TId, OT>
+      >;
       return HeaderCell ? (
         <S.TableHeaderCell>
           <HeaderCell


Test patch: