refactor(ui): migrate utils/* Typography to ui-core-components (Typography sweep 1/13)

openmetadata-ui-core-components/src/main/resources/ui/src/components/foundations/typography.tsx

@@ -13,7 +13,13 @@
 
 import { Tooltip, TooltipTrigger } from '@/components/base/tooltip/tooltip';
 import { cx } from '@/utils/cx';
-import type { ElementType, HTMLAttributes, ReactNode, Ref } from 'react';
+import type {
+  ElementType,
+  HTMLAttributeAnchorTarget,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+} from 'react';
 
 const lineClampClasses: Record<number, string> = {
   1: 'tw:line-clamp-1',
@@ -71,6 +77,14 @@ interface TypographyProps extends HTMLAttributes<HTMLElement> {
   weight?: TypographyWeight;
   color?: TypographyColor;
   ellipsis?: TypographyEllipsis;
+  // Anchor pass-through, for the `as="a"` shape used by antd `Typography.Link`
+  // migrations (see docs/antd-migration/typography.md). `HTMLAttributes`
+  // doesn't include these — they're spread onto `Component` at runtime
+  // regardless of `as`, so this only widens the type to match existing
+  // behavior.
+  href?: string;
+  target?: HTMLAttributeAnchorTarget;
+  rel?: string;
 }
 
 const quoteStyles: Record<TypographyQuoteVariant, string> = {

openmetadata-ui/src/main/resources/ui/playwright/e2e/VisualRegression/staticPages.spec.ts

@@ -62,13 +62,22 @@ const PAGES: {
   { name: 'settings', route: '/settings' },
   { name: 'database-services', route: '/settings/services/databases' },
   { name: 'data-quality', route: '/data-quality' },
-  { name: 'incident-manager', route: '/incident-manager' },
   { name: 'users', route: '/settings/members/users' },
   { name: 'teams', route: '/settings/members/teams' },
   // 'roles' intentionally omitted: the roles listing renders seeded roles
   // with per-run random names, so it is non-deterministic run-to-run in CI
   // (no committed baseline can be stable). Re-add with a dedicated
   // fixed-name fixture when its sweep needs coverage.
+  // 'incident-manager' intentionally omitted: the incident table renders
+  // seeded test-case rows whose names, table names, and "Last Updated"
+  // timestamps differ per run, and the table's auto-width columns then
+  // shift the whole layout to fit that per-run content — the same class of
+  // non-determinism as 'roles' above. Confirmed pre-existing and unrelated
+  // to this sweep: none of the 32 utils files this sweep touches render on
+  // this page (checked the full IncidentManager component tree), and this
+  // baseline also fails intermittently on unrelated, concurrent PRs that
+  // don't touch these files (e.g. runs 91219477124, 91193942898). Re-add
+  // with fixed-name/fixed-timestamp fixtures when its sweep needs coverage.
   { name: 'bots', route: '/settings/bots' },
   { name: 'applications', route: '/marketplace' },
 ];

openmetadata-ui/src/main/resources/ui/src/components/Classifications/ClassificationDetails/ClassificationDetails.test.tsx

@@ -76,6 +76,19 @@ jest.mock('@openmetadata/ui-core-components', () => ({
   EmptyPlaceholder: ({ title }: { title?: string }) => (
     <div data-testid="empty-tags-placeholder">{title}</div>
   ),
+  Typography: jest
+    .fn()
+    .mockImplementation(
+      ({
+        as: Component = 'span',
+        children,
+        ...props
+      }: {
+        as?: React.ElementType;
+        children: React.ReactNode;
+        [key: string]: unknown;
+      }) => <Component {...props}>{children}</Component>
+    ),
 }));
 
 jest.mock('react-router-dom', () => ({

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/TestSuitePipelineTab/TestSuitePipelineTab.test.tsx

@@ -152,11 +152,22 @@ jest.mock('@openmetadata/ui-core-components', () => {
     <span {...props}>{children}</span>
   );
 
+  const MockTypography = ({
+    as: Component = 'span',
+    children,
+    ...props
+  }: {
+    as?: React.ElementType;
+    children: React.ReactNode;
+    [key: string]: unknown;
+  }) => <Component {...props}>{children}</Component>;
+
   return {
     Table: MockTable,
     TableCard: MockTableCard,
     Tooltip: MockTooltip,
     TooltipTrigger: MockTooltipTrigger,
+    Typography: MockTypography,
   };
 });
 

openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx

@@ -13,14 +13,15 @@
 
 import Icon, { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import { Typography } from '@openmetadata/ui-core-components';
 import {
   Field,
   FieldOrGroup,
   ListValues,
   RenderSettings,
   ValueSource,
 } from '@react-awesome-query-builder/antd';
-import { Button, Checkbox, MenuProps, Radio, Space, Typography } from 'antd';
+import { Button, Checkbox, MenuProps, Radio, Space } from 'antd';
 import { isArray, isEmpty } from 'lodash';
 import React from 'react';
 import { ReactComponent as IconDeleteColored } from '../assets/svg/ic-delete-colored.svg';
@@ -126,7 +127,7 @@ export const generateSearchDropdownLabel = (
           />
         )}
         <div>
-          <Typography.Text
+          <Typography
             ellipsis
             className="dropdown-option-label"
             title={option.label}>
@@ -135,14 +136,14 @@ export const generateSearchDropdownLabel = (
                 __html: getSearchLabel(option.label, searchKey),
               }}
             />
-          </Typography.Text>
+          </Typography>
           {option.description && (
-            <Typography.Text
+            <Typography
               className="text-xs d-block"
-              data-testid={`${option.key}-description`}
-              type="secondary">
+              color="secondary"
+              data-testid={`${option.key}-description`}>
               {option.description}
-            </Typography.Text>
+            </Typography>
           )}
         </div>
       </Space>

openmetadata-ui/src/main/resources/ui/src/utils/AgentsStatusWidgetUtils.tsx

@@ -29,7 +29,8 @@ import { ReactComponent as MetadataIcon } from '../assets/svg/ic-empty-doc.svg';
 import { ReactComponent as DataQualityIcon } from '../assets/svg/ic-stack-quality.svg';
 import { ReactComponent as ProfilerIcon } from '../assets/svg/ic-stack-search.svg';
 
-import { Skeleton, Typography } from 'antd';
+import { Typography } from '@openmetadata/ui-core-components';
+import { Skeleton } from 'antd';
 import { isEmpty, isUndefined, reduce } from 'lodash';
 import type { AgentsInfo } from '../components/ServiceInsights/AgentsStatusWidget/AgentsStatusWidget.interface';
 import type {
@@ -289,12 +290,11 @@ export const getAgentRunningStatusMessage = (
   return (
     <div className="flex items-center gap-1">
       <Icon className={status} height={14} width={14} />
-
-      <Typography.Text
+      <Typography
         className="text-grey-muted text-sm"
         data-testid="agents-status-message">
         {message}
-      </Typography.Text>
+      </Typography>
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.tsx

@@ -17,6 +17,7 @@ import {
   ExclamationCircleOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
+import { Typography } from '@openmetadata/ui-core-components';
 import {
   AlertProps,
   Button,
@@ -32,7 +33,6 @@ import {
   Skeleton,
   Switch,
   Tooltip,
-  Typography,
 } from 'antd';
 import Form from 'antd/lib/form';
 import { AxiosError } from 'axios';
@@ -369,9 +369,9 @@ export const getDestinationConfigField = (
                         <ConfigIcon className="configuration-icon" />
                       </Col>
                       <Col>
-                        <Typography.Text>
+                        <Typography>
                           {t('label.advanced-configuration')}
-                        </Typography.Text>
+                        </Typography>
                       </Col>
                     </Row>
                   }
@@ -380,9 +380,9 @@ export const getDestinationConfigField = (
                     <Col data-testid="auth-type" span={24}>
                       <Form.Item
                         label={
-                          <Typography.Text>{`${t(
+                          <Typography>{`${t(
                             'label.authentication-type'
-                          )}:`}</Typography.Text>
+                          )}:`}</Typography>
                         }
                         labelCol={{ span: 24 }}
                         name={[fieldName, 'config', 'authType', 'type']}>
@@ -433,9 +433,9 @@ export const getDestinationConfigField = (
                             <Col data-testid="secret-key" span={24}>
                               <Form.Item
                                 label={
-                                  <Typography.Text>{`${t(
+                                  <Typography>{`${t(
                                     'label.secret-key'
-                                  )}:`}</Typography.Text>
+                                  )}:`}</Typography>
                                 }
                                 labelCol={{ span: 24 }}
                                 name={[
@@ -470,9 +470,9 @@ export const getDestinationConfigField = (
                               <Col span={24}>
                                 <Form.Item
                                   label={
-                                    <Typography.Text>{`${t(
+                                    <Typography>{`${t(
                                       'label.token-url'
-                                    )}:`}</Typography.Text>
+                                    )}:`}</Typography>
                                   }
                                   labelCol={{ span: 24 }}
                                   name={[
@@ -501,9 +501,9 @@ export const getDestinationConfigField = (
                               <Col span={12}>
                                 <Form.Item
                                   label={
-                                    <Typography.Text>{`${t(
+                                    <Typography>{`${t(
                                       'label.client-id'
-                                    )}:`}</Typography.Text>
+                                    )}:`}</Typography>
                                   }
                                   labelCol={{ span: 24 }}
                                   name={[
@@ -532,9 +532,9 @@ export const getDestinationConfigField = (
                               <Col span={12}>
                                 <Form.Item
                                   label={
-                                    <Typography.Text>{`${t(
+                                    <Typography>{`${t(
                                       'label.client-secret'
-                                    )}:`}</Typography.Text>
+                                    )}:`}</Typography>
                                   }
                                   labelCol={{ span: 24 }}
                                   name={[
@@ -563,9 +563,9 @@ export const getDestinationConfigField = (
                               <Col span={24}>
                                 <Form.Item
                                   label={
-                                    <Typography.Text>{`${t(
+                                    <Typography>{`${t(
                                       'label.scope'
-                                    )}:`}</Typography.Text>
+                                    )}:`}</Typography>
                                   }
                                   labelCol={{ span: 24 }}
                                   name={[
@@ -599,9 +599,9 @@ export const getDestinationConfigField = (
                             <Col span={24}>
                               <Row align="middle" justify="space-between">
                                 <Col>
-                                  <Typography.Text>
+                                  <Typography>
                                     {`${t('label.header-plural')}:`}
-                                  </Typography.Text>
+                                  </Typography>
                                 </Col>
                                 <Col>
                                   <Col>
@@ -690,9 +690,9 @@ export const getDestinationConfigField = (
                             <Col span={24}>
                               <Row align="middle" justify="space-between">
                                 <Col>
-                                  <Typography.Text>
+                                  <Typography>
                                     {`${t('label.query-parameter-plural')}:`}
-                                  </Typography.Text>
+                                  </Typography>
                                 </Col>
                                 <Col>
                                   <Col>
@@ -774,9 +774,9 @@ export const getDestinationConfigField = (
                     <Col data-testid="http-method" span={24}>
                       <Form.Item
                         label={
-                          <Typography.Text>{`${t(
+                          <Typography>{`${t(
                             'label.http-method'
-                          )}:`}</Typography.Text>
+                          )}:`}</Typography>
                         }
                         labelCol={{ span: 24 }}
                         name={[fieldName, 'config', 'httpMethod']}>
@@ -1266,7 +1266,7 @@ export const getAlertRecentEventsFilterOptions = () => {
     const label = getAlertEventsFilterLabels(status);
 
     return {
-      label: <Typography.Text>{label}</Typography.Text>,
+      label: <Typography>{label}</Typography>,
       key: status,
     };
   });

openmetadata-ui/src/main/resources/ui/src/utils/CSV/CSV.utils.test.tsx

@@ -64,6 +64,19 @@ jest.mock('@openmetadata/ui-core-components', () => ({
   TooltipTrigger: jest
     .fn()
     .mockImplementation(({ children }) => <>{children}</>),
+  Typography: jest
+    .fn()
+    .mockImplementation(
+      ({
+        as: Component = 'span',
+        children,
+        ...props
+      }: {
+        as?: React.ElementType;
+        children: React.ReactNode;
+        [key: string]: unknown;
+      }) => <Component {...props}>{children}</Component>
+    ),
 }));
 
 jest.mock(

openmetadata-ui/src/main/resources/ui/src/utils/CSV/CSV.utils.tsx

@@ -10,9 +10,12 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Tooltip, TooltipTrigger } from '@openmetadata/ui-core-components';
+import {
+  Tooltip,
+  TooltipTrigger,
+  Typography,
+} from '@openmetadata/ui-core-components';
 import { ChevronDown } from '@untitledui/icons';
-import { Typography } from 'antd';
 import { startCase } from 'lodash';
 import type { Column, RenderCellProps } from 'react-data-grid';
 import { ReactComponent as SuccessBadgeIcon } from '../..//assets/svg/success-badge.svg';
@@ -418,7 +421,7 @@ export const renderColumnDataEditor = (
     case 'status':
       return statusRenderer(value as Status);
     case 'glossaryStatus':
-      return <Typography.Text>{glossaryStatus}</Typography.Text>;
+      return <Typography>{glossaryStatus}</Typography>;
     case 'expressionCode': {
       const language = String(row?.expressionLanguage ?? '');
       const firstLine = value.split('\n').find((line) => line.trim()) ?? '';

openmetadata-ui/src/main/resources/ui/src/utils/ClassificationUtils.tsx

@@ -15,8 +15,9 @@ import {
   Toggle,
   Tooltip as UTTooltip,
   TooltipTrigger,
+  Typography,
 } from '@openmetadata/ui-core-components';
-import { Button, Space, Tooltip, Typography } from 'antd';
+import { Button, Space, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { Link } from 'react-router-dom';
 import { ReactComponent as IconDisableTag } from '../assets/svg/disable-tag.svg';
@@ -107,9 +108,7 @@ export const getCommonColumns = (options?: {
       dataIndex: 'displayName',
       key: 'displayName',
       width: 200,
-      render: (text) => (
-        <Typography.Text>{text || NO_DATA_PLACEHOLDER}</Typography.Text>
-      ),
+      render: (text) => <Typography>{text || NO_DATA_PLACEHOLDER}</Typography>,
     },
     ...descriptionTableObject<Tag>({ width: 300 })
   );