fix(tags): +n tags for listview (#25603)

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(<Tag {...mockedProps} />);
   expect(container).toBeInTheDocument();
 });
+
+test('should render shortname properly', () => {
+  const { container } = render(<Tag {...mockedProps} />);
+  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(<Tag {...longNameProps} />);
+  expect(container).toBeInTheDocument();
+  expect(screen.getByTestId('tag')).toBeInTheDocument();
+  expect(screen.getByTestId('tag')).toHaveTextContent(
+    `${longNameProps.name.slice(0, 20)}...`,
+  );
+});

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 ? (
-        <StyledTag
-          key={id}
-          closable={editable}
-          onClose={handleClose}
-          color="blue"
-        >
-          {isLongTag ? `${name.slice(0, 20)}...` : name}
-        </StyledTag>
+        <Tooltip title={toolTipTitle} key={toolTipTitle}>
+          <StyledTag
+            key={id}
+            closable={editable}
+            onClose={handleClose}
+            color="blue"
+          >
+            {tagDisplay}
+          </StyledTag>
+        </Tooltip>
       ) : (
-        <StyledTag role="link" key={id} onClick={onClick}>
-          {id ? (
-            <a
-              href={`/superset/all_entities/?id=${id}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {isLongTag ? `${name.slice(0, 20)}...` : name}
-            </a>
-          ) : isLongTag ? (
-            `${name.slice(0, 20)}...`
-          ) : (
-            name
-          )}
-        </StyledTag>
+        <Tooltip title={toolTipTitle} key={toolTipTitle}>
+          <StyledTag data-test="tag" role="link" key={id} onClick={onClick}>
+            {id ? (
+              <a
+                href={`/superset/all_entities/?id=${id}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {tagDisplay}
+              </a>
+            ) : (
+              tagDisplay
+            )}
+          </StyledTag>
+        </Tooltip>
       )}
     </>
   );
 
-  return isLongTag ? (
-    <Tooltip title={name} key={name}>
-      {tagElem}
-    </Tooltip>
-  ) : (
-    tagElem
-  );
+  return tagElem;
 };
 
 export default Tag;

superset-frontend/src/components/Tags/TagsList.tsx

@@ -83,7 +83,11 @@ const TagsList = ({
             />
           ))}
           {tags.length > tempMaxTags ? (
-            <Tag name={`+${extraTags}...`} onClick={expand} />
+            <Tag
+              name={`+${extraTags}...`}
+              onClick={expand}
+              toolTipTitle={tags.map(t => t.name).join(', ')}
+            />
           ) : null}
         </>
       ) : (

superset-frontend/src/types/TagType.ts

@@ -27,6 +27,7 @@ export interface TagType {
   onClick?: MouseEventHandler<HTMLSpanElement>;
   name: string;
   index?: number | undefined;
+  toolTipTitle?: string;
 }
 
 export default TagType;