fix(translations/dashboard): fix table sorting (#9910)

* sorting documents table only by allowed columns * improve code readability * fix table header sorting cursor, remove unused CSS class * improve looking of sorted table column header
mdn · Apr 19, 2024 · 2cd44e4 · 2cd44e4
1 parent 6c3a06a
commit 2cd44e4
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 47 deletions.
diff --git a/client/src/flaws/index.scss b/client/src/flaws/index.scss
@@ -3,10 +3,6 @@
     background-color: var(--background-warning);
   }
 
-  h3 {
-    margin-top: 0;
-  }
-
   h3 span.page {
     color: var(--text-inactive);
   }
@@ -66,7 +62,6 @@
     gap: 20px;
     grid-template-columns: 300px 1fr;
     margin: auto;
-    width: calc(100% - 40px);
 
     .filters {
       h4 {

diff --git a/client/src/translations/dashboard/index.tsx b/client/src/translations/dashboard/index.tsx
@@ -8,6 +8,7 @@ import {
 import useSWR from "swr";
 
 import { MainContentContainer } from "../../ui/atoms/page-content";
+import { Icon } from "../../ui/atoms/icon";
 import { useLocale } from "../../hooks";
 
 interface Data {
@@ -193,7 +194,7 @@ export function TranslationDashboard() {
       )}
       {error && <ShowError error={error} />}
       {lastData && (
-        <div className="filter-documents">
+        <div>
           <SectionHeader
             l10nKPIs={lastData.l10nKPIs}
             section={currentSection}
@@ -399,40 +400,62 @@ function DocumentsTable({
     return documentDetail;
   });
 
-  function TableHead({ id, title }: { id: string; title: string }) {
-    return (
-      <th
-        onClick={() => {
-          if (sort === id) {
-            setSearchParams(
-              createSearchParams({
-                sort: id,
-                sortReverse: JSON.stringify(!sortReverse),
-                section: currentSection,
-              })
-            );
-          } else {
-            setSearchParams(
-              createSearchParams({ sort: id, section: currentSection })
-            );
-          }
-        }}
-        className={`sortable ${sort === id ? "active" : ""} ${
-          sort === id && sortReverse ? "reverse" : ""
-        }`}
-      >
-        {title}
+  function TableHead({
+    id,
+    title,
+    sortable,
+  }: {
+    id: string;
+    title: string;
+    sortable?: boolean;
+  }) {
+    function getClassName() {
+      const className = ["sortable"];
+
+      if (sort === id) {
+        className.push("active");
+      }
+
+      if (sortReverse) {
+        className.push("reverse");
+      }
+
+      return className.join(" ");
+    }
+
+    function onClick() {
+      if (sort === id) {
+        setSearchParams(
+          createSearchParams({
+            sort: id,
+            sortReverse: JSON.stringify(!sortReverse),
+            section: currentSection,
+          })
+        );
+      } else {
+        setSearchParams(
+          createSearchParams({ sort: id, section: currentSection })
+        );
+      }
+    }
+
+    return sortable ? (
+      <th className={getClassName()} onClick={onClick}>
+        {title} <Icon name="small-arrow" />
       </th>
+    ) : (
+      <th>{title}</th>
     );
   }
 
   return (
     <section id="documents-table">
       <h3>List of direct subpages</h3>
+
       <table>
         <thead>
           <tr>
-            <TableHead id="url" title="Slug" />
+            <TableHead id="url" title="Slug" sortable />
             <TableHead id="enMDNURL" title="English doc on MDN" />
             <TableHead
               id="enCommitGHURL"
@@ -444,14 +467,20 @@ function DocumentsTable({
               id="localCommitGHURL"
               title="Localized doc commit on GitHub"
             />
-            <TableHead id="popularityEn" title="Popularity rank (en-US)" />
+            <TableHead
+              id="popularityEn"
+              title="Popularity rank (en-US)"
+              sortable
+            />
             <TableHead
               id="popularityLocale"
               title={`Popularity rank (${locale})`}
+              sortable
             />
-            <TableHead id="dateDiff" title="Date delta" />
+            <TableHead id="dateDiff" title="Date delta" sortable />
           </tr>
         </thead>
+
         <tbody>
           {documents
             .sort((A, B) => {

diff --git a/client/src/translations/differences/index.scss b/client/src/translations/differences/index.scss
@@ -13,10 +13,6 @@
     }
   }
 
-  h3 {
-    margin-top: 0;
-  }
-
   h3 span.page {
     color: var(--text-inactive);
   }
@@ -39,6 +35,21 @@
   table {
     width: 100%;
 
+    th.sortable {
+      cursor: pointer;
+    }
+
+    th.sortable.active {
+      background-color: var(--background-secondary);
+      color: var(--text-primary);
+    }
+
+    th.sortable.active.reverse {
+      .icon {
+        transform: rotate(-180deg);
+      }
+    }
+
     td a .url-prefix {
       color: rgb(159, 159, 159);
       font-size: 80%;
@@ -89,7 +100,6 @@
     gap: 20px;
     grid-template-columns: 300px 1fr;
     margin: auto;
-    width: calc(100% - 40px);
 
     .filters {
       h4 {
@@ -105,15 +115,5 @@
         }
       }
     }
-
-    .documents {
-      h4.subheader {
-        margin-top: 2px;
-      }
-
-      th.sortable {
-        cursor: ns-resize;
-      }
-    }
   }
 }