From ae2d5e69f3450e7e18f7307648618663528b92a2 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Wed, 16 Nov 2022 15:32:48 -0800
Subject: [PATCH] CEC-3119 Fix tabs (#238)

---
 package-lock.json                             | 109 +++++++----------
 .../App/__snapshots__/App.test.js.snap        |   8 +-
 .../Status/__snapshots__/index.test.jsx.snap  |   8 +-
 src/components/Cars/Status/index.jsx          | 111 +++++++++---------
 src/components/Controls/RoleWrap/index.js     |   2 +-
 5 files changed, 112 insertions(+), 126 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f858b27..f763e27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6106,9 +6106,9 @@
       }
     },
     "node_modules/babel-loader/node_modules/loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -7317,14 +7317,6 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
-    "node_modules/css-select/node_modules/nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dependencies": {
-        "boolbase": "~1.0.0"
-      }
-    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -11844,9 +11836,9 @@
       }
     },
     "node_modules/loader-utils": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -12321,6 +12313,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dependencies": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -14434,9 +14434,9 @@
       }
     },
     "node_modules/react-dev-utils/node_modules/loader-utils": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
-      "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
       "engines": {
         "node": ">= 12.13.0"
       }
@@ -14733,25 +14733,14 @@
       }
     },
     "node_modules/recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "dependencies": {
-        "minimatch": "3.0.4"
+        "minimatch": "^3.0.5"
       },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/recursive-readdir/node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
+        "node": ">=6.0.0"
       }
     },
     "node_modules/redent": {
@@ -21863,9 +21852,9 @@
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -22741,16 +22730,6 @@
         "css-what": "^3.2.1",
         "domutils": "^1.7.0",
         "nth-check": "^1.0.2"
-      },
-      "dependencies": {
-        "nth-check": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-          "requires": {
-            "boolbase": "~1.0.0"
-          }
-        }
       }
     },
     "css-select-base-adapter": {
@@ -26086,9 +26065,9 @@
       "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw=="
     },
     "loader-utils": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -26433,6 +26412,14 @@
         "path-key": "^3.0.0"
       }
     },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "nwsapi": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -27842,9 +27829,9 @@
           "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
         },
         "loader-utils": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
-          "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ=="
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+          "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw=="
         },
         "supports-color": {
           "version": "5.5.0",
@@ -28072,21 +28059,11 @@
       }
     },
     "recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "requires": {
