CEC-3348: truncate table cell (#467)

* CEC-3348: truncate ecu list

* calc string once

* remove unused dep

src/components/Suppliers/List/__snapshots__/index.test.jsx.snap

@@ -275,7 +275,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  ADAS
+                  <span
+                    class="makeStyles-truncateCell-0"
+                    title="ADAS"
+                  >
+                    ADAS
+                  </span>
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -326,7 +331,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  ICC, BCM
+                  <span
+                    class="makeStyles-truncateCell-0"
+                    title="ICC, BCM"
+                  >
+                    ICC, BCM
+                  </span>
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -377,7 +387,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 >
-                  BCM
+                  <span
+                    class="makeStyles-truncateCell-0"
+                    title="BCM"
+                  >
+                    BCM
+                  </span>
                 </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -403,7 +418,7 @@ exports[`Suppliers page Render 1`] = `
               >
                 <td
                   class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                  colspan="7"
+                  colspan="9"
                 >
                   <div
                     class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

src/components/Suppliers/Table/index.jsx

@@ -8,6 +8,7 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
 import clsx from "clsx";
 
@@ -128,6 +129,7 @@ const SupplierTable = (props) => {
         />
         <TableBody>
           {suppliers.map((row, index) => {
+            const ecuList = row.ecus.join(", ");
             return (
               <TableRow key={index}>
                 <TableCell align="center">
@@ -138,7 +140,13 @@ const SupplierTable = (props) => {
                   <a href={`mailto:${row.email}`}>{row.email}</a>
                 </TableCell>
                 <TableCell align="center">{row.program}</TableCell>
-                <TableCell align="center">{row.ecus.join(", ")}</TableCell>
+                <TableCell align="center">
+                  <Tooltip title={ecuList}>
+                    <span className={classes.truncateCell}>
+                      {ecuList}
+                    </span>
+                  </Tooltip>
+                </TableCell>
                 <TableCell align="center">
                   {LocalDateTimeString(row.created)}
                 </TableCell>
@@ -159,7 +167,7 @@ const SupplierTable = (props) => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={7}
+              colSpan={9}
               count={totalSuppliers}
               rowsPerPage={pageSize}
               page={pageIndex}