Skip to content

Commit b25748e

Browse files
AdrianMachadoAdrianMachado
authored
feat(web): UI pagination for Assertion List page (#14859)
1 parent ddffb85 commit b25748e

File tree

17 files changed

+273
-255
lines changed

17 files changed

+273
-255
lines changed

‎datahub-web-react/.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ module.exports = {
1616
jsx: true, // Allows for the parsing of JSX
1717
},
1818
project: './tsconfig.json',
19+
tsconfigRootDir: __dirname,
1920
},
2021
rules: {
2122
'@typescript-eslint/no-explicit-any': 'off',

‎datahub-web-react/src/app/entityV2/shared/components/search/InlineListSearch.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,22 @@ export const InlineListSearch: React.FC<InlineListSearchProps> = ({
2626
entityTypeName,
2727
options,
2828
}) => {
29-
const [debouncedSearchText, setDebouncedSearchText] = useState(searchText);
29+
const [localSearchText, setLocalSearchText] = useState(searchText);
30+
3031
useDebounce(
3132
() => {
32-
debouncedSetFilterText(debouncedSearchText);
33+
debouncedSetFilterText(localSearchText);
3334
},
3435
500,
35-
[debouncedSearchText],
36+
[localSearchText],
3637
);
38+
3739
return (
3840
<SearchContainer>
3941
<StyledInput
40-
value={searchText}
42+
value={localSearchText}
4143
placeholder={options?.placeholder || 'Search...'}
42-
onChange={(e) => setDebouncedSearchText(e.target.value)}
44+
onChange={(e) => setLocalSearchText(e.target.value)}
4345
icon={options?.hidePrefix ? undefined : { icon: 'MagnifyingGlass', source: 'phosphor' }}
4446
label=""
4547
/>

‎datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AcrylAssertionsTable.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ type StyledTableProps = {
1818
showSelect?: boolean;
1919
} & TableProps<any>;
2020

21-
export const StyledTable = styled(Table)<StyledTableProps>`
21+
const BaseStyledTable = styled(Table)<StyledTableProps>`
2222
${(props) => !props.showSelect && `margin-left: -50px;`}
2323
max-width: none;
2424
overflow: inherit;
@@ -27,6 +27,9 @@ export const StyledTable = styled(Table)<StyledTableProps>`
2727
font-weight: 600;
2828
font-size: 12px;
2929
color: ${ANTD_GRAY[8]};
30+
white-space: nowrap;
31+
overflow: hidden;
32+
text-overflow: ellipsis;
3033
}
3134
&&
3235
.ant-table-thead
@@ -40,6 +43,9 @@ export const StyledTable = styled(Table)<StyledTableProps>`
4043
.ant-table-tbody > tr > td {
4144
border: none;
4245
${(props) => props.showSelect && `padding: 16px 20px;`}
46+
white-space: nowrap;
47+
overflow: hidden;
48+
text-overflow: ellipsis;
4349
}
4450
}
4551
&&& .ant-table-cell {
@@ -55,8 +61,19 @@ export const StyledTable = styled(Table)<StyledTableProps>`
5561
&&& .acryl-selected-assertions-table-row {
5662
background-color: ${ANTD_GRAY[4]};
5763
}
64+
&&& .ant-table-fixed-right {
65+
background-color: inherit;
66+
}
67+
&&& .ant-table-tbody > tr > td.ant-table-cell-fix-right {
68+
background-color: inherit;
69+
}
70+
&&& .ant-table-thead > tr > th.ant-table-cell-fix-right {
71+
background-color: inherit;
72+
}
5873
`;
5974

75+
export const StyledTable = BaseStyledTable as <T = any>(props: StyledTableProps & TableProps<T>) => JSX.Element;
76+
6077
const DetailsColumnWrapper = styled.div`
6178
display: flex;
6279
align-items: center;

‎datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AcrylAssertionsTableColumns.tsx‎

Lines changed: 9 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
1-
import { AuditOutlined } from '@ant-design/icons';
2-
import { Tooltip } from '@components';
31
import React from 'react';
4-
import { Link } from 'react-router-dom';
52
import styled from 'styled-components';
63

7-
import { useEntityData } from '@app/entity/shared/EntityContext';
8-
import { REDESIGN_COLORS } from '@app/entityV2/shared/constants';
4+
import { AssertionName } from '@app/entityV2/shared/tabs/Dataset/Validations/AssertionList/AssertionName';
95
import { AssertionListItemActions } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/AssertionListItemActions';
10-
import { AssertionResultDot } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/AssertionResultDot';
11-
import { AssertionResultPopover } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/result/AssertionResultPopover';
12-
import { AssertionDescription } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/AssertionDescription';
13-
import { ResultStatusType } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/resultMessageUtils';
14-
import { isAssertionPartOfContract } from '@app/entityV2/shared/tabs/Dataset/Validations/contract/utils';
15-
import { useEntityRegistry } from '@app/useEntityRegistry';
166

17-
import { Assertion, AssertionRunEvent, DataContract, EntityType } from '@types';
7+
import { Assertion, AssertionRunEvent, DataContract } from '@types';
188

199
const DetailsContainer = styled.div`
2010
display: flex;
@@ -26,24 +16,12 @@ const DetailsContainer = styled.div`
2616
font-size: 14px;
2717
`;
2818

29-
const Result = styled.div`
30-
margin: 0px 40px 0px 48px;
31-
display: flex;
32-
align-items: center;
33-
`;
34-
3519
const ActionButtonContainer = styled.div<{ removeRightPadding?: boolean }>`
3620
display: flex;
3721
align-items: center;
3822
margin-left: ${(props) => (props.removeRightPadding ? 'auto' : undefined)};
3923
`;
4024

41-
const DataContractLogo = styled(AuditOutlined)`
42-
margin-left: 8px;
43-
font-size: 16px;
44-
color: ${REDESIGN_COLORS.BLUE};
45-
`;
46-
4725
interface DetailsColumnProps {
4826
assertion: Assertion;
4927
contract?: DataContract;
@@ -52,53 +30,20 @@ interface DetailsColumnProps {
5230
}
5331

5432
export function DetailsColumn({ assertion, contract, lastEvaluation, onViewAssertionDetails }: DetailsColumnProps) {
55-
const entityRegistry = useEntityRegistry();
56-
const entityData = useEntityData();
57-
5833
if (!assertion.info) {
5934
return <>No details found</>;
6035
}
61-
const disabled = false;
62-
const isPartOfContract = contract && isAssertionPartOfContract(assertion, contract);
36+
6337
return (
6438
<DetailsContainer>
65-
<AssertionResultPopover
39+
<AssertionName
6640
assertion={assertion}
67-
run={lastEvaluation}
68-
showProfileButton
41+
lastEvaluation={lastEvaluation}
42+
lastEvaluationUrl={lastEvaluation?.result?.externalUrl}
43+
platform={assertion.platform}
44+
contract={contract}
6945
onClickProfileButton={onViewAssertionDetails}
70-
placement="right"
71-
resultStatusType={ResultStatusType.LATEST}
72-
>
73-
<Result>
74-
<AssertionResultDot run={lastEvaluation} disabled={disabled} size={18} />
75-
</Result>
76-
</AssertionResultPopover>
77-
<AssertionDescription assertion={assertion} options={{ hideSecondaryLabel: true, showColumnTag: true }} />
78-
{(isPartOfContract && entityData?.urn && (
79-
<Tooltip
80-
title={
81-
<>
82-
Part of Data Contract{' '}
83-
<Link
84-
to={`${entityRegistry.getEntityUrl(
85-
EntityType.Dataset,
86-
entityData.urn,
87-
)}/Quality/Data Contract`}
88-
>
89-
View
90-
</Link>
91-
</>
92-
}
93-
>
94-
<Link
95-
to={`${entityRegistry.getEntityUrl(EntityType.Dataset, entityData.urn)}/Quality/Data Contract`}
96-
>
97-
<DataContractLogo />
98-
</Link>
99-
</Tooltip>
100-
)) ||
101-
undefined}
46+
/>
10247
</DetailsContainer>
10348
);
10449
}

‎datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AcrylValidationsTab.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,6 @@ const TabToolbar = styled.div`
3838
flex: 0 0 auto;
3939
`;
4040

41-
const TabContentWrapper = styled.div`
42-
@media screen and (max-height: 800px) {
43-
display: contents;
44-
overflow: auto;
45-
}
46-
`;
47-
4841
enum TabPaths {
4942
ASSERTIONS = 'List',
5043
DATA_CONTRACT = 'Data Contract',
@@ -148,9 +141,7 @@ export const AcrylValidationsTab = () => {
148141
</Tooltip>
149142
))}
150143
</TabToolbar>
151-
<TabContentWrapper>
152-
{tabs.filter((tab) => tab.path === selectedTab).map((tab) => tab.content)}
153-
</TabContentWrapper>
144+
{tabs.filter((tab) => tab.path === selectedTab).map((tab) => tab.content)}
154145
</>
155146
);
156147
};

‎datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AssertionList/AcrylAssertionList.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Empty } from 'antd';
22
import React, { useEffect, useState } from 'react';
3+
import styled from 'styled-components';
34

