feat(ui): Add command-k icons to search bar (#9194)

datahub-project · Nov 7, 2023 · 4577001 · 4577001
1 parent ac9a014
commit 4577001
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 13 deletions.
diff --git a/datahub-web-react/src/app/home/HomePageHeader.tsx b/datahub-web-react/src/app/home/HomePageHeader.tsx
@@ -276,6 +276,7 @@ export const HomePageHeader = () => {
                         combineSiblings
                         showQuickFilters
                         showViewAllResults
+                        showCommandK
                     />
                     {searchResultsToShow && searchResultsToShow.length > 0 && (
                         <SuggestionsContainer>

diff --git a/datahub-web-react/src/app/search/CommandK.tsx b/datahub-web-react/src/app/search/CommandK.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ANTD_GRAY } from '../entity/shared/constants';
+
+const Container = styled.div`
+    color: ${ANTD_GRAY[6]};
+    background-color: #ffffff;
+    opacity: 0.9;
+    border-color: black;
+    border-radius: 6px;
+    border: 1px solid ${ANTD_GRAY[6]};
+    padding-right: 6px;
+    padding-left: 6px;
+    margin-right: 4px;
+    margin-left: 4px;
+`;
+
+const Letter = styled.span`
+    padding: 2px;
+`;
+
+export const CommandK = () => {
+    return (
+        <Container>
+            <Letter>⌘</Letter>
+            <Letter>K</Letter>
+        </Container>
+    );
+};
diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
@@ -23,6 +23,7 @@ import { navigateToSearchUrl } from './utils/navigateToSearchUrl';
 import ViewAllSearchItem from './ViewAllSearchItem';
 import { ViewSelect } from '../entity/view/select/ViewSelect';
 import { combineSiblingsInAutoComplete } from './utils/combineSiblingsInAutoComplete';
+import { CommandK } from './CommandK';
 
 const StyledAutoComplete = styled(AutoComplete)`
     width: 100%;
@@ -114,6 +115,7 @@ interface Props {
     fixAutoComplete?: boolean;
     hideRecommendations?: boolean;
     showQuickFilters?: boolean;
+    showCommandK?: boolean;
     viewsEnabled?: boolean;
     combineSiblings?: boolean;
     setIsSearchBarFocused?: (isSearchBarFocused: boolean) => void;
@@ -142,6 +144,7 @@ export const SearchBar = ({
     fixAutoComplete,
     hideRecommendations,
     showQuickFilters,
+    showCommandK = false,
     viewsEnabled = false,
     combineSiblings = false,
     setIsSearchBarFocused,
@@ -153,6 +156,8 @@ export const SearchBar = ({
     const [searchQuery, setSearchQuery] = useState<string | undefined>(initialQuery);
     const [selected, setSelected] = useState<string>();
     const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+
     useEffect(() => setSelected(initialQuery), [initialQuery]);
 
     const searchEntityTypes = entityRegistry.getSearchEntityTypes();
@@ -277,11 +282,13 @@ export const SearchBar = ({
     function handleFocus() {
         if (onFocus) onFocus();
         handleSearchBarClick(true);
+        setIsFocused(true);
     }
 
     function handleBlur() {
         if (onBlur) onBlur();
         handleSearchBarClick(false);
+        setIsFocused(false);
     }
 
     function handleSearch(query: string, type?: EntityType, appliedQuickFilters?: FacetFilterInput[]) {
@@ -294,18 +301,21 @@ export const SearchBar = ({
     const searchInputRef = useRef(null);
 
     useEffect(() => {
-        const handleKeyDown = (event) => {
-            // Support command-k to select the search bar.
-            // 75 is the keyCode for 'k'
-            if ((event.metaKey || event.ctrlKey) && event.keyCode === 75) {
-                (searchInputRef?.current as any)?.focus();
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, []);
+        if (showCommandK) {
+            const handleKeyDown = (event) => {
+                // Support command-k to select the search bar.
+                // 75 is the keyCode for 'k'
+                if ((event.metaKey || event.ctrlKey) && event.keyCode === 75) {
+                    (searchInputRef?.current as any)?.focus();
+                }
+            };
+            document.addEventListener('keydown', handleKeyDown);
+            return () => {
+                document.removeEventListener('keydown', handleKeyDown);
+            };
+        }
+        return () => null;
+    }, [showCommandK]);
 
     return (
         <AutoCompleteContainer style={style} ref={searchBarWrapperRef}>
@@ -377,7 +387,7 @@ export const SearchBar = ({
                     data-testid="search-input"
                     onFocus={handleFocus}
                     onBlur={handleBlur}
-                    allowClear={{ clearIcon: <ClearIcon /> }}
+                    allowClear={(isFocused && { clearIcon: <ClearIcon /> }) || false}
                     prefix={
                         <>
                             {viewsEnabled && (
@@ -411,6 +421,7 @@ export const SearchBar = ({
                         </>
                     }
                     ref={searchInputRef}
+                    suffix={(showCommandK && !isFocused && <CommandK />) || null}
                 />
             </StyledAutoComplete>
         </AutoCompleteContainer>

diff --git a/datahub-web-react/src/app/search/SearchHeader.tsx b/datahub-web-react/src/app/search/SearchHeader.tsx
@@ -108,6 +108,7 @@ export const SearchHeader = ({
                     fixAutoComplete
                     showQuickFilters
                     showViewAllResults
+                    showCommandK
                 />
             </LogoSearchContainer>
             <NavGroup>