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.
opensupplyhub · Dec 11, 2020 · 055e72e · 055e72e
1 parent 8af6efc
commit 055e72e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 32 deletions.
diff --git 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;
-}
diff --git 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
@@ -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
@@ -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}