ATLAS-5260: ATLAS UI: [UI] Detail page – terms from entity header, labels/UDP save fixes (dashboard + dashboardv2) (#585)

( cherry picked from 459281e)

Author: pawarprasad123

dashboard/src/api/apiMethods/detailpageApiMethod.ts

@@ -25,7 +25,7 @@ import {
   detailPageRelationshipApiUrl,
   detailPageRelationshipAttributesApiUrl
 } from "../apiUrlLinks/detailpageUrl";
-import { _get } from "./apiMethod";
+import { _get, _post } from "./apiMethod";
 
 const getDetailPageData = (guid: string, params: object, header?: string) => {
   const config = {
@@ -60,13 +60,21 @@ const getAuditData = (params: object) => {
   return _get(auditApiurl(), config);
 };
 
-const getLabels = (guid: string, formData: object) => {
+const getEntityHeader = (guid: string) => {
+  const config = {
+    method: "GET",
+    params: {}
+  };
+  return _get(detailpageApiUrl(guid, "header"), config);
+};
+
+const getLabels = (guid: string, formData: string[]) => {
   const config = {
     method: "POST",
     params: {},
     data: formData
   };
-  return _get(detailPageLabelApiUrl(guid), config);
+  return _post(detailPageLabelApiUrl(guid), config);
 };
 
 const getEntityBusinessMetadata = (guid: string, formData: object) => {
@@ -199,6 +207,7 @@ export {
   getDetailPageAuditData,
   getDetailPageRauditData,
   getAuditData,
+  getEntityHeader,
   getLabels,
   getEntityBusinessMetadata,
   getDetailPageRelationship,

dashboard/src/redux/slice/detailPageSlice.ts

@@ -16,8 +16,15 @@
  */
 
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
-import { getDetailPageData } from "../../api/apiMethods/detailpageApiMethod";
+import {
+  getDetailPageData,
+  getEntityHeader
+} from "../../api/apiMethods/detailpageApiMethod";
 import { cloneDeep } from "@utils/Helper";
+import {
+  mapHeaderMeaningsToRelationshipMeanings,
+  shouldMergeMeaningsFromEntityHeader
+} from "@utils/entityDetailMeaningsUtils";
 
 export const fetchDetailPageData = createAsyncThunk(
   "detailPage/fetchDetailPageData",
@@ -26,6 +33,21 @@ export const fetchDetailPageData = createAsyncThunk(
       const response = await getDetailPageData(guid, { minExtInfo: true });
       const { data = {} } = response || {};
       const responseData = cloneDeep(data);
+      const entity = responseData.entity;
+      if (entity && shouldMergeMeaningsFromEntityHeader(entity)) {
+        try {
+          const headerResp = await getEntityHeader(guid);
+          const header = headerResp?.data;
+          const headerMeanings = header?.meanings;
+          if (Array.isArray(headerMeanings) && headerMeanings.length > 0) {
+            entity.relationshipAttributes = entity.relationshipAttributes || {};
+            entity.relationshipAttributes.meanings =
+              mapHeaderMeaningsToRelationshipMeanings(headerMeanings);
+          }
+        } catch {
+          // Terms are optional; detail page still loads without header.
+        }
+      }
       return responseData;
     } catch (error) {
       return rejectWithValue(error);

dashboard/src/utils/entityDetailMeaningsUtils.ts

@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * When entity GET uses ignoreRelationships=true, relationshipAttributes.meanings
+ * is omitted. GET /v2/entity/guid/{guid}/header still returns meanings
+ * (AtlasTermAssignmentHeader[]). Map them to the shape used by entity detail
+ * (guid, relationshipGuid for remove / ShowMoreView).
+ */
+export const mapHeaderMeaningsToRelationshipMeanings = (
+  meanings: unknown
+): any[] => {
+  if (!Array.isArray(meanings) || meanings.length === 0) {
+    return [];
+  }
+  return meanings.map((m: any) => {
+    const guid = m.guid ?? m.termGuid;
+    const relationshipGuid = m.relationshipGuid ?? m.relationGuid;
+    const relationshipStatus =
+      m.relationshipStatus ??
+      (m.status != null ? String(m.status) : "ACTIVE");
+    return {
+      ...m,
+      guid,
+      relationshipGuid,
+      relationshipStatus,
+      termGuid: m.termGuid ?? guid
+    };
+  });
+};
+
+export const shouldMergeMeaningsFromEntityHeader = (entity: any): boolean => {
+  if (!entity || !entity.typeName) {
+    return false;
+  }
+  if (String(entity.typeName).startsWith("AtlasGlossary")) {
+    return false;
+  }
+  const existing = entity.relationshipAttributes?.meanings;
+  return !Array.isArray(existing) || existing.length === 0;
+};

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

@@ -111,19 +111,38 @@ const Labels = ({ loading, labels }: any) => {
     }
   };
 
+  const normalizeLabelsPayload = (raw: unknown): string[] => {
+    if (!Array.isArray(raw)) {
+      return [];
+    }
+    const out: string[] = [];
+    for (const item of raw) {
+      if (typeof item === "string") {
+        const t = item.trim();
+        if (t) {
+          out.push(t);
+        }
+        continue;
+      }
+      if (item && typeof item === "object") {
+        const o = item as { inputValue?: string; value?: string };
+        const v = o.inputValue ?? o.value;
+        if (typeof v === "string" && v.trim()) {
+          out.push(v.trim());
+        }
+      }
+    }
+    return out;
+  };
+
   const onSubmit = async (values: any) => {
-    let formData = { ...values };
-    if(isEmpty(formData.labels) && isEmpty(labels)){
+    const formData = { ...values };
+    const payload = normalizeLabelsPayload(formData.labels);
+    if (payload.length === 0 && (!labels || labels.length === 0)) {
       return;
     }
-    let data = formData.labels?.map((obj: { inputValue: any }) => {
-      if (obj.inputValue) {
-        return obj.inputValue;
-      }
-      return obj;
-    });
     try {
-      await getLabels(guid, data);
+      await getLabels(guid, payload);
       toast.dismiss(toastId.current);
       toastId.current = toast.success(
         "One or more labels were updated successfully"

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

@@ -101,9 +101,19 @@ const UserDefinedProperties = ({ loading, customAttributes, entity }: any) => {
     };
 
   const structureAttributes = (list: any) => {
-    let obj: any = {};
-    list.map((o: any) => {
-      obj[o.key] = o.value;
+    const obj: Record<string, string> = {};
+    if (!Array.isArray(list)) {
+      return obj;
+    }
+    list.forEach((o: { key: string; value: string }) => {
+      const key =
+        typeof o?.key === "string"
+          ? o.key.trim()
+          : String(o?.key ?? "").trim();
+      if (key === "") {
+        return;
+      }
+      obj[key] = o?.value ?? "";
     });
     return obj;
   };
@@ -218,11 +228,15 @@ const UserDefinedProperties = ({ loading, customAttributes, entity }: any) => {
                             variant="outlined"
                             color="success"
                             size="small"
-                            onClick={(e: { stopPropagation: () => void }) => {
-                              e.stopPropagation();
-                              setAddLabel(true);
-                              reset({ customAttributes: [defaultField] });
-                            }}
+                          onClick={(e: { stopPropagation: () => void }) => {
+                            e.stopPropagation();
+                            setAddLabel(true);
+                            reset({
+                              customAttributes: !isEmpty(defaultFieldValues)
+                                ? defaultFieldValues
+                                : [defaultField]
+                            });
+                          }}
                           >
                             Cancel
                           </CustomButton>

dashboard/src/views/DetailPage/EntityDetailTabs/RelationshipCard.tsx

@@ -36,7 +36,7 @@ type RelationshipCardProps = {
 	onToggleSort?: (attributeName: string) => void
 	onToggleShowDeleted?: (attributeName: string) => void
 	onPageLimitChange?: (attributeName: string, value: string) => void
-	onPageLimitSubmit?: (attributeName: string) => void
+	onPageLimitSubmit?: (attributeName: string, rawValue: string) => void
 }
 
 function RelationshipCard({
@@ -63,6 +63,8 @@ function RelationshipCard({
 		return data.length
 	}, [totalCount, data.length])
 
+	const minPageLimit = resolvedTotal <= 1 ? 1 : 2
+
 	const canLoadMore = resolvedTotal > data.length
 	const lastRequestSizeRef = useRef<number | null>(null)
 	const prevScrollRef = useRef<{ height: number; top: number } | null>(null)
@@ -148,7 +150,7 @@ function RelationshipCard({
 		event: React.KeyboardEvent<HTMLInputElement>
 	) => {
 		if (event.key === 'Enter') {
-			onPageLimitSubmit?.(attributeName)
+			onPageLimitSubmit?.(attributeName, event.currentTarget.value)
 		}
 	}
 
@@ -240,17 +242,32 @@ function RelationshipCard({
 	const isEmptyCard = resolvedTotal === 0 && isEmpty(data)
 	const isZeroOrOneRecord = data.length <= 1
 	const bodyStyle = useMemo(() => {
-		if (isZeroOrOneRecord) {
-			return { minHeight: 72 }
-		}
 		const maxVisibleRows = 9
 		const rowHeight = 22
 		const bodyPadding = 16
+		const maxHeight = maxVisibleRows * rowHeight + bodyPadding
+
+		if (isZeroOrOneRecord && !canLoadMore) {
+			return { minHeight: 72 }
+		}
+
+		if (canLoadMore) {
+			const visibleRows = Math.min(Math.max(data.length, 1), maxVisibleRows)
+			let baseHeight = visibleRows * rowHeight + bodyPadding
+			baseHeight = Math.max(baseHeight, 80)
+			const h = Math.min(baseHeight, maxHeight)
+			return {
+				height: h,
+				maxHeight: h,
+				minHeight: 0,
+				overflowY: 'auto' as const,
+			}
+		}
+
 		const visibleRows = Math.min(data.length, maxVisibleRows)
 		const baseHeight = visibleRows * rowHeight + bodyPadding
-		const maxHeight = maxVisibleRows * rowHeight + bodyPadding
 		return { height: Math.min(baseHeight, maxHeight), minHeight: 0 }
-	}, [data.length, isZeroOrOneRecord])
+	}, [data.length, isZeroOrOneRecord, canLoadMore])
 
 	const filteredData = useMemo(() => {
 		const query = searchQuery.trim().toLowerCase()
@@ -398,12 +415,11 @@ function RelationshipCard({
 							<input
 								id={`page-limit-${attributeName}`}
 								type='number'
-								min={1}
-								max={resolvedTotal}
+								min={minPageLimit}
 								value={pageLimit && pageLimit > 0 ? pageLimit : ''}
 								onChange={handlePageLimitInputChange}
 								onKeyDown={handlePageLimitKeyDown}
-								aria-label='Page limit'
+								aria-label={`Page limit (minimum ${minPageLimit} for this card)`}
 							/>
 						</div>
 					</div>