feat: Added related term section in term details page

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryAdvancedOperations.spec.ts

@@ -916,23 +916,10 @@ test.describe('Glossary Advanced Operations', () => {
 
       await waitForAllLoadersToDisappear(page);
 
-      // Clear all related terms
-
-      await page
-        .getByTestId('tag-selector')
-        .locator('#tagsForm_tags')
-        .press('Backspace');
-      await page
-        .getByTestId('tag-selector')
-        .locator('#tagsForm_tags')
-        .press('Backspace');
-      await page
-        .getByTestId('tag-selector')
-        .locator('#tagsForm_tags')
-        .press('Backspace');
+      await page.locator('[data-testid^="remove-row-"]').first().click();
 
       const validateRes = page.waitForResponse('/api/v1/glossaryTerms/*');
-      await page.getByTestId('saveAssociatedTag').click();
+      await page.getByTestId('save-related-terms').click();
       await validateRes;
 
       // Verify related term is removed

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Glossary/GlossaryTermDetails.spec.ts

@@ -187,12 +187,10 @@ test.describe('Glossary Term Details Operations', () => {
         .getByTestId('edit-button')
         .click();
 
-      // Remove the related term by clicking the close icon on the tag
-      // Use a more robust selector that doesn't rely on FQN in attribute
-      await page.locator('.ant-tag-close-icon').first().click();
+      await page.locator('[data-testid^="remove-row-"]').first().click();
 
       const saveRes = page.waitForResponse('/api/v1/glossaryTerms/*');
-      await page.getByTestId('saveAssociatedTag').click();
+      await page.getByTestId('save-related-terms').click();
       await saveRes;
 
       // Verify related term is removed
@@ -235,17 +233,19 @@ test.describe('Glossary Term Details Operations', () => {
 
       await expect(page.getByTestId(term1Name)).toBeVisible();
 
+      // Move mouse away to dismiss any tooltip that may be overlapping the edit button
+      await page.mouse.move(0, 0);
+
       // Clean up: remove the related term from term2's page - use edit button since term exists
       await page
         .getByTestId('related-term-container')
         .getByTestId('edit-button')
         .click();
 
-      // Use a more robust selector
-      await page.locator('.ant-tag-close-icon').first().click();
+      await page.locator('[data-testid^="remove-row-"]').first().click();
 
       const saveRes = page.waitForResponse('/api/v1/glossaryTerms/*');
-      await page.getByTestId('saveAssociatedTag').click();
+      await page.getByTestId('save-related-terms').click();
       await saveRes;
     } finally {
       await glossaryTerm1.delete(apiContext);

openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts

@@ -1183,20 +1183,27 @@ export const addRelatedTerms = async (
   relatedTerms: GlossaryTerm[]
 ) => {
   await page.getByTestId('related-term-add-button').click();
+
+  const autocompleteInput = page
+    .locator('[data-testid^="term-autocomplete-"]')
+    .first()
+    .locator('input');
+
   for (const term of relatedTerms) {
-    const entityName = get(term, 'responseData.name');
-    const entityFqn = get(term, 'responseData.fullyQualifiedName');
-    await page.locator('#tagsForm_tags').fill(entityName);
-    await page.getByTestId(`tag-${entityFqn}`).click();
+    const entityDisplayName =
+      get(term, 'responseData.displayName') || get(term, 'responseData.name');
+    const searchRes = page.waitForResponse('**/api/v1/glossaryTerms/search*');
+    await autocompleteInput.fill(entityDisplayName);
+    await searchRes;
+    await page.getByRole('option', { name: entityDisplayName }).click();
   }
 
   const saveRes = page.waitForResponse('/api/v1/glossaryTerms/*');
-  await page.getByTestId('saveAssociatedTag').click();
+  await page.getByTestId('save-related-terms').click();
   await saveRes;
 
   for (const term of relatedTerms) {
     const entityName = get(term, 'responseData.displayName');
-
     await expect(page.getByTestId(entityName)).toBeVisible();
   }
 };

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/tabs/RelatedTerms.interface.ts

@@ -0,0 +1,69 @@
+/*
+ *  Copyright 2026 Collate.
+ *  Licensed 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.
+ */
+import { GlossaryTerm } from '../../../../generated/entity/data/glossaryTerm';
+import { EntityReference } from '../../../../generated/entity/type';
+import { VersionStatus } from '../../../../utils/EntityVersionUtils.interface';
+
+export interface TermItem {
+  value: string;
+  label: string;
+  entity?: EntityReference;
+}
+
+export interface TermSelectItem {
+  id: string;
+  label?: string;
+}
+
+export interface RelationEditRow {
+  id: string;
+  relationType: string;
+  terms: TermItem[];
+}
+
+export interface RelationTypeOption {
+  id: string;
+  label?: string;
+  title?: string;
+}
+
+export interface TermsRowProps {
+  rowId: string;
+  initialRelationType: string;
+  initialTerms: TermItem[];
+  relationTypeOptions: RelationTypeOption[];
+  excludeFQN: string;
+  preloadedTerms: GlossaryTerm[];
+  onRelationTypeChange: (rowId: string, relationType: string) => void;
+  onTermsChange: (rowId: string, terms: TermItem[]) => void;
+  onRemove: (rowId: string) => void;
+}
+
+export interface TermsRowEditorProps {
+  rows: RelationEditRow[];
+  excludeFQN: string;
+  preloadedTerms: GlossaryTerm[];
+  relationTypeOptions: RelationTypeOption[];
+  onAddRow: () => void;
+  onRelationTypeChange: (rowId: string, relationType: string) => void;
+  onTermsChange: (rowId: string, terms: TermItem[]) => void;
+  onRemove: (rowId: string) => void;
+}
+
+export interface RelatedTermTagButtonProps {
+  entity: EntityReference;
+  relationType?: string;
+  versionStatus?: VersionStatus;
+  getRelationDisplayName: (relationType: string) => string;
+  onRelatedTermClick: (fqn: string) => void;
+}

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTerms/tabs/RelatedTerms.test.tsx

@@ -28,14 +28,35 @@ jest.mock('@openmetadata/ui-core-components', () => {
   const React = require('react');
 
   return {
+    Autocomplete: Object.assign(
+      ({ children, ...props }: Record<string, unknown>) =>
+        React.createElement('div', props, children),
+      {
+        Item: ({ label, ...props }: Record<string, unknown>) =>
+          React.createElement('div', props, label),
+      }
+    ),
+    Badge: ({ children, ...props }: Record<string, unknown>) =>
+      React.createElement('span', props, children),
+    BadgeWithIcon: ({
+      children,
+      iconLeading: _iconLeading,
+      ...props
+    }: Record<string, unknown>) => React.createElement('span', props, children),
     Button: ({
       children,
       iconLeading: _iconLeading,
       ...props
     }: Record<string, unknown>) =>
       React.createElement('button', props, children),
-    Select: ({ children, ...props }: Record<string, unknown>) =>
-      React.createElement('select', props, children),
+    Select: Object.assign(
+      ({ children, ...props }: Record<string, unknown>) =>
+        React.createElement('select', props, children),
+      {
+        Item: ({ label, ...props }: Record<string, unknown>) =>
+          React.createElement('option', props, label),
+      }
+    ),
     Tooltip: ({ children, ...props }: Record<string, unknown>) =>
       React.createElement('span', props, children),
     TooltipTrigger: ({ children, ...props }: Record<string, unknown>) =>
@@ -45,6 +66,45 @@ jest.mock('@openmetadata/ui-core-components', () => {
   };
 });
 
+jest.mock('../../../common/ExpandableCard/ExpandableCard', () => ({
+  __esModule: true,
+  default: jest.fn(
+    ({
+      children,
+      cardProps,
+    }: {
+      children: unknown;
+      cardProps?: { title?: unknown };
+    }) => {
+      const React = require('react');
+
+      return React.createElement('div', {}, cardProps?.title, children);
+    }
+  ),
+}));
+
+jest.mock('../../../common/IconButtons/EditIconButton', () => ({
+  EditIconButton: ({ children, ...props }: Record<string, unknown>) => {
+    const React = require('react');
+
+    return React.createElement('button', props, children);
+  },
+  PlusIconButton: ({ children, ...props }: Record<string, unknown>) => {
+    const React = require('react');
+
+    return React.createElement('button', props, children);
+  },
+}));
+
+jest.mock('../../../../rest/glossaryAPI', () => ({
+  getGlossaryTermRelationSettings: jest.fn().mockResolvedValue({
+    relationTypes: [
+      { name: 'relatedTo', displayName: 'Related To', isSymmetric: true },
+    ],
+  }),
+  searchGlossaryTermsPaginated: jest.fn().mockResolvedValue({ data: [] }),
+}));
+
 jest.mock('../../../Customization/GenericProvider/GenericProvider', () => ({
   useGenericContext: jest.fn().mockImplementation(() => mockContext),
 }));
@@ -93,10 +153,10 @@ describe('RelatedTerms', () => {
     expect(getByTestId('edit-button')).toBeInTheDocument();
   });
 
-  it('should not show the edit button if there are no related terms and the user has edit permissions', () => {
+  it('should show the edit button even if there are no related terms when the user has edit permissions', () => {
     mockContext.data = { ...MOCKED_GLOSSARY_TERMS[2], relatedTerms: [] };
-    const { queryByTestId } = render(<RelatedTerms />);
+    const { getByTestId } = render(<RelatedTerms />);
 
-    expect(queryByTestId('edit-button')).toBeNull();
+    expect(getByTestId('edit-button')).toBeInTheDocument();
   });
 });