diff --git a/superset-frontend/src/components/Tags/Tag.test.tsx b/superset-frontend/src/components/Tags/Tag.test.tsx
index 0ff7b2e85a3f3..30827bafb87d2 100644
--- a/superset-frontend/src/components/Tags/Tag.test.tsx
+++ b/superset-frontend/src/components/Tags/Tag.test.tsx
@@ -18,6 +18,7 @@
*/
import React from 'react';
import { render } from 'spec/helpers/testing-library';
+import { screen } from '@testing-library/react';
import TagType from 'src/types/TagType';
import Tag from './Tag';
@@ -33,3 +34,23 @@ test('should render', () => {
const { container } = render();
expect(container).toBeInTheDocument();
});
+
+test('should render shortname properly', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ expect(screen.getByTestId('tag')).toBeInTheDocument();
+ expect(screen.getByTestId('tag')).toHaveTextContent(mockedProps.name);
+});
+
+test('should render longname properly', () => {
+ const longNameProps = {
+ ...mockedProps,
+ name: 'very-long-tag-name-that-truncates',
+ };
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ expect(screen.getByTestId('tag')).toBeInTheDocument();
+ expect(screen.getByTestId('tag')).toHaveTextContent(
+ `${longNameProps.name.slice(0, 20)}...`,
+ );
+});
diff --git a/superset-frontend/src/components/Tags/Tag.tsx b/superset-frontend/src/components/Tags/Tag.tsx
index ad3df8af67f68..896535afca016 100644
--- a/superset-frontend/src/components/Tags/Tag.tsx
+++ b/superset-frontend/src/components/Tags/Tag.tsx
@@ -31,6 +31,8 @@ const StyledTag = styled(AntdTag)`
`};
`;
+const MAX_DISPLAY_CHAR = 20;
+
const Tag = ({
name,
id,
@@ -38,49 +40,47 @@ const Tag = ({
onDelete = undefined,
editable = false,
onClick = undefined,
+ toolTipTitle = name,
}: TagType) => {
- const isLongTag = useMemo(() => name.length > 20, [name]);
+ const isLongTag = useMemo(() => name.length > MAX_DISPLAY_CHAR, [name]);
+ const tagDisplay = isLongTag ? `${name.slice(0, MAX_DISPLAY_CHAR)}...` : name;
const handleClose = () => (index ? onDelete?.(index) : null);
const tagElem = (
<>
{editable ? (
-
- {isLongTag ? `${name.slice(0, 20)}...` : name}
-
+
+
+ {tagDisplay}
+
+
) : (
-
- {id ? (
-
- {isLongTag ? `${name.slice(0, 20)}...` : name}
-
- ) : isLongTag ? (
- `${name.slice(0, 20)}...`
- ) : (
- name
- )}
-
+
+
+ {id ? (
+
+ {tagDisplay}
+
+ ) : (
+ tagDisplay
+ )}
+
+
)}
>
);
- return isLongTag ? (
-
- {tagElem}
-
- ) : (
- tagElem
- );
+ return tagElem;
};
export default Tag;
diff --git a/superset-frontend/src/components/Tags/TagsList.tsx b/superset-frontend/src/components/Tags/TagsList.tsx
index 102e6d2ced31f..ea4f7e6dad4f0 100644
--- a/superset-frontend/src/components/Tags/TagsList.tsx
+++ b/superset-frontend/src/components/Tags/TagsList.tsx
@@ -83,7 +83,11 @@ const TagsList = ({
/>
))}
{tags.length > tempMaxTags ? (
-
+ t.name).join(', ')}
+ />
) : null}
>
) : (
diff --git a/superset-frontend/src/types/TagType.ts b/superset-frontend/src/types/TagType.ts
index 4c1b85b724915..8f445e50dafd5 100644
--- a/superset-frontend/src/types/TagType.ts
+++ b/superset-frontend/src/types/TagType.ts
@@ -27,6 +27,7 @@ export interface TagType {
onClick?: MouseEventHandler;
name: string;
index?: number | undefined;
+ toolTipTitle?: string;
}
export default TagType;