diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
index fb10e1ca0026e..b4699994bc460 100644
--- a/datahub-web-react/src/app/search/SearchBar.tsx
+++ b/datahub-web-react/src/app/search/SearchBar.tsx
@@ -6,7 +6,7 @@ import { useHistory } from 'react-router';
import { AutoCompleteResultForEntity, EntityType, FacetFilterInput, ScenarioType } from '../../types.generated';
import EntityRegistry from '../entity/EntityRegistry';
import filterSearchQuery from './utils/filterSearchQuery';
-import { ANTD_GRAY, ANTD_GRAY_V2 } from '../entity/shared/constants';
+import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '../entity/shared/constants';
import { getEntityPath } from '../entity/shared/containers/profile/utils';
import { EXACT_SEARCH_PREFIX } from './utils/constants';
import { useListRecommendationsQuery } from '../../graphql/recommendations.generated';
@@ -20,7 +20,6 @@ import RecommendedOption from './autoComplete/RecommendedOption';
import SectionHeader, { EntityTypeLabel } from './autoComplete/SectionHeader';
import { useUserContext } from '../context/useUserContext';
import { navigateToSearchUrl } from './utils/navigateToSearchUrl';
-import { getQuickFilterDetails } from './autoComplete/quickFilters/utils';
import ViewAllSearchItem from './ViewAllSearchItem';
import { ViewSelect } from '../entity/view/select/ViewSelect';
import { combineSiblingsInAutoComplete } from './utils/combineSiblingsInAutoComplete';
@@ -39,13 +38,14 @@ const StyledSearchBar = styled(Input)`
&&& {
border-radius: 70px;
height: 40px;
- font-size: 20px;
- color: ${ANTD_GRAY[7]};
- background-color: ${ANTD_GRAY_V2[2]};
- }
- > .ant-input {
font-size: 14px;
+ color: ${ANTD_GRAY[7]};
background-color: ${ANTD_GRAY_V2[2]};
+ border: 2px solid transparent;
+
+ &:focus-within {
+ border: 1.5px solid ${REDESIGN_COLORS.BLUE};
+ }
}
> .ant-input::placeholder {
color: ${ANTD_GRAY_V2[10]};
@@ -203,23 +203,16 @@ export const SearchBar = ({
const { quickFilters, selectedQuickFilter, setSelectedQuickFilter } = useQuickFiltersContext();
const autoCompleteQueryOptions = useMemo(() => {
- const query = suggestions.length ? effectiveQuery : '';
- const selectedQuickFilterLabel =
- showQuickFilters && selectedQuickFilter
- ? getQuickFilterDetails(selectedQuickFilter, entityRegistry).label
- : '';
- const text = query || selectedQuickFilterLabel;
-
- if (!text) return [];
+ if (effectiveQuery === '') return [];
return [
{
- value: `${EXACT_SEARCH_PREFIX}${text}`,
- label: ,
+ value: `${EXACT_SEARCH_PREFIX}${effectiveQuery}`,
+ label: ,
type: EXACT_AUTOCOMPLETE_OPTION_TYPE,
},
];
- }, [showQuickFilters, suggestions.length, effectiveQuery, selectedQuickFilter, entityRegistry]);
+ }, [effectiveQuery]);
const autoCompleteEntityOptions = useMemo(() => {
return suggestions.map((suggestion: AutoCompleteResultForEntity) => {
@@ -296,6 +289,22 @@ 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);
+ };
+ }, []);
+
return (
>
}
+ ref={searchInputRef}
/>
diff --git a/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx b/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx
index ced7d8642576b..ce1ad93565ba4 100644
--- a/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx
+++ b/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx
@@ -93,20 +93,6 @@ export function HeaderLinks(props: Props) {
)}
- {showIngestion && (
-
-
-
-
-
- )}
+ {showIngestion && (
+
+
+
+
+
+ )}
{showSettings && (
diff --git a/datahub-web-react/src/conf/theme/theme_dark.config.json b/datahub-web-react/src/conf/theme/theme_dark.config.json
index 9746c3ddde5f3..54ebebd3b692b 100644
--- a/datahub-web-react/src/conf/theme/theme_dark.config.json
+++ b/datahub-web-react/src/conf/theme/theme_dark.config.json
@@ -30,7 +30,7 @@
"homepageMessage": "Find data you can count(*) on"
},
"search": {
- "searchbarMessage": "Search Datasets, People, & more..."
+ "searchbarMessage": "Search Tables, Dashboards, People, & more..."
},
"menu": {
"items": [
@@ -52,4 +52,4 @@
]
}
}
-}
+}
\ No newline at end of file
diff --git a/datahub-web-react/src/conf/theme/theme_light.config.json b/datahub-web-react/src/conf/theme/theme_light.config.json
index 906c04e38a1ba..6b9ef3eac52b0 100644
--- a/datahub-web-react/src/conf/theme/theme_light.config.json
+++ b/datahub-web-react/src/conf/theme/theme_light.config.json
@@ -33,7 +33,7 @@
"homepageMessage": "Find data you can count on"
},
"search": {
- "searchbarMessage": "Search Datasets, People, & more..."
+ "searchbarMessage": "Search Tables, Dashboards, People, & more..."
},
"menu": {
"items": [
@@ -60,4 +60,4 @@
]
}
}
-}
+}
\ No newline at end of file