fix: Add top-tier icons

pinterest · Aug 2, 2024 · 5aac462 · 5aac462
1 parent dd50b5d
commit 5aac462
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 22 deletions.
diff --git 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
@@ -320,6 +320,7 @@ const TableRow: React.FC<{
             onClick={handleLinkClick}
             isRow
             title={table.displayName}
+            icon={table.golden === true ? 'Crown' : null}
         />
     );
 

diff --git a/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx b/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx
@@ -23,6 +23,8 @@ import { Title } from 'ui/Title/Title';
 import { ToggleSwitch } from 'ui/ToggleSwitch/ToggleSwitch';
 
 import './DataTableNavigatorSearch.scss';
+import { Icon } from 'ui/Icon/Icon';
+import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown';
 
 export const DataTableNavigatorSearch: React.FC<{
     queryMetastore: IQueryMetastore;
@@ -95,15 +97,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 />
+                        </div>
                     </SearchFilterRow>
                     <SearchFilterRow title="Schema">
                         <SearchBar

diff --git a/querybook/webapp/components/DataTableView/DataTableHeader.tsx b/querybook/webapp/components/DataTableView/DataTableHeader.tsx
@@ -29,6 +29,8 @@ import { Tag } from 'ui/Tag/Tag';
 import { ToggleButton } from 'ui/ToggleButton/ToggleButton';
 
 import './DataTableHeader.scss';
+import { Icon } from 'ui/Icon/Icon';
+import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown';
 
 export interface IDataTableHeader {
     table: IDataTable;
@@ -89,10 +91,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 />
+            </Tag>
+        );
     }
 
     const iconDOM = (

diff --git a/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx b/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx
@@ -14,6 +14,8 @@ import { Loader } from 'ui/Loader/Loader';
 
 import { ColumnIcon } from './ColumnIcon';
 import { PanelSection, SubPanelSection } from './PanelSection';
+import { Icon } from 'ui/Icon/Icon';
+import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown';
 
 interface ITablePanelViewProps {
     tableId: number;
@@ -38,7 +40,12 @@ 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} />}
+                    </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
@@ -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
@@ -67,6 +67,7 @@ import { SearchSchemaSelect } from './SearchSchemaSelect';
 import { TableSelect } from './TableSelect';
 
 import './SearchOverview.scss';
+import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown';
 
 const AIAssistantConfig = PublicConfig.ai_assistant;
 
@@ -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
@@ -29,6 +29,7 @@ import { Tag } from 'ui/Tag/Tag';
 import { SearchResultItemBoardItemAddButton } from './SearchResultItemBoardItemAddButton';
 
 import './SearchResultItem.scss';
+import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown';
 
 const HighlightTitle: React.FunctionComponent<{
     title: string;
@@ -379,9 +380,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/components/TopTierCrown/TopTierCrown.scss b/querybook/webapp/components/TopTierCrown/TopTierCrown.scss
@@ -0,0 +1,7 @@
+.TopTierCrown {
+    svg {
+        color: var(--color-accent);
+        height: 16px;
+        stroke-width: 2.5px;
+    }
+}
diff --git a/querybook/webapp/components/TopTierCrown/TopTierCrown.tsx b/querybook/webapp/components/TopTierCrown/TopTierCrown.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import './TopTierCrown.scss';
+import { Icon } from 'ui/Icon/Icon';
+
+export const TopTierCrown: React.FunctionComponent<{
+    showTooltip?: boolean;
+    tooltipPos?: string;
+}> = ({ showTooltip = false, tooltipPos = 'down' }) => {
+    if (showTooltip) {
+        return (
+            <span
+                className="TopTierCrown flex-row"
+                aria-label="Top Tier"
+                data-balloon-pos={tooltipPos}
+            >
+                <Icon className="ml4" name="Crown" />
+            </span>
+        );
+    } else {
+        return <Icon className="TopTierCrown ml4" name="Crown" />;
+    }
+};
diff --git 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 {