From c0490306637671eb58dbff57ca4e5fcc968459c4 Mon Sep 17 00:00:00 2001
From: Tai Wilkin <twilkin@azavea.com>
Date: Fri, 11 Dec 2020 14:06:17 -0500
Subject: [PATCH] Fix pending matches bug

During confirm/reject analysis of a list, the following bug was noticed.
When an entry had multiple potential matches, names and address of the
multiple facilities were not broken by line items. The links were
linked to an incorrect address. Additionally, the confirm and reject
button showed only for the top-most potential match.

When facilities have multiple potential matches, the matches show in
individual line items with a Confirm and Reject option for each
potential match.

There were a minor propType warning and key warning which have also
been corrected.
---
 src/app/src/App.css                           |  6 +--
 src/app/src/components/CellElement.jsx        |  1 -
 .../FacilityListItemsConfirmationTableRow.jsx | 42 ++++++++-----------
 .../FacilityListItemsDetailedTableRowCell.jsx |  2 +-
 4 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/src/app/src/App.css b/src/app/src/App.css
index 9084a2b86..04a2b3aae 100644
--- a/src/app/src/App.css
+++ b/src/app/src/App.css
@@ -693,7 +693,7 @@ hr {
   .form__action {
     margin-bottom: 5px;
   }
-  
+
   .filter-sidebar-tabgroup {
     position: sticky !important;
     top: -11px;
@@ -756,7 +756,3 @@ hr {
 .STATUS_PARSED:not(:hover) {
   background: #fff !important;
 }
-
-.STATUS_POTENTIAL_MATCH--ACTIONS + .STATUS_POTENTIAL_MATCH--ACTIONS {
-  display: none !important;
-}
\ No newline at end of file
diff --git a/src/app/src/components/CellElement.jsx b/src/app/src/components/CellElement.jsx
index d18de08be..604896b86 100644
--- a/src/app/src/components/CellElement.jsx
+++ b/src/app/src/components/CellElement.jsx
@@ -247,7 +247,6 @@ export default class CellElement extends Component {
             <div
                 key={item.id}
                 style={confirmRejectMatchRowStyles.cellRowStyles}
-                className="STATUS_POTENTIAL_MATCH--ACTIONS"
             >
                 <div style={confirmRejectMatchRowStyles.cellActionStyles}>
                     <Button
diff --git a/src/app/src/components/FacilityListItemsConfirmationTableRow.jsx b/src/app/src/components/FacilityListItemsConfirmationTableRow.jsx
index 3a378663e..8670b14ea 100644
--- a/src/app/src/components/FacilityListItemsConfirmationTableRow.jsx
+++ b/src/app/src/components/FacilityListItemsConfirmationTableRow.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { bool, func } from 'prop-types';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 import TableRow from '@material-ui/core/TableRow';
 import TableCell from '@material-ui/core/TableCell';
 
@@ -154,42 +153,35 @@ function FacilityListItemsConfirmationTableRow({
                     style={listTableCellStyles.nameCellStyles}
                     colSpan={2}
                 >
-                    {matchOARIDs ? (
-                        <>
-                            <b>Facility Match Name</b>
-                            <br />
-                            <Link
-                                to={makeFacilityDetailLink(matchOARIDs)}
-                                href={makeFacilityDetailLink(matchOARIDs)}
-                            >
-                                {matchNames}
-                            </Link>
-                        </>
-                    ) : (
-                        ' '
-                    )}
+                    <b>Facility Match Name</b>
+                    <FacilityListItemsDetailedTableRowCell
+                        title=" "
+                        stringisHidden={false}
+                        data={matchNames}
+                        hasActions={false}
+                        linkURLs={matchOARIDs.map(makeFacilityDetailLink)}
+                    />
                 </TableCell>
                 <TableCell
                     padding="default"
                     style={listTableCellStyles.addressCellStyles}
                     colSpan={2}
                 >
-                    {matchAddresses ? (
-                        <>
-                            <b>Facility Match Address</b>
-                            <br />
-                            {matchAddresses}
-                        </>
-                    ) : (
-                        ' '
-                    )}
+                    <b>Facility Match Address</b>
+                    <FacilityListItemsDetailedTableRowCell
+                        title=" "
+                        stringIsHidden={false}
+                        data={matchAddresses}
+                        hasActions={false}
+                    />
                 </TableCell>
                 <TableCell
                     padding="default"
                     style={listTableCellStyles.statusCellStyles}
                 >
+                    <b>Actions</b>
                     <FacilityListItemsDetailedTableRowCell
-                        title
+                        title=" "
                         stringIsHidden
                         data={matchConfirmOrRejectFunctions}
                         hasActions
diff --git a/src/app/src/components/FacilityListItemsDetailedTableRowCell.jsx b/src/app/src/components/FacilityListItemsDetailedTableRowCell.jsx
index 8dcb196d0..9918e6815 100644
--- a/src/app/src/components/FacilityListItemsDetailedTableRowCell.jsx
+++ b/src/app/src/components/FacilityListItemsDetailedTableRowCell.jsx
@@ -71,7 +71,7 @@ export default function FacilityListItemsDetailedTableRowCell({
                 </div>
                 {
                     data.map((item, index) => (
-                        <Fragment key={hasActions ? item.id : item}>
+                        <Fragment key={item.id ? item.id : item}>
                             <CellElement
                                 item={item}
                                 fetching={fetching}