From 5e77e683521e860f8aa6ca0c2d165ea0ce662661 Mon Sep 17 00:00:00 2001
From: John Joyce <john@acryl.io>
Date: Fri, 24 Feb 2023 16:04:23 -0800
Subject: [PATCH] feat(queries): Adding Tooltips to Queries Tab (#7421)

---
 .../Dataset/Queries/QueriesListSection.tsx    | 45 ++++++++++++++-----
 .../tabs/Dataset/Queries/QueriesTab.tsx       |  2 +
 .../Dataset/Queries/QueriesTabToolbar.tsx     |  5 ++-
 .../tabs/Dataset/Queries/QueryCardQuery.tsx   |  2 +-
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx
index 0e1c6b26aa..742cb3ee50 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx
@@ -1,14 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Pagination, Typography } from 'antd';
+import { Pagination, Tooltip, Typography } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import QueriesList from './QueriesList';
 import { Query } from './types';
 import { DEFAULT_PAGE_SIZE } from './utils/constants';
 import { getQueriesForPage } from './utils/getCurrentPage';
+import { ANTD_GRAY } from '../../../constants';
+
+const QueriesTitleSection = styled.div`
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+`;
 
 const QueriesTitle = styled(Typography.Title)`
     && {
-        margin-bottom: 20px;
+        margin: 0px;
     }
 `;
 
@@ -20,9 +28,16 @@ const StyledPagination = styled(Pagination)`
     justify-content: center;
 `;
 
+const StyledInfoOutlined = styled(InfoCircleOutlined)`
+    margin-left: 8px;
+    font-size: 12px;
+    color: ${ANTD_GRAY[7]};
+`;
+
 type Props = {
     title: string;
     queries: Query[];
+    tooltip?: string;
     initialPage?: number;
     initialPageSize?: number;
     showDetails?: boolean;
@@ -34,6 +49,7 @@ type Props = {
 
 export default function QueriesListSection({
     title,
+    tooltip,
     queries,
     initialPage = 1,
     initialPageSize = DEFAULT_PAGE_SIZE,
@@ -55,18 +71,27 @@ export default function QueriesListSection({
      */
     const headerRef = useRef(null);
     useEffect(() => {
-        (headerRef?.current as any)?.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-            inline: 'nearest',
-        });
+        if (page !== 1) {
+            (headerRef?.current as any)?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+                inline: 'nearest',
+            });
+        }
     }, [page]);
 
     return (
         <>
-            <QueriesTitle ref={headerRef} level={4}>
-                {title}
-            </QueriesTitle>
+            <QueriesTitleSection>
+                <QueriesTitle ref={headerRef} level={4}>
+                    {title}
+                </QueriesTitle>
+                {tooltip && (
+                    <Tooltip title={tooltip}>
+                        <StyledInfoOutlined />
+                    </Tooltip>
+                )}
+            </QueriesTitleSection>
             <QueriesList
                 queries={paginatedQueries}
                 showDelete={showDelete}
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTab.tsx
index d7058bac3a..94af5d8f48 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTab.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTab.tsx
@@ -106,6 +106,7 @@ export default function QueriesTab() {
                 {highlightedQueries.length > 0 && (
                     <QueriesListSection
                         title="Highlighted Queries"
+                        tooltip="Shared queries relevant to this dataset"
                         queries={highlightedQueries}
                         showEdit
                         showDelete
@@ -116,6 +117,7 @@ export default function QueriesTab() {
                 {recentQueries.length > 0 && (
                     <QueriesListSection
                         title="Recent Queries"
+                        tooltip="Queries that have been recently run against this dataset"
                         queries={recentQueries}
                         showDetails={false}
                         showDelete={false}
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx
index f3750d973f..85fb011bc8 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesTabToolbar.tsx
@@ -19,7 +19,10 @@ type Props = {
 export default function QueriesTabToolbar({ addQueryDisabled, onAddQuery, onChangeSearch }: Props) {
     return (
         <TabToolbar>
-            <Tooltip title={(addQueryDisabled && ADD_UNAUTHORIZED_MESSAGE) || undefined}>
+            <Tooltip
+                placement="right"
+                title={(addQueryDisabled && ADD_UNAUTHORIZED_MESSAGE) || 'Add a highlighted query'}
+            >
                 <Button disabled={addQueryDisabled} type="text" onClick={onAddQuery} data-testid="add-query-button">
                     <PlusOutlined /> Add Query
                 </Button>
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx
index 4b0c4b813c..f7a61993f8 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx
@@ -5,7 +5,7 @@ import { ANTD_GRAY } from '../../../constants';
 
 const Statement = styled.div<{ fullHeight?: boolean }>`
     background-color: ${ANTD_GRAY[2]};
-    height: ${(props) => (props.fullHeight && '380px') || '240px'};
+    height: ${(props) => (props.fullHeight && '378px') || '240px'};
     margin: 0px 0px 4px 0px;
     border-radius: 8px;
     :hover {