yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-04 12:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui/filters): Improve platform instance filter (#13559)

Browse Source
This commit is contained in:
Andrew Sikowitz 2025-05-19 16:30:56 -07:00 committed by GitHub
parent 3ee25c465c
commit 28b052c367
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datahub-web-react/src/alchemy-components/components/Pills/Pill.tsx
View File

@ -7,6 +7,7 @@ import { ColorOptions, ColorValues, PillVariantOptions, PillVariantValues, SizeV
export const SUPPORTED_CONFIGURATIONS: Record<PillVariantOptions, ColorOptions[]> = { export const SUPPORTED_CONFIGURATIONS: Record<PillVariantOptions, ColorOptions[]> = {
[PillVariantValues.filled]: [ [PillVariantValues.filled]: [
ColorValues.primary,
ColorValues.violet, ColorValues.violet,
ColorValues.blue, ColorValues.blue,
ColorValues.green, ColorValues.green,
@ -15,6 +16,7 @@ export const SUPPORTED_CONFIGURATIONS: Record<PillVariantOptions, ColorOptions[]
ColorValues.gray, ColorValues.gray,
], ],
[PillVariantValues.outline]: [ [PillVariantValues.outline]: [
ColorValues.primary,
ColorValues.violet, ColorValues.violet,
ColorValues.blue, ColorValues.blue,
ColorValues.green, ColorValues.green,

20
datahub-web-react/src/app/searchV2/filters/FilterOption.tsx
View File

@ -3,6 +3,8 @@ import { Button, Checkbox } from 'antd';
import React, { useState } from 'react'; import React, { useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from '@components/theme/foundations/colors';
import { ANTD_GRAY } from '@app/entity/shared/constants'; import { ANTD_GRAY } from '@app/entity/shared/constants';
import { generateColor } from '@app/entityV2/shared/components/styled/StyledTag'; import { generateColor } from '@app/entityV2/shared/components/styled/StyledTag';
import ParentEntities from '@app/searchV2/filters/ParentEntities'; import ParentEntities from '@app/searchV2/filters/ParentEntities';
@ -32,6 +34,7 @@ const FilterOptionWrapper = styled.div<{ addPadding?: boolean }>`
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
margin: 0px 4px; margin: 0px 4px;
label { label {
padding: 12px; padding: 12px;
width: 100%; width: 100%;
@ -39,8 +42,8 @@ const FilterOptionWrapper = styled.div<{ addPadding?: boolean }>`
display: flex; display: flex;
align-items: center; align-items: center;
} }
${(props) => props.addPadding && 'padding-left: 16px;'}
${(props) => props.addPadding && 'padding-left: 16px;'}
&:hover { &:hover {
background-color: ${ANTD_GRAY[3]}; background-color: ${ANTD_GRAY[3]};
} }
@ -48,9 +51,11 @@ const FilterOptionWrapper = styled.div<{ addPadding?: boolean }>`
const StyledCheckbox = styled(Checkbox)` const StyledCheckbox = styled(Checkbox)`
font-size: 14px; font-size: 14px;
.ant-checkbox-inner { .ant-checkbox-inner {
border-color: ${ANTD_GRAY[7]}; border-color: ${ANTD_GRAY[7]};
} }
.ant-checkbox-checked { .ant-checkbox-checked {
.ant-checkbox-inner { .ant-checkbox-inner {
border-color: ${(props) => props.theme.styles['primary-color']}; border-color: ${(props) => props.theme.styles['primary-color']};
@ -113,6 +118,7 @@ const ParentWrapper = styled.div`
const LabelWrapper = styled.div` const LabelWrapper = styled.div`
line-height: normal; line-height: normal;
`; `;
interface Props { interface Props {
filterOption: FilterOptionType; filterOption: FilterOptionType;
selectedFilterOptions: FilterOptionType[]; selectedFilterOptions: FilterOptionType[];
@ -184,7 +190,17 @@ export default function FilterOption({
</ParentWrapper> </ParentWrapper>
)} )}
<LabelCountWrapper> <LabelCountWrapper>
<Label ellipsis={{ tooltip: label }} style={{ maxWidth: 150 }}> <Label
ellipsis={{
tooltip: {
title: label,
showArrow: false,
color: 'white',
overlayInnerStyle: { color: colors.gray[1700] },
},
}}
style={{ maxWidth: 150 }}
>
{isSubTypeFilter ? capitalizeFirstLetterOnly(label as string) : label} {isSubTypeFilter ? capitalizeFirstLetterOnly(label as string) : label}
</Label> </Label>
{includeCount && <CountText>{getCountText()}</CountText>} {includeCount && <CountText>{getCountText()}</CountText>}

3
datahub-web-react/src/app/searchV2/filters/utils.tsx
View File

@ -616,6 +616,9 @@ export const FilterEntityIcon: React.FC<FilterEntityIconProps> = ({ field, entit
case field === PLATFORM_FILTER_NAME && entity !== null: case field === PLATFORM_FILTER_NAME && entity !== null:
return <>{icon}</>; return <>{icon}</>;
case field === DATA_PLATFORM_INSTANCE_FILTER_NAME && entity?.type === EntityType.DataPlatformInstance:
return <>{icon}</>;
case field === TAGS_FILTER_NAME && entity?.type === EntityType.Tag: case field === TAGS_FILTER_NAME && entity?.type === EntityType.Tag:
return <TagColor color={(entity as Tag).properties?.colorHex || ''} colorHash={entity?.urn} />; return <TagColor color={(entity as Tag).properties?.colorHex || ''} colorHash={entity?.urn} />;

3
datahub-web-react/src/graphql/search.graphql
View File

@ -337,6 +337,9 @@ fragment autoCompleteFields on Entity {
} }
} }
} }
... on DataPlatformInstance {
...dataPlatformInstanceFields
}
} }
query getAutoCompleteResults($input: AutoCompleteInput!) { query getAutoCompleteResults($input: AutoCompleteInput!) {