fix(ui) Make multiple small updates to new search and browse (#8524)

Co-authored-by: Aseem Bansal <[email protected]>

Author: chriscollins3456

datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx

@@ -57,13 +57,15 @@ export default function DataProductsTab() {
     const domainUrn = entityData?.urn || '';
 
     const { data, loading } = useGetSearchResultsForMultipleQuery({
+        skip: !domainUrn,
         variables: {
             input: {
                 types: [EntityType.DataProduct],
                 query: query || '',
                 start,
                 count: DEFAULT_PAGE_SIZE,
                 orFilters: [{ and: [{ field: DOMAINS_FILTER_NAME, values: [domainUrn] }] }],
+                searchFlags: { skipCache: true },
             },
         },
     });

datahub-web-react/src/app/preview/DefaultPreviewCard.tsx

@@ -294,7 +294,7 @@ export default function DefaultPreviewCard({
                         {deprecation?.deprecated && (
                             <DeprecationPill deprecation={deprecation} urn="" showUndeprecate={false} />
                         )}
-                        {health && health.length && <EntityHealth baseUrl={url} health={health} />}
+                        {health && health.length > 0 && <EntityHealth baseUrl={url} health={health} />}
                         {externalUrl && (
                             <ExternalUrlButton
                                 externalUrl={externalUrl}

datahub-web-react/src/app/search/SearchFilterLabel.tsx

@@ -18,7 +18,7 @@ import { StyledTag } from '../entity/shared/components/styled/StyledTag';
 import { capitalizeFirstLetterOnly } from '../shared/textUtil';
 import { DomainLink } from '../shared/tags/DomainLink';
 import { useEntityRegistry } from '../useEntityRegistry';
-import { BROWSE_PATH_V2_FILTER_NAME, ENTITY_FILTER_NAME } from './utils/constants';
+import { BROWSE_PATH_V2_FILTER_NAME, ENTITY_FILTER_NAME, MAX_COUNT_VAL } from './utils/constants';
 import CustomAvatar from '../shared/avatar/CustomAvatar';
 import { IconStyleType } from '../entity/Entity';
 import { formatNumber } from '../shared/formatNumber';
@@ -40,8 +40,6 @@ const PreviewImage = styled.img`
     margin-right: 4px;
 `;
 
-const MAX_COUNT_VAL = 10000;
-
 // SearchFilterLabel renders custom labels for entity, tag, term & data platform filters. All other filters use the default behavior.
 export const SearchFilterLabel = ({ field, value, entity, count, hideCount }: Props) => {
     const entityRegistry = useEntityRegistry();

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({
                             <Label ellipsis={{ tooltip: label }} style={{ maxWidth: 150 }}>
                                 {isSubTypeFilter ? capitalizeFirstLetterOnly(label as string) : label}
                             </Label>
-                            <CountText>{count}</CountText>
+                            <CountText>{countText}</CountText>
                             {nestedOptions && nestedOptions.length > 0 && (
                                 <ArrowButton
                                     icon={<CaretUpOutlined />}

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 (
         <DropdownMenu alignRight={alignRight} data-testid="filter-dropdown">
             <ScrollableContent>
@@ -101,7 +104,7 @@ export default function OptionsDropdownMenu({
                     </LoadingWrapper>
                 )}
             </ScrollableContent>
-            <StyledButton type="text" onClick={updateFilters} data-testid="update-filters">
+            <StyledButton id="updateFiltersButton" type="text" onClick={updateFilters} data-testid="update-filters">
                 Update
             </StyledButton>
         </DropdownMenu>

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 = () => {
                         <ExpandableNode.Title color={color} size={16} padLeft>
                             {registry.getCollectionName(entityType)}
                         </ExpandableNode.Title>
-                        <Count color={color}>{formatNumber(entityAggregation.count)}</Count>
+                        <Count color={color}>{countText}</Count>
                     </ExpandableNode.HeaderLeft>
                     <ExpandableNode.CircleButton isOpen={isOpen && !isClosing} color={color} />
                 </ExpandableNode.Header>

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;