Skip to content

refactor(DimensionalityTab): migrate table to core-ui Table component #27969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shah-harshit wants to merge 12 commits into
base: main
Choose a base branch
from
Open

refactor(DimensionalityTab): migrate table to core-ui Table component #27969

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7cd5369
refactor(DimensionalityTab): migrate table to core-ui Table component
shah-harshit May 7, 2026
15f8f97
refactor(DimensionalityTab): flatten cell renderer and memoize columns
shah-harshit May 7, 2026
284c732
fix checkstyle
shah-harshit May 7, 2026
ec3b931
minor ui fix
shah-harshit May 7, 2026
ad50291
refactor(IncidentManager): migrate table to core-ui Table component
shah-harshit May 7, 2026
35a89e5
Revert "refactor(IncidentManager): migrate table to core-ui Table com…
shah-harshit May 7, 2026
3e4cc93
Merge branch 'main' into feat/migrate-dimensionality-tab-core-ui-table
shah-harshit May 7, 2026
baa37d4
Merge branch 'main' into feat/migrate-dimensionality-tab-core-ui-table
shah-harshit May 8, 2026
ba81bf0
add border
shah-harshit May 8, 2026
29a006d
fix failing test case
shah-harshit May 8, 2026
c2c35ab
address gitar-bot comments
shah-harshit May 8, 2026
fc56967
Merge branch 'main' into feat/migrate-dimensionality-tab-core-ui-table
shah-harshit May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/IncidentManager.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const isVisible = async (locator: Locator) =>

const expectIncidentTableRowsToContain = async (page: Page, text: string) => {
const rows = page.locator(
'.ant-table-tbody tr:not(.ant-table-measure-row):not(.ant-table-placeholder)'
'[data-testid="test-case-incident-manager-table"] tbody tr'
);
const rowCount = await rows.count();

Expand Down
144 changes: 71 additions & 73 deletions ...ces/ui/src/components/DataQuality/IncidentManager/DimensionalityTab/DimensionalityTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Select, Skeleton, Tooltip } from '@openmetadata/ui-core-components';
import { HelpCircle } from '@untitledui/icons';
import { ColumnsType } from 'antd/lib/table';
import { Select, Skeleton, Table } from '@openmetadata/ui-core-components';
import { format } from 'date-fns';
import { isEmpty, split, toLower } from 'lodash';
import { DateRangeObject } from 'Models';
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useState, type ComponentType } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
Expand All @@ -43,11 +41,15 @@ import NoDataPlaceholderNew from '../../../common/ErrorWithPlaceholder/NoDataPla
import MuiDatePickerMenu from '../../../common/MuiDatePickerMenu/MuiDatePickerMenu';
import StatusBadge from '../../../common/StatusBadge/StatusBadge.component';
import { StatusType } from '../../../common/StatusBadge/StatusBadge.interface';
import Table from '../../../common/Table/Table';
import { ProfilerTabPath } from '../../../Database/Profiler/ProfilerDashboard/profilerDashboard.interface';
import DimensionalityHeatmap from './DimensionalityHeatmap/DimensionalityHeatmap.component';
import { DimensionResultWithTimestamp } from './DimensionalityHeatmap/DimensionalityHeatmap.interface';

const TransComponent = Trans as ComponentType<{
i18nKey: string;
components: Record<number, JSX.Element>;
}>;
Comment thread
shah-harshit marked this conversation as resolved.
Outdated

const DimensionalityTab = () => {
const { t } = useTranslation();
const { dimensionKey } = useRequiredParams<{ dimensionKey?: string }>();
Expand Down Expand Up @@ -176,84 +178,60 @@ const DimensionalityTab = () => {
});
}, [dimensionData]);

