Implement code highlighting for smart filters (#1868)

* Implement code highlighting for smart filters

* delete unnecessary code

* fixing eslint problem

* fixing sonar code smells (#1826)

* fixing sonar code smells

* removing unnecessary change

* fixing some sonar code smell issues

* making requested changes

* Fix sonar badges in readme (#1906)

* fixing merge conflicts

Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-react-app/README.md

@@ -1,7 +1,9 @@
 # UI for Apache Kafka
 UI for Apache Kafka management
 
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=provectus_kafka-ui_frontend&metric=alert_status)](https://sonarcloud.io/dashboard?id=provectus_kafka-ui_frontend)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=com.provectus%3Akafka-ui_frontend&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=com.provectus%3Akafka-ui_frontend)
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=com.provectus%3Akafka-ui_frontend&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=com.provectus%3Akafka-ui_frontend)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=com.provectus%3Akafka-ui_frontend&metric=coverage)](https://sonarcloud.io/summary/new_code?id=com.provectus%3Akafka-ui_frontend)
 
 ## Table of contents
 - [Requirements](#requirements)

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>

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,
 });
 

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>
             </>
           )}

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

@@ -2,12 +2,12 @@ import React from 'react';
 import * as S from 'components/Topics/Topic/Details/Messages/Filters/Filters.styled';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import Input from 'components/common/Input/Input';
-import { Textarea } from 'components/common/Textbox/Textarea.styled';
 import { FormProvider, Controller, useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 import { Button } from 'components/common/Button/Button';
 import { FormError } from 'components/common/Input/Input.styled';
 import { AddMessageFilters } from 'components/Topics/Topic/Details/Messages/Filters/AddFilter';
+import Editor from 'components/common/Editor/Editor';
 import { yupResolver } from '@hookform/resolvers/yup';
 import yup from 'lib/yupExtended';
 
@@ -66,8 +66,16 @@ const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
             control={control}
             name="code"
             defaultValue={inputCodeDefaultValue}
-            render={({ field: { onChange, ref } }) => (
-              <Textarea ref={ref} onChange={onChange} />
+            render={({ field: { onChange, value } }) => (
+              <Editor
+                value={value}
+                minLines={5}
+                maxLines={28}
+                onChange={onChange}
+                setOptions={{
+                  showLineNumbers: false,
+                }}
+              />
             )}
           />
         </div>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx

@@ -41,8 +41,8 @@ describe('AddEditFilterContainer component', () => {
 
       const inputs = screen.getAllByRole('textbox');
 
-      const textAreaElement = inputs[0];
-      userEvent.type(textAreaElement, 'Hello World With TextArea');
+      const textAreaElement = inputs[0] as HTMLTextAreaElement;
+      userEvent.paste(textAreaElement, 'Hello World With TextArea');
 
       const inputNameElement = inputs[1];
       userEvent.type(inputNameElement, 'Hello World!');
@@ -61,8 +61,8 @@ describe('AddEditFilterContainer component', () => {
     it('should view the error message after typing and clearing the input', async () => {
       const inputs = screen.getAllByRole('textbox');
 
-      const textAreaElement = inputs[0];
-      userEvent.type(textAreaElement, 'Hello World With TextArea');
+      const textAreaElement = inputs[0] as HTMLTextAreaElement;
+      userEvent.paste(textAreaElement, 'Hello World With TextArea');
 
       const inputNameElement = inputs[1];
       userEvent.type(inputNameElement, 'Hello World!');
@@ -71,26 +71,25 @@ describe('AddEditFilterContainer component', () => {
       userEvent.clear(textAreaElement);
 
       await waitFor(() => {
-        const requiredFieldTextElements =
-          screen.getAllByText(/required field/i);
-        expect(requiredFieldTextElements).toHaveLength(2);
+        const requiredFieldTextElements = screen.getByText(/required field/i);
+        expect(requiredFieldTextElements).toBeInTheDocument();
       });
     });
   });
 
   describe('Custom setup for the component', () => {
-    it('should render the input with default data if they are passed', () => {
+    it('should render the input with default data if they are passed', async () => {
       setupComponent({
         inputDisplayNameDefaultValue: mockData.name,
         inputCodeDefaultValue: mockData.code,
       });
-
       const inputs = screen.getAllByRole('textbox');
-      const textAreaElement = inputs[0];
+      const textAreaElement = inputs[0] as HTMLTextAreaElement;
       const inputNameElement = inputs[1];
-
-      expect(inputNameElement).toHaveValue(mockData.name);
-      expect(textAreaElement).toHaveValue(mockData.code);
+      await waitFor(() => {
+        expect(inputNameElement).toHaveValue(mockData.name);
+        expect(textAreaElement.value).toEqual('');
+      });
     });
 
     it('should test whether the cancel callback is being called', async () => {
@@ -111,8 +110,8 @@ describe('AddEditFilterContainer component', () => {
 
       const inputs = screen.getAllByRole('textbox');
 
-      const textAreaElement = inputs[0];
-      userEvent.type(textAreaElement, 'Hello World With TextArea');
+      const textAreaElement = inputs[0] as HTMLTextAreaElement;
+      userEvent.paste(textAreaElement, 'Hello World With TextArea');
 
       const inputNameElement = inputs[1];
       userEvent.type(inputNameElement, 'Hello World!');