CEC-4206-ecu-page-cut-off (#321)
* CEC-4206-ecu-page-cut-off * fix test * Update snapshots * Fix tooltip title warning --------- Co-authored-by: jwu-fisker <jwu@fiskerinc.com> Co-authored-by: John Wu <76966357+jwu-fisker@users.noreply.github.com>
This commit is contained in:
das31
@@ -273,49 +273,94 @@ exports[`ECUsTab Render 1`] = `
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="ECUA"
|
||||
>
|
||||
ECUA
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="SWVERSION"
|
||||
>
|
||||
SWVERSION
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="HWVERSION"
|
||||
>
|
||||
HWVERSION
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="VENDOR"
|
||||
>
|
||||
VENDOR
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="SUPPLIER_SW_VERSION"
|
||||
>
|
||||
SUPPLIER_SW_VERSION
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="SERIAL_NUMBER"
|
||||
>
|
||||
SERIAL_NUMBER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="BOOT_LOADER"
|
||||
>
|
||||
BOOT_LOADER
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="CONFIG"
|
||||
>
|
||||
CONFIG
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="FINGERPRINT"
|
||||
>
|
||||
FINGERPRINT
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
@@ -327,40 +372,85 @@ exports[`ECUsTab Render 1`] = `
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="ECUB"
|
||||
>
|
||||
ECUB
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="SWVERSION"
|
||||
>
|
||||
SWVERSION
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="HWVERSION"
|
||||
>
|
||||
HWVERSION
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="none"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="none"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="none"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="none"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="CONFIG"
|
||||
>
|
||||
CONFIG
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
|
||||
>
|
||||
<span
|
||||
class=""
|
||||
title="none"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
|
||||
@@ -4,7 +4,8 @@ import {
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow
|
||||
TableRow,
|
||||
Tooltip
|
||||
} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
import React, { useEffect, useState } from "react";
|
||||
@@ -136,7 +137,13 @@ const CarECUsTable = ({ vin, token, classes }) => {
|
||||
{tableColumns.map((column, j) => {
|
||||
const key = `${row.ecu + i}${column.id}`
|
||||
if (column.id === "updated_at") return (<TableCell key={key} align="center">{LocalDateTimeString(row.updated)}</TableCell>);
|
||||
return (<TableCell key={key} align="center">{row[column.id]}</TableCell>);
|
||||
return (
|
||||
<TableCell key={key} align="center" className={classes.limitWidthTableCell}>
|
||||
<Tooltip title={`${row[column.id] || 'none'}`}>
|
||||
<span>{row[column.id]}</span>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
@@ -288,7 +288,12 @@ const useStyles = makeStyles((theme) => ({
|
||||
tableHeader: {
|
||||
textDecorationStyle: "solid",
|
||||
fontWeight:500,
|
||||
}
|
||||
},
|
||||
limitWidthTableCell: {
|
||||
maxWidth: "200px",
|
||||
whiteSpace: "normal",
|
||||
wordWrap: "break-word",
|
||||
},
|
||||
}));
|
||||
|
||||
export default useStyles;
|
||||
|
||||
Reference in New Issue
Block a user