From 55d4a16a2a2fa143ba26843051031c8531220cf4 Mon Sep 17 00:00:00 2001
From: devinleighsmith <devinleighsmith@gmail.com>
Date: Thu, 20 Jun 2024 13:38:55 -0700
Subject: [PATCH] add pagination to management contacts. Style updates to
 pagination input.

---
 .../src/components/Table/PageSizeSelector.tsx |   7 +-
 .../PageSizeSelector.test.tsx.snap            |   8 +-
 .../Table/__snapshots__/Table.test.tsx.snap   |   8 +-
 .../ContactResultComponent.test.tsx.snap      |   8 +-
 .../ManageAccessRequestsPage.test.tsx.snap    |   8 +-
 .../ContactListView.test.tsx.snap             |   8 +-
 .../DispositionSearchResults.test.tsx.snap    |   8 +-
 .../DispositionListView.test.tsx.snap         |   8 +-
 .../DocumentResults.test.tsx.snap             |   8 +-
 .../DocumentListView.test.tsx.snap            |   8 +-
 .../LeaseSearchResults.test.tsx.snap          |   8 +-
 ...ManagementActivitiesListView.test.tsx.snap |   8 +-
 .../detail/PropertyContactList.tsx            |   5 +-
 .../PropertyContactListView.test.tsx.snap     | 151 ++++++++++++++++++
 .../__snapshots__/NoteResults.test.tsx.snap   |   8 +-
 15 files changed, 217 insertions(+), 42 deletions(-)

