admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CEC-3119 Fix tabs (#238)

Browse Source
This commit is contained in:
John Wu
2022-11-16 15:32:48 -08:00
committed by GitHub
parent d048b0b18b
commit ae2d5e69f3
5 changed files with 112 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
package-lock.json generated
View File

@@ -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": {

8
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -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"

8
src/components/Cars/Status/__snapshots__/index.test.jsx.snap
View File

@@ -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"

111
src/components/Cars/Status/index.jsx
View File

@@ -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 />
{tabs.map((item, index) => (
<TabPanel key={index} value={tabIndex} index={index}>
<item.component vin={vin}/>
</TabPanel>
<TabPanel value={tabIndex} index={1}>
<CarUpdatesTab />
</TabPanel>
<RoleWrap
groups={groups}
providers={providers}
rolesPerProvider={Permissions.FiskerRead}
>
<TabPanel value={tabIndex} index={2}>
<CANFiltersTab />
</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>
);
};

2
src/components/Controls/RoleWrap/index.js
View File

@@ -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;