TRA_4437- disable line numbers checkbox when only one line in content (#1109)

* number of lines state added

* added useEffect to update to showLineNubers state dynamically

* small cr fixes

ui-common/src/components/TrafficViewer/EntryDetailed/EntrySections.tsx

@@ -1,5 +1,5 @@
 import styles from "./EntrySections.module.sass";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { SyntaxHighlighter } from "../../UI/SyntaxHighlighter/index";
 import CollapsibleContainer from "../../UI/CollapsibleContainer";
 import FancyTextDisplay from "../../UI/FancyTextDisplay";
@@ -125,12 +125,18 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
     const supportedFormats = jsonLikeFormats.concat(xmlLikeFormats, protobufFormats);
 
     const [isPretty, setIsPretty] = useState(true);
-    const [showLineNumbers, setShowLineNumbers] = useState(true);
+    const [showLineNumbers, setShowLineNumbers] = useState(false);
     const [decodeBase64, setDecodeBase64] = useState(true);
 
     const isBase64Encoding = encoding === 'base64';
     const supportsPrettying = supportedFormats.some(format => contentType?.indexOf(format) > -1);
     const [isDecodeGrpc, setIsDecodeGrpc] = useState(true);
+    const [isLineNumbersGreaterThenOne, setIsLineNumbersGreaterThenOne] = useState(true);
+
+    useEffect(() => {
+        (isLineNumbersGreaterThenOne && isPretty) && setShowLineNumbers(true);
+        !isLineNumbersGreaterThenOne && setShowLineNumbers(false);   
+    }, [isLineNumbersGreaterThenOne, isPretty])
 
     const formatTextBody = (body: any): string => {
         if (!decodeBase64) return body;
@@ -158,9 +164,11 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
                 return jsonBeautify(protobufDecoded, null, 2, 80);
             }
         } catch (error) {
-            if (String(error).includes("More than one message in")){
+            if (String(error).includes("More than one message in")) {
-                if(isDecodeGrpc)
+                if (isDecodeGrpc)
-                setIsDecodeGrpc(false);
+                    setIsDecodeGrpc(false);
+            } else if (String(error).includes("Failed to parse")) {
+                console.warn(error);
             } else {
                 console.error(error);
             }
@@ -181,19 +189,21 @@ export const EntryBodySection: React.FC<EntryBodySectionProps> = ({
                 {supportsPrettying && <span style={{ marginLeft: '.2rem' }}>Pretty</span>}
 
                 <div style={{ paddingTop: 3, paddingLeft: supportsPrettying ? 20 : 0 }}>
-                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} />
+                    <Checkbox checked={showLineNumbers} onToggle={() => { setShowLineNumbers(!showLineNumbers) }} disabled={!isLineNumbersGreaterThenOne || !decodeBase64} />
                 </div>
-                <span style={{ marginLeft: '.2rem' }}>Line numbers</span>      
+                <span style={{ marginLeft: '.2rem' }}>Line numbers</span>
-                {isBase64Encoding && <div style={{ paddingTop: 3, paddingLeft: 20 }}>
+
+                {isBase64Encoding && <div style={{ paddingTop: 3, paddingLeft: (isLineNumbersGreaterThenOne || supportsPrettying) ? 20 : 0 }}>
                     <Checkbox checked={decodeBase64} onToggle={() => { setDecodeBase64(!decodeBase64) }} />
                 </div>}
                 {isBase64Encoding && <span style={{ marginLeft: '.2rem' }}>Decode Base64</span>}
                 {!isDecodeGrpc && <span style={{ fontSize: '12px', color: '#DB2156', marginLeft: '.8rem' }}>More than one message in protobuf payload is not supported</span>}
-            </div>  
+            </div>
 
-            <SyntaxHighlighter  
+            <SyntaxHighlighter
                 code={formatTextBody(content)}
                 showLineNumbers={showLineNumbers}
+                setIsLineNumbersGreaterThenOne={setIsLineNumbersGreaterThenOne}
             />
 
         </EntrySectionContainer>}

ui-common/src/components/UI/SyntaxHighlighter/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Lowlight from 'react-lowlight'
 import 'highlight.js/styles/atom-one-light.css'
 import styles from './index.module.sass';
@@ -27,21 +27,29 @@ interface Props {
     code: string;
     showLineNumbers?: boolean;
     language?: string;
+    setIsLineNumbersGreaterThenOne?: (flag: boolean) => void;
 }
 
 export const SyntaxHighlighter: React.FC<Props> = ({
-        code,
+    code,
-        showLineNumbers = false,
+    showLineNumbers = false,
-        language = null
+    language = null,
-    }) => {
+    setIsLineNumbersGreaterThenOne
-    const markers = showLineNumbers ? code.split("\n").map((item, i) => {
+}) => {
-        return {
+    const [markers, setMarkers] = useState([])
-            line: i + 1,
-            className: styles.hljsMarkerLine
-        }
-    }) : [];
 
-    return <div style={{fontSize: ".75rem"}} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
+    useEffect(() => {
+        const newMarkers = code.split("\n").map((item, i) => {
+            setIsLineNumbersGreaterThenOne(i > 1 ? true : false);
+            return {
+                line: i + 1,
+                className: styles.hljsMarkerLine
+            }
+        });
+        setMarkers(showLineNumbers ? newMarkers : []);
+    }, [showLineNumbers, code])
+
+    return <div style={{ fontSize: ".75rem" }} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers} /></div>;
 };
 
 export default SyntaxHighlighter;