Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add top-tier icons #1483

Merged
merged 2 commits into from
Nov 4, 2024
Merged

feat: Add top-tier icons #1483

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4d8094
feat: Add top-tier icons
baumandm Jul 25, 2024
038af32
fix: PR fixes
baumandm Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion querybook/server/lib/elasticsearch/search_table.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
1 change: 1 addition & 0 deletions querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@ const TableRow: React.FC<{
onClick={handleLinkClick}
isRow
title={table.displayName}
icon={table.golden === true ? 'Crown' : null}
baumandm marked this conversation as resolved.
Show resolved Hide resolved
/>
);

Expand Down
23 changes: 14 additions & 9 deletions querybook/webapp/components/DataTableNavigator/DataTableNavigatorSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small nit: import order

import { TopTierCrown } from 'components/TopTierCrown/TopTierCrown';

export const DataTableNavigatorSearch: React.FC<{
queryMetastore: IQueryMetastore;
Expand Down Expand Up @@ -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
Expand Down
9 changes: 8 additions & 1 deletion querybook/webapp/components/DataTableView/DataTableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 = (
Expand Down
9 changes: 8 additions & 1 deletion querybook/webapp/components/DataTableViewMini/TablePanelView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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()
Expand Down
6 changes: 0 additions & 6 deletions querybook/webapp/components/Search/SearchOverview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,6 @@
display: flex;
align-items: center;
}

.crown svg {
color: var(--color-accent);
height: 16px;
stroke-width: 2.5px;
}
}

.Container-content {
Expand Down
3 changes: 2 additions & 1 deletion querybook/webapp/components/Search/SearchOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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}
Expand Down
5 changes: 2 additions & 3 deletions querybook/webapp/components/Search/SearchResultItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions querybook/webapp/components/TopTierCrown/TopTierCrown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.TopTierCrown {
svg {
color: var(--color-accent);
height: 16px;
stroke-width: 2.5px;
}
}
23 changes: 23 additions & 0 deletions querybook/webapp/components/TopTierCrown/TopTierCrown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you put this component in ui/TopTierCrown instead?


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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we always return a span, but let props passed to be dynamic?

className="TopTierCrown flex-row"
aria-label="Top Tier"
data-balloon-pos={tooltipPos}
>
<Icon className="ml4" name="Crown" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ml4 should be outside

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also i think its better to just pass a className, since hard coding ml4 would be depending on the outer context?

</span>
);
} else {
return <Icon className="TopTierCrown ml4" name="Crown" />;
}
};
1 change: 1 addition & 0 deletions querybook/webapp/redux/dataTableSearch/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface ITableSearchResult {
id: number;
schema: string;
name: string;
golden?: boolean;
}

export interface ITableSearchFilters {
Expand Down
Loading