fix(FR-2807): replace antd EllipsisMeasure in BAILink with BAIText CSS ellipsis

Author: agatha197

packages/backend.ai-ui/src/components/BAILink.stories.tsx

@@ -1,5 +1,6 @@
 import BAIFlex from './BAIFlex';
 import BAILink from './BAILink';
+import BAIText from './BAIText';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 
@@ -18,7 +19,15 @@ const meta: Meta<typeof BAILink> = {
 - Uses React Router \`Link\` when \`to\` prop is provided
 - Falls back to Ant Design \`Typography.Link\` when \`to\` is not provided
 - Custom hover and disabled states
-- Ellipsis with tooltip support
+- Ellipsis with tooltip support via \`BAIText\` (CSS-based, no layout-loop risk)
+
+## Ellipsis Behavior
+When \`ellipsis\` is provided, the content is wrapped by \`BAIText\` internally:
+- \`ellipsis={true}\` — CSS truncation + tooltip showing full text on overflow
+- \`ellipsis={{ tooltip: 'custom' }}\` — CSS truncation + custom tooltip text
+
+This avoids antd's JS-based \`EllipsisMeasure\` component, which can cause infinite
+render loops when nested inside flex containers with \`ResizeObserver\`.
 
 ## BAI-Specific Props
 | Prop | Type | Default | Description |
@@ -50,7 +59,8 @@ For other props, refer to [React Router Link](https://reactrouter.com/en/main/co
     },
     ellipsis: {
       control: false,
-      description: 'Enable text ellipsis with optional tooltip',
+      description:
+        'Enable text ellipsis with optional tooltip. Internally uses BAIText for CSS-based truncation.',
       table: {
         type: { summary: 'boolean | { tooltip?: string }' },
       },
@@ -118,30 +128,58 @@ export const WithEllipsis: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          'Long text can be truncated with ellipsis. Add `tooltip` property to show full text on hover.',
+        story: `Long text is truncated via CSS ellipsis (no layout-loop risk).
+\`ellipsis={true}\` shows the full text as a tooltip on overflow.
+Hover over the truncated links below to see the tooltip.`,
       },
     },
   },
   render: () => (
     <BAIFlex direction="column" gap="md">
-      <BAIFlex direction="column" gap="xs" style={{ width: '200px' }}>
-        <strong>Ellipsis without tooltip</strong>
+      <BAIFlex direction="column" gap="xs" style={{ width: 200 }}>
+        <strong>ellipsis (boolean) — tooltip on overflow</strong>
         <BAILink ellipsis>
           This is a very long link text that will be truncated with ellipsis
         </BAILink>
       </BAIFlex>
-      <BAIFlex direction="column" gap="xs" style={{ width: '200px' }}>
-        <strong>Ellipsis with tooltip</strong>
-        <BAILink
-          ellipsis={{
-            tooltip:
-              'This is a very long link text that will be truncated with ellipsis',
-          }}
-        >
+      <BAIFlex direction="column" gap="xs" style={{ width: 200 }}>
+        <strong>ellipsis with custom tooltip</strong>
+        <BAILink ellipsis={{ tooltip: 'Full text shown here as tooltip' }}>
           This is a very long link text that will be truncated with ellipsis
         </BAILink>
       </BAIFlex>
     </BAIFlex>
   ),
 };
+
+export const EllipsisInsideContainer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `A common pattern: \`BAILink ellipsis\` nested inside a \`BAIText ellipsis\` container
+(as used in \`BAINameActionCell\`). Both truncation layers are CSS-based and do not
+conflict — the outer \`BAIText\` clips the row, the inner \`BAILink\` tooltip shows on hover.`,
+      },
+    },
+  },
+  render: () => (
+    <BAIFlex direction="column" gap="md">
+      <BAIFlex direction="column" gap="xs" style={{ width: 240 }}>
+        <strong>BAILink inside BAIText (table cell pattern)</strong>
+        <BAIText ellipsis={{ tooltip: true }}>
+          <BAILink type="hover" ellipsis>
+            very-long-revision-name-abc123def456ghi789
+          </BAILink>
+        </BAIText>
+      </BAIFlex>
+      <BAIFlex direction="column" gap="xs" style={{ width: 240 }}>
+        <strong>Short text (no truncation)</strong>
+        <BAIText ellipsis={{ tooltip: true }}>
+          <BAILink type="hover" ellipsis>
+            rev-001
+          </BAILink>
+        </BAIText>
+      </BAIFlex>
+    </BAIFlex>
+  ),
+};

packages/backend.ai-ui/src/components/BAILink.tsx

@@ -1,3 +1,4 @@
+import BAIText from './BAIText';
 import { theme, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import React from 'react';
@@ -52,17 +53,13 @@ const BAILink: React.FC<BAILinkProps> = ({
       className={type ? styles?.[type] : undefined}
       onClick={linkProps.onClick}
       disabled={type === 'disabled'}
-      ellipsis={!!ellipsis}
       {...linkProps}
     >
-      {typeof ellipsis === 'object' && ellipsis.tooltip ? (
-        <Typography.Text
-          className={type ? styles?.[type] : undefined}
-          ellipsis={ellipsis}
-        >
+      {ellipsis ? (
+        <BAIText ellipsis={ellipsis === true ? { tooltip: true } : ellipsis}>
           {children}
           {icon}
-        </Typography.Text>
+        </BAIText>
       ) : (
         <>
           {children}