Refactor Table Components for Improved Code Clarity and Performance

- Simplified import statements in MetricsTable and TasksReviewTable by removing unnecessary imports.
- Updated TaskAnalysisTable to enhance filter functionality by removing unused parameters in filter components.
- Improved key assignment in table rendering for better performance and consistency.

These changes enhance the maintainability and performance of the table components, providing a cleaner codebase.

Author: CollinBeczak

src/components/SuperAdmin/MetricsTable.jsx

@@ -6,13 +6,7 @@ import WithSortedChallenges from "../HOCs/WithSortedChallenges/WithSortedChallen
 import PaginationControl from "../PaginationControl/PaginationControl";
 import SvgSymbol from "../SvgSymbol/SvgSymbol";
 import { SearchFilter } from "../TableShared/EnhancedTable";
-import {
-  cellStyles,
-  inputStyles,
-  linkStyles,
-  rowStyles,
-  tableStyles,
-} from "../TableShared/TableStyles";
+import { cellStyles, inputStyles, rowStyles, tableStyles } from "../TableShared/TableStyles";
 import { CHALLENGE_COLUMNS, PROJECT_COLUMNS, getUserColumns } from "./MetricsData";
 import WithMetricsSearchResults from "./WithMetricsSearchResults";
 import WithSortedProjects from "./WithSortedProjects";

src/components/TaskAnalysisTable/TaskAnalysisTable.jsx

@@ -1,5 +1,3 @@
-import _isEqual from "lodash/isEqual";
-import _isObject from "lodash/isObject";
 import { Fragment, useMemo, useState } from "react";
 import { injectIntl } from "react-intl";
 import { useExpanded, useResizeColumns, useSortBy, useTable } from "react-table";
@@ -173,14 +171,14 @@ export const TaskAnalysisTableInternal = (props) => {
         <div className="mr-overflow-x-auto">
           <table {...getTableProps()} className={tableStyles} style={{ minWidth: "max-content" }}>
             <thead>
-              {headerGroups.map((headerGroup) => (
-                <Fragment key={headerGroup.id}>
+              {headerGroups.map((headerGroup, headerGroupIndex) => (
+                <Fragment key={`header-group-${headerGroupIndex}`}>
                   <tr {...headerGroup.getHeaderGroupProps()}>
-                    {headerGroup.headers.map((column) => (
+                    {headerGroup.headers.map((column, columnIndex) => (
                       <th
                         {...column.getHeaderProps()}
                         className={`mr-px-2 mr-text-left mr-border-gray-600 mr-relative ${column.canResize ? "mr-border-r mr-border-gray-500" : ""}`}
-                        key={column.id}
+                        key={`header-${column.id}-${columnIndex}`}
                         style={{
                           ...column.getHeaderProps().style,
                           width: column.width,
@@ -217,8 +215,8 @@ export const TaskAnalysisTableInternal = (props) => {
                     ))}
                   </tr>
                   <tr>
-                    {headerGroup.headers.map((column) => (
-                      <th key={`filter-${column.id}`} className="mr-px-2">
+                    {headerGroup.headers.map((column, columnIndex) => (
+                      <th key={`filter-${column.id}-${columnIndex}`} className="mr-px-2">
                         <div>{column.Filter ? column.render("Filter") : null}</div>
                       </th>
                     ))}
@@ -235,8 +233,9 @@ export const TaskAnalysisTableInternal = (props) => {
                       {...row.getRowProps()}
                       className={`${row.isExpanded ? "mr-bg-black-10" : ""} ${rowStyles}`}
                     >
-                      {row.cells.map((cell) => (
+                      {row.cells.map((cell, cellIndex) => (
                         <td
+                          key={`cell-${row.original.id}-${cell.column.id}-${cellIndex}`}
                           {...cell.getCellProps()}
                           className="mr-px-2"
                           style={{

src/components/TaskAnalysisTable/setupColumnTypes.jsx

@@ -25,7 +25,7 @@ export const setupColumnTypes = (props, taskBaseRoute, manager, openComments) =>
   columns.selected = {
     id: "selected",
     accessor: (task) => props.isTaskSelected(task.id),
-    Cell: ({ value, row }) => {
+    Cell: ({ row }) => {
       const status = row.original.status ?? row.original.taskStatus;
       const alreadyBundled =
         row.original.bundleId && !props.taskBundle?.bundleId !== row.original.bundleId;
@@ -70,7 +70,7 @@ export const setupColumnTypes = (props, taskBaseRoute, manager, openComments) =>
     Header: props.intl.formatMessage(messages.featureIdLabel),
     accessor: (t) => t.name || t.title,
     Cell: ({ value }) => <div>{value || ""}</div>,
-    Filter: ({ column }) => {
+    Filter: () => {
       const filterValue = props.criteria?.filters?.featureId || "";
       const updateFilter = (value) => {
         const newFilters = { ...props.criteria?.filters };
@@ -157,7 +157,7 @@ export const setupColumnTypes = (props, taskBaseRoute, manager, openComments) =>
         return <span>{taskLink}</span>;
       }
     },
-    Filter: ({ column }) => {
+    Filter: () => {
       const filterValue = props.criteria?.filters?.id || "";
       const updateFilter = (value) => {
         const newFilters = { ...props.criteria?.filters };
@@ -293,7 +293,7 @@ export const setupColumnTypes = (props, taskBaseRoute, manager, openComments) =>
         </span>
       );
     },
-    Filter: ({ column }) => {
+    Filter: () => {
       let filterValue = props.criteria?.filters?.mappedOn;
       if (typeof filterValue === "string" && filterValue !== "") {
         filterValue = parseISO(filterValue);
@@ -601,7 +601,7 @@ export const setupColumnTypes = (props, taskBaseRoute, manager, openComments) =>
         </div>
       );
     },
-    Filter: ({ column }) => {
+    Filter: () => {
       const filterValue = props.criteria?.filters?.tags || "";
       const preferredTags = [
         ...(props.challenge?.preferredTags?.split(",") ?? []),

src/components/TaskClusterMap/TileLayerErrorBoundary.jsx

@@ -19,7 +19,7 @@ class TileLayerErrorBoundary extends React.Component {
     }
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError() {
     return { hasError: true };
   }
 

src/pages/Review/TasksReview/TasksReviewTable.jsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import _cloneDeep from "lodash/cloneDeep";
 import _isEqual from "lodash/isEqual";
-import _isObject from "lodash/isObject";
 import _omit from "lodash/omit";
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
@@ -28,8 +27,7 @@ import {
   buildLinkToMapperExportCSV,
   buildLinkToReviewTableExportCSV,
 } from "../../../services/Task/TaskReview/TaskReview";
-import FilterSuggestTextBox from "./FilterSuggestTextBox";
-import { FILTER_SEARCH_ALL, FILTER_SEARCH_TEXT } from "./FilterSuggestTextBox";
+import { FILTER_SEARCH_ALL } from "./FilterSuggestTextBox";
 import messages from "./Messages";
 import { setupConfigurableColumns } from "./columns";
 import { setupColumnTypes } from "./setupColumnTypes";