Skip to content

Untitled UI migration for platform/discovery#26312

Merged
karanh37 merged 14 commits intomainfrom
platform-discovery-migration-1
Mar 11, 2026
Merged

Untitled UI migration for platform/discovery#26312
karanh37 merged 14 commits intomainfrom
platform-discovery-migration-1

Conversation

@Rohit0301
Copy link
Copy Markdown
Contributor

@Rohit0301 Rohit0301 commented Mar 7, 2026

Describe your changes:

Migrated the below components:-

  • EntityTitleSection
  • LineageSeaction
  • Data product - InputOutput port tab
  • Entity lineage tab
  • Entity summary panel
  • PLatform lineage

Fixes

I worked on ... because ...

Type of change:

  • Bug fix
  • Improvement
  • New feature
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation

Checklist:

  • I have read the CONTRIBUTING document.
  • My PR title is Fixes <issue-number>: <short explanation>
  • I have commented on my code, particularly in hard-to-understand areas.
  • For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

Summary by Gitar

  • Untitled UI Migration:
    • Migrated platform/discovery components from Untitled UI to standard HTML/CSS, replacing Box components with div elements
    • Updated DataProductNode, PortsLineageView, EntitySummaryPanel, EntityTitleSection, LineageSection components
  • Internationalization:
    • Added useTranslation() hook to components for i18n support
  • Test Updates:
    • Refactored EntitySummaryPanel.test.tsx and related test files to match migrated components
  • Code Cleanup:
    • Removed unused styles and simplified component structure

This will update automatically on new commits.

Copy link
Copy Markdown

@gitar-bot gitar-bot bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the platform/discovery UI migration. The migration looks well-structured overall, but there are 3 issues to address before merging.

karanh37
karanh37 previously approved these changes Mar 10, 2026

const lineageCall =
mockLineage.mock.calls[mockLineage.mock.calls.length - 1];
const lineageCall = mockLineage.mock.calls.at(-1);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Edge Case: PlatformLineage test uses .at(-1) which can return undefined

In PlatformLineage.test.tsx, mockLineage.mock.calls.at(-1) replaced mockLineage.mock.calls[mockLineage.mock.calls.length - 1]. While functionally equivalent when calls exist, .at(-1) returns undefined when the array is empty, and the next line (lineageCall[0].platformHeader) would throw a TypeError. The old code had the same issue, but since this is a refactor opportunity, consider adding a guard or assertion.

Suggested fix:

const lineageCall = mockLineage.mock.calls.at(-1);
expect(lineageCall).toBeDefined();
const platformHeader = lineageCall![0].platformHeader;

Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion

mb: theme.spacing(3),
}}>
>
<Typography as="p" className="tw:font-bold tw:text-gray-400">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Quality: Lineage header label style mismatch: tw:text-gray-400 appears too light

