Adding explore all button on home page

datahub-project · Nov 17, 2022 · b4134ed · b4134ed
1 parent 2a791d4
commit b4134ed
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 50 deletions.
diff --git a/datahub-web-react/src/app/analytics/event.ts b/datahub-web-react/src/app/analytics/event.ts
@@ -22,6 +22,7 @@ export enum EventType {
     RecommendationImpressionEvent,
     RecommendationClickEvent,
     HomePageRecommendationClickEvent,
+    HomePageExploreAllClickEvent,
     SearchAcrossLineageEvent,
     SearchAcrossLineageResultsViewEvent,
     DownloadAsCsvEvent,
@@ -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 {
@@ -389,6 +394,7 @@ export type Event =
     | ResetCredentialsEvent
     | SearchEvent
     | HomePageSearchEvent
+    | HomePageExploreAllClickEvent
     | SearchResultsViewEvent
     | SearchResultClickEvent
     | BrowseResultClickEvent

diff --git a/datahub-web-react/src/app/home/HomePageHeader.tsx b/datahub-web-react/src/app/home/HomePageHeader.tsx
@@ -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';
@@ -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;
@@ -102,6 +108,27 @@ const SearchBarContainer = styled.div`
     text-align: center;
 `;
 
+const ExploreAllButtonContainer = styled.div`
+    display: flex;
+    justify-content: right;
+`;
+
+const ExploreAllButton = styled(Button)`
+    && {
+        padding: 0px;
+        margin: 0px;
+        height: 16px;
+    }
+`;
+
+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)}...`;
@@ -157,6 +184,16 @@ export const HomePageHeader = () => {
         }
     };
 
+    const onClickExploreAll = () => {
+        analytics.event({
+            type: EventType.HomePageExploreAllClickEvent,
+        });
+        navigateToSearchUrl({
+            query: '*',
+            history,
+        });
+    };
+
     // Fetch results
     const { data: searchResultsData } = useGetSearchResultsForMultipleQuery({
         variables: {
@@ -228,7 +265,14 @@ export const HomePageHeader = () => {
                     />
                     {searchResultsToShow && searchResultsToShow.length > 0 && (
                         <SuggestionsContainer>
-                            <SuggestedQueriesText strong>Try searching for</SuggestedQueriesText>
+                            <SuggestionsHeader>
+                                <SuggestedQueriesText strong>Try searching for</SuggestedQueriesText>
+                                <ExploreAllButtonContainer>
+                                    <ExploreAllButton type="link" onClick={onClickExploreAll}>
+                                        Explore all <StyledRightOutlined />
+                                    </ExploreAllButton>
+                                </ExploreAllButtonContainer>
+                            </SuggestionsHeader>
                             <SuggestionTagContainer>
                                 {searchResultsToShow.slice(0, 3).map((suggestion) => (
                                     <SuggestionButton

diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
@@ -292,55 +292,57 @@ export const SearchBar = ({
     }
 
     return (
-        <AutoCompleteContainer style={style} ref={searchBarWrapperRef}>
-            <StyledAutoComplete
-                defaultActiveFirstOption={false}
-                style={autoCompleteStyle}
-                options={options}
-                filterOption={false}
-                onSelect={(value: string, option) => {
-                    // If the autocomplete option type is NOT an entity, then render as a normal search query.
-                    if (
-                        option.type === EXACT_AUTOCOMPLETE_OPTION_TYPE ||
-                        option.type === RECOMMENDED_QUERY_OPTION_TYPE
-                    ) {
-                        onSearch(
-                            `${filterSearchQuery(value)}`,
-                            searchEntityTypes.indexOf(option.type) >= 0 ? option.type : undefined,
-                        );
-                    } else {
-                        // Navigate directly to the entity profile.
-                        history.push(getEntityPath(option.type, value, entityRegistry, false, false));
-                        setSelected('');
-                    }
-                }}
-                onSearch={(value: string) => onQueryChange(value)}
-                defaultValue={initialQuery || undefined}
-                value={selected}
-                onChange={(v) => setSelected(filterSearchQuery(v))}
-                dropdownStyle={{
-                    maxHeight: 1000,
-                    overflowY: 'visible',
-                    position: (fixAutoComplete && 'fixed') || 'relative',
-                }}
-            >
-                <StyledSearchBar
-                    placeholder={placeholderText}
-                    onPressEnter={() => {
-                        // e.stopPropagation();
-                        onSearch(filterSearchQuery(searchQuery || ''));
+        <>
+            <AutoCompleteContainer style={style} ref={searchBarWrapperRef}>
+                <StyledAutoComplete
+                    defaultActiveFirstOption={false}
+                    style={autoCompleteStyle}
+                    options={options}
+                    filterOption={false}
+                    onSelect={(value: string, option) => {
+                        // If the autocomplete option type is NOT an entity, then render as a normal search query.
+                        if (
+                            option.type === EXACT_AUTOCOMPLETE_OPTION_TYPE ||
+                            option.type === RECOMMENDED_QUERY_OPTION_TYPE
+                        ) {
+                            onSearch(
+                                `${filterSearchQuery(value)}`,
+                                searchEntityTypes.indexOf(option.type) >= 0 ? option.type : undefined,
+                            );
+                        } else {
+                            // Navigate directly to the entity profile.
+                            history.push(getEntityPath(option.type, value, entityRegistry, false, false));
+                            setSelected('');
+                        }
                     }}
-                    style={inputStyle}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    data-testid="search-input"
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
-                    allowClear
-                    prefix={<SearchOutlined onClick={() => onSearch(filterSearchQuery(searchQuery || ''))} />}
-                />
-            </StyledAutoComplete>
-        </AutoCompleteContainer>
+                    onSearch={(value: string) => onQueryChange(value)}
+                    defaultValue={initialQuery || undefined}
+                    value={selected}
+                    onChange={(v) => setSelected(filterSearchQuery(v))}
+                    dropdownStyle={{
+                        maxHeight: 1000,
+                        overflowY: 'visible',
+                        position: (fixAutoComplete && 'fixed') || 'relative',
+                    }}
+                >
+                    <StyledSearchBar
+                        placeholder={placeholderText}
+                        onPressEnter={() => {
+                            // e.stopPropagation();
+                            onSearch(filterSearchQuery(searchQuery || ''));
+                        }}
+                        style={inputStyle}
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        data-testid="search-input"
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        allowClear
+                        prefix={<SearchOutlined onClick={() => onSearch(filterSearchQuery(searchQuery || ''))} />}
+                    />
+                </StyledAutoComplete>
+            </AutoCompleteContainer>
+        </>
     );
 };