From a2667562c7d4c807db2eaa88ecf2757e74de9ca5 Mon Sep 17 00:00:00 2001
From: zachliu <zach.z.liu@gmail.com>
Date: Wed, 30 Apr 2025 09:34:15 -0400
Subject: [PATCH] make "Created By" sortable like others

for better UX such as finding the query authors
---
 client/app/assets/less/inc/base.less          | 20 +++++++++++++++++--
 client/app/assets/less/inc/table.less         |  1 +
 .../items-list/components/ItemsTable.jsx      | 17 +++++++++-------
 client/app/pages/queries-list/QueriesList.jsx |  2 +-
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/client/app/assets/less/inc/base.less b/client/app/assets/less/inc/base.less
index 14a37f3470..bace595cca 100755
--- a/client/app/assets/less/inc/base.less
+++ b/client/app/assets/less/inc/base.less
@@ -171,8 +171,24 @@ text.slicetext {
   border-radius: 100%;
   margin-right: 3px;
   margin-top: -2px;
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.profile__figure_thumb {
+  display: flex;
+  flex-flow: table;
+  margin: auto;
+  align-items: center;
+}
+
+.profile__figcaption_thumb {
+  text-align: center;
+  padding-left: 5px;
+  margin: auto;
+  white-space: nowrap;
 }
 
 // Error state
diff --git a/client/app/assets/less/inc/table.less b/client/app/assets/less/inc/table.less
index b610686925..3e3d326d7c 100755
--- a/client/app/assets/less/inc/table.less
+++ b/client/app/assets/less/inc/table.less
@@ -101,6 +101,7 @@
 
   tbody > tr > td {
     padding-top: 5px !important;
+    white-space: nowrap;
   }
 
   .btn-favorite,
diff --git a/client/app/components/items-list/components/ItemsTable.jsx b/client/app/components/items-list/components/ItemsTable.jsx
index 496bb3c8cd..0ffd7b1bc0 100644
--- a/client/app/components/items-list/components/ItemsTable.jsx
+++ b/client/app/components/items-list/components/ItemsTable.jsx
@@ -28,14 +28,16 @@ export const Columns = {
     formatTitle = isFunction(formatTitle) ? formatTitle : identity;
     return extend(
       {
-        width: "1%",
         render: (user, item) => (
-          <img
-            src={item.user.profile_image_url}
-            className="profile__image_thumb"
-            alt={formatTitle(user.name, item)}
-            title={formatTitle(user.name, item)}
-          />
+          <figure className="profile__figure_thumb">
+            <img
+              src={item.user.profile_image_url}
+              className="profile__image_thumb"
+              alt={formatTitle(user.name, item)}
+              title={formatTitle(user.name, item)}
+            />
+            <figcaption className="profile__figcaption_thumb">{user.name}</figcaption>
+          </figure>
         ),
       },
       overrides
@@ -86,6 +88,7 @@ export const Columns = {
 };
 
 Columns.date.sortable = sortable;
+Columns.avatar.sortable = sortable;
 Columns.dateTime.sortable = sortable;
 Columns.duration.sortable = sortable;
 Columns.timeAgo.sortable = sortable;
diff --git a/client/app/pages/queries-list/QueriesList.jsx b/client/app/pages/queries-list/QueriesList.jsx
index 2a200e98b4..0902b4d1b2 100644
--- a/client/app/pages/queries-list/QueriesList.jsx
+++ b/client/app/pages/queries-list/QueriesList.jsx
@@ -72,7 +72,7 @@ const listColumns = [
       width: null,
     }
   ),
-  Columns.custom((text, item) => item.user.name, { title: "Created By", width: "1%" }),
+  Columns.avatar.sortable({ title: "Created By", field: "user", orderByField: "created_by", width: "1%" }),
   Columns.dateTime.sortable({ title: "Created At", field: "created_at", width: "1%" }),
   Columns.dateTime.sortable({
     title: "Last Executed At",