From daa56cd575a7ea91f95254b91c4964166ff56c1a Mon Sep 17 00:00:00 2001
From: Pierre Bastianelli <pierre.bastianelli@gov.bc.ca>
Date: Mon, 29 Mar 2021 15:01:15 -0700
Subject: [PATCH] feat: icon displays properly when the product is mandatory

---
 .../AllowableProductsTable.tsx                | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/containers/Admin/NaicsCodeProduct/AllowableProductsTable.tsx b/app/containers/Admin/NaicsCodeProduct/AllowableProductsTable.tsx
index e3161dc0af..195b318e37 100644
--- a/app/containers/Admin/NaicsCodeProduct/AllowableProductsTable.tsx
+++ b/app/containers/Admin/NaicsCodeProduct/AllowableProductsTable.tsx
@@ -3,6 +3,7 @@ import {Alert, Button, Table} from 'react-bootstrap';
 import {createFragmentContainer, graphql} from 'react-relay';
 import {AllowableProductsTable_query} from '__generated__/AllowableProductsTable_query.graphql';
 import {faCheck} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 
 interface Props {
   query: AllowableProductsTable_query;
@@ -11,7 +12,7 @@ interface Props {
 export const AllowableProductsTableComponent: React.FunctionComponent<Props> = (
   props
 ) => {
-  if (props.query.productNaicsCodesByNaicsCodeId.edges.length === 0) {
+  if (!props.query?.productNaicsCodesByNaicsCodeId.edges.length) {
     return (
       <Alert variant="secondary" id="no-search-results">
         No allowed products have been set for this NAICS code.
@@ -25,7 +26,9 @@ export const AllowableProductsTableComponent: React.FunctionComponent<Props> = (
         <thead>
           <tr>
             <th scope="col">Product Name</th>
-            <th scope="col">Mandatory</th>
+            <th scope="col" className="centered">
+              Mandatory
+            </th>
             <th scope="col" />
           </tr>
         </thead>
@@ -34,7 +37,14 @@ export const AllowableProductsTableComponent: React.FunctionComponent<Props> = (
             <tr>
               <td>{e.node.productByProductId.productName}</td>
               <td className="centered">
-                {e.node.isMandatory ? <b>{faCheck} Yes</b> : 'No'}
+                {e.node.isMandatory ? (
+                  <>
+                    <FontAwesomeIcon icon={faCheck} />
+                    <b> Yes</b>
+                  </>
+                ) : (
+                  'No'
+                )}
               </td>
               <td className="centered">
                 <Button variant="outline-danger" size="sm">
@@ -50,7 +60,8 @@ export const AllowableProductsTableComponent: React.FunctionComponent<Props> = (
           color: white;
           background: #003366;
         }
-        .table td.centered {
+        .table td.centered,
+        .table th.centered {
           text-align: center;
         }
       `}</style>