diff --git a/source/frontend/src/components/Table/PageSizeSelector.tsx b/source/frontend/src/components/Table/PageSizeSelector.tsx
index f57aaa562f..26f2d49eb9 100644
--- a/source/frontend/src/components/Table/PageSizeSelector.tsx
+++ b/source/frontend/src/components/Table/PageSizeSelector.tsx
@@ -35,7 +35,7 @@ export const TablePageSizeSelector: React.FC<ITablePageSizeSelectorProps> = ({
     <Menu options={pageSizeOptions} alignTop={alignTop}>
       <div className="d-flex">
         <StyledText>Show</StyledText>
-        <StyledInput size="sm" value={`${selected}`} type="number" disabled />
+        <StyledInput defaultValue={`${selected}`} type="number" />
         <StyledText>Entries</StyledText>
       </div>
     </Menu>
@@ -48,10 +48,13 @@ const StyledText = styled.span`
 `;
 
 const StyledInput = styled(Form.Control)`
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
   &:disabled {
     background: white;
   }
+  text-align: center;
+  padding: 0;
 `;
diff --git a/source/frontend/src/components/Table/__snapshots__/PageSizeSelector.test.tsx.snap b/source/frontend/src/components/Table/__snapshots__/PageSizeSelector.test.tsx.snap
index 8bafab48c6..b3fa1b7697 100644
--- a/source/frontend/src/components/Table/__snapshots__/PageSizeSelector.test.tsx.snap
+++ b/source/frontend/src/components/Table/__snapshots__/PageSizeSelector.test.tsx.snap
@@ -11,9 +11,12 @@ exports[`Page size selector > matches snapshot 1`] = `
 }
 
 .c1 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c1:disabled {
@@ -35,8 +38,7 @@ exports[`Page size selector > matches snapshot 1`] = `
           Show
         </span>
         <input
-          class="c1 form-control form-control-sm"
-          disabled=""
+          class="c1 form-control"
           type="number"
           value="10"
         />
diff --git a/source/frontend/src/components/Table/__snapshots__/Table.test.tsx.snap b/source/frontend/src/components/Table/__snapshots__/Table.test.tsx.snap
index 2f905440c6..8a39c16419 100644
--- a/source/frontend/src/components/Table/__snapshots__/Table.test.tsx.snap
+++ b/source/frontend/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -212,9 +212,12 @@ exports[`Generic table component > matches snapshot 1`] = `
 }
 
 .c1 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c1:disabled {
@@ -252,8 +255,7 @@ exports[`Generic table component > matches snapshot 1`] = `
               Show
             </span>
             <input
-              class="c1 form-control form-control-sm"
-              disabled=""
+              class="c1 form-control"
               type="number"
               value="10"
             />
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
index ec51c6a8d9..324b73d856 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
@@ -1125,9 +1125,12 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
 }
 
 .c2 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c2:disabled {
@@ -1171,8 +1174,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
               Show
             </span>
             <input
-              class="c2 form-control form-control-sm"
-              disabled=""
+              class="c2 form-control"
               type="number"
               value="10"
             />
diff --git a/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap b/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap
index e7cb2ee4e9..976db50b2b 100644
--- a/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap
+++ b/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap
@@ -146,9 +146,12 @@ exports[`Manage access requests > Snapshot matches 1`] = `
 }
 
 .c6 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c6:disabled {
@@ -732,8 +735,7 @@ exports[`Manage access requests > Snapshot matches 1`] = `
                 Show
               </span>
               <input
-                class="c6 form-control form-control-sm"
-                disabled=""
+                class="c6 form-control"
                 type="number"
                 value="10"
               />
diff --git a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
index 67431a6546..84b72f63cc 100644
--- a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
+++ b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
@@ -216,9 +216,12 @@ exports[`Contact List View > matches snapshot 1`] = `
 }
 
 .c21 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c21:disabled {
@@ -1236,8 +1239,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                       Show
                     </span>
                     <input
-                      class="c21 form-control form-control-sm"
-                      disabled=""
+                      class="c21 form-control"
                       type="number"
                       value="10"
                     />
diff --git a/source/frontend/src/features/disposition/list/DispositionSearchResults/__snapshots__/DispositionSearchResults.test.tsx.snap b/source/frontend/src/features/disposition/list/DispositionSearchResults/__snapshots__/DispositionSearchResults.test.tsx.snap
index 34a362029c..ee68e74cc4 100644
--- a/source/frontend/src/features/disposition/list/DispositionSearchResults/__snapshots__/DispositionSearchResults.test.tsx.snap
+++ b/source/frontend/src/features/disposition/list/DispositionSearchResults/__snapshots__/DispositionSearchResults.test.tsx.snap
@@ -466,9 +466,12 @@ exports[`Disposition search results table > matches snapshot 1`] = `
 }
 
 .c1 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c1:disabled {
@@ -506,8 +509,7 @@ exports[`Disposition search results table > matches snapshot 1`] = `
               Show
             </span>
             <input
-              class="c1 form-control form-control-sm"
-              disabled=""
+              class="c1 form-control"
               type="number"
               value="10"
             />
diff --git a/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap b/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
index f148e80b64..92295afc2d 100644
--- a/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
+++ b/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
@@ -216,9 +216,12 @@ exports[`Disposition List View > matches snapshot 1`] = `
 }
 
 .c16 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c16:disabled {
@@ -1182,8 +1185,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
                   Show
                 </span>
                 <input
-                  class="c16 form-control form-control-sm"
-                  disabled=""
+                  class="c16 form-control"
                   type="number"
                   value="10"
                 />
diff --git a/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap b/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap
index 7546369c78..94f56c9dc7 100644
--- a/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap
+++ b/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap
@@ -467,9 +467,12 @@ exports[`Document Results Table > matches snapshot 1`] = `
 }
 
 .c1 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c1:disabled {
@@ -507,8 +510,7 @@ exports[`Document Results Table > matches snapshot 1`] = `
               Show
             </span>
             <input
-              class="c1 form-control form-control-sm"
-              disabled=""
+              class="c1 form-control"
               type="number"
               value="10"
             />
diff --git a/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap b/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
index 35940ad323..fc713672b9 100644
--- a/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
+++ b/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
@@ -194,9 +194,12 @@ exports[`Document List View > renders as expected 1`] = `
 }
 
 .c13 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c13:disabled {
@@ -936,8 +939,7 @@ exports[`Document List View > renders as expected 1`] = `
                   Show
                 </span>
                 <input
-                  class="c13 form-control form-control-sm"
-                  disabled=""
+                  class="c13 form-control"
                   type="number"
                   value="10"
                 />
diff --git a/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap b/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap
index 8049d5d8dc..5d5a35cf7e 100644
--- a/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap
+++ b/source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap
@@ -507,9 +507,12 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
 }
 
 .c1 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c1:disabled {
@@ -547,8 +550,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
               Show
             </span>
             <input
-              class="c1 form-control form-control-sm"
-              disabled=""
+              class="c1 form-control"
               type="number"
               value="10"
             />
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
index 67ff0b5a64..fb0e77ad9d 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
@@ -194,9 +194,12 @@ exports[`Activities list view > renders as expected 1`] = `
 }
 
 .c9 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c9:disabled {
@@ -686,8 +689,7 @@ exports[`Activities list view > renders as expected 1`] = `
                   Show
                 </span>
                 <input
-                  class="c9 form-control form-control-sm"
-                  disabled=""
+                  class="c9 form-control"
                   type="number"
                   value="10"
                 />
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 667c1ba285..f63fdf2113 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
@@ -172,10 +172,7 @@ const PropertyContactList: React.FunctionComponent<IPropertyContactListProps> =
     <Table<ApiGen_Concepts_PropertyContact>
       name="PropertyContactsTable"
       manualSortBy={false}
-      lockPageSize={true}
-      manualPagination={true}
-      hidePagination
-      hideToolbar
+      manualPagination={false}
       totalItems={propertyContacts.length}
       columns={createContactTableColumns(onEdit, onDelete)}
       data={propertyContacts ?? []}
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
index ffed316537..6901073db1 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
@@ -197,6 +197,23 @@ exports[`PropertyContactListView component > renders as expected when provided v
   line-height: 2rem;
 }
 
+.c9 {
+  margin-top: 0.3rem;
+}
+
+.c10 {
+  min-width: 5rem;
+  max-width: 5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  text-align: center;
+  padding: 0;
+}
+
+.c10:disabled {
+  background: white;
+}
+
 .c4.c4 {
   display: inline-block;
   margin-left: 1.5rem;
@@ -494,6 +511,140 @@ exports[`PropertyContactListView component > renders as expected when provided v
           </div>
         </div>
       </div>
+      <div
+        class="row"
+      >
+        <div
+          class="align-self-center col-auto"
+        >
+          <span>
+            1 - 1 of 1
+          </span>
+        </div>
+        <div
+          class="ml-auto align-self-center col-auto"
+        />
+        <div
+          class="align-self-center col-auto"
+        >
+          <div
+            class="Menu-root"
+          >
+            <div
+              class="Menu-button"
+            >
+              <div
+                class="d-flex"
+              >
+                <span
+                  class="c9"
+                >
+                  Show
+                </span>
+                <input
+                  class="c10 form-control"
+                  type="number"
+                  value="10"
+                />
+                <span
+                  class="c9"
+                >
+                  Entries
+                </span>
+              </div>
+            </div>
+            <div
+              class="Menu-items"
+              style="width: 10.0rem;"
+            >
+              <div
+                class="Menu-options scrollable list-group"
+              >
+                <div
+                  class="Menu-item list-group-item"
+                  title="menu-item-5"
+                >
+                  5
+                </div>
+                <div
+                  class="Menu-item list-group-item"
+                  title="menu-item-10"
+                >
+                  10
+                </div>
+                <div
+                  class="Menu-item list-group-item"
+                  title="menu-item-20"
+                >
+                  20
+                </div>
+                <div
+                  class="Menu-item list-group-item"
+                  title="menu-item-50"
+                >
+                  50
+                </div>
+                <div
+                  class="Menu-item list-group-item"
+                  title="menu-item-100"
+                >
+                  100
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="align-self-center col-auto"
+        >
+          <ul
+            class="pagination"
+          >
+            <li
+              class="page-item disabled"
+            >
+              <a
+                aria-disabled="true"
+                aria-label="Previous page"
+                class="page-link "
+                rel="prev"
+                role="button"
+                tabindex="-1"
+              >
+                &lt;
+              </a>
+            </li>
+            <li
+              class="page-item active"
+            >
+              <a
+                aria-current="page"
+                aria-label="Page 1 is your current page"
+                class="page-link"
+                rel="canonical"
+                role="button"
+                tabindex="-1"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="page-item disabled"
+            >
+              <a
+                aria-disabled="true"
+                aria-label="Next page"
+                class="page-link "
+                rel="next"
+                role="button"
+                tabindex="-1"
+              >
+                &gt;
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
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 5ffb1baff0..9887714418 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
@@ -636,9 +636,12 @@ exports[`Note Results Table > matches snapshot 1`] = `
 }
 
 .c1 {
-  width: 7.5rem;
+  min-width: 5rem;
+  max-width: 5rem;
   margin-left: 1rem;
   margin-right: 1rem;
+  text-align: center;
+  padding: 0;
 }
 
 .c1:disabled {
@@ -676,8 +679,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
               Show
             </span>
             <input
-              class="c1 form-control form-control-sm"
-              disabled=""
+              class="c1 form-control"
               type="number"
               value="10"
             />