diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableDataCardBody/TableDataCardBody.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableDataCardBody/TableDataCardBody.test.tsx index 5f9f7229555..705dfa4c01f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableDataCardBody/TableDataCardBody.test.tsx +++ b/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(

RichTextEditorPreviewer

); }); + +jest.mock('../../Tag/TagsViewer/TagsViewer', () => { + return jest.fn().mockReturnValue(

TagsViewer

); +}); + jest.mock('../../common/EntitySummaryDetails/EntitySummaryDetails', () => { return jest .fn() diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SearchIndexSummary/SearchIndexSummary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SearchIndexSummary/SearchIndexSummary.test.tsx index bca30ad606f..a4a5b1dd4f7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SearchIndexSummary/SearchIndexSummary.test.tsx +++ b/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( - + , + { + wrapper: MemoryRouter, + } ); }); @@ -115,7 +118,10 @@ describe('SearchIndexSummary component tests', () => { }, ], }} - /> + />, + { + wrapper: MemoryRouter, + } ); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.test.tsx index e0da86fa944..d521754531e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/TableSummary/TableSummary.test.tsx +++ b/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(() =>
SummaryList
) ); + +jest.mock( + '../../../common/SummaryTagsDescription/SummaryTagsDescription.component', + () => jest.fn().mockImplementation(() =>

SummaryTagsDescription

) +); + 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(); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx index 381eae5ca18..da6c3031766 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx +++ b/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 { useHistory } from 'react-router-dom'; +import React, { useMemo } from 'react'; +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)) - : history.push(getTagPath(Fqn.split(tag.tagFQN)[0])), + ? getGlossaryPath(tag.tagFQN) + : 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}> - {tagContent} + {/* Wrap only content to avoid redirect on closeable icons */} + + {tagContent} + ), - [color, tagContent, className] + [color, tagContent, redirectLink] ); const addTagChip = useMemo( () => ( }> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.test.tsx index 64887ad04eb..f740f27b5f0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.test.tsx +++ b/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(() => ({ - push: mockPush, - })), + Link: jest.fn().mockImplementation(({ children, ...rest }) => ( + + {children} + + )), })); 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(mockPush).toHaveBeenCalledWith('/tags/testTag'); + expect(mockLinkButton).toHaveBeenCalledTimes(1); }); 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(mockPush).toHaveBeenCalledWith('/glossary/glossaryTag.Test1'); + expect(mockLinkButton).toHaveBeenCalledTimes(1); }); it('should render size based tags, for small class should contain small', () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.test.tsx index fac9147a17b..45fa3a643f0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TagsInput/TagsInput.test.tsx +++ b/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( - + , + { + 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( - + , + { + 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(); + render(, { + wrapper: MemoryRouter, + }); expect(await screen.findByTestId('entity-tags')).toBeInTheDocument(); expect(await screen.findByTestId('add-tag')).toBeInTheDocument();