Fix the issues in the Tabs React component (#335)

* Fix the issues in the `Tabs` React component

* Update the boolean expression as well

ui/src/components/EntryDetailed/EntryViewer.tsx

@@ -36,14 +36,8 @@ const SectionsRepresentation: React.FC<any> = ({data, color}) => {
 const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rulesMatched, elapsedTime, color}) => {
     var TABS = [
         {
-            tab: 'request'
-        },
-        {
-            tab: 'response',
-        },
-        {
-            tab: 'Rules',
-        },
+            tab: 'Request'
+        }
     ];
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
 
@@ -54,12 +48,25 @@ const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rule
 
     const {request, response} = JSON.parse(representation);
 
-    if (!response) {
-        TABS[1]['hidden'] = true;
+    var responseTabIndex = 0;
+    var rulesTabIndex = 0;
+
+    if (response) {
+        TABS.push(
+            {
+                tab: 'Response',
+            }
+        );
+        responseTabIndex = TABS.length - 1;
     }
 
-    if (!isRulesEnabled) {
-        TABS.pop()
+    if (isRulesEnabled) {
+        TABS.push(
+            {
+                tab: 'Rules',
+            }
+        );
+        rulesTabIndex = TABS.length - 1;
     }
 
     return <div className={styles.Entry}>
@@ -71,10 +78,10 @@ const AutoRepresentation: React.FC<any> = ({representation, isRulesEnabled, rule
             {currentTab === TABS[0].tab && <React.Fragment>
                 <SectionsRepresentation data={request} color={color}/>
             </React.Fragment>}
-            {response && currentTab === TABS[1].tab && <React.Fragment>
+            {response && currentTab === TABS[responseTabIndex].tab && <React.Fragment>
                 <SectionsRepresentation data={response} color={color}/>
             </React.Fragment>}
-            {TABS.length > 2 && currentTab === TABS[2].tab && <React.Fragment>
+            {isRulesEnabled && currentTab === TABS[rulesTabIndex].tab && <React.Fragment>
                 <EntryTablePolicySection title={'Rule'} color={color} latency={elapsedTime} arrayToIterate={rulesMatched ? rulesMatched : []}/>
             </React.Fragment>}
         </div>}

ui/src/components/UI/Tabs.tsx

@@ -5,7 +5,6 @@ import variables from '../../variables.module.scss';
 
 interface Tab {
     tab: string,
-    hidden?: boolean,
     disabled?: boolean,
     disabledMessage?: string,
     highlight?: boolean,
@@ -66,7 +65,8 @@ const useTabsStyles = makeStyles((theme) => ({
         borderRight: "1px solid " + theme.palette.primary.dark,
         height: 20,
         verticalAlign: 'middle',
-        margin: '0 20px'
+        margin: '0 20px',
+        cursor: 'unset',
     }
 
 }));
@@ -75,7 +75,7 @@ const useTabsStyles = makeStyles((theme) => ({
 const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, color, onChange, leftAligned, dark}) => {
     const _classes = {...useTabsStyles(), ...classes};
     return <div className={`${_classes.root} ${leftAligned ? _classes.tabsAlignLeft : ''}`}>
-        {tabs.filter((tab) => !tab.hidden).map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
+        {tabs.map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
             const active = currentTab === tab;
             const tabLink = <span
                 key={tab}