Skip to content

feat: search highlighting UI #1850

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

Merged
merged 24 commits into from
Jun 2, 2022
Merged

feat: search highlighting UI #1850

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
9858673
feat: search highlighting UI
allisonsuarez May 5, 2022
a64ab50
wip
allisonsuarez May 9, 2022
3ca3e0c
functional for tables pending styling and other resources
allisonsuarez May 13, 2022
dbfdc19
some rewrite
allisonsuarez May 15, 2022
aa9f3e1
Merge branch 'main' of github.com:amundsen-io/amundsen into asm-fe-hi…
allisonsuarez May 23, 2022
27690ae
functional highlighting
allisonsuarez May 24, 2022
6d8dc69
functional and cleaned up
allisonsuarez May 24, 2022
6978a6a
added column descriptions
allisonsuarez May 25, 2022
341c8cf
unit tests, feature description highlight and feedback fixes
allisonsuarez Jun 1, 2022
48284c7
resolved merge conflicts
allisonsuarez Jun 1, 2022
b21f8ab
betterer results updated
allisonsuarez Jun 1, 2022
a2a184f
feature description highlight, fix of descriptions, unit tests, and lint
allisonsuarez Jun 1, 2022
0f853af
some feedback cleanup
allisonsuarez Jun 1, 2022
b2f3b49
reverted betterer changes
allisonsuarez Jun 2, 2022
0f56056
Merge branch 'main' of github.com:amundsen-io/amundsen into asm-fe-hi…
allisonsuarez Jun 2, 2022
71af39b
revert betterer
allisonsuarez Jun 2, 2022
ae0837c
styling fixes
allisonsuarez Jun 2, 2022
2cd7a29
implemented all feedback from Amrcos
allisonsuarez Jun 2, 2022
1c42d20
lint
allisonsuarez Jun 2, 2022
8ae7cf7
rewrote ResourceListItem as fuctional component
allisonsuarez Jun 2, 2022
5a614fe
fixed betterer issues
allisonsuarez Jun 2, 2022
c031865
lint fix
allisonsuarez Jun 2, 2022
04096ed
update unit tests
allisonsuarez Jun 2, 2022
ac83564
add highlight options to expected
allisonsuarez Jun 2, 2022
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
6 changes: 5 additions & 1 deletion frontend/amundsen_application/api/search/v1.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,13 @@ def search() -> Response:
search_type = request_json.get('searchType')
resources = request_json.get('resources', [])
filters = request_json.get('filters', {})
highlight_options = request_json.get('highlightingOptions', {})
results_dict = _search_resources(search_term=search_term,
resources=resources,
page_index=int(page_index),
results_per_page=int(results_per_page),
filters=filters,
highlight_options=highlight_options,
search_type=search_type)
return make_response(jsonify(results_dict), results_dict.get('status_code', HTTPStatus.OK))
except Exception as e:
Expand All @@ -96,6 +98,7 @@ def _search_resources(*, search_term: str,
page_index: int,
results_per_page: int,
filters: Dict,
highlight_options: Dict,
search_type: str) -> Dict[str, Any]:
"""
Call the search service endpoint and return matching results
Expand All @@ -122,7 +125,8 @@ def _search_resources(*, search_term: str,
resources=resources,
page_index=page_index,
results_per_page=results_per_page,
search_term=search_term)
search_term=search_term,
highlight_options=highlight_options)
request_json = json.dumps(SearchRequestSchema().dump(query_request))
url_base = app.config['SEARCHSERVICE_BASE'] + SEARCH_ENDPOINT
response = request_search(url=url_base,
Expand Down
10 changes: 7 additions & 3 deletions frontend/amundsen_application/api/utils/search_utils.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ def map_dashboard_result(result: Dict) -> Dict:
'tag': result.get('tag', None),
'description': result.get('description', None),
'last_successful_run_timestamp': result.get('last_successful_run_timestamp', None),
'highlight': result.get('highlight', {}),
}


Expand All @@ -70,6 +71,7 @@ def map_table_result(result: Dict) -> Dict:
'schema_description': result.get('schema_description', None),
'badges': result.get('badges', None),
'last_updated_timestamp': result.get('last_updated_timestamp', None),
'highlight': result.get('highlight', None),
}


Expand All @@ -86,12 +88,14 @@ def map_feature_result(result: Dict) -> Dict:
'entity': result.get('entity', None),
'badges': result.get('badges', None),
'status': result.get('status', None),
'highlight': result.get('highlight', {}),
}


def map_user_result(result: Dict) -> Dict:
user_result = dump_user(load_user(result))
user_result['type'] = 'user'
user_result['highlight'] = result.get('highlight', {})
return user_result


Expand Down Expand Up @@ -134,11 +138,11 @@ def generate_query_request(*, filters: List[Filter] = [],
resources: List[str] = [],
page_index: int = 0,
results_per_page: int = 10,
search_term: str) -> SearchRequest:

search_term: str,
highlight_options: Dict) -> SearchRequest:
return SearchRequest(query_term=search_term,
resource_types=resources,
page_index=page_index,
results_per_page=results_per_page,
filters=filters,
highlight_options={})
highlight_options=highlight_options)
68 changes: 39 additions & 29 deletions frontend/amundsen_application/static/.betterer.results
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,26 +148,33 @@ exports[`eslint`] = {
[77, 16, 50, "Static HTML elements with event handlers require a role.", "1837974012"],
[78, 19, 21, "Must use destructuring state assignment", "3239125001"]
],
"js/components/ResourceListItem/DashboardListItem/index.spec.tsx:3836381581": [
[47, 14, 5, "\'props\' is assigned a value but never used.", "187023499"],
[63, 6, 25, "Use object destructuring.", "354229464"],
[64, 6, 29, "Use object destructuring.", "2645724888"],
[146, 18, 5, "\'props\' is assigned a value but never used.", "187023499"]
],
"js/components/ResourceListItem/DashboardListItem/index.tsx:401041810": [
[17, 0, 41, "\`../types\` import should occur before import of \`./constants\`", "2620565544"]
],
"js/components/ResourceListItem/FeatureListItem/index.spec.tsx:3348265572": [
[45, 6, 25, "Use object destructuring.", "354229464"],
[46, 6, 29, "Use object destructuring.", "2645724888"]
"js/components/ResourceListItem/DashboardListItem/index.spec.tsx:2412974137": [
[51, 14, 5, "\'props\' is assigned a value but never used.", "187023499"],
[67, 6, 25, "Use object destructuring.", "354229464"],
[68, 6, 29, "Use object destructuring.", "2645724888"],
[150, 18, 5, "\'props\' is assigned a value but never used.", "187023499"]
],
"js/components/ResourceListItem/FeatureListItem/index.spec.tsx:3223391413": [
[49, 6, 25, "Use object destructuring.", "354229464"],
[50, 6, 29, "Use object destructuring.", "2645724888"]
],
"js/components/ResourceListItem/MetadataHighlightList/highlightingUtils.ts:2480902327": [
[29, 2, 19, "Assignment to function parameter \'originalDescription\'.", "1982058394"],
[30, 2, 22, "Assignment to function parameter \'highlightedDescription\'.", "2370485106"]
],
"js/components/ResourceListItem/MetadataHighlightList/index.spec.tsx:1748169974": [
[6, 0, 67, "\`./highlightingUtils\` import should occur before import of \`.\`", "2024311329"],
[7, 0, 48, "\`components/SVGIcons\` import should occur before import of \`.\`", "2948929935"],
[29, 10, 25, "Use object destructuring.", "354229464"],
[30, 10, 29, "Use object destructuring.", "2645724888"]
],
"js/components/ResourceListItem/SchemaInfo/tests/index.spec.tsx:3506535360": [
[34, 6, 25, "Use object destructuring.", "354229464"],
[35, 6, 29, "Use object destructuring.", "2645724888"]
],
"js/components/ResourceListItem/TableListItem/index.spec.tsx:2705846996": [
[93, 6, 25, "Use object destructuring.", "354229464"],
[94, 6, 29, "Use object destructuring.", "2645724888"]
"js/components/ResourceListItem/TableListItem/index.spec.tsx:1334784120": [
[97, 6, 25, "Use object destructuring.", "354229464"],
[98, 6, 29, "Use object destructuring.", "2645724888"]
],
"js/components/ResourceListItem/UserListItem/index.spec.tsx:3519774565": [
[52, 6, 25, "Use object destructuring.", "354229464"],
Expand All @@ -177,17 +184,20 @@ exports[`eslint`] = {
[130, 14, 17, "\'renderUserInfoSpy\' is assigned a value but never used.", "3779978186"],
[148, 14, 17, "\'renderUserInfoSpy\' is assigned a value but never used.", "3779978186"]
],
"js/components/ResourceListItem/index.tsx:2873688266": [
[27, 15, 944, "Component should be written as a pure function", "951035964"],
[29, 12, 15, "Must use destructuring props assignment", "4222548600"],
[33, 23, 15, "Must use destructuring props assignment", "4222548600"],
[34, 21, 18, "Must use destructuring props assignment", "3823604846"],
[40, 21, 15, "Must use destructuring props assignment", "4222548600"],
[41, 21, 18, "Must use destructuring props assignment", "3823604846"],
[47, 19, 15, "Must use destructuring props assignment", "4222548600"],
[48, 21, 18, "Must use destructuring props assignment", "3823604846"],
[54, 18, 15, "Must use destructuring props assignment", "4222548600"],
[55, 21, 18, "Must use destructuring props assignment", "3823604846"]
"js/components/ResourceListItem/index.tsx:118734394": [
[32, 15, 1318, "Component should be written as a pure function", "666721518"],
[34, 12, 15, "Must use destructuring props assignment", "4222548600"],
[38, 23, 15, "Must use destructuring props assignment", "4222548600"],
[39, 21, 18, "Must use destructuring props assignment", "3823604846"],
[41, 14, 15, "Must use destructuring props assignment", "4222548600"],
[48, 21, 15, "Must use destructuring props assignment", "4222548600"],
[49, 21, 18, "Must use destructuring props assignment", "3823604846"],
[51, 14, 15, "Must use destructuring props assignment", "4222548600"],
[58, 19, 15, "Must use destructuring props assignment", "4222548600"],
[59, 21, 18, "Must use destructuring props assignment", "3823604846"],
[61, 14, 15, "Must use destructuring props assignment", "4222548600"],
[68, 18, 15, "Must use destructuring props assignment", "4222548600"],
[69, 21, 18, "Must use destructuring props assignment", "3823604846"]
],
"js/components/ScrollTracker/index.tsx:899536845": [
[19, 2, 38, "throttledScroll should be placed after componentWillUnmount", "1421765304"],
Expand Down Expand Up @@ -374,9 +384,9 @@ exports[`eslint`] = {
"js/components/Tags/index.tsx:3468508233": [
[38, 4, 21, "Must use destructuring props assignment", "4236634811"]
],
"js/config/config-default.ts:429062513": [
[366, 6, 21, "\'partitionKey\' is defined but never used.", "399589312"],
[367, 6, 23, "\'partitionValue\' is defined but never used.", "793372348"]
"js/config/config-default.ts:1171530170": [
[378, 6, 21, "\'partitionKey\' is defined but never used.", "399589312"],
[379, 6, 23, "\'partitionValue\' is defined but never used.", "793372348"]
],
"js/ducks/announcements/index.spec.ts:1898496537": [
[3, 0, 148, "\`.\` import should occur after import of \`./types\`", "4154971894"]
Expand Down
6 changes: 5 additions & 1 deletion ...undsen_application/static/js/components/ResourceListItem/DashboardListItem/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ describe('DashboardListItem', () => {
const props: DashboardListItemProps = {
logging: { source: 'src', index: 0 },
dashboard: dashboardSummary,
dashboardHighlights: {
name: dashboardSummary.name,
description: dashboardSummary.description,
},
...propOverrides,
};
const wrapper = shallow<DashboardListItem>(
Expand Down Expand Up @@ -111,7 +115,7 @@ describe('DashboardListItem', () => {
});

it('renders dashboard description', () => {
expect(resourceInfo.children().at(1).children().at(1).text()).toEqual(
expect(resourceInfo.find('.description-section').render().text()).toEqual(
props.dashboard.description
);
});
Expand Down
34 changes: 28 additions & 6 deletions ...nd/amundsen_application/static/js/components/ResourceListItem/DashboardListItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@ import { formatDate } from 'utils/dateUtils';
import { ResourceType, DashboardResource } from 'interfaces';

import { NO_TIMESTAMP_TEXT } from '../../../constants';
import * as Constants from './constants';
import { LoggingParams } from '../types';
import { HighlightedDashboard } from '../MetadataHighlightList/highlightingUtils';
import MetadataHighlightList from '../MetadataHighlightList';
import * as Constants from './constants';

export interface DashboardListItemProps {
dashboard: DashboardResource;
logging: LoggingParams;
dashboardHighlights: HighlightedDashboard;
}

class DashboardListItem extends React.Component<DashboardListItemProps, {}> {
Expand All @@ -38,7 +41,7 @@ class DashboardListItem extends React.Component<DashboardListItemProps, {}> {
`icon resource-icon ${getSourceIconClass(dashboardId, dashboardType)}`;

render() {
const { dashboard, logging } = this.props;
const { dashboard, logging, dashboardHighlights } = this.props;
return (
<li className="list-group-item clickable">
<Link
Expand Down Expand Up @@ -70,12 +73,31 @@ class DashboardListItem extends React.Component<DashboardListItemProps, {}> {
resourceType={dashboard.type}
/>
</div>
<div className="body-secondary-3 truncated">
{dashboard.description}
</div>
<span className='description-section'>
{dashboard.description && (
<div
className="description body-secondary-3 truncated"
dangerouslySetInnerHTML={{
__html: dashboardHighlights.description,
}}
/>
)}
</span>
{dashboardHighlights.chartNames && (
<MetadataHighlightList
fieldName="chart names"
highlightedMetadataList={dashboardHighlights.chartNames}
/>
)}
{dashboardHighlights.queryNames && (
<MetadataHighlightList
fieldName="query names"
highlightedMetadataList={dashboardHighlights.queryNames}
/>
)}
</div>
</div>
<div className="resource-type">
<div className="resource-type resource-source">
{getSourceDisplayName(dashboard.product, dashboard.type)}
</div>
<div className="resource-badges">
Expand Down
4 changes: 4 additions & 0 deletions ...amundsen_application/static/js/components/ResourceListItem/FeatureListItem/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ describe('FeatureListItem', () => {
const props: FeatureListItemProps = {
logging: { source: 'src', index: 0 },
feature: featureSummary,
featureHighlights: {
name: MOCK_DISPLAY_NAME,
description: '',
},
...propOverrides,
};
const wrapper = shallow<typeof FeatureListItem>(
Expand Down
12 changes: 9 additions & 3 deletions ...tend/amundsen_application/static/js/components/ResourceListItem/FeatureListItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ import { ResourceType, FeatureResource } from 'interfaces';

import { RightIcon } from 'components/SVGIcons';
import { LoggingParams } from '../types';
import { HighlightedResource } from '../MetadataHighlightList/highlightingUtils';

export interface FeatureListItemProps {
feature: FeatureResource;
logging: LoggingParams;
featureHighlights: HighlightedResource;
}

const getLink = (feature: FeatureResource, logging: LoggingParams) =>
Expand All @@ -29,6 +31,7 @@ const generateResourceIconClass = (
const FeatureListItem: React.FC<FeatureListItemProps> = ({
feature,
logging,
featureHighlights,
}: FeatureListItemProps) => {
const source =
feature.availability?.length > 0 ? feature.availability[0] : '';
Expand All @@ -51,9 +54,12 @@ const FeatureListItem: React.FC<FeatureListItemProps> = ({
<h3 className="resource-name">
{`${feature.feature_group}.${feature.name}.${feature.version}`}
</h3>
<div className="text-body-w3 text-secondary truncated">
{feature.description}
</div>
{feature.description && (
<div
Copy link
Member

Choose a reason for hiding this comment

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

Could we use here a <p> tag instead of a div?

Copy link
Contributor Author

@allisonsuarez allisonsuarez Jun 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

the styling gets completely messed up when using <p>

className="description text-body-w3 text-secondary truncated"
dangerouslySetInnerHTML={{ __html: featureHighlights.description }}
/>
)}
</div>
</div>
<div className="resource-type resource-source">
Expand Down
Loading