#16489: fix the redirect issue to new tab for tags and glossary (#16512)

* fix the redirect issue to new tab for tags and glossary

* fix the redirect on cancel icon and unit test issue

* changes as per comments

openmetadata-ui/src/main/resources/ui/src/components/Database/TableDataCardBody/TableDataCardBody.test.tsx

@@ -19,6 +19,11 @@ import TableDataCardBody from './TableDataCardBody';
 jest.mock('../../common/RichTextEditor/RichTextEditorPreviewer', () => {
   return jest.fn().mockReturnValue(<p>RichTextEditorPreviewer</p>);
 });
+
+jest.mock('../../Tag/TagsViewer/TagsViewer', () => {
+  return jest.fn().mockReturnValue(<p>TagsViewer</p>);
+});
+
 jest.mock('../../common/EntitySummaryDetails/EntitySummaryDetails', () => {
   return jest
     .fn()

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SearchIndexSummary/SearchIndexSummary.test.tsx

@@ -33,7 +33,10 @@ describe('SearchIndexSummary component tests', () => {
   it('Component should render properly, when loaded in the Explore page.', async () => {
     await act(async () => {
       render(
-        <SearchIndexSummary entityDetails={mockSearchIndexEntityDetails} />
+        <SearchIndexSummary entityDetails={mockSearchIndexEntityDetails} />,
+        {
+          wrapper: MemoryRouter,
+        }
       );
     });
 
@@ -115,7 +118,10 @@ describe('SearchIndexSummary component tests', () => {
               },
             ],
           }}
-        />
+        />,
+        {
+          wrapper: MemoryRouter,
+        }
       );
     });
 

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.test.tsx

@@ -54,6 +54,12 @@ jest.mock('../SummaryList/SummaryList.component', () =>
     .fn()
     .mockImplementation(() => <div data-testid="SummaryList">SummaryList</div>)
 );
+
+jest.mock(
+  '../../../common/SummaryTagsDescription/SummaryTagsDescription.component',
+  () => jest.fn().mockImplementation(() => <p>SummaryTagsDescription</p>)
+);
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: jest.fn().mockReturnValue({ pathname: '/table' }),
@@ -75,7 +81,7 @@ describe('TableSummary component tests', () => {
 
     const profilerHeader = screen.getByTestId('profiler-header');
     const schemaHeader = screen.getByTestId('schema-header');
-    const tagsHeader = screen.getByTestId('tags-header');
+    const summaryTagDescription = screen.getByText('SummaryTagsDescription');
     const typeLabel = screen.getByTestId('label.type-label');
     const queriesLabel = screen.getByTestId('label.query-plural-label');
     const columnsLabel = screen.getByTestId('label.column-plural-label');
@@ -88,7 +94,7 @@ describe('TableSummary component tests', () => {
 
     expect(profilerHeader).toBeInTheDocument();
     expect(schemaHeader).toBeInTheDocument();
-    expect(tagsHeader).toBeInTheDocument();
+    expect(summaryTagDescription).toBeInTheDocument();
     expect(typeLabel).toBeInTheDocument();
     expect(queriesLabel).toBeInTheDocument();
     expect(columnsLabel).toBeInTheDocument();

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx

@@ -12,8 +12,8 @@
  */
 import { Tag, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { ReactComponent as IconTerm } from '../../../assets/svg/book.svg';
 import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
 import { ReactComponent as IconTag } from '../../../assets/svg/tag.svg';
@@ -40,7 +40,6 @@ const TagsV1 = ({
   tagType,
   size,
 }: TagsV1Props) => {
-  const history = useHistory();
   const color = useMemo(
     () => (isVersionPage ? undefined : tag.style?.color),
     [tag]
@@ -87,11 +86,11 @@ const TagsV1 = ({
     [showOnlyName, tag.tagFQN]
   );
 
-  const redirectLink = useCallback(
+  const redirectLink = useMemo(
     () =>
       (tagType ?? tag.source) === TagSource.Glossary
-        ? history.push(getGlossaryPath(tag.tagFQN))
+        ? getGlossaryPath(tag.tagFQN)
-        : history.push(getTagPath(Fqn.split(tag.tagFQN)[0])),
+        : getTagPath(Fqn.split(tag.tagFQN)[0]),
     [tagType, tag.source, tag.tagFQN]
   );
 
@@ -151,18 +150,23 @@ const TagsV1 = ({
             ? { backgroundColor: reduceColorOpacity(color, 0.05) }
             : undefined
         }
-        onClick={redirectLink}
         {...tagProps}>
+        {/* Wrap only content to avoid redirect on closeable icons  */}
+        <Link
+          className="no-underline h-full"
+          data-testid="tag-redirect-link"
+          to={redirectLink}>
           {tagContent}
+        </Link>
       </Tag>
     ),
-    [color, tagContent, className]
+    [color, tagContent, redirectLink]
   );
 
   const addTagChip = useMemo(
     () => (
       <Tag
-        className={classNames('tag-chip tag-chip-add-button')}
+        className="tag-chip tag-chip-add-button"
         icon={<PlusIcon height={16} name="plus" width={16} />}>
         <Typography.Paragraph
           className="m-0 text-xs font-medium text-primary"
@@ -181,7 +185,7 @@ const TagsV1 = ({
   return (
     <Tooltip
       className="cursor-pointer"
-      mouseEnterDelay={1.5}
+      mouseEnterDelay={0.5}
       placement="bottomLeft"
       title={tooltipOverride ?? getTagTooltip(tag.tagFQN, tag.description)}
       trigger="hover">

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.test.tsx

@@ -17,12 +17,14 @@ import { TAG_CONSTANT, TAG_START_WITH } from '../../../constants/Tag.constants';
 import { LabelType, State, TagSource } from '../../../generated/type/tagLabel';
 import TagsV1 from './TagsV1.component';
 
-const mockPush = jest.fn();
+const mockLinkButton = jest.fn();
 
 jest.mock('react-router-dom', () => ({
-  useHistory: jest.fn().mockImplementation(() => ({
+  Link: jest.fn().mockImplementation(({ children, ...rest }) => (
-    push: mockPush,
+    <a {...rest} onClick={mockLinkButton}>
-  })),
+      {children}
+    </a>
+  )),
 }));
 
 jest.mock('../../../utils/TagsUtils', () => ({
@@ -71,12 +73,11 @@ describe('Test tags Component', () => {
         }}
       />
     );
-    const tag = getByTestId(container, 'tags');
+    const tag = getByTestId(container, 'tag-redirect-link');
 
     fireEvent.click(tag);
 
-    expect(mockPush).toHaveBeenCalledTimes(1);
+    expect(mockLinkButton).toHaveBeenCalledTimes(1);
-    expect(mockPush).toHaveBeenCalledWith('/tags/testTag');
   });
 
   it('Clicking on tag with source Glossary should redirect to the proper glossary term page', () => {
@@ -92,12 +93,11 @@ describe('Test tags Component', () => {
         }}
       />
     );
-    const tag = getByTestId(container, 'tags');
+    const tag = getByTestId(container, 'tag-redirect-link');
 
     fireEvent.click(tag);
 
-    expect(mockPush).toHaveBeenCalledTimes(1);
+    expect(mockLinkButton).toHaveBeenCalledTimes(1);
-    expect(mockPush).toHaveBeenCalledWith('/glossary/glossaryTag.Test1');
   });
 
   it('should render size based tags, for small class should contain small', () => {

openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.test.tsx

@@ -12,6 +12,7 @@
  */
 import { act, render, screen } from '@testing-library/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { LabelType, State, TagSource } from '../../generated/type/tagLabel';
 import TagsInput from './TagsInput.component';
 
@@ -44,7 +45,10 @@ describe('TagsInput', () => {
           editable={false}
           tags={tags}
           onTagsUpdate={mockOnTagsUpdate}
-        />
+        />,
+        {
+          wrapper: MemoryRouter,
+        }
       );
     });
 
@@ -63,7 +67,10 @@ describe('TagsInput', () => {
           editable={false}
           tags={tags}
           onTagsUpdate={mockOnTagsUpdate}
-        />
+        />,
+        {
+          wrapper: MemoryRouter,
+        }
       );
     });
 
@@ -79,7 +86,10 @@ describe('TagsInput', () => {
   it('should render edit button when no editable', async () => {
     await act(async () => {
       render(
-        <TagsInput editable tags={tags} onTagsUpdate={mockOnTagsUpdate} />
+        <TagsInput editable tags={tags} onTagsUpdate={mockOnTagsUpdate} />,
+        {
+          wrapper: MemoryRouter,
+        }
       );
     });
 
@@ -93,7 +103,10 @@ describe('TagsInput', () => {
           editable={false}
           tags={tags}
           onTagsUpdate={mockOnTagsUpdate}
-        />
+        />,
+        {
+          wrapper: MemoryRouter,
+        }
       );
     });
 
@@ -103,7 +116,14 @@ describe('TagsInput', () => {
   it('should not render tags if tags is empty', async () => {
     await act(async () => {
       render(
-        <TagsInput editable={false} tags={[]} onTagsUpdate={mockOnTagsUpdate} />
+        <TagsInput
+          editable={false}
+          tags={[]}
+          onTagsUpdate={mockOnTagsUpdate}
+        />,
+        {
+          wrapper: MemoryRouter,
+        }
       );
 
       expect(await screen.findByTestId('tags-container')).toBeInTheDocument();
@@ -114,7 +134,9 @@ describe('TagsInput', () => {
 
   it('should render add tags if tags is empty and has permission', async () => {
     await act(async () => {
-      render(<TagsInput editable tags={[]} onTagsUpdate={mockOnTagsUpdate} />);
+      render(<TagsInput editable tags={[]} onTagsUpdate={mockOnTagsUpdate} />, {
+        wrapper: MemoryRouter,
+      });
 
       expect(await screen.findByTestId('entity-tags')).toBeInTheDocument();
       expect(await screen.findByTestId('add-tag')).toBeInTheDocument();