Fix all of the minor issues in the React code

ui/src/components/EntryDetailed/EntrySections.tsx

@@ -201,7 +201,6 @@ export const EntryPolicySectionContainer: React.FC<EntryPolicySectionContainerPr
 }
 
 export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({service, title, color, response, latency, arrayToIterate}) => {
-    // const base64ToJson = response.content.mimeType === "application/json; charset=utf-8" ? JSON.parse(Buffer.from(response.content.text, "base64").toString()) : {};
     return <React.Fragment>
         {
             arrayToIterate && arrayToIterate.length > 0 ?
@@ -215,39 +214,32 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({serv
                                             {
                                                 <>
                                                     {
-                                                        rule.Key !== "" ?
+                                                        rule.Key &&
                                                         <tr className={styles.dataValue}><td><b>Key</b>:</td><td>{rule.Key}</td></tr>
-                                                        : null
                                                     }
                                                     {
-                                                        rule.Latency !== "" ?
+                                                        rule.Latency &&
                                                         <tr className={styles.dataValue}><td><b>Latency:</b></td> <td>{rule.Latency}</td></tr>
-                                                        : null
                                                     }
                                                     {
-                                                        rule.Method !== "" ?
+                                                        rule.Method &&
                                                         <tr className={styles.dataValue}><td><b>Method:</b></td> <td>{rule.Method}</td></tr>
-                                                        : null
                                                     }
                                                     {
-                                                        rule.Path !== "" ?
+                                                        rule.Path &&
                                                         <tr className={styles.dataValue}><td><b>Path:</b></td> <td>{rule.Path}</td></tr>
-                                                        : null
                                                     }
                                                     {
-                                                        rule.Service !== "" ?
+                                                        rule.Service &&
                                                         <tr className={styles.dataValue}><td><b>Service:</b></td> <td>{service}</td></tr>
-                                                        : null
                                                     }
                                                     {
-                                                        rule.Type !== "" ?
+                                                        rule.Type &&
                                                         <tr className={styles.dataValue}><td><b>Type:</b></td> <td>{rule.Type}</td></tr>
-                                                        : null
                                                     }
                                                     {
-                                                        rule.Value !== "" ?
+                                                        rule.Value &&
                                                         <tr className={styles.dataValue}><td><b>Value:</b></td> <td>{rule.Value}</td></tr>
-                                                        : null
                                                     }
                                                 </>
                                             }

ui/src/components/EntryDetailed/EntryViewer.tsx

@@ -3,18 +3,23 @@ import styles from './EntryViewer.module.sass';
 import Tabs from "../UI/Tabs";
 import {EntryTableSection, EntryBodySection, EntryTablePolicySection} from "./EntrySections";
 
+enum SectionTypes {
+    SectionTable = "table",
+    SectionBody = "body",
+}
+
 const SectionsRepresentation: React.FC<any> = ({data, color}) => {
     const sections = []
 
-    if (data !== undefined) {
+    if (data) {
         for (const [i, row] of data.entries()) {
             switch (row.type) {
-                case "table":
+                case SectionTypes.SectionTable:
                     sections.push(
                         <EntryTableSection key={i} title={row.title} color={color} arrayToIterate={JSON.parse(row.data)}/>
                     )
                     break;
-                case "body":
+                case SectionTypes.SectionBody:
                     sections.push(
                         <EntryBodySection key={i} color={color} content={row.data} encoding={row.encoding} contentType={row.mime_type}/>
                     )
@@ -28,13 +33,14 @@ const SectionsRepresentation: React.FC<any> = ({data, color}) => {
     return <>{sections}</>;
 }
 
-const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMocked}) => {
+const AutoRepresentation: React.FC<any> = ({representation, color}) => {
     const rulesMatched = []
     const TABS = [
-        {tab: 'request'},
+        {
+            tab: 'request'
+        },
         {
             tab: 'response',
-            badge: <>{isResponseMocked && <span className="smallBadge virtual mock">MOCK</span>}</>
         },
         {
             tab: 'Rules',
@@ -43,7 +49,7 @@ const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMoc
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
 
     // Don't fail even if `representation` is an empty string
-    if (representation.length === 0) {
+    if (!representation) {
         return <></>;
     }
 
@@ -72,12 +78,10 @@ const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMoc
 interface Props {
     representation: any;
     color: string,
-    isResponseMocked?: boolean;
-    showTitle?: boolean;
 }
 
-const EntryViewer: React.FC<Props> = ({representation, color, isResponseMocked, showTitle=true}) => {
+const EntryViewer: React.FC<Props> = ({representation, color}) => {
-    return <AutoRepresentation representation={representation} color={color} isResponseMocked={isResponseMocked} showTitle={showTitle}/>
+    return <AutoRepresentation representation={representation} color={color}/>
 };
 
 export default EntryViewer;

ui/src/components/UI/StatusCode.tsx

@@ -25,6 +25,8 @@ const StatusCode: React.FC<EntryProps> = ({statusCode}) => {
 export function getClassification(statusCode: number): string {
     let classification = StatusCodeClassification.NEUTRAL;
 
+    // 1 - 16 HTTP/2 (gRPC) status codes
+    // 2xx - 5xx HTTP/1.1 status codes
     if ((statusCode >= 200 && statusCode <= 399) || statusCode === 0) {
         classification = StatusCodeClassification.SUCCESS;
     } else if (statusCode >= 400 || (statusCode >= 1 && statusCode <= 16)) {

ui/src/components/UI/style/Protocol.module.sass

@@ -5,18 +5,18 @@
     font-weight: 600
     background-color: #000
     color: #fff
-    margin-left: -8px;
+    margin-left: -8px
-    margin-bottom: -4px;
+    margin-bottom: -4px
 
 .vertical
     line-height: 22px
-    letter-spacing: 0.5px;
+    letter-spacing: 0.5px
     width: 22px
     height: 48px
     border-radius: 0px 4px 4px 0
-    writing-mode: vertical-lr;
+    writing-mode: vertical-lr
-    transform: rotate(-180deg);
+    transform: rotate(-180deg)
-    text-orientation: mixed;
+    text-orientation: mixed
 
 .horizontal
     border-radius: 4px