enhance(dev-dashboard): reuse Paginator molecule in flaws and translation dashboards (#9319)

* Use Paginator molecule in flaws and translation dashboards

* Synchronize sorting appearance

* Fix missing variable

* Remove now unused component

Author: queengooborg

Diff for: client/src/flaws/index.scss

@@ -55,7 +55,8 @@
       color: var(--text-inactive);
     }
 
-    a {
+    a,
+    .current-page {
       padding: 10px;
     }
   }

Diff for: client/src/flaws/index.tsx

@@ -6,6 +6,7 @@ import "./index.scss";
 
 import { humanizeFlawName } from "../flaw-utils";
 import { MainContentContainer } from "../ui/atoms/page-content";
+import { Paginator } from "../ui/molecules/paginator";
 import { useLocale } from "../hooks";
 
 interface DocumentPopularity {
@@ -578,7 +579,7 @@ function DocumentsTable({
     return (
       <th onClick={() => setSort(id)} className="sortable">
         {title}{" "}
-        {filters.sort_by === id ? (filters.sort_reverse ? "🔽" : "🔼") : null}
+        {filters.sort_by === id ? (filters.sort_reverse ? "↓" : "↑") : null}
       </th>
     );
   }
@@ -682,59 +683,11 @@ function DocumentsTable({
         </tbody>
       </table>
 
-      {pageCount > 1 && (
-        <p className="pagination">
-          <PageLink number={1} disabled={page === 1}>
-            ⇤ First page
-          </PageLink>{" "}
-          {page > 2 && <PageLink number={page - 1}>← Previous page</PageLink>}{" "}
-          {page}{" "}
-          {page < pageCount - 1 && (
-            <PageLink number={page + 1} disabled={page + 1 > pageCount}>
-              Next page →
-            </PageLink>
-          )}
-          <PageLink number={pageCount} disabled={page === pageCount}>
-            Last page ({pageCount}) ⇥
-          </PageLink>
-        </p>
-      )}
+      <Paginator last={pageCount} />
     </div>
   );
 }
 
-function PageLink({
-  number,
-  disabled,
-  children,
-}: {
-  number: number;
-  disabled?: boolean;
-  children: React.ReactNode;
-}) {
-  const [filters] = useFiltersURL();
-  // Unfortunately TS's Partial<T> is not quite the right return type of this function,
-  // as it implies the object could have keys set to undefined, which isn't true here.
-  // Hence we have to use type coercion (any)
-  const newFilters = withoutDefaultFilters({ ...filters, page: number }) as any;
-  if (newFilters.page) {
-    newFilters.page = String(newFilters.page);
-  }
-  return (
-    <Link
-      to={"?" + createSearchParams(newFilters).toString()}
-      className={disabled ? "disabled" : ""}
-      onClick={(event) => {
-        if (disabled) {
-          event.preventDefault();
-        }
-      }}
-    >
-      {children}
-    </Link>
-  );
-}
-
 function WarnAboutNothingBuilt({ locale }) {
   return (
     <div className="notecard warning document-warnings">

Diff for: client/src/translations/differences/index.scss

@@ -4,21 +4,27 @@
     margin: 25px 0;
     padding: 10px;
 
-    h3,
     h4 {
       margin-top: 0;
     }
 
-    h3 span.page {
-      color: #666;
-      margin-left: 10px;
-    }
-
     p {
       margin-bottom: 3px;
     }
   }
 
+  h3 {
+    margin-top: 0;
+  }
+
+  h3 span.page {
+    color: var(--text-inactive);
+  }
+
+  h4.subheader {
+    margin-top: 2px;
+  }
+
   .loading {
     margin: 200px;
     text-align: center;
@@ -33,22 +39,14 @@
   table {
     width: 100%;
 
-    th.sortable.active {
-      background-color: rgb(237, 237, 237);
-    }
-
-    th.sortable.active.reverse {
-      transform: rotate(-180deg);
-    }
-
     td a .url-prefix {
       color: rgb(159, 159, 159);
       font-size: 80%;
       margin-right: 2px;
     }
 
     td .document-title-preview {
-      // color: rgb(118, 118, 118);
+      /* color: rgb(118, 118, 118); */
     }
 
     td .last_modified.ahead a {
@@ -80,17 +78,20 @@
       color: rgb(159, 159, 159);
     }
 
-    a {
+    a,
+    .current-page {
       padding: 10px;
     }
   }
 
   div.filter-documents {
-    .filters {
-      // XXX Can someone please turn this into a CSS grid
-      float: left;
-      width: 300px;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 300px 1fr;
+    margin: auto;
+    width: calc(100% - 40px);
 
+    .filters {
       h4 {
         border-bottom: 1px solid #efefef;
         margin-bottom: 10px;
@@ -106,8 +107,6 @@
     }
 
     .documents {
-      margin-left: 300px;
-
       h4.subheader {
         margin-top: 2px;
       }

Diff for: client/src/translations/differences/index.tsx

@@ -12,6 +12,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import "./index.scss";
 
 import { MainContentContainer } from "../../ui/atoms/page-content";
+import { Paginator } from "../../ui/molecules/paginator";
 import { useLocale } from "../../hooks";
 
 dayjs.extend(relativeTime);
@@ -230,6 +231,7 @@ export function TranslationDifferences() {
         <div className="filter-documents">
           <FilterControls />
           <DocumentsTable
+            locale={locale}
             counts={lastData.counts}
             documents={lastData.documents}
             sort={sort}
@@ -483,11 +485,13 @@ function matchNumericOperation(value: number, op: NumericOperation): boolean {
 }
 
 function DocumentsTable({
+  locale,
   counts,
   documents,
   sort,
   sortReverse,
 }: {
+  locale: string;
   counts: Counts;
   documents: Document[];
   sort: string;
@@ -517,11 +521,9 @@ function DocumentsTable({
             setSearchParams(createSearchParams({ sort: id }));
           }
         }}
-        className={`sortable ${sort === id ? "active" : ""} ${
-          sort === id && sortReverse ? "reverse" : ""
-        }`}
+        className="sortable"
       >
-        {title}
+        {title} {sort === id ? (sortReverse ? "↓" : "↑") : null}
       </th>
     );
   }
@@ -589,10 +591,17 @@ function DocumentsTable({
   return (
     <div className="documents">
       <h3>
-        Documents found ({filteredDocuments.length.toLocaleString()}){" "}
-        {page > 1 && <span className="page">page {page}</span>}{" "}
-        <small>of {counts.total.toLocaleString()} in total</small>
+        Documents with differences found (
+        {filteredDocuments.length.toLocaleString()}){" "}
+        {pageCount > 1 && (
+          <span className="page">
+            page {page}/{pageCount}
+          </span>
+        )}
       </h3>
+      <h4 className="subheader">
+        {counts.total.toLocaleString()} total documents found ({locale})
+      </h4>
 
       {filterDifferences && !filterDifferencesOperation && (
         <div className="error-message">
@@ -678,19 +687,8 @@ function DocumentsTable({
             })}
         </tbody>
       </table>
-      {pageCount > 1 && (
-        <p className="pagination">
-          <PageLink number={1} disabled={page === 1}>
-            First page
-          </PageLink>{" "}
-          {page > 2 && (
-            <PageLink number={page - 1}>Previous page ({page - 1})</PageLink>
-          )}{" "}
-          <PageLink number={page + 1} disabled={page + 1 > pageCount}>
-            Next page ({page + 1})
-          </PageLink>
-        </p>
-      )}
+
+      <Paginator last={pageCount} />
     </div>
   );
 }
@@ -797,38 +795,3 @@ function getGetOrdinal(n: number) {
   const v = n % 100;
   return n.toLocaleString() + (s[(v - 20) % 10] || s[v] || s[0]);
 }
-
-function PageLink({
-  number,
-  disabled,
-  children,
-}: {
-  number: number;
-  disabled?: boolean;
-  children: React.ReactNode;
-}) {
-  const [searchParams] = useSearchParams();
-  const params = createSearchParams(searchParams);
-  if (number > 1) {
-    params.set("page", `${number}`);
-  } else {
-    params.delete("page");
-  }
-  return (
-    <Link
-      to={"?" + params.toString()}
-      className={disabled ? "disabled" : ""}
-      onClick={(event) => {
-        if (disabled) {
-          event.preventDefault();
-        }
-        const top = document.querySelector("div.all-translations");
-        if (top) {
-          top.scrollIntoView({ behavior: "smooth" });
-        }
-      }}
-    >
-      {children}
-    </Link>
-  );
-}

Diff for: client/src/translations/missing/index.tsx

@@ -10,6 +10,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { MainContentContainer } from "../../ui/atoms/page-content";
+import { Paginator } from "../../ui/molecules/paginator";
 import { useLocale } from "../../hooks";
 
 dayjs.extend(relativeTime);
@@ -495,11 +496,9 @@ function DocumentsTable({
             setSearchParams(createSearchParams({ sort: id }));
           }
         }}
-        className={`sortable ${sort === id ? "active" : ""} ${
-          sort === id && sortReverse ? "reverse" : ""
-        }`}
+        className="sortable"
       >
-        {title}
+        {title} {sort === id ? (sortReverse ? "↓" : "↑") : null}
       </th>
     );
   }
@@ -622,19 +621,8 @@ function DocumentsTable({
             })}
         </tbody>
       </table>
-      {pageCount > 1 && (
-        <p className="pagination">
-          <PageLink number={1} disabled={page === 1}>
-            First page
-          </PageLink>{" "}
-          {page > 2 && (
-            <PageLink number={page - 1}>Previous page ({page - 1})</PageLink>
-          )}{" "}
-          <PageLink number={page + 1} disabled={page + 1 > pageCount}>
-            Next page ({page + 1})
-          </PageLink>
-        </p>
-      )}
+
+      <Paginator last={pageCount} />
     </div>
   );
 }
@@ -702,38 +690,3 @@ function getGetOrdinal(n: number) {
   const v = n % 100;
   return n.toLocaleString() + (s[(v - 20) % 10] || s[v] || s[0]);
 }
-
-function PageLink({
-  number,
-  disabled,
-  children,
-}: {
-  number: number;
-  disabled?: boolean;
-  children: React.ReactNode;
-}) {
-  const [searchParams] = useSearchParams();
-  const params = createSearchParams(searchParams);
-  if (number > 1) {
-    params.set("page", `${number}`);
-  } else {
-    params.delete("page");
-  }
-  return (
-    <Link
-      to={"?" + params.toString()}
-      className={disabled ? "disabled" : ""}
-      onClick={(event) => {
-        if (disabled) {
-          event.preventDefault();
-        }
-        const top = document.querySelector("div.all-translations");
-        if (top) {
-          top.scrollIntoView({ behavior: "smooth" });
-        }
-      }}
-    >
-      {children}
-    </Link>
-  );
-}