Skip to content

Commit 7e3152c

Browse files
Brijesh619Brijesh619
committed
ATLAS-5044: [React UI] Fix node expand/collapse and selection issues in TreeView component within sidebar
1 parent ec502bc commit 7e3152c

File tree

15 files changed

+1178
-1676
lines changed

15 files changed

+1178
-1676
lines changed

‎dashboard/src/components/DialogShowMoreLess.tsx‎

Lines changed: 39 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,17 @@ import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
3030
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
3131
import AddTag from "@views/Classification/AddTag";
3232
import { useAppDispatch, useAppSelector } from "@hooks/reducerHook";
33-
import AssignTerm from "@views/Glossary/AssignTerm";
34-
import AssignCategory from "@views/Glossary/AssignCategory";
3533
import AddTagAttributes from "@views/Classification/AddTagAttributes";
3634
import { fetchGlossaryDetails } from "@redux/slice/glossaryDetailsSlice";
3735
import { fetchDetailPageData } from "@redux/slice/detailPageSlice";
3836
import { fetchGlossaryData } from "@redux/slice/glossarySlice";
37+
import AssignGlossaryItem from "@views/Glossary/AssignGlossaryItem";
38+
import {
39+
assignGlossaryType,
40+
assignTermstoEntites
41+
} from "@api/apiMethods/glossaryApiMethod";
3942

4043
const CHIP_MAX_WIDTH = "200px";
41-
const ITEM_HEIGHT = 48;
4244

