From d106e2ea34e4a481e48492342101f99620c4efbf Mon Sep 17 00:00:00 2001
From: Dave Bauman <dbauman@expediagroup.com>
Date: Mon, 4 Nov 2024 14:43:16 -0500
Subject: [PATCH] feat: Add top-tier icons (#1483)

* feat: Add top-tier icons

* fix: PR fixes
---
 .../server/lib/elasticsearch/search_table.py  |  2 +-
 .../DataTableNavigator/DataTableNavigator.tsx |  1 +
 .../DataTableNavigatorSearch.tsx              | 22 ++++++++++-------
 .../DataTableView/DataTableHeader.tsx         |  8 ++++++-
 .../DataTableViewMini/TablePanelView.tsx      | 10 +++++++-
 .../components/Search/SearchOverview.scss     |  6 -----
 .../components/Search/SearchOverview.tsx      |  3 ++-
 .../components/Search/SearchResultItem.tsx    |  6 ++---
 .../webapp/redux/dataTableSearch/types.ts     |  1 +
 .../webapp/ui/TopTierCrown/TopTierCrown.scss  |  7 ++++++
 .../webapp/ui/TopTierCrown/TopTierCrown.tsx   | 24 +++++++++++++++++++
 11 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 querybook/webapp/ui/TopTierCrown/TopTierCrown.scss
 create mode 100644 querybook/webapp/ui/TopTierCrown/TopTierCrown.tsx

diff --git a/querybook/server/lib/elasticsearch/search_table.py b/querybook/server/lib/elasticsearch/search_table.py
index d080eb497..cc785335e 100644
--- a/querybook/server/lib/elasticsearch/search_table.py
+++ b/querybook/server/lib/elasticsearch/search_table.py
@@ -116,7 +116,7 @@ def construct_tables_query(
     }
 
     if concise:
-        query["_source"] = ["id", "schema", "name"]
+        query["_source"] = ["id", "schema", "name", "golden"]
 
     query.update(order_by_fields(sort_key, sort_order))
     query.update(
diff --git a/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx b/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx
index dfe4a9039..bcf2f0b9a 100644
--- a/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx
+++ b/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx
@@ -320,6 +320,7 @@ const TableRow: React.FC<{
             onClick={handleLinkClick}
             isRow
             title={table.displayName}
+            icon={table.golden ? 'Crown' : null}
         />
     );
 
diff --git a/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx b/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx
index 8e2d5ceda..8af7e0972 100644
--- a/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx
+++ b/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx
@@ -21,6 +21,7 @@ import { Popover } from 'ui/Popover/Popover';
 import { SearchBar } from 'ui/SearchBar/SearchBar';
 import { Title } from 'ui/Title/Title';
 import { ToggleSwitch } from 'ui/ToggleSwitch/ToggleSwitch';
+import { TopTierCrown } from 'ui/TopTierCrown/TopTierCrown';
 
 import './DataTableNavigatorSearch.scss';
 
@@ -95,15 +96,18 @@ export const DataTableNavigatorSearch: React.FC<{
                         title="Top Tier"
                         className="toggle-padding"
                     >
-                        <ToggleSwitch
-                            checked={searchFilters.golden}
-                            onChange={(checked) =>
-                                updateSearchFilter(
-                                    'golden',
-                                    checked ? true : null
-                                )
-                            }
-                        />
+                        <div className="flex-row">
+                            <ToggleSwitch
+                                checked={searchFilters.golden}
+                                onChange={(checked) =>
+                                    updateSearchFilter(
+                                        'golden',
+                                        checked ? true : null
+                                    )
+                                }
+                            />
+                            <TopTierCrown className="ml4" />
+                        </div>
                     </SearchFilterRow>
                     <SearchFilterRow title="Schema">
                         <SearchBar
diff --git a/querybook/webapp/components/DataTableView/DataTableHeader.tsx b/querybook/webapp/components/DataTableView/DataTableHeader.tsx
index 7a323d126..2b987941b 100644
--- a/querybook/webapp/components/DataTableView/DataTableHeader.tsx
+++ b/querybook/webapp/components/DataTableView/DataTableHeader.tsx
@@ -27,6 +27,7 @@ import { CommentButton } from 'ui/Comment/CommentButton';
 import { AccentText } from 'ui/StyledText/StyledText';
 import { Tag } from 'ui/Tag/Tag';
 import { ToggleButton } from 'ui/ToggleButton/ToggleButton';
+import { TopTierCrown } from 'ui/TopTierCrown/TopTierCrown';
 
 import './DataTableHeader.scss';
 
@@ -89,10 +90,15 @@ export const DataTableHeader: React.FunctionComponent<IDataTableHeader> = ({
                 onClick={updateDataTableGolden}
                 title={table.golden ? 'Top Tier' : 'Make Top Tier'}
                 size="small"
+                icon="Crown"
             />
         );
     } else if (table.golden) {
-        featuredBadge = <Tag>Top Tier</Tag>;
+        featuredBadge = (
+            <Tag>
+                Top Tier <TopTierCrown className="ml4" />
+            </Tag>
+        );
     }
 
     const iconDOM = (
diff --git a/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx b/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx
index f4dc5addf..8e9c96aba 100644
--- a/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx
+++ b/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx
@@ -11,6 +11,7 @@ import { getHumanReadableByteSize } from 'lib/utils/number';
 import { IconButton } from 'ui/Button/IconButton';
 import { AllLucideIconNames } from 'ui/Icon/LucideIcons';
 import { Loader } from 'ui/Loader/Loader';
+import { TopTierCrown } from 'ui/TopTierCrown/TopTierCrown';
 
 import { ColumnIcon } from './ColumnIcon';
 import { PanelSection, SubPanelSection } from './PanelSection';
@@ -38,7 +39,14 @@ export const TablePanelView: React.FunctionComponent<ITablePanelViewProps> = ({
         const overviewSection = (
             <PanelSection title="table">
                 <SubPanelSection title="schema">{schema.name}</SubPanelSection>
-                <SubPanelSection title="name">{table.name}</SubPanelSection>
+                <SubPanelSection title="name">
+                    <span className="flex-row">
+                        {table.name}
+                        {table.golden && (
+                            <TopTierCrown showTooltip={true} className="ml4" />
+                        )}
+                    </span>
+                </SubPanelSection>
                 <SubPanelSection title="description" hideIfNoContent>
                     {table.description
                         ? (table.description as ContentState).getPlainText()
diff --git a/querybook/webapp/components/Search/SearchOverview.scss b/querybook/webapp/components/Search/SearchOverview.scss
index 625c1fedf..0c0bb7ebd 100644
--- a/querybook/webapp/components/Search/SearchOverview.scss
+++ b/querybook/webapp/components/Search/SearchOverview.scss
@@ -45,12 +45,6 @@
                 display: flex;
                 align-items: center;
             }
-
-            .crown svg {
-                color: var(--color-accent);
-                height: 16px;
-                stroke-width: 2.5px;
-            }
         }
 
         .Container-content {
diff --git a/querybook/webapp/components/Search/SearchOverview.tsx b/querybook/webapp/components/Search/SearchOverview.tsx
index ac41e7891..67b07eab6 100644
--- a/querybook/webapp/components/Search/SearchOverview.tsx
+++ b/querybook/webapp/components/Search/SearchOverview.tsx
@@ -54,6 +54,7 @@ import { SimpleReactSelect } from 'ui/SimpleReactSelect/SimpleReactSelect';
 import { AccentText, EmptyText } from 'ui/StyledText/StyledText';
 import { Tabs } from 'ui/Tabs/Tabs';
 import { ToggleSwitch } from 'ui/ToggleSwitch/ToggleSwitch';
+import { TopTierCrown } from 'ui/TopTierCrown/TopTierCrown';
 
 import { EntitySelect } from './EntitySelect';
 import { SearchDatePicker } from './SearchDatePicker';
@@ -752,7 +753,7 @@ export const SearchOverview: React.FC<ISearchOverviewProps> = ({
                     <div className="result-item-golden horizontal-space-between">
                         <span>
                             <span>top tier only</span>
-                            <Icon className="crown ml4" name="Crown" />
+                            <TopTierCrown />
                         </span>
                         <Checkbox
                             value={!!searchFilters.golden}
diff --git a/querybook/webapp/components/Search/SearchResultItem.tsx b/querybook/webapp/components/Search/SearchResultItem.tsx
index 5a5b4256f..382d6088d 100644
--- a/querybook/webapp/components/Search/SearchResultItem.tsx
+++ b/querybook/webapp/components/Search/SearchResultItem.tsx
@@ -20,11 +20,11 @@ import { Button } from 'ui/Button/Button';
 import { IconButton } from 'ui/Button/IconButton';
 import { ThemedCodeHighlight } from 'ui/CodeHighlight/ThemedCodeHighlight';
 import { UrlContextMenu } from 'ui/ContextMenu/UrlContextMenu';
-import { Icon } from 'ui/Icon/Icon';
 import { Level } from 'ui/Level/Level';
 import { LoadingRow } from 'ui/Loading/Loading';
 import { AccentText, StyledText, UntitledText } from 'ui/StyledText/StyledText';
 import { Tag } from 'ui/Tag/Tag';
+import { TopTierCrown } from 'ui/TopTierCrown/TopTierCrown';
 
 import { SearchResultItemBoardItemAddButton } from './SearchResultItemBoardItemAddButton';
 
@@ -379,9 +379,7 @@ export const DataTableItem: React.FunctionComponent<IDataTableItemProps> = ({
     );
 
     const goldenIcon = golden ? (
-        <div className="result-item-golden ml4">
-            <Icon className="crown" name="Crown" />
-        </div>
+        <TopTierCrown showTooltip={true} tooltipPos="right" />
     ) : null;
 
     const highlightedDescription = (preview.highlight || {}).description;
diff --git a/querybook/webapp/redux/dataTableSearch/types.ts b/querybook/webapp/redux/dataTableSearch/types.ts
index 524b3f903..e003d102b 100644
--- a/querybook/webapp/redux/dataTableSearch/types.ts
+++ b/querybook/webapp/redux/dataTableSearch/types.ts
@@ -14,6 +14,7 @@ export interface ITableSearchResult {
     id: number;
     schema: string;
     name: string;
+    golden?: boolean;
 }
 
 export interface ITableSearchFilters {
diff --git a/querybook/webapp/ui/TopTierCrown/TopTierCrown.scss b/querybook/webapp/ui/TopTierCrown/TopTierCrown.scss
new file mode 100644
index 000000000..510c62df0
--- /dev/null
+++ b/querybook/webapp/ui/TopTierCrown/TopTierCrown.scss
@@ -0,0 +1,7 @@
+.TopTierCrown {
+    svg {
+        color: var(--color-accent);
+        height: 16px;
+        stroke-width: 2.5px;
+    }
+}
diff --git a/querybook/webapp/ui/TopTierCrown/TopTierCrown.tsx b/querybook/webapp/ui/TopTierCrown/TopTierCrown.tsx
new file mode 100644
index 000000000..4252aac62
--- /dev/null
+++ b/querybook/webapp/ui/TopTierCrown/TopTierCrown.tsx
@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { Icon } from 'ui/Icon/Icon';
+
+import './TopTierCrown.scss';
+
+export const TopTierCrown: React.FunctionComponent<{
+    className?: string;
+    showTooltip?: boolean;
+    tooltipPos?: string;
+}> = ({ className, showTooltip = false, tooltipPos = 'down' }) => (
+    <span
+        className={clsx('TopTierCrown', 'flex-row', className)}
+        {...(showTooltip
+            ? {
+                  'data-balloon': 'Top Tier',
+                  'data-balloon-pos': tooltipPos,
+              }
+            : {})}
+    >
+        <Icon name="Crown" />
+    </span>
+);