From e552cf147c228be2fa021ef2e6508d7ec24d589d Mon Sep 17 00:00:00 2001
From: Sue Tairaku <sue.tairaku@gmail.com>
Date: Mon, 23 Dec 2024 14:23:09 -0800
Subject: [PATCH] Changing data-testId props

---
 .../components/common/buttons/EditButton.tsx  | 22 ++++++++-----------
 .../components/common/buttons/ViewButton.tsx  |  2 +-
 .../features/leases/add/RenewalSubForm.tsx    |  2 +-
 .../UpdateAcquisitionOwnersSubForm.tsx        |  2 +-
 .../UpdateAcquisitionTeamSubForm.tsx          |  2 +-
 .../tabs/agreement/detail/AgreementView.tsx   |  4 ++--
 .../form8/Form8PaymentItemsSubForm.tsx        |  2 +-
 .../details/ExpropriationForm8Details.tsx     |  4 ++--
 .../mapSideBar/compensation/list/columns.tsx  |  4 ++--
 .../financials/FinancialActivitiesSubForm.tsx |  2 +-
 .../form/DispositionTeamSubForm.tsx           |  2 +-
 .../tabs/offersAndSale/OffersAndSaleView.tsx  |  4 ++--
 .../DispositionOfferDetails.tsx               |  4 ++--
 .../form/DispositionSalePurchasersSubForm.tsx |  2 +-
 .../detail/ConsultationListView.tsx           |  4 ++--
 .../update/UpdateHistoricalNumbersSubForm.tsx |  2 +-
 .../list/ManagementActivitiesList.tsx         |  4 ++--
 .../detail/PropertyContactList.tsx            |  2 +-
 .../__snapshots__/NoteResults.test.tsx.snap   | 16 ++++----------
 19 files changed, 37 insertions(+), 49 deletions(-)

diff --git a/source/frontend/src/components/common/buttons/EditButton.tsx b/source/frontend/src/components/common/buttons/EditButton.tsx
index b54cdc1ba5..b018c5bdf8 100644
--- a/source/frontend/src/components/common/buttons/EditButton.tsx
+++ b/source/frontend/src/components/common/buttons/EditButton.tsx
@@ -7,26 +7,22 @@ interface IEditButtonProps {
   onClick: () => void;
   title?: string;
   icon?: React.ReactNode;
-  dataTestId?: string | null;
+  'data-testId'?: string;
   style?: CSSProperties | null;
 }
 
