diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx
index 5ac7aae6ba3..16ccd3e865b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableTags/TableTags.test.tsx
@@ -106,7 +106,7 @@ describe('Test EntityTableTags Component', () => {
wrapper: MemoryRouter,
});
- const tagContainer = await screen.findByTestId('Classification-tags-0');
+ const tagContainer = await screen.findByTestId('classification-tags-0');
expect(tagContainer).toBeInTheDocument();
});
@@ -127,7 +127,7 @@ describe('Test EntityTableTags Component', () => {
}
);
- const tagContainer = await screen.findByTestId('Classification-tags-0');
+ const tagContainer = await screen.findByTestId('classification-tags-0');
expect(tagContainer).toBeInTheDocument();
});
@@ -147,7 +147,7 @@ describe('Test EntityTableTags Component', () => {
}
);
- const tagContainer = await screen.findByTestId('Classification-tags-0');
+ const tagContainer = await screen.findByTestId('classification-tags-0');
const tagPersonal = await screen.findByTestId('tag-PersonalData.Personal');
expect(tagContainer).toBeInTheDocument();
@@ -170,7 +170,7 @@ describe('Test EntityTableTags Component', () => {
}
);
- const tagContainer = await screen.findByTestId('Classification-tags-0');
+ const tagContainer = await screen.findByTestId('classification-tags-0');
const entityTasks = screen.queryByText('EntityTasks');
expect(tagContainer).toBeInTheDocument();
@@ -193,7 +193,7 @@ describe('Test EntityTableTags Component', () => {
}
);
- const tagContainer = await screen.findByTestId('Classification-tags-0');
+ const tagContainer = await screen.findByTestId('classification-tags-0');
const entityTasks = screen.queryByText('EntityTasks');
expect(tagContainer).toBeInTheDocument();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/Tags.less b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/Tags.less
deleted file mode 100644
index 4c129084f54..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/Tags.less
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2023 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 url('../../../styles/variables.less');
-
-.tags-component-container {
- .tag-container-style {
- display: flex;
- gap: 4px;
- align-items: center;
- font-size: 12px;
- font-weight: 500;
- cursor: pointer;
- justify-content: center;
- padding: 1px 8px;
- margin: 0 4px 1px 0;
- }
-
- .label {
- border: none;
- background-color: transparent;
- padding: 0px;
- }
-
- .outlined {
- border: none;
- background-color: transparent;
- }
-}
-.plus-more-tag.ant-tag {
- color: @link-color;
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.interface.ts
deleted file mode 100644
index a67d66d3cc9..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright 2022 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 { TAG_START_WITH } from 'constants/Tag.constants';
-import { TagLabel } from '../../../generated/type/tagLabel';
-
-export type TagProps = {
- className?: string;
- editable?: boolean;
- type?: 'contained' | 'outlined' | 'label' | 'border';
- startWith?: TAG_START_WITH;
- tag: TagLabel;
- showOnlyName?: boolean;
- style?: React.CSSProperties;
-};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx
deleted file mode 100644
index a6c909f35b0..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
- * Copyright 2022 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 { Tag, Tooltip, Typography } from 'antd';
-import { ReactComponent as IconTag } from 'assets/svg/classification.svg';
-import classNames from 'classnames';
-import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
-import { ROUTES } from 'constants/constants';
-import { TagSource } from 'generated/type/tagLabel';
-import React, { FunctionComponent, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
-import { getTagDisplay, getTagTooltip } from 'utils/TagsUtils';
-import { ReactComponent as IconPage } from '../../../assets/svg/ic-flat-doc.svg';
-import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
-
-import { TAG_START_WITH } from 'constants/Tag.constants';
-import { TagProps } from './tags.interface';
-import './Tags.less';
-
-const Tags: FunctionComponent
= ({
- className,
- editable,
- tag,
- startWith,
- type = 'contained',
- showOnlyName = false,
-
- style,
-}: TagProps) => {
- const history = useHistory();
-
- const isGlossaryTag = useMemo(
- () => tag.source === TagSource.Glossary,
- [tag.source]
- );
-
- const startIcon = useMemo(() => {
- switch (startWith) {
- case TAG_START_WITH.PLUS:
- return (
-
- );
- case TAG_START_WITH.SOURCE_ICON:
- return isGlossaryTag ? (
-
- ) : (
-
- );
- default:
- return startWith;
- }
- }, [startWith, isGlossaryTag]);
-
- const tagChip = useMemo(() => {
- const tagName = showOnlyName
- ? tag.tagFQN.split(FQN_SEPARATOR_CHAR).slice(-2).join(FQN_SEPARATOR_CHAR)
- : tag.tagFQN;
-
- return (
- {
- if (tag.source && startWith !== TAG_START_WITH.PLUS) {
- tag.source === TagSource.Glossary
- ? history.push(
- `${ROUTES.GLOSSARY}/${encodeURIComponent(tag.tagFQN)}`
- )
- : history.push(`${ROUTES.TAGS}/${tag.tagFQN.split('.')[0]}`);
- }
- }}>
-
- {getTagDisplay(tagName)}
-
-
- );
- }, [startIcon, tag, editable]);
-
- return (
-
- {startWith === TAG_START_WITH.PLUS ? (
- tagChip
- ) : (
-
- {tagChip}
-
- )}
-
- );
-};
-
-export default Tags;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx
index a2765512bd8..c857ddaf9e5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx
@@ -155,20 +155,22 @@ const TagsContainerV2 = ({
const addTagButton = useMemo(
() =>
showAddTagButton ? (
-
+
-
+
) : null,
[showAddTagButton]
);
const renderTags = useMemo(
() => (
-
+
+
+
),
[showNoDataPlaceholder, tags?.[tagType]]
);
@@ -329,11 +331,11 @@ const TagsContainerV2 = ({
{header}
{!isEditTags && (
-
+
{addTagButton}
{renderTags}
- {showInlineEditButton && editTagButton}
-
+ {showInlineEditButton && {editTagButton}}
+
)}
{isEditTags && tagsSelectContainer}
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 26f919d6555..d850ec7ed33 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
@@ -29,7 +29,12 @@ import './tagsV1.less';
const color = '';
-const TagsV1 = ({ tag, startWith, showOnlyName = false }: TagsV1Props) => {
+const TagsV1 = ({
+ tag,
+ startWith,
+ className,
+ showOnlyName = false,
+}: TagsV1Props) => {
const history = useHistory();
const isGlossaryTag = useMemo(
@@ -88,16 +93,17 @@ const TagsV1 = ({ tag, startWith, showOnlyName = false }: TagsV1Props) => {
const tagContent = useMemo(
() => (
-
+
{tagColorBar}
-
+
{startIcon}
{getTagDisplay(tagName)}
-
+
),
[startIcon, tagName, tag.tagFQN, tagColorBar]
@@ -106,14 +112,14 @@ const TagsV1 = ({ tag, startWith, showOnlyName = false }: TagsV1Props) => {
const tagChip = useMemo(
() => (
redirectLink()}>
{tagContent}
),
- [color, tagContent]
+ [color, tagContent, className]
);
const addTagChip = useMemo(
@@ -131,9 +137,11 @@ const TagsV1 = ({ tag, startWith, showOnlyName = false }: TagsV1Props) => {
[tagName]
);
- return startWith === TAG_START_WITH.PLUS ? (
- addTagChip
- ) : (
+ if (startWith === TAG_START_WITH.PLUS) {
+ return addTagChip;
+ }
+
+ return (
{
- return jest.fn().mockReturnValue(RichTextEditorPreviewer
);
-});
-
jest.mock('react-router-dom', () => ({
useHistory: jest.fn().mockImplementation(() => ({
push: mockPush,
})),
}));
+jest.mock('../../../utils/TagsUtils', () => ({
+ getTagDisplay: jest.fn().mockReturnValue('tags'),
+ getTagTooltip: jest.fn().mockReturnValue(ToolTip Data
),
+}));
+
+jest.mock('../../../utils/CommonUtils', () => ({
+ reduceColorOpacity: jest.fn().mockReturnValue('#00000'),
+}));
+
describe('Test tags Component', () => {
it('Component should render', () => {
const { container } = render(
-
+
);
const tags = getByTestId(container, 'tags');
expect(tags).toBeInTheDocument();
});
- it('Component should render properly for add tag button', () => {
+ it('Component should render add tag button', () => {
const { container } = render(
-
);
- const tags = getByTestId(container, 'tags');
- const remove = queryByTestId(container, 'remove-test-tag');
+ const addTags = getByTestId(container, 'add-tag');
- expect(tags).toBeInTheDocument();
- expect(remove).toBeNull();
+ expect(addTags).toBeInTheDocument();
});
it('Clicking on tag with source Classification should redirect to the proper Classification page', () => {
const { container } = render(
- {
it('Clicking on tag with source Glossary should redirect to the proper glossary term page', () => {
const { container } = render(
- = ({
type = 'label',
showNoDataPlaceholder = true,
}: TagsViewerProps) => {
- const tagChipStye = {
- margin: '0 0 8px 0',
- justifyContent: 'start',
- };
-
const getTagsElement = useCallback(
- (tag: EntityTags, index: number, style?: React.CSSProperties) => (
- (
+ = ({
key={index}
showOnlyName={tag.source === TagSource.Glossary}
startWith={TAG_START_WITH.SOURCE_ICON}
- style={style}
tag={tag}
- type={type}
/>
),
[type]
@@ -58,17 +51,19 @@ const TagsViewer: FunctionComponent = ({
[tags]
);
+ if (isEmpty(sortedTagsBySource) && showNoDataPlaceholder) {
+ return (
+
+ {NO_DATA_PLACEHOLDER}
+
+ );
+ }
+
return (
-
- {isEmpty(sortedTagsBySource) && showNoDataPlaceholder ? (
-
- {NO_DATA_PLACEHOLDER}
-
- ) : sizeCap > -1 ? (
+
+ {sizeCap > -1 ? (
<>
- {sortedTagsBySource
- .slice(0, sizeCap)
- .map((tag, index) => getTagsElement(tag, index))}
+ {sortedTagsBySource.slice(0, sizeCap).map(getTagsElement)}
{sortedTagsBySource.slice(sizeCap).length > 0 && (
= ({
<>
{sortedTagsBySource.slice(sizeCap).map((tag, index) => (
- {getTagsElement(tag, index, tagChipStye)}
+ {getTagsElement(tag, index)}
))}
@@ -93,11 +88,9 @@ const TagsViewer: FunctionComponent = ({
)}
) : (
- <>
- {sortedTagsBySource.map((tag, index) => getTagsElement(tag, index))}
-
+ sortedTagsBySource.map(getTagsElement)
)}
-
+ TagsContainerV2
);
});
-jest.mock('components/Tag/Tags/tags', () => {
- return jest.fn().mockReturnValue(Tags
);
-});
-
jest.mock('../FeedEditor/FeedEditor', () => {
return jest.fn().mockReturnValue(FeedEditor
);
});
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 82c3e3fd1d3..ee8860906a3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -476,3 +476,21 @@ a[href].link-text-grey,
height: @entity-details-tab-height;
overflow-y: scroll;
}
+
+/* Diff style */
+
+.diff-added {
+ background: @success-background-color;
+ color: @success-color;
+ width: fit-content;
+}
+
+.diff-removed {
+ color: grey;
+ text-decoration: line-through;
+ width: fit-content;
+}
+
+.diff-description {
+ color: @success-color;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
index 262a6d8dec4..df25c08e7f3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
@@ -705,23 +705,6 @@ body .list-option.rdw-option-active {
box-shadow: none;
}
-/* Diff style */
-
-.diff-added {
- background: rgba(0, 131, 118, 0.2);
- color: #008376;
- width: fit-content;
-}
-.diff-removed {
- color: #008376;
- color: grey;
- text-decoration: line-through;
- width: fit-content;
-}
-.diff-description {
- color: #008376;
-}
-
/* react-slick */
.slick-dots {
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
index 9044ffcb18b..e58265a0a0a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
@@ -78,6 +78,8 @@
@grey-bg-with-alpha: #7575751a;
@btn-shadow: none;
@user-profile-background: rgba(9, 80, 197, 0.05);
+@success-background-color: rgba(0, 131, 118, 0.2);
+@tag-background-color: rgba(0, 0, 0, 0.03);
@navbar-height: 64px;
@sidebar-width: 60px;