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(ui): Adding Explore all button on home page search #6468

Merged
merged 2 commits into from
Nov 17, 2022
Merged

feat(ui): Adding Explore all button on home page search #6468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4134ed
Adding explore all button on home page
jjoyce0510 Nov 17, 2022
f8675ef
Addressing comments
jjoyce0510 Nov 17, 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: 6 additions & 0 deletions datahub-web-react/src/app/analytics/event.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export enum EventType {
RecommendationImpressionEvent,
RecommendationClickEvent,
HomePageRecommendationClickEvent,
HomePageExploreAllClickEvent,
SearchAcrossLineageEvent,
SearchAcrossLineageResultsViewEvent,
DownloadAsCsvEvent,
Expand Down Expand Up @@ -338,6 +339,10 @@ export interface ShowStandardHomepageEvent extends BaseEvent {
type: EventType.ShowStandardHomepageEvent;
}

export interface HomePageExploreAllClickEvent extends BaseEvent {
type: EventType.HomePageExploreAllClickEvent;
}

// Business glossary events

export interface CreateGlossaryEntityEvent extends BaseEvent {
Expand Down Expand Up @@ -389,6 +394,7 @@ export type Event =
| ResetCredentialsEvent
| SearchEvent
| HomePageSearchEvent
| HomePageExploreAllClickEvent
| SearchResultsViewEvent
| SearchResultClickEvent
| BrowseResultClickEvent
Expand Down
41 changes: 39 additions & 2 deletions datahub-web-react/src/app/home/HomePageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { useHistory } from 'react-router';
import { Typography, Image, Row, Button, Tag } from 'antd';
import styled, { useTheme } from 'styled-components';

import { RightOutlined } from '@ant-design/icons';
import { ManageAccount } from '../shared/ManageAccount';
import { useGetAuthenticatedUser } from '../useGetAuthenticatedUser';
import { useEntityRegistry } from '../useEntityRegistry';
Expand Down Expand Up @@ -68,6 +68,12 @@ const SuggestionsContainer = styled.div`
align-items: start;
`;

const SuggestionsHeader = styled.div`
display: flex;
justify-content: space-between;
width: 100%;
`;

const SuggestionTagContainer = styled.div`
display: flex;
justify-content: left;
Expand Down Expand Up @@ -102,6 +108,22 @@ const SearchBarContainer = styled.div`
text-align: center;
`;

const ExploreAllButton = styled(Button)`
&& {
padding: 0px;
margin: 0px;
height: 16px;
}
Comment on lines +112 to +116
Copy link
Collaborator

Choose a reason for hiding this comment

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

just in general I'm confused why we have these && or &&& all over our css styling... do you understand it?

at least to my understanding, using & is meant to apply styles to the current selector you're on as well as above selectors, so idk if it's really doing anything in these situations, but I could be wrong since I've never seen it used other than with &:hover { ... or some pseudo selector

also I recognize you may be copy pasting this styling from elsewhere lol

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

no so for some reason i have to do this to bypass the native antd styles in some cases. would love to understand why

Copy link
Collaborator

Choose a reason for hiding this comment

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

fricken ant design man

`;

const StyledRightOutlined = styled(RightOutlined)`
&&& {
font-size: 7px;
margin-left: 4px;
padding: 0px;
}
`;

function truncate(input, length) {
if (input.length > length) {
return `${input.substring(0, length)}...`;
Expand Down Expand Up @@ -157,6 +179,16 @@ export const HomePageHeader = () => {
}
};

const onClickExploreAll = () => {
analytics.event({
type: EventType.HomePageExploreAllClickEvent,
});
navigateToSearchUrl({
query: '*',
history,
});
};

// Fetch results
const { data: searchResultsData } = useGetSearchResultsForMultipleQuery({
variables: {
Expand Down Expand Up @@ -228,7 +260,12 @@ export const HomePageHeader = () => {
/>
{searchResultsToShow && searchResultsToShow.length > 0 && (
<SuggestionsContainer>
<SuggestedQueriesText strong>Try searching for</SuggestedQueriesText>
<SuggestionsHeader>
<SuggestedQueriesText strong>Try searching for</SuggestedQueriesText>
<ExploreAllButton type="link" onClick={onClickExploreAll}>
Explore all <StyledRightOutlined />
</ExploreAllButton>
</SuggestionsHeader>
<SuggestionTagContainer>
{searchResultsToShow.slice(0, 3).map((suggestion) => (
<SuggestionButton
Expand Down