-export const EditButton: React.FunctionComponent<React.PropsWithChildren<IEditButtonProps>> = ({
-  onClick,
-  title,
-  icon,
-  dataTestId,
-  style,
-}) => {
+export const EditButton: React.FunctionComponent<
+  React.PropsWithChildren<IEditButtonProps>
+> = props => {
   return (
     <StyledIconButton
       variant="primary"
-      title={title ?? 'edit'}
-      onClick={onClick}
-      data-testid={dataTestId ?? 'edit-button'}
-      style={style}
+      title={props.title ?? 'edit'}
+      onClick={props.onClick}
+      data-testid={props['data-testId'] ?? 'edit-button'}
+      style={props.style}
     >
-      {icon ?? <FaEdit size={22} />}
+      {props.icon ?? <FaEdit size={22} />}
     </StyledIconButton>
   );
 };
diff --git a/source/frontend/src/components/common/buttons/ViewButton.tsx b/source/frontend/src/components/common/buttons/ViewButton.tsx
index f2d4f7a9a2..8787c895ff 100644
--- a/source/frontend/src/components/common/buttons/ViewButton.tsx
+++ b/source/frontend/src/components/common/buttons/ViewButton.tsx
@@ -8,7 +8,7 @@ interface IViewButtonProps extends ButtonProps {
   onClick: () => void;
   title?: string;
   icon?: React.ReactNode;
-  dataTestId?: string | null;
+  'data-testId'?: string;
   style?: CSSProperties | null;
 }
 
diff --git a/source/frontend/src/features/leases/add/RenewalSubForm.tsx b/source/frontend/src/features/leases/add/RenewalSubForm.tsx
index 4547f7f8a4..efe598491a 100644
--- a/source/frontend/src/features/leases/add/RenewalSubForm.tsx
+++ b/source/frontend/src/features/leases/add/RenewalSubForm.tsx
@@ -86,7 +86,7 @@ export const RenewalSubForm: React.FunctionComponent<IRenewalSubFormProps> = ({
                 </Col>
                 <Col xs="2" className="pt-2">
                   <RemoveButton
-                    dataTestId={`renewal.${index}.remove-button`}
+                    data-testId={`renewal.${index}.remove-button`}
                     onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx
index dfc64c4f92..d9cc1e598a 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/UpdateAcquisitionOwnersSubForm.tsx
@@ -65,7 +65,7 @@ const UpdateAcquisitionOwnersSubForm: React.FC<{ isSubFile?: boolean }> = ({
                   <ButtonDiv>
                     <RemoveButton
                       label={isSubFile ? 'Remove Sub-interest' : 'Remove Owner'}
-                      dataTestId={`owners[${index}]-remove-button`}
+                      data-testId={`owners[${index}]-remove-button`}
                       onRemove={() => {
                         setRemoveIndex(index);
                         setShowRemoveModal(true);
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx
index a0c754a140..7200f76292 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/UpdateAcquisitionTeamSubForm.tsx
@@ -52,7 +52,7 @@ export const UpdateAcquisitionTeamSubForm: React.FunctionComponent<
                 </Col>
                 <Col xs="auto" xl="2" className="pl-0 mt-2">
                   <RemoveButton
-                    dataTestId={`team.${index}.remove-button`}
+                    data-testId={`team.${index}.remove-button`}
                     onRemove={() => {
                       setRemoveIndex(index);
                       setShowRemoveMemberModal(true);
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
index 80de581875..ab339622f7 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
@@ -94,7 +94,7 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                             <>
                               <EditButton
                                 title="Edit Agreement"
-                                dataTestId={`agreements[${index}].edit-btn`}
+                                data-testId={`agreements[${index}].edit-btn`}
                                 onClick={() =>
                                   history.push(`${match.url}/${agreement.agreementId}/update`)
                                 }
@@ -102,7 +102,7 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                               />
                               <RemoveIconButton
                                 title="Delete Agreement"
-                                dataTestId={`agreements[${index}].delete-btn`}
+                                data-testId={`agreements[${index}].delete-btn`}
                                 icon={<FaTrash size={'1.75rem'} />}
                                 onRemove={() => {
                                   setModalContent({
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
index c223922c5c..24cc4a233d 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx
@@ -78,7 +78,7 @@ export const Form8PaymentItemsSubForm: React.FunctionComponent<IForm8PaymentItem
                   <label>Payment Item {index + 1}</label>
                   <RemoveIconButton
                     title="Delete Payment Item"
-                    dataTestId={`paymentItems[${index}].delete-button`}
+                    data-testId={`paymentItems[${index}].delete-button`}
                     onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
index 08c7fd9a5e..20a1c63b9b 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx
@@ -63,13 +63,13 @@ export const ExpropriationForm8Details: React.FunctionComponent<
             <>
               <EditButton
                 title="Edit form 8"
-                dataTestId={`form8[${form8Index}].edit-form8`}
+                data-testId={`form8[${form8Index}].edit-form8`}
                 onClick={() => history.push(`${match.url}/${form8.id}`)}
                 style={{ float: 'right' }}
               />
               <RemoveIconButton
                 title="Delete Form 8"
-                dataTestId={`form8[${form8Index}].delete-form8`}
+                data-testId={`form8[${form8Index}].delete-form8`}
                 onRemove={() => {
                   setModalContent({
                     ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
index a217c475c7..d2509d30cd 100644
--- a/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/list/columns.tsx
@@ -98,7 +98,7 @@ export function createCompensationTableColumns(
           <StyledDiv className="no-gutters">
             {hasClaim(Claims.COMPENSATION_REQUISITION_VIEW) && (
               <ViewButton
-                dataTestId={`compensation-view-${cellProps.row.id}`}
+                data-testId={`compensation-view-${cellProps.row.id}`}
                 title="Compensation view details"
                 id={`compensation-view-${cellProps.row.id}`}
                 onClick={() => cellProps.row.original.id && onShow(cellProps.row.original.id)}
@@ -108,7 +108,7 @@ export function createCompensationTableColumns(
               canEditDetails(cellProps.row.original.isDraft) && (
                 <RemoveIconButton
                   id={`compensation-delete-${cellProps.row.id}`}
-                  dataTestId={`compensation-delete-${cellProps.row.id}`}
+                  data-testId={`compensation-delete-${cellProps.row.id}`}
                   onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                   title="Delete Compensation"
                 />
diff --git a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
index ade7643d77..128fb42ae3 100644
--- a/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/compensation/update/financials/FinancialActivitiesSubForm.tsx
@@ -89,7 +89,7 @@ export const FinancialActivitiesSubForm: React.FunctionComponent<
                     <label>Activity {index + 1}</label>
                     <RemoveIconButton
                       title="Delete Financial Activity"
-                      dataTestId={`activity[${index}].delete-button`}
+                      data-testId={`activity[${index}].delete-button`}
                       onRemove={() => {
                         setRowToDelete(index);
                         setShowModal(true);
diff --git a/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx b/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx
index 3170e972cb..ca85b2602a 100644
--- a/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/form/DispositionTeamSubForm.tsx
@@ -53,7 +53,7 @@ const DispositionTeamSubForm: React.FunctionComponent<React.PropsWithChildren<un
                 </Col>
                 <Col xs="auto" xl="2" className="pl-0 mt-2">
                   <RemoveButton
-                    dataTestId={`team.${index}.remove-button`}
+                    data-testId={`team.${index}.remove-button`}
                     onRemove={() => {
                       setModalContent({
                         ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
index 7769601f3f..498ac6f380 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx
@@ -71,7 +71,7 @@ const OffersAndSaleView: React.FunctionComponent<IOffersAndSaleViewProps> = ({
             {keycloak.hasClaim(Claims.DISPOSITION_EDIT) && canEditDetails() && (
               <EditButton
                 title="Edit Appraisal"
-                dataTestId={`appraisal-edit-btn`}
+                data-testId={`appraisal-edit-btn`}
                 onClick={() => {
                   history.push(`${match.url}/appraisal/update`);
                 }}
@@ -166,7 +166,7 @@ const OffersAndSaleView: React.FunctionComponent<IOffersAndSaleViewProps> = ({
             {keycloak.hasClaim(Claims.DISPOSITION_EDIT) && canEditDetails() && (
               <EditButton
                 title="Edit Sale"
-                dataTestId={`sale-edit-btn`}
+                data-testId={`sale-edit-btn`}
                 onClick={() => {
                   history.push(`${match.url}/sale/update`);
                 }}
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
index 9c3d423ed6..6aeac522c4 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx
@@ -51,12 +51,12 @@ const DispositionOfferDetails: React.FunctionComponent<IDispositionOfferDetailsP
           <>
             <EditButton
               title="Edit Offer"
-              dataTestId={`Offer[${index}].edit-btn`}
+              data-testId={`Offer[${index}].edit-btn`}
               onClick={() => history.push(`${match.url}/offers/${dispositionOffer.id}/update`)}
             />
             <RemoveIconButton
               title="Delete Offer"
-              dataTestId={`Offer[${index}].delete-btn`}
+              data-testId={`Offer[${index}].delete-btn`}
               onRemove={() => {
                 setModalContent({
                   ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
index ded0361c65..0e736c8b43 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/DispositionSalePurchasersSubForm.tsx
@@ -42,7 +42,7 @@ const DispositionSalePurchaserSubForm: React.FunctionComponent<
                   <Col xs="auto" xl="2" className="pl-3 mt-2">
                     <RemoveIconButton
                       title="Remove Purchaser"
-                      dataTestId={`dispositionPurchasers.${index}.remove-button`}
+                      data-testId={`dispositionPurchasers.${index}.remove-button`}
                       onRemove={() => {
                         setModalContent({
                           ...getDeleteModalProps(),
diff --git a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
index e9e72652c7..9f762f0163 100644
--- a/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
+++ b/source/frontend/src/features/mapSideBar/lease/tabs/consultations/detail/ConsultationListView.tsx
@@ -108,7 +108,7 @@ export const ConsultationListView: React.FunctionComponent<IConsultationListView
                             <Col xs="auto" className="px-1">
                               <RemoveIconButton
                                 title="Delete Consultation"
-                                dataTestId={`consultations[${index}].delete-btn`}
+                                data-testId={`consultations[${index}].delete-btn`}
                                 onRemove={() => {
                                   setModalContent({
                                     ...getDeleteModalProps(),
@@ -134,7 +134,7 @@ export const ConsultationListView: React.FunctionComponent<IConsultationListView
                               <StyledButtonContainer>
                                 <EditButton
                                   title="Edit Consultation"
-                                  dataTestId={`consultations[${index}].edit-btn`}
+                                  data-testId={`consultations[${index}].edit-btn`}
                                   onClick={() => onEdit(consultation.id)}
                                 />
                               </StyledButtonContainer>
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx
index f8d8e8a949..3be8ac6509 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdateHistoricalNumbersSubForm.tsx
@@ -54,7 +54,7 @@ export const UpdateHistoricalNumbersSubForm: React.FC<IUpdateHistoricalNumbersSu
                 </Col>
                 <Col xs="auto" xl="2" className="pl-0">
                   <RemoveButton
-                    dataTestId={`historical-number-remove-button-${index}`}
+                    data-testId={`historical-number-remove-button-${index}`}
                     onRemove={() => {
                       arrayHelpers.remove(index);
                     }}
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
index 32e77993d8..27696eab0e 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/ManagementActivitiesList.tsx
@@ -89,7 +89,7 @@ export function createTableColumns(
           <StyledDiv>
             {hasClaim(Claims.MANAGEMENT_VIEW) && (
               <ViewButton
-                dataTestId={`activity-view-${activityRow.id}`}
+                data-testId={`activity-view-${activityRow.id}`}
                 onClick={() => activityRow?.id && onView(activityRow.activityId)}
                 id={`activity-view-${cellProps.row.id}`}
                 title="property-activity view details"
@@ -100,7 +100,7 @@ export function createTableColumns(
               PropertyManagementActivityStatusTypes.NOTSTARTED ? (
               <RemoveIconButton
                 id={`activity-delete-${cellProps.row.id}`}
-                dataTestId={`activity-delete-${activityRow.id}`}
+                data-testId={`activity-delete-${activityRow.id}`}
                 onRemove={() => activityRow.id && onDelete(activityRow.id)}
                 title="Delete"
               />
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
index e871b2453c..b687bf683e 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/PropertyContactList.tsx
@@ -116,7 +116,7 @@ export function createContactTableColumns(
             {hasClaim(Claims.PROPERTY_EDIT) && (
               <RemoveIconButton
                 id={`contact-delete-${cellProps.row.id}`}
-                dataTestId={`contact-delete-${cellProps.row.id}`}
+                data-testId={`contact-delete-${cellProps.row.id}`}
                 onRemove={() => cellProps.row.original.id && onDelete(cellProps.row.original.id)}
                 title="Delete contact"
               />
diff --git a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
index aa118e2c01..2473ffce8a 100644
--- a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
+++ b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
@@ -509,9 +509,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >
@@ -587,9 +585,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >
@@ -665,9 +661,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >
@@ -743,9 +737,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
             >
               <div
                 class="p-0 col-1"
-              >
-                 
-              </div>
+              />
               <div
                 class="p-0 col-1"
               >