make "Created By" sortable like others

for better UX such as finding the query authors

Author: zachliu

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

client/app/assets/less/inc/table.less

@@ -101,6 +101,7 @@
 
   tbody > tr > td {
     padding-top: 5px !important;
+    white-space: nowrap;
   }
 
   .btn-favorite,

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;

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",