fix(ui): Minor UX improvements for Query Tab (#15074)

Author: sakethvarma397

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/shared/TopUsersFacepile.tsx

@@ -15,9 +15,10 @@ export type Props = {
 };
 
 export default function TopUsersFacepile({ users, max, checkExistence = true }: Props) {
+    const entityRegistry = useEntityRegistry();
     const displayedUsers = users.filter((user) => userExists(user));
     const usersList = checkExistence ? displayedUsers : users;
-    const entityRegistry = useEntityRegistry();
+    if (!usersList?.length) return <div>-</div>;
     return (
         <Avatar.Group maxCount={max}>
             {usersList?.map((user) => {

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Queries/QueriesListSection.tsx

@@ -141,7 +141,7 @@ export default function QueriesListSection({
         createdByColumn,
         createdDateColumn,
         powersColumn,
-        usedByColumn,
+        topUsersColumn,
         columnsColumn,
         editColumn,
     } = useQueryTableColumns({
@@ -165,7 +165,7 @@ export default function QueriesListSection({
         editColumn,
     ];
 
-    const popularQueriesColumns = [queryTextColumn(), usedByColumn, columnsColumn];
+    const popularQueriesColumns = [queryTextColumn(), topUsersColumn, columnsColumn];
 
     const downstreamQueriesColumns = [queryTextColumn(550), powersColumn];
 

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Queries/queryColumns.tsx

@@ -180,13 +180,9 @@ interface ColumnProps {
     query: Query;
 }
 
-const ColumnsWrapper = styled.div`
-    text-align: right;
-`;
-
 /*
  * Columns Column
  */
 export const ColumnsColumn = ({ query }: ColumnProps) => {
-    return <ColumnsWrapper>{query.columns?.length ?? 0}</ColumnsWrapper>;
+    return <div>{query.columns?.length ?? 0}</div>;
 };

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Queries/useQueryTableColumns.tsx

@@ -145,8 +145,8 @@ export default function useQueryTableColumns({
         },
     };
 
-    const usedByColumn = {
-        title: 'Used By',
+    const topUsersColumn = {
+        title: 'Top Users',
         dataIndex: 'usedBy',
         key: 'usedBy',
         className: 'usedBy',
@@ -195,7 +195,7 @@ export default function useQueryTableColumns({
         createdByColumn,
         createdDateColumn,
         powersColumn,
-        usedByColumn,
+        topUsersColumn,
         columnsColumn,
         editColumn,
     };