From ace74fae050574db9bf337c562361f59a4544717 Mon Sep 17 00:00:00 2001 From: Chris Collins Date: Tue, 1 Aug 2023 17:38:48 -0400 Subject: [PATCH] fix(ui) Make multiple small updates to new search and browse (#8524) Co-authored-by: Aseem Bansal --- .../domain/DataProductsTab/DataProductsTab.tsx | 2 ++ .../src/app/preview/DefaultPreviewCard.tsx | 2 +- .../src/app/search/SearchFilterLabel.tsx | 4 +--- .../src/app/search/filters/FilterOption.tsx | 13 +++++++++++-- .../src/app/search/filters/OptionsDropdownMenu.tsx | 5 ++++- .../src/app/search/sidebar/EntityNode.tsx | 5 +++-- datahub-web-react/src/app/search/utils/constants.ts | 2 ++ 7 files changed, 24 insertions(+), 9 deletions(-) diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx index 6f10c97423731..c834597e41a6d 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx @@ -57,6 +57,7 @@ export default function DataProductsTab() { const domainUrn = entityData?.urn || ''; const { data, loading } = useGetSearchResultsForMultipleQuery({ + skip: !domainUrn, variables: { input: { types: [EntityType.DataProduct], @@ -64,6 +65,7 @@ export default function DataProductsTab() { start, count: DEFAULT_PAGE_SIZE, orFilters: [{ and: [{ field: DOMAINS_FILTER_NAME, values: [domainUrn] }] }], + searchFlags: { skipCache: true }, }, }, }); diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index 46ee36809858f..0a7d16ade0ac0 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -294,7 +294,7 @@ export default function DefaultPreviewCard({ {deprecation?.deprecated && ( )} - {health && health.length && } + {health && health.length > 0 && } {externalUrl && ( { const entityRegistry = useEntityRegistry(); diff --git a/datahub-web-react/src/app/search/filters/FilterOption.tsx b/datahub-web-react/src/app/search/filters/FilterOption.tsx index c5ef6b45826e4..b112413efd845 100644 --- a/datahub-web-react/src/app/search/filters/FilterOption.tsx +++ b/datahub-web-react/src/app/search/filters/FilterOption.tsx @@ -7,11 +7,18 @@ import { EntityType, GlossaryNode, GlossaryTerm, Tag } from '../../../types.gene import { generateColor } from '../../entity/shared/components/styled/StyledTag'; import { ANTD_GRAY } from '../../entity/shared/constants'; import { useEntityRegistry } from '../../useEntityRegistry'; -import { PLATFORM_FILTER_NAME, TAGS_FILTER_NAME, TYPE_NAMES_FILTER_NAME } from '../utils/constants'; +import { + ENTITY_SUB_TYPE_FILTER_NAME, + MAX_COUNT_VAL, + PLATFORM_FILTER_NAME, + TAGS_FILTER_NAME, + TYPE_NAMES_FILTER_NAME, +} from '../utils/constants'; import { IconSpacer, Label } from './ActiveFilter'; import { isFilterOptionSelected, getFilterIconAndLabel, isAnyOptionSelected } from './utils'; import { capitalizeFirstLetterOnly } from '../../shared/textUtil'; import ParentNodes from './ParentNodes'; +import { formatNumber } from '../../shared/formatNumber'; const FilterOptionWrapper = styled.div<{ centerAlign?: boolean; addPadding?: boolean }>` display: flex; @@ -119,6 +126,8 @@ export default function FilterOption({ const isSubTypeFilter = field === TYPE_NAMES_FILTER_NAME; const isGlossaryTerm = entity?.type === EntityType.GlossaryTerm; const parentNodes: GlossaryNode[] = isGlossaryTerm ? (entity as GlossaryTerm).parentNodes?.nodes || [] : []; + // only entity type filters return 10,000 max aggs + const countText = count === MAX_COUNT_VAL && field === ENTITY_SUB_TYPE_FILTER_NAME ? '10k+' : formatNumber(count); function updateFilterValues() { if (isFilterOptionSelected(selectedFilterOptions, value)) { @@ -156,7 +165,7 @@ export default function FilterOption({ - {count} + {countText} {nestedOptions && nestedOptions.length > 0 && ( } diff --git a/datahub-web-react/src/app/search/filters/OptionsDropdownMenu.tsx b/datahub-web-react/src/app/search/filters/OptionsDropdownMenu.tsx index 321fedd57dfe9..9302b908d8a1b 100644 --- a/datahub-web-react/src/app/search/filters/OptionsDropdownMenu.tsx +++ b/datahub-web-react/src/app/search/filters/OptionsDropdownMenu.tsx @@ -4,6 +4,7 @@ import React from 'react'; import styled from 'styled-components/macro'; import { useEntityRegistry } from '../../useEntityRegistry'; import { SearchBar } from '../SearchBar'; +import { useEnterKeyListener } from '../../shared/useEnterKeyListener'; const StyledButton = styled(Button)` width: 100%; @@ -73,6 +74,8 @@ export default function OptionsDropdownMenu({ }: Props) { const entityRegistry = useEntityRegistry(); + useEnterKeyListener({ querySelectorToExecuteClick: '#updateFiltersButton' }); + return ( @@ -101,7 +104,7 @@ export default function OptionsDropdownMenu({ )} - + Update diff --git a/datahub-web-react/src/app/search/sidebar/EntityNode.tsx b/datahub-web-react/src/app/search/sidebar/EntityNode.tsx index 46310d4534f46..e04e4253dca13 100644 --- a/datahub-web-react/src/app/search/sidebar/EntityNode.tsx +++ b/datahub-web-react/src/app/search/sidebar/EntityNode.tsx @@ -8,7 +8,7 @@ import { formatNumber } from '../../shared/formatNumber'; import ExpandableNode from './ExpandableNode'; import EnvironmentNode from './EnvironmentNode'; import useAggregationsQuery from './useAggregationsQuery'; -import { ORIGIN_FILTER_NAME, PLATFORM_FILTER_NAME } from '../utils/constants'; +import { MAX_COUNT_VAL, ORIGIN_FILTER_NAME, PLATFORM_FILTER_NAME } from '../utils/constants'; import PlatformNode from './PlatformNode'; import SidebarLoadingError from './SidebarLoadingError'; import useToggle from '../../shared/useToggle'; @@ -28,6 +28,7 @@ const EntityNode = () => { const entityAggregation = useEntityAggregation(); const hasEnvironmentFilter = useHasFilterField(ORIGIN_FILTER_NAME); const { count } = entityAggregation; + const countText = count === MAX_COUNT_VAL ? '10k+' : formatNumber(count); const registry = useEntityRegistry(); const { trackToggleNodeEvent } = useSidebarAnalytics(); @@ -67,7 +68,7 @@ const EntityNode = () => { {registry.getCollectionName(entityType)} - {formatNumber(entityAggregation.count)} + {countText} diff --git a/datahub-web-react/src/app/search/utils/constants.ts b/datahub-web-react/src/app/search/utils/constants.ts index d65335f37109d..eecd18441e7a5 100644 --- a/datahub-web-react/src/app/search/utils/constants.ts +++ b/datahub-web-react/src/app/search/utils/constants.ts @@ -124,3 +124,5 @@ export const FilterModes = { } as const; export type FilterMode = typeof FilterModes[keyof typeof FilterModes]; + +export const MAX_COUNT_VAL = 10000;