CEC-3119 Fix tabs (#238)

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"

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"

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

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;