Refactor table header and filter row keys in EnhancedTable and TaskAnalysisTable (#2651)

* Refactor table header and filter row keys in EnhancedTable and TaskAnalysisTable

* setup some overflow ellipsis

* format

Author: CollinBeczak

src/components/TableShared/EnhancedTable.jsx

@@ -61,8 +61,8 @@ export const SearchFilter = ({ value, onChange, placeholder, inputClassName = ""
 export const renderTableHeader = (headerGroups) => {
   return (
     <>
-      {headerGroups.map((headerGroup) => (
-        <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
+      {headerGroups.map((headerGroup, index) => (
+        <tr {...headerGroup.getHeaderGroupProps()} key={`header-row-${headerGroup.id || index}`}>
           {headerGroup.headers.map((column) => {
             const headerProps = column.getHeaderProps();
             const sortByProps = column.getSortByToggleProps ? column.getSortByToggleProps() : {};
@@ -76,15 +76,14 @@ export const renderTableHeader = (headerGroups) => {
 
             return (
               <th
-                key={column.id}
+                key={`header-cell-${column.id}`}
                 className={`${headerStyles} ${!column.disableSortBy ? sortableHeaderStyles : ""}`}
                 {...headerProps}
                 onClick={onHeaderClick}
                 style={{
                   ...headerProps.style,
                   width: column.width,
                   minWidth: column.minWidth,
-                  maxWidth: column.width,
                   position: "relative",
                 }}
               >
@@ -130,15 +129,14 @@ export const renderTableHeader = (headerGroups) => {
       ))}
 
       {/* Add a separate row for filters */}
-      {headerGroups.map((headerGroup) => (
-        <tr key={`filter-${headerGroup.id}`}>
+      {headerGroups.map((headerGroup, index) => (
+        <tr key={`filter-row-${headerGroup.id}-${index}`}>
           {headerGroup.headers.map((column) => (
             <td
-              key={`filter-${column.id}`}
+              key={`filter-cell-${column.id}`}
               style={{
                 width: column.width,
                 minWidth: column.minWidth,
-                maxWidth: column.width,
               }}
             >
               {column.canFilter && (
@@ -172,3 +170,37 @@ export const TableWrapper = ({ children, className = "" }) => (
     <div className="mr-inline-block mr-min-w-full">{children}</div>
   </div>
 );
+
+/**
+ * Renders a table cell with nowrap styling
+ * @param {Object} cell - The react-table cell object
+ * @param {Object} options - Additional styling options
+ * @returns {JSX.Element} - The rendered table cell
+ */
+export const renderTableCell = (cell, options = {}) => {
+  return (
+    <td
+      {...cell.getCellProps()}
+      style={{
+        ...cell.getCellProps().style,
+        whiteSpace: "nowrap !important",
+        overflow: "hidden !important",
+        textOverflow: "ellipsis !important",
+        minWidth: cell.column.minWidth,
+        ...options,
+      }}
+    >
+      <div
+        style={{
+          overflow: "hidden !important",
+          textOverflow: "ellipsis !important",
+          whiteSpace: "nowrap !important",
+          width: "100%",
+          display: "block",
+        }}
+      >
+        {cell.render("Cell")}
+      </div>
+    </td>
+  );
+};

src/components/TaskAnalysisTable/TaskAnalysisTable.jsx

@@ -33,8 +33,13 @@ import WithLoadedTask from "../HOCs/WithLoadedTask/WithLoadedTask";
 import IntlDatePicker from "../IntlDatePicker/IntlDatePicker";
 import PaginationControl from "../PaginationControl/PaginationControl";
 import SvgSymbol from "../SvgSymbol/SvgSymbol";
-import { SearchFilter, TableWrapper, renderTableHeader } from "../TableShared/EnhancedTable";
-import { cellStyles, inputStyles, rowStyles, tableStyles } from "../TableShared/TableStyles";
+import {
+  SearchFilter,
+  TableWrapper,
+  renderTableCell,
+  renderTableHeader,
+} from "../TableShared/EnhancedTable";
+import { inputStyles, rowStyles, tableStyles } from "../TableShared/TableStyles";
 import ViewTask from "../ViewTask/ViewTask";
 import messages from "./Messages";
 import TaskAnalysisTableHeader from "./TaskAnalysisTableHeader";
@@ -285,27 +290,12 @@ export const TaskAnalysisTableInternal = (props) => {
                       className={`${row.isExpanded ? "mr-bg-black-10" : ""} ${rowStyles}`}
                     >
                       {row.cells.map((cell) => {
-                        return (
-                          <td
-                            key={cell.column.id}
-                            {...cell.getCellProps()}
-                            className={cellStyles}
-                            style={{
-                              ...cell.getCellProps().style,
-                              maxWidth: cell.column.width,
-                              minWidth: cell.column.minWidth,
-                              overflow: "hidden",
-                              height: "40px",
-                            }}
-                          >
-                            <div className="mr-cell-content">{cell.render("Cell")}</div>
-                          </td>
-                        );
+                        return renderTableCell(cell);
                       })}
                     </tr>
 
                     {row.isExpanded ? (
-                      <tr>
+                      <tr key={`expanded-${row.original.id}`}>
                         <td colSpan={columns.length}>
                           <ViewTaskSubComponent taskId={row.original.id} />
                         </td>
@@ -389,7 +379,18 @@ const setupColumnTypes = (props, taskBaseRoute, manager, openComments) => {
     id: "featureId",
     Header: props.intl.formatMessage(messages.featureIdLabel),
     accessor: (t) => t.name || t.title,
-    Cell: ({ value }) => value || "",
+    Cell: ({ value }) => (
+      <div
+        style={{
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+          width: "100%",
+        }}
+      >
+        {value || ""}
+      </div>
+    ),
     Filter: ({ column: { filterValue, setFilter } }) => (
       <div className="mr-flex mr-items-center" onClick={(e) => e.stopPropagation()}>
         <SearchFilter
@@ -486,6 +487,7 @@ const setupColumnTypes = (props, taskBaseRoute, manager, openComments) => {
         )}
       </div>
     ),
+    width: 40,
   };
 
   columns.status = {
@@ -937,7 +939,6 @@ const setupColumnTypes = (props, taskBaseRoute, manager, openComments) => {
     accessor: "commentID",
     Cell: ({ row }) => <ViewCommentsButton onClick={() => openComments(row.original.id)} />,
     width: 110,
-
     disableSortBy: true,
   };