4345
const DialogShowMoreLess = ({
4446
value,
@@ -81,14 +83,12 @@ const DialogShowMoreLess = ({
8183
const toastId: any = useRef(null);
8284
const { guid }: any = useParams();
8385
const dispatchApi = useAppDispatch();
84-
// const navigate = useNavigate();
8586
const location = useLocation();
8687
const searchParams = new URLSearchParams(location.search);
8788
const gType = searchParams.get("gtype");
8889
const [openModal, setOpenModal] = useState<boolean>(false);
8990
const [tagModal, setTagModal] = useState<boolean>(false);
9091
const [termModal, setTermModal] = useState<boolean>(false);
91-
const [categoryModal, setCategoryModal] = useState<boolean>(false);
9292
const [attributeModal, setAttributeModal] = useState<boolean>(false);
9393
const [removeLoader, setRemoveLoader] = useState(false);
9494

@@ -99,9 +99,7 @@ const DialogShowMoreLess = ({
9999
const handleCloseTermModal = () => {
100100
setTermModal(false);
101101
};
102-
const handleCloseCategoryModal = () => {
103-
setCategoryModal(false);
104-
};
102+
105103
const handleCloseAttributeModal = () => {
106104
setAttributeModal(false);
107105
};
@@ -131,7 +129,7 @@ const DialogShowMoreLess = ({
131129
setRemoveLoader(true);
132130
if (colName == "Classification") {
133131
await removeApiMethod(
134-
detailPage ? entity.guid : value.guid,
132+
entity?.guid || value.guid,
135133
currentValue.selectedValue
136134
);
137135
} else if (colName == "Term" || colName == "Category") {
@@ -149,28 +147,30 @@ const DialogShowMoreLess = ({
149147
}
150148
}
151149
);
152-
if (isEmpty(guid) || detailPage) {
150+
if ((isEmpty(guid) || detailPage) && !relatedTerm) {
153151
await removeApiMethod(
154-
detailPage ? selectedTerm.guid : selectedTerm.termGuid,
152+
selectedTerm?.guid || selectedTerm.termGuid,
155153

156154
{
157-
guid: detailPage ? entity.guid : value.guid,
158-
relationshipGuid: detailPage
159-
? selectedTerm.relationshipGuid
160-
: selectedTerm.relationGuid
155+
guid: entity?.guid || value.guid,
156+
relationshipGuid:
157+
selectedTerm?.relationshipGuid || selectedTerm.relationGuid
161158
}
162159
);
163-
} else if (!detailPage && !isShowMoreLess) {
160+
} else if ((!detailPage && !isShowMoreLess) || relatedTerm) {
164161
let values = { ...value };
165162
let data;
166163
if (colName == "Term") {
167164
data = values?.[columnVal].filter(
168-
(obj: { displayText: string }) => {
169-
return obj.displayText != currentValue.selectedValue;
165+
(obj: { qualifiedName: string }) => {
166+
return obj.qualifiedName != currentValue.selectedValue;
170167
}
171168
);
172-
173-
values["terms"] = data;
169+
if (relatedTerm) {
170+
values[columnVal] = data;
171+
} else {
172+
values["terms"] = data;
173+
}
174174
} else {
175175
data = values?.[columnVal].filter(
176176
(obj: { displayText: string }) => {
@@ -180,11 +180,7 @@ const DialogShowMoreLess = ({
180180
values["categories"] = data;
181181
}
182182

183-
await removeApiMethod(
184-
guid,
185-
colName == "Term" ? "category" : "term",
186-
values
187-
);
183+
await removeApiMethod(guid, values);
188184
}
189185
}
190186
setOpenModal(false);
@@ -238,9 +234,7 @@ const DialogShowMoreLess = ({
238234
if (colName == "Classification" || colName == "Propagated Classification") {
239235
let keys = Array.from(searchParams.keys());
240236
for (let i = 0; i < keys.length; i++) {
241-
// if (keys[i] != "searchType") {
242237
searchParams.delete(keys[i]);
243-
// }
244238
}
245239
searchParams.set("tag", values);
246240

@@ -429,9 +423,11 @@ const DialogShowMoreLess = ({
429423
setTagModal(true);
430424
} else if (colName == "Term") {
431425
setTermModal(true);
432-
} else if (colName == "Category") {
433-
setCategoryModal(true);
434-
} else if (colName == "Attribute") {
426+
}
427+
// else if (colName == "Category") {
428+
// setCategoryModal(true);
429+
// }
430+
else if (colName == "Attribute") {
435431
setAttributeModal(true);
436432
}
437433
}}
@@ -449,11 +445,6 @@ const DialogShowMoreLess = ({
449445
anchorEl={openMenu}
450446
open={open}
451447
onClose={handleClose}
452-
PaperProps={{
453-
style: {
454-
maxHeight: ITEM_HEIGHT * 4.5
455-
}
456-
}}
457448
>
458449
{value?.[columnVal].map((obj: any, index: number) => {
459450
if (index > 0) {
@@ -517,8 +508,6 @@ const DialogShowMoreLess = ({
517508
setTagModal(true);
518509
} else if (colName == "Term") {
519510
setTermModal(true);
520-
} else if (colName == "Category") {
521-
setCategoryModal(true);
522511
} else if (colName == "Attribute") {
523512
setAttributeModal(true);
524513
}
@@ -564,35 +553,33 @@ const DialogShowMoreLess = ({
564553
setRowSelection={undefined}
565554
/>
566555
)}
556+
567557
{termModal && colName == "Term" && !relatedTerm && (
568-
<AssignTerm
558+
<AssignGlossaryItem
569559
open={termModal}
570-
// glossaryType={colName}
571560
onClose={handleCloseTermModal}
572561
data={value}
573-
relatedTerm={relatedTerm}
562+
relatedItem={relatedTerm}
574563
updateTable={setUpdateTable}
564+
itemType="term"
565+
dataKey="terms"
566+
assignApiMethod={assignTermstoEntites}
567+
treeLabel="Term"
575568
/>
576569
)}
577570

578571
{termModal && colName == "Term" && relatedTerm && (
579-
<AssignTerm
572+
<AssignGlossaryItem
580573
open={termModal}
581-
// glossaryType={colName}
582574
onClose={handleCloseTermModal}
583575
data={value}
584-
relatedTerm={relatedTerm}
576+
relatedItem={relatedTerm}
585577
updateTable={setUpdateTable}
586578
columnVal={columnVal}
587-
/>
588-
)}
589-
590-
{categoryModal && colName == "Category" && (
591-
<AssignCategory
592-
open={categoryModal}
593-
onClose={handleCloseCategoryModal}
594-
data={value}
595-
updateTable={setUpdateTable}
579+
itemType="term"
580+
dataKey="terms"
581+
assignApiMethod={assignGlossaryType}
582+
treeLabel="Term"
596583
/>
597584
)}
598585

‎dashboard/src/components/Table/TableFilters.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ import Filters from "@components/QueryBuilder/Filters";
4646
import { attributeFilter } from "@utils/CommonViewFunction";
4747
import { toast } from "react-toastify";
4848
import { downloadSearchResultsCSV } from "@api/apiMethods/downloadApiMethod";
49-
import AssignTerm from "@views/Glossary/AssignTerm";
49+
import AssignGlossaryItem from "@views/Glossary/AssignGlossaryItem";
50+
import { assignTermstoEntites } from "@api/apiMethods/glossaryApiMethod";
5051

5152
export const StyledMenu = styled((props: MenuProps) => (
5253
<div style={{ position: "relative" }}>
@@ -497,14 +498,17 @@ export const TableFilter = ({
497498
)}
498499

499500
{termModal && (
500-
<AssignTerm
501+
<AssignGlossaryItem
501502
open={termModal}
502-
columnVal={"terms"}
503503
onClose={handleCloseTermModal}
504504
data={selectedRow}
505-
relatedTerm={undefined}
505+
relatedItem={undefined}
506506
updateTable={setUpdateTable}
507507
setRowSelection={setRowSelection}
508+
itemType="term"
509+
dataKey="terms"
510+
treeLabel="Term"
511+
assignApiMethod={assignTermstoEntites}
508512
/>
509513
)}
510514

‎dashboard/src/models/treeStructureType.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface TypeHeaderState {
2727
}
2828

2929
export interface TreeNode {
30+
text?: string | null;
3031
id: string;
3132
label: string;
3233
children?: TreeNode[];

‎dashboard/src/utils/CommonViewFunction.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
* limitations under the License.
1818
*/
1919

20+
import { useMemo } from "react";
2021
import {
2122
extractFromUrlForSearch,
2223
queryBuilderApiOperatorToUI,
@@ -26,6 +27,7 @@ import {
2627
} from "./Enum";
2728
import {
2829
convertToValidDate,
30+
customSortBy,
2931
formatedDate,
3032
getUrlState,
3133
isEmpty,
@@ -305,3 +307,40 @@ export const generateObjectForSaveSearchApi = (options) => {
305307
return obj;
306308
}
307309
};
310+
311+
export const getGlossaryChildrenData = (serviceTypeData: any[]) => {
312+
const child = (childs: any): any[] => {
313+
if (isEmpty(childs)) return [];
314+
315+
return customSortBy(
316+
childs.map((obj: any) => {
317+
const { name = "", children, types = "", parent = "" } = obj;
318+
return {
319+
id: name,
320+
label: name,
321+
text: name,
322+
children: !isEmpty(children) ? child(children.filter(Boolean)) : [],
323+
types,
324+
parent,
325+
guid: obj?.guid || "",
326+
cGuid: obj?.cGuid || ""
327+
};
328+
}),
329+
["label"]
330+
);
331+
};
332+
333+
return serviceTypeData.map((entity: any) => {
334+
const key = Object.keys(entity || {})?.[0] ?? {};
335+
const value = entity?.[key] ?? {};
336+
return {
337+
id: value?.name ?? "",
338+
label: value?.name ?? "",
339+
text: value?.name ?? "",
340+
children: child(value?.children ?? []),
341+
types: value?.types ?? "",
342+
parent: value?.parent ?? "",
343+
guid: value?.guid ?? ""
344+
};
345+
});
346+
};

‎dashboard/src/utils/Utils.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -440,7 +440,13 @@ let groupBy = function (xs: any[], key: string) {
440440
};
441441

442442
const noTreeData = () => {
443-
return [{ id: "No Records Found", label: "No Records Found" }];
443+
return [
444+
{
445+
id: "No Records Found",
446+
label: "No Records Found",
447+
text: "No Records Found"
448+
}
449+
];
444450
};
445451

446452
const sanitizeHtmlContent = (htmlContent: HTMLElement | string | any) => {
@@ -797,6 +803,16 @@ const globalSearchParams = {
797803
dslParams: {}
798804
};
799805

806+
const showToastError = (msg: string, toastId: any) => {
807+
toast.dismiss(toastId.current);
808+
toastId.current = toast.error(msg);
809+
};
810+
811+
const showToastSuccess = (msg: string, toastId: any) => {
812+
toast.dismiss(toastId.current);
813+
toastId.current = toast.success(msg);
814+
};
815+
800816
export {
801817
customSortBy,
802818
customSortByObjectKeys,
@@ -835,5 +851,7 @@ export {
835851
setNavigate,
836852
getNavigate,
837853
globalSearchParams,
838-
globalSearchFilterInitialQuery
854+
globalSearchFilterInitialQuery,
855+
showToastError,
856+
showToastSuccess
839857
};

0 commit comments

Comments
 (0)