CEC-3119 Fix tabs (#238)

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