45
import { useEntityData } from '@app/entity/shared/EntityContext';
56
import { combineEntityDataWithSiblings } from '@app/entity/shared/siblingUtils';
@@ -19,6 +20,15 @@ import { useGetDatasetContractQuery } from '@src/graphql/contract.generated';
1920
import { useGetDatasetAssertionsWithRunEventsQuery } from '@src/graphql/dataset.generated';
2021
import { Assertion, DataContract } from '@src/types.generated';
2122

23+
const AssertionListContainer = styled.div`
24+
display: flex;
25+
height: 100%;
26+
flex-direction: column;
27+
margin: 0px 20px;
28+
flex: 1;
29+
overflow: hidden;
30+
`;
31+
2232
/**
2333
* Component used for rendering the Assertions Sub Tab on the Validations Tab
2434
*/
@@ -81,7 +91,6 @@ export const AcrylAssertionList = () => {
8191
<AcrylAssertionListTable
8292
contract={contract}
8393
assertionData={visibleAssertions}
84-
filter={selectedFilters}
8594
refetch={() => {
8695
refetch();
8796
contractRefetch();
@@ -93,7 +102,7 @@ export const AcrylAssertionList = () => {
93102
};
94103

95104
return (
96-
<>
105+
<AssertionListContainer>
97106
<AssertionListTitleContainer />
98107
{assertionMonitorData?.length > 0 && (
99108
<AcrylAssertionListFilters
@@ -106,6 +115,6 @@ export const AcrylAssertionList = () => {
106115
/>
107116
)}
108117
{renderListTable()}
109-
</>
118+
</AssertionListContainer>
110119
);
111120
};

‎datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AssertionList/AcrylAssertionListFilters.tsx‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import { AcrylAssertionRecommendedFilters } from '@app/entityV2/shared/tabs/Data
55
import {
66
ASSERTION_DEFAULT_FILTERS,
77
ASSERTION_FILTER_TYPES,
8-
ASSERTION_GROUP_BY_FILTER_OPTIONS,
98
} from '@app/entityV2/shared/tabs/Dataset/Validations/AssertionList/constant';
109
import { useSetFilterFromURLParams } from '@app/entityV2/shared/tabs/Dataset/Validations/AssertionList/hooks';
1110
import { AssertionListFilter, AssertionTable } from '@app/entityV2/shared/tabs/Dataset/Validations/AssertionList/types';
1211
import { FilterSelect } from '@src/app/entityV2/shared/FilterSelect';
13-
import { GroupBySelect } from '@src/app/entityV2/shared/GroupBySelect';
1412
import { InlineListSearch } from '@src/app/entityV2/shared/components/search/InlineListSearch';
1513

1614
interface FilterItem {
@@ -31,9 +29,6 @@ interface AcrylAssertionListFiltersProps {
3129

3230
const SearchFilterContainer = styled.div`
3331
display: flex;
34-
padding: 0px 10px;
35-
margin-bottom: 8px;
36-
margin-top: 8px;
3732
gap: 12px;
3833
justify-content: space-between;
3934
`;
@@ -70,10 +65,6 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
7065
});
7166
};
7267

73-
const handleAssertionTypeChange = (value: string) => {
74-
handleFilterChange({ ...selectedFilters, groupBy: value });
75-
};
76-
7768
const handleFilterOptionChange = (updatedFilters: FilterItem[]) => {
7869
/** Set Recommended Filters when there is value in type,status or source if not then set it as empty to clear the filter */
7970
const selectedRecommendedFilters = updatedFilters.reduce<Record<string, string[]>>(
@@ -140,15 +131,6 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
140131
initialSelectedOptions={initialSelectedOptions}
141132
/>
142133
</StyledFilterContainer>
143-
{/* ************Render Group By Component ************************* */}
144-
<div>
145-
<GroupBySelect
146-
options={ASSERTION_GROUP_BY_FILTER_OPTIONS}
147-
selectedValue={selectedFilters.groupBy}
148-
onSelect={handleAssertionTypeChange}
149-
width={50}
150-
/>
151-
</div>
152134
</FiltersContainer>
153135
</SearchFilterContainer>
154136
<div>

0 commit comments

Comments
 (0)