ATLAS-5168: React UI: Classification searches parent classification instead of child (#488)

Author: pawarprasad123

dashboard/src/components/Table/TableFilters.tsx

@@ -104,7 +104,8 @@ export const TableFilter = ({
   columnVisibilityParams,
   setUpdateTable,
   getSelectedRowModel,
-  memoizedData
+  memoizedData,
+  customLeftButton
 }: any) => {
   const [open, setOpen] = useState<null | HTMLElement>(null);
   const location = useLocation();
@@ -299,6 +300,7 @@ export const TableFilter = ({
     <>
       <Stack direction="row" justifyContent={"space-between"}>
         <Stack direction="row" spacing={1}>
+          {customLeftButton}
           {allTableFilters && (
             <CustomButton
               variant="outlined"

dashboard/src/components/Table/TableLayout.tsx

@@ -352,7 +352,8 @@ const TableLayout: FC<TableProps> = ({
   isClientSidePagination,
   isEmptyData,
   setIsEmptyData,
-  showGoToPage
+  showGoToPage,
+  customLeftButton
 }) => {
   let defaultHideColumns = { ...defaultColumnVisibility };
   const location = useLocation();
@@ -550,6 +551,7 @@ const TableLayout: FC<TableProps> = ({
                   setUpdateTable={setUpdateTable}
                   getSelectedRowModel={getSelectedRowModel}
                   memoizedData={memoizedData}
+                  customLeftButton={customLeftButton}
                 />
               )}
               {isfilterQuery && <Divider />}

dashboard/src/components/TreeNodeIcons.tsx

@@ -277,14 +277,12 @@ const TreeNodeIcons = (props: {
             onClick={(_e) => {
               if (treeName == "Classifications") {
                 const searchParams = new URLSearchParams();
-                searchParams.set(
-                  "tag",
-                  node.types == "child" ? node.label : node.nodeName
-                );
+                const classificationName = node.label
+                  ? node.label.split(" (")[0]
+                  : node.nodeName || node.id;
+                searchParams.set("tag", classificationName);
                 navigate({
-                  pathname: `/tag/tagAttribute/${
-                    node.types == "child" ? node.label : node.nodeName
-                  }`,
+                  pathname: `/tag/tagAttribute/${classificationName}`,
                   search: searchParams.toString()
                 });
                 setExpandNode(null);
@@ -380,9 +378,20 @@ const TreeNodeIcons = (props: {
               const searchParams = new URLSearchParams();
               searchParams.set("searchType", "basic");
               if (treeName == "Classifications") {
-                searchParams.set("tag", node.nodeName || node.id);
+                let classificationName: string;
+                if (node.label) {
+                  classificationName = node.label.split(" (")[0];
+                } else if (node.nodeName) {
+                  classificationName = node.nodeName;
+                } else {
+                  classificationName = node.id;
+                }
+                searchParams.set("tag", classificationName);
               } else if (treeName == "Glossary") {
-                searchParams.set("term", node.id);
+                const termValue = node.types == "child" && node.parent
+                  ? `${node.id}@${node.parent}`
+                  : node.id;
+                searchParams.set("term", termValue);
               }
               navigate({
                 pathname: "/search/searchResult",

dashboard/src/models/tableLayoutType.ts

@@ -56,4 +56,5 @@ export interface TableProps {
   isEmptyData?: boolean;
   setIsEmptyData?: React.Dispatch<React.SetStateAction<boolean>>;
   showGoToPage?: boolean;
+  customLeftButton?: React.ReactNode;
 }

dashboard/src/views/Administrator/BusinessMetadataTab.tsx

@@ -197,29 +197,7 @@ const BusinessMetadataTab = ({ setForm, setBMAttribute }: any) => {
 
   return (
     <Stack direction="column">
-      <Stack padding={2} position="relative">
-        <div style={{ height: "0" }}>
-          <CustomButton
-            variant="contained"
-            sx={{
-              position: "absolute",
-              marginTop: "13px",
-              marginLeft: "13px",
-              left: "16px"
-            }}
-            size="small"
-            onClick={(_e: any) => {
-              setForm(true);
-              setBMAttribute({});
-              dispatchState(setEditBMAttribute({}));
-            }}
-            startIcon={<AddIcon fontSize="small" />}
-            data-cy="createBusinessMetadata"
-          >
-            Create Business Metadata
-          </CustomButton>
-        </div>
-
+      <Stack padding={2}>
         <TableLayout
           data={businessMetadataDefs || []}
           columns={defaultColumns}
@@ -233,6 +211,21 @@ const BusinessMetadataTab = ({ setForm, setBMAttribute }: any) => {
           showRowSelection={false}
           tableFilters={true}
           expandRow={true}
+          customLeftButton={
+            <CustomButton
+              variant="contained"
+              size="small"
+              onClick={(_e: any) => {
+                setForm(true);
+                setBMAttribute({});
+                dispatchState(setEditBMAttribute({}));
+              }}
+              startIcon={<AddIcon fontSize="small" />}
+              data-cy="createBusinessMetadata"
+            >
+              Create Business Metadata
+            </CustomButton>
+          }
           auditTableDetails={{
             Component: BusinessMetadataAtrribute,
             componentProps: {

dashboard/src/views/DetailPage/ClassificationDetailsLayout.tsx

@@ -56,7 +56,7 @@ const ClassificationDetailsLayout = () => {
         loading={loading}
         attributeDefs={attributeDefs}
       />
-      <SearchResult classificationParams={tagName} />
+      <SearchResult classificationParams={tagName} hideFilters={true} />
     </Stack>
   );
 };

dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/BMAttributesFields.tsx

@@ -140,20 +140,20 @@ const BMAttributesFields = ({ obj, control, index }: any) => {
         defaultValue={""}
         render={({ field }) => {
           return (
-            <Stack gap="0.5rem">
-              <div style={{ position: "relative", flexBasis: "100%" }}>
-                {typeName == "string" ? (
-                  <ReactQuill
+          <Stack gap="0.5rem">
+            <div style={{ position: "relative", flexBasis: "100%" }}>
+              {typeName == "string" ? (
+                <ReactQuill
                     key={`quill-${index}-${name}`}
-                    theme="snow"
-                    placeholder={"Enter String"}
-                    onChange={(text) => {
-                      field.onChange(text);
-                    }}
-                    className="classification-form-editor"
-                    value={typeof field.value === "string" ? field.value : ""}
-                  />
-                ) : (
+                  theme="snow"
+                  placeholder={"Enter String"}
+                  onChange={(text) => {
+                    field.onChange(text);
+                  }}
+                  className="classification-form-editor"
+                  value={typeof field.value === "string" ? field.value : ""}
+                />
+              ) : (
                 <TextField
                   margin="none"
                   fullWidth

dashboard/src/views/DetailPage/GlossaryDetails/GlossaryDetailsLayout.tsx

@@ -142,7 +142,7 @@ const GlossaryDetailLayout = () => {
                 {(activeTab == undefined || activeTab === "entities") &&
                   !isEmpty(data) && (
                     <div style={{ padding: "16px" }}>
-                      <SearchResult glossaryTypeParams={qualifiedName} />
+                      <SearchResult glossaryTypeParams={qualifiedName} hideFilters={true} />
                     </div>
                   )}
                 {activeTab === "entitiesProperties" && (

dashboard/src/views/SearchResult/SearchResult.tsx

@@ -83,7 +83,7 @@ let defaultColumnsName: Array<string> = [
   "term"
 ];
 
-const SearchResult = ({ classificationParams, glossaryTypeParams }: any) => {
+const SearchResult = ({ classificationParams, glossaryTypeParams, hideFilters }: any) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchData, setSearchData] = useState<any>([]);
   const [loader, setLoader] = useState(true);
@@ -947,7 +947,7 @@ const SearchResult = ({ classificationParams, glossaryTypeParams }: any) => {
         showPagination={true}
         showRowSelection={!isDslAggregate}
         // showRowSelection={true}
-        tableFilters={true}
+        tableFilters={!hideFilters}
         assignFilters={
           !isEmpty(classificationParams || glossaryTypeParams)
             ? {
@@ -956,10 +956,10 @@ const SearchResult = ({ classificationParams, glossaryTypeParams }: any) => {
               }
             : null
         }
-        queryBuilder={true}
-        allTableFilters={true}
+        queryBuilder={!hideFilters}
+        allTableFilters={!hideFilters}
         setUpdateTable={setUpdateTable}
-        isfilterQuery={true}
+        isfilterQuery={!hideFilters}
         isEmptyData={isEmptyData}
         setIsEmptyData={setIsEmptyData}
         showGoToPage={true}

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

@@ -595,15 +595,13 @@ const BarTreeView: FC<{
         break;
     }
 
-    // Note: Don't delete filters here for CustomFilters - they will be set by setCustomFiltersSearchParams
     if (treeName !== "CustomFilters") {
-      searchParams.delete("attributes");
-      searchParams.delete("entityFilters");
-      searchParams.delete("tagFilters");
-      searchParams.delete("relationshipFilters");
-      // Always reset pagination defaults on tree navigation
-      searchParams.set("pageLimit", "25");
-      searchParams.set("pageOffset", "0");
+    searchParams.delete("attributes");
+    searchParams.delete("entityFilters");
+    searchParams.delete("tagFilters");
+    searchParams.delete("relationshipFilters");
+    searchParams.set("pageLimit", "25");
+    searchParams.set("pageOffset", "0");
     }
   };
 
@@ -654,7 +652,7 @@ const BarTreeView: FC<{
 
         // Step 1: Set searchType based on saved search type
         if (params.searchType) {
-          const searchTypeValue = params.searchType.toLowerCase() === "advanced" ? "advanced" : "basic";
+          const searchTypeValue = params.searchType === "ADVANCED" ? "dsl" : "basic";
           searchParams.set("searchType", searchTypeValue);
         }
 
@@ -729,7 +727,7 @@ const BarTreeView: FC<{
           }
         }
 
-        searchParams.set("isCF", "true");
+      searchParams.set("isCF", "true");
       }
     } else {
       searchParams.set("relationshipName", node.id);