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

CEC-4564: add visual nesting to CAN signal control (#406)

Browse Source 
* add TrieSelect

* setup menu button

* CEC-4564: add trie select component

* add visual nesting

* remove unused imports
This commit is contained in:
Tristan Timblin
2023-08-02 15:44:08 -04:00
committed by GitHub
parent c118f676ee
commit 27ffdf01b0
7 changed files with 852 additions and 936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap
View File

@@ -337,77 +337,10 @@ exports[`Render Render 1`] = `
</div> </div>
<div <div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12" class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
>
<div
class="MuiBox-root MuiBox-root-0"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled Mui-disabled"
disabled=""
tabindex="-1"
type="button"
>
<span
class="MuiButton-label"
>
Select CAN Signals
</span>
</button>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
checked=""
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</span>
<span
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
>
Select All 0
</span>
</label>
</div>
<div
class="MuiCollapse-root MuiCollapse-hidden"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner"
> >
<ul <ul
class="MuiList-root MuiList-padding" class="MuiList-root MuiList-padding"
/> />
</div>
</div>
</div>
<ul <ul
class="makeStyles-chipList-0" class="makeStyles-chipList-0"
/> />

2
src/components/CANSelfServe/SelfServe/index.jsx
View File

@@ -169,7 +169,7 @@ const MainForm = ({ id }) => {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TrieSelect <TrieSelect
label="Select CAN Signals" label="All CAN Signals"
classification="Signals" classification="Signals"
options={canSignals.map((signal => signal.signal_name))} options={canSignals.map((signal => signal.signal_name))}
onChange={setSelectedCanSignals} onChange={setSelectedCanSignals}

68
src/components/Controls/TrieSelect/TrieSelect.jsx
View File

@@ -1,10 +1,10 @@
import React, { useState } from "react"; import React from "react";
import { import {
Box, Box,
Button,
Checkbox, Checkbox,
Chip, Chip,
Collapse, Collapse,
Divider,
FormControlLabel, FormControlLabel,
List, List,
ListItem, ListItem,
@@ -41,50 +41,19 @@ const TrieSelectList = ({
classification, classification,
options, options,
}) => { }) => {
const { selected, setSelected, remove } = useTrieSelect(); const { selected, remove } = useTrieSelect();
const [open, setOpen] = useState(false);
const classes = useStyles(); const classes = useStyles();
const trie = new Trie(options); const trie = new Trie(options);
const handleExpand = () => {
setOpen(open => !open);
};
const handleSelectAll = () => {
setSelected((selected) => {
if (selected.length === 0) {
return options;
}
return [];
})
}
return ( return (
<> <>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Button onClick={handleExpand} variant="contained" color="primary" disabled={options.length === 0}>
{label}
</Button>
<FormControlLabel
label={`Select All ${options.length}`}
labelPlacement="start"
control={
<Checkbox
checked={selected.length === options.length}
onClick={handleSelectAll}
/>
}
/>
</Box>
<Collapse in={open}>
<List> <List>
<TrieSelectLevel <TrieSelectLevel
node={trie.getRoot()} node={trie.getRoot()}
classification={classification} classification={classification}
label={label}
/> />
</List> </List>
</Collapse>
<ul className={classes.chipList}> <ul className={classes.chipList}>
{selected.map((signal) => { {selected.map((signal) => {
return ( return (
@@ -102,13 +71,18 @@ const TrieSelectLevel = ({
prefix = "", prefix = "",
node, node,
children, children,
classification classification,
label,
level = -1,
}) => { }) => {
const classes = useStyles(); const classes = useStyles();
const { selected, add, remove } = useTrieSelect(); const { selected, add, remove } = useTrieSelect();
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const completeChildren = Object.values(node.children).filter(child => child.isComplete); const completeChildren = Object.values(node.children).filter(child => child.isComplete);
const hasCompleteChildren = completeChildren.length > 0;
const descendantCount = `${node.count} ${classification}`; const descendantCount = `${node.count} ${classification}`;
const isParentOfMultiple = completeChildren.length > 1;
const isAdoptiveParentOfMultiple = completeChildren.length <= 1 && node.count > 1;
const handleExpand = () => { const handleExpand = () => {
setOpen(open => !open); setOpen(open => !open);
@@ -140,7 +114,9 @@ const TrieSelectLevel = ({
return Array.from(result); return Array.from(result);
} }
const listItems = ( const indent = (level) => `${12 * level}px`;
const listItems = (level) => (
<> <>
{children} {children}
{Object.values(node.children).map((child) => { {Object.values(node.children).map((child) => {
@@ -152,13 +128,16 @@ const TrieSelectLevel = ({
node={child} node={child}
key={fullName} key={fullName}
classification={classification} classification={classification}
level={level}
> >
{child.isComplete && ( {child.isComplete && (
<ListItem className={classes.whiteBackground}> <ListItem className={classes.whiteBackground}>
<Box sx={{ paddingLeft: indent(level), display: "flex", alignItems: "center" }}>
<ListItemIcon> <ListItemIcon>
<Checkbox checked={isChecked} onClick={() => handleCheck([fullName], isChecked)} /> <Checkbox checked={isChecked} onClick={() => handleCheck([fullName], isChecked)} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={fullName} /> <ListItemText primary={fullName} />
</Box>
</ListItem> </ListItem>
)} )}
</TrieSelectLevel> </TrieSelectLevel>
@@ -167,15 +146,15 @@ const TrieSelectLevel = ({
</> </>
); );
const isParentOfMultiple = completeChildren.length > 1;
const isAdoptiveParentOfMultiple = completeChildren.length <= 1 && node.count > 1;
if (isParentOfMultiple || isAdoptiveParentOfMultiple) { if (isParentOfMultiple || isAdoptiveParentOfMultiple) {
const allDescendants = getWords(node, prefix); const allDescendants = getWords(node, prefix);
const isSelectAll = allDescendants.every(descendant => selected.includes(descendant)); const isSelectAll = allDescendants.every(descendant => selected.includes(descendant));
return ( return (
<> <>
<ListItem onClick={handleExpand} divider> <ListItem onClick={handleExpand} divider className={classes.defaultBackground}>
<ListItemText primary={prefix} secondary={descendantCount} /> <Box sx={{ paddingLeft: indent(level) }}>
<ListItemText primary={prefix === "" ? label : prefix} secondary={descendantCount} />
</Box>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Box sx={{ display: "flex", alignItems: "center", gap: "16px" }}> <Box sx={{ display: "flex", alignItems: "center", gap: "16px" }}>
<FormControlLabel <FormControlLabel
@@ -188,18 +167,19 @@ const TrieSelectLevel = ({
/> />
} }
/> />
{open ? <ExpandLess /> : <ExpandMore />} {open ? (<ExpandLess />) : (<ExpandMore />)}
</Box> </Box>
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<Collapse in={open}> <Collapse in={open}>
<List> <List>
{listItems} {listItems(level + 1)}
</List> </List>
{hasCompleteChildren && <Divider />}
</Collapse> </Collapse>
</> </>
) )
} }
return listItems; return listItems(level);
} }

4
src/components/Controls/TrieSelect/TrieSelect.test.tsx
View File

@@ -38,7 +38,7 @@ describe("TrieSelect", () => {
it("properly passes payload to callback", async () => { it("properly passes payload to callback", async () => {
const mockCallback = jest.fn(); const mockCallback = jest.fn();
const { getByText } = render( const { getAllByText } = render(
<TrieSelect <TrieSelect
label={"The input label"} label={"The input label"}
classification="Signal" classification="Signal"
@@ -47,7 +47,7 @@ describe("TrieSelect", () => {
/> />
); );
const selectAll = getByText("Select All 8"); const selectAll = getAllByText("Select All")[0];
userEvent.click(selectAll); userEvent.click(selectAll);
expect(mockCallback).toHaveBeenCalledWith(options); expect(mockCallback).toHaveBeenCalledWith(options);
}); });

160
src/components/Controls/TrieSelect/__snapshots__/TrieSelect.test.tsx.snap
View File

@@ -2,71 +2,6 @@
exports[`TrieSelect Render 1`] = ` exports[`TrieSelect Render 1`] = `
<div> <div>
<div
class="MuiBox-root MuiBox-root-0"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
The button label
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</span>
<span
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
>
Select All 8
</span>
</label>
</div>
<div
class="MuiCollapse-root MuiCollapse-hidden"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner"
>
<ul <ul
class="MuiList-root MuiList-padding" class="MuiList-root MuiList-padding"
> >
@@ -74,14 +9,19 @@ exports[`TrieSelect Render 1`] = `
class="MuiListItem-container" class="MuiListItem-container"
> >
<div <div
class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction" class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemText-root MuiListItemText-multiline" class="MuiListItemText-root MuiListItemText-multiline"
> >
<span <span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock" class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
/> >
The button label
</span>
<p <p
class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock" class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-displayBlock"
> >
@@ -89,6 +29,7 @@ exports[`TrieSelect Render 1`] = `
</p> </p>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiListItemSecondaryAction-root" class="MuiListItemSecondaryAction-root"
> >
@@ -162,7 +103,10 @@ exports[`TrieSelect Render 1`] = `
class="MuiListItem-container" class="MuiListItem-container"
> >
<div <div
class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction" class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemText-root MuiListItemText-multiline" class="MuiListItemText-root MuiListItemText-multiline"
@@ -179,6 +123,7 @@ exports[`TrieSelect Render 1`] = `
</p> </p>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiListItemSecondaryAction-root" class="MuiListItemSecondaryAction-root"
> >
@@ -250,6 +195,9 @@ exports[`TrieSelect Render 1`] = `
> >
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -292,12 +240,16 @@ exports[`TrieSelect Render 1`] = `
ace ace
</span> </span>
</div> </div>
</div>
</li> </li>
<li <li
class="MuiListItem-container" class="MuiListItem-container"
> >
<div <div
class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction" class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemText-root MuiListItemText-multiline" class="MuiListItemText-root MuiListItemText-multiline"
@@ -314,6 +266,7 @@ exports[`TrieSelect Render 1`] = `
</p> </p>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiListItemSecondaryAction-root" class="MuiListItemSecondaryAction-root"
> >
@@ -385,6 +338,9 @@ exports[`TrieSelect Render 1`] = `
> >
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -427,9 +383,13 @@ exports[`TrieSelect Render 1`] = `
ace_bev_one ace_bev_one
</span> </span>
</div> </div>
</div>
</li> </li>
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -472,9 +432,13 @@ exports[`TrieSelect Render 1`] = `
ace_bev_two ace_bev_two
</span> </span>
</div> </div>
</div>
</li> </li>
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -517,8 +481,12 @@ exports[`TrieSelect Render 1`] = `
ace_bev_three ace_bev_three
</span> </span>
</div> </div>
</div>
</li> </li>
</ul> </ul>
<hr
class="MuiDivider-root"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -530,7 +498,10 @@ exports[`TrieSelect Render 1`] = `
class="MuiListItem-container" class="MuiListItem-container"
> >
<div <div
class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction" class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemText-root MuiListItemText-multiline" class="MuiListItemText-root MuiListItemText-multiline"
@@ -547,6 +518,7 @@ exports[`TrieSelect Render 1`] = `
</p> </p>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiListItemSecondaryAction-root" class="MuiListItemSecondaryAction-root"
> >
@@ -618,6 +590,9 @@ exports[`TrieSelect Render 1`] = `
> >
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -660,12 +635,16 @@ exports[`TrieSelect Render 1`] = `
bev bev
</span> </span>
</div> </div>
</div>
</li> </li>
<li <li
class="MuiListItem-container" class="MuiListItem-container"
> >
<div <div
class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction" class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemText-root MuiListItemText-multiline" class="MuiListItemText-root MuiListItemText-multiline"
@@ -682,6 +661,7 @@ exports[`TrieSelect Render 1`] = `
</p> </p>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiListItemSecondaryAction-root" class="MuiListItemSecondaryAction-root"
> >
@@ -755,7 +735,10 @@ exports[`TrieSelect Render 1`] = `
class="MuiListItem-container" class="MuiListItem-container"
> >
<div <div
class="MuiListItem-root MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction" class="MuiListItem-root makeStyles-defaultBackground-0 MuiListItem-gutters MuiListItem-divider MuiListItem-secondaryAction"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemText-root MuiListItemText-multiline" class="MuiListItemText-root MuiListItemText-multiline"
@@ -772,6 +755,7 @@ exports[`TrieSelect Render 1`] = `
</p> </p>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiListItemSecondaryAction-root" class="MuiListItemSecondaryAction-root"
> >
@@ -843,6 +827,9 @@ exports[`TrieSelect Render 1`] = `
> >
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -885,9 +872,13 @@ exports[`TrieSelect Render 1`] = `
bev_chaz_deep bev_chaz_deep
</span> </span>
</div> </div>
</div>
</li> </li>
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -930,9 +921,13 @@ exports[`TrieSelect Render 1`] = `
bev_chaz_deep_one bev_chaz_deep_one
</span> </span>
</div> </div>
</div>
</li> </li>
<li <li
class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters" class="MuiListItem-root makeStyles-whiteBackground-0 MuiListItem-gutters"
>
<div
class="MuiBox-root MuiBox-root-0"
> >
<div <div
class="MuiListItemIcon-root" class="MuiListItemIcon-root"
@@ -975,8 +970,19 @@ exports[`TrieSelect Render 1`] = `
bev_chaz_deep_two bev_chaz_deep_two
</span> </span>
</div> </div>
</div>
</li> </li>
</ul> </ul>
<hr
class="MuiDivider-root"
/>
</div>
</div>
</div>
</ul>
<hr
class="MuiDivider-root"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -985,17 +991,13 @@ exports[`TrieSelect Render 1`] = `
</div> </div>
</div> </div>
</ul> </ul>
<hr
class="MuiDivider-root"
/>
</div> </div>
</div> </div>
</div> </div>
</ul> </ul>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<ul <ul
class="makeStyles-chipList-0" class="makeStyles-chipList-0"
/> />

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

@@ -1 +1 @@
export { TrieSelect } from "./TrieSelect"; export * from "./TrieSelect";

1
src/components/useStyles.jsx
View File

@@ -274,6 +274,7 @@ const useStyles = makeStyles((theme) => ({
maxWidth: "100%", maxWidth: "100%",
}, },
whiteBackground: { backgroundColor: "White" }, whiteBackground: { backgroundColor: "White" },
defaultBackground: { backgroundColor: "#fafafa" },
progressIcon: { width: 40, height: 40 }, progressIcon: { width: 40, height: 40 },
progressSuccess: { color: "green" }, progressSuccess: { color: "green" },
progressError: { color: "red" }, progressError: { color: "red" },