-        "minimatch": "3.0.4"
-      },
-      "dependencies": {
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        }
+        "minimatch": "^3.0.5"
       }
     },
     "redent": {
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 91462b2..af9ea5e 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -7536,6 +7536,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                     <button
                       aria-controls="tabpanel-2"
+                      aria-selected="false"
                       class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                       id="tab-2"
                       role="tab"
@@ -7553,6 +7554,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                     <button
                       aria-controls="tabpanel-3"
+                      aria-selected="false"
                       class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                       id="tab-3"
                       role="tab"
@@ -7570,6 +7572,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                     <button
                       aria-controls="tabpanel-4"
+                      aria-selected="false"
                       class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                       id="tab-4"
                       role="tab"
@@ -7587,6 +7590,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                     <button
                       aria-controls="tabpanel-5"
+                      aria-selected="false"
                       class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                       id="tab-5"
                       role="tab"
@@ -7604,6 +7608,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                     <button
                       aria-controls="tabpanel-6"
+                      aria-selected="false"
                       class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                       id="tab-6"
                       role="tab"
@@ -7761,21 +7766,18 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             />
             <div
               aria-labelledby="tab-4"
-              class="makeStyles-fullWidth-0"
               hidden=""
               id="tabpanel-4"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-5"
-              class="makeStyles-fullWidth-0"
               hidden=""
               id="tabpanel-5"
               role="tabpanel"
             />
             <div
               aria-labelledby="tab-6"
-              class="makeStyles-fullWidth-0"
               hidden=""
               id="tabpanel-6"
               role="tabpanel"
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 1954a3f..192d0e9 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -67,6 +67,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                   <button
                     aria-controls="tabpanel-2"
+                    aria-selected="false"
                     class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                     id="tab-2"
                     role="tab"
@@ -84,6 +85,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                   <button
                     aria-controls="tabpanel-3"
+                    aria-selected="false"
                     class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                     id="tab-3"
                     role="tab"
@@ -101,6 +103,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                   <button
                     aria-controls="tabpanel-4"
+                    aria-selected="false"
                     class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                     id="tab-4"
                     role="tab"
@@ -118,6 +121,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                   <button
                     aria-controls="tabpanel-5"
+                    aria-selected="false"
                     class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                     id="tab-5"
                     role="tab"
@@ -135,6 +139,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                   <button
                     aria-controls="tabpanel-6"
+                    aria-selected="false"
                     class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                     id="tab-6"
                     role="tab"
@@ -239,21 +244,18 @@ exports[`CarStatus Render 1`] = `
           />
           <div
             aria-labelledby="tab-4"
-            class="makeStyles-fullWidth-0"
             hidden=""
             id="tabpanel-4"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-5"
-            class="makeStyles-fullWidth-0"
             hidden=""
             id="tabpanel-5"
             role="tabpanel"
           />
           <div
             aria-labelledby="tab-6"
-            class="makeStyles-fullWidth-0"
             hidden=""
             id="tabpanel-6"
             role="tabpanel"
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index 48c37b9..b6c29ca 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -1,13 +1,12 @@
 import { Box, Tab, Tabs } from "@material-ui/core";
 import clsx from "clsx";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { useLocation } from "react-router-dom";
 
-import { Permissions } from "../../../utils/roles";
+import { hasRole, Permissions } from "../../../utils/roles";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { RoleWrap } from "../../Controls/RoleWrap";
 import TabPanel from "../../Controls/TabPanel";
 import useStyles from "../../useStyles";
 import CANFiltersTab from "./CANFiltersTab";
@@ -20,15 +19,63 @@ import RemoteCommandsTab from "./RemoteCommandsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
+const TabViews = [
+  {
+    label: "Details",
+    component: CarDetailsTab,
+  },
+  {
+    label: "Car Updates",
+    component: CarUpdatesTab,
+  },
+  {
+    label: "CAN Filters",
+    component: CANFiltersTab,
+    rolesPerProvider: Permissions.FiskerRead,
+  },
+  {
+    label: "Digital Twin",
+    component: DigitalTwinTab,
+  },
+  {
+    label: "CAN Signals",
+    component: CANSignalsTab,
+  },
+  {
+    label: "Remote Commands",
+    component: RemoteCommandsTab,
+    rolesPerProvider: Permissions.FiskerRead,
+  },
+  {
+    label: "Fleets",
+    component: FleetsTab,
+    rolesPerProvider: Permissions.FiskerRead,
+  },
+];
+
+const filterTabs = (data, groups, providers) => {
+  return data.reduce((result, item) => {
+    if (hasRole(groups, item.rolesPerProvider, providers)) {
+      result.push(item);
+    }
+    return result;
+  }, []);
+};
+
 const CarStatus = () => {
   const { vin } = useParams();
   const classes = useStyles();
   const { setTitle, setSitePath } = useStatusContext();
   const { hash } = useLocation();
-  const [tabIndex, setTabIndex] = React.useState(0);
-
+  const [tabIndex, setTabIndex] = useState(0);
+  const [tabs, setTabs] = useState([]);
   const { groups, providers } = useUserContext();
 
+  useEffect(() => {
+    const data = filterTabs(TabViews, groups, providers);
+    setTabs(data);
+  }, [groups, providers]);
+
   useEffect(() => {
     const key = hash.replace("#", "");
     const index = tabHashes.findIndex((element) => element === key);
@@ -64,57 +111,15 @@ const CarStatus = () => {
           value={tabIndex}
           onChange={handleTabChange}
           aria-label="car tabs"
-          indicatorColor="secondary"
-        >
-          <Tab label="Details" {...tabProps(0)} />
-          <Tab label="Car Updates" {...tabProps(1)} />
-          <RoleWrap
-            groups={groups}
-            providers={providers}
-            rolesPerProvider={Permissions.FiskerRead}
-          >
-            <Tab label="CAN Filters" {...tabProps(2)} />
-            <Tab label="Digital Twin" {...tabProps(3)} />
-
-            <Tab label="CAN Signals" {...tabProps(4)} />
-            <Tab label="Remote Commands" {...tabProps(5)} />
-            <Tab label="Fleets" {...tabProps(6)} />
-          </RoleWrap>
+          indicatorColor="secondary">
+          {tabs.map((item, index) => <Tab key={index} label={item.label} {...tabProps(index)} />)}
         </Tabs>
       </Box>
-
-      <TabPanel value={tabIndex} index={0}>
-        <CarDetailsTab />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={1}>
-        <CarUpdatesTab />
-      </TabPanel>
-
-      <RoleWrap
-        groups={groups}
-        providers={providers}
-        rolesPerProvider={Permissions.FiskerRead}
-      >
-        <TabPanel value={tabIndex} index={2}>
-          <CANFiltersTab />
+      {tabs.map((item, index) => (
+        <TabPanel key={index} value={tabIndex} index={index}>
+          <item.component vin={vin}/>
         </TabPanel>
-        <TabPanel value={tabIndex} index={3}>
-          <DigitalTwinTab vin={vin} />
-        </TabPanel>
-
-        <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
-          <CANSignalsTab vin={vin} />
-        </TabPanel>
-
-        <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
-          <RemoteCommandsTab vin={vin} />
-        </TabPanel>
-
-        <TabPanel value={tabIndex} index={6} className={classes.fullWidth}>
-          <FleetsTab vin={vin} />
-        </TabPanel>
-      </RoleWrap>
+      ))}
     </div>
   );
 };
diff --git a/src/components/Controls/RoleWrap/index.js b/src/components/Controls/RoleWrap/index.js
index b91b408..024875c 100644
--- a/src/components/Controls/RoleWrap/index.js
+++ b/src/components/Controls/RoleWrap/index.js
@@ -1,5 +1,5 @@
-import {hasRole} from "../../../utils/roles";
 import React from "react";
+import { hasRole } from "../../../utils/roles";
 
 export const RoleWrap = (props) => {
   const {groups, rolesPerProvider, providers} = props;