const tableColumns: ColumnsType<{
key: string;
dimensionValue: string;
result: DimensionResultWithTimestamp;
}> = [
{
title: t('label.status'),
dataIndex: 'result',
key: 'status',
width: 120,
render: (result: DimensionResultWithTimestamp) => {
return result?.testCaseStatus ? (
const dimensionTableColumns = useMemo(
() => [
{ id: 'status', label: t('label.status') },
{
id: 'impactScore',
label: t('label.impact-score'),
tooltip: t('message.impact-score-helper'),
},
{ id: 'dimensionValue', label: t('label.dimension') },
{ id: 'lastRun', label: t('label.last-run') },
],
[t]
);

const renderCell = (
col: { id: string },
row: (typeof getLatestResultPerDimension)[number]
) => {
switch (col.id) {
case 'status':
return row.result?.testCaseStatus ? (
<StatusBadge
dataTestId="status-badge"
label={TEST_CASE_STATUS_LABELS[result.testCaseStatus]}
status={toLower(result.testCaseStatus) as StatusType}
label={TEST_CASE_STATUS_LABELS[row.result.testCaseStatus]}
status={toLower(row.result.testCaseStatus) as StatusType}
/>
) : (
<span className="tw:text-sm">--</span>
);
Comment thread
shah-harshit marked this conversation as resolved.
Outdated
},
},
{
title: (
<div className="tw:flex tw:items-center tw:gap-2">
{t('label.impact-score')}
<Tooltip
placement="top"
title={
<span className="tw:text-xs">
{t('message.impact-score-helper')}
</span>
}>
<HelpCircle height={16} width={16} />
</Tooltip>
</div>
),
dataIndex: 'result',
key: 'impactScore',
width: 120,
render: (result: DimensionResultWithTimestamp) => {
case 'impactScore':
return (
<span className="tw:text-sm">{result?.impactScore ?? '--'}</span>
<span className="tw:text-sm">{row.result?.impactScore ?? '--'}</span>
);
},
},
{
title: t('label.dimension'),
dataIndex: 'dimensionValue',
key: 'dimensionValue',
width: 200,
render: (dimensionValue: string, record) => {
case 'dimensionValue':
return (
<Link
className="tw:text-text-brand-secondary"
to={getTestCaseDimensionsDetailPagePath(
testCase?.fullyQualifiedName || '',
record.result.dimensionKey || ''
row.result.dimensionKey || ''
Comment thread
gitar-bot[bot] marked this conversation as resolved.
Outdated
)}>
{dimensionValue}
{row.dimensionValue}
</Link>
);
},
},
{
title: t('label.last-run'),
dataIndex: 'result',
key: 'lastRun',
width: 200,
render: (result: DimensionResultWithTimestamp) => {
return result?.timestamp ? (
<DateTimeDisplay timestamp={result.timestamp} />
case 'lastRun':
return row.result?.timestamp ? (
<DateTimeDisplay timestamp={row.result.timestamp} />
) : (
<span className="tw:text-sm">--</span>
);
},
},
];
default:
return null;
}
};

const noDataPlaceholder = useMemo(() => {
if (isLoading) {
Expand All @@ -267,7 +245,7 @@ const DimensionalityTab = () => {

return (
<NoDataPlaceholderNew size={SIZE.LARGE}>
<Trans
<TransComponent
components={{
0: <span className="tw:text-sm" />,
1: <span className="tw:text-sm" />,
Expand All @@ -287,8 +265,9 @@ const DimensionalityTab = () => {
{`${t('label.select-dimension')}:`}
</p>
<Select
className="tw:min-w-37.5"
className="tw:min-w-37.5 tw:h-8"
data-testid="dimension-select"
fontSize="xs"
items={dimensionColumnsOptions}
size="sm"
value={selectedDimension ?? null}
Expand Down Expand Up @@ -329,13 +308,32 @@ const DimensionalityTab = () => {
entityText: selectedDimension || '',
})}
</p>
<Table
bordered
columns={tableColumns}
dataSource={getLatestResultPerDimension}
loading={isLoading}
pagination={false}
/>
<Table aria-label={selectedDimension ?? ''}>
<Table.Header columns={dimensionTableColumns}>
{(col) => (
<Table.Head
id={col.id}
key={col.id}
label={col.label}
tooltip={col.tooltip}
/>
)}
</Table.Header>
<Table.Body items={getLatestResultPerDimension}>
{(row) => (
<Table.Row
columns={dimensionTableColumns}
id={row.key}
key={row.key}>
{(col) => (
<Table.Cell key={col.id}>
{renderCell(col, row)}
</Table.Cell>
)}
</Table.Row>
)}
</Table.Body>
</Table>
</div>
</>
)}
Expand Down
7 changes: 6 additions & 1 deletion ...identManager/TestCaseStatus/InlineIncidentStatus/IncidentStatusPopoverShell.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export type IncidentStatusPopoverShellProps = {
dataTestid: string;
trigger: ReactNode;
children: ReactNode;
popoverClassName?: string;
};

export const IncidentStatusPopoverShell = ({
Expand All @@ -30,10 +31,14 @@ export const IncidentStatusPopoverShell = ({
dataTestid,
trigger,
children,
popoverClassName,
}: IncidentStatusPopoverShellProps) => (
<PopoverTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
{trigger}
<Popover containerClassName={containerClassName} data-testid={dataTestid}>
<Popover
className={popoverClassName}
containerClassName={containerClassName}
data-testid={dataTestid}>
{children}
</Popover>
</PopoverTrigger>
Expand Down
6 changes: 4 additions & 2 deletions ...nts/DataQuality/IncidentManager/TestCaseStatus/InlineTestCaseIncidentStatus.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -569,6 +569,7 @@ const InlineTestCaseIncidentStatus = ({
containerClassName="tw:max-h-[500px] tw:min-w-0 tw:w-[320px] tw:border tw:border-border-secondary"
dataTestid={`${data.testCaseReference?.name}-assignee-popover`}
isOpen={showAssigneePopover}
popoverClassName="tw:!max-h-none"
trigger={renderStatusChipButton()}
onOpenChange={(open) => {
if (open) {
Expand All @@ -586,9 +587,10 @@ const InlineTestCaseIncidentStatus = ({
if (showResolvedPopover) {
return (
<IncidentStatusPopoverShell
containerClassName="tw:min-w-0 tw:w-[320px] tw:border tw:border-border-secondary"
containerClassName="tw:min-w-0 tw:w-80 tw:overflow-y-auto tw:border tw:border-border-secondary"
dataTestid={`${data.testCaseReference?.name}-resolved-popover`}
isOpen={showResolvedPopover}
popoverClassName="tw:!max-h-none"
trigger={renderStatusChipButton()}
onOpenChange={(open) => {
if (!open) {
Expand All @@ -611,7 +613,7 @@ const InlineTestCaseIncidentStatus = ({
onOpenChange={handleStatusMenuOpenChange}>
{renderStatusChipButton()}
<Dropdown.Popover
className="tw:min-w-[100px] tw:w-max tw:overflow-auto"
className="tw:min-w-25 tw:w-max tw:overflow-auto"
placement="top">
{statusMenuItems}
</Dropdown.Popover>
Expand Down
2 changes: 1 addition & 1 deletion .../src/main/resources/ui/src/components/Database/Profiler/DataQualityTab/DataQualityTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,7 +513,7 @@ const DataQualityTab: React.FC<DataQualityTabProps> = ({
TestCasePageTabs.DIMENSIONALITY
)}>
<div
className="tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:bg-blue-50 tw:p-2 tw:text-primary"
className="tw:flex tw:min-w-13 tw:items-center tw:gap-2 tw:rounded-md tw:bg-blue-50 tw:p-2 tw:text-primary"
data-testid={`dimension-count-${record.name}`}>
<DimensionIcon height={12} width={12} />
<span className="tw:text-xs tw:font-medium">
Expand Down
Loading
Loading