From 51581ea27e43472f86a5ec28573d3aae2d839e8a Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Thu, 14 Sep 2023 10:07:47 +1200
Subject: [PATCH] Profile: hide email pagination controls when no other pages
 (#1764)

* make add email button small

* hide pagination when only one page of emails

* add autohide to paginationcontrols
---
 frontend/src/components/PaginationControls.tsx     |  6 ++++++
 .../src/components/UserProfile/AddEmailForm.tsx    |  4 +++-
 .../src/components/UserProfile/UserEmailList.tsx   | 14 ++++++++------
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/PaginationControls.tsx b/frontend/src/components/PaginationControls.tsx
index 0359bca99..e2df45b61 100644
--- a/frontend/src/components/PaginationControls.tsx
+++ b/frontend/src/components/PaginationControls.tsx
@@ -17,6 +17,8 @@ import { Button } from "@vector-im/compound-web";
 type Props = {
   onNext: (() => void) | null;
   onPrev: (() => void) | null;
+  // automatically hide the component when there are no onNext/onPrev
+  autoHide?: boolean;
   count?: number;
   disabled?: boolean;
 };
@@ -24,9 +26,13 @@ type Props = {
 const PaginationControls: React.FC<Props> = ({
   onNext,
   onPrev,
+  autoHide,
   count,
   disabled,
 }) => {
+  if (autoHide && !onNext && !onPrev) {
+    return null;
+  }
   return (
     <div className="grid items-center grid-cols-3 gap-2">
       <Button
diff --git a/frontend/src/components/UserProfile/AddEmailForm.tsx b/frontend/src/components/UserProfile/AddEmailForm.tsx
index 315220fd8..600e2100e 100644
--- a/frontend/src/components/UserProfile/AddEmailForm.tsx
+++ b/frontend/src/components/UserProfile/AddEmailForm.tsx
@@ -113,7 +113,9 @@ const AddEmailForm: React.FC<{
           <Label>Add email</Label>
           <Control disabled={pending} inputMode="email" ref={fieldRef} />
         </Field>
-        <Submit disabled={pending}>Add</Submit>
+        <Submit size="sm" disabled={pending}>
+          Add
+        </Submit>
       </Root>
     </>
   );
diff --git a/frontend/src/components/UserProfile/UserEmailList.tsx b/frontend/src/components/UserProfile/UserEmailList.tsx
index 98a793e66..55c2f42c3 100644
--- a/frontend/src/components/UserProfile/UserEmailList.tsx
+++ b/frontend/src/components/UserProfile/UserEmailList.tsx
@@ -160,12 +160,6 @@ const UserEmailList: React.FC<{
   return (
     <BlockList>
       <H3>Emails</H3>
-      <PaginationControls
-        count={result.data?.user?.emails?.totalCount ?? 0}
-        onPrev={prevPage ? (): void => paginate(prevPage) : null}
-        onNext={nextPage ? (): void => paginate(nextPage) : null}
-        disabled={pending}
-      />
       {showNoPrimaryEmailAlert && (
         <Alert type="critical" title="No primary email address" />
       )}
@@ -178,6 +172,14 @@ const UserEmailList: React.FC<{
           onRemove={onRemove}
         />
       ))}
+
+      <PaginationControls
+        autoHide
+        count={result.data?.user?.emails?.totalCount ?? 0}
+        onPrev={prevPage ? (): void => paginate(prevPage) : null}
+        onNext={nextPage ? (): void => paginate(nextPage) : null}
+        disabled={pending}
+      />
       <AddEmailForm userId={userId} onAdd={onAdd} />
     </BlockList>
   );