yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-27 18:07:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Aseem Bansal <asmbansal2@gmail.com>
This commit is contained in:
Chris Collins 2023-08-01 17:38:48 -04:00 committed by GitHub
parent 843f82b943
commit ace74fae05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 },
},
},
});

2
datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
View File

@ -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}

4
datahub-web-react/src/app/search/SearchFilterLabel.tsx
View File

@ -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();

13
datahub-web-react/src/app/search/filters/FilterOption.tsx
View File

@ -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 />}

5
datahub-web-react/src/app/search/filters/OptionsDropdownMenu.tsx
View File

@ -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>

5
datahub-web-react/src/app/search/sidebar/EntityNode.tsx
View File

@ -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>

2
datahub-web-react/src/app/search/utils/constants.ts
View File

@ -124,3 +124,5 @@ export const FilterModes = {
} as const;
export type FilterMode = typeof FilterModes[keyof typeof FilterModes];
export const MAX_COUNT_VAL = 10000;