From e4d8094ff3a9ebbf1876722c9ba903fd9b9f9657 Mon Sep 17 00:00:00 2001 From: Dave Bauman Date: Thu, 25 Jul 2024 11:37:27 -0400 Subject: [PATCH 1/2] feat: Add top-tier icons --- .../server/lib/elasticsearch/search_table.py | 2 +- .../DataTableNavigator/DataTableNavigator.tsx | 1 + .../DataTableNavigatorSearch.tsx | 23 +++++++++++-------- .../DataTableView/DataTableHeader.tsx | 9 +++++++- .../DataTableViewMini/TablePanelView.tsx | 9 +++++++- .../components/Search/SearchOverview.scss | 6 ----- .../components/Search/SearchOverview.tsx | 3 ++- .../components/Search/SearchResultItem.tsx | 5 ++-- .../components/TopTierCrown/TopTierCrown.scss | 7 ++++++ .../components/TopTierCrown/TopTierCrown.tsx | 23 +++++++++++++++++++ .../webapp/redux/dataTableSearch/types.ts | 1 + 11 files changed, 67 insertions(+), 22 deletions(-) create mode 100644 querybook/webapp/components/TopTierCrown/TopTierCrown.scss create mode 100644 querybook/webapp/components/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..19d088af0 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 === true ? 'Crown' : null} /> ); diff --git a/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx b/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx index 8e2d5ceda..b2b2e633e 100644 --- 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" > - - updateSearchFilter( - 'golden', - checked ? true : null - ) - } - /> +
+ + updateSearchFilter( + 'golden', + checked ? true : null + ) + } + /> + +
= ({ onClick={updateDataTableGolden} title={table.golden ? 'Top Tier' : 'Make Top Tier'} size="small" + icon="Crown" /> ); } else if (table.golden) { - featuredBadge = Top Tier; + featuredBadge = ( + + Top Tier + + ); } const iconDOM = ( diff --git a/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx b/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx index f4dc5addf..991b98814 100644 --- 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 = ({ const overviewSection = ( {schema.name} - {table.name} + + + {table.name} + {table.golden && } + + {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..7eba29db3 100644 --- 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 = ({
top tier only - + = ({ ); const goldenIcon = golden ? ( -
- -
+ ) : null; const highlightedDescription = (preview.highlight || {}).description; diff --git a/querybook/webapp/components/TopTierCrown/TopTierCrown.scss b/querybook/webapp/components/TopTierCrown/TopTierCrown.scss new file mode 100644 index 000000000..510c62df0 --- /dev/null +++ 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 new file mode 100644 index 000000000..927199145 --- /dev/null +++ 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 ( + + + + ); + } else { + return ; + } +}; 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 { From 038af32225ed1fc0637a7b7127095faaa1516efe Mon Sep 17 00:00:00 2001 From: Dave Bauman Date: Tue, 27 Aug 2024 16:04:19 -0400 Subject: [PATCH 2/2] fix: PR fixes --- .../DataTableNavigator/DataTableNavigator.tsx | 2 +- .../DataTableNavigatorSearch.tsx | 5 ++-- .../DataTableView/DataTableHeader.tsx | 5 ++-- .../DataTableViewMini/TablePanelView.tsx | 7 +++--- .../components/Search/SearchOverview.tsx | 2 +- .../components/Search/SearchResultItem.tsx | 3 +-- .../components/TopTierCrown/TopTierCrown.tsx | 23 ------------------ .../TopTierCrown/TopTierCrown.scss | 0 .../webapp/ui/TopTierCrown/TopTierCrown.tsx | 24 +++++++++++++++++++ 9 files changed, 35 insertions(+), 36 deletions(-) delete mode 100644 querybook/webapp/components/TopTierCrown/TopTierCrown.tsx rename querybook/webapp/{components => ui}/TopTierCrown/TopTierCrown.scss (100%) create mode 100644 querybook/webapp/ui/TopTierCrown/TopTierCrown.tsx diff --git a/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx b/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx index 19d088af0..bcf2f0b9a 100644 --- a/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx +++ b/querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx @@ -320,7 +320,7 @@ const TableRow: React.FC<{ onClick={handleLinkClick} isRow title={table.displayName} - icon={table.golden === true ? 'Crown' : null} + icon={table.golden ? 'Crown' : null} /> ); diff --git a/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx b/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx index b2b2e633e..8af7e0972 100644 --- a/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx +++ b/querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx @@ -21,10 +21,9 @@ 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'; -import { Icon } from 'ui/Icon/Icon'; -import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown'; export const DataTableNavigatorSearch: React.FC<{ queryMetastore: IQueryMetastore; @@ -107,7 +106,7 @@ export const DataTableNavigatorSearch: React.FC<{ ) } /> - +
diff --git a/querybook/webapp/components/DataTableView/DataTableHeader.tsx b/querybook/webapp/components/DataTableView/DataTableHeader.tsx index 87c4f6388..2b987941b 100644 --- a/querybook/webapp/components/DataTableView/DataTableHeader.tsx +++ b/querybook/webapp/components/DataTableView/DataTableHeader.tsx @@ -27,10 +27,9 @@ 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'; -import { Icon } from 'ui/Icon/Icon'; -import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown'; export interface IDataTableHeader { table: IDataTable; @@ -97,7 +96,7 @@ export const DataTableHeader: React.FunctionComponent = ({ } else if (table.golden) { featuredBadge = ( - Top Tier + Top Tier ); } diff --git a/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx b/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx index 991b98814..8e9c96aba 100644 --- a/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx +++ b/querybook/webapp/components/DataTableViewMini/TablePanelView.tsx @@ -11,11 +11,10 @@ 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'; -import { Icon } from 'ui/Icon/Icon'; -import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown'; interface ITablePanelViewProps { tableId: number; @@ -43,7 +42,9 @@ export const TablePanelView: React.FunctionComponent = ({ {table.name} - {table.golden && } + {table.golden && ( + + )} diff --git a/querybook/webapp/components/Search/SearchOverview.tsx b/querybook/webapp/components/Search/SearchOverview.tsx index 7eba29db3..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'; @@ -67,7 +68,6 @@ import { SearchSchemaSelect } from './SearchSchemaSelect'; import { TableSelect } from './TableSelect'; import './SearchOverview.scss'; -import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown'; const AIAssistantConfig = PublicConfig.ai_assistant; diff --git a/querybook/webapp/components/Search/SearchResultItem.tsx b/querybook/webapp/components/Search/SearchResultItem.tsx index 1f2040844..382d6088d 100644 --- a/querybook/webapp/components/Search/SearchResultItem.tsx +++ b/querybook/webapp/components/Search/SearchResultItem.tsx @@ -20,16 +20,15 @@ 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'; import './SearchResultItem.scss'; -import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown'; const HighlightTitle: React.FunctionComponent<{ title: string; diff --git a/querybook/webapp/components/TopTierCrown/TopTierCrown.tsx b/querybook/webapp/components/TopTierCrown/TopTierCrown.tsx deleted file mode 100644 index 927199145..000000000 --- a/querybook/webapp/components/TopTierCrown/TopTierCrown.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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 ( - - - - ); - } else { - return ; - } -}; diff --git a/querybook/webapp/components/TopTierCrown/TopTierCrown.scss b/querybook/webapp/ui/TopTierCrown/TopTierCrown.scss similarity index 100% rename from querybook/webapp/components/TopTierCrown/TopTierCrown.scss rename to querybook/webapp/ui/TopTierCrown/TopTierCrown.scss 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' }) => ( + + + +);