In LineageSection.tsx line 155, the 'Lineage' section header uses tw:text-gray-400 which is typically a very light gray (#9CA3AF). The old code used fontWeight: theme.typography.h1.fontWeight with default text color, suggesting this should be a dark/prominent heading. tw:font-bold tw:text-gray-400 produces bold but light text, which seems like an unintentional visual regression. Consider using tw:text-gray-700 or tw:text-gray-900 for readable header text.

Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion

@gitar-bot
Copy link
Copy Markdown

gitar-bot bot commented Mar 11, 2026

🔍 CI failure analysis for 02f76a9: One flaky Playwright E2E test failed due to an Airflow API internal server error during pipeline redeployment; 291 out of 313 ingestion tests passed successfully, indicating infrastructure instability rather than PR-related failures.

Overview

Analysis of 20 CI logs from the platform-discovery-migration PR reveals a single infrastructure-related failure. The UI migration PR itself built successfully with no compilation or test failures directly attributable to code changes. The 1 test failure is an intermittent Playwright E2E test that failed due to upstream Airflow service issues, not application logic problems.

Failures

Airflow Pipeline Redeployment Flaky Test (confidence: medium)

  • Type: flaky_test, infrastructure
  • Affected jobs: ingestion shard 2 (Playwright E2E)
  • Related to PR: no
  • Root cause: Airflow API returned Internal Server Error (HTTP 500) when attempting to generate workflow with name 'unusual_prefix_4646386575f205486c0fe08d99c45c0574db6b76_airflow_sample_usage'. The test expects success message but receives Airflow service failure. With 291/313 tests passing (93% pass rate), this is a transient infrastructure issue, not a code defect.
  • Suggested fix:
    1. Add retry logic with exponential backoff in TestSuitePipelineRedeploy.spec.ts (line 72) to handle Airflow API timeouts
    2. Verify Airflow service health and workflow name generation in test setup
    3. Consider adding explicit wait/health-check conditions for Airflow service before running pipeline redeploy tests
    4. Monitor Airflow service logs for configuration or resource issues causing workflow generation failures

Summary

  • PR-related failures: 0 — No failures directly caused by the UI migration changes
  • Infrastructure/flaky failures: 1 flaky Playwright test due to Airflow API instability; 291/313 tests passed successfully
  • Recommended action: This PR can be merged safely. The single test failure is an infrastructure issue unrelated to the codebase. Consider adding Airflow service health checks and retry logic to E2E tests to reduce flakiness in CI/CD pipeline.
Code Review 👍 Approved with suggestions 13 resolved / 15 findings

Untitled UI migration for platform/discovery with comprehensive fixes addressing 13 prior issues including CSS class prefixes, non-null assertions, and component styling inconsistencies. Two minor findings remain: PlatformLineage test's .at(-1) can return undefined, and LineageSection header label style appears too light.

💡 Edge Case: PlatformLineage test uses .at(-1) which can return undefined

📄 openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:452 📄 openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:486 📄 openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:558 📄 openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:813

In PlatformLineage.test.tsx, mockLineage.mock.calls.at(-1) replaced mockLineage.mock.calls[mockLineage.mock.calls.length - 1]. While functionally equivalent when calls exist, .at(-1) returns undefined when the array is empty, and the next line (lineageCall[0].platformHeader) would throw a TypeError. The old code had the same issue, but since this is a refactor opportunity, consider adding a guard or assertion.

Suggested fix
const lineageCall = mockLineage.mock.calls.at(-1);
expect(lineageCall).toBeDefined();
const platformHeader = lineageCall![0].platformHeader;
💡 Quality: Lineage header label style mismatch: tw:text-gray-400 appears too light

📄 openmetadata-ui/src/main/resources/ui/src/components/common/LineageSection/LineageSection.tsx:155

In LineageSection.tsx line 155, the 'Lineage' section header uses tw:text-gray-400 which is typically a very light gray (#9CA3AF). The old code used fontWeight: theme.typography.h1.fontWeight with default text color, suggesting this should be a dark/prominent heading. tw:font-bold tw:text-gray-400 produces bold but light text, which seems like an unintentional visual regression. Consider using tw:text-gray-700 or tw:text-gray-900 for readable header text.

✅ 13 resolved
Bug: Drawer title section loses transparent background

📄 openmetadata-ui/src/main/resources/ui/src/components/common/EntityTitleSection/EntityTitleSection.tsx:103 📄 openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/entity-summary-panel.less:189
The old EntityTitleSection had a special case: when className contained drawer-title-section, the background was set to transparent. The new code hardcodes tw:bg-white on the outer div, and the corresponding .drawer-title-section { background-color: transparent !important; } CSS rule was removed from entity-summary-panel.less. However, EntitySummaryPanel.component.tsx still passes className="drawer-title-section" to EntityTitleSection. This means the drawer header will now render with a white background instead of transparent, which is a visual regression.

Bug: Typo tW:left-0 breaks full-screen left positioning

📄 openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/PortsLineageView/PortsLineageView.component.tsx:244
In PortsLineageView.component.tsx line 244, the Tailwind class tW:left-0 has a capital W instead of lowercase tw:left-0. Tailwind prefixes are case-sensitive, so this class will not be recognized and the element will not be anchored to the left edge when in full-screen mode, causing a broken full-screen layout.

Bug: Divider className missing tw: prefix — styles won't apply

📄 openmetadata-ui/src/main/resources/ui/src/components/common/LineageSection/LineageSection.tsx:139 📄 openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/PortsLineageView/PortsLineageView.component.tsx:242
In LineageSection.tsx line 139, the Divider uses className="self-center h-5 mx-4" without the tw: prefix. Every other className in the file uses the tw: prefix convention (e.g., tw:flex, tw:text-blue-700). Without the prefix, these Tailwind utility classes will not be applied, and the divider will not be properly centered or sized.

Bug: tw: prefix incorrectly added to custom Less class m-t-0

📄 openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/PortsLineageView/PortsLineageView.component.tsx:220
In PortsLineageView.component.tsx:220, className="m-t-0" was changed to className="tw:m-t-0". However, m-t-0 is a custom utility class defined in spacing.less (not a Tailwind class). Adding the tw: prefix routes it through Tailwind's namespace which has no m-t-0 class, breaking the margin-top reset. Either keep it as "m-t-0" or migrate to the Tailwind equivalent "tw:mt-0".

Bug: EntityTitleSection bg-white overrides transparent in drawer context

📄 openmetadata-ui/src/main/resources/ui/src/components/common/EntityTitleSection/EntityTitleSection.tsx:103 📄 openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/entity-summary-panel.less:189 📄 openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/PortsLineageView/PortsLineageView.component.tsx:220
The old code conditionally set backgroundColor: 'transparent' when the className included drawer-title-section, and there was a matching .drawer-title-section { background-color: transparent !important; width: 100%; } rule in entity-summary-panel.less. Both mechanisms have been removed. The new code unconditionally applies tw:bg-white on line 103. Since EntitySummaryPanel.component.tsx still passes className="drawer-title-section" to EntityTitleSection, the title section will now render with a white background inside the drawer instead of transparent—a visual regression.

...and 8 more resolved from earlier reviews

🤖 Prompt for agents
Code Review: Untitled UI migration for platform/discovery with comprehensive fixes addressing 13 prior issues including CSS class prefixes, non-null assertions, and component styling inconsistencies. Two minor findings remain: PlatformLineage test's .at(-1) can return undefined, and LineageSection header label style appears too light.

1. 💡 Edge Case: PlatformLineage test uses .at(-1) which can return undefined
   Files: openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:452, openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:486, openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:558, openmetadata-ui/src/main/resources/ui/src/pages/PlatformLineage/PlatformLineage.test.tsx:813

   In PlatformLineage.test.tsx, `mockLineage.mock.calls.at(-1)` replaced `mockLineage.mock.calls[mockLineage.mock.calls.length - 1]`. While functionally equivalent when calls exist, `.at(-1)` returns `undefined` when the array is empty, and the next line (`lineageCall[0].platformHeader`) would throw a TypeError. The old code had the same issue, but since this is a refactor opportunity, consider adding a guard or assertion.

   Suggested fix:
   const lineageCall = mockLineage.mock.calls.at(-1);
   expect(lineageCall).toBeDefined();
   const platformHeader = lineageCall![0].platformHeader;

2. 💡 Quality: Lineage header label style mismatch: tw:text-gray-400 appears too light
   Files: openmetadata-ui/src/main/resources/ui/src/components/common/LineageSection/LineageSection.tsx:155

   In LineageSection.tsx line 155, the 'Lineage' section header uses `tw:text-gray-400` which is typically a very light gray (#9CA3AF). The old code used `fontWeight: theme.typography.h1.fontWeight` with default text color, suggesting this should be a dark/prominent heading. `tw:font-bold tw:text-gray-400` produces bold but light text, which seems like an unintentional visual regression. Consider using `tw:text-gray-700` or `tw:text-gray-900` for readable header text.

Tip

Comment Gitar fix CI or enable auto-apply: gitar auto-apply:on

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply Compact
gitar auto-apply:on         
gitar display:verbose         

Was this helpful? React with 👍 / 👎 | Gitar

@sonarqubecloud
Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

safe to test Add this label to run secure Github workflows on PRs

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants