Skip to content

Commit 963d4c0

Browse files
amit-apptwareamit-apptware
committed
feat(ui/incident-v2): add changes for assertion
1 parent c50a526 commit 963d4c0

File tree

4 files changed

+58
-132
lines changed

4 files changed

+58
-132
lines changed

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

-86
This file was deleted.

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

+11-7
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const AcrylAssertionList = () => {
2626
...ASSERTION_DEFAULT_RAW_DATA,
2727
});
2828
// TODO we need to create setter function to set the filter as per the filter component
29-
const [filter, setFilters] = useState<AssertionListFilter>(ASSERTION_DEFAULT_FILTERS);
29+
const [selectedFilters, setSelectedFilters] = useState<AssertionListFilter>(ASSERTION_DEFAULT_FILTERS);
3030

3131
const [assertionMonitorData, setAssertionMonitorData] = useState<Assertion[]>([]);
3232

@@ -43,7 +43,7 @@ export const AcrylAssertionList = () => {
4343

4444
// get filtered Assertion as per the filter object
4545
const getFilteredAssertions = (assertions: Assertion[]) => {
46-
const filteredAssertionData: AssertionTable = getFilteredTransformedAssertionData(assertions, filter);
46+
const filteredAssertionData: AssertionTable = getFilteredTransformedAssertionData(assertions, selectedFilters);
4747
setVisibleAssertions(filteredAssertionData);
4848
};
4949

@@ -62,7 +62,11 @@ export const AcrylAssertionList = () => {
6262
getFilteredAssertions(assertionMonitorData);
6363
}
6464
// eslint-disable-next-line react-hooks/exhaustive-deps
65-
}, [filter]);
65+
}, [selectedFilters]);
66+
67+
const handleFilterChange = (filter: any) => {
68+
setSelectedFilters(filter);
69+
};
6670

6771
const renderListTable = () => {
6872
if (loading) {
@@ -73,7 +77,7 @@ export const AcrylAssertionList = () => {
7377
<AcrylAssertionListTable
7478
contract={contract}
7579
assertionData={visibleAssertions}
76-
filter={filter}
80+
filter={selectedFilters}
7781
refetch={() => {
7882
refetch();
7983
contractRefetch();
@@ -91,12 +95,12 @@ export const AcrylAssertionList = () => {
9195
<AcrylAssertionListFilters
9296
filterOptions={visibleAssertions?.filterOptions}
9397
originalFilterOptions={visibleAssertions?.originalFilterOptions}
94-
setFilters={setFilters}
95-
filter={filter}
9698
filteredAssertions={visibleAssertions}
99+
selectedFilters={selectedFilters}
100+
setSelectedFilters={setSelectedFilters}
101+
handleFilterChange={handleFilterChange}
97102
/>
98103
)}
99-
100104
{renderListTable()}
101105
</>
102106
);

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

+40-35
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useMemo, useState } from 'react';
22
import styled from 'styled-components';
3+
import { FilterSelect } from '@src/app/entityV2/shared/FilterSelect';
34
import { GroupBySelect } from '@src/app/entityV2/shared/GroupBySelect';
45
import { InlineListSearch } from '@src/app/entityV2/shared/components/search/InlineListSearch';
56
import { AcrylAssertionRecommendedFilters } from './AcrylAssertionRecommendedFilters';
67
import { AssertionListFilter, AssertionTable } from './types';
7-
import { AcrylAssertionFilters } from './AcrylAssertionFilters';
8-
import { ASSERTION_GROUP_BY_FILTER_OPTIONS, ASSERTION_DEFAULT_FILTERS } from './constant';
8+
import { ASSERTION_GROUP_BY_FILTER_OPTIONS, ASSERTION_DEFAULT_FILTERS, ASSERTION_FILTER_TYPES } from './constant';
99
import { useSetFilterFromURLParams } from './hooks';
1010

1111
interface FilterItem {
@@ -18,9 +18,10 @@ interface FilterItem {
1818
interface AcrylAssertionListFiltersProps {
1919
filterOptions: any;
2020
originalFilterOptions: any;
21-
setFilters: React.Dispatch<React.SetStateAction<AssertionListFilter>>;
22-
filter: AssertionListFilter;
21+
setSelectedFilters: React.Dispatch<React.SetStateAction<AssertionListFilter>>;
2322
filteredAssertions: AssertionTable;
23+
selectedFilters: any;
24+
handleFilterChange: (filter: any) => void;
2425
}
2526

2627
const SearchFilterContainer = styled.div`
@@ -50,27 +51,26 @@ const StyledFilterContainer = styled.div`
5051
export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps> = ({
5152
filterOptions,
5253
originalFilterOptions,
53-
setFilters,
54-
filter,
5554
filteredAssertions,
55+
handleFilterChange,
56+
selectedFilters,
57+
setSelectedFilters,
5658
}) => {
57-
const [appliedFilters, setAppliedFilters] = useState<FilterItem[]>([]);
58-
const [selectedGroupBy, setSelectedGroupBy] = useState<string | undefined>(filter.groupBy || undefined);
59+
const [appliedRecommendedFilters, setAppliedRecommendedFilters] = useState([]);
5960

6061
const handleSearchTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
6162
const searchText = event.target.value;
62-
setFilters((prev) => ({
63-
...prev,
64-
filterCriteria: { ...prev.filterCriteria, searchText },
65-
}));
63+
handleFilterChange({
64+
...selectedFilters,
65+
filterCriteria: { ...selectedFilters.filterCriteria, searchText },
66+
});
6667
};
6768

6869
const handleAssertionTypeChange = (value: string) => {
69-
setSelectedGroupBy(value);
70-
setFilters((prev) => ({ ...prev, groupBy: value }));
70+
handleFilterChange({ ...selectedFilters, groupBy: value });
7171
};
7272

73-
const handleFilterChange = (updatedFilters: FilterItem[]) => {
73+
const handleFilterOptionChange = (updatedFilters: FilterItem[]) => {
7474
/** Set Recommended Filters when there is value in type,status or source if not then set it as empty to clear the filter */
7575
const selectedRecommendedFilters = updatedFilters.reduce<Record<string, string[]>>(
7676
(acc, selectedfilter) => {
@@ -81,41 +81,45 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
8181
{ type: [], status: [], source: [], column: [] },
8282
);
8383

84-
setFilters((prev) => ({
85-
...prev,
86-
filterCriteria: { ...prev.filterCriteria, ...selectedRecommendedFilters },
87-
}));
88-
setAppliedFilters(updatedFilters);
84+
handleFilterChange({
85+
...selectedFilters,
86+
filterCriteria: { ...selectedFilters.filterCriteria, ...selectedRecommendedFilters },
87+
});
8988
};
9089

9190
/**
9291
* This hook is for setting applied filter when we are getting it from selected Filter state
9392
*/
94-
useEffect(() => {
95-
const { status, type, source, column } = filter.filterCriteria || ASSERTION_DEFAULT_FILTERS.filterCriteria;
93+
const initialSelectedOptions = useMemo(() => {
94+
const { status, type, source, column } =
95+
selectedFilters.filterCriteria || ASSERTION_DEFAULT_FILTERS.filterCriteria;
9696
const recommendedFilters = originalFilterOptions?.recommendedFilters || [];
9797
// just set recommended filters for status, type & Others as of right now
98-
const appliedRecommendedFilters = recommendedFilters.filter(
98+
const selectedRecommendedFilters = recommendedFilters.filter(
9999
(item) =>
100100
status.includes(item.name) ||
101101
type.includes(item.name) ||
102102
source.includes(item.name) ||
103103
column.includes(item.name),
104104
);
105-
setAppliedFilters(appliedRecommendedFilters);
106-
setSelectedGroupBy(filter.groupBy);
105+
setAppliedRecommendedFilters(selectedRecommendedFilters);
106+
return selectedRecommendedFilters?.map((filter) => ({
107+
value: filter.name,
108+
label: filter.displayName,
109+
parentValue: filter.category,
110+
}));
107111
// eslint-disable-next-line react-hooks/exhaustive-deps
108-
}, [filter, filterOptions]);
112+
}, [selectedFilters]);
109113

110114
// set the filter if there is any url filter object presents
111-
useSetFilterFromURLParams(filter, setFilters);
115+
useSetFilterFromURLParams(selectedFilters, setSelectedFilters);
112116

113117
return (
114118
<>
115119
<SearchFilterContainer>
116120
{/* ************Render Search Component ************************* */}
117121
<InlineListSearch
118-
searchText={filter.filterCriteria.searchText}
122+
searchText={selectedFilters.filterCriteria?.searchText}
119123
debouncedSetFilterText={handleSearchTextChange}
120124
matchResultCount={filteredAssertions.searchMatchesCount || 0}
121125
numRows={filteredAssertions.totalCount || 0}
@@ -125,17 +129,18 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
125129
{/* ************Render Filter Component ************************* */}
126130
<FiltersContainer>
127131
<StyledFilterContainer>
128-
<AcrylAssertionFilters
132+
<FilterSelect
129133
filterOptions={originalFilterOptions?.filterGroupOptions || []}
130-
selectedFilters={appliedFilters}
131-
onFilterChange={handleFilterChange}
134+
onFilterChange={handleFilterOptionChange}
135+
excludedCategories={[ASSERTION_FILTER_TYPES.TAG]}
136+
initialSelectedOptions={initialSelectedOptions}
132137
/>
133138
</StyledFilterContainer>
134139
{/* ************Render Group By Component ************************* */}
135140
<div>
136141
<GroupBySelect
137142
options={ASSERTION_GROUP_BY_FILTER_OPTIONS}
138-
selectedValue={selectedGroupBy}
143+
selectedValue={selectedFilters.groupBy}
139144
onSelect={handleAssertionTypeChange}
140145
width={50}
141146
/>
@@ -146,8 +151,8 @@ export const AcrylAssertionListFilters: React.FC<AcrylAssertionListFiltersProps>
146151
{/* ************Render Recommended Filter Component ************************* */}
147152
<AcrylAssertionRecommendedFilters
148153
filters={filterOptions?.recommendedFilters || []}
149-
appliedFilters={appliedFilters}
150-
onFilterChange={handleFilterChange}
154+
appliedFilters={appliedRecommendedFilters}
155+
onFilterChange={handleFilterOptionChange}
151156
/>
152157
</div>
153158
</>

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

+7-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import { DataContract } from '@src/types.generated';
33
import { useEntityData } from '@src/app/entity/shared/EntityContext';
44
import { Table } from '@src/alchemy-components';
55
import { SortingState } from '@src/alchemy-components/components/Table/types';
6+
import { useGetExpandedTableGroupsFromEntityUrnInUrl } from '@src/app/entityV2/shared/hooks';
67

78
import { AssertionProfileDrawer } from '../assertion/profile/AssertionProfileDrawer';
89
import { getEntityUrnForAssertion, getSiblingWithUrn } from '../acrylUtils';
9-
import { useExpandedRowKeys, useOpenAssertionDetailModal } from '../assertion/builder/hooks';
10+
import { useOpenAssertionDetailModal } from '../assertion/builder/hooks';
1011
import { AssertionTable, AssertionListFilter } from './types';
1112
import { useAssertionsTableColumns } from './hooks';
1213
import { StyledTableContainer } from './StyledComponents';
@@ -27,9 +28,11 @@ export const AcrylAssertionListTable = ({ assertionData, filter, refetch, contra
2728
sortOrder: SortingState.ORIGINAL,
2829
});
2930

30-
const { expandedRowKeys, setExpandedRowKeys } = useExpandedRowKeys(
31+
const { expandedGroupIds, setExpandedGroupIds } = useGetExpandedTableGroupsFromEntityUrnInUrl(
3132
assertionData?.groupBy ? assertionData?.groupBy[groupBy] : [],
3233
{ isGroupBy: !!groupBy },
34+
'assertion_urn',
35+
(group) => group.assertions,
3336
);
3437

3538
// get columns data from the custom hooks
@@ -56,7 +59,7 @@ export const AcrylAssertionListTable = ({ assertionData, filter, refetch, contra
5659

5760
const onAssertionExpand = (record) => {
5861
const key = record.name;
59-
setExpandedRowKeys((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
62+
setExpandedGroupIds((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
6063
};
6164

6265
const getGroupData = () => {
@@ -134,7 +137,7 @@ export const AcrylAssertionListTable = ({ assertionData, filter, refetch, contra
134137
},
135138
rowExpandable: () => !!groupBy,
136139
expandIconPosition: 'end',
137-
expandedGroupIds: expandedRowKeys,
140+
expandedGroupIds,
138141
}}
139142
onExpand={onAssertionExpand}
140143
/>

0 commit comments

Comments
 (0)