From 7b061c0282150a4fc7463434f3add7cab81d2edf Mon Sep 17 00:00:00 2001
From: das31 <31259710+das31@users.noreply.github.com>
Date: Tue, 25 Apr 2023 17:25:22 -0400
Subject: [PATCH] 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>
---
 .../__snapshots__/ECUsTab.test.jsx.snap       | 170 +++++++++++++-----
 .../Controls/CarECUsTable/index.jsx           |  11 +-
 src/components/useStyles.jsx                  |   7 +-
 3 files changed, 145 insertions(+), 43 deletions(-)

diff --git a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
index 89f219b..8ec2646 100644
--- a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
@@ -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"
                 >
-                  ECUA
+                  <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"
                 >
-                  SWVERSION
+                  <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"
                 >
-                  HWVERSION
+                  <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"
                 >
-                  VENDOR
+                  <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"
                 >
-                  SUPPLIER_SW_VERSION
+                  <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"
                 >
-                  SERIAL_NUMBER
+                  <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"
                 >
-                  BOOT_LOADER
+                  <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"
                 >
-                  CONFIG
+                  <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"
                 >
-                  FINGERPRINT
+                  <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"
                 >
-                  ECUB
+                  <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"
                 >
-                  SWVERSION
+                  <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"
                 >
-                  HWVERSION
+                  <span
+                    class=""
+                    title="HWVERSION"
+                  >
+                    HWVERSION
+                  </span>
                 </td>
                 <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                />
-                <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                />
-                <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                />
-                <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                />
-                <td
-                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
                 >
-                  CONFIG
+                  <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 makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
+                >
+                  <span
+                    class=""
+                    title="none"
+                  />
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
+                >
+                  <span
+                    class=""
+                    title="none"
+                  />
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
+                >
+                  <span
+                    class=""
+                    title="CONFIG"
+                  >
+                    CONFIG
+                  </span>
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
+                >
+                  <span
+                    class=""
+                    title="none"
+                  />
+                </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
diff --git a/src/components/Controls/CarECUsTable/index.jsx b/src/components/Controls/CarECUsTable/index.jsx
index 1292e2c..af32ffc 100644
--- a/src/components/Controls/CarECUsTable/index.jsx
+++ b/src/components/Controls/CarECUsTable/index.jsx
@@ -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>
           ))}
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 1931093..edb09bc 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -288,7 +288,12 @@ const useStyles = makeStyles((theme) => ({
   tableHeader: {
     textDecorationStyle: "solid",
     fontWeight:500,
-  }
+  },
+  limitWidthTableCell: {
+    maxWidth: "200px",
+    whiteSpace: "normal",
+    wordWrap: "break-word",
+  },
 }));
 
 export default useStyles;