ATLAS-5044: [React UI] Fix node expand/collapse and selection issues in TreeView component within sidebar

Author: Brijesh619

dashboard/src/models/treeStructureType.ts

@@ -27,6 +27,7 @@ export interface TypeHeaderState {
 }
 
 export interface TreeNode {
+  text: string | null;
   id: string;
   label: string;
   children?: TreeNode[];

dashboard/src/utils/Utils.ts

@@ -440,7 +440,13 @@ let groupBy = function (xs: any[], key: string) {
 };
 
 const noTreeData = () => {
-  return [{ id: "No Records Found", label: "No Records Found" }];
+  return [
+    {
+      id: "No Records Found",
+      label: "No Records Found",
+      text: "No Records Found"
+    }
+  ];
 };
 
 const sanitizeHtmlContent = (htmlContent: HTMLElement | string | any) => {

dashboard/src/views/DetailPage/DetailPageAttributes.tsx

@@ -46,6 +46,7 @@ import AddTagAttributes from "@views/Classification/AddTagAttributes";
 import AssignCategory from "@views/Glossary/AssignCategory";
 import AssignTerm from "@views/Glossary/AssignTerm";
 import ShowMoreText from "@components/ShowMore/ShowMoreText";
+import AddUpdateGlossaryForm from "@views/Glossary/AddUpdateGlossaryForm";
 
 const DetailPageAttribute = ({
   data,
@@ -63,13 +64,17 @@ const DetailPageAttribute = ({
   const [tagModal, setTagModal] = useState<boolean>(false);
   const [editTermModal, setEditTermModal] = useState(false);
   const [editCategoryModal, setEditCategoryModal] = useState(false);
-
+  const [glossaryModal, setGlossaryModal] = useState<boolean>(false);
   const [openAddTagModal, setOpenAddTagModal] = useState<boolean>(false);
   const [attributeModal, setAttributeModal] = useState<boolean>(false);
   const [openAddTermModal, setOpenAddTermModal] = useState<boolean>(false);
 
   const [categoryModal, setCategoryModal] = useState<boolean>(false);
 
+  const handleCloseGlossaryModal = () => {
+    setGlossaryModal(false);
+  };
+
   const handleCloseTermModal = () => {
     setOpenAddTermModal(false);
   };
@@ -140,14 +145,17 @@ const DetailPageAttribute = ({
                     if (!isEmpty(tagName)) {
                       setTagModal(true);
                     }
+                    if (!isEmpty(guid) && gtypeParams == "glossary") {
+                      setGlossaryModal(true);
+                    }
                     if (!isEmpty(guid) && gtypeParams == "term") {
                       setEditTermModal(true);
                     }
                     if (!isEmpty(guid) && gtypeParams == "category") {
                       setEditCategoryModal(true);
                     }
                   }}
-                  data-cy="addTag"
+                  data-cy="editButton"
                 >
                   <EditOutlinedIcon className="table-filter-refresh" />
                 </CustomButton>
@@ -696,6 +704,15 @@ const DetailPageAttribute = ({
           relatedTerm={undefined}
         />
       )}
+
+      {glossaryModal && (
+        <AddUpdateGlossaryForm
+          open={glossaryModal}
+          isAdd={false}
+          onClose={handleCloseGlossaryModal}
+          node={data || {}}
+        />
+      )}
     </>
   );
 };

dashboard/src/views/Glossary/AssignCategory.tsx

@@ -182,6 +182,7 @@ const AssignCategory = ({
           return {
             id: obj?.name,
             label: obj?.name,
+            text: obj?.name ?? null,
             children:
               obj?.children != undefined
                 ? child(
@@ -204,6 +205,7 @@ const AssignCategory = ({
       serviceTypeData.map((entity: any) => ({
         id: entity[Object.keys(entity)[0]].name,
         label: entity[Object.keys(entity)[0]].name,
+        text: entity[Object.keys(entity)[0]].name ?? null,
         children: child(
           entity[Object.keys(entity)[0]].children as ChildrenInterfaces[]
         ),

dashboard/src/views/Glossary/AssignTerm.tsx

@@ -275,6 +275,7 @@ const AssignTerm = ({
     return (serviceTypeData: ServiceTypeInterface[]) =>
       serviceTypeData.map((entity: any) => ({
         id: entity[Object.keys(entity)[0]].name,
+        text: entity[Object.keys(entity)[0]].name,
         label: entity[Object.keys(entity)[0]].name,
         children: child(
           entity[Object.keys(entity)[0]].children as ChildrenInterfaces[]

dashboard/src/views/SearchResult/SearchResult.tsx

@@ -765,17 +765,7 @@ const SearchResult = ({ classificationParams, glossaryTypeParams }: any) => {
   const getDefaultSort = useMemo(() => [{ id: "name", asc: true }], []);
 
   return (
-    <Stack
-      // paddingTop={
-      //   isEmpty(classificationParams || glossaryTypeParams) ? 0 : "40px"
-      // }
-      // marginTop={
-      //   isEmpty(classificationParams || glossaryTypeParams) ? 0 : "20px"
-      // }
-      // padding="16px"
-      position="relative"
-      gap={"1rem"}
-    >
+    <Stack position="relative" gap={"1rem"}>
       {!isEmpty(classificationParams || glossaryTypeParams) && (
         <Stack
           direction="row"

dashboard/src/views/SideBar/SideBarTree/GlossaryTree.tsx

@@ -159,6 +159,7 @@ const GlossaryTree = ({ sideBarOpen, searchTerm }: Props) => {
           return {
             id: obj?.name,
             label: obj?.name,
+            text: obj?.name ?? null,
             children:
               obj?.children != undefined
                 ? child(
@@ -181,6 +182,7 @@ const GlossaryTree = ({ sideBarOpen, searchTerm }: Props) => {
       serviceTypeData.map((entity: any) => ({
         id: entity[Object.keys(entity)[0]].name,
         label: entity[Object.keys(entity)[0]].name,
+        text: entity[Object.keys(entity)[0]].name ?? null,
         children: child(
           entity[Object.keys(entity)[0]].children as ChildrenInterfaces[]
         ),